/* Geodesix Admin. 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); }
.imgph.sm { width: 30px; height: 30px; border-radius: 4px; font-size: 7px; }

/* The publisher logo mark. In V1 this is the only brand asset that renders
   anywhere: it is the circle beside a publisher's name wherever a citation
   names its source. Copied from the retailer surface, which had it first;
   product-detail.html was already emitting the class with no rule behind it. */
.publogo { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--muted); flex: none; }
.publogo.sm { width: 20px; height: 20px; font-size: 8px; }
.publogo.lg { width: 40px; height: 40px; font-size: 12px; }

.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; }
/* Horizontal bar rows: label left, bar with the value at its end */
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; font-size: 12px; }
.hbar .hlab { color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .htrack { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hbar .hfill { height: 14px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 3px; flex: none; }
.hbar .hval { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.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); }

/* ---------- Admin additions (grayscale primitives) ---------- */
/* Field-level diff rows in the review queue */
.diff { background: var(--panel); border-radius: var(--radius); padding: 8px 10px; font-size: 12px; }
.diff b { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.diff .before { color: var(--faint); text-decoration: line-through; }
.diff .after { color: var(--ink); font-weight: 600; }

/* Checkbox placeholder for bulk selection */
.cb { width: 16px; height: 16px; border: 1.4px solid var(--line-strong); border-radius: 3px; display: inline-grid; place-items: center; font-size: 10px; flex: none; background: #fff; }
.cb.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Bulk action bar above tables */
.bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line-strong); background: var(--panel); border-radius: 8px; padding: 8px 14px; font-size: 13px; }

/* On/off switch (billing overrides) */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.switch .track { width: 32px; height: 18px; border-radius: 10px; border: 1.4px solid var(--line-strong); background: var(--panel-2); position: relative; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); }
.switch.on .track { background: var(--ink); border-color: var(--ink); }
.switch.on .track::after { left: auto; right: 2px; border-color: #fff; }

/* Highlighted span inside a pasted article body (add-article flow) */
.hl { background: var(--panel-2); border-bottom: 2px solid var(--ink); padding: 0 2px; border-radius: 2px; }

/* Wide read-only body text block */
.bodytext { font-size: 13.5px; line-height: 1.7; color: var(--muted); white-space: pre-line; }

/* Transcript rows (video content detail) */
.cue { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 4px 0; font-size: 13px; }
.cue .t { color: var(--faint); 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; }

/* ---- Version banner ----------------------------------------------------- */

/* Rendered by nav.js on every page of this surface, never written into a page,
   so adding a page cannot leave it off. It says which build is on screen and
   nothing else. Grayscale, like the rest of the chrome. */
.versionbar { padding: 9px 22px; background: var(--panel-2);
  border-bottom: 1px solid var(--line-strong); }
.versionbar .vb-txt b { display: block; font-size: 13px; }
.versionbar .vb-txt span { display: block; font-size: 11.5px; color: var(--muted); }

/* Login page primitives, ported from the main platform surfaces in v1 batch 7
   when V1 gained its own logins and stopped logging out into public/. 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 on v1-admin and v1-retailer: the two 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; }