/*
 * /vendor in Paste-up (Nov 2026).
 *
 * The page keeps its modules and their markup, and is drawn in the Paste-up
 * system (paste/tokens.css, components.css and tool.css, loaded just before
 * this). Three parts:
 *
 *   1. The bridge: the desk's token names (desk/tokens.css, lib/theme.css),
 *      which every vendor-page stylesheet was written against, answer with
 *      Paste-up's values. One rule, at a specificity none of the older theme
 *      rules reach, so light, dark and "match my device" all follow the
 *      Paste-up tokens and nothing has to be repainted twice.
 *   2. The shell and the shared controls, in Paste-up's shapes: the sidebar,
 *      the top bar, the tab bar, ink pill buttons, filled wells, cards that
 *      stand off the ground by fill and shadow and never by a rule.
 *   3. Today's board and the sections' own touches.
 *
 * Type is Plus Jakarta Sans only (components.css). Green is the brand and
 * the accent; status colours are for status.
 */

/* ── 1. The bridge ──────────────────────────────────────────────────────── */

:root:root:root {
  --f-ui: var(--f);
  --f-sign: var(--f);
  --bg: var(--ground);
  --raise: var(--sheet);
  --raise-2: var(--well);
  --sunk: var(--ground2);
  --card: var(--sheet);
  --inset: var(--well);
  --inset-hover: color-mix(in srgb, var(--well) 70%, var(--sheet));
  --fill: var(--well);
  --fill-2: var(--rule2);
  --line: var(--rule);
  --line-2: var(--rule2);
  --sep: var(--rule);
  --sep-2: var(--rule2);
  --ink-2: var(--ink2);
  --ink-3: var(--ink3);
  --ink-4: var(--faint);
  --accent: var(--green);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--ink));
  --accent-ink: #fff;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 72%, var(--ink));
  --link: var(--accent-text);
  --link-strong: var(--ink);
  --tint: color-mix(in srgb, var(--accent) 10%, var(--sheet));
  --tint-2: color-mix(in srgb, var(--accent) 18%, var(--sheet));
  --tint-line: color-mix(in srgb, var(--accent) 26%, transparent);
  --g-50: color-mix(in srgb, var(--accent) 8%, var(--sheet));
  --g-100: color-mix(in srgb, var(--accent) 18%, var(--sheet));
  --g-300: color-mix(in srgb, var(--accent) 55%, #fff);
  --g-400: color-mix(in srgb, var(--accent) 78%, #fff);
  --g-500: var(--accent);
  --g-600: color-mix(in srgb, var(--accent) 88%, #000);
  --g-700: color-mix(in srgb, var(--accent) 74%, #000);
  --g-800: color-mix(in srgb, var(--accent) 56%, #000);
  --g-900: color-mix(in srgb, var(--accent) 38%, #000);
  --g-950: color-mix(in srgb, var(--accent) 24%, #000);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  --ok: var(--green-ink);
  --ok-soft: color-mix(in srgb, var(--green) 16%, transparent);
  --warn: color-mix(in srgb, var(--s-busy) 70%, var(--ink));
  --warn-soft: color-mix(in srgb, var(--s-busy) 18%, transparent);
  --warn-tint: color-mix(in srgb, var(--s-busy) 18%, var(--sheet));
  --warn-ink: color-mix(in srgb, var(--s-busy) 45%, var(--ink));
  --warn-bg: var(--warn-tint);
  --red: var(--s-sold);
  --red-ink: var(--danger);
  --red-tint: color-mix(in srgb, var(--s-sold) 14%, var(--sheet));
  --red-line: color-mix(in srgb, var(--s-sold) 35%, transparent);
  --focus: color-mix(in srgb, var(--accent) 55%, transparent);
  --pop-shadow: var(--shadow-lift);
  --shadow-card: var(--shadow);
  --skel: var(--well);
  --skel-2: var(--ground2);
  --skel-a: var(--well);
  --skel-b: var(--ground2);
  --thumb: var(--sheet);
  --level-0: var(--well);
  --hatch: var(--rule2);
  --star-off: var(--rule2);
  --switch-off: var(--rule2);
  --toast-bg: var(--ink);
  --st-open: var(--s-open);
  --st-busy: var(--s-busy);
  --st-sold: var(--s-sold);
  --st-closed: var(--s-closed);
  --v-open: var(--s-open);
  --v-busy: var(--s-busy);
  --v-sold: var(--s-sold);
  --v-closed: var(--s-closed);
  --gold: var(--mustard);
  --sign-cream: #FBF8F1;
  --sign-ink: #1D1F22;
  --r-3: 14px;
  --r-4: 14px;
  --r-card: 14px;
  --r-panel: 18px;
  --page-max: none;
  --ctl-h: 44px;
  --ctl-h-sm: 38px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

body.tool { background: var(--ground); color: var(--ink); font-family: var(--f); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
/* Every field is 16px, which is what stops iOS zooming into it. */
input, select, textarea, .inp, .sel, .area, .v-input { font-size: 16px; }

/* ── 2. The shell ───────────────────────────────────────────────────────── */

/* Before there is a place (sign-in, the claim) the page is the stage alone. */
.v-shell-bare { grid-template-columns: minmax(0, 1fr); }
.v-shell-bare > .side,
.v-shell-bare > .side-scrim,
.v-shell-bare > .tabbar,
.v-shell-bare .topbar { display: none !important; }
.v-shell-bare .page { padding: 0; }

.side-brand .v-mark { width: 24px; height: 24px; }
.side-brand { color: var(--ink); }

.v-side-acct:empty, .v-side-plan:empty { display: none; }
.side-place.v-place-card .v-avatar { width: 44px; height: 44px; border-radius: 8px; background: var(--well); color: var(--ink2); }
.side-place .v-place-card-id { min-width: 0; }
.side-place .v-place-card-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; font-size: 15.5px; line-height: 1.2; }
.side-place .v-place-card-state { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ink3); font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-place .ic-chev { color: var(--ink3); transition: transform 200ms var(--ease-out); }
.side-place[aria-expanded="true"] .ic-chev { transform: rotate(180deg); }
@media (hover: hover) { .side-place:hover { background: var(--sheet2); } }

.v-side-acct .v-pop { left: 0; right: 0; width: auto; top: calc(100% + 6px); }

.v-side-nav { display: grid; gap: 2px; }
.v-side-nav .grp { margin: 12px 10px 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.v-side-nav .grp:first-child { margin-top: 0; }
.v-side-item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--ink2); font-weight: 650; font-size: 15.5px; text-align: left; transition: background-color 160ms ease, color 160ms ease; }
.v-side-item .ic { width: 19px; height: 19px; }
.v-side-item[aria-current="true"] { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.v-side-item[aria-current="true"] .ic { color: var(--ink); }
@media (hover: hover) { .v-side-item:not([aria-current="true"]):hover { color: var(--ink); background: color-mix(in srgb, var(--sheet) 60%, transparent); } }
.v-side-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: var(--ground); font-size: 12.5px; font-weight: 800; display: inline-grid; place-items: center; }
.v-side-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; background: var(--well); color: var(--ink2); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }

.v-side-plan { margin-top: auto; }
.side-note.v-plancard { display: block; width: 100%; margin: 0; text-align: left; }
.side-note .v-plancard-t { display: block; margin-bottom: 4px; font-weight: 800; color: var(--on-field); }
.side-note .v-plancard-s { color: var(--on-field2); font-size: 14.5px; }
.side-note .btn { margin-top: 10px; background: #1D1F22; color: #FBF8F1; }
button.side-note { transition: transform 160ms var(--ease-out); }
button.side-note:active { transform: scale(.98); }
.v-side-plan:empty + .side-foot { margin-top: auto; }
.side-foot .v-side-act .ic { width: 18px; height: 18px; }

/* The top bar */
.topbar .v-updated { color: var(--ink3); font-size: 13px; font-weight: 600; white-space: nowrap; }
.topbar .avatar { flex: none; }
.topbar .v-pop-wrap { position: relative; }
.topbar .v-pop { right: 0; left: auto; top: calc(100% + 8px); }
.icon-btn .badge { line-height: 1; }
.icon-btn.has-dot::after { display: none; }
.icon-btn.is-spinning .ic { animation: vp-spin 700ms var(--ease-out); }
@keyframes vp-spin { to { transform: rotate(360deg); } }
@media (max-width: 1180px) { .topbar .v-updated { display: none; } }
@media (max-width: 960px) { .topbar #v-refresh { display: none; } }

/* The phone tab bar: buttons rather than links, so it routes like the sidebar. */
.tabbar button { display: grid; justify-items: center; gap: 2px; padding: 7px 2px 6px; border-radius: 14px; color: var(--ink3); font-size: 12.5px; font-weight: 700; }
.tabbar .ic { width: 21px; height: 21px; }
.tabbar [aria-current] { background: none; color: var(--ink); }
.tabbar [aria-current] .ic { color: var(--ink); }
.tabbar:empty { display: none !important; }

/* Popovers: the switcher and the bell */
.v-pop { position: absolute; z-index: 90; width: min(340px, calc(100vw - 24px)); padding: 8px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-lift); }
.v-pop-head { padding: 6px 8px 8px; font-weight: 800; font-size: 15px; color: var(--ink); }
.v-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px; border-radius: 10px; color: var(--ink2); font-weight: 650; font-size: 15px; text-align: left; }
.v-pop-item .ic { width: 18px; height: 18px; color: var(--ink3); flex: none; }
@media (hover: hover) { .v-pop-item:hover { background: var(--well); color: var(--ink); } }
.v-pop-empty { padding: 4px 8px 8px; color: var(--ink3); font-size: 14.5px; }
.v-strip { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.v-place { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 10px; text-align: left; }
.v-place:hover, .v-place[aria-current="true"] { background: var(--well); }
.v-place-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--v-c); }
.v-place-name { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.v-place-state { color: var(--ink3); font-size: 13px; }

/* Toasts, in Paste-up's ink pill */
.dk-toasts { position: fixed; left: 50%; bottom: 22px; z-index: 260; display: grid; justify-items: center; gap: 8px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.dk-toast { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 99px; background: var(--ink); color: var(--ground); font-weight: 600; font-size: 15px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); pointer-events: auto; animation: vp-toast-in 300ms var(--ease-out) both; }
.dk-toast:not(:has(.dk-toast-act)) { padding-right: 18px; }
.dk-toast[data-leaving] { opacity: 0; transform: translateY(10px); transition: opacity 160ms ease, transform 160ms ease; }
.dk-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.dk-toast[data-tone="bad"] .dk-toast-dot { background: #F08A80; }
.dk-toast-act { height: 32px; padding: 0 12px; border-radius: 99px; background: color-mix(in srgb, var(--ground) 16%, transparent); color: var(--ground); font-weight: 700; font-size: 14px; }
@keyframes vp-toast-in { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 960px) { .dk-toasts { bottom: 96px; } }

/* The palette */
.dk-palette { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding: 12vh 16px 16px; background: rgba(20,18,15,.42); }
.dk-pal-box { width: min(620px, 100%); padding: 8px; border-radius: 18px; background: var(--sheet); box-shadow: var(--shadow-lift); }
.dk-pal-in { display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--ink3); }
.dk-pal-in input { flex: 1; height: 54px; border: 0; background: transparent; color: var(--ink); font: 600 17px/1 var(--f); outline: none; }
.dk-pal-list { display: grid; gap: 2px; max-height: 52vh; overflow: auto; margin-top: 4px; }
.dk-pal-group { padding: 10px 12px 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.dk-pal-item { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 10px; color: var(--ink2); font-weight: 650; text-align: left; }
.dk-pal-item .ic { width: 18px; height: 18px; color: var(--ink3); }
.dk-pal-item[aria-selected="true"] { background: var(--well); color: var(--ink); }
.dk-pal-hint { margin-left: auto; color: var(--ink3); font-size: 13px; }
.dk-pal-foot { display: flex; gap: 16px; padding: 10px 12px 4px; color: var(--ink3); font-size: 13px; }
.dk-pal-foot kbd, .dk-search kbd { font-family: var(--f); }

/* ── Shared controls in Paste-up's shapes ───────────────────────────────── */

/* One button: the ink pill. Quiet is the same pill, outlined; line is a well. */
.v-btn, .d-act, .ap-btn {
  --bh: 44px;
  height: var(--bh); padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--ground);
  font-family: var(--f); font-weight: 700; font-size: 15.5px; letter-spacing: -.005em;
  box-shadow: 0 10px 22px -14px rgba(0,0,0,.6);
}
.v-btn:hover, .d-act:hover, .ap-btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--ground)); color: var(--ground); }
.v-btn-go, .d-act-go, .ap-btn-go { background: var(--ink); color: var(--ground); }
/* The sign-in split's `.si button { color: inherit }` outranks the class
   above, which left the claim's Send for review ink on ink: a black pill
   with no word on it. */
.si .v-btn-go { color: var(--ground); }
.v-btn-go:hover, .d-act-go:hover { background: color-mix(in srgb, var(--ink) 86%, var(--ground)); }
.v-btn-line, .btn.quiet.d-act, .d-act:not(.d-act-go) { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.v-btn-line:hover, .d-act:not(.d-act-go):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.v-btn-sm { --bh: 38px; padding: 0 16px; font-size: 15px; }
.v-btn-quiet { height: auto; min-height: 38px; padding: 0 14px; border-radius: 99px; background: transparent; color: var(--ink2); box-shadow: none; font-weight: 700; }
.v-btn-quiet:hover { background: var(--well); color: var(--ink); }
.btn.quiet.v-btn-quiet { min-height: 0; height: var(--bh); padding: 0 22px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.v-btn-danger, .v-btn-quiet.v-btn-danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 60%, transparent); }
.v-btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.v-btn:disabled, .btn:disabled { opacity: .4; pointer-events: none; }
.v-btn .ic, .d-act .ic { width: 17px; height: 17px; }
.d-link-btn { color: var(--ink); font-weight: 700; }

.v-icon-btn:not(.icon-btn) { width: 38px; height: 38px; border-radius: 99px; background: var(--well); color: var(--ink2); }

.v-input, .d-reply-input, select.v-input {
  min-height: 46px; border: 0; border-radius: 10px; background: var(--well); color: var(--ink);
  font-family: var(--f); font-weight: 600; box-shadow: none;
}
.v-input::placeholder, .d-reply-input::placeholder { color: var(--faint); font-weight: 500; }
.v-field > span:first-child, .v-field-k, .v-label { color: var(--ink2); font-size: 14.5px; font-weight: 700; }

.v-chip-btn { height: 34px; padding: 0 13px; border-radius: 99px; background: var(--well); color: var(--ink2); font-weight: 650; box-shadow: none; }
.v-chip-btn[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.dk-seg, .v-seg { padding: 3px; border-radius: 99px; background: var(--well); }
.dk-seg > button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.14); }

/* Cards: a sheet, a title, a line on why. Never an outline. */
.d-card, .dk-panel { padding: clamp(16px, 1.4vw, 22px); border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); border: 0; }
.d-card .d-card, .tcard .d-card { box-shadow: none; padding: 0; background: transparent; }
.d-card-head { margin-bottom: 16px; }
.d-card-head h2, .d-card-head h3, .dk-panel-head h2 { font-weight: 800; font-size: 18px; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.d-card-sub, .dk-panel-sub { margin-top: 4px; color: var(--ink3); font-size: 14.5px; font-weight: 550; line-height: 1.4; letter-spacing: 0; }

.v-glyph { background: var(--well); color: var(--ink2); }
.dk-badge { background: var(--well); color: var(--ink2); font-weight: 700; }
.dk-badge.is-ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-ink); }

/* The section heads: Paste-up's page head, in the one face. */
.d-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 16px 28px; min-height: 0; margin: 6px 0 26px; padding: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.d-head::before, .d-head::after { display: none !important; }
.d-title, .dk-title, .ap-title { font-family: var(--f); font-weight: 800; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.04em; color: var(--ink); text-shadow: none; }
.d-lede { margin-top: 10px; color: var(--ink2); font-size: 16.5px; line-height: 1.5; max-width: 46em; }
.d-actions, .page-head .acts-r { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.d-dash { display: block; max-width: none; }
.d-dash > * + * { margin-top: clamp(12px, 1.2vw, 20px); }
.d-dash > .d-head + * { margin-top: 0; }
@media (max-width: 520px) { .d-actions { margin-left: 0; } }

/* The digest line: what changed, as a mustard strip under the head. */
.v-digest { margin-bottom: clamp(12px, 1.2vw, 20px); padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--mustard) 40%, var(--sheet)); color: var(--ink); font-weight: 600; }
.v-fact { color: var(--ink); font-weight: 750; }

/* Offers: the colour-block strip (sponsored, the plan). */
.d-feature { height: 100%; padding: clamp(16px, 1.4vw, 22px); border-radius: 14px; background: var(--fc, var(--cactus)); color: var(--on-field); box-shadow: none; }
.d-feature-t { color: var(--on-field); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.d-feature-s, .d-feature-list { color: var(--on-field2); }
.d-feature-price { color: var(--on-field); font-weight: 800; font-size: 28px; letter-spacing: -.04em; }
.d-feature-price span { color: var(--on-field2); }
.d-feature .v-btn { background: #1D1F22; color: #FBF8F1; }
.d-feature-bar { background: rgba(251,248,241,.5); }
.d-feature-bar i, .d-feature-list .ic { background: #1D1F22; color: #1D1F22; }
.d-feature-list .ic { background: none; }
.vp-spon-slot .d-feature { --fc: var(--mustard); }

/* The small pill used in card heads (as the prototype's vendor.css) */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 800; white-space: nowrap; }
.pill.soft { background: var(--well); color: var(--ink2); }
.pill .ic { width: 14px; height: 14px; }

/* Skeleton while the first answer is on its way */
.v-skeleton .skel { display: block; }

/* ── 3. Today's board ───────────────────────────────────────────────────── */

.vp-board { align-items: stretch; }
.vp-board > .tcard, .vp-kpis > .tcard { min-width: 0; }

/* Your sign */
.vp-sign-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(16px, 2vw, 32px); }
@media (max-width: 760px) { .vp-sign-grid { grid-template-columns: 1fr; } }
.vp-sign .v-obj-head { margin-bottom: 16px; }
.vp-sign .v-obj-name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.vp-sign .v-obj-sub { margin-top: 3px; max-width: none; color: var(--ink3); font-size: 14.5px; font-weight: 550; }
.vp-sign .pill { gap: 6px; }
.vp-sign .pill .ic { width: 14px; height: 14px; }
/* The left of the sign: a colour block in the state's colour that runs the
   height of the controls, plate at the top, time left at display size, the
   span at the foot (object.js says why). */
.vp-sign-now.v-inst {
  display: flex; flex-direction: column; gap: 18px; min-height: 100%;
  padding: clamp(18px, 1.8vw, 26px); border-radius: 14px;
  background: color-mix(in srgb, var(--v-sc, var(--s-closed)) 17%, var(--ground2));
  color: var(--ink); box-shadow: none; text-align: left; --sign-text: var(--ink);
  position: relative; overflow: hidden;
}
/* It is printed: a sheet of paper in the state's own ink (paste/paper.css
   .cut), flat, no glow, torn along its foot, with print-dark type in both
   themes. The tint is the state over cream, so busy reads amber and sold out
   red from across the counter. */
.vp-sign .vp-sign-now.v-inst.cut { --paper: color-mix(in srgb, var(--v-sc, var(--s-closed)) 34%, #F7F0E0); --sign-text: var(--ink); overflow: visible; padding-bottom: calc(clamp(18px, 1.8vw, 26px) + 8px); }
.vp-sign-now.v-inst.cut::after { display: none; }
.vp-sign-now.cut .meter { background: transparent; box-shadow: inset 0 0 0 1.4px rgba(29,31,34,.7); border-radius: 6px 3px 5px 4px / 4px 6px 3px 5px; }
.vp-sign-now.cut .meter i { inset: 2px; background: #1D1F22; border-radius: 3px; }
.vp-sign-now.cut .plate.lg { text-shadow: none; }
.vp-sign-now.cut .vp-sign-keys kbd { background: transparent; box-shadow: inset 0 0 0 1.2px rgba(29,31,34,.55); color: var(--ink); }
.vp-sign-now > * { position: relative; }
.vp-sign-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.vp-sign-why { display: block; color: var(--ink2); font-weight: 650; font-size: 15px; }
.vp-plate { justify-self: start; }
.vp-sign-note { padding: 0; background: none; color: var(--ink); font-weight: 700; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: -.01em; line-height: 1.35; max-width: none; margin: 0; }
.vp-sign-read.v-inst-left { display: grid; gap: 2px; margin: auto 0; transform: none; box-shadow: none; background: none; padding: 0; }
.vp-sign-k { color: var(--ink2); font-size: 15px; font-weight: 650; }
.vp-sign-read .v-countdown { display: block; color: var(--ink); font-weight: 800; font-size: clamp(44px, 4.4vw, 72px); letter-spacing: -.045em; line-height: .95; }
.vp-sign-big.sign-word, .vp-sign-now .vp-sign-big { display: block; margin-top: auto; font-family: var(--f); font-weight: 800; font-size: clamp(34px, 3.2vw, 52px); letter-spacing: -.045em; line-height: 1; color: var(--ink); text-transform: none; text-shadow: none; white-space: normal; }
.vp-sign-foot { display: grid; gap: 10px; }
/* Nothing showing: the three steps of a sign under the word, so the paper
   says how it works rather than standing empty beside the choices. */
.vp-sign-now[data-live="no"] .vp-sign-big { margin-top: 6px; }
.vp-sign-how { display: grid; gap: 12px; margin: 4px 0 auto; padding: 0; list-style: none; }
.vp-sign-how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink); font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.vp-sign-how li span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px rgba(29,31,34,.7); font-weight: 800; font-size: 13.5px; rotate: -4deg; }
.vp-sign-how li:nth-child(2) span { rotate: 3deg; }
@media (max-width: 760px) { .vp-sign-how { display: none; } }
.vp-sign-now .meter { height: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.vp-sign-now .meter i { background: var(--v-sc, var(--ink)); transition: width 1s linear; }
.vp-sign-span { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--ink2); font-size: 14px; font-weight: 600; }
.vp-sign-now .v-inst-clock { position: static; margin: 0; padding: 0; background: none; color: inherit; font-size: inherit; }
.vp-sign-now .v-inst-idle { color: var(--ink2); font-size: 15.5px; max-width: 34em; margin: 0; }
.vp-sign-keys { margin: 0; color: var(--ink3); font-size: 13px; }
.vp-sign-keys kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--sheet); color: var(--ink2); font: 700 12.5px var(--f); }
@media (hover: none) { .vp-sign-keys { display: none; } }
/* On a phone the sign is a strip, not a poster: the plate and the time left
   in one band, so the six choices start inside the first screen. */
@media (max-width: 760px) {
  .vp-sign-now.v-inst { min-height: 0; gap: 10px; }
  .vp-sign-read.v-inst-left { margin-top: 4px; }
  .vp-sign-now .plate.lg { height: 44px; padding: 0 20px 0 18px; font-size: 16px; }
  .vp-sign-now .vp-sign-big { font-size: 28px; margin-top: 2px; }
  .vp-sign-now .v-inst-idle { font-size: 14.5px; }
  .vp-sign-read .v-countdown { font-size: 38px; }
  .vp-sign .v-obj-head .r { display: none; }
  .vp-sign-now[data-live="no"] .vp-sign-big { display: none; }
  .vp-sign .v-obj-sub { font-size: 14px; }
}
/* The picker is the next thing down on a phone, so the hero's own way to it
   would be a second button for the same scroll. */
@media (max-width: 720px) { .ov-hero .ov-sign-act { display: none; } }
.vp-sign-ctl { margin: 0; }
.vp-sign-ctl .v-controls { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
.vp-sign-ctl .v-controls > * { grid-area: auto; }
.vp-states.v-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 0; background: none; box-shadow: none; }
.vp-states.v-track::before, .vp-states.v-track::after { display: none; }
.vp-state.v-state { position: relative; display: grid; gap: 8px; justify-items: start; align-content: start; min-height: 0; padding: 12px; border-radius: 12px; background: var(--well); color: var(--ink); text-align: left; box-shadow: none; transition: background-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out); }
.vp-state.v-state:active { transform: scale(.98); }
.vp-state.v-state[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), var(--shadow); }
@media (hover: hover) { .vp-state.v-state:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--well) 70%, var(--sheet)); } }
.vp-state .v-state-word { font-family: var(--f); font-size: 12.5px; white-space: nowrap; }
.vp-state .v-state-why, .vp-state[aria-pressed="true"] .v-state-why { color: var(--ink3); font-size: 13px; font-weight: 600; line-height: 1.35; opacity: 1; }
.vp-state .v-state-key { position: absolute; top: 10px; right: 10px; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--sheet); color: var(--ink3); font: 700 12.5px/1 var(--f); box-shadow: 0 1px 0 var(--rule2); opacity: 1; }
.vp-state[aria-pressed="true"] .v-state-key { background: var(--well); color: var(--ink2); }
/* Each status is a paper tag with its plate stamped on (status.js tilts them).
   The chosen one is pressed flat, its stamp inked solid, and ringed in pencil. */
.vp-state.v-state.cut { padding: 12px 12px 13px; transition: rotate 300ms var(--ease-spring), transform 140ms var(--ease-out); }
.vp-state.v-state.cut .v-state-word { height: 24px; font-size: 11.5px; }
.vp-state.v-state.cut .v-state-why { color: var(--ink2); }
.vp-state.v-state.cut .v-state-key { background: transparent; color: var(--ink2); box-shadow: inset 0 0 0 1.2px rgba(29,31,34,.45); }
.vp-state.v-state.cut[aria-pressed="true"] { rotate: 0deg; }
.vp-state.v-state.cut[aria-pressed="true"] .v-state-word { background: var(--st); color: #FBF6EA; box-shadow: none; -webkit-mask: none; mask: none; }
.vp-state.v-state.cut[aria-pressed="true"] .v-state-word::before { background: #FBF6EA; }
.vp-state.v-state.cut[aria-pressed="true"]::after { content: ''; position: absolute; inset: 3px; border-radius: 14px 9px 13px 8px / 9px 13px 8px 14px; box-shadow: inset 0 0 0 2px rgba(29,31,34,.82); rotate: -.6deg; pointer-events: none; }
@media (hover: hover) { .vp-state.v-state.cut:not([aria-pressed="true"]):hover { background: none; rotate: calc(var(--tilt) * .3); } }
.vp-state.v-state.cut:focus-visible { outline: 2.5px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vp-state.v-state.cut { transition: none; } }
@media (hover: none) { .vp-state .v-state-key { display: none; } }
.vp-sign-ctl .v-for { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 420px; padding: 0; background: none; box-shadow: none; width: auto; }
.vp-sign-ctl .v-for::before { display: none; }
.vp-sign-ctl .v-hr { min-width: 0; justify-content: center; padding: 0 4px; }
.vp-sign-ctl .v-note-field { display: block; }
.vp-sign-ctl .v-note-field .lbl { margin-bottom: 6px; }
.vp-sign-ctl .v-note-count { color: var(--ink3); }
.vp-sign-ctl .v-note-hint { margin: 0; color: var(--ink3); font-size: 13px; }
.vp-sign-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Nothing to save yet: still a button, still legible, plainly not pressable.
   It used to fade the ink pill to 40%, which on paper read as a grey slab
   with no word on it (the owner's audit, Nov 2026). */
.vp-sign-acts .v-note-save:disabled { opacity: 1; background: transparent; color: var(--ink3); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent); }
.vp-sign-acts .v-clear { height: var(--bh); padding: 0 22px; font-size: 15px; text-decoration: none; }
.vp-sign-acts .v-clear:hover { text-decoration: none; }
.vp-sign.is-locked .v-unpaid { justify-items: start; text-align: left; padding: 24px; }
.vp-sign.is-locked .v-unpaid .btn { justify-self: start; }
.vp-empty-glyph { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sheet); color: var(--ink2); box-shadow: var(--shadow); }

/* How your pin reads */
/* The card a student gets, printed on paper and taped over the map. */

/* The four figures */
.vp-kpi { display: grid; align-content: start; gap: 6px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; transition: transform 160ms var(--ease-out), box-shadow 200ms ease; }
.vp-kpi:disabled { cursor: default; opacity: 1; }
@media (hover: hover) { .vp-kpi:not(:disabled):hover { box-shadow: var(--shadow-lift); } }
.vp-kpi:not(:disabled):active { transform: scale(.985); }
.vp-kpi .kpi .v .ic { width: 26px; height: 26px; color: var(--ink3); }
.vp-kpi .d-kpi-none { color: var(--ink3); }
.vp-kpi .why { margin-top: 4px; }

/* Finish your listing */
.ov-setup-bar.meter { margin-bottom: 14px; }
.ov-setup-bar.meter i { background: var(--ink); }
.vp-todo { display: grid; gap: 6px; }
.vp-todo li { list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 54px; padding: 8px 10px; border-radius: 10px; }
.vp-todo li:nth-child(odd) { background: color-mix(in srgb, var(--well) 55%, transparent); }
.vp-todo .tk { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--rule2); }
.vp-todo li.done .tk { background: var(--green); box-shadow: none; color: #fff; }
.vp-todo li.done b { color: var(--ink3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.vp-todo li.next { background: color-mix(in srgb, var(--mustard) 26%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mustard) 70%, transparent); }
.vp-todo b { display: block; font-weight: 700; font-size: 15.5px; }
.vp-todo small { color: var(--ink3); font-size: 14px; }

/* What people said */
.vp-said { display: grid; gap: 10px; }
.vp-said-item { list-style: none; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 12px; background: var(--ground2); }
.vp-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--oat); color: #1D1F22; }
.vp-said-item .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vp-said-item .top small { color: var(--ink3); font-weight: 600; font-size: 13px; }
.vp-said-item p { margin-top: 4px; color: var(--ink2); font-size: 15.5px; overflow-wrap: anywhere; }
.vp-said-item p::first-letter { text-transform: uppercase; }
.vp-said-item .reply { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--sheet); font-size: 15px; color: var(--ink2); }
.vp-said-item .reply b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.vp-stars { display: inline-flex; gap: 1px; color: var(--mustard); font-style: normal; letter-spacing: 0; }
.vp-stars i { font-style: normal; }
.vp-stars .off { color: var(--rule2); }
.d-needs { margin-left: auto; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--ink); color: var(--ground); font-size: 12.5px; letter-spacing: .02em; text-transform: none; font-weight: 800; }
.d-latest .empty, .vp-board .empty { justify-items: center; }

/* Events and busy times, in their board tiles */
.vp-board .v-obj-slot[data-slot="events"], .vp-board .v-obj-slot[data-slot="busy"] { margin: 0; }
.vp-board > .s6 > .d-card, .vp-board > .s6 > .tcard { height: 100%; }
.vp-qr-slot .d-card { height: 100%; }

/* ── Your listing ───────────────────────────────────────────────────────── */
/* On a wide screen the cards go two to a row, so the page is filled rather
   than one long column beside a short preview. */
.ls-page { gap: clamp(12px, 1.2vw, 20px); }
@media (min-width: 1181px) { .ls-page { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 400px); } }
.ls-main { gap: clamp(12px, 1.2vw, 20px); }
/* Columns that pack, not a grid of rows: a short card no longer leaves a
   hole beside a tall one (Contact beside Hours left a void, Nov 2026). */
.v-lines { display: block; columns: 2 420px; column-gap: clamp(12px, 1.2vw, 20px); }
.v-lines > * { break-inside: avoid; margin: 0 0 clamp(12px, 1.2vw, 20px); }
.ls-side { top: 84px; }
.ls-tabs { position: sticky; top: 68px; z-index: 20; justify-self: start; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ls-card { scroll-margin-top: 130px; }

/* ── Plan & billing ─────────────────────────────────────────────────────── */
.v-bill-grid { gap: clamp(12px, 1.2vw, 20px); align-items: stretch; }
.v-band { gap: clamp(12px, 1.2vw, 20px); }
.v-bill-hero { padding: clamp(16px, 1.4vw, 22px); border-radius: 14px; background: var(--sage); color: var(--on-field); }
.v-bill-hero .v-bill-plan { color: var(--on-field); font-weight: 800; font-size: 20px; }
.v-bill-hero .v-bill-price b { color: var(--on-field); font-weight: 800; font-size: clamp(44px, 4vw, 64px); letter-spacing: -.05em; line-height: .9; }
.v-bill-hero .v-bill-price span { color: var(--on-field2); font-weight: 700; }
.v-bill-hero .v-bill-badge { background: #1D1F22; color: #FBF8F1; border-radius: 99px; height: 26px; padding: 0 10px; font-weight: 800; }
.v-bill-hero .v-bill-facts div { background: rgba(251,248,241,.5); }
.v-bill-hero .v-bill-facts dt { color: var(--on-field2); }
.v-bill-hero .v-bill-facts dd { color: var(--on-field); font-weight: 700; }
.v-bill-row { border-radius: 10px; background: color-mix(in srgb, var(--well) 55%, transparent); }
.v-bill-cancel { border-radius: 10px; background: var(--ground2); }
.v-plan { border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); }
.v-plan-std { background: var(--sage); color: var(--on-field); box-shadow: none; }
.v-plan-std * { color: var(--on-field); }
.v-plan-std .v-btn { background: #1D1F22; color: #FBF8F1; }
.v-plans-lede { border-radius: 12px; background: color-mix(in srgb, var(--mustard) 40%, var(--sheet)); }

/* ── Sponsored, QR & share, Insights, Reviews ───────────────────────────── */
.vp-about-reports { margin-top: clamp(12px, 1.2vw, 20px); }
.vp-about-reports p { color: var(--on-field2); font-size: 15.5px; }
.d-rep-side { display: flex; flex-direction: column; }

/* ── Appearance ─────────────────────────────────────────────────────────── */
.vp-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vp-theme-card { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 12px; background: var(--well); text-align: left; color: var(--ink); }
.vp-theme-card b { font-weight: 750; }
.vp-theme-card small { color: var(--ink3); font-size: 13px; font-weight: 600; line-height: 1.35; }
.vp-theme-card[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); background: var(--sheet); }
.vp-swatch { height: 70px; border-radius: 8px; background: linear-gradient(135deg, #F3EEE3 0 50%, #1E1B17 50%); box-shadow: inset 0 0 0 1px var(--rule); }
.vp-swatch.light { background: #F3EEE3; }
.vp-swatch.dark { background: #1E1B17; }
.vp-accents { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-acc { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 8px; border-radius: 99px; background: var(--well); color: var(--ink); font-weight: 700; font-size: 15px; }
.vp-acc i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); }
.vp-acc[aria-checked="true"] { background: var(--sheet); box-shadow: inset 0 0 0 2px var(--ink); }
.vp-acc-note { margin-top: 16px; }
@media (max-width: 560px) { .vp-themes { grid-template-columns: 1fr; } }

/* Phones: the four figures two to a row, so the week reads in one look. */
@media (max-width: 720px) {
  .vp-kpis > .vp-kpi.s3 { grid-column: span 6 !important; }
  .vp-kpi .why { display: none; }
  .vp-kpi .kpi .v { font-size: 30px; }
}

/* The week's four figures sit in one group for screen readers, and each is
   still its own tile of the board. */
.vp-kpis { display: contents; }

/* ── Street pictures (ground.js) ─────────────────────────────────────────
   Mapbox's plain light or dark streets, washed in the page's own paper or
   ink: a colour layer carries Paste-up's hue onto the map's light and shade,
   and a soft vignette sinks the edges into the card, so the pin and its card
   are the brightest things in the frame. One picture, picked by ground.js
   for the theme actually painted. */
.v-ground-wash { position: absolute; inset: 0; pointer-events: none; background: var(--ground); mix-blend-mode: multiply; opacity: .6; }
.v-ground-frame { isolation: isolate; }
.v-ground-frame::after { content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(125% 95% at 50% 42%, transparent 52%, color-mix(in srgb, var(--ground2) 80%, transparent) 100%); }
.v-ground-frame > :not(.v-ground):not(.v-ground-wash) { z-index: 1; }
:root[data-theme="dark"] .v-ground-wash { background: #B48A55; mix-blend-mode: color; opacity: .24; }
:root[data-theme="dark"] .v-ground { filter: brightness(1.18) contrast(.94); }
:root[data-theme="dark"] .v-ground-frame::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(125% 95% at 50% 42%, transparent 48%, color-mix(in srgb, var(--ground) 80%, transparent) 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v-ground-wash { background: #B48A55; mix-blend-mode: color; opacity: .24; }
  :root:not([data-theme="light"]) .v-ground { filter: brightness(1.18) contrast(.94); }
  :root:not([data-theme="light"]) .v-ground-frame::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(125% 95% at 50% 42%, transparent 48%, color-mix(in srgb, var(--ground) 80%, transparent) 100%); }
}

/* ── All your places (Nov 2026) ──────────────────────────────────────────
   On a wide screen the places and the claim for another sit side by side,
   so the board is used edge to edge instead of two small tiles over a
   full-width search box. Each tile is a colour block in what its pin is
   showing, the way the marketing pages set a fact in a block of colour. */
@media (min-width: 1180px) {
  .v-places { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); align-items: stretch; column-gap: clamp(16px, 1.6vw, 28px); row-gap: var(--s-6); }
  .v-places > .v-places-grid, .v-places > .v-places-h, .v-places > .v-places-pending { grid-column: 1; }
  .v-places > .vp-places-add { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; }
  .v-places > .vp-places-add .v-claim-search { width: 100%; }
}
.v-places-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-content: start; }
.v-place-tile, .v-place-new { min-height: clamp(180px, 15vw, 240px); padding: clamp(16px, 1.4vw, 22px); border-radius: 14px; }
.v-place-tile[data-live="yes"] { background: color-mix(in srgb, var(--v-sc) 18%, var(--sheet)); }
.v-place-tile[data-live="yes"]:hover { background: color-mix(in srgb, var(--v-sc) 24%, var(--sheet)); }
.v-place-tile.is-current { box-shadow: var(--shadow); }
.v-place-tile-word { font-size: clamp(22px, 1.9vw, 30px); font-weight: 800; letter-spacing: -.035em; }
.v-place-new { background: color-mix(in srgb, var(--green) 9%, var(--sheet)); }
.v-place-new-t { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }

/* The live area map (moves.js, console-page/map.js's mountMap): the basemap
   is Mapbox Standard, monochrome, lit by the theme; a little sepia warms it
   to the paper or the ink room, as the console's map is (console.css). */
.mv-map .mapboxgl-canvas { filter: sepia(.22) saturate(1.15) brightness(1.02); }
:root[data-theme="dark"] .mv-map .mapboxgl-canvas { filter: sepia(.3) saturate(1.05) brightness(1.02); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mv-map .mapboxgl-canvas { filter: sepia(.3) saturate(1.05) brightness(1.02); } }
.mv-map .mapboxgl-ctrl-group { border-radius: 12px; overflow: hidden; background: var(--sheet); box-shadow: var(--shadow); }
.mv-map .mapboxgl-ctrl-group button + button { border-top: 0; }
:root[data-theme="dark"] .mv-map .mapboxgl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mv-map .mapboxgl-ctrl-icon { filter: invert(1) hue-rotate(180deg); } }

/* Reviews & reports: the note about reports sits under the conversation, so
   the two columns end together instead of a short feed beside a long side. */
.d-rep-main { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 20px); min-width: 0; }
.d-rep-main .vp-about-reports { margin-top: 0; }
@media (min-width: 1100px) {
  .d-rep-main .vp-about-reports { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr); gap: 8px 28px; align-items: start; }
  .d-rep-main .vp-about-reports .thead { margin: 0; }
  .d-rep-main .vp-about-reports p:not(.why) { margin: 0; }
}
@media (min-width: 1500px) { .d-reports { grid-template-columns: minmax(0, 1fr) 360px; } }
.vp-sign-span { flex-wrap: wrap; }
.vp-sign-span > span { white-space: nowrap; }
.v-ground-frame::after { opacity: .75; }

/* ── Paper on the samples (paste/paper.css) ───────────────────────────────
   The previews are the things that get printed or shown, so they are the
   ones put up as paper: the poster taped to the board, the app's sheet taped
   beside the listing, the sponsored line on a taped slip over the map. The
   forms round them stay plain. */
.d-pinup { width: min(100%, 340px); }
.d-pinup .d-sheet { width: 100%; }
.v-spon-tag.cut { padding: 12px 18px 13px; }
.v-spon-tag.cut .v-spon-stage-line { color: var(--ink2); }
@media (max-width: 600px) { .d-pinup { rotate: calc(var(--tilt) * .6); } }

/* The chosen section is ink and underlined, never filled, never green, like
   every tab on Cite. The underline is one line of ink that slides to it
   (shell.js slideInk, styled in shell.css as .x-ink). */
.v-shell .v-side-item[aria-current="true"], .v-side-item[aria-current="true"] { background: none !important; box-shadow: none !important; color: var(--ink); font-weight: 750; }
.v-shell .v-side-item[aria-current="true"] .ic, .v-shell .tabbar [aria-current] .ic { color: var(--ink); }
@media (hover: hover) { .v-side-item:not([aria-current="true"]):hover { background: none; } }