/* Geodesix Supply Dashboard · shared wireframe styles (grayscale, layout only) */
:root {
  --line: #c9c9c9;
  --line-strong: #9a9a9a;
  --ink: #2b2b2b;
  --muted: #6f6f6f;
  --faint: #9a9a9a;
  --panel: #f4f4f4;
  --panel-2: #ececec;
  --radius: 6px;
  --sidebar-w: 250px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: #fff; font-size: 14px; line-height: 1.45;
}
a { color: inherit; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  border-right: 1px solid var(--line); background: #fafafa;
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: 18px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; text-decoration: none; color: inherit; }
.brand .logo { width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.brand .name { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.brand .name small { display: block; font-weight: 400; font-size: 10px; color: var(--faint); letter-spacing: .5px; text-transform: uppercase; }
.nav-section { margin-bottom: 16px; }
.nav-section h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); margin: 0 0 6px; padding: 0 8px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.nav-item:hover { background: var(--panel); }
.nav-item.active { background: var(--panel-2); font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); }
.nav-item .ic { width: 16px; height: 16px; border: 1.4px solid var(--line-strong); border-radius: 3px; flex: none; }
.nav-item.active .ic { border-color: var(--ink); }
.nav-item .lock { margin-left: auto; font-size: 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; }

.main-col { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(4px); padding: 12px 28px; }
.topbar .title-wrap { min-width: 0; flex: 1; }
.topbar h1 { margin: 0; font-size: 18px; }
.topbar p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
.userchip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; }
.userchip .av { width: 26px; height: 26px; border-radius: 50%; border: 1.4px solid var(--line-strong); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.userchip .who b { font-size: 12.5px; }
.userchip .who span { display: block; font-size: 10.5px; color: var(--faint); }
main { padding: 26px 28px 60px; max-width: 1080px; width: 100%; }

/* ---------- Primitives ---------- */
.page-head { margin-bottom: 22px; display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head .ph-text { flex: 1; min-width: 220px; display:none; }
.page-head h2 { margin: 0 0 3px; font-size: 22px; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); text-decoration: none; margin-bottom: 12px; }
.back-link:hover { color: var(--ink); text-decoration: underline; }

.btn { display: inline-flex; align-items: center; gap: 7px; border: 1.4px solid var(--ink); background: #fff; color: var(--ink); border-radius: var(--radius); padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--panel); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: #000; }
.btn.ghost { border-color: transparent; font-weight: 500; }
.btn.ghost:hover { background: var(--panel); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn.block { width: 100%; justify-content: center; }
.btn[disabled], .btn.disabled { opacity: .4; pointer-events: none; }

.card { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.card.pad { padding: 18px; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px){ .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }

.stat { padding: 16px; text-decoration: none; color: inherit; display: block; }
.stat .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.stat .lbl .ic { width: 16px; height: 16px; border: 1.4px solid var(--line-strong); border-radius: 3px; }
.stat .val { font-size: 28px; font-weight: 700; margin-top: 8px; }
.stat .hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
a.card, a.stat { text-decoration: none; }
a.card:hover, a.stat:hover, .clickable:hover { box-shadow: 0 2px 0 var(--line-strong); }
.clickable { cursor: pointer; }

table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; padding: 11px 16px; background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th.r { text-align: right; }
thead th .arrow { color: var(--faint); font-size: 9px; }
tbody td { padding: 12px 16px; border-bottom: 1px solid #efefef; font-size: 13px; vertical-align: middle; }
tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr.clickable:hover { background: var(--panel); }
.link { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; color: inherit; }
.link:hover { color: #000; }

.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; border: 1px solid var(--line-strong); border-radius: 20px; padding: 1px 9px; color: var(--muted); white-space: nowrap; }
.badge.solid { background: var(--panel-2); }
.chip { display: inline-flex; align-items: center; font-size: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px; cursor: pointer; color: var(--muted); background: #fff; font-family: inherit; text-decoration: none; }
.chip:hover { background: var(--panel); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.filterbar .lab { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 2px; }

.input, .select { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 11px; font-family: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.input::placeholder { color: var(--faint); }
.label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 5px; }
.search { max-width: 360px; }

.ph { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); display: grid; place-items: center; color: var(--faint); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; text-align: center; padding: 10px; background: repeating-linear-gradient(45deg,#fbfbfb,#fbfbfb 8px,#f3f3f3 8px,#f3f3f3 16px); }
.imgph { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; color: var(--faint); font-size: 9px; flex: none; background: var(--panel); }

.listrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #efefef; text-decoration: none; color: inherit; }
.listrow:first-child { border-top: 0; }
.listrow:hover { background: var(--panel); }
.listrow .meta { min-width: 0; flex: 1; }
.listrow .meta b { display: block; font-size: 13px; }
.listrow .meta span { font-size: 11.5px; color: var(--muted); }

.stepbar { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.step .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--line-strong); color: var(--muted); }
.step.done .dot, .step.current .dot { background: var(--ink); color: #fff; border-color: var(--ink); }
.step .stxt { font-size: 13px; color: var(--muted); }
.step.current .stxt { color: var(--ink); font-weight: 700; }
.step.done .stxt { text-decoration: underline; }
.step-sep { width: 30px; height: 1px; background: var(--line-strong); }

.quotecard { border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; gap: 12px; }
.quotecard.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.quotecard .check { width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 4px; flex: none; display: grid; place-items: center; font-size: 12px; }
.quotecard.sel .check { background: var(--ink); color: #fff; border-color: var(--ink); }
q { quotes: none; }
.quotecard q { display: block; font-size: 14px; line-height: 1.5; quotes: none; }
.quotecard .attr { margin-top: 10px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.quotecard .attr .av { width: 20px; height: 20px; border-radius: 50%; border: 1.3px solid var(--line-strong); display: grid; place-items: center; font-size: 9px; }

.pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.pagination .pages { display: flex; gap: 6px; }

.selectcard { border: 1.6px solid var(--line); border-radius: 10px; padding: 16px; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; background: #fff; text-decoration: none; color: inherit; }
.selectcard:hover { background: var(--panel); }
.selectcard.sel { border-color: var(--ink); background: var(--panel-2); }
.selectcard .ic { width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 4px; flex: none; }
.selectcard.sel .ic { border-color: var(--ink); }
.selectcard b { display: block; }
.selectcard span { font-size: 12.5px; color: var(--muted); }

.codebox { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; color: var(--muted); white-space: pre-wrap; word-break: break-all; }

.section-h { font-size: 16px; font-weight: 700; margin: 30px 0 14px; }
.sub-h { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.tabs { display: inline-flex; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: #fff; }
.tab { border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: var(--radius); cursor: pointer; text-decoration: none; }
.tab.active { background: var(--ink); color: #fff; }

.chart { height: 180px; display: flex; align-items: flex-end; gap: 10px; padding: 8px 4px; }
.chart .bar { flex: 1; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px 3px 0 0; }
.linechart { height: 180px; position: relative; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.linechart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.donut { width: 150px; height: 150px; border-radius: 50%; border: 26px solid var(--panel-2); border-top-color: var(--line-strong); border-right-color: var(--faint); margin: 0 auto; }

dl.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0; }
dl.kv dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
dl.kv dd { margin: 0; font-size: 13.5px; }

/* Sitemap (index) */
.sitemap { display: grid; gap: 22px; }
.sitemap .group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 10px; }
.sitemap .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; text-decoration: none; color: inherit; }
.tile:hover { background: var(--panel); box-shadow: 0 2px 0 var(--line-strong); }
.tile b { display: block; font-size: 14px; }
.tile span { font-size: 12px; color: var(--muted); }

/* ---------- Supply additions ---------- */
/* Axis label row under a chart primitive */
.chart-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; padding: 0 4px; }

/* Stacked bar chart: one .col per period, .stack sized by inline height,
   .seg slices sized by inline height with grayscale shades g1 (darkest) to g4 (lightest) */
.stackchart { height: 220px; display: flex; align-items: flex-end; gap: 18px; padding: 8px 4px; }
.stackchart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.stackchart .colval { font-size: 10.5px; color: var(--muted); text-align: center; margin-bottom: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stackchart .stack { display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; }
.stackchart .seg { width: 100%; }
.seg.g1 { background: #4a4a4a; }
.seg.g2 { background: #7d7d7d; }
.seg.g3 { background: #ababab; }
.seg.g4 { background: #d6d6d6; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 12px; padding: 0 4px; }
.chart-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--line); flex: none; }

/* Ranked earnings list: horizontal bars with dollar figures, .top row emphasized */
.rankrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #efefef; text-decoration: none; color: inherit; }
.rankrow:first-of-type { border-top: 0; }
.rankrow .rk { width: 16px; font-size: 11px; color: var(--faint); font-weight: 600; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.rankrow .rmeta { flex: 1; min-width: 0; }
.rankrow .rmeta b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankrow .hbar { height: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 2px; margin-top: 5px; }
.rankrow .amt { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.rankrow.top .rk, .rankrow.top .rmeta b, .rankrow.top .amt { color: var(--ink); font-weight: 700; }
.rankrow.top .hbar { background: var(--line-strong); border-color: var(--line-strong); }
/* Small timestamp or annotation pill inside quote lists */
.pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Wireframe status system: color-coded status badge, floating bottom bar, and
   sitemap chips. This annotation tooling is a deliberate exception to the
   otherwise grayscale rule so the data team can read status at a glance. */
.st-approved       { --stc: #1f7a3d; --stbg: #e6f4ea; }
.st-in-review      { --stc: #8a5a00; --stbg: #fbefd3; }
.st-in-development { --stc: #1d4ed8; --stbg: #e7edfb; }
.st-placeholder    { --stc: #555555; --stbg: #ececec; }
.st-deprecated     { --stc: #a12222; --stbg: #f6dede; }

.stbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 9px; border-radius: 20px; color: var(--stc); background: var(--stbg); white-space: nowrap; }
.stbadge .stdot { width: 7px; height: 7px; border-radius: 50%; background: var(--stc); flex: none; }

.statusbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px); padding: 7px 8px 7px 12px; border: 1px solid var(--line-strong); border-radius: 24px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.14); font-size: 12px; }
.statusbar .sb-upd { color: var(--muted); white-space: nowrap; }
.statusbar .sb-notes { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar .sb-legend { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: 16px; padding: 4px 12px; }
.statusbar .sb-legend:hover { background: var(--panel); }
/* ---- Review conventions (batch 2) ------------------------------------- */

/* One filter control per list: the full set opens in place instead of sitting
   on the page as a long row of selects. */
.filters { position: relative; }
.filters > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 11px;
  font-size: 13px; background: #fff; color: var(--ink); }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::before { content: ""; width: 13px; height: 13px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3h11l-4.2 5.2v4.3l-2.6 1.3V8.2z'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
.filters > summary::after { content: "\25BE"; color: var(--muted); font-size: 10px; }
.filters[open] > summary { background: var(--panel-2); }
.filterpanel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 340px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px; display: grid; gap: 12px; }
.filterpanel .frow { display: grid; gap: 5px; }
.filterpanel .fact { display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--line); padding-top: 12px; }

/* An entity filter is a typeahead, never a select. */
.typeahead { position: relative; display: inline-block; }
.typeahead > .input { padding-right: 27px; }
.typeahead::after { content: "\2315"; position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }

/* Every logged in surface's user chip opens a profile and log out menu. */
.userchip { position: relative; cursor: pointer; }
/* The menu used to sit at calc(100% + 8px), and that 8px of nothing broke the
   hover: moving the pointer down from the avatar crossed a band where neither the
   chip nor the menu was under it, so the menu closed before it could be reached.
   The gap is now part of the menu instead of between them. The box starts flush at
   the chip's bottom and an 8px transparent top border reproduces the offset, so
   there is no dead band at any column. background-clip keeps the white card from
   painting under the transparent border. */
.userchip .chipmenu { display: none; position: absolute; z-index: 50; right: 0; top: 100%;
  min-width: 172px; background: #fff; border: 1px solid var(--line-strong);
  border-top: 8px solid transparent; background-clip: padding-box;
  border-radius: var(--radius); padding: 5px; }
.userchip:hover .chipmenu, .userchip:focus-within .chipmenu { display: block; }
/* The menu is wider than the chip and right aligned, so it already covers every
   column below the chip. This covers the chip's own width for the same reason. */
.userchip::after { content: ""; position: absolute; left: 0; right: 0;
  top: 100%; height: 10px; }

.userchip .chipmenu a { display: block; padding: 7px 10px; font-size: 13px; color: var(--ink);
  text-decoration: none; border-radius: 4px; }
.userchip .chipmenu a:hover { background: var(--panel); }

/* ---- Date range: fixed windows plus a calendar, one control everywhere ---- */
/* Any element the builders or the shared controls hide must actually hide.
   .filterbar, .dr-panel and friends set display, which outranks the user agent's
   [hidden] rule, so a hidden panel would render open. Batch 11 added this to the
   retailer surface for the placement gate; batch 12 put the date range control on
   every surface without it, which is why the date panel rendered open everywhere
   else. */
[hidden] { display: none !important; }

.daterange { position: relative; display: inline-flex; align-items: center; }
.dr-panel { position: absolute; z-index: 45; top: calc(100% + 6px); right: 0; min-width: 280px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px; display: grid; gap: 12px; }
.dr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dr-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; margin-bottom: 8px; }
.dr-head span { cursor: pointer; color: var(--muted); padding: 0 6px; }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dr-dow { font-size: 10.5px; color: var(--faint); text-align: center; padding: 2px 0; }
.dr-day { font-size: 12px; text-align: center; padding: 5px 0; border-radius: 4px; cursor: pointer; }
.dr-day:hover { background: var(--panel-2); }
.dr-day.in { background: var(--panel-2); }
.dr-day.edge { background: var(--ink); color: #fff; }

/* Switch rows. Shared with the builders on the retailer surface; the profile
   pages use them for notification toggles, so every surface that renders one
   needs the rules. */
.switchrow { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.switchrow:last-child { border-bottom: 0; }
.switchrow .sw { flex: none; width: 34px; height: 20px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--panel-2); position: relative; margin-top: 1px; }
.switchrow .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); }
.switchrow.on .sw { background: var(--ink); border-color: var(--ink); }
.switchrow.on .sw::after { left: auto; right: 2px; border-color: var(--ink); }
.switchrow .swtext { flex: 1; min-width: 0; }
.switchrow .swtext b { display: block; font-size: 13px; }
.switchrow .swtext b .badge { display: inline-block; width: auto; vertical-align: middle; margin-left: 6px; }
.switchrow .swtext span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.switchrow .swcount { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.switchrow .swcount b { color: var(--ink); }
.switchrow.fixed .swfixed { flex: none; width: 34px; height: 20px; border-radius: 10px;
  background: var(--ink); border: 1px solid var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 11px; }

/* ---- Property switcher in the chip menu (D14, batch 15) ---------------- */

/* A person may reach several properties, through an organization or a network,
   and had no way to move between them; org's dashboard tried a table, which
   stops working at a hundred properties. The chip is the only chrome identical
   on every logged in surface, it already names the current property, and it
   already carries Profile and Log out, so the switcher goes here. Not in a top
   bar, not in a sidebar, not on a dashboard card. One mechanism. */
.userchip .chipmenu { min-width: 236px; }
.userchip .chipmenu .cm-h { padding: 4px 10px 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.userchip .chipmenu a.cm-prop { display: flex; gap: 8px; align-items: flex-start; }
.userchip .chipmenu a.cm-prop .cm-mark { flex: none; width: 11px; font-size: 11px;
  line-height: 1.45; color: var(--muted); }
.userchip .chipmenu a.cm-prop.current .cm-mark { color: var(--ink); }
.userchip .chipmenu a.cm-prop.current b { font-weight: 700; }
.userchip .chipmenu a.cm-prop .cm-sub { display: block; font-size: 11px; color: var(--muted); }
.userchip .chipmenu a.cm-more { font-size: 12px; color: var(--muted); }
.userchip .chipmenu .cm-sep { height: 1px; background: var(--line); margin: 5px 0; }

/* ---- View as bar (admin impersonation) --------------------------------- */

/* Rendered by nav.js only when ?viewas= is present. It sits above the topbar
   rather than inside the chip menu, because someone looking at an account that
   is not theirs should never have to go looking to find that out. */
.viewas { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 22px; background: var(--panel-2); border-bottom: 1px solid var(--line-strong); }
.viewas .va-txt b { display: block; font-size: 13px; }
.viewas .va-txt span { display: block; font-size: 11.5px; color: var(--muted); }

/* Login page primitives, ported verbatim from public/style.css in batch 17 when
   login moved out of the public surface onto the three audience surfaces. A
   login page carries no .app wrapper and no sidebar, because nobody is signed in
   yet, so main.authpage undoes the app padding and lets .auth-wrap centre itself.
   Keep these identical across retailer, supply, and admin: the three login pages
   are generated from one shared block and are supposed to render the same. */
main.authpage { max-width: none; padding: 0; }
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 48px 28px 70px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { margin: 0 0 5px; font-size: 26px; }
.auth-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
.formgrid { display: grid; gap: 14px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.authlinks { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.turnstile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--panel); padding: 11px 13px; font-size: 12.5px;
  color: var(--muted); }
.turnstile .tsbox { width: 22px; height: 22px; border: 1px solid var(--line-strong);
  border-radius: 4px; background: #fff; flex: none; }