/* fam.v9.css — signed-in shell, owner controls beside the rail seam.
   Supersedes immutable fam.v8.css; prior versions remain unchanged.
   Rail samples and theme roles sit beside their tokens in app/index.html.
   Geometry remains measured from the same Hyperline/Reports screenshots. */
:root{
  /* geometry — the ratified ladder */
  --top-h:52px;          /* PQB already 52 */
  --rail-w:200px;        /* MEASURED off the Hyperline app: rail = 14.2x the nav label font-size
                            (527 device px at DPR 2, cap-height 27 -> 199px at our 14px base).
                            232 was carried over unmeasured and stole 32px from content. */
  --rail-min:48px;       /* the measurement — icon-collapsed */
  /* Oscar refinement: 8px panels stay within the measured 8–12px range;
     4px chips deliberately replace the reference capsules. Controls stay 6px. */
  --radius:6px;
  --radius-sm:6px;
  --radius-card:8px;
  --radius-btn:6px;
  --radius-input:6px;
  --radius-pill:4px;

  /* IDENTITY ONLY — pure black and white, bound to the MARK, FAVICON, OG CARD and WORDMARK LOCKUP.
     The creative director measured the owner's reference rather than interpreting it: its ground is
     #F5F5F5 against our shipped #F7F7F5 — two parts in 255 on two channels — so the owner is already
     using our paper. White/black therefore binds to identity, NOT the substrate. The working tokens
     below are deliberately untouched: #F7F7F5 / #111114 light, #0F0F11 / #F0F0F2 dark. */
  --pqb-black:#000000;
  --pqb-white:#FFFFFF;
}

/* hairlines, never shadows, on chrome */
.topbar,.rail,.sitemenu{box-shadow:none}
.sitemenu{border:1px solid var(--line)}

/* rail: 40 px rows, a 2 px accent bar on the current row */
.rail-item{min-height:var(--nav-h);position:relative}
.rail-item.on::before{content:none}  /* no accent bar: the reference marks the active row with a neutral chip alone (law v2 the measurement) */

/* every bar control clears a 40 × 40 touch target (the P29-S03 gate stands) */
.topactions button,.topactions a,#railBurger,#siteswitch,.finder{min-width:40px;min-height:40px}

/* the mono micro-label — the family's reading grammar. Figure alignment is stated once,
   in app/index.html's TYPE block, where the full list of numeric surfaces lives. */
.rail-glabel,.sm-eb,.sm-foot,.d-kpi .l{font-family:var(--font-sans);font-size:var(--fs-fine);font-weight:var(--fw-med);letter-spacing:0;text-transform:none}

/* switcher menu: 228 wide, 44 px rows — the family contract (its position is the app's own follow-the-button logic) */
.sitemenu{width:228px;min-width:228px}
.sm-row{min-height:44px;border-radius:var(--radius-sm)}

/* focus is an outline, never a shadow — on the chrome */
.topbar :focus-visible,.rail :focus-visible,.sitemenu :focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none}

/* ── bar right cluster: the bell is a BARE icon (no fill, no border) inside its 40 × 40 hit box; the account
      mark is a 34 px dark rounded square; LOG OUT keeps its 40 px control height (the touch-target gate). ── */
.topactions{gap:8px;align-items:center}
.topactions .tt.bell{background:transparent;border:1px solid transparent;box-shadow:none;width:40px;height:40px;min-width:40px;padding:0;border-radius:var(--radius-btn);color:var(--muted);display:inline-grid;place-items:center}
.topactions .tt.bell:hover{background:var(--row-hover);color:var(--fg)}
.topactions .tt.bell svg{width:17px;height:17px}
.topactions .tt.bell .bell-dot{top:9px;right:10px;width:6px;height:6px;border-radius:50%}
body.repshell .tb-ini:not(:empty){width:34px;height:34px;border-radius:var(--radius-btn);border:0;background:var(--fg);color:var(--bg);font-size:var(--fs-micro)}

/* ===========================================================================
   SWITCHER → the rail-head slot, for EVERYONE (Oscar, 2026-09-04 17:45 ET: the switcher block REPLACES the ▪ pqb wordmark).
   The block is a 232 × 52 identity at the head of the rail column, sharing the rail's right hairline; its bottom hairline is the
   bar's bottom line (the bar is 52 once the title block is gone). renderSites() shows the button for every rep — interactive
   (caret, popover) only when the roster has somewhere else to go, otherwise a static identity (.ss-static, disabled). PQB still
   serves the roster to a super_admin only; nothing about that changes. `body.repshell` pads left by --rail-w, so the block is
   PINNED to the true left edge; the bar is raised above the rail only where the rail is a column (≥ 721) — at ≤ 720 the bar keeps
   its shipped rows (40 × 40 tile, burger, drawer) and the drawer keeps out-painting it.
   =========================================================================== */
@media (min-width:721px){
  body.repshell .topbar{z-index:70;padding-top:6px;padding-bottom:5px;min-height:var(--top-h);box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,420px) minmax(0,1fr)}   /* 40 px controls + 6 + 5 + the 1 px hairline = 52 outer; the finder sits in the CENTRE column */
  body.repshell .tb-mid{justify-content:center}
  body.repshell .tb-title .title,body.repshell .tb-title .subtitle{display:none}   /* the page title leaves the bar (Oscar: remove); the reseller's brand logo, when set, stays */
  body.repshell .tb-switch{display:flex;position:fixed;left:0;top:0;z-index:61;width:var(--rail-w);height:var(--top-h);align-items:center;padding:0 12px;margin:0;gap:0;border-right:var(--rail-edge) solid var(--rail-line);border-bottom:var(--rail-edge) solid var(--rail-line);background:var(--rail-bg);box-sizing:border-box;transition:width var(--t-med) var(--e-out)}
  body.repshell .rail{padding-top:var(--top-h)}
  body.repshell .rail-top{display:none}   /* The collapse control now shares the topbar, not a second brand row. */
  body.repshell .rail-wm{display:none}
  body.repshell .siteswitch{flex:1;width:auto;height:40px;gap:12px;padding:0 6px;border-color:transparent;background:transparent;border-radius:var(--radius-btn);justify-content:flex-start}
  body.repshell .siteswitch:hover{filter:none;background:var(--rail-hover)}
  body.repshell .siteswitch.ss-static{cursor:default}
  body.repshell .siteswitch.ss-static:hover{background:transparent}
  body.repshell .siteswitch.ss-static .ss-chev{display:none}
  body.repshell .ss-tile{width:24px;height:24px;border-radius:0}
  body.repshell .ss-text b{font-size:var(--fs-base)}
  body.repshell .ss-chev{margin-left:auto}
  /* the collapsed rail (manual railmin, or the ≤ 1023 auto-collapse) narrows the slot to the tile */
  body.repshell.railmin .tb-switch{width:var(--rail-min);padding:0}
  body.repshell.railmin .siteswitch{justify-content:center;padding:0;width:40px;flex:none;margin:0 auto}
  body.repshell.railmin .ss-text,body.repshell.railmin .ss-chev{display:none}
}

/* Oscar's 16px continuation crosses the seam without drawing a rail divider.
   The original collapse button stays beside that seam at both rail widths. */
@media(min-width:721px){
  body.repshell .topbar::after{content:"";position:absolute;left:-16px;bottom:-1px;width:16px;height:1px;background:var(--line);z-index:62;pointer-events:none}
  body.repshell .topbar .rail-collapse{display:grid;width:40px;height:40px;min-width:40px;min-height:40px;flex:none;place-items:center;color:var(--muted);border:1px solid transparent;background:transparent}
  body.repshell .topbar .rail-collapse:hover{color:var(--fg);background:var(--row-hover);border-color:transparent}
}
@media(max-width:720px){body.repshell .topbar .rail-collapse{display:none}}
body:not(.repshell) .topbar .rail-collapse{display:none}
body.repshell #theme{display:inline-grid;place-items:center}
@media (min-width:721px) and (max-width:1023px){
  body.repshell:not(.drawer) .tb-switch{width:var(--rail-min);padding:0}
  body.repshell:not(.drawer) .siteswitch{justify-content:center;padding:0;width:40px;flex:none;margin:0 auto}
  body.repshell:not(.drawer) .ss-text,body.repshell:not(.drawer) .ss-chev{display:none}
}

/* Rail colour roles stay local: the switcher's popover remains on the content
   palette. White active ink is Oscar's explicit accessibility accommodation. */
.rail{background:var(--rail-bg);color:var(--rail-ink);border-right:var(--rail-edge) solid var(--rail-line);color-scheme:dark}
.rail-item,.rail-item:hover,.rail-item .ix{color:var(--rail-ink)}
.rail-item:hover{background:var(--rail-hover)}
.rail-item.on,.rail-item.on:hover{background:var(--rail-active);color:var(--rail-selected-ink)}
.rail-item.on .ix{color:var(--rail-selected-ink)}
.rail-item .cnt{background:var(--rail-hover);border-color:var(--rail-line);color:var(--rail-ink);font-size:var(--fs-fine)}
.rail-item.on .cnt{border-color:var(--rail-line);color:var(--rail-selected-ink)}
.rail-glabel,.rail-collapse,.rail-acct .who{color:var(--rail-muted)}
.rail-collapse:hover{color:var(--rail-muted);background:var(--rail-hover);border-color:var(--rail-line)}
.rail-sep{background:var(--rail-line)}
.rail-foot{border-color:var(--rail-line)}
.rail-wm,.rail-wm .mk,.rail-acct .ini,.rail-acct .who b{color:var(--rail-ink)}
.rail-acct .ini{border-color:var(--rail-line)}
.rail-acct .ini,.rail-acct .who{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0}
.rail-acct:hover{background:var(--rail-hover)}
.rail button:disabled{opacity:1;cursor:default}
.rail-item:disabled,.rail-item:disabled .ix{color:var(--rail-muted)}
.rail-item:disabled:not(.on):hover{background:transparent}
.rail :focus-visible{outline:2px solid var(--rail-ink);outline-offset:-2px;box-shadow:none}
@media (min-width:721px){
  body.repshell .siteswitch{color:var(--rail-ink);color-scheme:dark;min-width:0;opacity:1}
  body.repshell .ss-tile{background:transparent;color:var(--rail-ink)}
  body.repshell .ss-text{min-width:0;overflow:visible}
  body.repshell .ss-text b,body.repshell .ss-text small{white-space:nowrap}
  body.repshell .ss-text small,body.repshell .ss-chev{color:var(--rail-muted)}
  body.repshell .siteswitch:focus-visible{outline:2px solid var(--rail-ink);outline-offset:-2px;box-shadow:none}
}

/* The corrected product mark is one connected, filled three-step polygon.
   A bare 24px mark divides its 6-unit viewBox into exact 8px treads; the former
   empty rounded tile implied a missing image. Tenant artwork keeps its own
   pixels on a square white backing, matching its document presentation. */
.ss-tile{display:block;width:24px;height:24px;background:transparent;border-radius:0;color:inherit}
.ss-tile .mk{width:100%;height:100%;shape-rendering:crispEdges}
.ss-tile img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0;background:var(--pqb-white)}
.ss-tile img[hidden],.ss-tile.has-logo .mk{display:none}