/* Geodesix Retailer 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; white-space: nowrap; }
.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); }
/* Any element the builders hide must actually hide. .filterbar and friends set
   display, which outranks the user agent's [hidden] rule, so the placement gate
   was hiding the table and leaving the filter bar on screen. */
[hidden] { display: none !important; }

.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: nowrap; overflow-x: auto; padding-bottom: 2px; }
.stepbar .step, .stepbar .step-sep { flex: none; }
.stepbar .stxt { white-space: nowrap; }
.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; }

/* Widget type mockups: tiny grayscale sketches of each widget, drawn with divs.
   Used on the builder type page and the preview steps. */
.mock { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 10px; display: flex; gap: 8px; align-items: stretch; width: 100%; min-height: 96px; }
.mock .mcard { flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; padding: 7px; display: grid; gap: 4px; align-content: start; }
.mock .mline { height: 5px; border-radius: 2px; background: var(--panel-2); }
.mock .mline.dark { background: var(--line-strong); }
.mock .mline.w60 { width: 60%; }
.mock .mline.w40 { width: 40%; }
.mock .mattr { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.mock .mattr .mline { flex: 1; }
.mock .mdot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; }
.mock .msq { height: 26px; border: 1px solid var(--line); border-radius: 3px; background: repeating-linear-gradient(45deg,#fff,#fff 4px,#f0f0f0 4px,#f0f0f0 8px); }
.mockbtn { display: inline-flex; align-items: center; gap: 5px; border: 1.3px solid var(--ink); background: #fff; border-radius: 14px; padding: 4px 9px; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; align-self: center; color: var(--ink); }
.mockbtn .mchk { width: 10px; height: 10px; border-radius: 50%; border: 1.2px solid var(--ink); display: inline-block; flex: none; }
.mockpop { flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; box-shadow: 2px 2px 0 var(--line); padding: 7px; display: grid; gap: 4px; align-content: start; }

/* Progress meter (grayscale): spend vs budget */
.meter { display: block; height: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; min-width: 90px; }
.meter .fill { display: block; height: 100%; background: var(--line-strong); }
.meter.warn .fill { background: var(--ink); }
.meter-wrap { display: grid; gap: 4px; min-width: 130px; }
.meter-wrap .num { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Wide progress row: title on top, near-full-width meter below with the
   figure above its right end, status badge in the right gutter. */
.prow { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #efefef; text-decoration: none; color: inherit; }
.prow:first-child { border-top: 0; }
a.prow:hover { background: var(--panel); }
.prow .pmain { flex: 1; min-width: 0; display: block; }
.prow .ptop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prow .ptop b { font-size: 13px; }
.prow .ptop span { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prow .meter { width: 100%; margin-top: 5px; }
.prow .badge { flex: none; }
.prow .psub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* Horizontal bar rows: label, bar sized relative to the max, value at the bar end */
.hrow { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; margin-bottom: 12px; }
.hrow:last-child { margin-bottom: 0; }
.hrow .hlab { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.hrow .htrack { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hrow .hfill { height: 16px; background: var(--line-strong); border-radius: 3px; flex: none; }
.hrow .hfill.lt { background: var(--panel-2); border: 1px solid var(--line); }
.hrow .hval { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Publisher logo placeholder */
.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; }

/* Rich tiles with thumbnails (content, citations, products).
   The minmax min is at least a third of the row, so the grid never exceeds
   3 tiles per row and collapses to 2 then 1 on narrow widths. */
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(230px, calc((100% - 28px) / 3)), 1fr)); gap: 14px; }
.rtile { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; }
a.rtile:hover, .rtile.clickable:hover { box-shadow: 0 2px 0 var(--line-strong); }
.thumb { display: grid; place-items: center; color: var(--faint); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; background: repeating-linear-gradient(45deg,#fbfbfb,#fbfbfb 8px,#f3f3f3 8px,#f3f3f3 16px); }
.rtile .thumb { height: 108px; border-bottom: 1px solid var(--line); }
.rtile .tbody { padding: 12px 14px 14px; display: grid; gap: 7px; align-content: start; flex: 1; }
.rtile .trow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.rtile .tfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); border-top: 1px solid #efefef; padding-top: 9px; margin-top: auto; }

/* Deliberate exception to the grayscale rule: the single Facebook-blue
   "Push to Meta" button. Everything else stays grayscale. */
.btn.meta { background: #1877F2; border-color: #1877F2; color: #fff; }
.btn.meta:hover { background: #1877F2; opacity: .92; }

.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%; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { display: inline-block; width: 18px; border-top: 2px solid var(--line-strong); }
.legend .sw.dark { border-top-color: var(--ink); }
.legend .sw.dash { border-top-style: dashed; border-top-color: var(--faint); }
.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); }

/* 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); }

/* ---- Widget builder: sources, approval mode, and rules (batch 4) -------- */

/* On and off primitive. The surface had no switch or checkbox styling before
   this: selection was drawn with .selectcard.sel and .quotecard .check, neither
   of which reads as a persistent setting. */
.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); }

/* Own citations are always on, so they are a fixed row rather than a switch: the
   check reads as a statement, where a switch would imply it could be turned off. */
.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; }

/* The manual picker opens one product at a time, so its table marks which. */
tr.clickable.active > td { background: var(--panel-2); }
tr.clickable.active > td:first-child { box-shadow: inset 3px 0 0 var(--ink); }

/* The rule set. Six rules, and together they are the whole approval panel. */
.rulelist { display: grid; gap: 0; }
.rule { display: grid; grid-template-columns: 22px 1fr; gap: 11px; padding: 13px 0;
  border-bottom: 1px solid var(--line); align-items: start; }
.rule:last-child { border-bottom: 0; }
.rule .rn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); }
.rule .rbody b { display: block; font-size: 13px; margin-bottom: 5px; }
.rule .rbody .rhint { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.rule .rctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule .rctl .input, .rule .rctl .select { width: auto; }
.rules[data-mode="manual"] .rulelist { opacity: .45; pointer-events: none; }

/* Settings display options sit in one row and wrap only on a small screen. */
.displayrow { display: flex; gap: 10px; flex-wrap: wrap; }
.displayrow > .switchrow { flex: 1 1 240px; min-width: 0; align-items: center;
  border: 1.6px solid var(--line); border-radius: 10px; padding: 14px 16px; }
@media (max-width: 700px) { .displayrow { flex-direction: column; } }

/* ---- Date range: fixed windows plus a calendar, one control everywhere ---- */
.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; }

/* ---- 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); }

/* ---- 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); }


/* ---- Single select in a table ------------------------------------------- */

/* A citation is selected one at a time, so the control is a radio rather than
   the switch an exclusions table uses: switching several things on at once is
   not what this page does. .selbar carries the count and the action, and it is
   the same shape as .bulkbar on the admin surface. */
.rb { width: 16px; height: 16px; border: 1.4px solid var(--line-strong); border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: #fff; }
.rb.on { border-color: var(--ink); border-width: 1.5px; }
.rb.on::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.selbar { 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; margin-bottom: 12px; }

/* 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; }