/* Support at Home module, light shell (07-10-2026 v2). Gold = you, grey = market, orange = above the market range,
   blue = below. Status colours never appear without the word beside them. */
/* tokens come from app.css (:root); only the module's legacy names are mapped here */
#sah-root { --gold2: var(--warn); --card: var(--surface); --band: var(--line); color: var(--ink); font-size: 14px; }
#sah-root .sah-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 16px; }
#sah-root .sah-ctl label { display: block; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); margin-bottom: 4px; }
#sah-root select, #sah-root input[type=text] { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font-size: 13px; min-width: 180px; }
#sah-root .sah-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
#sah-root .sah-kpi { background: var(--surface); border: 1px solid var(--line); padding: 14px 16px 12px; border-radius: 10px; box-shadow: var(--shadow); min-height: 96px; }
#sah-root .sah-kpi .k { font-size: 11.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: 0.06em; }
#sah-root .sah-kpi .v { font-size: 26px; font-weight: 650; color: var(--ink); margin: 4px 0 2px; line-height: 1.15; font-variant-numeric: tabular-nums; }
#sah-root .sah-kpi .s { font-size: 12.5px; color: var(--ink2); }
#sah-root .sah-insight { border-left: 3px solid var(--gold); background: var(--gold-soft); padding: 10px 14px; margin: 0 0 8px; font-size: 14px; color: var(--ink); border-radius: 0 6px 6px 0; }
#sah-root .sah-insight + .sah-insight { margin-top: 0; }
#sah-root .sah-insight + .sah-card, #sah-root .sah-insight + .sah-kpis { margin-top: 14px; }
#sah-root .sah-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
#sah-root .sah-card h4 { margin: 0 0 2px; color: var(--ink); font-size: 16px; font-weight: 600; }
#sah-root .sah-basis { font-size: 12.5px; color: var(--ink3); margin-bottom: 12px; }
#sah-root .sah-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr); gap: 14px; }
@media (max-width: 1100px) { #sah-root .sah-split { grid-template-columns: 1fr; } }
#sah-root #sah-map { height: 560px; border: 1px solid var(--line); border-radius: 6px; background: #eef0f2; }
#sah-root .sah-panel { height: 560px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 10px 12px; scrollbar-width: thin; }
#sah-root .sah-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); margin-top: 8px; align-items: center; }
#sah-root .sah-legend span i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
#sah-root .sah-legend span i.sq { border-radius: 2px; }
#sah-root .pos-bar { display: inline-flex; height: 8px; width: 120px; border-radius: 4px; overflow: hidden; background: var(--line); vertical-align: middle; }
#sah-root .pos-bar b { display: block; height: 100%; }
#sah-root .pos-bar .a { background: var(--above); }
#sah-root .pos-bar .w { background: #c6ccd4; }
#sah-root .pos-bar .b { background: var(--below); }
#sah-root .pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; line-height: 1.4; }
#sah-root .pill.above { color: var(--above); background: var(--above-soft); }
#sah-root .pill.within { color: var(--within); background: var(--within-soft); }
#sah-root .pill.below { color: var(--below); background: var(--below-soft); }
#sah-root .pill.none { color: var(--ink3); background: var(--within-soft); }
#sah-root .gap.above { color: var(--above); } #sah-root .gap.below { color: var(--below); } #sah-root .gap.within { color: var(--ink2); }
#sah-root .range { position: relative; height: 16px; width: 150px; display: inline-block; vertical-align: middle; }
#sah-root .range .track { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line); }
#sah-root .range .band { position: absolute; top: 5px; height: 6px; background: #cfd4db; border-radius: 3px; }
#sah-root .range .med { position: absolute; top: 2px; width: 1.5px; height: 12px; background: var(--ink2); }
#sah-root .range .you { position: absolute; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); margin-left: -5px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold-line); }
#sah-root table.sah-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#sah-root table.sah-table th { text-align: left; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; font-weight: 600; }
#sah-root table.sah-table td { padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
#sah-root table.sah-table tr.row:hover td { background: var(--hover); cursor: pointer; }
#sah-root table.sah-table tr.you td { background: var(--gold-soft); font-weight: 600; }
#sah-root table.sah-table tr.grp td { color: var(--ink2); font-weight: 600; padding-top: 14px; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
#sah-root table.sah-table .r { text-align: right; }
#sah-root table.sah-table .n { color: var(--ink3); }
#sah-root .prod { font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--ink3); display: block; font-weight: 400; }
#sah-root .meta { font-size: 12.5px; color: var(--ink3); }
#sah-root .back { color: var(--ink2); cursor: pointer; font-size: 12.5px; margin-bottom: 8px; display: inline-block; }
#sah-root .back:hover { color: var(--ink); text-decoration: underline; }
#sah-root .sah-reg-row { padding: 9px 8px; border-bottom: 1px solid var(--line2); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
#sah-root .sah-reg-row:hover, #sah-root .sah-reg-row.sel { background: var(--gold-soft); }
#sah-root .sah-reg-row .nm { font-weight: 600; font-size: 13px; }
#sah-root .sah-reg-row .sm { grid-column: 1 / span 2; font-size: 12px; color: var(--ink3); }
#sah-root .mini { font-size: 13px; }
#sah-root .btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-weight: 600; }
#sah-root .btn-ghost:hover { background: var(--hover); }
#sah-root .you-tag { color: var(--gold-ink); font-weight: 650; }
#sah-root a { color: var(--gold-ink); }
/* Leaflet popups */
.sah-popup .leaflet-popup-content-wrapper { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); }
.sah-popup .leaflet-popup-tip { background: var(--surface); }
.sah-popup .leaflet-popup-content { margin: 10px 12px; font-size: 12.5px; line-height: 1.4; min-width: 240px; }
.sah-popup table { border-collapse: collapse; width: 100%; margin-top: 6px; }
.sah-popup td { padding: 2px 4px; border-bottom: 1px solid var(--line2); }
.sah-popup td.r { text-align: right; white-space: nowrap; }
.sah-popup .ttl { font-weight: 650; color: var(--ink); font-size: 13.5px; }
.sah-popup .sub { color: var(--ink2); font-size: 12px; }
.sah-popup a { color: var(--gold-ink); }
.sah-tip { font-size: 12px; }
.sah-ho-icon { background: var(--gold); color: #fff; font-weight: 650; font-size: 11px; padding: 3px 8px; border-radius: 10px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
/* region competitor table: full words, two-line headers, no truncation */
#sah-root table.sah-comp { font-size: 12.5px; table-layout: fixed; }
#sah-root table.sah-comp th { white-space: normal; line-height: 1.25; padding: 6px 5px; vertical-align: bottom; }
#sah-root table.sah-comp td { padding: 6px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sah-root table.sah-comp th:first-child, #sah-root table.sah-comp td:first-child { width: 30%; white-space: normal; overflow: visible; }
#sah-root table.sah-comp th:nth-child(2), #sah-root table.sah-comp th:nth-child(3) { width: 9%; }
#sah-root table.sah-comp .prod { font-size: 11px; }