/* Cite operator tools: the shared shell and controls for Business (vendor), Console, Admin, Door and Post.
   Needs tokens.css + components.css. Colour blocks instead of dividers; every card says why it is there.
   Fills the window at any width: there is no max-width on the work area. */

body.tool { min-height: 100vh; background: var(--ground); }
.tool-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }

/* ── Sidebar ── */
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 16px; background: var(--ground2); overflow-y: auto; scrollbar-width: thin; }
.side-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 6px; font-weight: 800; font-size: 19px; letter-spacing: -.03em; }
.side-brand svg { width: 24px; height: 24px; }
.side-brand .tool-name { color: var(--ink3); font-weight: 700; }
.side-place { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 10px; align-items: center; width: 100%; padding: 8px; border-radius: 12px; background: var(--sheet); box-shadow: var(--shadow); text-align: left; }
.side-place .art { width: 44px; border-radius: 8px; }
.side-place b { display: block; font-weight: 750; font-size: 14.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-place small { display: flex; align-items: center; gap: 6px; color: var(--ink3); font-size: 12.5px; font-weight: 600; }
.side-place .ico { width: 18px; height: 18px; color: var(--ink3); }
.side-nav { display: grid; gap: 2px; }
.side-nav .grp { margin: 12px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.side-nav a { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 11px; align-items: center; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--ink2); font-weight: 650; font-size: 14.5px; transition: background-color 160ms ease, color 160ms ease; }
.side-nav a .ico { width: 19px; height: 19px; }
.side-nav a[aria-current] { background: none; box-shadow: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 6px; font-weight: 750; }
/* Selected is ink and an underline, never green (the owner's rule): the icon too. */
.side-nav a[aria-current] .ico { color: var(--ink); }
.side-nav .count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: var(--ground); font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
@media (hover: hover) { .side-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--sheet) 60%, transparent); } }
.side-note { margin-top: auto; padding: 14px; border-radius: 12px; background: var(--fc, var(--oat)); color: var(--on-field); font-size: 13.5px; line-height: 1.45; }
.side-note b { display: block; margin-bottom: 4px; font-weight: 800; }
.side-note p { color: var(--on-field2); }
.side-foot { display: grid; gap: 2px; }
.side-foot a, .side-foot button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; color: var(--ink3); font-weight: 650; font-size: 14px; width: 100%; }
.side-foot .ico { width: 18px; height: 18px; }
@media (hover: hover) { .side-foot a:hover, .side-foot button:hover { color: var(--ink); } }
.legal-links { padding: 6px 10px 0; color: var(--faint); font-size: 12px; line-height: 1.7; }
.legal-links a { color: var(--ink3); }

/* ── Work area ── */
.work { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px var(--tg); background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root { --tg: clamp(16px, 2.4vw, 40px); }
.topbar .crumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink3); font-weight: 650; font-size: 14px; }
.topbar .crumb b { color: var(--ink); font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; background: var(--well); color: var(--ink2); transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .ico { width: 19px; height: 19px; }
.icon-btn .badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--s-sold); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--ground); }
@media (hover: hover) { .icon-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--well) 70%, var(--sheet)); } }
.search-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border-radius: 99px; background: var(--well); color: var(--ink3); font-weight: 600; font-size: 14px; min-width: 230px; }
.search-btn .ico { width: 17px; height: 17px; }
.search-btn kbd, kbd.k { margin-left: auto; display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--sheet); color: var(--ink2); font: 700 11.5px/1 var(--f); box-shadow: 0 1px 0 var(--rule2); }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--clay); color: #FBF8F1; font-weight: 800; font-size: 14px; }
.menu-tool { display: none; }

.page { padding: 8px var(--tg) 56px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; margin: 6px 0 26px; }
.page-head h1 { font-weight: 800; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.04em; }
.page-head .lede { margin-top: 10px; font-size: 16.5px; }
.page-head .acts-r { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

/* A 12-column board that stretches with the window. */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); align-items: start; }
.board > * { grid-column: span 12; min-width: 0; }
.s3 { grid-column: span 3 !important; } .s4 { grid-column: span 4 !important; } .s5 { grid-column: span 5 !important; } .s6 { grid-column: span 6 !important; } .s7 { grid-column: span 7 !important; } .s8 { grid-column: span 8 !important; } .s9 { grid-column: span 9 !important; }
@media (min-width: 2100px) { .xl-s3 { grid-column: span 3 !important; } .xl-s4 { grid-column: span 4 !important; } .xl-s6 { grid-column: span 6 !important; } }
@media (max-width: 1280px) { .s3 { grid-column: span 6 !important; } .s4, .s5 { grid-column: span 6 !important; } .s7, .s8, .s9 { grid-column: span 12 !important; } .s6.keep { grid-column: span 6 !important; } }
@media (max-width: 1100px) { .s6 { grid-column: span 12 !important; } }
@media (max-width: 720px) { .s3, .s4, .s5, .s6, .s6.keep { grid-column: span 12 !important; } }
.stretch { align-self: stretch; }

/* Cards: a title, then one line on why the card is there. */
.tcard { position: relative; padding: clamp(16px, 1.4vw, 22px); border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); }
.tcard.flat { box-shadow: none; background: var(--ground2); }
.tcard.field { background: var(--fc, var(--sage)); color: var(--on-field); box-shadow: none; }
.tcard.field .why, .tcard.field .muted { color: var(--on-field2); }
.tcard.field .well { background: rgba(251,248,241,.55); }
.tcard > header, .thead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.tcard h2, .tcard h3.t { font-weight: 800; font-size: clamp(19px, 1.45vw, 22px); letter-spacing: -.022em; line-height: 1.2; }
.why { margin-top: 4px; color: var(--ink3); font-size: 15px; font-weight: 550; line-height: 1.45; }
.thead .r { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.muted { color: var(--ink3); }
.well { border-radius: 10px; background: var(--well); }

/* Rows inside cards: separated by space and a soft hover, never a rule. */
.rows { display: grid; gap: 4px; }
.row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 10px; transition: background-color 160ms ease; }
.row:nth-child(odd) { background: color-mix(in srgb, var(--well) 55%, transparent); }
.row .grow { flex: 1; min-width: 0; }
.row b { display: block; font-weight: 700; font-size: 15.5px; }
.row small { display: block; color: var(--ink3); font-size: 14px; }
.row .art { width: 40px; flex: none; border-radius: 7px; }

/* Controls */
.lbl { display: block; margin-bottom: 7px; font-weight: 700; font-size: 14.5px; color: var(--ink2); }
.lbl .muted { font-weight: 550; }
.inp, .sel, .area { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; font-weight: 600; font-size: 16px; }
.area { padding: 12px 14px; min-height: 96px; line-height: 1.5; }
.sel { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink3) 50%), linear-gradient(135deg, var(--ink3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.hint { margin-top: 7px; color: var(--ink3); font-size: 13.5px; display: flex; justify-content: space-between; gap: 8px; }
.hint.err { color: var(--danger); font-weight: 650; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* Chips: one choice (radio) or many (check). The chosen one is ink. */
.chips-x { display: flex; flex-wrap: wrap; gap: 8px; }
.cx { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 99px; background: var(--well); color: var(--ink2); font-weight: 650; font-size: 14px; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out); }
.cx:active { transform: scale(.96); }
.cx[aria-pressed="true"], .cx[aria-checked="true"] { background: var(--ink); color: var(--ground); }
.cx .ico { width: 16px; height: 16px; }
.cx.sm { height: 32px; padding: 0 12px; font-size: 13px; }
@media (hover: hover) { .cx:not([aria-pressed="true"]):not([aria-checked="true"]):hover { color: var(--ink); background: color-mix(in srgb, var(--well) 60%, var(--rule2)); } }

/* Tabs, the one shared style (.tabs; .seg is the same thing under its old
   name). The chosen tab is full ink at a heavier weight with an ink
   underline (cream in dark); the others are muted ink. No pill, no fill.
   paste/controls.js tabs() adds one .tab-ink that slides between them on
   transform only; without it each chosen tab draws its own underline.
   Chosen = aria-selected, aria-current or aria-pressed = "true". */
.tabs, .seg { position: relative; display: flex; align-items: stretch; gap: clamp(16px, 1.8vw, 28px); margin: 0; padding: 0; background: none; border-radius: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }
.tabs > :is(a, button), .seg > :is(a, button) { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 1px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink3); font-weight: 650; font-size: 15px; white-space: nowrap; text-decoration: none; transition: color 160ms ease; }
.tabs > :is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-pressed="true"]),
.seg > :is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-pressed="true"]) { color: var(--ink); font-weight: 800; background: none; box-shadow: none; }
.tabs > :is(a, button)::after, .seg > :is(a, button)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 50% 100%; transition: transform 220ms var(--ease-out); }
.tabs > :is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-pressed="true"])::after,
.seg > :is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-pressed="true"])::after { transform: scaleX(1); }
.tabs.has-ink > :is(a, button)::after, .seg.has-ink > :is(a, button)::after { display: none; }
.tab-ink { position: absolute; left: 0; bottom: 0; width: 100px; height: 2.5px; border-radius: 2px; background: var(--ink); pointer-events: none; transform-origin: 0 0; transform: translateX(var(--tx, 0)) scaleX(var(--tw, 0)); transition: transform 260ms var(--ease-out); }
.tabs > :is(a, button):focus-visible, .seg > :is(a, button):focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { .tabs > :is(a, button):hover, .seg > :is(a, button):hover { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .tab-ink, .tabs > *::after, .seg > *::after { transition: none; } }

/* Toggle */
.sw { position: relative; display: inline-flex; flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--rule2); transition: background-color 200ms ease; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FBF8F1; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform 260ms var(--ease-out); }
.sw[aria-checked="true"] { background: var(--accent); }
.sw[aria-checked="true"]::after { transform: translateX(18px); }

/* KPIs */
.kpi { display: grid; gap: 4px; }
.kpi .k { color: var(--ink3); font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kpi .k .ico { width: 15px; height: 15px; }
.kpi .v { font-weight: 800; font-size: clamp(30px, 2.6vw, 42px); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 12.5px; font-weight: 700; color: var(--ink3); }
.kpi .d.up { color: var(--green-ink); }
.spark { width: 100%; height: 34px; margin-top: 6px; color: var(--ink2); }

/* Bars and heatmaps drawn with CSS */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.bars span { flex: 1; min-width: 0; border-radius: 6px 6px 3px 3px; background: var(--ink); height: calc(var(--h) * 1%); transform-origin: bottom; animation: grow 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.bars span.soft { background: var(--oat); }
.bars-x { display: flex; gap: 6px; margin-top: 8px; color: var(--ink3); font-size: 11.5px; font-weight: 650; }
.bars-x span { flex: 1; min-width: 0; text-align: center; }
@keyframes grow { from { transform: scaleY(0); } }
.heat { display: grid; grid-template-columns: 34px repeat(var(--cols, 15), minmax(0, 1fr)); gap: 3px; font-size: 11px; color: var(--ink3); font-weight: 650; }
.heat i { aspect-ratio: 1.3; border-radius: 4px; background: color-mix(in srgb, var(--s-busy) calc(var(--v) * 100%), var(--well)); }
.heat .hl { display: flex; align-items: center; }
.meter { height: 10px; border-radius: 99px; background: var(--well); overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: 99px; background: var(--ink); transition: width 600ms var(--ease-out); }

/* Empty states: a plate and a sentence, never a blank box. */
.empty { display: grid; justify-items: center; gap: 12px; padding: 28px 16px; text-align: center; border-radius: 12px; background: var(--ground2); }
.empty .art { width: 84px; border-radius: 8px; transform: rotate(-3deg); box-shadow: var(--shadow); }
.empty b { font-weight: 800; font-size: 16px; }
.empty p { max-width: 34em; color: var(--ink3); font-size: 15px; }

/* Loading */
.skel { position: relative; overflow: hidden; border-radius: 10px; background: var(--well); }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sheet) 70%, transparent), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Popover, dialog, palette */
.pop { position: absolute; top: 0; left: 0; z-index: 90; width: min(380px, calc(100vw - 24px)); padding: 10px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-lift); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity 160ms ease, transform 220ms var(--ease-out); }
.pop.on { opacity: 1; transform: none; pointer-events: auto; }
.pop h3 { padding: 6px 8px 8px; font-weight: 800; font-size: 15px; display: flex; align-items: center; }
.pop h3 button { margin-left: auto; color: var(--ink3); font-size: 13px; font-weight: 700; }
.note-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 9px 8px; border-radius: 10px; }
.note-item.unread { background: color-mix(in srgb, var(--mustard) 18%, transparent); }
.note-item .ni { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--well); }
.note-item .ni .ico { width: 17px; height: 17px; }
.note-item b { font-weight: 700; font-size: 14px; display: block; }
.note-item small { color: var(--ink3); font-size: 12.5px; }
.scrim { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding: 12vh 16px 16px; background: rgba(20,18,15,.42); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.scrim.on { opacity: 1; pointer-events: auto; }
.scrim.center { place-items: center; padding-top: 16px; }
.dialog { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: 18px; background: var(--sheet); box-shadow: var(--shadow-lift); transform: translateY(10px) scale(.98); transition: transform 260ms var(--ease-out); }
.scrim.on .dialog { transform: none; }
.dialog h2 { font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.dialog .foot-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.palette { width: min(620px, 100%); padding: 8px; }
.palette .inp { height: 54px; font-size: 17px; background: transparent; box-shadow: none !important; }
.palette ul { display: grid; gap: 2px; max-height: 52vh; overflow: auto; margin-top: 4px; }
.palette li { list-style: none; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 10px; color: var(--ink2); font-weight: 650; cursor: pointer; }
.palette li .ico { width: 18px; height: 18px; color: var(--ink3); }
.palette li small { margin-left: auto; color: var(--ink3); font-weight: 600; font-size: 12.5px; }
.palette li[aria-selected="true"] { background: var(--well); color: var(--ink); }
.palette .ph { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* Stepper: a progress rail. A node per step joined by a line that fills in
   green as the steps are done; the current one is the ink node with a halo.
   No pills: it reads as where you are, not as three buttons. */
.steps { display: flex; align-items: center; margin: 0; padding: 0; }
.steps li { list-style: none; display: inline-flex; align-items: center; gap: 10px; color: var(--ink3); font-weight: 700; font-size: 15px; white-space: nowrap; }
.steps li + li::before { content: ''; flex: none; width: clamp(24px, 3.4vw, 64px); height: 2px; margin: 0 14px 0 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background-color 300ms ease; }
.steps li i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--ink3); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease; }
.steps li i .ico, .steps li i svg { width: 14px; height: 14px; }
.steps li.done { color: var(--ink2); }
.steps li.done i { background: var(--green); color: #fff; box-shadow: none; }
.steps li.done + li::before { background: var(--green); }
.steps li[aria-current] { color: var(--ink); font-weight: 800; }
.steps li[aria-current] i { background: var(--ink); color: var(--ground); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Drop zone */
.drop { display: grid; place-items: center; gap: 8px; min-height: 180px; padding: 20px; border-radius: 12px; background: var(--ground2); box-shadow: inset 0 0 0 1.5px var(--rule2); text-align: center; color: var(--ink3); cursor: pointer; transition: box-shadow 160ms ease, background-color 160ms ease; }
.drop .ico { width: 28px; height: 28px; color: var(--ink2); }
.drop b { color: var(--ink); }
.drop.over { box-shadow: inset 0 0 0 2.5px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--ground2)); }

/* The map-ish frame used for pin previews and areas */
.mapframe { position: relative; overflow: hidden; border-radius: 12px; background: var(--oat); aspect-ratio: 16 / 10; }
.mapframe > .art { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.mapframe .ring { position: absolute; left: 50%; top: 50%; width: var(--rd, 40%); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: color-mix(in srgb, var(--rc, var(--green)) 18%, transparent); box-shadow: inset 0 0 0 2px var(--rc, var(--green)); transition: width 500ms var(--ease-out); }
.mapframe .dotpin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--green); box-shadow: 0 0 0 3px #FBF8F1, 0 6px 14px rgba(0,0,0,.4); }

/* Bottom tab bar (phones) */
.tabbar { display: none; }

/* Mobile */
@media (max-width: 960px) {
  .tool-shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 140; width: min(310px, 86vw); transform: translateX(-104%); transition: transform 300ms var(--ease-out); box-shadow: 30px 0 60px -30px rgba(0,0,0,.5); }
  .side.open { transform: none; }
  .side-scrim { position: fixed; inset: 0; z-index: 130; background: rgba(20,18,15,.4); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
  .side-scrim.on { opacity: 1; pointer-events: auto; }
  .menu-tool { display: inline-grid; }
  .search-btn { min-width: 0; width: 40px; padding: 0; justify-content: center; }
  .search-btn span, .search-btn kbd { display: none; }
  .topbar .theme { display: none; }
  .page { padding-bottom: 110px; }
  .tabbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--sheet) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-lift); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 2px; padding: 7px 2px 6px; border-radius: 14px; color: var(--ink3); font-size: 11px; font-weight: 700; }
  .tabbar .ico { width: 21px; height: 21px; }
  /* The chosen tab: ink and an underline under its word, never a filled pill. */
  .tabbar [aria-current] { background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 5px; }
  .toast { bottom: 92px; }
}
@media (max-width: 520px) {
  .page-head .acts-r { margin-left: 0; }
  .topbar .crumb .hide-sm { display: none; }
}

/* ── The slip shell (Tool.mount({ slip: true }): /console, /door) ─────────
   The redesign board's phone shell. The sidebar stays until the window is a
   phone (761px and up); below that the menu button and crumb give way to a
   top slip (the wordmark, search, you), the place slip under it, and the
   bottom bar, whose More opens the sidebar as a drawer. */
.topbar-brand, .mplace { display: none; }
@media (min-width: 761px) and (max-width: 960px) {
  .tool-shell.op-slip { grid-template-columns: 292px minmax(0, 1fr); }
  .tool-shell.op-slip .side { position: sticky; inset: auto; top: 0; z-index: auto; width: auto; height: 100vh; transform: none; transition: none; box-shadow: none; }
  .tool-shell.op-slip .side-scrim, .tool-shell.op-slip .menu-tool, .tool-shell.op-slip .tabbar { display: none; }
  .tool-shell.op-slip .page { padding-bottom: 56px; }
}
@media (max-width: 760px) {
  .tool-shell.op-slip .topbar { position: static; min-height: 64px; padding-top: 0; padding-bottom: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tool-shell.op-slip .menu-tool, .tool-shell.op-slip .topbar .crumb { display: none; }
  .tool-shell.op-slip .topbar-brand { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 800; font-size: 19px; letter-spacing: .03em; white-space: nowrap; }
  .tool-shell.op-slip .topbar-brand svg { width: 26px; height: 26px; flex: none; }
  .tool-shell.op-slip .topbar-brand .tool-name { color: var(--ink3); font-weight: 650; letter-spacing: -.01em; }
  /* Search is a round outlined button on the slip, as the board's icons are. */
  .tool-shell.op-slip .search-btn { width: 44px; height: 44px; min-width: 0; padding: 0; background: none; color: var(--ink2); box-shadow: inset 0 0 0 1.5px var(--rule2); }
  .tool-shell.op-slip .topbar .avatar { width: 40px; height: 40px; }
  .tool-shell.op-slip .mplace { display: block; padding: 4px var(--tg) 26px; }
  .tool-shell.op-slip .mplace > * { width: 100%; }
}
@media (max-width: 360px) { .tool-shell.op-slip .topbar-brand { font-size: 17px; gap: 7px; } }

/* Shell fixes found while building the tools */
@media (min-width: 961px) { .side-scrim { display: none; } }
.side-foot .legal-links a { display: inline; height: auto; padding: 0; width: auto; font-size: 12px; }
.ico { width: 18px; height: 18px; flex: none; }
.tag .ico { width: 14px; height: 14px; }
@media (max-width: 640px) { .tcard .thead { flex-wrap: wrap; } .tcard .thead .r { margin-left: 0; } .tcard .thead > div:first-child { min-width: 0; flex: 1 1 100%; } }
.tcard.field .row { background: rgba(251,248,241,.42); color: #1D1F22; }
.tcard.field .row:nth-child(even) { background: transparent; }
.tcard.field .row small { color: rgba(29,31,34,.72); }
.tcard.field h2, .tcard.field b { color: var(--on-field); }
.tcard.field .pill { background: #1D1F22; color: #FBF8F1; }
.tcard.field .btn { background: #1D1F22; color: #FBF8F1; }
.tcard.field .btn.quiet { background: transparent; color: #1D1F22; box-shadow: inset 0 0 0 1.5px #1D1F22; }
.tcard.field .tag { background: rgba(251,248,241,.55); color: #1D1F22; }
.tcard.field .link { color: #1D1F22; }
.s12 { grid-column: span 12 !important; }
.tag svg { width: 14px; height: 14px; flex: none; }
.tcard.field .row small { color: rgba(29,31,34,.72); }

/* ── Fields, for every operator tool ──────────────────────────────────────
   The owner's rule: a field is a clear outline, never a filled box. A light
   line on the dark room, an ink line on paper, both from --ink so they follow
   the theme; the line darkens under the pointer, and focus is the full ink
   line with the accent's halo round it. This is the one place it is said:
   Paste-up's .inp/.sel/.area, the desk's .v-input (vendor, admin) and the
   reply box all take it here. Only paint is set, never size, so each tool
   keeps its own geometry; the :not(.sr) lifts it over a page's own fill. */
:is(.inp, .sel, .area, .v-input, .d-reply-input):not(.sr) {
  --fl: color-mix(in srgb, var(--ink) 38%, transparent);
  border: 0;
  background-color: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--fl);
  transition: box-shadow 160ms ease, background-color 160ms ease;
}
@media (hover: hover) { :is(.inp, .sel, .area, .v-input, .d-reply-input):not(.sr):hover { --fl: color-mix(in srgb, var(--ink) 66%, transparent); } }
:is(.inp, .sel, .area, .v-input, .d-reply-input):not(.sr):focus { outline: none; background-color: transparent; box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px color-mix(in srgb, var(--accent) 34%, transparent); }
:is(.inp, .sel, .area, .v-input, .d-reply-input):not(.sr)::placeholder { color: var(--ink3); opacity: .85; font-weight: 500; }
:is(.inp, .sel, .area, .v-input):not(.sr):is(.err, [aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--danger); }
:is(.inp, .sel, .area, .v-input):not(.sr):is(.err, [aria-invalid="true"]):focus { box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 26%, transparent); }
:is(.inp, .sel, .area, .v-input):not(.sr):disabled { --fl: color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink3); cursor: not-allowed; }
.sel option { background: var(--sheet); color: var(--ink); }
/* Textareas: no drag grip; they grow with what is typed (lib/autogrow.js where field-sizing is unknown). */
textarea:is(.area, .v-input, .inp, .d-reply-input):not(.sr) { resize: none; field-sizing: content; max-height: 60vh; overflow-y: auto; }
/* On a printed field (sage, mustard...) the ink is always the paper ink. */
.field :is(.inp, .sel, .area, .v-input):not(.sr) { --fl: rgba(29,31,34,.45); color: #1D1F22; }
.field :is(.inp, .sel, .area, .v-input):not(.sr):focus { box-shadow: inset 0 0 0 2px #1D1F22, 0 0 0 4px rgba(251,248,241,.55); }
/* The command palette's search is the dialog's own top line, not a field in it. */
.palette .inp:not(.sr), .palette .inp:not(.sr):focus { box-shadow: none; }

/* ── Maps in the tools, on paper ──────────────────────────────────────────
   A live map or a still, mounted like a collage plate: tinted warm (paper in
   light, warm ink in dark), grained, with a torn edge cut by a mask. The
   Mapbox logo stays, small and quiet; the credit line is the page's own. */
.paper-map { position: relative; overflow: hidden; border-radius: 6px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M4 6 L60 2 L130 7 L210 3 L300 8 L380 2 L470 6 L560 1 L650 7 L740 3 L830 8 L920 2 L996 5 L999 70 L994 150 L998 240 L993 330 L999 420 L995 510 L998 600 L994 690 L999 780 L995 870 L998 996 L930 993 L840 998 L750 992 L660 997 L570 993 L480 999 L390 994 L300 998 L210 993 L120 997 L40 994 L3 998 L6 900 L1 810 L5 720 L2 630 L7 540 L1 450 L6 360 L2 270 L7 180 L1 90 Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M4 6 L60 2 L130 7 L210 3 L300 8 L380 2 L470 6 L560 1 L650 7 L740 3 L830 8 L920 2 L996 5 L999 70 L994 150 L998 240 L993 330 L999 420 L995 510 L998 600 L994 690 L999 780 L995 870 L998 996 L930 993 L840 998 L750 992 L660 997 L570 993 L480 999 L390 994 L300 998 L210 993 L120 997 L40 994 L3 998 L6 900 L1 810 L5 720 L2 630 L7 540 L1 450 L6 360 L2 270 L7 180 L1 90 Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.paper-map canvas, .paper-map .pv-bg { filter: sepia(.38) saturate(.85) contrast(.97) brightness(1.02); }
:root[data-theme="dark"] .paper-map canvas, :root[data-theme="dark"] .paper-map .pv-bg { filter: sepia(.5) saturate(.8) brightness(.92) contrast(1.02); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paper-map canvas, :root:not([data-theme="light"]) .paper-map .pv-bg { filter: sepia(.5) saturate(.8) brightness(.92) contrast(1.02); } }
.paper-map::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .5; mix-blend-mode: multiply; box-shadow: inset 0 0 0 1px rgba(60,40,20,.12), inset 0 0 40px rgba(120,90,50,.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .paper-map::after { mix-blend-mode: overlay; opacity: .6; box-shadow: inset 0 0 0 1px rgba(242,235,221,.06), inset 0 0 48px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paper-map::after { mix-blend-mode: overlay; opacity: .6; box-shadow: inset 0 0 0 1px rgba(242,235,221,.06), inset 0 0 48px rgba(0,0,0,.45); } }
.paper-map .mapboxgl-ctrl-logo { opacity: .5; transform: scale(.78); transform-origin: 0 100%; }
.paper-map .mapboxgl-ctrl-bottom-left { z-index: 4; }
.map-credit { position: absolute; right: 10px; bottom: 7px; z-index: 4; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--sheet) 70%, transparent); color: var(--ink3); font-size: 10.5px; font-weight: 600; pointer-events: none; }

/* ── Buttons in the tools ─────────────────────────────────────────────────
   Paste-up's ink pill (components.css), with every state drawn: it lifts
   under the pointer, presses in, rings on focus, says it is working with a
   spinner where its dot was, and when it cannot be pressed yet it goes flat
   into the well rather than fading to a ghost, so the line beside it saying
   why is what reads. */
.btn { transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 200ms ease, color 160ms ease; }
.btn:not(.quiet) { box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 22px -14px rgba(0,0,0,.55); }
@media (hover: hover) {
  .btn:not(.quiet):not([disabled]):not([aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 16px 28px -14px rgba(0,0,0,.6); }
}
.btn:not([disabled]):not([aria-disabled="true"]):active { transform: translateY(0) scale(.97); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 4px 10px -8px rgba(0,0,0,.5); }
.btn:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 1; background: var(--well); color: var(--ink3); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 12%, transparent); cursor: not-allowed; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .dot { width: 14px; height: 14px; background: none; box-shadow: none; border: 2px solid currentColor; border-right-color: transparent; animation: btn-spin 700ms linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"] .dot { animation: none; border-right-color: currentColor; opacity: .6; } }