/*
 * Look: Stage.
 *
 * A third look over the same markup, type scale and layout as Classic and
 * Volare. Everything here sits under html[data-look="stage"], so the other two
 * looks are untouched. Three styling families (design notes:
 * frontend/explorations/ui-b-stage/README.md):
 *
 *   Soft      pages, dialogs, toasts, sidebar panel. Alabaster canvas, white
 *             cards with no border and a two-layer shadow, pill controls.
 *   Shell     every list and table outside Review. A faint grey shell holding
 *             white row tiles, chips with a coloured dot, pill filter tabs.
 *   Hairline  the Review workspace only. Hairline rows, tabular timestamps,
 *             a black-thumb segmented control.
 *
 * Inter 400/500 only (loaded in index.html with the Brand and thumbnail fonts).
 * The halftone and Classic artwork stay hidden: .look-only is already hidden
 * outside Volare (css/review.css), and the atmos slots are hidden below.
 */

/* ================================================================ *
 * TOKENS
 * ================================================================ */
html[data-look="stage"] {
  --s-canvas: var(--dk-b-f3f2ed, #F3F2ED);
  --s-shell: var(--dk-b-efede7, #EFEDE7);
  --s-card: var(--dk-paper, #FFFFFF);
  --s-ink: var(--dk-ink, #1F1F21);
  --s-ink-2: var(--dk-t-636366, #636366);
  --s-peri: #8799C3;
  --s-peri-deep: #4C5F92;
  --s-peri-soft: rgba(135, 153, 195, .16);
  --s-line: var(--dk-l-1f1f21a10, rgba(31, 31, 33, .10));
  --s-hair: var(--dk-l-1f1f21a8, rgba(31, 31, 33, .08));
  --s-shadow: 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05);
  --s-pop-shadow: 0 2px 6px rgba(31, 31, 33, .06), 0 12px 32px rgba(31, 31, 33, .12);
  --s-ease: cubic-bezier(.2, .7, .2, 1);

  --v-font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: var(--v-font);
  --font-serif: var(--v-font);
  --sans: var(--v-font);
  --serif: var(--v-font);
  --w-semibold: 500;
  --w-strong: 500;
  --fw-strong: 500;

  --pearl: var(--dk-paper, #FFFFFF);
  --alabaster: var(--s-canvas);
  --ink-900: var(--s-ink);

  --bg: var(--s-canvas);
  --side: var(--s-canvas);
  --card: var(--s-card);
  --tile: var(--s-card);
  --line: var(--s-hair);
  --line-2: var(--s-line);
  --line-side: transparent;
  --hover-side: var(--dk-b-1f1f21a5, rgba(31, 31, 33, .05));
  --hover-bg: var(--dk-b-1f1f21a5, rgba(31, 31, 33, .05));
  --hover-tile: var(--dk-b-1f1f21a4, rgba(31, 31, 33, .04));
  --hover-card: var(--dk-b-1f1f21a3, rgba(31, 31, 33, .03));
  --soft: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --soft-hover: var(--dk-b-1f1f21a10, rgba(31, 31, 33, .10));
  --dashed: var(--dk-l-1f1f21a20, rgba(31, 31, 33, .20));
  --dashed-hover: var(--dk-l-1f1f21a36, rgba(31, 31, 33, .36));
  --fill-faint: var(--dk-b-1f1f21a3, rgba(31, 31, 33, .03));
  --fill-faint-hover: var(--dk-b-1f1f21a5, rgba(31, 31, 33, .05));

  --ink: var(--s-ink);
  --ink-strong: var(--s-ink);
  --muted: var(--s-ink-2);
  --faint: var(--dk-t-1f1f21a52, rgba(31, 31, 33, .52));
  --accent: var(--s-peri-deep);
  --accent-soft: var(--s-peri-soft);
  --positive: #3A7350;
  --positive-soft: var(--dk-b-e4f0e8, #E4F0E8);
  --button: var(--s-peri);
  --mist: var(--dk-b-1f1f21a12, rgba(31, 31, 33, .12));
  --twilight: var(--s-ink);

  --blue: var(--s-peri-deep);
  --blue-line: var(--s-peri);
  --blue-soft: var(--s-peri-soft);
  --pill: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --tile-line: var(--s-hair);
  --tile-bg: var(--s-card);

  --st-busy: #4A4A4E;   --st-busy-bg: var(--dk-b-eeedea, #EEEDEA); --st-busy-dot: #8B8B8F;
  --st-attn: #8A5A12;   --st-attn-bg: var(--dk-b-fbf1de, #FBF1DE); --st-attn-dot: #D69A2D;
  --st-done: #2F7048;   --st-done-bg: var(--dk-b-e6f3ea, #E6F3EA); --st-done-dot: #4A9B66;
  --st-fail: #9A3B33;   --st-fail-bg: var(--dk-b-fae9e6, #FAE9E6); --st-fail-dot: #C45A50;
  --st-idle: #6B6B6E;   --st-idle-bg: var(--dk-b-efeeeb, #EFEEEB); --st-idle-dot: #A8A8AB;
  --st-review: #4A5C8A; --st-review-bg: var(--dk-b-e9edf7, #E9EDF7); --st-review-dot: #8799C3;

  --shadow: var(--s-shadow);
  --ease: var(--s-ease);
  --ht-dot: var(--dk-b-1f1f21a50, rgba(31, 31, 33, .5));
  --ht-hi: #8799C3;
}

/* ================================================================ *
 * BASE
 * ================================================================ */
html[data-look="stage"] body { background: var(--s-canvas); color: var(--s-ink); font-family: var(--v-font); font-weight: 400; }
html[data-look="stage"] :focus-visible { outline: 2px solid var(--s-peri); outline-offset: 3px; }
html[data-look="stage"] ::selection { background: var(--s-peri-soft); }
html[data-look="stage"] * { scrollbar-color: var(--dk-l-1f1f21a14, rgba(31, 31, 33, .14)) transparent; }
html[data-look="stage"] ::-webkit-scrollbar-thumb { background-color: var(--dk-b-1f1f21a14, rgba(31, 31, 33, .14)); }

/* Artwork off: Classic's scenic slots and the Volare halftone. */
html[data-look="stage"] .shell > .atmos-slot--hero,
html[data-look="stage"] .atmos-slot--side,
html[data-look="stage"] .shell > .atmos-halftone,
html[data-look="stage"] canvas.halftone,
html[data-look="stage"] .logo-mask,
html[data-look="stage"] .lockup-mask { display: none !important; }
html[data-look="stage"] .main { background: none; }

/* Type: Inter 400/500 only. */
html[data-look="stage"] :is(h1, h2, h3, h4, strong, b, th, .btn, .pill, .fpill, .stat strong, .eyebrow, .t-eyebrow, .pop-type, .card-title, .page-title, .hero h1, .nav-item.is-active) { font-weight: 500; }
html[data-look="stage"] .hero h1,
html[data-look="stage"] body.app .page-head h1,
html[data-look="stage"] body.app .page-head .page-title,
html[data-look="stage"] body.app .hero--brand h1,
html[data-look="stage"] .page-title,
html[data-look="stage"] body.app .page-head--ws .ws-title-row h1 { font-weight: 500; letter-spacing: -.02em; color: var(--s-ink); }
html[data-look="stage"] .card-title,
html[data-look="stage"] .set-head-text h2,
html[data-look="stage"] .assistant-title,
html[data-look="stage"] .mem-title,
html[data-look="stage"] .modal h2,
html[data-look="stage"] .empty-title,
html[data-look="stage"] .current-info h3,
html[data-look="stage"] .set-pane-title,
html[data-look="stage"] .vbody h3,
html[data-look="stage"] .rv-title { font-weight: 500; letter-spacing: -.01em; color: var(--s-ink); }
html[data-look="stage"] .hero-sub,
html[data-look="stage"] .page-sub { color: var(--s-ink-2); letter-spacing: 0; }
html[data-look="stage"] .eyebrow,
html[data-look="stage"] .t-eyebrow,
html[data-look="stage"] .pop-type { font-weight: 500; letter-spacing: 0; color: var(--s-ink-2); }
html[data-look="stage"] .gs-head,
html[data-look="stage"] .menu-label,
html[data-look="stage"] .menu-group,
html[data-look="stage"] .cur-facts dt,
html[data-look="stage"] .tline-flag { font-weight: 500; letter-spacing: .04em; }
html[data-look="stage"] .stat strong { font-weight: 500; letter-spacing: -.02em; }
html[data-look="stage"] .link { color: var(--s-ink); }
html[data-look="stage"] .link:hover { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
html[data-look="stage"] .field-label,
html[data-look="stage"] .select > .i { color: var(--s-ink); }
html[data-look="stage"] .attn,
html[data-look="stage"] .head-note,
html[data-look="stage"] .sw-name { color: var(--s-ink-2); }

/* ================================================================ *
 * SOFT — surfaces
 * ================================================================ */
html[data-look="stage"] .card,
html[data-look="stage"] .vcard {
  background: var(--s-card); border: 0; border-radius: 18px;
  box-shadow: var(--s-shadow);
}
html[data-look="stage"] .card { padding: 20px; }
html[data-look="stage"] .card.set-card { padding: 0; }
html[data-look="stage"] .card.set-nav { padding: 8px; }
html[data-look="stage"] .card.assistant { padding: 16px 20px; }
html[data-look="stage"] a.vcard:hover,
html[data-look="stage"] .vcard:has(a:hover) { box-shadow: 0 1px 2px rgba(31, 31, 33, .05), 0 8px 20px rgba(31, 31, 33, .08); }
html[data-look="stage"] .set-rule { background: var(--s-hair); }
html[data-look="stage"] .set-head-text p { color: var(--s-ink-2); }
html[data-look="stage"] .note,
html[data-look="stage"] .blocker,
html[data-look="stage"] .page-banner,
html[data-look="stage"] .look-opt { border-radius: 14px; }
html[data-look="stage"] .note { background: var(--dk-b-1f1f21a4_5, rgba(31, 31, 33, .045)); }
html[data-look="stage"] .note--stop { background: var(--st-fail-bg); }
html[data-look="stage"] .note--ok { background: var(--st-done-bg); }
html[data-look="stage"] .note--warn,
html[data-look="stage"] .blocker,
html[data-look="stage"] .page-banner { background: var(--s-shell); color: var(--dk-t-5f5e5a, #5F5E5A); }
html[data-look="stage"] .look-opt { background: var(--s-card); border-color: transparent; box-shadow: inset 0 0 0 1px var(--s-line); }
html[data-look="stage"] .look-opt.is-on { background: var(--s-peri-soft); box-shadow: inset 0 0 0 2px var(--s-peri); }
html[data-look="stage"] .stat-icon,
html[data-look="stage"] .int-icon,
html[data-look="stage"] .new-plus,
html[data-look="stage"] .learned-icon,
html[data-look="stage"] .mono-avatar,
html[data-look="stage"] .tagpill { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); color: var(--s-ink); }
html[data-look="stage"] .int-icon--brand { background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-hair); }
html[data-look="stage"] .badge { background: var(--s-ink); color: var(--dk-oninv, #fff); }
html[data-look="stage"] .empty-body,
html[data-look="stage"] .card-empty-body { color: var(--s-ink); }
html[data-look="stage"] .sep { background: var(--s-line); }
html[data-look="stage"] .bullet { background: var(--s-ink); }
html[data-look="stage"] .rec-icon,
html[data-look="stage"] .perks .i,
html[data-look="stage"] .pref-head .i,
html[data-look="stage"] .frame-icon { color: var(--s-ink); }
html[data-look="stage"] .split-right { border-left-color: var(--s-hair); }
html[data-look="stage"] .skel { background-image: linear-gradient(90deg, var(--dk-b-1f1f21a5, rgba(31,31,33,.05)) 0%, var(--dk-b-1f1f21a10, rgba(31,31,33,.10)) 50%, var(--dk-b-1f1f21a5, rgba(31,31,33,.05)) 100%); }
html[data-look="stage"] input[type="checkbox"],
html[data-look="stage"] input[type="radio"] { accent-color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }

/* Look picker swatch for this look. */
html[data-look] .look-mini--stage { background: var(--dk-b-f3f2ed, #F3F2ED); }
html[data-look] .look-mini--stage b { color: var(--dk-ink, #1F1F21); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-weight: 500; }
html[data-look] .look-mini--stage i { background: #8799C3; }

/* Dialogs, popovers, toasts. */
html[data-look="stage"] .modal { background: var(--s-card); border-radius: 20px; box-shadow: var(--s-pop-shadow); }
html[data-look="stage"] .modal-scrim,
html[data-look="stage"] .sheet-scrim { background: var(--dk-s-1f1f21a38, rgba(31, 31, 33, .38)); }
html[data-look="stage"] .popover,
html[data-look="stage"] .gsearch-panel,
html[data-look="stage"] .menu { background: var(--s-card); border: 0; border-radius: 16px; box-shadow: var(--s-pop-shadow); }
html[data-look="stage"] .pop-row:hover,
html[data-look="stage"] .menu-row:hover,
html[data-look="stage"] .menu-row:focus-visible,
html[data-look="stage"] .gs-row:hover,
html[data-look="stage"] .gs-row:focus-visible { background: var(--dk-b-1f1f21a5, rgba(31, 31, 33, .05)); }
html[data-look="stage"] .menu-row--state.is-on { background: var(--s-peri-soft); box-shadow: none; }
html[data-look="stage"] .menu-row--danger { color: var(--dk-tx-st-fail, var(--st-fail)); }
html[data-look="stage"] .toast { background: var(--s-ink); color: var(--dk-oninv, #fff); border-radius: 14px; box-shadow: var(--s-pop-shadow); }
html[data-look="stage"] .toast-act { color: var(--s-peri); }
html[data-look="stage"] .tip { background: var(--s-ink); color: var(--dk-oninv, #fff); border-radius: 8px; }
html[data-look="stage"] .skip-link { background: var(--s-card); box-shadow: var(--s-shadow); border-radius: 12px; }

/* ================================================================ *
 * SOFT — sidebar panel and header
 * ================================================================ */
html[data-look="stage"] .sidebar { background: var(--s-canvas); box-shadow: none; }
html[data-look="stage"] .logo span.side-label,
html[data-look="stage"] .sheet-title { color: var(--s-ink); font-weight: 500; letter-spacing: -.01em; }
html[data-look="stage"] .logo-mark { display: inline-block; }
html[data-look="stage"] .nav-item { color: var(--s-ink-2); border-radius: 10px; }
html[data-look="stage"] .nav-item .i { color: var(--s-ink-2); }
html[data-look="stage"] .nav-item:hover { background: var(--dk-b-1f1f21a4_5, rgba(31, 31, 33, .045)); color: var(--s-ink); }
html[data-look="stage"] .nav-item.is-active { background: var(--s-card); color: var(--s-ink); box-shadow: var(--s-shadow); }
html[data-look="stage"] .nav-item.is-active .i { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
html[data-look="stage"] .side-toggle { color: var(--s-ink-2); }
html[data-look="stage"] .avatar { background: var(--s-peri-soft); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); box-shadow: none; font-weight: 500; }

/* Bell and icon-only header buttons: a bare icon, a round hover tint, no box. */
html[data-look="stage"] .icon-btn,
html[data-look="stage"] #bellBtn,
html[data-look="stage"] .topbar .btn--icon {
  background: none; border: 0; box-shadow: none; border-radius: 50%; color: var(--s-ink);
}
html[data-look="stage"] .icon-btn:hover,
html[data-look="stage"] #bellBtn:hover,
html[data-look="stage"] .topbar .btn--icon:hover { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); box-shadow: none; }
html[data-look="stage"] .bell-dot {
  position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; background: none; color: inherit;   /* the count is still read aloud; the dot below is the picture of it */
}
html[data-look="stage"] #bellBtn:has(.bell-dot:not([hidden]))::after {
  content: ""; position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--s-peri); box-shadow: 0 0 0 2px var(--s-canvas);
}

/* ================================================================ *
 * SOFT — buttons: pills
 * ================================================================ */
html[data-look="stage"] .btn {
  border-radius: 999px; font-weight: 500; letter-spacing: 0; box-shadow: none;
}
html[data-look="stage"] .btn--primary,
html[data-look="stage"] .btn--create { background: var(--s-ink); color: var(--dk-oninv, #fff); box-shadow: none; }
html[data-look="stage"] .btn--primary:hover,
html[data-look="stage"] .btn--primary:active,
html[data-look="stage"] .btn--create:hover,
html[data-look="stage"] .btn--create:active { background: #38383B; color: #fff; box-shadow: none; }
html[data-look="stage"] .btn--primary[disabled],
html[data-look="stage"] .btn--create[disabled] { background: var(--s-ink); color: var(--dk-oninv, #fff); }
/* secondary: charcoal pill */
html[data-look="stage"] .btn--outline,
html[data-look="stage"] .btn--light { background: var(--s-ink); color: var(--dk-oninv, #fff); box-shadow: none; }
html[data-look="stage"] .btn--outline:hover,
html[data-look="stage"] .btn--light:hover,
html[data-look="stage"] .btn--outline:active,
html[data-look="stage"] .btn--light:active { background: #38383B; box-shadow: none; }
html[data-look="stage"] .btn--outline[disabled],
html[data-look="stage"] .btn--light[disabled] { background: var(--s-ink); color: var(--dk-oninv, #fff); box-shadow: none; }
html[data-look="stage"] .btn--icon { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); color: var(--s-ink); box-shadow: none; border-radius: 50%; }
html[data-look="stage"] .btn--icon:hover { background: var(--dk-b-1f1f21a10, rgba(31, 31, 33, .10)); box-shadow: none; }
html[data-look="stage"] .btn--ghost { background: transparent; color: var(--s-ink); }
html[data-look="stage"] .btn--ghost:hover { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); }
html[data-look="stage"] .btn--ghost:active { background: var(--dk-b-1f1f21a10, rgba(31, 31, 33, .10)); }
html[data-look="stage"] .btn--danger { background: var(--st-fail); color: #fff; }
html[data-look="stage"] .btn--danger:hover { background: #853029; }
html[data-look="stage"] .btn.be-sm { border-radius: 999px; }
/* The drop zone is a soft tinted well, not a halftone. */
html[data-look="stage"] .drop { background: var(--s-peri-soft); border-radius: 18px; outline: 1px dashed rgba(135, 153, 195, .7); outline-offset: -1px; }
html[data-look="stage"] .drop:hover { background: rgba(135, 153, 195, .22); }
html[data-look="stage"] .drop.is-over { outline: 2px solid var(--s-peri); background: rgba(135, 153, 195, .26); }
html[data-look="stage"] .drop .drop-text { background: var(--s-card); box-shadow: var(--s-shadow); border-radius: 14px; }
html[data-look="stage"] .drop .new-plus { background: var(--s-peri-soft); }
html[data-look="stage"] .drop .btn--light { background: var(--s-ink); color: var(--dk-oninv, #fff); }

/* ================================================================ *
 * SOFT — inputs: white, 1px line, 10px radius, periwinkle ring
 * ================================================================ */
html[data-look="stage"] .input,
html[data-look="stage"] textarea.input,
html[data-look="stage"] .select select,
html[data-look="stage"] .search {
  background: var(--dk-paper, #fff); color: var(--s-ink); border: 0; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--s-line);
}
html[data-look="stage"] .input:hover,
html[data-look="stage"] .select select:hover,
html[data-look="stage"] .search:hover { box-shadow: inset 0 0 0 1px rgba(31, 31, 33, .20); }
html[data-look="stage"] .input:focus,
html[data-look="stage"] .input:focus-visible,
html[data-look="stage"] .select select:focus-visible,
html[data-look="stage"] .search:focus-within { box-shadow: inset 0 0 0 1px var(--s-peri), 0 0 0 3px rgba(135, 153, 195, .28); }
html[data-look="stage"] .input:disabled,
html[data-look="stage"] .select select:disabled { background: var(--dk-b-1f1f21a3, rgba(31, 31, 33, .03)); box-shadow: inset 0 0 0 1px var(--s-hair); }
html[data-look="stage"] .input[aria-invalid="true"],
html[data-look="stage"] .select select[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--st-fail); }
html[data-look="stage"] .search--videos { background: var(--dk-paper, #fff); }

/* Segmented controls: a grey pill track with a white thumb. */
html[data-look="stage"] .seg { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); box-shadow: none; border-radius: 999px; padding: 3px; }
html[data-look="stage"] .seg-opt { border-radius: 999px; color: var(--s-ink-2); border-color: transparent; }
html[data-look="stage"] .seg-opt.is-on { background: var(--dk-paper, #fff); color: var(--s-ink); box-shadow: 0 1px 2px rgba(31, 31, 33, .10); }
html[data-look="stage"] .frames .frame,
html[data-look="stage"] .style-opt,
html[data-look="stage"] .be-cap { background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-hair); border-radius: 14px; }
html[data-look="stage"] .style-opt:hover,
html[data-look="stage"] .be-cap:hover { background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-line); }
html[data-look="stage"] .frames .frame.is-on,
html[data-look="stage"] .style-opt.is-on,
html[data-look="stage"] .be-cap.is-on { background: var(--s-peri-soft); box-shadow: inset 0 0 0 1px var(--s-peri); }
html[data-look="stage"] .be-switch input:checked { background: var(--s-peri); }
html[data-look="stage"] .be-swatch.is-on .chipdot { box-shadow: 0 0 0 3px var(--dk-paper, #fff), 0 0 0 5px var(--s-peri); }
html[data-look="stage"] .slider-track::before { background: var(--s-line); }
html[data-look="stage"] .slider-fill { background: var(--s-peri); }
html[data-look="stage"] .stop { border-color: var(--s-line); background: var(--dk-paper, #fff); }
html[data-look="stage"] .stop.is-on { background: var(--s-peri); border-color: var(--s-peri); box-shadow: 0 0 0 3px var(--dk-paper, #fff), 0 0 0 4.5px var(--s-peri); }
html[data-look="stage"] .be-ced { background: var(--s-card); border-color: transparent; box-shadow: var(--s-pop-shadow); }
html[data-look="stage"] .be-logo { background: var(--s-canvas); box-shadow: inset 0 0 0 1px var(--s-hair); }
html[data-look="stage"] .be-logo--dark { background: var(--s-ink); }
html[data-look="stage"] .be-logo-word { color: var(--s-ink); }
html[data-look="stage"] .be-logo--dark .be-logo-word { color: #fff; }
html[data-look="stage"] .set-nav-item { border-radius: 10px; color: var(--s-ink-2); }
html[data-look="stage"] .set-nav-item .i { color: var(--s-ink-2); }
html[data-look="stage"] .set-nav-item:hover { background: var(--dk-b-1f1f21a5, rgba(31, 31, 33, .05)); }
html[data-look="stage"] .set-nav-item.is-active { background: var(--s-peri-soft); color: var(--s-ink); }

/* Progress. */
html[data-look="stage"] .uprog-bar,
html[data-look="stage"] .pbar,
html[data-look="stage"] .meter { background: var(--dk-b-1f1f21a8, rgba(31, 31, 33, .08)); }
html[data-look="stage"] .uprog-bar span,
html[data-look="stage"] .pbar i,
html[data-look="stage"] .meter i { background: var(--s-ink); }
html[data-look="stage"] .step::before { background: var(--dk-b-1f1f21a12, rgba(31, 31, 33, .12)); }
html[data-look="stage"] .step.done::before,
html[data-look="stage"] .step.active::before,
html[data-look="stage"] .ws-steps .step.done::before,
html[data-look="stage"] .ws-steps .step.active::before { background: var(--s-ink); }
html[data-look="stage"] .dot,
html[data-look="stage"] .vstep-dot,
html[data-look="stage"] .fstep-n { background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--s-line); color: var(--s-ink-2); }
html[data-look="stage"] .step.done .dot,
html[data-look="stage"] .ws-steps .step.done .dot,
html[data-look="stage"] .vstep.is-done .vstep-dot,
html[data-look="stage"] .fstep.is-done .fstep-n { background: var(--s-ink); color: var(--dk-oninv, #fff); box-shadow: none; }
html[data-look="stage"] .step.active .dot,
html[data-look="stage"] .vstep.is-active .vstep-dot,
html[data-look="stage"] .fstep.is-on .fstep-n { background: var(--s-peri); color: var(--s-ink); box-shadow: 0 0 0 4px rgba(135, 153, 195, .28); }
html[data-look="stage"] .step.stopped .dot { background: var(--st-fail-bg); box-shadow: none; color: var(--dk-tx-st-fail, var(--st-fail)); }
html[data-look="stage"] .vstep.is-waiting .vstep-dot { background: var(--st-attn-bg); box-shadow: inset 0 0 0 1.5px var(--st-attn-dot); }
html[data-look="stage"] .vstep + .vstep::before,
html[data-look="stage"] .fstep + .fstep::before { background: var(--dk-b-1f1f21a12, rgba(31, 31, 33, .12)); }
html[data-look="stage"] .vstep.is-done + .vstep::before,
html[data-look="stage"] .fstep.is-done + .fstep::before { background: var(--s-ink); }
html[data-look="stage"] .step { color: var(--s-ink-2); }

/* Charts. */
html[data-look="stage"] .gridline { stroke: var(--dk-t-1f1f21a6, rgba(31, 31, 33, .06)); }
html[data-look="stage"] .gridline--base { stroke: var(--dk-t-1f1f21a12, rgba(31, 31, 33, .12)); }
html[data-look="stage"] .chart .bar,
html[data-look="stage"] .spark-line { fill: var(--s-peri); }
html[data-look="stage"] .spark-line { fill: none; stroke: var(--s-peri); }
html[data-look="stage"] .spark-fill { fill: var(--s-peri); opacity: .16; }
html[data-look="stage"] .chart .bar:hover { fill: var(--s-ink); }
html[data-look="stage"] .axis { fill: var(--s-ink-2); font-family: var(--v-font); }

/* ================================================================ *
 * SHELL — lists and tables outside Review
 * A faint grey shell, white row tiles.
 * ================================================================ */
html[data-look="stage"] :is(.attn-list, .projects:not(.projects--empty), .int-list, .itable, .fol-list, .mem-list, .mn-list, .reedit-list, .idea-list, .asset-list, .cp-list, .plan-list, .ask-list) {
  background: var(--s-shell); border-radius: 16px; padding: 8px; gap: 6px;
}
html[data-look="stage"] :is(.attn-list, .int-list, .fol-list, .mem-list, .mn-list, .reedit-list, .idea-list, .asset-list, .cp-list, .plan-list) { display: grid; }
html[data-look="stage"] :is(.attn, .itable-row, .project, .fol-row, .mn-row, .reedit-row, .idea-row, .asset-row, .yt-row, .ref-row) {
  background: var(--s-card); border: 0; border-radius: 10px; box-shadow: none;
}
html[data-look="stage"] .itable-head { background: none; border: 0; box-shadow: none; color: var(--s-ink-2); font-weight: 500; }
html[data-look="stage"] :is(.attn, .project, .itable-row):hover { background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31, 31, 33, .06); }
html[data-look="stage"] .ref { background: var(--s-card); border-radius: 10px; box-shadow: none; }
html[data-look="stage"] .be-refs .ref { background: var(--s-card); border: 0; border-radius: 10px; }

/* Status chips: 11px, a 6px coloured dot, a tinted fill and a matching 1px border. */
html[data-look="stage"] .pill {
  height: 24px; padding: 0 10px 0 8px; gap: 6px; border-radius: 999px;
  font: 500 12px/1 var(--v-font); letter-spacing: 0;
  border: 1px solid transparent;
}
html[data-look="stage"] .pill i { width: 6px; height: 6px; background: currentColor; }
html[data-look="stage"] .pill--review,
html[data-look="stage"] .pill--review2 { background: var(--st-attn-bg); color: var(--dk-tx-st-attn, var(--st-attn)); border-color: color-mix(in srgb, var(--st-attn-dot) 45%, transparent); }
html[data-look="stage"] .pill--editing { background: var(--st-busy-bg); color: var(--dk-tx-st-busy, var(--st-busy)); border-color: color-mix(in srgb, var(--st-busy-dot) 40%, transparent); }
html[data-look="stage"] .pill--done { background: var(--st-done-bg); color: var(--dk-tx-st-done, var(--st-done)); border-color: color-mix(in srgb, var(--st-done-dot) 45%, transparent); }
html[data-look="stage"] .pill--draft,
html[data-look="stage"] .pill--unknown { background: var(--st-idle-bg); color: var(--dk-tx-st-idle, var(--st-idle)); border-color: color-mix(in srgb, var(--st-idle-dot) 45%, transparent); }
html[data-look="stage"] .pill--failed { background: var(--st-fail-bg); color: var(--dk-tx-st-fail, var(--st-fail)); border-color: color-mix(in srgb, var(--st-fail-dot) 45%, transparent); }

/* Filter tabs: pills with counts, the active one black. */
html[data-look="stage"] .fpill {
  height: 36px; padding: 0 14px; border-radius: 999px; border: 0;
  background: transparent; box-shadow: none; color: var(--s-ink-2); font-weight: 500;
}
html[data-look="stage"] .fpill:hover { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); box-shadow: none; }
html[data-look="stage"] .fpill.is-active { background: var(--s-ink); color: var(--dk-oninv, #fff); box-shadow: none; }
html[data-look="stage"] .fpill-count { color: var(--s-ink-2); font-size: 12px; }
html[data-look="stage"] .fpill.is-active .fpill-count { color: rgba(255, 255, 255, .72); }
html[data-look="stage"] .filter-btn { background: var(--dk-paper, #fff); border: 0; box-shadow: inset 0 0 0 1px var(--s-line); border-radius: 50%; }

/* Thumbnails and players keep their art; frames soften. */
html[data-look="stage"] .vthumb--placeholder,
html[data-look="stage"] .thumb--placeholder { background: var(--dk-b-1f1f21a5, rgba(31, 31, 33, .05)); }
html[data-look="stage"] .thumb--empty { background: var(--dk-b-1f1f21a3, rgba(31, 31, 33, .03)); border-color: var(--s-line); }
html[data-look="stage"] .duration,
html[data-look="stage"] .vthumb .duration { background: var(--dk-b-1f1f21a72, rgba(31, 31, 33, .72)); color: #fff; }
html[data-look="stage"] .card.player { background: var(--s-card); padding: 8px; }
html[data-look="stage"] .player-stage { border-radius: 12px; }

/* ================================================================ *
 * HAIRLINE — Review workspace only
 * Hairline rows, tabular timestamps, black-thumb segmented control.
 * ================================================================ */
html[data-look="stage"] .tline { border-radius: 0; border-bottom: 1px solid var(--s-hair); }
html[data-look="stage"] .tline:last-child { border-bottom: 0; }
html[data-look="stage"] .tline-main { border-radius: 0; color: var(--s-ink-2); }
html[data-look="stage"] .tline-main:hover { background: var(--dk-b-1f1f21a3_5, rgba(31, 31, 33, .035)); }
html[data-look="stage"] .tline.is-now .tline-main,
html[data-look="stage"] .tline.is-sel .tline-main { color: var(--s-ink); }
html[data-look="stage"] .tline.is-sel { background: var(--s-peri-soft); box-shadow: inset 2px 0 0 var(--s-peri); border-radius: 0; }
html[data-look="stage"] .tline.is-cut .tline-tx { color: var(--s-ink-2); }
html[data-look="stage"] .tline-tc,
html[data-look="stage"] .rv-chap-at,
html[data-look="stage"] .rv-when { font-variant-numeric: tabular-nums; }
html[data-look="stage"] .tline-act { background: none; box-shadow: inset 0 0 0 1px var(--s-line); border-radius: 999px; color: var(--s-ink); }
html[data-look="stage"] .tline-act:hover { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); }
html[data-look="stage"] .tnote-state { border-radius: 999px; }
html[data-look="stage"] .rv-composer { border-top-color: var(--s-hair); }
html[data-look="stage"] .gitem { border-radius: 0; background: none; border: 0; border-bottom: 1px solid var(--s-hair); }
html[data-look="stage"] .gitem:hover { background: var(--dk-b-1f1f21a3_5, rgba(31, 31, 33, .035)); }
html[data-look="stage"] .gitem.is-sel { background: var(--s-peri-soft); }
html[data-look="stage"] .rv-g + .rv-g { border-top-color: var(--s-hair); }
html[data-look="stage"] .rv-chap { border-radius: 0; border-bottom: 1px solid var(--s-hair); }
html[data-look="stage"] .rv-chap:hover { background: var(--dk-b-1f1f21a3_5, rgba(31, 31, 33, .035)); }
/* Review's segmented control: a black thumb on a hairline track. */
html[data-look="stage"] .rv-group .seg,
html[data-look="stage"] .rv-tabs .seg,
html[data-look="stage"] .tabs.seg { background: none; box-shadow: inset 0 0 0 1px var(--s-line); }
html[data-look="stage"] .rv-group .seg-opt.is-on,
html[data-look="stage"] .rv-tabs .seg-opt.is-on,
html[data-look="stage"] .tabs.seg .seg-opt.is-on { background: var(--s-ink); color: var(--dk-oninv, #fff); box-shadow: none; }
html[data-look="stage"] .player-stage .ba { background: var(--dk-b-1f1f21a72, rgba(31, 31, 33, .72)); border-radius: 999px; }
html[data-look="stage"] .ba button { border-radius: 999px; color: rgba(255, 255, 255, .86); }
html[data-look="stage"] .ba button[aria-pressed="true"] { background: var(--dk-paper, #fff); color: var(--s-ink); }
html[data-look="stage"] .ba button:focus-visible { outline: 2px solid var(--dk-paper, #fff); outline-offset: 2px; }
html[data-look="stage"] .rv-applying { background: var(--dk-b-1f1f21a38, rgba(31, 31, 33, .38)); }
html[data-look="stage"] .rv-applying-card { background: var(--dk-paper, #fff); border-radius: 16px; }

/* Integration rows are tiles in the shell, not hairline rows. */
html[data-look="stage"] .int-list > * { background: var(--s-card); border: 0; border-radius: 10px; padding: 12px; }
html[data-look="stage"] .int-list > * + * { border-top: 0; }

/* ================================================================ *
 * COLOUR RULES — amber is reserved for "Needs your answer" (pills,
 * .attn rows, .vstep.is-waiting). Demo badges, banners, sample-data
 * chips and advisory notes are neutral grey: #EFEDE7 fill, #5F5E5A text.
 * ================================================================ */
html[data-look="stage"] .note--warn .note-icon,
html[data-look="stage"] .blocker-icon,
html[data-look="stage"] .page-banner .i,
html[data-look="stage"] .cur-note--stale,
html[data-look="stage"] .be-contrast.is-warn,
html[data-look="stage"] .be-remove-why,
html[data-look="stage"] .plan-practice,
html[data-look="stage"] .pkg-practice,
html[data-look="stage"] .sw-status.is-dirty { color: var(--dk-t-5f5e5a, #5F5E5A); }
html[data-look="stage"] .plan-badge--check { background: var(--dk-b-efede7, #EFEDE7); color: var(--dk-t-5f5e5a, #5F5E5A); }
html[data-look="stage"] .pk-fit,
html[data-look="stage"] .rec-check.is-advice,
html[data-look="stage"] .rec-note,
html[data-look="stage"] .pkg-flag { border-left-color: var(--dk-l-c9c6bc, #C9C6BC); }
html[data-look="stage"] .readview .rv-notice[data-tone="warn"] { border-color: var(--dk-l-c9c6bc, #C9C6BC); }

/* Text on the periwinkle fills (Ask Volare button, "yours" tag) is ink, 5.8:1; white on periwinkle was 2.9:1. */
html[data-look="stage"] .ask-fab,
html[data-look="stage"] .ask-msg--me,
html[data-look="stage"] .pk-tag { color: var(--s-ink); }

/* ================================================================ *
 * POLISH PASS (2026-10-08)
 * ================================================================ */

/* Home cards: the lists inside a white card are plain rows with a hover
   tint, not a grey shell inside a white card (the shell is for full-page
   lists such as Videos). The rows bleed into the card's padding so the
   hover tint lines up with the card edge. */
html[data-look="stage"] .card :is(.attn-list, .projects:not(.projects--empty)) {
  background: none; border-radius: 0; padding: 0; gap: 2px; margin-top: 4px;
}
html[data-look="stage"] .card :is(.attn, .project) {
  background: transparent; border: 0; border-radius: 10px; box-shadow: none;
  margin: 0 -8px; padding: 10px 8px;
}
html[data-look="stage"] .card :is(.attn, .project):hover { background: var(--dk-b-1f1f21a4_5, rgba(31, 31, 33, .045)); box-shadow: none; }
html[data-look="stage"] .card .project .thumb { border-radius: 8px; }

/* Brand > References: the "add" tile and the draft form read as one calm
   form, not bare inputs floating on the panel. */
html[data-look="stage"] .be-refs .ref-add {
  border: 1px dashed var(--dk-l-1f1f21a18, rgba(31, 31, 33, .18)); border-radius: 12px; background: var(--dk-b-fbfaf7, #FBFAF7);
  color: var(--s-ink); transition: background .16s var(--s-ease), border-color .16s var(--s-ease);
}
html[data-look="stage"] .be-refs .ref-add:hover { background: var(--dk-b-f6f5f0, #F6F5F0); border-color: var(--dk-l-1f1f21a30, rgba(31, 31, 33, .3)); }
html[data-look="stage"] .be-refs .ref-add .add-dot {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  background: var(--s-ink); color: var(--dk-oninv, #fff); font-size: 18px; line-height: 1;
}
html[data-look="stage"] .be-refs .ref-add small { color: var(--s-ink-2); }

html[data-look="stage"] .be-refs .be-ref.is-draft {
  grid-column: span 2; display: grid; gap: 12px; align-content: start;
  padding: 16px 16px 14px; border: 0; border-radius: 12px; background: var(--dk-b-f7f6f2, #F7F6F2);
}
html[data-look="stage"] .be-refs .be-ref.is-draft .sr-only {
  position: static; width: auto; height: auto; margin: 0 0 -6px; padding: 0; clip: auto; overflow: visible; white-space: normal;
  font: 500 12px/1.2 var(--v-font); color: var(--s-ink-2);
}
html[data-look="stage"] .be-refs .be-ref.is-draft :is(textarea.be-ref-title, input.be-ref-url, .be-tag-in) {
  box-sizing: border-box; width: 100% !important; margin: 0; min-height: 36px; height: auto; padding: 8px 12px;
  background: var(--dk-paper, #fff); border: 1px solid var(--s-line); border-radius: 10px;
  font: 400 13px/1.4 var(--v-font) !important; color: var(--s-ink) !important;
}
html[data-look="stage"] .be-refs .be-ref.is-draft :is(textarea.be-ref-title, input.be-ref-url, .be-tag-in)::placeholder { color: var(--dk-t-9a9a9d, #9A9A9D); }
html[data-look="stage"] .be-refs .be-ref.is-draft :is(textarea.be-ref-title, input.be-ref-url, .be-tag-in):focus {
  outline: none; border-color: var(--s-peri); box-shadow: 0 0 0 3px rgba(135, 153, 195, .25); background: var(--dk-paper, #fff);
}
html[data-look="stage"] .be-refs .be-ref.is-draft .be-ref-link { display: block; }
html[data-look="stage"] .be-refs .be-ref.is-draft .be-tags { display: grid; gap: 8px; margin: 0; }
html[data-look="stage"] .be-refs .be-ref.is-draft .be-tags::before {
  content: "What you like about it"; font: 500 12px/1.2 var(--v-font); color: var(--s-ink-2);
}
html[data-look="stage"] .be-refs .be-ref.is-draft .be-tags::after {
  content: "Press Enter after each note."; font: 400 12px/1.2 var(--v-font); color: var(--dk-t-9a9a9d, #9A9A9D);
}
html[data-look="stage"] .be-refs .be-ref.is-draft .be-tag-in::placeholder { color: var(--dk-t-9a9a9d, #9A9A9D); }
html[data-look="stage"] .be-refs .be-ref.is-draft .be-ref-x { top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 999px; }
html[data-look="stage"] .be-refs .be-ref.is-draft .be-ref-x:hover { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); }

/* ================================================================ *
 * BRAND POLISH (2026-10-08)
 * ================================================================ */

/* One black element per screen: the active brand tab keeps its black pill; the active sidebar item is the white tile only. */
html[data-look="stage"] .sidebar .nav-item.is-active,
html[data-look="stage"] .nav-sheet .nav-item.is-active { background: var(--s-card); color: var(--s-ink); box-shadow: var(--s-shadow); }

/* One header per tab: 18px/500 title, one muted line, the tab's own pill on the right. */
html[data-look="stage"] .brand-tabhead { padding: 4px 4px 0; }
html[data-look="stage"] .brand-tabhead-title { font: 500 18px/1.3 var(--v-font); letter-spacing: -.01em; color: var(--s-ink); }
html[data-look="stage"] .brand-tabhead-sub { font: 400 14px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .brand-tabhead-act .btn { height: 40px; padding: 0 18px; font: 500 14px/1 var(--v-font); }
html[data-look="stage"] .brand-tabhead-act .btn--ghost { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); color: var(--s-ink); }
html[data-look="stage"] .brand-tabhead-act .btn--ghost:hover { background: var(--dk-b-1f1f21a10, rgba(31, 31, 33, .10)); }
html[data-look="stage"] .brand-tabhead-link { font: 500 14px/1 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .brand-tabhead-link:hover { color: var(--s-ink); }

/* Inside a Brand card the small controls are quiet grey pills, so the tab's own pill stays the one charcoal button. */
html[data-look="stage"] .brand-panel .card .btn--light,
html[data-look="stage"] .brand-panel .card .btn--outline { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); color: var(--s-ink); }
html[data-look="stage"] .brand-panel .card .btn--light:hover,
html[data-look="stage"] .brand-panel .card .btn--outline:hover { background: var(--dk-b-1f1f21a10, rgba(31, 31, 33, .10)); color: var(--s-ink); }
html[data-look="stage"] .brand-panel .card .btn.be-sm { height: 28px; padding: 0 12px; font: 500 12px/1 var(--v-font); }

/* Look: three cards, each with a quiet "Saves as you make it". */
html[data-look="stage"] .brand-panels .be-look > .card.be-card { padding: 20px 24px 24px; gap: 20px; border-radius: 18px; }
html[data-look="stage"] .be-card .card-title { font: 500 16px/1.3 var(--v-font); }
html[data-look="stage"] .be-saves { font: 400 12px/1.3 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .be-card .tile-title { font: 500 14px/1.3 var(--v-font); color: var(--s-ink); }
html[data-look="stage"] .be-card > .be-roles,
html[data-look="stage"] .be-card > .be-roles + .be-sub { border-top-color: var(--s-hair); }
html[data-look="stage"] .be-logo { background: var(--dk-b-fbfaf7, #FBFAF7); box-shadow: inset 0 0 0 1px var(--s-hair); border-radius: 14px; }
html[data-look="stage"] .be-logo--dark { background: var(--s-ink); box-shadow: none; }
html[data-look="stage"] .be-logo-bg .seg-opt,
html[data-look="stage"] .be-place .seg-opt { height: 30px; padding: 0 14px; font: 400 13px/1 var(--v-font); }
html[data-look="stage"] .be-logo-bg .seg-opt.is-on,
html[data-look="stage"] .be-place .seg-opt.is-on { font-weight: 500; }
html[data-look="stage"] .sw-edit { background: var(--dk-paper, #fff); color: var(--s-ink); box-shadow: 0 1px 2px rgba(31, 31, 33, .12), 0 2px 8px rgba(31, 31, 33, .10); }
html[data-look="stage"] .be-swatch:hover .chipdot { box-shadow: inset 0 0 0 1px var(--s-line), 0 0 0 3px var(--dk-paper, #fff), 0 0 0 4px var(--s-line); }
html[data-look="stage"] .be-usage { font: 500 14px/1.4 var(--v-font); color: var(--s-ink); }
html[data-look="stage"] .be-ced { border-radius: 16px; padding: 18px; gap: 12px; width: min(29rem, calc(100vw - 1rem)); box-sizing: border-box; }
html[data-look="stage"] .be-ced-fields { grid-template-columns: auto minmax(0, 7.5rem) minmax(0, 1fr); }
html[data-look="stage"] .be-ced-fields .input { height: 40px; font: 400 14px/1 var(--v-font); }
html[data-look="stage"] .be-useas-seg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html[data-look="stage"] .be-useas-seg .seg-opt { height: 30px; padding: 0 4px; font: 400 13px/1 var(--v-font); }
html[data-look="stage"] .be-useas-seg .seg-opt.is-on { font-weight: 500; }
html[data-look="stage"] .be-contrast, html[data-look="stage"] .be-useas-said { font: 400 13px/1.45 var(--v-font); }
html[data-look="stage"] .be-ced .btn.be-sm { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); color: var(--s-ink); height: 30px; }
html[data-look="stage"] .be-ced .btn.be-sm:hover { background: var(--dk-b-1f1f21a10, rgba(31, 31, 33, .10)); }
html[data-look="stage"] .be-ced .be-ced-done { background: var(--s-ink); color: var(--dk-oninv, #fff); }
html[data-look="stage"] .be-rp { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--s-hair), var(--s-shadow); }
html[data-look="stage"] .be-pairs-title { font: 500 14px/1.3 var(--v-font); }
html[data-look="stage"] .be-rp-key dd { font: 500 14px/1.4 var(--v-font); }
html[data-look="stage"] .be-fontsel select { height: 40px; font: 400 14px/1 var(--v-font); }
html[data-look="stage"] .be-fontprev { font-size: 20px; color: var(--s-ink); }
html[data-look="stage"] .be-place-row .field-label { font: 500 13px/1 var(--v-font); color: var(--s-ink-2); }

/* Editing style: one pill control for every three-way choice, one size; the style cards carry their picture. */
html[data-look="stage"] .card.editing { padding: 20px 24px 24px; }
html[data-look="stage"] #editing .seg,
html[data-look="stage"] #editing .pace-pick { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); border: 0; box-shadow: none; border-radius: 999px; padding: 3px; max-width: 26rem; }
html[data-look="stage"] #editing .seg-opt,
html[data-look="stage"] #editing .pace-pick .seg-opt { height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none;
  font: 400 14px/1 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] #editing .seg-opt.is-on,
html[data-look="stage"] #editing .pace-pick .seg-opt.is-on { background: var(--dk-paper, #fff); color: var(--s-ink); font-weight: 500; box-shadow: 0 1px 2px rgba(31, 31, 33, .10); }
html[data-look="stage"] #editing .pref { gap: 12px; padding: 20px 0; border-top-color: var(--s-hair); }
html[data-look="stage"] #editing .pref:first-child { padding-top: 0; }
html[data-look="stage"] #editing .pref-head { font: 500 14px/1.3 var(--v-font); }
html[data-look="stage"] #editing .pace-plain { margin: 0; font: 400 13px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] #editing .slider { max-width: 26rem; padding-top: 8px; }
html[data-look="stage"] .style-opt { padding: 10px 10px 14px; gap: 4px; }
html[data-look="stage"] .style-opt-art { border-radius: 10px; }
html[data-look="stage"] .style-opt-art .so-bg { fill: #F6F5F1; }
html[data-look="stage"] .style-opt.is-on .style-opt-art .so-bg { fill: #fff; }
html[data-look="stage"] .style-opt-art .so-acc,
html[data-look="stage"] .style-opt-art .so-dot,
html[data-look="stage"] .style-opt-art .so-stroke { fill: var(--s-peri); stroke: var(--s-peri); }
html[data-look="stage"] .style-opt-art .so-acc,
html[data-look="stage"] .style-opt-art .so-dot { stroke: none; }
html[data-look="stage"] .style-opt-art .so-stroke { fill: none; }
html[data-look="stage"] .style-opt-art .so-acc-fill { fill: var(--dk-t-8799c3a55, rgba(135, 153, 195, .55)); }
html[data-look="stage"] .style-opt-art .so-num { font-family: var(--v-font); }
html[data-look="stage"] .style-opt-name { font: 500 14px/1.3 var(--v-font); }
html[data-look="stage"] .style-opt-blurb { font: 400 13px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .frames .frame { padding: 10px 12px; }

/* "Your editing style": a plain section; when it cannot load, one compact neutral row. */
html[data-look="stage"] .brand-panel > .brand-slot.es { padding: 0 4px; }
html[data-look="stage"] .es-offline { background: var(--s-card); box-shadow: inset 0 0 0 1px var(--s-hair); border-radius: 10px; color: var(--dk-t-5f5e5a, #5F5E5A); font: 400 13px/1.4 var(--v-font); padding: 8px 12px; }
html[data-look="stage"] .es-retry { color: var(--s-ink); }

/* What Volare has learned: plain rows in the card, no grey shell or box inside it. */
html[data-look="stage"] .card.memory .mem-list.be-lessons { background: none; border-radius: 0; padding: 20px 0 0; border-top: 1px solid var(--s-hair); }
html[data-look="stage"] .card.memory .mem-copy { font: 400 14px/1.5 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .be-learned-empty { font: 400 14px/1.5 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .be-learned-empty .link { color: var(--s-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--s-line); text-underline-offset: 3px; }

/* Channel: "Your channel" one compact row; "Channels you follow" a Shell list under its add box. */
html[data-look="stage"] .brand-panels .card.cc-card { padding: 16px 24px; }
html[data-look="stage"] .cc-row .card-title { font: 500 16px/1.3 var(--v-font); }
html[data-look="stage"] .cc-line { font: 400 14px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .card.following { padding: 20px 24px 24px; }
html[data-look="stage"] .card.following .card-title { font: 500 16px/1.3 var(--v-font); }
html[data-look="stage"] .card.following .mem-copy { font: 400 14px/1.5 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .fol-chip { background: var(--s-peri-soft); box-shadow: none; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); font: 500 12px/1 var(--v-font); }
html[data-look="stage"] .fol-row { border: 0; padding: 10px 12px; }
html[data-look="stage"] .fol-row:last-child { border: 0; }
html[data-look="stage"] .fol-row--empty .fol-name { font: 500 14px/1.4 var(--v-font); }
html[data-look="stage"] .fol-row--empty .fol-sub { font: 400 13px/1.45 var(--v-font); color: var(--s-ink-2); }

/* References: what Volare measured, as small chips. */
html[data-look="stage"] .ref-chip { background: var(--s-peri-soft); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); font: 500 12px/1 var(--v-font); height: 22px; padding: 0 9px; }
html[data-look="stage"] .card.references { padding: 20px 24px 24px; }
html[data-look="stage"] .brand-slot.es .es-head .card-title { font: 500 16px/1.3 var(--v-font); }
html[data-look="stage"] .brand-slot.es .es-sub { font: 400 13px/1.45 var(--v-font); color: var(--s-ink-2); }

/* Review fixes: the learned heading reads as a section; references sit three across with their measures at the foot;
   an empty followed list is plain text inside the shell. */
html[data-look="stage"] .card.memory .card-title { font: 500 14px/1.3 var(--v-font); letter-spacing: 0; }
html[data-look="stage"] .brand-slot.es .es-offline { margin-top: 0; }
html[data-look="stage"] .brand-panels .be-refs { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 16px; align-items: stretch; }
/* each card shares the row's four tracks (title, link, notes, measures), so the measures line up across cards */
html[data-look="stage"] .be-refs .ref-add { grid-row: span 4; min-height: 0; height: 100%; justify-content: center; }
html[data-look="stage"] .be-refs .be-ref:not(.is-draft) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; min-height: 0; }
html[data-look="stage"] .be-refs .be-ref .be-tags { align-self: start; }
html[data-look="stage"] .be-refs .be-ref .ref-measure { margin-top: 0; padding-top: 12px; display: grid; gap: 12px; align-content: start; }
html[data-look="stage"] .be-refs .ref-measure .ref-chips { margin: 0; }
html[data-look="stage"] .be-refs .ref-measure-lines { margin: 0; }
html[data-look="stage"] .fol-list--empty .fol-row--empty { background: transparent; box-shadow: none; padding: 12px; }

/* Brand > Look: the font's class ("sans serif") is a small tag under the preview, not a full-width grey bar. */
html[data-look="stage"] .be-fontpick .be-fontmeta {
  justify-self: start; align-self: start; width: fit-content; max-width: 100%; height: auto;
  padding: 2px 8px; border-radius: 999px; background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  font: 400 12px/1.4 var(--v-font); color: var(--s-ink-2);
}