/*
 * SolarSet Permit Portal — intake wizard. Everything is scoped under .ssp-app.
 * Styled to match solarset.com: black and amber, Roboto / Roboto Condensed,
 * light grey page sections, white panels and nearly square corners.
 */
.ssp-app {
	--ssp-amber: #ffb300;       /* solarset.com accent */
	--ssp-amber-soft: #fff6dc;
	--ssp-black: #000000;
	--ssp-ink: #3a3a3a;         /* solarset.com body text */
	--ssp-muted: #5c5c5c;
	--ssp-line: #c9c9c9;
	--ssp-bg: #eeeeee;          /* solarset.com section grey */
	--ssp-card: #ffffff;
	--ssp-warn: #8a5a00;
	--ssp-red: #a3261d;
	--ssp-radius: 3px;
	--ssp-head: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif;
	color: var(--ssp-ink);
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}
.ssp-app *, .ssp-app *::before, .ssp-app *::after { box-sizing: border-box; }
.ssp-shell { background: var(--ssp-bg); border-radius: var(--ssp-radius); overflow: hidden; }

.ssp-top {
	background: var(--ssp-black); color: #fff; padding: 18px 24px; border-bottom: 4px solid var(--ssp-amber);
	display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center;
}
.ssp-top strong { font-family: var(--ssp-head); font-size: 28px; font-weight: 500; line-height: 1.1; color: var(--ssp-amber); text-transform: uppercase; letter-spacing: .01em; }
.ssp-top span { font-size: 16px; }
.ssp-top a { color: var(--ssp-amber); font-weight: 700; text-decoration: none; white-space: nowrap; }

.ssp-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; padding: 24px; align-items: start; }
.ssp-side, .ssp-main { background: var(--ssp-card); border-radius: var(--ssp-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ssp-side { padding: 18px; }
.ssp-main { padding: 28px 32px 32px; }

.ssp-side-title { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--ssp-muted); }
.ssp-side-note { margin: 12px 0; font-size: 15px; color: var(--ssp-muted); }
.ssp-steps { list-style: none; margin: 0; padding: 0; }
.ssp-steps li { margin: 0; }
.ssp-steps button {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; margin: 0;
	background: none; border: 0; border-left: 4px solid transparent; border-radius: 0;
	font: inherit; font-size: 17px; color: var(--ssp-ink); text-align: left; cursor: pointer;
}
.ssp-steps button:disabled { cursor: default; color: var(--ssp-ink); opacity: 1; }
.ssp-steps b {
	flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e2e2e2; color: var(--ssp-muted);
	display: grid; place-items: center; font-size: 15px; font-weight: 700;
}
.ssp-steps .is-done b { background: var(--ssp-amber); color: var(--ssp-black); }
.ssp-steps .is-current b { background: var(--ssp-black); color: var(--ssp-amber); }
.ssp-steps .is-current button { background: var(--ssp-amber-soft); border-left-color: var(--ssp-amber); font-weight: 700; color: var(--ssp-black); }

.ssp-progress { height: 8px; background: #dddddd; border-radius: 0; overflow: hidden; margin-bottom: 24px; }
.ssp-progress span { display: block; height: 100%; background: var(--ssp-amber); transition: width .25s; }

.ssp-main h2 { margin: 0 0 8px; font-family: var(--ssp-head); font-size: 34px; line-height: 1.15; font-weight: 500; color: var(--ssp-ink); }
.ssp-main h3 { margin: 26px 0 6px; font-family: inherit; font-size: 21px; font-weight: 500; color: var(--ssp-ink); }
.ssp-lead { margin: 0 0 20px; color: var(--ssp-muted); }
.ssp-help { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ssp-muted); }

.ssp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.ssp-grid-tight { margin-top: 0; grid-template-columns: 90px minmax(0, 1fr); }
.ssp-wide { grid-column: 1 / -1; }
.ssp-field label, .ssp-cards-wrap legend { display: block; margin: 0 0 6px; padding: 0; font-weight: 500; font-size: 17px; color: var(--ssp-ink); }
.ssp-field input, .ssp-field select, .ssp-field textarea, .ssp-linkrow input {
	width: 100%; min-height: 52px; padding: 12px 14px; margin: 0;
	font: inherit; font-size: 18px; color: var(--ssp-black); background: #fff;
	border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); box-shadow: none;
}
.ssp-field textarea { min-height: 96px; resize: vertical; }
.ssp-field input:focus, .ssp-field select:focus, .ssp-field textarea:focus { border-color: var(--ssp-black); }
.ssp-app input:focus-visible, .ssp-app select:focus-visible, .ssp-app textarea:focus-visible, .ssp-app button:focus-visible, .ssp-card:focus-within {
	outline: 3px solid var(--ssp-amber); outline-offset: 2px;
}
.ssp-field input:disabled, .ssp-field select:disabled, .ssp-field textarea:disabled { background: #f4f4f4; }

.ssp-cards-wrap { border: 0; margin: 20px 0 0; padding: 0; min-width: 0; }
.ssp-cards { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssp-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssp-card {
	display: flex; gap: 12px; align-items: center; min-height: 64px; padding: 14px 16px; margin: 0;
	border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); background: #fff; cursor: pointer;
}
.ssp-card input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ssp-black); }
.ssp-card.is-on { border-color: var(--ssp-amber); background: var(--ssp-amber-soft); box-shadow: inset 4px 0 0 var(--ssp-amber); color: var(--ssp-black); }
.ssp-card-tall { align-items: flex-start; }
.ssp-card-tall input { margin-top: 4px; }
.ssp-card-tall span { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ssp-card-tall strong { font-weight: 700; }
.ssp-card-tall em { font-style: normal; font-size: 16px; color: var(--ssp-muted); }
.ssp-tag { padding: 3px 10px; border-radius: 2px; background: #e2e2e2; font-size: 14px; font-weight: 500; }
.ssp-tag-rec { background: var(--ssp-black); color: var(--ssp-amber); }

/* Buttons follow the site: amber with black text (primary), black with amber text (secondary). */
.ssp-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 30px; margin: 0;
	font: inherit; font-size: 19px; font-weight: 500; color: var(--ssp-black); background: var(--ssp-amber);
	border: 2px solid var(--ssp-amber); border-radius: var(--ssp-radius); cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.ssp-btn:hover:not(:disabled) { background: var(--ssp-black); border-color: var(--ssp-black); color: var(--ssp-amber); }
.ssp-btn-ghost { background: #fff; border-color: var(--ssp-black); color: var(--ssp-black); }
.ssp-btn-ghost:hover:not(:disabled) { background: var(--ssp-black); color: var(--ssp-amber); }
.ssp-btn-small { min-height: 44px; padding: 8px 16px; font-size: 16px; }
.ssp-btn:disabled { opacity: .55; cursor: default; }
.ssp-linkbtn {
	background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--ssp-black); cursor: pointer;
	text-decoration: underline; text-decoration-color: var(--ssp-amber); text-decoration-thickness: 3px; text-underline-offset: 3px;
}
.ssp-linkbtn:hover { background: var(--ssp-amber-soft); }
.ssp-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }

.ssp-note, .ssp-notice { margin: 16px 0 0; padding: 12px 14px; border-left: 4px solid var(--ssp-amber); background: var(--ssp-amber-soft); font-size: 16px; color: var(--ssp-black); }
.ssp-error { margin: 16px 0 0; padding: 12px 14px; border-left: 4px solid var(--ssp-red); background: #fbe9e7; color: var(--ssp-red); font-weight: 500; }
.ssp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ssp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ssp-chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px; margin: 0;
	font: inherit; font-size: 16px; color: var(--ssp-ink); background: #fff; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); cursor: pointer;
}
.ssp-chip i { width: 14px; height: 14px; border-radius: 50%; }
.ssp-chip small { color: var(--ssp-muted); font-size: 14px; }
.ssp-chip.is-on { border-color: var(--ssp-black); background: var(--ssp-black); color: #fff; font-weight: 500; }
.ssp-chip.is-on small { color: var(--ssp-amber); }
.ssp-map { height: 440px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); background: #dddddd; z-index: 0; }
.ssp-map-failed { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ssp-muted); }
.ssp-distances { margin-top: 10px; padding: 10px 14px; background: var(--ssp-black); color: #fff; border-radius: var(--ssp-radius); font-size: 16px; font-weight: 500; }
.ssp-pin { background: none; border: 0; }
.ssp-pin span {
	position: absolute; left: 0; bottom: 14px; transform: translateX(-50%); padding: 4px 10px; border-radius: 2px;
	color: #fff; font: 700 13px/1.3 Roboto, "Segoe UI", Arial, sans-serif; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.ssp-pin b { position: absolute; left: -1.5px; bottom: 0; width: 3px; height: 14px; }

.ssp-photo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid #dddddd; }
.ssp-photo strong { font-weight: 500; color: var(--ssp-black); }
.ssp-photo .ssp-btn { flex: none; position: relative; overflow: hidden; }
.ssp-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ssp-files { list-style: none; margin: 8px 0 0; padding: 0; font-size: 16px; }
.ssp-files li { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0; word-break: break-all; }
.ssp-remove { color: var(--ssp-red); font-weight: 500; text-decoration-color: currentColor; text-decoration-thickness: 1px; }

.ssp-sum { margin-top: 18px; padding: 16px 18px; border: 1px solid #dddddd; border-top: 3px solid var(--ssp-black); border-radius: var(--ssp-radius); }
.ssp-sum header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ssp-sum h3 { margin: 0 0 8px; }
.ssp-sum dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 17px; }
.ssp-sum dt { margin: 0; color: var(--ssp-muted); font-weight: 400; }
.ssp-sum dd { margin: 0; font-weight: 500; color: var(--ssp-black); overflow-wrap: anywhere; }
.ssp-sum dd.ssp-missing { color: var(--ssp-warn); font-weight: 400; }
.ssp-ack { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-left: 4px solid var(--ssp-amber); background: var(--ssp-amber-soft); color: var(--ssp-black); cursor: pointer; }
.ssp-ack input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ssp-black); }

.ssp-linkbox { margin: 0 0 8px; }
.ssp-linkbox p { margin: 0 0 8px; }
.ssp-linkrow { display: flex; gap: 10px; }
.ssp-linkrow input { min-width: 0; font-size: 15px; font-family: ui-monospace, Consolas, monospace; }
.ssp-saved { margin-bottom: 24px; padding: 16px 18px; border: 2px solid var(--ssp-amber); border-radius: var(--ssp-radius); background: var(--ssp-amber-soft); }

@media (max-width: 860px) {
	.ssp-body { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
	.ssp-main { padding: 20px 16px 24px; order: 1; }
	.ssp-side { order: 2; }
	.ssp-top strong { font-size: 24px; }
	.ssp-main h2 { font-size: 28px; }
	.ssp-grid, .ssp-cards, .ssp-cols-3 { grid-template-columns: minmax(0, 1fr); }
	.ssp-grid-tight { grid-template-columns: 90px minmax(0, 1fr); }
	.ssp-sum dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.ssp-sum dd { margin-bottom: 8px; }
	.ssp-map { height: 380px; }
	.ssp-photo { flex-direction: column; }
	.ssp-linkrow { flex-direction: column; }
}

/* ---------- v0.2: lighter intake, guided map, help, print ---------- */
.ssp-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; padding: 0; }
.ssp-facts li { margin: 0; padding: 12px 14px; background: var(--ssp-black); color: #fff; border-radius: var(--ssp-radius); font-size: 15px; line-height: 1.35; }
.ssp-facts strong { display: block; color: var(--ssp-amber); font-family: var(--ssp-head); font-size: 20px; font-weight: 500; }

.ssp-check { display: inline-flex !important; align-items: center; gap: 10px; margin: 10px 0 0 !important; font-weight: 400 !important; cursor: pointer; }
.ssp-check input { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; accent-color: var(--ssp-black); }
.ssp-info { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 0; background: none; border: 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--ssp-black); text-decoration: underline; text-decoration-color: var(--ssp-amber); text-decoration-thickness: 3px; text-underline-offset: 3px; cursor: pointer; }
.ssp-info b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ssp-black); color: var(--ssp-amber); font: italic 700 15px Georgia, serif; }
.ssp-field .ssp-info { display: flex; }
.ssp-helpbox { margin-top: 10px; padding: 14px; border-left: 4px solid var(--ssp-amber); background: var(--ssp-amber-soft); color: var(--ssp-black); }
.ssp-helpbox p { margin: 10px 0 0; font-size: 16px; line-height: 1.45; }
.ssp-helpimg svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; background: #fff; border-radius: var(--ssp-radius); }

.ssp-suggest-wrap { position: relative; }
.ssp-suggest { position: absolute; z-index: 1200; left: 0; right: 0; margin: -2px 0 0; padding: 0; list-style: none; background: #fff; border: 2px solid var(--ssp-black); border-radius: 0 0 var(--ssp-radius) var(--ssp-radius); box-shadow: 0 8px 18px rgba(0, 0, 0, .2); max-height: 300px; overflow: auto; }
.ssp-suggest li { margin: 0; padding: 12px 14px; font-size: 17px; cursor: pointer; border-top: 1px solid #e2e2e2; }
.ssp-suggest li:first-child { border-top: 0; }
.ssp-suggest li:hover { background: var(--ssp-amber-soft); }
.ssp-suggest-wrap .ssp-help { position: static; }

.ssp-maphint { margin: 18px 0 8px; font-weight: 500; color: var(--ssp-black); }
.ssp-map.is-drawing, .ssp-map.is-drawing .leaflet-grab, .ssp-map.is-drawing .leaflet-interactive { cursor: crosshair; }
.ssp-map-review { height: 380px; margin-top: 14px; }
.ssp-tip { background: rgba(0, 0, 0, .8); border: 0; border-radius: 2px; box-shadow: none; color: #fff; font: 700 13px/1.3 Roboto, "Segoe UI", Arial, sans-serif; padding: 3px 8px; }
.ssp-tip::before { display: none; }
.ssp-pop { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font: 16px Roboto, "Segoe UI", Arial, sans-serif; }

.ssp-tasks { list-style: none; margin: 0 0 14px; padding: 0; }
.ssp-task { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 0; border-top: 1px solid #dddddd; }
.ssp-task > i { flex: none; width: 16px; height: 16px; margin-top: 5px; border-radius: 50%; border: 2px solid #000; }
.ssp-task > div:first-of-type { flex: 1; min-width: 0; }
.ssp-task strong { font-weight: 500; color: var(--ssp-black); }
.ssp-task .ssp-help { margin-top: 2px; }
.ssp-task.is-active { background: var(--ssp-amber-soft); box-shadow: -8px 0 0 var(--ssp-amber-soft), 8px 0 0 var(--ssp-amber-soft); }
.ssp-task-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ssp-ok { font-weight: 700; color: #1b6b2f; white-space: nowrap; }
.ssp-extras { margin: 0 0 12px; padding-top: 12px; border-top: 1px solid #dddddd; }
.ssp-extras > span { display: block; margin-bottom: 8px; font-weight: 500; color: var(--ssp-black); }
.ssp-extras .ssp-chips { margin-bottom: 0; }
.ssp-chip:disabled, .ssp-linkbtn:disabled { opacity: .45; cursor: default; }
.ssp-chip i { border: 2px solid #000; }
.ssp-drawbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0; padding: 10px 14px; background: #e2e2e2; color: var(--ssp-ink); font-size: 16px; border-radius: var(--ssp-radius) var(--ssp-radius) 0 0; position: sticky; top: 0; z-index: 1100; }
.ssp-drawbar.is-on { background: var(--ssp-black); color: #fff; font-weight: 500; }
.ssp-drawbar.is-on .ssp-btn-ghost { background: var(--ssp-black); border-color: #fff; color: #fff; }
.ssp-drawbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.ssp-drawbar + .ssp-map { border-top-left-radius: 0; border-top-right-radius: 0; }

.ssp-titlerow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ssp-titlerow h2 { margin: 0; }
.ssp-printhead { display: none; }

@media (max-width: 860px) {
	.ssp-facts { grid-template-columns: minmax(0, 1fr); }
	.ssp-task { flex-wrap: wrap; }
	.ssp-task-actions { width: 100%; justify-content: flex-start; padding-left: 28px; }
}

@media print {
	html.ssp-printing body > *:not(#ssp-app) { display: none !important; }
	html.ssp-printing, html.ssp-printing body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
	.ssp-app { max-width: none !important; margin: 0 !important; font-size: 12pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.ssp-noprint, .ssp-app .leaflet-control-zoom { display: none !important; }
	.ssp-shell, .ssp-body, .ssp-main { display: block; background: #fff; padding: 0; margin: 0; box-shadow: none; border-radius: 0; }
	.ssp-printhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 3px solid #000; }
	.ssp-printhead strong { font-family: var(--ssp-head); font-size: 18pt; }
	.ssp-printhead span { font-size: 10pt; }
	.ssp-titlerow h2 { display: none; }
	.ssp-sum { break-inside: avoid; margin-top: 10px; padding: 10px 12px; }
	.ssp-sum dl { font-size: 11pt; grid-template-columns: 170px minmax(0, 1fr); }
	.ssp-sum dd.ssp-missing { color: #666; }
	.ssp-map-review { height: 4.3in; }
}

/* ---------- v0.3: pie-chart steps and phone-first layout ---------- */
.ssp-pie {
	flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: conic-gradient(var(--ssp-amber) calc(var(--p, 0) * 1%), #d2d2d2 0);
}
.ssp-pie span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ssp-ink); font-size: 13px; font-weight: 700; line-height: 1; }
.ssp-pie.is-full { background: var(--ssp-amber); }
.ssp-pie.is-full span { background: none; color: var(--ssp-black); font-size: 19px; }
.ssp-steps .is-current .ssp-pie { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ssp-black); }
.ssp-steps button { gap: 12px; }
.ssp-steps button small { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ssp-muted); }
.ssp-step-label { min-width: 0; }
.ssp-stepname { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0 0 8px; font-size: 15px; color: var(--ssp-muted); }
.ssp-stepname strong { color: var(--ssp-black); font-weight: 500; }
.ssp-progress { margin-bottom: 20px; }
.ssp-savelater { display: none; }
.ssp-none { font-weight: 500; font-size: 16px; }

@media (max-width: 860px) {
	/* The form fills the phone screen edge to edge. */
	.ssp-app { font-size: 17px; }
	.ssp-shell { border-radius: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; overflow: visible; }
	.ssp-top { padding: 12px 16px; gap: 2px 16px; }
	.ssp-top strong { font-size: 21px; }
	.ssp-top span { font-size: 15px; }
	.ssp-body { padding: 0; gap: 0; }

	/* Steps become a row of pie charts pinned to the top; tap one to jump to it. */
	.ssp-side { order: 0; position: sticky; top: 0; z-index: 1300; padding: 8px 10px; border-radius: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
	.ssp-side-title, .ssp-side-note, .ssp-side > .ssp-btn { display: none; }
	.ssp-steps { display: flex; justify-content: space-between; gap: 2px; }
	.ssp-steps li { flex: 1 1 0; display: flex; justify-content: center; }
	.ssp-steps button { width: auto; min-width: 44px; min-height: 44px; padding: 4px; justify-content: center; border-left: 0; border-bottom: 3px solid transparent; }
	.ssp-steps .is-current button { background: none; border-bottom-color: var(--ssp-black); }
	.ssp-steps .is-current .ssp-pie { box-shadow: none; }
	.ssp-step-label, .ssp-steps button small { display: none; }

	.ssp-main { order: 1; padding: 16px 16px 0; border-radius: 0; box-shadow: none; }
	.ssp-main h2 { font-size: 26px; }
	.ssp-main h3 { font-size: 19px; }
	.ssp-lead { margin-bottom: 16px; }
	.ssp-facts { gap: 6px; margin: 10px 0 14px; }
	.ssp-facts li { padding: 9px 12px; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
	.ssp-facts strong { display: inline; font-size: 18px; }
	.ssp-card { min-height: 56px; padding: 12px 14px; }

	/* Back / Next stay within thumb reach. */
	.ssp-nav { position: sticky; bottom: 0; z-index: 1250; margin: 24px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, .18); }
	.ssp-nav .ssp-btn { min-height: 52px; flex: 1 1 0; padding: 10px 12px; }
	.ssp-nav > span { display: none; }
	.ssp-savelater { display: block; width: 100%; padding: 16px 0 22px; text-align: center; font-size: 16px; }

	/* Map: tall enough to work in, short enough to scroll past. */
	.ssp-map { height: min(62vh, 480px); min-height: 300px; margin-left: -16px; margin-right: -16px; width: auto; border-left: 0; border-right: 0; border-radius: 0; }
	.ssp-drawbar { margin-left: -16px; margin-right: -16px; border-radius: 0; top: 60px; font-size: 15px; padding: 8px 12px; }
	.ssp-drawbtns .ssp-btn { min-height: 42px; }
	.ssp-map-review { height: 300px; }
	.ssp-task-actions { padding-left: 28px; }
	.ssp-task-actions .ssp-btn { min-height: 46px; }
	.ssp-chip { min-height: 44px; padding: 6px 12px; font-size: 15px; }
	.ssp-titlerow h2 { flex: 1 1 100%; }
	.ssp-sum { padding: 14px; }
	.ssp-suggest li { padding: 14px; }
	.ssp-helpbox { margin-left: -4px; margin-right: -4px; }
}

/* ---------- v0.3.2: guided map card, movable corner dots, inline photo status ---------- */
.ssp-mapcard { scroll-margin-top: 76px; margin: 0; padding: 12px 14px 14px; background: #fff; border: 2px solid var(--ssp-black); border-bottom: 0; border-radius: var(--ssp-radius) var(--ssp-radius) 0 0; }
.ssp-mapcard + .ssp-map { border-color: var(--ssp-black); border-top-left-radius: 0; border-top-right-radius: 0; }
.ssp-maptabs { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ssp-maptabs::-webkit-scrollbar { display: none; }
.ssp-maptab {
	flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 6px 12px;
	font: inherit; font-size: 15px; color: var(--ssp-ink); background: #f1f1f1; border: 2px solid transparent; border-radius: 99px; cursor: pointer; white-space: nowrap;
}
.ssp-maptab i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000; }
.ssp-maptab b { color: #1b6b2f; font-size: 15px; }
.ssp-maptab.is-on { background: var(--ssp-amber-soft); border-color: var(--ssp-amber); color: var(--ssp-black); font-weight: 700; }
.ssp-mapq { display: block; font-family: var(--ssp-head); font-size: 23px; font-weight: 500; line-height: 1.2; color: var(--ssp-black); }
.ssp-maphelp { margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--ssp-muted); }
.ssp-mapbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ssp-mapbtns .ssp-btn { min-height: 46px; }
.ssp-mapflash { margin: 0 0 10px; padding: 8px 12px; background: #e4f3e7; color: #14501f; font-size: 15px; font-weight: 500; border-radius: var(--ssp-radius); animation: ssp-fade .5s ease-out; }
.ssp-mapcard .ssp-chips { margin: 12px 0 0; }
.ssp-mapcard .ssp-files { margin-top: 10px; }
.ssp-mapcard.is-drawing { background: var(--ssp-black); }
.ssp-mapcard.is-drawing .ssp-mapq { color: var(--ssp-amber); }
.ssp-mapcard.is-drawing .ssp-maphelp { color: #fff; }
.ssp-mapcard.is-drawing .ssp-btn-ghost { background: var(--ssp-black); border-color: #fff; color: #fff; }
.ssp-mapcard.is-drawing .ssp-btn:disabled { opacity: .45; }
@keyframes ssp-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Corner dots: big enough for a thumb. */
.ssp-dot { background: none; border: 0; cursor: grab; }
.ssp-dot i { display: block; width: 22px; height: 22px; margin: 6px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #000, 0 2px 6px rgba(0, 0, 0, .5); }

.ssp-upstatus { margin: 8px 0 0; padding: 8px 12px; background: var(--ssp-amber-soft); border-left: 4px solid var(--ssp-amber); font-size: 16px; font-weight: 500; color: var(--ssp-black); }
.ssp-upstatus.is-error { background: #fbe9e7; border-left-color: var(--ssp-red); color: var(--ssp-red); }
.ssp-btn.is-busy { opacity: .5; }
.ssp-files .ssp-ok { margin-right: -6px; }

@media (max-width: 860px) {
	/* Back / Next sit at the end of the step, not pinned over it. */
	.ssp-nav { position: static; margin: 28px 0 0; padding: 0; box-shadow: none; background: none; }
	.ssp-mapcard { margin-left: -16px; margin-right: -16px; border-left: 0; border-right: 0; border-radius: 0; padding: 10px 16px 12px; }
	.ssp-mapq { font-size: 21px; }
	.ssp-map { height: min(56vh, 460px); }
	.ssp-photo { gap: 10px; }
	.ssp-photo .ssp-btn { width: 100%; min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .ssp-mapflash { animation: none; } }

/* ---------- v0.4: owner-first page 1, address list in the page flow, pinned progress ---------- */
/* The suggestion list opens in the page (not floating over it), so it never hides the next fields. */
.ssp-suggest { position: static; margin: 6px 0 0; max-height: none; box-shadow: none; border-radius: var(--ssp-radius); }
.ssp-suggest li { padding: 14px; }
.ssp-suggest .ssp-suggest-close { background: #f1f1f1; color: var(--ssp-black); font-weight: 500; text-align: center; }
.ssp-suggest .ssp-suggest-close:hover { background: #e2e2e2; }
.ssp-check-block { display: flex !important; margin: 12px 0 4px !important; padding: 12px 14px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); font-size: 17px; font-weight: 500 !important; color: var(--ssp-black); }
.ssp-check-block:has(input:checked) { border-color: var(--ssp-amber); background: var(--ssp-amber-soft); }
.ssp-side-progress { display: none; }
.ssp-app.is-uploading .ssp-photo label.ssp-btn, .ssp-app.is-uploading .ssp-nav, .ssp-app.is-uploading .ssp-steps { opacity: .45; pointer-events: none; }
.ssp-main > .ssp-error { scroll-margin-top: 90px; }

@media (max-width: 860px) {
	/* The amber progress bar rides along under the step dots. */
	.ssp-side { padding-bottom: 0; }
	.ssp-side-progress { display: block; height: 6px; margin: 6px -10px 0; }
	.ssp-main > .ssp-progress { display: none; }
	.ssp-stepname { margin-bottom: 14px; }
	.ssp-mapcard { scroll-margin-top: 82px; }
}

/* ---------- v0.4.1: still summary map, phone-safe printing ---------- */
.ssp-map-review { pointer-events: none; cursor: default; }

@media print {
	/* Leave out everything around the form, and undo the phone layout tricks that do not suit paper. */
	.ssp-print-hide { display: none !important; }
	.ssp-print-path { display: block !important; position: static !important; float: none !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: visible !important; transform: none !important; background: #fff !important; }
	html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
	.ssp-shell { margin: 0 !important; width: auto !important; max-width: none !important; overflow: visible !important; }
	.ssp-body, .ssp-main { display: block !important; padding: 0 !important; overflow: visible !important; }
	.ssp-map-review { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; height: 3.6in !important; border: 1px solid #000 !important; }
	.ssp-sum { break-inside: auto; }
	.ssp-sum header, .ssp-sum dt { break-after: avoid; }
}
@media print { .ssp-sum header .ssp-linkbtn { display: none !important; } }

/* ---------- v0.5: SolarSet input form ---------- */
.ssp-infobox { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 16px; margin: 0 0 18px; padding: 14px 16px; background: #f4f4f4; border-left: 4px solid var(--ssp-black); font-size: 16px; }
.ssp-infobox dt { margin: 0; color: var(--ssp-muted); }
.ssp-infobox dd { margin: 0; color: var(--ssp-black); font-weight: 500; overflow-wrap: anywhere; }
.ssp-infobox a, .ssp-top span a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--ssp-amber); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ssp-top span a { color: var(--ssp-amber); text-decoration: none; }
.ssp-copy { width: 100%; max-width: 260px; min-height: 36px; padding: 4px 8px; font: inherit; font-size: 15px; font-family: ui-monospace, Consolas, monospace; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); background: #fff; }
.ssp-ask { margin: 0 0 6px; padding: 10px 14px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); font-size: 16px; }
.ssp-ask summary { cursor: pointer; font-weight: 700; color: var(--ssp-black); }
.ssp-ask ul { margin: 10px 0 2px; padding-left: 22px; }
.ssp-ask li { margin: 4px 0; }
.ssp-call { margin: 12px 0; padding: 4px 14px 14px; border: 1px solid #dddddd; border-left: 4px solid var(--ssp-amber); border-radius: var(--ssp-radius); }
.ssp-feats { list-style: none; margin: 12px 0 0; padding: 0; }
.ssp-feats li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 8px 0; border-top: 1px solid #e2e2e2; font-size: 16px; }
.ssp-feats i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #000; }
.ssp-feat-name { flex: 0 0 210px; font-weight: 500; color: var(--ssp-black); }
.ssp-feats input { flex: 1 1 180px; min-width: 0; min-height: 40px; padding: 6px 10px; font: inherit; font-size: 16px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); }
.ssp-feat-hint { color: var(--ssp-muted); font-size: 14px; }
.ssp-checklist { list-style: none; margin: 0 0 18px; padding: 0; }
.ssp-checklist li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 0; border-top: 1px solid #e2e2e2; }
.ssp-checklist li > span { margin-left: auto; color: var(--ssp-muted); font-size: 15px; text-align: right; }
.ssp-finish { margin-top: 18px; }
.ssp-finish .ssp-btn { min-height: 56px; }
.ssp-staff .ssp-map { height: 560px; }
.ssp-gate { max-width: 1100px; margin: 0 auto; padding: 16px; font-family: Roboto, "Segoe UI", Arial, sans-serif; }
.ssp-gate table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ssp-gate th, .ssp-gate td { padding: 8px 10px; border-bottom: 1px solid #dddddd; text-align: left; }
.ssp-gate th { background: #000; color: #ffb300; }
.ssp-gate .page-title-action, .ssp-gate .button { display: inline-block; margin-left: 10px; padding: 6px 14px; background: #ffb300; color: #000; font-weight: 500; text-decoration: none; border-radius: 3px; font-size: 15px; }
@media (max-width: 860px) {
	.ssp-infobox { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.ssp-infobox dd { margin-bottom: 8px; }
	.ssp-feat-name { flex-basis: 100%; }
	.ssp-staff .ssp-map { height: min(56vh, 460px); }
}
/* The current step keeps its pie (an older rule painted it solid black). */
.ssp-steps .is-current .ssp-pie { background: conic-gradient(var(--ssp-amber) calc(var(--p, 0) * 1%), #d2d2d2 0); color: inherit; }
.ssp-steps .is-current .ssp-pie.is-full { background: var(--ssp-amber); }
.ssp-steps .is-done .ssp-pie, .ssp-steps .ssp-pie { color: inherit; }

/* ---------- v0.6: employee login, projects page, job bar, desktop SolarSet layout ---------- */
.ssp-stafflink { margin: 0; padding: 10px 16px 14px; text-align: right; font-size: 13px; }
.ssp-stafflink a { color: var(--ssp-muted); text-decoration: underline; }

.ssp-loginpage { display: flex; justify-content: center; padding: 32px 16px 56px; }
.ssp-login { width: 100%; max-width: 420px; background: #fff; border-radius: var(--ssp-radius); box-shadow: 0 2px 12px rgba(0, 0, 0, .18); overflow: hidden; }
.ssp-login-head { background: var(--ssp-black); border-bottom: 4px solid var(--ssp-amber); padding: 18px 22px; }
.ssp-login-head strong { display: block; font-family: var(--ssp-head); font-size: 26px; font-weight: 500; color: var(--ssp-amber); text-transform: uppercase; line-height: 1.1; }
.ssp-login-head span { color: #fff; font-size: 15px; }
.ssp-login-body { padding: 22px; }
.ssp-login-body .ssp-field { margin-bottom: 14px; }
.ssp-login-body .ssp-btn { width: 100%; margin-top: 4px; }
.ssp-login-body .ssp-error { margin: 0 0 14px; }
.ssp-login-body .ssp-help a, .ssp-login-body p a { color: var(--ssp-black); font-weight: 500; }

/* Projects page: one column per stage. */
.ssp-board .ssp-shell { background: var(--ssp-bg); }
.ssp-board .ssp-top span a { color: var(--ssp-amber); text-decoration: none; font-weight: 700; }
.ssp-board-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding: 14px 24px; background: #fff; border-bottom: 1px solid #dcdcdc; }
.ssp-board-bar p { margin: 0; font-size: 16px; color: var(--ssp-ink); }
.ssp-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 20px 24px; align-items: start; }
.ssp-col { background: #e2e2e2; border-radius: var(--ssp-radius); padding: 12px; min-height: 140px; border-top: 4px solid var(--ssp-black); }
.ssp-col-review { border-top-color: var(--ssp-amber); }
.ssp-col-done { border-top-color: #1b6b2f; }
.ssp-col header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ssp-col h2, .ssp-filling h2 { margin: 0; font-family: var(--ssp-head); font-size: 19px; line-height: 1.15; font-weight: 500; color: var(--ssp-black); }
.ssp-col header b, .ssp-filling h2 b { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 99px; background: var(--ssp-black); color: var(--ssp-amber); font: 700 14px/1.4 Roboto, sans-serif; text-align: center; }
.ssp-col-hint { margin: 4px 0 10px; font-size: 13px; line-height: 1.35; color: var(--ssp-muted); }
.ssp-col-empty { margin: 0; padding: 14px 0; text-align: center; color: #8a8a8a; font-size: 14px; }
.ssp-pcard { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; padding: 12px; background: #fff; border-radius: var(--ssp-radius); border-left: 4px solid var(--ssp-black); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); color: var(--ssp-ink); text-decoration: none; font-size: 14px; line-height: 1.4; transition: box-shadow .15s, transform .15s; }
.ssp-pcard:hover, .ssp-pcard:focus-visible { box-shadow: 0 4px 12px rgba(0, 0, 0, .22); transform: translateY(-1px); border-left-color: var(--ssp-amber); }
.ssp-pcard strong { font-size: 16px; font-weight: 700; color: var(--ssp-black); overflow-wrap: anywhere; }
.ssp-pcard-wo { font-weight: 500; }
.ssp-pcard.is-late { border-left-color: var(--ssp-red); }
.ssp-pcard.is-late em { color: var(--ssp-red); font-weight: 700; }
.ssp-pcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.ssp-pcard-foot em { font-style: normal; color: var(--ssp-muted); font-size: 13px; }
.ssp-chipst { padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 700; background: #e2e2e2; color: var(--ssp-black); }
.ssp-chipst.is-needed { background: var(--ssp-amber); }
.ssp-chipst.is-started { background: #fff6dc; border: 1px solid var(--ssp-amber); }
.ssp-chipst.is-done { background: #d7f0db; color: #14501f; }
.ssp-filling { margin: 0 24px 24px; padding: 14px; background: #fff; border-radius: var(--ssp-radius); border-top: 4px solid #9a9a9a; }
.ssp-filling h2 { display: flex; align-items: center; gap: 10px; }
.ssp-filling-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ssp-filling-list .ssp-pcard { margin: 0; border: 1px solid #dcdcdc; border-left: 4px solid #9a9a9a; box-shadow: none; }

/* The strip under the header of the SolarSet form: stage and folders. */
.ssp-jobbar { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; padding: 10px 24px; background: #fff; border-bottom: 1px solid #dcdcdc; font-size: 15px; }
.ssp-jobbar-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ssp-jobbar-item > span { color: var(--ssp-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ssp-jobbar-item strong { color: var(--ssp-black); font-weight: 500; overflow-wrap: anywhere; }
.ssp-jobbar-item strong a { color: var(--ssp-black); text-decoration: underline; text-decoration-color: var(--ssp-amber); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ssp-jobbar-item em { font-style: normal; color: var(--ssp-muted); }
.ssp-jobbar select { min-height: 38px; padding: 4px 10px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ssp-black); background: var(--ssp-amber-soft); border: 2px solid var(--ssp-amber); border-radius: var(--ssp-radius); }
.ssp-jobbar .ssp-linkbtn { font-size: 13px; font-weight: 500; text-decoration-thickness: 2px; }

.ssp-calc { margin: 0; padding: 12px 14px; background: var(--ssp-black); color: var(--ssp-amber); font-size: 19px; font-weight: 700; border-radius: var(--ssp-radius); }
.ssp-note.is-warn { border-left-color: var(--ssp-red); background: #fdf1ef; }
.ssp-note ul { margin: 6px 0 0; padding-left: 20px; }
.ssp-note p { margin: 6px 0 0; }
.ssp-map-hazard { height: 420px; margin-top: 8px; }

/* SolarSet's side is built for a desk: wider, denser, map beside its controls. */
@media (min-width: 1100px) {
	.ssp-app.ssp-staff, .ssp-app.ssp-board { max-width: none !important; width: auto !important; margin-left: calc(50% - 50vw + 24px) !important; margin-right: calc(50% - 50vw + 24px) !important; }
	.ssp-staff .ssp-body { grid-template-columns: 250px minmax(0, 1fr); }
	.ssp-staff .ssp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ssp-staff .ssp-grid.ssp-grid-tight { grid-template-columns: 90px minmax(0, 1fr); }
	.ssp-staff .ssp-field input, .ssp-staff .ssp-field select { min-height: 44px; padding: 8px 12px; font-size: 16px; }
	.ssp-staff .ssp-field label, .ssp-staff .ssp-cards-wrap legend { font-size: 15px; }
	.ssp-staff .ssp-main { padding: 22px 28px 28px; }
	.ssp-staff .ssp-main h2 { font-size: 28px; }
	.ssp-maplayout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
	.ssp-maplayout .ssp-mapcard { border: 2px solid var(--ssp-black); border-radius: var(--ssp-radius); max-height: 640px; overflow: auto; }
	.ssp-maplayout .ssp-map { height: 640px; border-radius: var(--ssp-radius); border: 2px solid var(--ssp-black); }
	.ssp-mapside { position: sticky; top: 12px; }
	.ssp-maplayout .ssp-feat-name { flex-basis: 100%; }
}
@media (max-width: 1099px) {
	.ssp-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.ssp-columns { grid-template-columns: minmax(0, 1fr); padding: 12px; }
	.ssp-board-bar, .ssp-jobbar { padding: 10px 16px; }
	.ssp-filling { margin: 0 12px 16px; }
	.ssp-jobbar { position: static; }
	.ssp-staff .ssp-side { top: 0; }
}

/* ---------- v0.7: AHJ records, contacts, website results ---------- */
.ssp-contact { margin: 12px 0; padding: 4px 14px 12px; border: 1px solid #dddddd; border-left: 4px solid var(--ssp-black); border-radius: var(--ssp-radius); }
.ssp-found { margin: 16px 0; padding: 14px 16px; background: #f4f4f4; border-left: 4px solid var(--ssp-amber); font-size: 15px; }
.ssp-found p { margin: 0 0 8px; }
.ssp-found a { color: var(--ssp-black); font-weight: 500; overflow-wrap: anywhere; }
.ssp-found h4 { margin: 14px 0 6px; font-size: 16px; font-weight: 700; }
.ssp-found ul { list-style: none; margin: 0; padding: 0; }
.ssp-found li { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0; padding: 8px 0; border-top: 1px solid #dcdcdc; }
.ssp-found li > div, .ssp-found li > strong { min-width: 0; }
.ssp-found li strong { display: block; color: var(--ssp-black); overflow-wrap: anywhere; }
.ssp-found li span { display: block; color: var(--ssp-muted); font-size: 14px; overflow-wrap: anywhere; }
.ssp-found li .ssp-btn { flex: none; min-height: 36px; padding: 4px 14px; }
.ssp-found li .ssp-ok { flex: none; display: inline; }
.ssp-pastcalls { margin: 12px 0; padding: 12px 14px; background: var(--ssp-amber-soft); border-left: 4px solid var(--ssp-amber); font-size: 15px; }
.ssp-pastcalls ul { list-style: none; margin: 8px 0 0; padding: 0; }
.ssp-pastcalls li { margin: 0; padding: 8px 0; border-top: 1px solid #ecd9a0; }
.ssp-pastcalls b, .ssp-pastcalls span, .ssp-pastcalls em { display: block; }
.ssp-pastcalls em { font-style: normal; color: var(--ssp-muted); font-size: 13px; }

.ssp-pad { padding: 20px 24px 28px; }
.ssp-crumb { margin: 0 0 12px; font-size: 15px; }
.ssp-crumb a, .ssp-stale a { color: var(--ssp-black); font-weight: 500; }
.ssp-stale { margin: 12px 24px 20px; font-size: 14px; color: var(--ssp-muted); }
.ssp-filling .ssp-stale { margin: 12px 0 0; }
.ssp-filter { min-height: 40px; width: 280px; max-width: 100%; padding: 6px 12px; font: inherit; font-size: 15px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); vertical-align: middle; }
.ssp-board-bar .ssp-btn { vertical-align: middle; }
.ssp-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; border-radius: var(--ssp-radius); overflow: hidden; }
.ssp-table th { padding: 10px 12px; background: var(--ssp-black); color: var(--ssp-amber); text-align: left; font-weight: 500; font-size: 14px; }
.ssp-table td { padding: 10px 12px; border-bottom: 1px solid #e2e2e2; vertical-align: top; color: var(--ssp-ink); }
.ssp-table td a { color: var(--ssp-black); }
.ssp-table td span { color: var(--ssp-muted); font-size: 13px; }
.ssp-table td .ssp-chipst { color: var(--ssp-black); font-size: 12px; }
.ssp-table tr.is-empty td { background: #fafafa; color: #8a8a8a; }
.ssp-table.ssp-edit td { padding: 4px; }
.ssp-table.ssp-edit input { width: 100%; min-height: 38px; padding: 6px 8px; font: inherit; font-size: 15px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); }
.ssp-ahjform { box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ssp-ahjform .ssp-nav .ssp-btn { text-decoration: none; }
.ssp-top span a { color: var(--ssp-amber); text-decoration: none; font-weight: 700; }
@media (min-width: 1100px) { .ssp-ahjform .ssp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ssp-pad { padding: 12px; } .ssp-table { display: block; overflow-x: auto; } .ssp-found li { flex-direction: column; align-items: flex-start; } }

/* ---------- v0.8: employee and dealer portals ---------- */
/* Small login buttons at the top right of public pages. */
.ssp-sitebtns { position: absolute; top: 12px; right: 16px; z-index: 9999; display: flex; gap: 8px; font-family: Roboto, "Segoe UI", Arial, sans-serif; }
.ssp-sitebtns a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; font-weight: 500; line-height: 1.4; text-decoration: none; border-radius: 3px; border: 1px solid #000; background: #fff; color: #000; }
.ssp-sitebtns a.is-employee { background: #000; color: #ffb300; }
.ssp-sitebtns a:hover { background: #ffb300; color: #000; border-color: #ffb300; }
.admin-bar .ssp-sitebtns { top: 44px; }

.ssp-login-head { display: flex; align-items: center; gap: 12px; }
.ssp-login-head .ssp-ico { flex: none; color: var(--ssp-amber); }

.ssp-portal { --ssp-accent: var(--ssp-amber); }
.ssp-portal-dealer { --ssp-accent: #3ea636; }
.ssp-portal .ssp-shell { background: var(--ssp-bg); border-radius: var(--ssp-radius); overflow: hidden; min-height: 70vh; }
.ssp-ptop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 14px 28px; background: #000; border-bottom: 4px solid var(--ssp-accent); }
.ssp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ssp-amber); }
.ssp-brand span { display: flex; flex-direction: column; line-height: 1.05; }
.ssp-brand strong { font-family: var(--ssp-head); font-size: 28px; font-weight: 500; letter-spacing: .02em; color: #fff; }
.ssp-brand em { font-style: normal; font-family: var(--ssp-head); font-size: 17px; color: var(--ssp-accent); text-transform: uppercase; letter-spacing: .06em; }
.ssp-pnav { display: flex; flex-wrap: wrap; gap: 4px; }
.ssp-pnav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; border-radius: 3px; }
.ssp-pnav a .ssp-ico { color: var(--ssp-accent); }
.ssp-pnav a:hover, .ssp-pnav a.is-on { background: #222; color: var(--ssp-accent); }
.ssp-psub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 8px 28px; background: #fff; border-bottom: 1px solid #dcdcdc; font-size: 14px; color: var(--ssp-muted); }
.ssp-psub strong { color: var(--ssp-black); font-weight: 500; }
.ssp-phero { padding: 30px 28px 6px; }
.ssp-phero h1 { margin: 0; font-family: var(--ssp-head); font-size: 36px; font-weight: 500; color: var(--ssp-black); }
.ssp-phero p { margin: 4px 0 0; font-size: 17px; color: var(--ssp-muted); }
.ssp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 28px 10px; max-width: 1040px; }
.ssp-tile { position: relative; display: flex; align-items: flex-start; gap: 16px; min-height: 128px; padding: 20px 20px 18px; background: #fff; border: 2px solid transparent; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); color: var(--ssp-ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.ssp-tile-ico { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #000; color: var(--ssp-accent); }
.ssp-tile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 72px; }
.ssp-tile-body strong { font-family: var(--ssp-head); font-size: 22px; font-weight: 500; line-height: 1.15; color: var(--ssp-black); }
.ssp-tile-body > span { font-size: 15px; line-height: 1.4; color: var(--ssp-muted); }
.ssp-tile-count { display: inline-block; align-self: flex-start; margin-top: 6px; padding: 2px 8px; font-style: normal; font-size: 13px; font-weight: 700; background: var(--ssp-amber); color: #000; border-radius: 2px; }
.ssp-tile-badge { position: absolute; top: 14px; right: 14px; padding: 2px 9px; font-size: 12px; font-weight: 700; border-radius: 99px; background: #ececec; color: #6a6a6a; text-transform: uppercase; letter-spacing: .04em; }
.ssp-tile.is-live { border-color: var(--ssp-accent); }
.ssp-tile.is-live .ssp-tile-badge { background: var(--ssp-accent); color: #000; }
a.ssp-tile:hover, a.ssp-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
div.ssp-tile { cursor: default; }
div.ssp-tile .ssp-tile-ico { background: #3a3a3a; }
div.ssp-tile:hover { border-color: #d0d0d0; }
.ssp-tile.is-empty { background: transparent; border: 2px dashed #bdbdbd; box-shadow: none; }
.ssp-tile.is-empty .ssp-tile-ico { background: transparent; border: 2px dashed #bdbdbd; color: #9a9a9a; }
.ssp-tile.is-empty strong { color: #8a8a8a; }
.ssp-pfoot { margin: 6px 28px 28px; font-size: 14px; color: var(--ssp-muted); }
.ssp-pfoot a, .ssp-ppanel a { color: var(--ssp-black); font-weight: 500; }
.ssp-ppanel { max-width: 980px; padding: 22px 28px 30px; }
.ssp-ppanel h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-family: var(--ssp-head); font-size: 32px; font-weight: 500; color: var(--ssp-black); }
.ssp-ppanel h1 .ssp-ico { color: var(--ssp-accent); background: #000; border-radius: 50%; padding: 8px; box-sizing: content-box; }
.ssp-ppanel h3 { margin: 24px 0 6px; font-size: 20px; font-weight: 500; }
.ssp-plist { display: flex; flex-direction: column; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ssp-plist > div { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 14px 18px; border-top: 1px solid #ececec; font-size: 15px; }
.ssp-plist > div:first-child { border-top: 0; }
.ssp-plist strong { color: var(--ssp-black); font-weight: 500; }
.ssp-plist span { color: var(--ssp-muted); }
.ssp-plist em { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: 99px; background: #ececec; color: #6a6a6a; }
.ssp-pscroll { overflow-x: auto; }
.ssp-matrix td, .ssp-matrix th { text-align: center; }
.ssp-matrix tbody th { text-align: left; background: #fff; color: var(--ssp-black); font-weight: 500; border-bottom: 1px solid #e2e2e2; }
.ssp-yes { color: #1b6b2f; font-weight: 700; font-size: 18px; }
.ssp-no { color: #b5b5b5; }
.ssp-preview-note { margin: 22px 0 0; padding: 10px 14px; font-size: 14px; color: var(--ssp-muted); background: #fff; border-left: 4px solid var(--ssp-accent); }
@media (min-width: 1100px) {
	.ssp-app.ssp-portal { max-width: none !important; width: auto !important; margin-left: calc(50% - 50vw + 24px) !important; margin-right: calc(50% - 50vw + 24px) !important; }
}
@media (max-width: 760px) {
	.ssp-tiles { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
	.ssp-ptop, .ssp-psub, .ssp-phero, .ssp-ppanel { padding-left: 16px; padding-right: 16px; }
	.ssp-pnav a span { display: none; }
	.ssp-tile { min-height: 0; }
	.ssp-plist > div { grid-template-columns: minmax(0, 1fr); }
	.ssp-sitebtns { top: 6px; right: 8px; }
}
/* The login buttons sit in a slim bar above the site header instead of over it. */
.ssp-sitebtns { position: relative; top: auto; right: auto; justify-content: flex-end; padding: 5px 16px; background: #000; }
.ssp-sitebtns a { border-color: #555; background: #000; color: #fff; }
.ssp-sitebtns a.is-employee { background: #000; color: #fff; }
.ssp-sitebtns a .ssp-ico { color: #ffb300; }
.admin-bar .ssp-sitebtns { top: auto; }

/* ---------- v0.8.1: SolarSet logo, centred tiles ---------- */
.ssp-logo { display: block; height: 34px; width: auto; max-width: 100%; }
.ssp-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
.ssp-brand em { font-style: normal; font-family: var(--ssp-head); font-size: 15px; color: var(--ssp-accent); text-transform: uppercase; letter-spacing: .12em; line-height: 1; padding-left: 2px; }
.ssp-login-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.ssp-login-head .ssp-logo { height: 32px; }
.ssp-login-head strong { font-size: 22px; }
.ssp-login-dealer { border-bottom-color: #3ea636; }
.ssp-login-dealer strong { color: #6fd166; }

/* Home pages: tiles centred, heading over them. */
.ssp-phero { text-align: center; padding: 34px 20px 4px; }
.ssp-tiles { margin: 0 auto; width: 100%; max-width: 1040px; }
.ssp-pfoot { text-align: center; }
.ssp-ppanel { margin: 0 auto; }

@media (max-width: 760px) {
	.ssp-ptop { padding: 12px 14px; gap: 8px; align-items: center; }
	.ssp-logo { height: 26px; }
	.ssp-brand em { font-size: 12px; }
	.ssp-pnav { gap: 0; margin-left: auto; }
	.ssp-pnav a { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; }
	.ssp-psub { padding: 6px 14px; font-size: 12px; }
	.ssp-phero { padding: 22px 14px 0; }
	.ssp-phero h1 { font-size: 28px; }
	.ssp-phero p { font-size: 15px; }
	.ssp-tile { padding: 16px 14px; gap: 12px; }
	.ssp-tile-ico { width: 48px; height: 48px; }
	.ssp-tile-body { padding-right: 0; }
	.ssp-tile-body strong { font-size: 20px; padding-right: 92px; }
	.ssp-tile-badge { top: 12px; right: 10px; font-size: 11px; }
	.ssp-login-head .ssp-logo { height: 26px; }
	.ssp-ppanel h1 { font-size: 26px; }
}

/* ---------- v0.9: plan set wording ---------- */
.ssp-scope { margin: 0 0 18px; padding: 12px 14px; background: #f4f4f4; border-left: 4px solid var(--ssp-black); font-size: 15px; line-height: 1.45; color: var(--ssp-ink); text-align: justify; }
.ssp-scope strong { color: var(--ssp-black); }
.ssp-type { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 700; background: #e2e2e2; color: #000; white-space: nowrap; }
.ssp-type-county, .ssp-type-city { background: #ececec; }
.ssp-type-state { background: #dbe7f6; color: #12406e; }
.ssp-type-utility { background: #fff1c2; color: #6b4b00; }
.ssp-linked select { min-height: 44px; padding: 6px 10px; font: inherit; font-size: 15px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); max-width: 100%; }
.ssp-linked-head { margin: 10px 0 6px; }
.ssp-linked-head a { color: var(--ssp-black); font-weight: 500; font-size: 14px; }
.ssp-linked-head em { font-style: normal; color: var(--ssp-muted); font-size: 14px; }
.ssp-linked-list { margin: 0 0 6px; padding-left: 18px; font-size: 15px; }
.ssp-pad-note { margin: 12px 24px 0; font-size: 14px; color: var(--ssp-muted); }
.ssp-filter-type { width: auto; }
/* Inside the public site's frame: no pinned bars (the frame grows to full height, so they would not stick). */
.ssp-embed .ssp-side, .ssp-embed .ssp-mapcard { position: static; }
.ssp-embed .ssp-stafflink { display: none; }

/* ---------- v0.10: colour swap (employee green, dealer yellow) and Dealer Management ---------- */
.ssp-portal-employee { --ssp-accent: #3ea636; }
.ssp-portal-dealer { --ssp-accent: var(--ssp-amber); }
.ssp-login-employee { border-bottom-color: #3ea636; }
.ssp-login-employee strong { color: #6fd166; }
.ssp-login-dealer { border-bottom-color: var(--ssp-amber); }
.ssp-login-dealer strong { color: var(--ssp-amber); }
.ssp-portal-employee .ssp-tile-count { background: #3ea636; color: #000; }
.ssp-sitebtns a.is-employee .ssp-ico { color: #6fd166; }

.ssp-dm { max-width: 1040px; }
.ssp-dm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ssp-dm-head h1 { margin: 0; }
.ssp-dm .ssp-lead { margin: 8px 0 14px; }
.ssp-dlist { display: flex; flex-direction: column; gap: 10px; }
.ssp-dcard { display: flex; align-items: stretch; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); border-left: 4px solid var(--ssp-accent); }
.ssp-dcard-main { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; text-decoration: none; color: var(--ssp-muted); font-size: 14px; min-width: 0; }
.ssp-dcard-main strong { font-family: var(--ssp-head); font-size: 21px; font-weight: 500; color: var(--ssp-black); }
.ssp-dcard-main:hover strong { text-decoration: underline; }
.ssp-dcard-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; padding: 12px 18px; font-size: 14px; }
.ssp-dstat { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #ececec; color: #555; }
.ssp-dstat-active { background: #dcf3d9; color: #1b6b2f; }
.ssp-dstat-onboarding { background: #fff1c2; color: #6b4b00; }
.ssp-dstat-inactive { background: #f3dcdc; color: #8a1d16; }
.ssp-dtabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; overflow-x: auto; margin: 0 -4px 6px; padding: 8px 4px; background: var(--ssp-bg); }
.ssp-dtabs a { flex: none; padding: 7px 14px; border-radius: 99px; background: #fff; color: var(--ssp-black); font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.ssp-dtabs a:hover { background: #000; color: var(--ssp-accent); }
.ssp-dm h3 { scroll-margin-top: 60px; }
.ssp-dform, .ssp-dadd { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); padding: 4px 18px 18px; }
.ssp-dform h3:first-of-type { margin-top: 14px; }
.ssp-dadd { margin-top: 10px; padding-top: 14px; }
.ssp-dform .ssp-nav { margin-top: 18px; }
.ssp-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.ssp-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #e2e2e2; border-radius: 4px; font-size: 14px; color: var(--ssp-muted); cursor: pointer; }
.ssp-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #000; }
.ssp-check strong { display: block; color: var(--ssp-black); font-weight: 500; font-size: 15px; }
.ssp-drow { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; }
.ssp-drow > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ssp-drow em { font-style: normal; font-size: 13px; color: var(--ssp-muted); background: none !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; overflow-wrap: anywhere; }
.ssp-drow form { margin: 0; }
.ssp-drow.is-off strong { color: #9a9a9a; text-decoration: line-through; }
.ssp-dpreview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 28px; background: #fff1c2; border-bottom: 1px solid #e6d18a; font-size: 14px; color: #4a3600; }
.ssp-dpreview select { min-height: 36px; padding: 4px 8px; font: inherit; border: 1px solid #c9b46a; border-radius: 3px; background: #fff; max-width: 100%; }
.ssp-dpreview a { color: #000; font-weight: 500; }
.ssp-dwelcome { display: inline-block; margin: 12px auto 0 !important; padding: 10px 16px; max-width: 640px; background: #fff; border-left: 4px solid var(--ssp-accent); color: var(--ssp-ink) !important; font-size: 15px !important; text-align: left; }
@media (max-width: 760px) {
	.ssp-dcard { flex-direction: column; }
	.ssp-dcard-side { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 18px 12px; }
	.ssp-checks { grid-template-columns: minmax(0, 1fr); }
	.ssp-drow { grid-template-columns: minmax(0, 1fr) auto !important; }
	.ssp-drow > span:nth-child(2):empty { display: none; }
	.ssp-dpreview { padding: 8px 14px; }
	.ssp-dform, .ssp-dadd { padding-left: 12px; padding-right: 12px; }
	.ssp-dm-head .ssp-btn { width: 100%; text-align: center; }
}

/* ---------- v0.11: dealer territories ---------- */
.ssp-territory { position: relative; }
.ssp-tmap { height: 70vh; min-height: 420px; max-height: 820px; width: 100%; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); background: #e9ecef; z-index: 1; }
.ssp-tmap .leaflet-container, .ssp-tmap { font-family: inherit; }
.ssp-tstatus { min-height: 1.2em; margin: 8px 0 0; font-size: 14px; color: var(--ssp-muted); }
.ssp-tstatus.is-error { color: var(--ssp-red); font-weight: 500; }
.ssp-tstatus.is-ok { color: #1b6b2f; }
.ssp-tstatus.is-warn { color: var(--ssp-warn); font-weight: 500; }
.ssp-tcols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-top: 16px; }
.ssp-tcard, .ssp-tlegend { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); padding: 14px 18px; font-size: 15px; }
.ssp-tcard h3, .ssp-tlegend strong { display: block; margin: 0 0 8px; font-family: var(--ssp-head); font-size: 20px; font-weight: 500; color: var(--ssp-black); }
.ssp-tcard p, .ssp-tdesc p { margin: 0 0 8px; text-align: justify; }
.ssp-tlegend ul { list-style: none; margin: 0; padding: 0; }
.ssp-tlegend li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; line-height: 1.35; }
.ssp-tlegend li i { flex: none; width: 22px; height: 16px; margin-top: 2px; border-radius: 2px; }
.ssp-tlegend .ssp-help { margin: 6px 0 0; }
.ssp-trule { margin: 16px 0 0; padding: 12px 16px; background: #000; color: #fff; border-left: 5px solid var(--ssp-accent); font-size: 16px; font-weight: 500; text-align: center; border-radius: 4px; }
.ssp-tsummary { margin: 0 0 6px; }
.ssp-tsummary p { margin: 0 0 8px; font-size: 15px; text-align: justify; }
.ssp-territory-overview { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; }
.ssp-tdealers { display: flex; flex-direction: column; gap: 6px; }
.ssp-tdealer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; background: #fff; border: 2px solid transparent; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font: inherit; text-align: left; cursor: pointer; color: var(--ssp-muted); font-size: 13px; }
.ssp-tdealer strong { font-size: 16px; font-weight: 500; color: var(--ssp-black); }
.ssp-tdealer:hover { border-color: #bbb; }
.ssp-tdealer.is-on { border-color: var(--ssp-accent); background: #f1f9ef; }
.ssp-tmain .ssp-tlegend { margin-top: 14px; }
.ssp-ttools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.ssp-ttools .ssp-btn { min-height: 40px; }
.ssp-ttools .ssp-btn.is-on { background: #000; border-color: #000; color: var(--ssp-accent); }
.ssp-ttools .ssp-btn-ghost.is-on { background: #000; color: #fff; }
.ssp-tstate { min-height: 40px; padding: 4px 10px; font: inherit; font-size: 15px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); max-width: 100%; margin-left: auto; }
.ssp-tcut { margin: 0 0 10px; padding: 10px 14px; background: #fff1c2; border-left: 4px solid var(--ssp-amber); border-radius: 4px; font-size: 15px; }
.ssp-tcut p { margin: 0 0 8px; }
.ssp-tcut .ssp-btn { min-height: 38px; margin: 2px 4px 2px 0; }
.ssp-tedit { margin-top: 12px; }
.ssp-tlist td, .ssp-tlist th { vertical-align: middle; }
.ssp-tlist input[type=text] { width: 100%; min-height: 36px; padding: 4px 8px; font: inherit; font-size: 14px; border: 1px solid var(--ssp-line); border-radius: 3px; }
.ssp-tswitch { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.ssp-tswitch input { width: 20px; height: 20px; accent-color: #000; }
.ssp-tedit .ssp-nav { margin-top: 12px; }
.ssp-territory .leaflet-tooltip { font-size: 13px; }
@media (max-width: 760px) {
	.ssp-tmap { height: 62vh; min-height: 360px; }
	.ssp-tcols { grid-template-columns: minmax(0, 1fr); }
	.ssp-territory-overview { grid-template-columns: minmax(0, 1fr); }
	.ssp-tdealers { flex-direction: row; flex-wrap: wrap; }
	.ssp-tdealer { flex: 1 1 45%; }
	.ssp-tstate { margin-left: 0; width: 100%; }
	.ssp-ttools .ssp-btn { flex: 1 1 40%; }
	.ssp-tlist { display: block; overflow-x: auto; }
	.ssp-trule { text-align: left; }
}
.ssp-tzoom a { width: auto !important; padding: 0 8px; font-size: 12px; font-weight: 700; line-height: 30px !important; color: #000; }
@media (max-width: 760px) { .ssp-tcard p, .ssp-tdesc p, .ssp-tsummary p { text-align: left; } }
/* Dealer: My Projects */
.ssp-dstart { display: block; margin-top: 8px; }
.ssp-dprojects td { vertical-align: top; }
.ssp-dstage { font-weight: 500; color: var(--ssp-black); }
/* ---------- v0.12: Profile and dealer Settings ---------- */
.ssp-account { max-width: 900px; }
.ssp-aform { margin: 0 0 16px; padding: 4px 18px 18px; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ssp-aform h3 { margin-top: 14px; }
.ssp-aform .ssp-nav { margin-top: 14px; }
.ssp-astatic { margin: 6px 0 0; font-size: 17px; color: var(--ssp-black); overflow-wrap: anywhere; }
.ssp-acheck { margin-top: 6px; }
.ssp-aflash { margin: 0 0 14px; padding: 10px 14px; border-radius: 4px; font-weight: 500; }
.ssp-aflash.is-ok { background: #dcf3d9; color: #1b5e20; }
.ssp-aflash.is-error { background: #f8dcdc; color: #8a1d16; }
.ssp-ateam > div { grid-template-columns: 200px minmax(0, 1fr) auto; }
.ssp-aform input:disabled { background: #f4f4f4; color: #555; }
@media (max-width: 760px) { .ssp-aspacer { display: none; } .ssp-aform { padding: 4px 12px 14px; } }
/* ---------- v0.13: User Management ---------- */
.ssp-users { max-width: 1040px; }
.ssp-matrix .is-planned { color: #a5a5a5; font-style: italic; font-size: 13px; }
.ssp-ulist { display: flex; flex-direction: column; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); margin-bottom: 16px; }
.ssp-urow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid #ececec; }
.ssp-urow:first-child { border-top: 0; }
.ssp-uwho { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; color: var(--ssp-muted); }
.ssp-uwho strong { font-size: 16px; font-weight: 500; color: var(--ssp-black); }
.ssp-uwho em { font-style: normal; }
.ssp-uact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ssp-uact select { min-height: 44px; padding: 4px 8px; font: inherit; font-size: 15px; border: 2px solid var(--ssp-line); border-radius: var(--ssp-radius); }
.ssp-urole { font-size: 14px; font-weight: 500; color: var(--ssp-black); }
.ssp-urow.is-off .ssp-uwho strong { color: #9a9a9a; text-decoration: line-through; }
.ssp-udanger:hover { background: var(--ssp-red) !important; border-color: var(--ssp-red) !important; color: #fff !important; }
@media (max-width: 760px) { .ssp-uact { width: 100%; } .ssp-uact select { flex: 1 1 100%; } .ssp-uact .ssp-btn { flex: 1 1 auto; } }
/* Territory maps: grey base map so territories stand out; exclusive swatch matches the map. */
.ssp-tmap .leaflet-tile-pane { filter: grayscale(1) contrast(.95) brightness(1.04); }
.ssp-tlegend li i.ssp-lg-excl { opacity: .6; box-shadow: inset 0 0 0 1px #d32f2f; }
/* Dealer Management: icon cards under "For every dealer". */
.ssp-dcard-main.ssp-dcard-ico { flex-direction: row; align-items: center; gap: 16px; }
.ssp-dcard-ico > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ssp-dcard-ico .ssp-tile-ico { width: 48px; height: 48px; }
.ssp-tlegend li i.ssp-lg-other-excl { background: #7d93ad; opacity: .6; box-shadow: inset 0 0 0 1px #d32f2f; }
.ssp-texcl { padding: 8px 10px; border-left: 3px solid #d32f2f; background: #fdf1f1; }
/* ---------- v0.14: In review dealers, zoom-based selection ---------- */
.ssp-dstat-review { background: #efe3f7; color: #5b2c79; }
.ssp-thint { margin: 0 0 8px; padding: 8px 12px; border-radius: 4px; font-size: 14px; background: #eef5ec; border-left: 4px solid #3ea636; }
.ssp-thint.is-state { background: #e8eef7; border-left-color: #12406e; }
.ssp-thint.is-piece { background: #fff4d6; border-left-color: #ffb300; }
.ssp-thint:empty { display: none; }
.ssp-tsplitbox { margin: 0 0 8px; border: 0; padding: 0; }
.ssp-tnew { margin: 4px 0 0; padding: 8px 12px; font-size: 14px; background: #fff4d6; border-left: 4px solid #ffb300; border-radius: 4px; }