/* ============================================================================
   GSB Company Locator (#locator-screen)
   Field directory: store → GM/AGM → DM → DO/MM → VP, plus corporate routing.

   Everything is scoped to #locator-screen. Two house traps apply here:
     • style.css has bare `table {}` / `header {}` rules that leak into JS-built
       markup ([[global-table-css-leak]]) — cell rules below carry !important.
     • gsb-clean.css matches [id$="-screen"], so it force-sets mono on table
       cells and flattens anything matching *-card / *-panel. Class names here
       are .loc-* and deliberately avoid those suffixes.
   NEVER add `#locator-screen { display: … }` — an ID selector beats
   `.screen{display:none}` in style.css and the tab would never hide.
   ========================================================================= */

#locator-screen {
    --loc-row-h: 76px;
    --loc-gap: 12px;
    --loc-rule: rgba(34, 30, 24, 0.10);
    --loc-sheet-z: 1200;
    font-family: var(--font-body);
    color: var(--color-text);
}

#locator-screen .loc-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0 96px;
}

/* ── Sticky control stack (segments + search + filter rail) ─────────────── */
/* Safari repaints sticky children incorrectly when an ancestor has
   overflow:hidden ([[safari-sticky-cell-paint-bug]]) — hence overflow:visible. */
#locator-screen .loc-controls {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--color-bg);
    overflow: visible;
    padding: 0 16px 8px;
    border-bottom: 1px solid var(--loc-rule);
}

#locator-screen .loc-segs {
    display: flex;
    gap: 2px;
    background: var(--gsb-oat);
    border-radius: 8px;
    padding: 3px;
    margin: 8px 0 10px;
}

#locator-screen .loc-seg {
    flex: 1;
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: 600 13px/1 var(--font-body);
    color: var(--color-text-muted);
    cursor: pointer;
    letter-spacing: 0.01em;
}

#locator-screen .loc-seg[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(34, 30, 24, 0.12);
}

/* Search */
#locator-screen .loc-search {
    position: relative;
    display: flex;
    align-items: center;
}

#locator-screen .loc-search svg {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    opacity: 0.45;
    pointer-events: none;
}

#locator-screen .loc-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 44px 0 36px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    font: 400 16px/1 var(--font-body); /* 16px — anything smaller zooms on iOS focus */
    color: var(--color-text);
    -webkit-appearance: none;
}

#locator-screen .loc-search input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(47, 107, 69, 0.12);
}

#locator-screen .loc-search input::-webkit-search-cancel-button { display: none; }

#locator-screen .loc-clear {
    position: absolute;
    right: 2px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: pointer;
    display: none;
}

#locator-screen .loc-search.has-q .loc-clear { display: block; }

/* Filter rail */
#locator-screen .loc-rail {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

#locator-screen .loc-rail::-webkit-scrollbar { display: none; }

#locator-screen .loc-fbtn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    background: var(--color-surface);
    font: 500 13px/1 var(--font-body);
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    scroll-snap-align: start;
    white-space: nowrap;
}

#locator-screen .loc-fbtn[data-on="1"] {
    background: var(--gsb-shoot-green);
    border-color: var(--gsb-shoot-green);
    color: #fff;
}

#locator-screen .loc-fbtn .loc-fcount {
    font: 600 11px/1 var(--font-mono);
    background: rgba(34, 30, 24, 0.08);
    border-radius: 9px;
    padding: 3px 6px;
}

#locator-screen .loc-fbtn[data-on="1"] .loc-fcount {
    background: rgba(255, 255, 255, 0.22);
}

/* Active-filter chips */
#locator-screen .loc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px 0;
}

#locator-screen .loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 6px 0 10px;
    border-radius: 14px;
    background: var(--gsb-oat);
    font: 500 12px/1 var(--font-body);
    color: var(--color-text);
}

#locator-screen .loc-chip button {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(34, 30, 24, 0.10);
    color: var(--color-text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

/* ── Result meta line ──────────────────────────────────────────────────── */
#locator-screen .loc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 6px;
}

#locator-screen .loc-count {
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

#locator-screen .loc-sortbtn {
    border: 0;
    background: transparent;
    font: 500 13px/1 var(--font-body);
    color: var(--gsb-shoot-green);
    cursor: pointer;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Store rows ────────────────────────────────────────────────────────── */
#locator-screen .loc-list {
    position: relative;
    background: var(--color-surface);
    border-top: 1px solid var(--loc-rule);
}

/* Every result row is in the DOM; `content-visibility: auto` lets the browser skip
   layout and paint for off-screen rows, and `contain-intrinsic-size` reserves their
   height so the scrollbar stays honest. Browsers without support just render all of
   them — at 386 rows that is perfectly fine, and find-in-page keeps working. */
#locator-screen .loc-row {
    display: flex;
    align-items: center;
    gap: var(--loc-gap);
    height: var(--loc-row-h);
    padding: 0 8px 0 16px;
    border-bottom: 1px solid var(--loc-rule);
    background: var(--color-surface);
    cursor: pointer;
    box-sizing: border-box;
    content-visibility: auto;
    contain-intrinsic-size: auto var(--loc-row-h);
}

#locator-screen .loc-row:active { background: var(--gsb-oat); }

/* GM vacancy — a 3px rule reads at a glance without parsing the text */
#locator-screen .loc-row[data-open="1"] { box-shadow: inset 3px 0 0 var(--gsb-clay); }

#locator-screen .loc-mark {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10px/1 var(--font-mono);
    color: #fff;
    letter-spacing: -0.02em;
}

/* Co-branded sites get a split mark rather than a second badge */
#locator-screen .loc-mark.is-split {
    background: none !important;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

#locator-screen .loc-mark.is-split span {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

#locator-screen .loc-body {
    flex: 1 1 auto;
    min-width: 0; /* required or the flex child refuses to ellipsis */
}

#locator-screen .loc-venue {
    font: 600 16px/1.25 var(--font-body);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#locator-screen .loc-sub {
    font: 400 12px/1.35 var(--font-body);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

#locator-screen .loc-sub .loc-id {
    font-family: var(--font-mono);
    font-size: 11px;
}

#locator-screen .loc-gm {
    font: 400 12px/1.35 var(--font-body);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

#locator-screen .loc-gm.is-open { color: var(--gsb-clay); font-weight: 600; }

#locator-screen .loc-dist {
    flex: 0 0 auto;
    font: 500 11px/1 var(--font-mono);
    color: var(--color-text-muted);
    text-align: right;
    min-width: 44px;
}

#locator-screen .loc-acts {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
}

#locator-screen .loc-act {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gsb-shoot-green);
}

#locator-screen .loc-act:active { background: var(--gsb-oat); }
#locator-screen .loc-act svg { width: 19px; height: 19px; }
#locator-screen .loc-act[disabled] { color: var(--color-border); cursor: default; }

#locator-screen mark {
    background: rgba(185, 139, 50, 0.28);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* Group headers (district / brand / state sorts) — sticky so the operator always knows
   which district they are scrolled into. */
#locator-screen .loc-ghead {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 28px;
    padding: 0 16px;
    background: var(--gsb-oat);
    /* line-height carries the vertical centring; a long "District 12 · Lori Weidleman ·
       Ohio" must stay on ONE line or it overflows the fixed height and shifts the rows. */
    font: 600 10px/28px var(--font-body);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Empty / loading ───────────────────────────────────────────────────── */
#locator-screen .loc-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-muted);
}

#locator-screen .loc-empty strong {
    display: block;
    font: 600 16px/1.3 var(--font-body);
    color: var(--color-text);
    margin-bottom: 6px;
}

#locator-screen .loc-empty button {
    margin-top: 14px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    font: 500 14px var(--font-body);
    cursor: pointer;
}

#locator-screen .loc-skel {
    height: var(--loc-row-h);
    border-bottom: 1px solid var(--loc-rule);
    background: linear-gradient(90deg, var(--color-surface) 25%, var(--gsb-oat) 50%, var(--color-surface) 75%);
    background-size: 400% 100%;
    animation: loc-shimmer 1.3s ease-in-out infinite;
}

@keyframes loc-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── Bottom sheet ──────────────────────────────────────────────────────── */
#locator-screen .loc-scrim {
    position: fixed;
    inset: 0;
    background: rgba(34, 30, 24, 0.42);
    z-index: var(--loc-sheet-z);
    opacity: 0;
    transition: opacity 0.18s ease;
}

#locator-screen .loc-scrim.is-in { opacity: 1; }

#locator-screen .loc-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--loc-sheet-z) + 1);
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
}

#locator-screen .loc-sheet.is-in { transform: translateY(0); }

#locator-screen .loc-sheet-grip {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    margin: 8px auto 4px;
    flex: 0 0 auto;
}

#locator-screen .loc-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--loc-rule);
    flex: 0 0 auto;
}

#locator-screen .loc-sheet-head h3 {
    margin: 0;
    font: 600 16px/1 var(--font-body);
}

#locator-screen .loc-sheet-head button {
    border: 0;
    background: transparent;
    font: 500 14px var(--font-body);
    color: var(--gsb-shoot-green);
    cursor: pointer;
    min-height: 40px;
    padding: 0 4px;
}

#locator-screen .loc-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

#locator-screen .loc-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 6px 16px;
    border: 0;
    border-bottom: 1px solid var(--loc-rule);
    background: transparent;
    font: 400 15px/1.3 var(--font-body);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

#locator-screen .loc-opt:active { background: var(--gsb-oat); }
#locator-screen .loc-opt[data-zero="1"] { color: var(--color-text-muted); }

#locator-screen .loc-tick {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

#locator-screen .loc-opt[aria-checked="true"] .loc-tick {
    background: var(--gsb-shoot-green);
    border-color: var(--gsb-shoot-green);
}

#locator-screen .loc-opt-main { flex: 1 1 auto; min-width: 0; }

#locator-screen .loc-opt-sub {
    font: 400 12px/1.3 var(--font-body);
    color: var(--color-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#locator-screen .loc-opt-n {
    flex: 0 0 auto;
    font: 500 12px/1 var(--font-mono);
    color: var(--color-text-muted);
}

#locator-screen .loc-sheet-foot {
    flex: 0 0 auto;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--loc-rule);
    background: var(--color-surface);
}

#locator-screen .loc-apply {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: var(--gsb-shoot-green);
    color: #fff;
    font: 600 15px var(--font-body);
    cursor: pointer;
}

#locator-screen .loc-sheet-search {
    padding: 10px 16px;
    border-bottom: 1px solid var(--loc-rule);
}

#locator-screen .loc-sheet-search input {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: 400 16px var(--font-body);
    background: var(--color-bg);
    box-sizing: border-box;
}

/* ── Detail view (full-screen push) ────────────────────────────────────── */
#locator-screen .loc-detail {
    position: fixed;
    inset: 0;
    z-index: calc(var(--loc-sheet-z) + 5);
    background: var(--color-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

#locator-screen .loc-detail.is-in { transform: translateX(0); }

#locator-screen .loc-dhead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg);
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid var(--loc-rule);
    display: flex;
    align-items: center;
    gap: 8px;
}

#locator-screen .loc-back {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text);
    font-size: 20px;
}

#locator-screen .loc-dtitle {
    font: 600 17px/1.2 var(--font-body);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#locator-screen .loc-dsec {
    padding: 16px;
    border-bottom: 8px solid var(--gsb-oat);
}

#locator-screen .loc-dsec:last-child { border-bottom: 0; }

#locator-screen .loc-dsec h4 {
    margin: 0 0 10px;
    font: 600 10px/1 var(--font-body);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

#locator-screen .loc-dbig {
    font: 600 22px/1.2 var(--font-display);
    margin-bottom: 4px;
}

#locator-screen .loc-daddr {
    font: 400 14px/1.5 var(--font-body);
    color: var(--color-text-muted);
}

#locator-screen .loc-cta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

#locator-screen .loc-cta a {
    min-height: 52px;
    border-radius: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font: 500 12px var(--font-body);
    color: var(--color-text);
    text-decoration: none;
}

#locator-screen .loc-cta a[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

#locator-screen .loc-cta svg { width: 18px; height: 18px; color: var(--gsb-shoot-green); }

/* People chain */
#locator-screen .loc-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--loc-rule);
}

#locator-screen .loc-person:last-child { border-bottom: 0; }

#locator-screen .loc-pav {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gsb-oat);
    color: var(--gsb-stone);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 12px var(--font-body);
}

#locator-screen .loc-pbody { flex: 1 1 auto; min-width: 0; }

#locator-screen .loc-pname {
    font: 600 14px/1.3 var(--font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#locator-screen .loc-prole {
    font: 400 12px/1.3 var(--font-body);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#locator-screen .loc-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--gsb-ochre);
    color: #fff;
    font: 600 9px/1.5 var(--font-body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

#locator-screen .loc-tag.is-open { background: var(--gsb-clay); }

#locator-screen .loc-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font: 400 13px/1.45 var(--font-body);
}

#locator-screen .loc-facts dt { color: var(--color-text-muted); }
#locator-screen .loc-facts dd { margin: 0; }
#locator-screen .loc-facts dd.is-mono { font-family: var(--font-mono); font-size: 12px; }

/* ── Help (symptom router) ─────────────────────────────────────────────── */
#locator-screen .loc-help-h {
    padding: 14px 16px 4px;
    font: 600 10px/1 var(--font-body);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

#locator-screen .loc-help-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    min-height: 60px;
    border: 0;
    border-bottom: 1px solid var(--loc-rule);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

#locator-screen .loc-help-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--gsb-oat);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

#locator-screen .loc-help-body { flex: 1 1 auto; min-width: 0; }

/* Both are <span>s inside a <button> (a <div> would be invalid there), so they need
   display:block or the title and subtitle run together on one line. */
#locator-screen .loc-help-t {
    display: block;
    font: 600 14px/1.3 var(--font-body);
}

#locator-screen .loc-help-s {
    display: block;
    font: 400 12px/1.35 var(--font-body);
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* ── Shared: buttons, chips, org outline ───────────────────────────────────
   Base rules (all viewports). The org chart's LIST mode is what phones get, so it
   lives here rather than behind a min-width query. */
/* The export row is a desktop affordance — a phone has no filesystem story for a CSV and
   the space is better spent on stores. Desktop turns it back on. */
#locator-screen .loc-cmd { display: none; }

/* The chrome is now mounted once and shown/hidden per view via the `hidden` attribute,
   which a bare `display` rule silently outranks. These restore it. */
#locator-screen .loc-rail[hidden],
#locator-screen .loc-search[hidden],
#locator-screen .loc-cmd[hidden] { display: none !important; }

/* A fourth segment ("Org Chart") has to fit the 375px pill tray without wrapping it to a
   second line, which would push the whole list down on every phone. */
#locator-screen .loc-seg {
    white-space: nowrap;
    padding: 0 2px;
    font-size: clamp(11px, 3.1vw, 13px);
}

#locator-screen .loc-cbtn {
    border: 1px solid var(--loc-rule);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 4px;
    padding: 5px 9px;
    font: 400 11px/1 var(--font-mono);
    letter-spacing: var(--tracking-label, 0.06em);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

#locator-screen .loc-cbtn:hover { background: var(--gsb-oat); }
#locator-screen .loc-cbtn.is-on { background: var(--gsb-soil-ink); color: var(--gsb-paper); border-color: var(--gsb-soil-ink); }

#locator-screen .loc-dactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
#locator-screen .loc-dback { display: none; }

/* Roll-up chips — same component in the canvas and the outline */
#locator-screen .loc-og-chip {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 3px;
    font: 500 10px/1.5 var(--font-mono);
    background: var(--gsb-oat);
    color: var(--color-text-muted);
}

#locator-screen .loc-og-chip.is-open { background: rgba(181, 83, 46, 0.14); color: var(--gsb-clay); }
#locator-screen .loc-og-chip.is-trn { background: rgba(185, 139, 50, 0.16); color: #8A6414; }

/* Org — mobile outline (an indented ARIA treeview in normal flow, so find-in-page works) */
#locator-screen .loc-ogtree { padding: 4px 0 24px; }

#locator-screen .loc-ogr {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding-left: calc(8px + var(--d, 0) * 14px);
    padding-right: 12px;
    border-bottom: 1px solid var(--loc-rule);
    background: var(--color-surface);
    content-visibility: auto;
    contain-intrinsic-size: auto 52px;
}

#locator-screen .loc-ogr.is-open { box-shadow: inset 3px 0 0 var(--gsb-clay); }
#locator-screen .loc-ogr.loc-og-dim { opacity: 0.32; }
#locator-screen .loc-ogr.loc-og-hit { background: rgba(185, 139, 50, 0.10); }

#locator-screen .loc-ogr-tw {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
}

#locator-screen .loc-ogr-tw.is-leaf { visibility: hidden; }

#locator-screen .loc-ogr-b {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 6px 0;
    cursor: pointer;
    font-family: inherit;
}

#locator-screen .loc-ogr-nm {
    display: block;
    font: 600 14px/1.25 var(--font-body);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#locator-screen .loc-ogr-sub {
    display: block;
    font: 400 12px/1.35 var(--font-body);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#locator-screen .loc-ogr-chips { flex: 0 0 auto; }
#locator-screen .loc-og-k-terr > .loc-ogr-b .loc-ogr-nm,
#locator-screen .loc-og-k-root > .loc-ogr-b .loc-ogr-nm { font-weight: 700; }

/* Mobile outline gets the same rank eyebrow as the desktop card, so "District 6"
   leaves the name slot on both surfaces and the name always holds a person. */
#locator-screen .loc-ogr-eyb {
    display: block;
    font: 600 8.5px/12px var(--font-mono);
    letter-spacing: var(--tracking-label, 0.08em);
    text-transform: uppercase;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#locator-screen .loc-ogr-nm.is-vac { color: var(--gsb-clay); }

#locator-screen .loc-og-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--loc-rule);
}

#locator-screen .loc-og-crumb {
    border: 0;
    background: transparent;
    padding: 2px 4px;
    font: 400 11px/1.4 var(--font-mono);
    letter-spacing: var(--tracking-label, 0.06em);
    text-transform: uppercase;
    color: var(--gsb-shoot-green);
    cursor: pointer;
}

#locator-screen .loc-og-crumb.is-here { color: var(--color-text-muted); cursor: default; }
#locator-screen .loc-og-sep { color: var(--color-text-muted); font-size: 11px; }

/* ── Desktop: master/detail ────────────────────────────────────────────── */
/* Desktop is a different layout, not a wider phone: a persistent facet rail, a dense
   sortable grid, and a third column that is never empty. Nothing below this line is
   reachable under 1024px, so the shipped mobile design cannot regress from it.

   Source order is the only thing protecting this: every rule in the file is
   #locator-screen .loc-* at identical (1,1,0) specificity and these win because they
   are last. Anything appended after this block without its own @media query would
   silently beat the whole desktop layout — see the fence comment at EOF. */
@media (min-width: 1024px) {
    #locator-screen { --loc-row-h: 32px; --loc-cols: 30px minmax(0, 1fr) 132px 44px 124px 60px; }

    #locator-screen .loc-wrap {
        display: grid;
        grid-template-columns: 208px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        padding: 0 16px 24px;
        max-width: 1400px;
    }

    /* min-width/min-height:0 on every grid child. Without it a child sizes to its
       content, the internal scroller never engages, and the "sticky" header just
       scrolls away with a very tall page. */
    #locator-screen .loc-facets,
    #locator-screen .loc-left,
    #locator-screen .loc-detail { min-width: 0; min-height: 0; }

    #locator-screen .loc-left { border-right: 0; }
    #locator-screen .loc-controls { padding: 0 0 8px; }

    /* Only Stores carries a facet rail. Without this the remaining child would land in the
       rail's 216px track and render as a narrow phone column all over again. */
    #locator-screen .loc-wrap[data-view="people"],
    #locator-screen .loc-wrap[data-view="help"],
    #locator-screen .loc-wrap[data-view="org"] { grid-template-columns: minmax(0, 1fr); }

    /* Underline tabs replace the oat pill tray — the house idiom on wide screens. */
    #locator-screen .loc-segs {
        background: transparent;
        border-radius: 0;
        padding: 0;
        gap: 18px;
        margin: 6px 0 10px;
        border-bottom: 1px solid var(--loc-rule);
    }

    #locator-screen .loc-seg {
        flex: 0 0 auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 8px;
        font: 400 11px/1 var(--font-mono);
        letter-spacing: var(--tracking-label, 0.06em);
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    #locator-screen .loc-seg[aria-selected="true"] {
        background: transparent;
        color: var(--color-text);
        box-shadow: inset 0 -2px 0 var(--gsb-soil-ink);
    }

    #locator-screen .loc-search { margin: 0 0 8px; max-width: 340px; }
    #locator-screen .loc-search input { min-height: 32px; font-size: 13px; border-radius: 6px; padding: 0 36px 0 32px; }
    #locator-screen .loc-search svg { width: 15px; height: 15px; }
    #locator-screen .loc-clear { width: 32px; height: 32px; }
    #locator-screen .loc-rail { display: none; }

    /* Command row */
    #locator-screen .loc-cmd { display: flex; align-items: center; gap: 6px; padding: 0 0 8px; }
    #locator-screen .loc-cmd[hidden] { display: none; }
    #locator-screen .loc-cmd-sp { flex: 1 1 auto; }
    #locator-screen .loc-cmd-n {
        font: 400 11px/1 var(--font-mono);
        letter-spacing: var(--tracking-label, 0.06em);
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    /* ── Facet rail ─────────────────────────────────────────────────────── */
    #locator-screen .loc-facets {
        position: sticky;
        top: 8px;
        align-self: start;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-right: 1px solid var(--loc-rule);
        padding: 8px 12px 24px 0;
    }

    #locator-screen .loc-fgrp { margin-bottom: 16px; }

    #locator-screen .loc-fh {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 0 6px;
        font: 400 10px/1.4 var(--font-mono);
        letter-spacing: var(--tracking-label, 0.06em);
        text-transform: uppercase;
        color: var(--gsb-stone, var(--color-text-muted));
    }

    #locator-screen .loc-fq {
        flex: 1 1 auto;
        min-width: 0;
        border: 1px solid var(--loc-rule);
        border-radius: 3px;
        background: var(--color-surface);
        padding: 2px 5px;
        font: 400 10px/1.4 var(--font-body);
        color: var(--color-text);
    }

    #locator-screen .loc-fopt {
        display: grid;
        grid-template-columns: 13px 1fr auto;
        gap: 7px;
        align-items: center;
        min-height: 23px;
        cursor: pointer;
        font: 400 12px/1.25 var(--font-body);
        color: var(--color-text);
    }

    #locator-screen .loc-fopt input { margin: 0; width: 13px; height: 13px; accent-color: var(--gsb-shoot-green); }
    #locator-screen .loc-fopt:hover { color: var(--gsb-shoot-green); }
    #locator-screen .loc-fnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #locator-screen .loc-fn { font: 400 10px/1 var(--font-mono); color: var(--color-text-muted); }
    #locator-screen .loc-fopt[data-zero="1"] { opacity: 0.45; }
    #locator-screen .loc-fopt:focus-within { outline: 2px solid var(--gsb-shoot-green); outline-offset: 1px; border-radius: 2px; }

    /* ── KPI band ───────────────────────────────────────────────────────── */
    #locator-screen .loc-kpis {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--loc-rule);
        border: 1px solid var(--loc-rule);
        margin: 0 0 10px;
    }

    #locator-screen .loc-kpi {
        background: var(--color-surface);
        border: 0;
        padding: 7px 10px;
        text-align: left;
        cursor: pointer;
        font-family: inherit;
    }

    #locator-screen .loc-kpis.is-static .loc-kpi { cursor: default; }
    #locator-screen .loc-kpi:hover { background: var(--gsb-oat); }
    #locator-screen .loc-kpi[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--gsb-soil-ink); }
    #locator-screen .loc-kfig { display: block; font: 500 1.4rem/1.1 var(--font-mono); color: var(--color-text); }

    #locator-screen .loc-klab {
        display: block;
        font: 400 9px/1.5 var(--font-mono);
        letter-spacing: var(--tracking-label, 0.06em);
        text-transform: uppercase;
        color: var(--gsb-stone, var(--color-text-muted));
    }

    /* ── The grid ───────────────────────────────────────────────────────── */
    /* role="table" divs, never a real <table>: style.css forces table{min-width:600px}
       and gsb-clean.css forces mono !important on td/th inside any [id$="-screen"]. */
    #locator-screen .loc-tblwrap {
        overflow: auto;                 /* NEVER hidden — Safari sticky paint trap */
        max-height: calc(100dvh - 250px);
        border-top: 1px solid var(--loc-rule);
        overflow-anchor: none;
    }

    #locator-screen .loc-grid { min-width: 0; }

    #locator-screen .loc-thead,
    #locator-screen .loc-tr {
        display: grid;
        grid-template-columns: var(--loc-cols);
        column-gap: 10px;
        align-items: center;
        box-sizing: border-box;
        padding: 0 8px 0 6px;
    }

    #locator-screen .loc-thead {
        position: sticky;
        top: 0;
        z-index: 3;
        height: 30px;
        background: var(--color-bg);
        box-shadow: inset 0 -1px 0 var(--loc-rule);
        font: 400 10px/30px var(--font-mono);
        letter-spacing: var(--tracking-label, 0.06em);
        text-transform: uppercase;
        color: var(--gsb-stone, var(--color-text-muted));
    }

    #locator-screen .loc-th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #locator-screen .loc-th[data-act="sortcol"] { cursor: pointer; user-select: none; }
    #locator-screen .loc-th[data-act="sortcol"]:hover { color: var(--color-text); }
    #locator-screen .loc-th.is-sorted { color: var(--color-text); }

    #locator-screen .loc-tr {
        height: var(--loc-row-h);
        background: var(--color-surface);
        box-shadow: inset 0 -1px 0 var(--loc-rule);
        content-visibility: auto;
        contain-intrinsic-size: auto var(--loc-row-h);
        font: 400 12px/1.2 var(--font-body);
        cursor: pointer;
    }

    #locator-screen .loc-tr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    #locator-screen .loc-c-ids,
    #locator-screen .loc-c-dist { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }
    #locator-screen .loc-c-venue { font-weight: 500; position: relative; }
    #locator-screen .loc-c-near { color: var(--color-text-muted); font: 400 10px/1 var(--font-mono); margin-left: 6px; }

    /* Frozen leading pair. Header cells outrank body cells so they paint above on
       horizontal scroll: frozen-head 4 > head 3 > frozen-body 2 > body 1. */
    #locator-screen .loc-c-mark { position: sticky; left: 0; z-index: 2; background: var(--color-surface); }
    #locator-screen .loc-c-venue { position: sticky; left: 30px; z-index: 2; background: var(--color-surface); }
    #locator-screen .loc-thead .loc-c-mark,
    #locator-screen .loc-thead .loc-c-venue { z-index: 4; background: var(--color-bg); }

    #locator-screen .loc-ghead { top: 30px; z-index: 2; padding: 0 8px; }

    #locator-screen .loc-mark { width: 24px; height: 24px; border-radius: 5px; font-size: 9px; }
    #locator-screen .loc-mark.is-split span { font-size: 8px; }

    #locator-screen .loc-act { width: 26px; height: 26px; border-radius: 4px; }
    #locator-screen .loc-act svg { width: 15px; height: 15px; }
    #locator-screen .loc-c-acts { display: flex; gap: 2px; justify-content: flex-end; }

    #locator-screen .loc-open { color: var(--gsb-clay); font-weight: 600; font-style: normal; }

    #locator-screen .loc-copy {
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: var(--color-surface);
        color: var(--color-text-muted);
        cursor: pointer;
        padding: 0 3px;
        font-size: 12px;
        opacity: 0;
    }

    #locator-screen .loc-tr:hover .loc-copy { opacity: 1; }
    #locator-screen .loc-copy:hover { color: var(--gsb-shoot-green); }

    /* Hover / focus / selection — the file had none of these at any width. */
    #locator-screen .loc-tr:hover { background: var(--gsb-oat); }
    #locator-screen .loc-tr:hover .loc-c-mark,
    #locator-screen .loc-tr:hover .loc-c-venue { background: var(--gsb-oat); }
    #locator-screen .loc-tr:focus-visible,
    #locator-screen .loc-th:focus-visible { outline: 2px solid var(--gsb-shoot-green); outline-offset: -2px; }

    #locator-screen .loc-tr[aria-selected="true"],
    #locator-screen .loc-tr[aria-selected="true"] .loc-c-mark,
    #locator-screen .loc-tr[aria-selected="true"] .loc-c-venue { background: rgba(47, 107, 69, 0.08); }
    #locator-screen .loc-tr[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--gsb-shoot-green), inset 0 -1px 0 var(--loc-rule); }

    /* Vacancy moves off the left rail into the GM cell so it never fights selection. */
    #locator-screen .loc-tr[data-open="1"] { box-shadow: inset 0 -1px 0 var(--loc-rule); }

    /* ── Third column ───────────────────────────────────────────────────── */
    #locator-screen .loc-detail {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 400px;
        inset: auto 0 auto auto;
        max-height: none;
        border-radius: 0;
        transform: translateX(100%);
        overflow-y: auto;
        z-index: 40;
    }

    #locator-screen .loc-detail.is-in { transform: none; }
    #locator-screen .loc-back { display: none; }
    #locator-screen .loc-dback { display: inline-block; border: 0; background: transparent; cursor: pointer; padding: 0; font: 400 11px/1 var(--font-mono); letter-spacing: var(--tracking-label, 0.06em); text-transform: uppercase; color: var(--gsb-shoot-green); }
    #locator-screen .loc-dhead { padding-top: 12px; background: transparent; }
    #locator-screen .loc-cta { grid-template-columns: repeat(3, minmax(0, 160px)); }

    #locator-screen .loc-dropped {
        padding: 10px 16px;
        font: 400 12px/1.4 var(--font-body);
        color: var(--gsb-clay);
        background: rgba(181, 83, 46, 0.08);
        border-bottom: 1px solid var(--loc-rule);
    }

    /* ── Coverage board — what fills the column at rest ─────────────────── */
    #locator-screen .loc-board { padding: 4px 0 32px; }
    #locator-screen .loc-bsec { padding: 14px 16px; border-bottom: 1px solid var(--loc-rule); }

    #locator-screen .loc-bh {
        font: 400 10px/1.5 var(--font-mono);
        letter-spacing: var(--tracking-label, 0.06em);
        text-transform: uppercase;
        color: var(--gsb-stone, var(--color-text-muted));
        margin-bottom: 8px;
    }

    #locator-screen .loc-bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
    #locator-screen .loc-bstat b { display: block; font: 500 1.25rem/1.1 var(--font-mono); color: var(--color-text); }
    #locator-screen .loc-bstat span { display: block; font: 400 10px/1.35 var(--font-body); color: var(--color-text-muted); }
    #locator-screen .loc-bstat.is-open b { color: var(--gsb-clay); }

    #locator-screen .loc-bnote { margin: 10px 0 0; font: 400 10px/1.45 var(--font-body); color: var(--color-text-muted); }

    #locator-screen .loc-brow {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "n f" "g bar";
        gap: 1px 8px;
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 6px 0;
        cursor: pointer;
        border-bottom: 1px solid var(--loc-rule);
        font-family: inherit;
    }

    #locator-screen .loc-brow:last-child { border-bottom: 0; }
    #locator-screen .loc-brow:hover { background: var(--gsb-oat); }
    #locator-screen .loc-brn { grid-area: n; font: 500 12px/1.3 var(--font-body); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #locator-screen .loc-brg { grid-area: g; font: 400 10px/1.3 var(--font-body); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #locator-screen .loc-brf { grid-area: f; font: 500 11px/1.3 var(--font-mono); color: var(--gsb-clay); }
    #locator-screen .loc-brow.is-plain { grid-template-areas: "n n" "g g"; }

    #locator-screen .loc-bbar {
        grid-area: bar;
        align-self: center;
        display: block;
        width: 54px;
        height: 4px;
        border-radius: 2px;
        background: var(--gsb-oat);
        position: relative;
        overflow: hidden;
    }

    #locator-screen .loc-bbar::after {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: calc(var(--pct, 0) * 1%);
        background: var(--gsb-clay);
    }

    /* ── Org chart canvas ───────────────────────────────────────────────── */
    #locator-screen .loc-og-bar { display: flex; align-items: center; gap: 6px; padding: 0 0 8px; flex-wrap: wrap; }
    #locator-screen .loc-og-status { font: 400 10px/1 var(--font-mono); letter-spacing: var(--tracking-label, 0.06em); text-transform: uppercase; color: var(--color-text-muted); }
    #locator-screen .loc-og-crumbs { padding: 6px 0; }

    #locator-screen .loc-og-view {
        overflow: auto;                 /* native scrolling — no pan/zoom gesture layer */
        position: relative;
        max-height: calc(100dvh - 250px);
        border-top: 1px solid var(--loc-rule);
        background:
            radial-gradient(circle at 1px 1px, rgba(34, 30, 24, 0.07) 1px, transparent 0) 0 0 / 22px 22px;
    }

    #locator-screen .loc-og-scale { position: relative; }
    #locator-screen .loc-og-canvas { position: relative; transform-origin: 0 0; }
    #locator-screen .loc-og-links { position: absolute; inset: 0; pointer-events: none; }
    #locator-screen .loc-og-links path { fill: none; stroke: rgba(34, 30, 24, 0.24); stroke-width: 1.25; }

    /* ═══ ORG NODE CARDS — six kinds, one skeleton ═══════════════════════════
       TWO COLOR CHANNELS, GEOMETRICALLY DISJOINT. Do not cross them.
         IDENTITY = a FILLED graphic only: the 18px store mark, the 3px mix bar,
                    the tier spine. Always present, therefore inert — a signal
                    that is always on cannot be misread as an alarm. It is also
                    why NBC #C29200 and LC #FF6D00 never need to pass contrast:
                    no text is ever set on a brand color.
         HEALTH   = TEXT COLOR + a surface wash only. 20 of 460 cards.

       box-shadow has exactly ONE owner: the selection / hit / focus ring, always
       inset — content-visibility:auto containment clips a real outline. The old
       `.is-open { border-left: 3px solid clay }` is gone: it shifted the content
       pad and fought the ring, the same collision the desktop grid solved by
       moving vacancy off the left rail.
       ═════════════════════════════════════════════════════════════════════ */
    #locator-screen .loc-og {
        --og-surface: var(--color-surface);
        --og-bg: var(--color-bg);
        --og-text: var(--color-text);
        --og-muted: var(--color-text-muted);
        --og-rule: var(--loc-rule);
        --og-rule-hi: rgba(34, 30, 24, 0.24);
        --og-oat: var(--gsb-oat);
        --og-oat-dk: var(--gsb-oat-dk, #D8CFBA);
        --og-stone: var(--gsb-stone);
        --og-sage: var(--gsb-sage, #3A4A3A);
        --og-clay: var(--gsb-clay);
        --og-watch: #8A6414;
        --og-accent: var(--gsb-shoot-green);
        --og-inv-bg: var(--gsb-soil-ink, #221E18);
        --og-inv-fg: var(--gsb-paper, #F3EEE3);
        --og-inv-fg-2: var(--gsb-oat-dk, #D8CFBA);
        --og-wash: rgba(181, 83, 46, 0.08);
        --og-tint-45: color-mix(in srgb, var(--og-oat) 45%, var(--og-surface));
        --og-tint-20: color-mix(in srgb, var(--og-oat) 20%, var(--og-surface));
    }
    @supports not (color: color-mix(in srgb, #000, #fff)) {
        #locator-screen .loc-og { --og-tint-45: var(--og-oat); --og-tint-20: var(--og-oat); }
    }

    #locator-screen .loc-og-node {
        position: absolute;
        box-sizing: border-box;
        display: grid;
        /* minmax(0,1fr), NOT 1fr — a bare 1fr floors at min-content and every
           text-overflow:ellipsis in the left column silently stops working. */
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 11px 20px 13px;
        row-gap: 2px;
        column-gap: 8px;
        align-content: start;
        border: 1px solid var(--og-rule);
        border-radius: 6px;
        background-color: var(--og-surface);
        color: var(--og-text);
        padding: 6px 10px 8px 12px;
        overflow: hidden;
        cursor: pointer;
        content-visibility: auto;
        contain-intrinsic-size: auto 64px;
        font-variant-numeric: tabular-nums;
    }
    #locator-screen .loc-og-node > * { min-width: 0; }

    /* Tier spine — a ::before INSIDE the box, so it never shifts the content pad
       and never touches box-shadow, which selection owns exclusively. */
    #locator-screen .loc-og-node::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 0;
        background: var(--og-spine, transparent);
        border-radius: 6px 0 0 6px;
        pointer-events: none;
        transition: width 90ms linear;
    }
    #locator-screen .loc-og-k-terr::before,
    #locator-screen .loc-og-k-top::before,
    #locator-screen .loc-og-k-mid::before,
    #locator-screen .loc-og-k-bracket::before { width: 3px; }
    #locator-screen .loc-og-k-dist::before { width: 2px; }

    /* --gsb-shoot-green is deliberately absent: it is the interaction token, and
       five VP cards wearing it would read "healthy". */
    #locator-screen .loc-og-k-terr { --og-spine: var(--og-text); }
    #locator-screen .loc-og-k-top { --og-spine: var(--og-sage); }
    #locator-screen .loc-og-k-mid { --og-spine: var(--og-stone); }
    #locator-screen .loc-og-k-bracket { --og-spine: var(--og-oat-dk); }
    #locator-screen .loc-og-k-dist { --og-spine: var(--og-stone); }

    /* Tier surfaces: a monotone value ladder, darkest at the root. */
    #locator-screen .loc-og-k-root {
        background-color: var(--og-inv-bg);
        border-color: var(--og-inv-bg);
        color: var(--og-inv-fg);
    }
    #locator-screen .loc-og-k-terr { background-color: var(--og-oat); border-color: var(--og-rule-hi); }
    #locator-screen .loc-og-k-top { background-color: var(--og-tint-45); }
    #locator-screen .loc-og-k-mid { background-color: var(--og-tint-20); }
    #locator-screen .loc-og-k-bracket { background-color: var(--og-bg); border-style: dashed; border-color: var(--og-rule-hi); }

    /* ROW 1 — caret · eyebrow · health tokens */
    #locator-screen .loc-og-hd { grid-area: 1 / 1 / 2 / 3; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
    #locator-screen .loc-og-eyb {
        flex: 0 1 auto;
        font: 600 8.5px/11px var(--font-mono);
        letter-spacing: var(--tracking-label, 0.08em);
        text-transform: uppercase;
        color: var(--og-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Tokens never truncate; prose yields first. */
    #locator-screen .loc-og-toks { flex: 0 0 auto; margin-left: auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
    #locator-screen .loc-og-tok {
        font: 700 8.5px/11px var(--font-mono);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--og-muted);
    }
    #locator-screen .loc-og-tok.is-neg { color: var(--og-clay); }
    #locator-screen .loc-og-tok.is-watch { color: var(--og-watch); }

    /* ROW 2 — the name. One type step per tier. */
    #locator-screen .loc-og-nm {
        grid-area: 2 / 1 / 3 / 2;
        align-self: center;
        font: 600 14px/20px var(--font-body);
        letter-spacing: -0.005em;
        color: var(--og-text);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #locator-screen .loc-og-k-root .loc-og-nm { font: 500 16px/20px var(--font-display); letter-spacing: 0; color: var(--og-inv-fg); }
    #locator-screen .loc-og-k-terr .loc-og-nm { font: 500 15px/20px var(--font-display); letter-spacing: 0; }
    #locator-screen .loc-og-k-mid .loc-og-nm { font-weight: 500; }
    #locator-screen .loc-og-k-bracket .loc-og-nm { font: italic 400 13px/20px var(--font-body); color: var(--og-muted); }
    #locator-screen .loc-og-k-dist .loc-og-nm { font: 600 13px/17px var(--font-body); }
    #locator-screen .loc-og-nm.is-vac { color: var(--og-clay); }

    /* ROWS 2-3 RIGHT — the figure column */
    #locator-screen .loc-og-fig { grid-area: 2 / 2 / 4 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; }
    #locator-screen .loc-og-fig b { font: 700 17px/20px var(--font-mono); letter-spacing: -0.03em; color: var(--og-text); }
    #locator-screen .loc-og-fig i {
        font: 700 8px/13px var(--font-mono);
        font-style: normal;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--og-muted);
    }
    #locator-screen .loc-og-k-dist .loc-og-fig b { font: 700 15px/17px var(--font-mono); }
    #locator-screen .loc-og-k-dist .loc-og-fig i { line-height: 12px; }
    #locator-screen .loc-og-k-root .loc-og-fig b { color: var(--og-inv-fg); }
    #locator-screen .loc-og-k-root .loc-og-fig i,
    #locator-screen .loc-og-k-root .loc-og-eyb { color: var(--og-inv-fg-2); }

    /* ROW 3 — the one count, and on 2 cards the mirror button */
    #locator-screen .loc-og-meta {
        grid-area: 3 / 1 / 4 / 2;
        align-self: center;
        font: 400 10.5px/13px var(--font-body);
        color: var(--og-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #locator-screen .loc-og-k-root .loc-og-meta { color: var(--og-inv-fg-2); }
    #locator-screen .loc-og-mir {
        border: 0; background: transparent; padding: 0; margin-left: 6px;
        font: 700 8.5px/13px var(--font-mono);
        letter-spacing: 0.06em;
        color: var(--og-watch);
        border-bottom: 1px dotted currentColor;
        cursor: pointer;
        vertical-align: baseline;
    }
    #locator-screen .loc-og-mir:hover { color: var(--og-accent); }

    /* Brand-unit mix bar — 3px, inset to the text columns, hard stops. */
    #locator-screen .loc-og-mix {
        position: absolute;
        left: 12px; right: 10px; bottom: 4px;
        height: 3px;
        display: flex; gap: 1px;
        border-radius: 1px; overflow: hidden;
    }
    #locator-screen .loc-og-mix i { flex: 1 1 0; min-width: 2px; display: block; }

    /* DISTRICT — 236 × 58 */
    #locator-screen .loc-og-k-dist {
        grid-template-rows: 10px 17px 12px;
        padding: 5px 10px 8px 12px;   /* right 10 → figures land on lane x+256 */
        contain-intrinsic-size: auto 58px;
    }
    #locator-screen .loc-og-k-dist .loc-og-eyb,
    #locator-screen .loc-og-k-dist .loc-og-tok { line-height: 10px; }
    #locator-screen .loc-og-k-dist .loc-og-meta { font-size: 10px; line-height: 12px; }
    #locator-screen .loc-og-k-dist.is-open { --og-spine: var(--og-clay); }

    /* STORE — 220 × 50. No chevron on a leaf, so the right gutter shrinks. */
    #locator-screen .loc-og-k-store {
        grid-template-columns: 18px minmax(0, 1fr) auto;
        grid-template-rows: 15px 13px 11px;
        row-gap: 0;
        column-gap: 8px;
        padding: 4px 20px 5px 8px;   /* right 20 → ids land on lane x+256 */
        contain-intrinsic-size: auto 50px;
    }
    #locator-screen .loc-og-mk {
        grid-area: 1 / 1 / 4 / 2;
        align-self: center;
        width: 18px; height: 18px;
        border-radius: 4px;
        display: flex; overflow: hidden;
        background: var(--og-oat-dk);
    }
    #locator-screen .loc-og-mk i { flex: 1 1 0; min-width: 0; display: block; }
    #locator-screen .loc-og-k-store .loc-og-nm { grid-area: 1 / 2 / 2 / 4; align-self: center; font: 600 12px/15px var(--font-body); }
    #locator-screen .loc-og-gm {
        grid-area: 2 / 2 / 3 / 4;
        align-self: center;
        font: 500 11px/13px var(--font-body);
        color: var(--og-text);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Vacancy changes the VOICE, not only the hue — readable without color vision. */
    #locator-screen .loc-og-gm.is-vac {
        font: 700 9px/13px var(--font-mono);
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--og-clay);
    }
    #locator-screen .loc-og-loc {
        grid-area: 3 / 2 / 4 / 3;
        align-self: center;
        font: 400 8.5px/11px var(--font-mono);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--og-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #locator-screen .loc-og-id {
        grid-area: 3 / 3 / 4 / 4;
        align-self: center;
        font: 400 8.5px/11px var(--font-mono);
        color: var(--og-muted);
        white-space: nowrap;
    }
    /* Pure brand hex fails as 8.5px text (LC #FF6D00 ≈2.9:1, NBC #C29200 ≈2.4:1).
       Mixing 60% toward the theme's text color lifts every code past 4.5:1 with
       one rule, invents no hex, and re-derives correctly on a dark ground. The
       18px mark keeps the PURE color — a graphic has no contrast obligation. */
    #locator-screen .loc-og-code {
        font-weight: 700;
        letter-spacing: 0.04em;
        color: color-mix(in srgb, var(--og-brand, var(--og-stone)) 60%, var(--og-text));
    }
    @supports not (color: color-mix(in srgb, #000, #fff)) {
        #locator-screen .loc-og-code { color: var(--og-text); }
    }
    #locator-screen .loc-og-code + .loc-og-code::before { content: '·'; margin: 0 1px; font-weight: 400; color: var(--og-rule-hi); }
    #locator-screen .loc-og-code:last-of-type::after { content: ' · '; font-weight: 400; color: var(--og-muted); }

    /* HEALTH WASH — a background-IMAGE, so it layers over the tier surface with
       no specificity fight and no need to restate the ground per kind. */
    #locator-screen .loc-og-node.is-open { background-image: linear-gradient(var(--og-wash), var(--og-wash)); }

    /* CHEVRON — inline at the head of row 1; rotates instead of swapping glyph,
       so there is no glyph-width reflow on expand. */
    #locator-screen .loc-og-tw {
        flex: 0 0 auto;
        width: 14px; height: 11px;
        border: 0; background: transparent; padding: 0; margin: 0;
        color: var(--og-muted);
        font: 400 9px/11px var(--font-mono);
        text-align: left;
        cursor: pointer;
        transform-origin: 4px 50%;
        transition: transform 120ms ease, color 120ms ease;
    }
    #locator-screen .loc-og-tw:hover { color: var(--og-accent); }
    #locator-screen .loc-og-node[aria-expanded="true"] .loc-og-tw { transform: rotate(90deg); }
    #locator-screen .loc-og-k-root .loc-og-tw { color: var(--og-inv-fg-2); }

    /* STATES — source order IS the precedence ladder. */
    #locator-screen .loc-og-node:hover { border-color: var(--og-accent); }
    #locator-screen .loc-og-node:hover::before { width: 5px; }
    #locator-screen .loc-og-k-dist:hover::before { width: 4px; }
    #locator-screen .loc-og-node:hover .loc-og-fig b { color: var(--og-accent); }
    #locator-screen .loc-og-k-root:hover .loc-og-fig b { color: var(--og-inv-fg); }
    #locator-screen .loc-og-node.loc-og-dim { opacity: 0.26; }

    #locator-screen .loc-og-node.loc-og-hit { box-shadow: inset 0 0 0 2px var(--gsb-ochre, #B98B32); }
    #locator-screen .loc-og-node:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--og-text); }
    #locator-screen .loc-og-node:focus-visible::before { background: var(--og-text); }
    #locator-screen .loc-og-node.is-sel { box-shadow: inset 0 0 0 2px var(--og-accent); border-color: transparent; }
    /* ::before is content and paints ABOVE an inset shadow, so a spine would nick
       the ring's left edge. Recoloring resolves it with no geometry change. */
    #locator-screen .loc-og-node.is-sel::before { background: var(--og-accent); }
    #locator-screen .loc-og-node.loc-og-hit.is-sel {
        box-shadow: inset 0 0 0 2px var(--og-accent), inset 0 0 0 4px var(--gsb-ochre, #B98B32);
    }
    #locator-screen .loc-og-node.is-pulse { animation: loc-og-pulse 900ms ease-out; }

    @keyframes loc-og-pulse {
        0%, 100% { box-shadow: inset 0 0 0 2px var(--gsb-shoot-green); }
        30% { box-shadow: inset 0 0 0 4px var(--gsb-ochre, #B98B32); }
    }

    #locator-screen .loc-og-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
    #locator-screen .loc-cbtn.is-alert { color: var(--gsb-clay); border-color: currentColor; }
}

@media (min-width: 1280px) {
    /* The dossier/board becomes a real third column instead of an overlay. */
    #locator-screen { --loc-cols: 30px minmax(160px, 1fr) 84px 120px 44px 124px 60px; }
    #locator-screen .loc-wrap { grid-template-columns: 216px minmax(0, 1fr) 360px; }
    #locator-screen .loc-kpis { grid-template-columns: repeat(6, 1fr); }

    #locator-screen .loc-detail {
        position: sticky;
        top: 8px;
        inset: auto;
        width: auto;
        transform: none;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        border-left: 1px solid var(--loc-rule);
        z-index: 1;
    }

    #locator-screen .loc-dback { display: none; }

    /* On Org the dossier stays an overlay so the canvas keeps the full width — a drawn
       tree needs the room far more than a permanently docked panel is worth. */
    #locator-screen .loc-wrap[data-view="org"] .loc-detail,
    #locator-screen .loc-wrap[data-view="people"] .loc-detail,
    #locator-screen .loc-wrap[data-view="help"] .loc-detail {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 400px;
        inset: auto 0 auto auto;
        transform: translateX(100%);
        border-left: 1px solid var(--loc-rule);
        z-index: 40;
    }

    #locator-screen .loc-wrap[data-view="org"] .loc-detail.is-in,
    #locator-screen .loc-wrap[data-view="people"] .loc-detail.is-in,
    #locator-screen .loc-wrap[data-view="help"] .loc-detail.is-in { transform: none; }
    #locator-screen .loc-wrap[data-view="org"] .loc-dback { display: inline-block; }
}

/* The IDS column only exists at ≥1280. Its grid track and its visibility are declared
   together on purpose: hiding a cell without removing its track shifts every following
   cell one column left and the whole grid silently misaligns. */
@media (max-width: 1279.98px) {
    #locator-screen .loc-c-ids { display: none; }
}

@media print {
    #locator-screen .loc-facets,
    #locator-screen .loc-detail,
    #locator-screen .loc-kpis,
    #locator-screen .loc-cmd,
    #locator-screen .loc-og-bar { display: none; }
    #locator-screen .loc-wrap { display: block; }
    #locator-screen .loc-tblwrap,
    #locator-screen .loc-og-view { overflow: visible; max-height: none; }
    #locator-screen .loc-tr,
    #locator-screen .loc-ogr { content-visibility: visible; break-inside: avoid; }
}

/* ===========================================================================
   Nothing may be appended after this point without its own @media query.
   Every rule in this file sits at (1,1,0) specificity, so a later unscoped rule
   wins everywhere — including over the desktop layout above.
   ======================================================================== */