/*
 * MIX-2882 (Console look outside the shell): the Console look of the pages
 * that never show the Console shell (sign-in and account pages, the public
 * feedback form, print views, the location portal, the setup wizard and the
 * network status page).
 *
 * Linked only by the Console twins (outside/base_auth.html and the bases
 * built on it), and every selector starts with .vv-oc
 * (tests/web/test_outside_css.py), so nothing here reaches Classic or a page
 * inside the shell. Light only: no colour-scheme media query. Values are the
 * Console tokens at size L (console.css), ported from the approved preview's
 * mock (~/notes/haha_tool/mix-2805-pro-look/outside-shell/assets/oc.css,
 * class names "oc-*"), with three binding corrections: the frame breaks at
 * 1024 px (the Console shell's), the phone bar is NOT sticky, and the 44 px /
 * 16 px rules apply under 1024 px.
 *
 * Each PR of the group writes ONLY between its own marker and the next.
 */

/* DM Sans, the same four faces as app.css, for the standalone print
   screens that load no app.css (PR C). */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/dm-sans/dm-sans-400.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/dm-sans/dm-sans-500.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/dm-sans/dm-sans-600.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/dm-sans/dm-sans-700.woff2) format("woff2"); }

/* ── MIX-2882 (Console look outside the shell) PR A: tokens ── */
.vv-oc {
  --oc-ctl: 36px;
  --oc-row: 40px;
  --oc-fs: 13.5px;
  --oc-r: 6px;
  --oc-dark: #2C3038;
  --oc-dark-fg: #D8D4CE;
  --oc-dark-mut: #8F8A84;
  --oc-dark-line: rgba(255, 255, 255, 0.08);
  --oc-dark-in: rgba(0, 0, 0, 0.18);
  --oc-dark-in-line: rgba(255, 255, 255, 0.14);
  --oc-action: #1F7A71;
  --oc-action-h: #258178;
  --oc-sel: #E0F2EF;
  --oc-sel-line: #5CB8AD;
  --oc-marker: #D4973B;
  --oc-bg: #FEFDFB;
  --oc-panel: #FFFFFF;
  --oc-head: #F6F3EF;
  --oc-line: #E5E0DA;
  --oc-line-soft: #EDE8E1;
  --oc-input: #C9C2B8;
  --oc-text: #352F30;
  --oc-muted: #6B6560;
  --oc-ok: #4E9A6D;
  --oc-ok-t: #2F6B49;
  --oc-ok-bg: #E4F2EA;
  --oc-bad: #C2483D;
  --oc-bad-bg: #FCEAE8;
  --oc-warn: #9A6726;
  --oc-warn-bg: #FBF3E5;
  --oc-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  margin: 0;
  min-height: 100vh;
  background: var(--oc-bg);
  color: var(--oc-text);
  font: var(--oc-fs)/1.4 "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ── MIX-2882 (Console look outside the shell) PR A: controls ── */
.vv-oc a { color: var(--oc-action-h); text-decoration: none; }
.vv-oc a:hover { text-decoration: underline; }
.vv-oc svg { flex: none; }
.vv-oc .oc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--oc-ctl); padding: 0 12px;
  border: 1px solid var(--oc-input); border-radius: 5px;
  background: #FFFFFF; color: var(--oc-text);
  font: inherit; font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.vv-oc .oc-btn:hover { border-color: var(--oc-sel-line); background: var(--oc-sel); text-decoration: none; }
.vv-oc .oc-btn svg { width: 16px; height: 16px; }
.vv-oc .oc-btn-pri { border-color: var(--oc-action); background: var(--oc-action); color: #FFFFFF; font-weight: 600; }
.vv-oc .oc-btn-pri:hover { border-color: var(--oc-action-h); background: var(--oc-action-h); color: #FFFFFF; }
.vv-oc .oc-btn-ghost { border-color: transparent; background: transparent; color: var(--oc-muted); }
.vv-oc .oc-btn-block { width: 100%; }
.vv-oc .oc-btn:disabled { border-color: var(--oc-line); background: var(--oc-line-soft); color: var(--oc-muted); cursor: not-allowed; }
.vv-oc .oc-label { display: block; margin: 0 0 5px; font-size: 12.5px; font-weight: 600; color: var(--oc-text); }
.vv-oc .oc-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vv-oc .oc-label-row a { font-size: 12.5px; }
.vv-oc .oc-input {
  display: block; width: 100%; height: var(--oc-ctl); padding: 0 10px;
  border: 1px solid var(--oc-input); border-radius: 5px;
  background: #FFFFFF; color: var(--oc-text);
  font: inherit; font-size: var(--oc-fs);
}
.vv-oc textarea.oc-input { height: auto; min-height: 96px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
.vv-oc .oc-input:focus { outline: 0; border-color: var(--oc-action); box-shadow: 0 0 0 1px var(--oc-action); }
.vv-oc .oc-input.tw-border-red-500 { border-color: var(--oc-bad); } /* onboarding_accept_invite.js marks a bad field with this class */
.vv-oc .oc-input::placeholder { color: #8A8590; }
.vv-oc .oc-input.is-bad { border-color: var(--oc-bad); }
.vv-oc .oc-hint { margin: 5px 0 0; font-size: 12px; color: var(--oc-muted); }
.vv-oc .oc-field-err { margin: 5px 0 0; font-size: 12px; color: var(--oc-bad); }
.vv-oc .oc-field + .oc-field { margin-top: 14px; }
.vv-oc .oc-check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--oc-text); cursor: pointer; }
.vv-oc .oc-check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--oc-action); }
.vv-oc .oc-req { color: var(--oc-bad); }
.vv-oc .oc-seg { display: inline-flex; border: 1px solid var(--oc-input); border-radius: 5px; overflow: hidden; }
.vv-oc .oc-seg-f { display: flex; margin: 0; }
.vv-oc .oc-seg > * + * { border-left: 1px solid var(--oc-input); }
.vv-oc .oc-seg-i {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border: 0; background: #FFFFFF; color: #4A4540;
  font: inherit; font-size: 12px; cursor: pointer;
}
.vv-oc .oc-seg-i[aria-current="true"] { background: var(--oc-action); color: #FFFFFF; font-weight: 600; cursor: default; }
.vv-oc .oc-seg-dark { border-color: var(--oc-dark-in-line); }
.vv-oc .oc-seg-dark > * + * { border-left-color: var(--oc-dark-in-line); }
.vv-oc .oc-seg-dark .oc-seg-i { background: var(--oc-dark-in); color: var(--oc-dark-fg); }
.vv-oc .oc-seg-dark .oc-seg-i[aria-current="true"] { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.vv-oc .oc-alert { margin: 14px 0 0; padding: 8px 10px; border-radius: 5px; font-size: 12.5px; }
.vv-oc .oc-alert-ok { background: var(--oc-ok-bg); color: var(--oc-ok-t); }
.vv-oc .oc-alert-bad { background: var(--oc-bad-bg); color: var(--oc-bad); }
.vv-oc .oc-alert-warn { background: var(--oc-warn-bg); color: var(--oc-warn); }
.vv-oc .oc-alert-mut { background: var(--oc-head); color: var(--oc-muted); }
.vv-oc .oc-alert-info { background: var(--oc-sel); color: #196058; }
.vv-oc .oc-alert b { display: block; margin-bottom: 2px; font-weight: 600; }
.vv-oc .oc-note { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--oc-action); border-radius: 0 5px 5px 0; background: var(--oc-sel); color: #196058; }
.vv-oc .oc-note b { display: block; margin-bottom: 2px; }
.vv-oc .oc-note .oc-btn { margin-top: 8px; }
.vv-oc .oc-muted { color: var(--oc-muted); }
.vv-oc .oc-mono { font-family: var(--oc-mono); }
.vv-oc .oc-strong { font-weight: 600; color: var(--oc-text); }
.vv-oc .oc-list { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.vv-oc .oc-list li + li { margin-top: 2px; }
.vv-oc .oc-meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vv-oc .oc-meter-track { flex: 1; height: 4px; border-radius: 2px; background: var(--oc-line); overflow: hidden; }
.vv-oc .oc-spin { width: 16px; height: 16px; animation: oc-spin 1s linear infinite; }
@keyframes oc-spin { to { transform: rotate(360deg); } }

/* ── MIX-2882 (Console look outside the shell) PR A: sign-in frame ── */
/* The slate rail at 1024 px and up; under it a 48 px slate bar that scrolls
   away with the page. The mock's .oc-topbar is position: sticky; the
   approved preview's text says the bar "scrolls away", and the text wins:
   do not make it sticky. */
.vv-oc .oc-brand { display: flex; align-items: center; gap: 8px; color: #FFFFFF; font-size: 15px; white-space: nowrap; }
.vv-oc .oc-brand img { width: 24px; height: 24px; border-radius: 5px; background: #FFFFFF; }
.vv-oc .oc-brand b { font-weight: 700; }
.vv-oc .oc-auth-frame { display: flex; min-height: 100vh; }
.vv-oc .oc-rail {
  flex: none; width: 300px; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 16px; background: var(--oc-dark); color: var(--oc-dark-fg);
}
.vv-oc .oc-rail-body { margin-top: auto; }
.vv-oc .oc-rail-line { margin: 0; font-size: 13px; line-height: 1.5; color: var(--oc-dark-fg); }
.vv-oc .oc-rail h2 { margin: 0 0 4px; color: #FFFFFF; font-size: 17px; font-weight: 600; line-height: 1.3; }
.vv-oc .oc-rail-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.4; }
.vv-oc .oc-rail-list li { display: flex; gap: 9px; }
.vv-oc .oc-rail-list svg { width: 15px; height: 15px; margin-top: 1px; color: var(--oc-marker); }
.vv-oc .oc-rail-join { margin: 14px 0 0; font-size: 12.5px; color: var(--oc-dark-mut); }
.vv-oc .oc-rail-foot {
  display: flex; align-items: center; gap: 8px; padding-top: 12px;
  border-top: 1px solid var(--oc-dark-line); color: var(--oc-dark-mut); font-size: 12px;
}
.vv-oc .oc-rail-foot svg { width: 16px; height: 16px; }
.vv-oc .oc-topbar { display: none; }
.vv-oc .oc-auth-main { flex: 1; min-width: 0; display: flex; justify-content: center; padding: clamp(48px, 16vh, 160px) 24px 48px; }
.vv-oc .oc-auth-col { width: 100%; max-width: 360px; }
.vv-oc .oc-auth-col.is-wide { max-width: 520px; }
.vv-oc .oc-auth-col.is-doc { max-width: 680px; }
.vv-oc .oc-auth-main.is-wide { padding-top: clamp(32px, 8vh, 80px); }
.vv-oc .oc-h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; }
.vv-oc .oc-sub { margin: 0 0 20px; color: var(--oc-muted); }
.vv-oc .oc-form { margin-top: 18px; }
.vv-oc .oc-form .oc-btn-block { margin-top: 18px; }
.vv-oc .oc-auth-alt { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--oc-line-soft); font-size: 12.5px; color: var(--oc-muted); }
.vv-oc .oc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vv-oc .oc-grid2 .oc-field + .oc-field { margin-top: 0; }
.vv-oc .oc-form > .oc-grid2,
.vv-oc .oc-form > .oc-grid2 + .oc-field,
.vv-oc .oc-form > .oc-field + .oc-grid2 { margin-top: 14px; }
.vv-oc .oc-form > .oc-grid2:first-child { margin-top: 0; }
.vv-oc .oc-ok-ico,
.vv-oc .oc-bad-ico {
  width: 44px; height: 44px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vv-oc .oc-ok-ico { background: var(--oc-ok-bg); color: var(--oc-ok-t); }
.vv-oc .oc-bad-ico { background: var(--oc-bad-bg); color: var(--oc-bad); }
.vv-oc .oc-ok-ico svg,
.vv-oc .oc-bad-ico svg { width: 22px; height: 22px; }
.vv-oc .oc-plain > * + * { margin-top: 12px; }
.vv-oc .oc-plain > .oc-h1 { margin-top: 14px; }
.vv-oc .oc-plain > .oc-h1:first-child { margin-top: 0; }
.vv-oc .oc-plain .oc-sub { margin-bottom: 0; }
.vv-oc .oc-plain form { margin-top: 18px; }
.vv-oc .oc-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.vv-oc .oc-dl dt { color: var(--oc-muted); }
.vv-oc .oc-dl dd { margin: 0; }
.vv-oc .oc-phone-only { display: none; }
.vv-oc .oc-doc p { margin: 0 0 12px; line-height: 1.55; }

/* ── MIX-2882 (Console look outside the shell) PR A: phone ── */
/* Under 1024 px: 44 px targets (the Console phone rules) and 16 px text in
   every field (iOS Safari zooms into an input under 16 px). */
@media (max-width: 1023.98px) {
  .vv-oc { --oc-ctl: 44px; }
  .vv-oc input,
  .vv-oc select,
  .vv-oc textarea,
  .vv-oc .oc-input { font-size: 16px; }
  .vv-oc button,
  .vv-oc select,
  .vv-oc .oc-btn,
  .vv-oc .oc-input,
  .vv-oc .oc-seg-i { min-height: 44px; }
  .vv-oc .oc-check { min-height: 44px; align-items: center; }
  .vv-oc .oc-check input { width: 20px; height: 20px; margin: 0; }
  .vv-oc .oc-label-row a,
  .vv-oc .oc-auth-alt a { display: inline-flex; align-items: center; min-height: 44px; }
  .vv-oc .oc-auth-frame { flex-direction: column; }
  .vv-oc .oc-rail { display: none; }
  .vv-oc .oc-topbar {
    position: static; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 48px; padding: 2px 12px; background: var(--oc-dark); color: #FFFFFF;
  }
  .vv-oc .oc-auth-main,
  .vv-oc .oc-auth-main.is-wide { padding: 28px 16px 40px; }
  .vv-oc .oc-grid2 { grid-template-columns: 1fr; }
  .vv-oc .oc-phone-only { display: block; }
}

/* ── MIX-2882 (Console look outside the shell) PR B: public feedback ── */
/* Consumer pages (a customer's phone): 44 px targets and 16 px field text at
   every width, no slate, teal for selected, green only for a full step. All
   scoped .vv-oc.oc-public; no width query (the tile grid sizes itself). The
   .product-tile, .tile-*, .*-badge, .remove-btn, .wizard-step, .progress-step
   classes are the ones the shared scripts write and toggle. */
.vv-oc.oc-public { --oc-ctl: 44px; }
.vv-oc.oc-public .oc-rail,
.vv-oc.oc-public .oc-topbar { display: none; }
.vv-oc.oc-public .oc-auth-main { display: block; padding: 0; }
.vv-oc.oc-public .oc-auth-col { max-width: none; }
.vv-oc.oc-public input,
.vv-oc.oc-public textarea,
.vv-oc.oc-public .oc-input { font-size: 16px; }
.vv-oc.oc-public button,
.vv-oc.oc-public .oc-btn,
.vv-oc.oc-public .oc-seg-i { min-height: 44px; }
.vv-oc.oc-public .oc-fb-top { display: flex; justify-content: flex-end; width: min(100%, 760px); margin: 0 auto; padding: 12px clamp(16px, 4vw, 24px) 0; }
.vv-oc.oc-public .oc-fb { width: min(100%, 760px); margin: 0 auto; padding: 14px clamp(16px, 4vw, 24px) 40px; }
.vv-oc.oc-public .oc-fb.is-narrow { width: min(100%, 520px); }
.vv-oc.oc-public .oc-fb-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--oc-line); }
.vv-oc.oc-public .oc-fb-head.is-plain { margin-top: clamp(8px, 6vh, 60px); padding-bottom: 0; border-bottom: 0; }
.vv-oc.oc-public .oc-fb-head h1 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; }
.vv-oc.oc-public .oc-fb-head p { margin: 2px 0 0; color: var(--oc-muted); }
.vv-oc.oc-public .oc-fb-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: var(--oc-sel); color: var(--oc-action); }
.vv-oc.oc-public .oc-fb-ico.is-mut { background: var(--oc-head); color: var(--oc-muted); }
.vv-oc.oc-public .oc-fb-ico svg { width: 18px; height: 18px; }
.vv-oc.oc-public .oc-fb-intro { margin: 14px 0 16px; color: #4A4540; }
.vv-oc.oc-public .oc-fb-opt { font-weight: 400; color: var(--oc-muted); }
.vv-oc.oc-public .oc-fb-form > .oc-field,
.vv-oc.oc-public .oc-fb-form > .oc-btn-block { margin-top: 16px; }
.vv-oc.oc-public .oc-panel { border: 1px solid var(--oc-line); border-radius: 6px; background: var(--oc-panel); }
.vv-oc.oc-public .oc-panel-h { margin: 0; padding: 10px 12px 0; font-size: var(--oc-fs); font-weight: 600; }
.vv-oc.oc-public .oc-steps { display: flex; margin-top: 6px; padding: 0 4px; container-type: inline-size; border-bottom: 1px solid var(--oc-line); overflow-x: auto; }
.vv-oc.oc-public .oc-step { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 0; background: none; color: var(--oc-muted); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.vv-oc.oc-public .oc-step.active { color: var(--oc-text); box-shadow: inset 0 -2px 0 var(--oc-action); }
.vv-oc.oc-public .oc-step-n { padding: 0 5px; border-radius: 4px; background: var(--oc-line-soft); font-size: 11.5px; font-weight: 600; }
.vv-oc.oc-public .oc-step-n:empty,
.vv-oc.oc-public .oc-step-ok { display: none; }
.vv-oc.oc-public .oc-step.is-done .oc-step-ok { display: block; width: 14px; height: 14px; color: var(--oc-ok); }
.vv-oc.oc-public .oc-step.is-done .oc-step-n { background: var(--oc-ok-bg); color: var(--oc-ok-t); }
/* A phone's strip (about 324 px at 390) holds the four tabs only compacted,
   and a done step shows its green count without the tick (measured: the
   Spanish tabs with all three ticks need about 360 px). A container query:
   the group allows one width media query, PR A's. */
@container (max-width: 380px) {
  .vv-oc.oc-public .oc-step { gap: 4px; padding: 0 5px; font-size: 13px; }
  .vv-oc.oc-public .oc-step-n { padding: 0 4px; font-size: 11px; }
  .vv-oc.oc-public .oc-step.is-done .oc-step-ok { display: none; }
}
.vv-oc.oc-public .oc-panel-b { padding: 12px; }
.vv-oc.oc-public .oc-panel-f { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--oc-line-soft); }
.vv-oc.oc-public .oc-panel-f .oc-btn-pri { margin-left: auto; }
.vv-oc.oc-public .wizard-step { display: none; }
.vv-oc.oc-public .wizard-step.active { display: block; }
.vv-oc.oc-public .oc-fb-step-t { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.vv-oc.oc-public .oc-fb-state { padding: 20px 0; color: var(--oc-muted); text-align: center; }
.vv-oc.oc-public .oc-fb-state p { margin: 0; }
.vv-oc.oc-public .oc-fb-state .oc-spin { display: block; width: 24px; height: 24px; margin: 0 auto 6px; }
.vv-oc.oc-public .oc-fb-state .oc-btn { margin-top: 10px; }
.vv-oc.oc-public .oc-inp { display: flex; align-items: center; gap: 6px; height: var(--oc-ctl); padding: 0 0 0 9px; border: 1px solid var(--oc-input); border-radius: 5px; background: #FFFFFF; color: #8A8590; }
.vv-oc.oc-public .oc-inp:focus-within { border-color: var(--oc-action); box-shadow: 0 0 0 1px var(--oc-action); }
.vv-oc.oc-public .oc-inp svg { width: 15px; height: 15px; }
.vv-oc.oc-public .oc-inp input { flex: 1; min-width: 0; height: var(--oc-ctl); margin: -1px 0; padding: 0 9px 0 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--oc-text); font: inherit; font-size: 16px; }
.vv-oc.oc-public .oc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100px, calc((100% - 16px) / 3)), 1fr)); gap: 8px; margin-top: 10px; }
.vv-oc.oc-public .oc-tiles > .oc-fb-state { grid-column: 1 / -1; }
.vv-oc.oc-public .product-tile { display: flex; flex-direction: column; gap: 5px; min-width: 0; cursor: pointer; }
.vv-oc.oc-public .tile-image-container { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid var(--oc-line); border-radius: 6px; background: var(--oc-head); overflow: hidden; }
.vv-oc.oc-public .product-tile.selected .tile-image-container { border-color: var(--oc-action); background: var(--oc-sel); box-shadow: inset 0 0 0 1px var(--oc-action); }
.vv-oc.oc-public .tile-image { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.vv-oc.oc-public .tile-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--oc-input); }
.vv-oc.oc-public .tile-checkmark { position: absolute; right: 5px; bottom: 5px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--oc-input); border-radius: 4px; background: #FFFFFF; }
.vv-oc.oc-public .tile-checkmark.selected { border-color: var(--oc-action); background: var(--oc-action); color: #FFFFFF; }
.vv-oc.oc-public .tile-name { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.25; color: #4A4540; word-break: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vv-oc.oc-public .review-badge,
.vv-oc.oc-public .selected-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-left: 8px; border: 1px solid var(--oc-sel-line); border-radius: 5px; background: var(--oc-sel); font-size: 13px; }
.vv-oc.oc-public .review-badge img,
.vv-oc.oc-public .selected-badge img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
.vv-oc.oc-public .remove-btn,
.vv-oc.oc-public .oc-cat-clear { display: inline-flex; align-items: center; justify-content: center; width: 44px; border: 0; background: none; color: var(--oc-muted); cursor: pointer; }
.vv-oc.oc-public .remove-btn:hover { color: var(--oc-bad); }
.vv-oc.oc-public .remove-btn svg,
.vv-oc.oc-public .oc-cat-clear svg { width: 14px; height: 14px; }
.vv-oc.oc-public .oc-cat-head { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; }
.vv-oc.oc-public .oc-cat-head svg { width: 16px; height: 16px; }
.vv-oc.oc-public .oc-cat-results { max-height: 32rem; overflow-y: auto; }
.vv-oc.oc-public .oc-cat-sel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--oc-line-soft); }
.vv-oc.oc-public .oc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vv-oc.oc-public .oc-fb-lead { margin: 0 0 6px; }
.vv-oc.oc-public .oc-fb-thanks,
.vv-oc.oc-public .oc-fb-again { margin: 16px 0 0; }
.vv-oc.oc-public .oc-fb-again { padding-top: 14px; border-top: 1px solid var(--oc-line-soft); }
.vv-oc.oc-public .oc-fb-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 500; }
.vv-oc.oc-public .oc-fb-again svg { width: 16px; height: 16px; }
/* MIX-3111 (restock emails for customers): the restock-email signup box at
   the top of the public feedback page (feedback/outside/_restock_signup.html,
   the mockup's "Top of the page"). Not MIX-2882 work: these classes are only
   this box's. They sit in block B (the public feedback page they style), before
   its last rule, because the last block runs to the end of the file and
   block E's test holds every rule there to the setup wizard and status
   pages. */
.vv-oc.oc-public .oc-re-box { margin: 14px 0 0; padding: 14px; border: 1px solid var(--oc-sel-line); border-radius: 8px; background: #F3FAF8; }
.vv-oc.oc-public .oc-re-t { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.vv-oc.oc-public .oc-re-t svg { width: 22px; height: 22px; margin-top: -1px; color: var(--oc-action); }
.vv-oc.oc-public .oc-re-box form { margin: 0; }
.vv-oc.oc-public .oc-re-box .oc-btn-block { margin-top: 10px; }
.vv-oc.oc-public .oc-re-consent { margin: 10px 0 0; color: #4A4540; font-size: 12.5px; line-height: 1.45; }
.vv-oc.oc-public .oc-re-dym { margin: 7px 0 0; }
.vv-oc.oc-public .oc-re-dym button { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 6px; background: var(--oc-warn-bg); color: var(--oc-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.vv-oc.oc-public .oc-re-dym button:hover { text-decoration: underline; }
.vv-oc.oc-public .oc-re-ok { padding: 6px 4px 4px; text-align: center; }
.vv-oc.oc-public .oc-re-ok-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--oc-ok-bg); color: var(--oc-ok-t); }
.vv-oc.oc-public .oc-re-ok-ico svg { width: 22px; height: 22px; }
.vv-oc.oc-public .oc-re-ok h2 { margin: 10px 0 4px; font-size: 17px; font-weight: 600; }
.vv-oc.oc-public .oc-re-ok p { max-width: 320px; margin: 0 auto; color: #4A4540; font-size: 13.5px; }

/* Last in the block: the scripts toggle tw-hidden, which must beat every
   display rule above (app.css's .tw-hidden is one class). */
.vv-oc.oc-public .tw-hidden { display: none; }

/* ── MIX-2882 (Console look outside the shell) PR C: print screens ── */
/* The box label, the sticker page and the QR sign page (body.vv-oc.oc-print,
   standalone: no frame, the paper is the page). A flat 48 px bar, the
   sticker form in one row, muted hint lines, then the paper on a light
   stage. Nothing here prints: the print block hides the controls and clears
   the stage. The sticker paper and the QR sign keep their Classic CSS (the
   shared partials); the two wrappers below give them back the type Classic
   gave the body, so .vv-oc's base font never reaches them. */
.vv-oc .oc-pbar {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 8px;
  border-bottom: 1px solid var(--oc-line); background: #FFFFFF;
}
.vv-oc .oc-pbar .oc-btn-ghost { display: block; box-sizing: border-box; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: calc(var(--oc-ctl) - 2px); }
.vv-oc .oc-pbar-t { margin: 0; min-width: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-oc .oc-pbar-gap { flex: 1; }
.vv-oc .oc-ptool {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 0; padding: 8px 16px 10px;
  border-bottom: 1px solid var(--oc-line); background: #FFFFFF;
}
.vv-oc .oc-ptool-f { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--oc-muted); }
.vv-oc .oc-ptool select,
.vv-oc .oc-ptool input {
  box-sizing: border-box; height: var(--oc-ctl); padding: 0 9px; border: 1px solid var(--oc-input); border-radius: 5px;
  background: #FFFFFF; color: var(--oc-text); font: inherit; font-size: 13px; font-weight: 400;
}
.vv-oc .oc-ptool select:focus,
.vv-oc .oc-ptool input:focus { outline: 0; border-color: var(--oc-action); box-shadow: 0 0 0 1px var(--oc-action); }
.vv-oc .oc-ptool-mm { width: 84px; }
.vv-oc .oc-phint { padding: 8px 16px; border-bottom: 1px solid var(--oc-line-soft); background: #FFFFFF; color: var(--oc-muted); font-size: 12.5px; }
.vv-oc .oc-phint p { margin: 0; }
.vv-oc .oc-phint p + p { margin-top: 4px; }
.vv-oc .oc-paper-stage { padding: 24px 16px; background: var(--oc-head); }
.vv-oc .oc-paper-stage-stickers { padding-top: 20px; color: #1F1F1F; font: 16px/normal "DM Sans", system-ui, sans-serif; font-variant-numeric: normal; -webkit-font-smoothing: auto; }
.vv-oc .oc-paper-stage-stickers .empty { max-width: 8.5in; margin: 0 auto; padding: 20px; border: 1px solid var(--oc-line); border-radius: var(--oc-r); background: #FFFFFF; font-size: 14px; }

/* The box label (frame "label-console"): black on white, sentence case. */
.vv-oc .oc-blabel { max-width: 4in; margin: 0 auto; padding: 16px 18px; border: 1.5px solid #111111; background: #FFFFFF; color: #111111; font-size: 13px; }
.vv-oc .oc-blabel-k { font-size: 11px; font-weight: 600; color: #555555; }
.vv-oc .oc-blabel-m { margin-top: 2px; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; overflow-wrap: anywhere; }
.vv-oc .oc-blabel-box { display: flex; align-items: baseline; gap: 10px; margin: 12px 0; padding: 10px 0; border-top: 1px solid #111111; border-bottom: 1px solid #111111; }
.vv-oc .oc-blabel-box b { font-size: 34px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.vv-oc .oc-blabel-box span { font-size: 14px; font-weight: 600; color: #333333; }
.vv-oc .oc-blabel-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 12px 0 0; }
.vv-oc .oc-blabel-dl dt { color: #555555; }
.vv-oc .oc-blabel-dl dd { margin: 0; font-weight: 600; }
.vv-oc .oc-blabel-dl dd.oc-mono { font-weight: 400; }
.vv-oc .oc-blabel-f { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 8px; border-top: 1px solid #C9C2B8; font-size: 11px; color: #555555; }

/* The QR sign page: the sign as Classic draws it, the controls under it. */
.vv-oc .oc-qr-sign { color: #000000; font: 16px/normal "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-variant-numeric: normal; -webkit-font-smoothing: auto; }
.vv-oc .oc-qr-sign svg { flex: 0 1 auto; }
.vv-oc .oc-qr-tools { width: var(--sign-w); max-width: 100%; margin-top: 20px; border: 1px solid var(--oc-line); border-radius: var(--oc-r); background: #FFFFFF; }
.vv-oc .oc-ptool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; }
.vv-oc .oc-ptool-row + .oc-ptool-row { border-top: 1px solid var(--oc-line-soft); }
.vv-oc .oc-ptool-l { min-width: 96px; font-size: 12.5px; font-weight: 600; color: var(--oc-text); }
.vv-oc .oc-ptool-row .oc-hint { flex-basis: 100%; margin: 0; }
.vv-oc .oc-qr-url a { font-size: 12px; word-break: break-all; }

@media screen and (max-width: 1023.98px) {
  .vv-oc .oc-pbar { padding: 0 12px 0 4px; }
  .vv-oc .oc-ptool-f { flex: 1 1 40%; }
  .vv-oc .oc-ptool select,
  .vv-oc .oc-ptool input { width: 100%; min-height: 44px; font-size: 16px; }
  .vv-oc .oc-paper-stage-stickers,
  .vv-oc .oc-qr-sign { max-width: 100%; overflow-x: auto; }
  .vv-oc .oc-qr-url a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media print {
  .vv-oc.oc-print { min-height: 0; background: #FFFFFF; }
  .vv-oc .oc-pbar,
  .vv-oc .oc-ptool,
  .vv-oc .oc-phint,
  .vv-oc .oc-qr-tools { display: none; }
  .vv-oc .oc-paper-stage { padding: 0; background: #FFFFFF; }
}

/* ── MIX-2882 (Console look outside the shell) PR D: location portal ── */
/* The pages keep their markup (portal.css's .pt-*); the Console bases in
   portal/outside/ add the bar, tabs and strip (.oc-pt-*). Every rule is
   .vv-oc plus a .pt-* or .oc-pt-* class, so it beats portal.css whichever
   loads last. Where portal.css colours a control with !important through a
   variable (--pt-primary, --pt-body, --pt-danger, --vv-brand), the rule sets
   that variable on the element instead of adding an !important. */
.vv-oc .oc-pt-bar{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;background:var(--vv-brand);color:#FFF}
.vv-oc .oc-pt-id{display:flex;flex:1 1 auto;align-items:center;gap:10px;min-width:0;color:#FFF}
.vv-oc .oc-pt-id:hover{text-decoration:none}
.vv-oc .oc-pt-logo{display:inline-flex;flex:none;align-items:center;justify-content:center;height:32px;min-width:32px;padding:4px;border-radius:5px;background:#FFF}
.vv-oc .oc-pt-logo img{display:block;width:auto;height:24px;max-width:96px;object-fit:contain}
.vv-oc .oc-pt-logo.is-vv img{width:24px;border-radius:4px}
.vv-oc .oc-pt-name{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.vv-oc .oc-pt-name b,
.vv-oc .oc-pt-name span{overflow:hidden;font-size:14.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.vv-oc .oc-pt-name span{font-size:12px;font-weight:400;opacity:.78}
.vv-oc .oc-pt-word{font-size:16px;white-space:nowrap}
.vv-oc .oc-pt-acct{display:flex;flex:none;align-items:center;gap:6px}
.vv-oc .oc-pt-out{display:flex;margin:0}
.vv-oc .oc-pt-hbtn{display:inline-flex;align-items:center;height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.3);border-radius:5px;background:transparent;color:#FFF;font:inherit;font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer}
.vv-oc .oc-pt-hbtn:hover{background:rgba(255,255,255,.12);text-decoration:none}
.vv-oc .oc-pt-hbtn:focus-visible,
.vv-oc .oc-pt-id:focus-visible{outline:2px solid #FFF;outline-offset:2px}
.vv-oc .oc-pt-tabs{display:flex;gap:2px;height:44px;padding:0 10px;overflow-x:auto;border-bottom:1px solid var(--oc-line);background:var(--oc-panel);scrollbar-width:none}
.vv-oc .oc-pt-tab,
.vv-oc .oc-pt-chips a{display:inline-flex;align-items:center;gap:6px;padding:0 10px;color:var(--oc-muted);font-weight:500;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.vv-oc .oc-pt-tab:hover,
.vv-oc .oc-pt-chips a:hover{color:var(--oc-text);text-decoration:none}
.vv-oc .oc-pt-tab.is-on{color:var(--oc-text);box-shadow:inset 0 -2px 0 var(--vv-brand)}
.vv-oc .oc-pt-stats{border-bottom:1px solid var(--oc-line);background:var(--oc-panel)}
.vv-oc .oc-pt-stats.pt-hero-shallow{padding:10px 16px 12px}
.vv-oc .oc-pt-stats .pt-figures{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:0}
.vv-oc .oc-pt-stats .pt-figures>div{min-width:0;padding:10px 16px;border-right:1px solid var(--oc-line-soft)}
.vv-oc .oc-pt-stats .pt-figures>.pt-figures-action{display:flex;align-items:center;margin-left:auto;border-right:0}
.vv-oc .oc-pt-main{max-width:1200px;padding:16px 16px 40px}
/* app.css pads every <main> 1rem !important under 640 px; the employees
   twin is full-bleed, as the approved phone frame. */
.vv-oc .oc-pt-main.is-flush{max-width:none;padding:0 0 40px;padding-right:0!important;padding-left:0!important}
.vv-oc .oc-pt-main.is-flush>#portal-flash,
.vv-oc .oc-pt-pad{padding:12px 16px 0}
.vv-oc .oc-pt-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--oc-line-soft);color:var(--oc-muted);font-size:12px}
.vv-oc .pt-kicker,
.vv-oc .pt-tile-label,
.vv-oc .pt-details dt,
.vv-oc .pt-pin-label{color:var(--oc-muted);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;opacity:1}
.vv-oc .pt-figure-lg{margin-top:2px;font-size:22px;font-weight:600;letter-spacing:-.3px;line-height:1.15}
.vv-oc .pt-figure{margin-top:5px;font-size:16px;font-weight:600;letter-spacing:0;line-height:1.2}
.vv-oc .pt-figure-sub,
.vv-oc .pt-hero-lede{margin:1px 0 0;color:var(--oc-muted);font-size:12px;opacity:1}
.vv-oc .pt-hero-title,
.vv-oc .pt-page-title,
.vv-oc .pt-inspector-name,
.vv-oc .oc-pt-ph h1{margin:0;font-size:17px;font-weight:600;letter-spacing:0;line-height:1.3}
.vv-oc .pt-hero-pills{display:inline-flex;flex-wrap:wrap;align-self:center;gap:0;margin:8px 16px 8px auto;padding:0;overflow:hidden;border-radius:5px;background:var(--oc-dark)}
.vv-oc .pt-hero-pill{min-height:32px;padding:0 10px;border-radius:0;font-size:12.5px;font-weight:500}
.vv-oc .pt-hero-pill:hover{background:rgba(255,255,255,.12);text-decoration:none}
.vv-oc .pt-hero-pill.is-on{--vv-brand:#FFF;background:var(--oc-action);font-weight:600}
.vv-oc .pt-card{border:1px solid var(--oc-line);border-radius:6px;background:var(--oc-panel);box-shadow:none}
.vv-oc .pt-card-pad{padding:14px 16px}
.vv-oc .pt-card-head{gap:10px;padding:10px 16px;border-bottom-color:var(--oc-line)}
.vv-oc .pt-card-title{color:var(--oc-text);font-size:15px;font-weight:600;letter-spacing:0}
.vv-oc .pt-section-title{font-size:14px;font-weight:600;letter-spacing:0}
.vv-oc .pt-auth-title{margin-bottom:4px;font-size:20px;font-weight:600;letter-spacing:-.2px;line-height:1.25}
.vv-oc .pt-lede,
.vv-oc .pt-muted{color:var(--oc-muted)}
.vv-oc .pt-strong{color:var(--oc-text);font-weight:600}
.vv-oc .pt-divider-top{border-top-color:var(--oc-line-soft)}
.vv-oc .pt-grid{gap:10px}
.vv-oc .pt-grid-gap{gap:12px}
.vv-oc .pt-stack>*+*{margin-top:12px}
.vv-oc .pt-tile{padding:10px 12px;border:1px solid var(--oc-line-soft);border-radius:6px;background:var(--oc-head)}
.vv-oc .pt-tile-value{margin-top:4px;font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.2}
.vv-oc .pt-tile-value-sm{font-size:14px;letter-spacing:0}
.vv-oc .pt-tile-note{margin-top:2px}
.vv-oc .pt-tile-brand{border-color:var(--oc-sel-line);background:var(--oc-sel);color:var(--oc-text)}
.vv-oc .pt-tile-brand::after{display:none}
.vv-oc .pt-tile-brand .pt-tile-label,
.vv-oc .pt-tile-brand .pt-tile-note{color:#196058;opacity:1}
.vv-oc .pt-tile-brand .pt-tile-value{color:var(--oc-text)}
.vv-oc .pt-panel{padding:12px;border:1px solid var(--oc-line);border-radius:6px}
.vv-oc .pt-panel-title{font-size:12.5px;font-weight:600}
.vv-oc .pt-flash{margin-bottom:12px;padding:8px 10px;border:0;border-radius:5px;background:var(--oc-head);color:var(--oc-text);font-size:12.5px}
.vv-oc .pt-badge{gap:0;padding:1px 6px;border:0;border-radius:4px;font-size:11px;font-weight:600}
.vv-oc .pt-badge::before{display:none}
.vv-oc .pt-flash-success,
.vv-oc .pt-badge-ok{background:var(--oc-ok-bg);color:var(--oc-ok-t)}
.vv-oc .pt-flash-warning,
.vv-oc .pt-badge-warn{background:var(--oc-warn-bg);color:var(--oc-warn)}
.vv-oc .pt-flash-error{background:var(--oc-bad-bg);color:var(--oc-bad)}
.vv-oc .pt-btn{gap:6px;min-height:var(--oc-ctl);padding:0 12px;border:1px solid transparent;border-radius:5px;font-size:13px;font-weight:500}
.vv-oc .pt-btn-lg{padding:0 14px;border-radius:5px;font-size:13px}
.vv-oc .pt-btn-primary,
.vv-oc .pt-btn-onbrand{--vv-brand:#FFF;border-color:var(--oc-action);background:var(--oc-action);font-weight:600}
.vv-oc .pt-btn-primary:hover,
.vv-oc .pt-btn-onbrand:hover{border-color:var(--oc-action-h);background:var(--oc-action-h)}
.vv-oc .pt-btn-accent,
.vv-oc .pt-btn-dark{font-weight:600}
.vv-oc .pt-btn-outline{--pt-primary:var(--oc-text);border-color:var(--oc-input);background:#FFF}
.vv-oc .pt-btn-outline:hover,
.vv-oc .pt-chip:hover{border-color:var(--oc-sel-line);background:var(--oc-sel)}
.vv-oc .pt-btn-ghost{--pt-body:var(--oc-text)}
.vv-oc .pt-btn-danger{--pt-danger:var(--oc-bad)}
.vv-oc .pt-btn.is-busy:disabled{opacity:1}
.vv-oc .pt-btn.is-busy::after,
.vv-oc .pt-chip.is-busy::after{width:12px;height:12px}
.vv-oc .pt-chip{--pt-body:var(--oc-text);min-height:30px;padding:0 10px;border:1px solid var(--oc-input);border-radius:5px;font-size:12.5px;font-weight:500}
.vv-oc .pt-label{margin-bottom:5px;color:var(--oc-text);font-size:12.5px;font-weight:600}
.vv-oc .pt-input{min-height:var(--oc-ctl);padding:0 10px;border:1px solid var(--oc-input);border-radius:5px;background:#FFF;font-size:var(--oc-fs)}
.vv-oc .pt-input:focus{border-color:var(--oc-action);box-shadow:0 0 0 1px var(--oc-action)}
.vv-oc .pt-input[type=file]{padding:4px}
.vv-oc .pt-field-row{gap:6px}
.vv-oc .pt-switch:checked{color:var(--oc-action);background:var(--oc-action)}
.vv-oc .pt-switch:focus-visible,
.vv-oc .pt-choice-input:focus-visible+.pt-choice-body{outline:2px solid var(--oc-action);outline-offset:2px}
.vv-oc .pt-toggle-row{gap:12px;padding:10px 0}
.vv-oc .pt-choice-body{padding:10px 12px;border:1px solid var(--oc-line);border-radius:6px}
.vv-oc .pt-choice-title{font-size:13.5px;font-weight:600}
.vv-oc .pt-choice-input:checked+.pt-choice-body{border-color:var(--oc-action);background:var(--oc-sel);box-shadow:inset 0 0 0 1px var(--oc-action)}
.vv-oc .pt-choice-input:checked+.pt-choice-body .pt-choice-title{color:#196058}
.vv-oc .pt-section-nav{gap:2px}
.vv-oc .pt-section-link{--pt-body:var(--oc-muted);min-height:32px;padding:0 10px;border-radius:0;font-size:13px;font-weight:500;box-shadow:inset 2px 0 0 transparent}
.vv-oc .pt-section-link:hover{--vv-brand:var(--oc-text);background:transparent;box-shadow:inset 2px 0 0 var(--oc-action)}
.vv-oc .pt-table{font-size:var(--oc-fs)}
.vv-oc .pt-table th,
.vv-oc .oc-pt-table th{padding:6px 10px;border-bottom:1px solid var(--oc-line);background:var(--oc-head);color:var(--oc-muted);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap}
.vv-oc .oc-pt-table th{text-align:left}
.vv-oc .pt-table td{padding:9px 10px;border-top:0;border-bottom:1px solid var(--oc-line-soft);color:var(--oc-text)}
.vv-oc .pt-day-head{padding:8px 12px;border-bottom-color:var(--oc-line);background:var(--oc-head)}
.vv-oc .pt-day-row{padding:8px 12px;border-top-color:var(--oc-line-soft)}
.vv-oc .pt-day-amount{font-size:13.5px;font-weight:600}
.vv-oc .pt-empty-icon{border-radius:6px;background:var(--oc-sel);color:var(--oc-action)}
.vv-oc .pt-details dd{margin-top:2px;font-size:13px}
.vv-oc .pt-inspector-head{gap:10px}
.vv-oc .pt-avatar{width:24px;height:24px;font-size:10.5px;font-weight:600}
.vv-oc .pt-avatar-lg{width:36px;height:36px;font-size:13px}
.vv-oc .pt-pin{letter-spacing:2px}
/* Employees (the twin): the roster table, the person in the side pane. */
.vv-oc .oc-pt-split{display:flex;min-height:calc(100vh - 166px)}
.vv-oc .oc-pt-list{flex:1;min-width:0}
.vv-oc .oc-pt-ph,
.vv-oc .oc-pt-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:44px;padding:4px 12px 4px 16px;border-bottom:1px solid var(--oc-line)}
.vv-oc .oc-pt-fbar{padding-left:12px}
.vv-oc .oc-pt-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.vv-oc .oc-pt-search{display:flex;gap:6px;margin:0}
.vv-oc .oc-pt-search .pt-input{width:220px}
.vv-oc .oc-pt-chips{display:inline-flex;align-self:stretch;gap:2px}
.vv-oc .oc-pt-chips a{padding:0 8px}
.vv-oc .oc-pt-chips a.is-on{color:var(--oc-text);box-shadow:inset 0 -2px 0 var(--oc-action)}
.vv-oc .oc-pt-chips b{padding:0 5px;border-radius:4px;background:var(--oc-line-soft);color:var(--oc-muted);font-size:11.5px;font-weight:600}
.vv-oc .oc-pt-chips b.is-bad{background:var(--oc-bad-bg);color:var(--oc-bad)}
.vv-oc .oc-pt-table{width:100%;border-collapse:collapse}
.vv-oc .oc-pt-table td{height:var(--oc-row);padding:0 10px;border-bottom:1px solid var(--oc-line-soft);white-space:nowrap}
.vv-oc .oc-pt-table .r{text-align:right}
.vv-oc .oc-pt-table td.p3{display:none}
.vv-oc .oc-pt-table tbody tr:hover td{background:var(--oc-head)}
.vv-oc .oc-pt-table tbody tr.is-sel td{background:var(--oc-sel)}
.vv-oc .oc-pt-table tbody tr.is-sel td:first-child{box-shadow:inset 3px 0 0 var(--oc-action)}
.vv-oc .oc-pt-none td{height:auto;padding:16px;white-space:normal}
.vv-oc .oc-pt-none p{margin:0 0 8px}
.vv-oc .oc-pt-person{display:flex;align-items:center;gap:8px;min-height:var(--oc-row);color:var(--oc-text)}
.vv-oc .oc-pt-person:hover{text-decoration:none}
.vv-oc .oc-pt-person:hover .oc-pt-pname{text-decoration:underline}
.vv-oc .oc-pt-unread{color:var(--oc-muted);font-size:12px}
.vv-oc .oc-pt-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--oc-input);vertical-align:1px}
.vv-oc .oc-pt-dot.is-ok{background:var(--oc-ok)}
.vv-oc .oc-pt-dot.is-warn{background:var(--oc-warn)}
.vv-oc .oc-pt-pane{flex:none;width:400px;padding:14px 16px 24px;border-left:1px solid var(--oc-line);background:#FBF9F6}
.vv-oc .oc-pt-pane .pt-grid-2,
.vv-oc .oc-pt-pane .pt-grid-2-wide{grid-template-columns:minmax(0,1fr)}
.vv-oc .oc-pt-pane .pt-details{grid-template-columns:repeat(2,minmax(0,1fr))}
.vv-oc .oc-pt-pane .pt-panel{background:#FFF}
/* Under 1024 px (A's phone rules, for these classes): 44 px targets, 16 px
   field text; the strip wraps, rows become two-line cards, the pane sits
   under the list. */
@media (max-width: 1023.98px) {
  .vv-oc .pt-input{font-size:16px}
  .vv-oc .pt-chip,
  .vv-oc .pt-hero-pill,
  .vv-oc .pt-section-link,
  .vv-oc .oc-pt-tab,
  .vv-oc .oc-pt-chips a,
  .vv-oc .oc-pt-id,
  .vv-oc .oc-pt-person{min-height:44px}
  .vv-oc .oc-pt-hbtn{height:auto;min-height:44px}
  .vv-oc .pt-muted>a{display:inline-flex;align-items:center;min-height:44px}
  .vv-oc .oc-pt-bar{gap:8px;padding:4px 12px}
  .vv-oc .oc-pt-logo img{max-width:72px}
  .vv-oc .oc-pt-tabs{height:auto;padding:0 4px}
  .vv-oc .oc-pt-stats .pt-figures>div{flex:1 1 50%;border-bottom:1px solid var(--oc-line-soft)}
  .vv-oc .oc-pt-stats .pt-figures>.pt-figures-action{flex-basis:100%;padding:8px 12px}
  .vv-oc .oc-pt-stats .pt-figures-action>a{width:100%}
  .vv-oc .pt-hero-pills{flex:1 1 100%;margin:8px 12px}
  .vv-oc .pt-hero-pill{flex:1 1 auto;justify-content:center}
  .vv-oc .oc-pt-split{display:block;min-height:0}
  .vv-oc .oc-pt-pane{width:auto;border-top:1px solid var(--oc-line);border-left:0}
  .vv-oc .oc-pt-ph,
  .vv-oc .oc-pt-fbar{padding:6px 12px}
  .vv-oc .oc-pt-acts{width:100%;margin-left:0}
  .vv-oc .oc-pt-search{width:100%}
  .vv-oc .oc-pt-search .pt-input{flex:1;width:auto;min-width:0}
  .vv-oc .oc-pt-chips{overflow-x:auto}
  .vv-oc .oc-pt-table thead{display:none}
  .vv-oc .oc-pt-table tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;padding:4px 12px 9px;border-bottom:1px solid var(--oc-line-soft)}
  .vv-oc .oc-pt-table td{display:block;height:auto;padding:0;border:0}
  .vv-oc .oc-pt-table td.p1{flex:1;order:1;min-width:0;font-size:14.5px}
  .vv-oc .oc-pt-table td.p2{order:2;font-size:14.5px;font-weight:600}
  .vv-oc .oc-pt-table td.p3{display:block;flex-basis:100%;order:3;padding-left:32px;color:var(--oc-muted);font-size:12.5px;white-space:normal}
  .vv-oc .oc-pt-table td.px{display:none}
  .vv-oc .oc-pt-table tbody tr.is-sel{background:var(--oc-sel);box-shadow:inset 3px 0 0 var(--oc-action)}
  .vv-oc .oc-pt-table tbody tr.is-sel td,
  .vv-oc .oc-pt-table tbody tr:hover td{background:transparent;box-shadow:none}
}

/* ── MIX-2882 (Console look outside the shell) PR E: setup wizard and network status ── */
/* CSS only: both pages keep their markup. With the flag on, the wizard's
   <body class="ob-body"> adds "vv-oc oc-ob" and the status page's root
   div.ns-page adds "vv-oc oc-ns". Each root states its own type and page
   colour rather than inheriting PR A's .vv-oc root rule (13.5 px, written for
   the sign-in frame). Every rule is .vv-oc.oc-ob or .vv-oc.oc-ns plus an
   .ob-* / .ns-* class, so it beats onboarding.css and the status page's own
   <style> whichever loads last. Inline styles in the step bodies and macros
   (the dark "Stuck?" card, the video slot) stay as they are. */

/* Setup wizard: the slate top bar, sticky only at 1024 px and up. */
.vv-oc.oc-ob{font-size:16px;line-height:1.5;background:var(--oc-bg)}
.vv-oc.oc-ob a.ob-btn:hover{text-decoration:none}
.vv-oc.oc-ob .ob-bar{gap:16px;min-height:52px;padding:8px 16px;background:var(--oc-dark);color:#FFF}
.vv-oc.oc-ob .ob-cap{gap:8px;padding:0;border-radius:0;background:none;box-shadow:none}
.vv-oc.oc-ob .ob-cap svg{width:26px;height:26px;padding:3px 2px;border-radius:5px;background:#FFF}
.vv-oc.oc-ob .ob-wm{color:#FFF;font-size:15px;letter-spacing:0}
.vv-oc.oc-ob .ob-rail{gap:2px;padding:0;border-radius:0;background:none;box-shadow:none}
.vv-oc.oc-ob .ob-rp{gap:6px;height:32px;padding:0 10px;border-radius:5px;color:var(--oc-dark-mut);font-size:13px}
.vv-oc.oc-ob .ob-rp .n{width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.1);color:var(--oc-dark-fg)}
.vv-oc.oc-ob .ob-rp.done{color:var(--oc-dark-fg)}
.vv-oc.oc-ob .ob-rp.done .n{background:var(--oc-sel)}
.vv-oc.oc-ob .ob-rp.now{background:rgba(255,255,255,.12);color:#FFF}
.vv-oc.oc-ob .ob-rp.now .n{background:var(--oc-marker);color:var(--oc-dark)}
.vv-oc.oc-ob .ob-helpcap{gap:8px;height:36px;padding:0 4px 0 10px;border:1px solid var(--oc-dark-in-line);border-radius:5px;background:var(--oc-dark-in);box-shadow:none;color:var(--oc-dark-fg)}
.vv-oc.oc-ob .ob-helpcap:hover{background:rgba(255,255,255,.12);color:#FFF;text-decoration:none}
.vv-oc.oc-ob .ob-av{width:28px;height:28px;border-radius:4px;background:rgba(255,255,255,.12);color:#FFF}
/* Type: grey sentence-case labels (every msgid is sentence case already;
   only the CSS upper-cased them). */
.vv-oc.oc-ob .ob-hd{margin-bottom:20px}
.vv-oc.oc-ob .ob-eyebrow{gap:6px;margin-bottom:8px;padding:0;border:0;border-radius:0;background:none;color:var(--oc-muted);font-size:12.5px}
.vv-oc.oc-ob .ob-eyebrow i{width:6px;height:6px;background:var(--oc-marker)}
.vv-oc.oc-ob .ob-h1{color:var(--oc-text);font-size:26px;font-weight:600;letter-spacing:-.4px;line-height:1.2}
.vv-oc.oc-ob .ob-lede{margin-top:6px;color:var(--oc-muted);font-size:14.5px}
.vv-oc.oc-ob .ob-lang-h1 span{color:var(--oc-action)}
.vv-oc.oc-ob .ob-kick,
.vv-oc.oc-ob .ob-badge,
.vv-oc.oc-ob .ob-where,
.vv-oc.oc-ob .ob-guide-step .where,
.vv-oc.oc-ob .ob-tbl th{letter-spacing:0;text-transform:none}
.vv-oc.oc-ob .ob-kick{color:var(--oc-muted);font-size:12.5px;font-weight:600}
.vv-oc.oc-ob .ob-badge{padding:1px 6px;font-size:11px;font-weight:600}
.vv-oc.oc-ob .ob-badge.beta{border-color:var(--oc-line);color:var(--oc-muted)}
.vv-oc.oc-ob .ob-badge.rec{background:var(--oc-action)}
.vv-oc.oc-ob .ob-badge.warn{border-color:var(--oc-warn);color:var(--oc-warn)}
.vv-oc.oc-ob .ob-where{padding:3px 8px;border-radius:4px;background:var(--oc-sel);color:var(--oc-action);font-size:12px}
.vv-oc.oc-ob .ob-where.partner{background:var(--oc-warn-bg);color:var(--oc-warn)}
.vv-oc.oc-ob .ob-guide-step .where{font-size:11.5px}
.vv-oc.oc-ob .ob-hint{color:var(--oc-muted);font-size:12.5px}
.vv-oc.oc-ob .ob-mono{border-radius:4px;background:var(--oc-line-soft)}
/* Panels: flat, 6 px, 1 px line, no shadow. */
.vv-oc.oc-ob .ob-card{padding:20px 22px;border-color:var(--oc-line);border-radius:6px;background:var(--oc-panel);box-shadow:none}
.vv-oc.oc-ob .ob-card.dark{background:var(--oc-dark)}
.vv-oc.oc-ob .ob-opt{gap:12px;padding:14px 16px;border:1px solid var(--oc-line);border-radius:6px;background:var(--oc-panel);box-shadow:none}
.vv-oc.oc-ob .ob-opt:hover{border-color:var(--oc-sel-line);box-shadow:none}
.vv-oc.oc-ob .ob-opt:has(input:checked){border-color:var(--oc-action);background:var(--oc-sel);box-shadow:inset 0 0 0 1px var(--oc-action)}
.vv-oc.oc-ob .ob-opt .tick{width:20px;height:20px;border-color:var(--oc-input)}
.vv-oc.oc-ob .ob-opt .tick.sq{border-radius:4px}
.vv-oc.oc-ob .ob-opt:has(input:checked) .tick{border-color:var(--oc-action);background:var(--oc-action)}
.vv-oc.oc-ob .ob-opt .t{color:var(--oc-text);font-size:15px;letter-spacing:0}
.vv-oc.oc-ob .ob-opt .d{color:var(--oc-muted)}
.vv-oc.oc-ob .ob-note{gap:10px;padding:10px 12px;border-left:3px solid var(--oc-action);border-radius:0 5px 5px 0;background:var(--oc-sel);color:#196058;font-size:13px}
.vv-oc.oc-ob .ob-note.warn{border-left-color:var(--oc-warn);background:var(--oc-warn-bg);color:var(--oc-text)}
.vv-oc.oc-ob .ob-note.bad{border-left-color:var(--oc-bad);background:var(--oc-bad-bg);color:var(--oc-text)}
.vv-oc.oc-ob .ob-note b{color:inherit}
.vv-oc.oc-ob .ob-steps li{border-bottom-color:var(--oc-line-soft);font-size:13.5px}
.vv-oc.oc-ob .ob-steps li::before{border-radius:4px;background:var(--oc-sel);color:var(--oc-action)}
.vv-oc.oc-ob .ob-tbl th{padding:8px 12px;background:var(--oc-head);color:var(--oc-muted);font-size:12px;font-weight:600}
.vv-oc.oc-ob .ob-tbl td{padding:9px 12px;border-top-color:var(--oc-line-soft)}
.vv-oc.oc-ob .ob-guide-step{border-radius:5px}
.vv-oc.oc-ob .ob-guide-step.now{background:var(--oc-sel)}
.vv-oc.oc-ob .ob-drop,
.vv-oc.oc-ob .ob-pv,
.vv-oc.oc-ob .ob-video,
.vv-oc.oc-ob .ob-qr{border-radius:6px}
.vv-oc.oc-ob .ob-drop{border:1px dashed var(--oc-input);background:var(--oc-head)}
.vv-oc.oc-ob .ob-drop:hover{border-color:var(--oc-action);background:var(--oc-sel)}
.vv-oc.oc-ob .ob-sw{border-radius:5px}
.vv-oc.oc-ob .ob-import-row{border-top-color:var(--oc-line-soft)}
/* Fields and buttons: 36 px (44 px under 1024 px, through --oc-ctl). */
.vv-oc.oc-ob .ob-fgrid{gap:14px}
.vv-oc.oc-ob .ob-fl{margin-bottom:5px;color:var(--oc-text);font-size:12.5px}
.vv-oc.oc-ob input[type=text],
.vv-oc.oc-ob input[type=email],
.vv-oc.oc-ob input[type=password],
.vv-oc.oc-ob input[type=tel],
.vv-oc.oc-ob select{height:var(--oc-ctl);padding:0 10px;border:1px solid var(--oc-input);border-radius:5px;font-size:var(--oc-fs)}
.vv-oc.oc-ob select{padding-right:30px;background-position:right 10px center}
.vv-oc.oc-ob input:focus,
.vv-oc.oc-ob select:focus{border-color:var(--oc-action);box-shadow:0 0 0 1px var(--oc-action)}
.vv-oc.oc-ob input[readonly]{background:var(--oc-head)}
.vv-oc.oc-ob .ob-chk{font-size:13.5px}
.vv-oc.oc-ob .ob-btn{gap:6px;min-height:var(--oc-ctl);padding:0 14px;border-width:1px;border-radius:5px;font-size:13.5px}
.vv-oc.oc-ob .ob-btn.pri{background:var(--oc-action)}
.vv-oc.oc-ob .ob-btn.pri:hover{background:var(--oc-action-h)}
.vv-oc.oc-ob .ob-btn.pri:disabled{border-color:var(--oc-line);background:var(--oc-line-soft);color:var(--oc-muted)}
.vv-oc.oc-ob .ob-btn.out{border-color:var(--oc-input);background:var(--oc-panel);color:var(--oc-text)}
.vv-oc.oc-ob .ob-btn.out:hover{border-color:var(--oc-sel-line);background:var(--oc-sel)}
.vv-oc.oc-ob .ob-btn.gho{color:var(--oc-muted)}
.vv-oc.oc-ob .ob-btn.gho:hover{background:var(--oc-line-soft)}
.vv-oc.oc-ob .ob-btn.amb{background:var(--oc-marker);color:var(--oc-dark)}
.vv-oc.oc-ob .ob-btn.amb:hover{background:#C68A33}
.vv-oc.oc-ob .ob-btn.lg{padding:0 18px;font-size:14px}
.vv-oc.oc-ob .ob-btn.sm{min-height:32px;padding:0 10px;font-size:13px}
.vv-oc.oc-ob .ob-lnk{color:var(--oc-action-h);font-size:13px}
.vv-oc.oc-ob .ob-foot{border-top-color:var(--oc-line);background:var(--oc-panel);-webkit-backdrop-filter:none;backdrop-filter:none}
.vv-oc.oc-ob .ob-footin{padding:10px 24px}
.vv-oc.oc-ob .ob-ptrack{height:6px;border-radius:3px;background:var(--oc-line)}
.vv-oc.oc-ob .ob-pfill{border-radius:3px;background:var(--oc-action)}
.vv-oc.oc-ob .ob-pfill.ok{background:var(--oc-ok)}
.vv-oc.oc-ob .ob-pmeta{color:var(--oc-muted)}
/* The phone step's pairing script shows and hides #qr-actions (.ob-row) and
   #qr-done (.ob-btn) with tw-hidden, which onboarding.css's display rules
   outweigh; hide those two only, so a tw-hidden md:tw-flex pattern stays. */
.vv-oc.oc-ob .ob-row.tw-hidden{display:none}
.vv-oc.oc-ob .ob-btn.tw-hidden{display:none}

/* Network status: its own header, mark, state colours, chart and words;
   Console panels and shapes, no gradient, sentence-case eyebrow, still no
   script. Its 1 px lines and #F6F3EF fills already are the Console's. */
.vv-oc.oc-ns{min-height:100vh;padding-bottom:40px;background:var(--oc-bg);font-size:16px;line-height:1.5}
.vv-oc.oc-ns .ns-card{border-radius:6px;background:var(--oc-panel);box-shadow:none}
.vv-oc.oc-ns .ns-card-head{padding:12px 20px}
.vv-oc.oc-ns .ns-card-title{font-size:16px}
.vv-oc.oc-ns .ns-pill,
.vv-oc.oc-ns .ns-compare-pill{border-radius:6px}
.vv-oc.oc-ns .ns-headline{font-weight:600;letter-spacing:-.6px}
.vv-oc.oc-ns .ns-hero{font-weight:600;letter-spacing:-2px}
.vv-oc.oc-ns .ns-eyebrow{color:var(--oc-muted);font-size:13px;letter-spacing:0;text-transform:none}
.vv-oc.oc-ns .ns-track{height:6px;border-radius:3px}
.vv-oc.oc-ns .ns-track-fill{border-radius:3px}
.vv-oc.oc-ns .ns-ranges{gap:0;padding:0;overflow:hidden;border:1px solid var(--oc-input);border-radius:6px;background:var(--oc-panel);box-shadow:none}
.vv-oc.oc-ns .ns-range{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:0;color:var(--oc-muted)}
.vv-oc.oc-ns .ns-range + .ns-range{border-left:1px solid var(--oc-input)}
.vv-oc.oc-ns .ns-range:hover{color:var(--oc-text);text-decoration:none}
.vv-oc.oc-ns .ns-range-on,
.vv-oc.oc-ns .ns-range-on:hover{background:var(--oc-dark);color:#FFF}
.vv-oc.oc-ns .ns-hook{border-radius:6px;background:var(--oc-dark);box-shadow:none}
.vv-oc.oc-ns .ns-hook-title{font-weight:600}
.vv-oc.oc-ns .ns-btn{border-radius:5px}
.vv-oc.oc-ns .ns-btn:hover{text-decoration:none}
.vv-oc.oc-ns .ns-btn-gold,
.vv-oc.oc-ns .ns-btn-gold:hover{color:#0E1F3C}

/* Under 1024 px: the bar scrolls away, 44 px targets, 16 px field text. */
@media (max-width: 1023.98px) {
  .vv-oc.oc-ob .ob-bar{position:static;min-height:48px;padding:2px 12px}
  .vv-oc.oc-ob .ob-helpcap{height:44px}
  .vv-oc.oc-ob .ob-h1{font-size:22px}
  .vv-oc.oc-ob .ob-footin{flex-wrap:wrap;gap:6px 10px;padding:8px 16px}
  .vv-oc.oc-ob .ob-prog{flex-basis:100%;order:-1}
  .vv-oc.oc-ob #ob-next{margin-left:auto}
  .vv-oc.oc-ob input[type=text],
  .vv-oc.oc-ob input[type=email],
  .vv-oc.oc-ob input[type=password],
  .vv-oc.oc-ob input[type=tel],
  .vv-oc.oc-ob select{font-size:16px}
  .vv-oc.oc-ob .ob-btn.sm{min-height:44px}
  .vv-oc.oc-ob .ob-lnk{display:inline-flex;align-items:center;min-height:44px}
  .vv-oc.oc-ns .ns-range{height:44px;min-width:56px}
}