/*
 * Looks.
 *
 * The dashboard has two looks over one set of type and geometry. They differ
 * in colour, imagery and shadow tint, and in nothing else.
 *
 *   styles.css :root           every type and geometry token, once, for both
 *                              looks (Geist, the landing's sizes, radii,
 *                              44px controls, card padding, gaps, column).
 *                              Its colour tokens are Classic's palette.
 *   html[data-look]            (this file) the component type and geometry
 *                              both looks share. Same specificity as the look
 *                              selectors, so each rule sits exactly where the
 *                              cascade had it.
 *   html[data-look="volare"]   colour only: the landing's palette (the default).
 *   html[data-look="classic"]  colour only: where a shared rule drew a line as
 *                              an inset shadow instead of a border, Classic
 *                              gets the same line in its own colours.
 *
 * Each component below is a pair (or three): the shared rule, then each
 * look's colours. Artwork: Classic keeps its scenic art (hero, side, logo
 * bird); Volare hides it and mounts the landing's halftone.
 *
 * index.html sets data-look before first paint from localStorage
 * ('volare.look', default "volare"); Settings → Preferences → Look switches
 * it without a reload.
 *
 * Every Volare value is taken from frontend/landing and cited as
 * "landing styles.css:<line>" (or halftone.js / index.html). The status
 * colours are the one addition: the landing has no status vocabulary, so
 * they are drawn from its palette (charcoal for busy, and warm, sage and
 * brick tones at the landing's charcoal contrast for attention, done and
 * failed). No blue-grey and no #2C72CB appear in this look.
 */

/* ================================================================ *
 * TOKENS — Volare's colours (type and geometry tokens: styles.css :root)
 * ================================================================ */
html[data-look="volare"] {
  /* The landing's own names, for the rules below (landing styles.css:2-13). */
  --v-alabaster: var(--dk-b-eae6de, #EAE6DE);                                           /* styles.css:2  */
  --v-salt: var(--dk-b-f8f7f2, #F8F7F2);                                                /* styles.css:3  */
  --v-periwinkle: #8799C3;                                          /* styles.css:4  */
  --v-charcoal: var(--dk-inv, #1F1F21);                                            /* styles.css:5  */
  --v-ink-60: var(--dk-t-1f1f21a66, rgba(31, 31, 33, .66));                                /* styles.css:7 (.62 raised for 4.5:1 on alabaster) */
  --v-ink-12: var(--dk-t-1f1f21a12, rgba(31, 31, 33, .12));                                /* styles.css:8  */
  --v-ink-06: var(--dk-t-1f1f21a6, rgba(31, 31, 33, .06));                                /* styles.css:9  */
  --v-peri-12: rgba(135, 153, 195, .14);                            /* styles.css:10 */
  --v-peri-24: rgba(135, 153, 195, .28);                            /* styles.css:11 */
  --v-peri-text: color-mix(in srgb, var(--dk-t-8799c3, #8799C3) 56%, var(--dk-ink, #1F1F21));          /* styles.css:12 */
  --v-salt-60: var(--dk-b-f8f7f2a62, rgba(248, 247, 242, .62));                            /* styles.css:13 */
  --v-peri-hover: color-mix(in srgb, #8799C3 86%, var(--dk-inv, #1F1F21));         /* styles.css:60 */
  --v-ease: cubic-bezier(.2, .7, .2, 1);                            /* styles.css:19 */
  --v-shadow: 0 1px 2px rgba(31, 31, 33, .06);                       /* one light card shadow (was a 70px drop shadow) */
  --v-frame-shadow: 0 30px 60px -30px rgba(31, 31, 33, .35);        /* styles.css:246 */
  --v-pop-shadow: 0 0 0 1px var(--v-ink-06), 0 16px 32px -12px rgba(31, 31, 33, .3); /* styles.css:224 */
  --v-card: var(--dk-b-fdfcf9, #FDFCF9);                                                /* a card face one step lighter than salt, so it lifts off the alabaster page */
  --v-edge: inset 0 0 0 1px var(--dk-l-1f1f21a14, rgba(31, 31, 33, .14));                  /* the visible 1px card border */
  --v-field-edge: inset 0 0 0 1px var(--dk-l-1f1f21a50, rgba(31, 31, 33, .5));             /* a field's border: 3:1 on its white fill */
  --v-line: inset 0 0 0 1px var(--v-ink-06);                        /* lines as inset shadows, styles.css:64,140 */
  --v-line-2: inset 0 0 0 1px var(--v-ink-12);

  /* ---- The app's colour tokens, re-pointed ---- */
  --pearl: var(--dk-b-f8f7f2, #F8F7F2);
  --alabaster: var(--dk-b-eae6de, #EAE6DE);
  --ink-900: var(--dk-ink, #1F1F21);

  --bg: var(--dk-b-eae6de, #EAE6DE);                 /* page: alabaster, styles.css:26 */
  --side: var(--dk-b-eae6de, #EAE6DE);
  --card: var(--dk-b-fdfcf9, #FDFCF9);               /* cards: lighter than salt so they separate from the alabaster page */
  --tile: var(--dk-b-fdfcf9, #FDFCF9);
  --line: var(--dk-l-1f1f21a6, rgba(31, 31, 33, .06));
  --line-2: var(--dk-l-1f1f21a12, rgba(31, 31, 33, .12));
  --line-side: var(--dk-l-1f1f21a6, rgba(31, 31, 33, .06));
  --hover-side: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));   /* hover fills: ink-06, styles.css:65 */
  --hover-bg: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --hover-tile: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --hover-card: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --soft: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --soft-hover: var(--dk-b-1f1f21a12, rgba(31, 31, 33, .12));
  --dashed: var(--dk-l-1f1f21a22, rgba(31, 31, 33, .22));
  --dashed-hover: var(--dk-l-1f1f21a40, rgba(31, 31, 33, .4));
  --fill-faint: var(--dk-b-f8f7f2a55, rgba(248, 247, 242, .55));
  --fill-faint-hover: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));

  --ink: var(--dk-ink, #1F1F21);                /* styles.css:5 */
  --ink-strong: var(--dk-ink, #1F1F21);
  --muted: var(--dk-t-1f1f21a66, rgba(31, 31, 33, .66));/* styles.css:7 at .62 was 4.28:1 on alabaster; .66 is 4.82:1 */
  --faint: var(--dk-t-1f1f21a45, rgba(31, 31, 33, .45));   /* placeholders and disabled labels only; readable text uses --muted */
  --accent: var(--dk-inv, #1F1F21);
  --accent-soft: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --positive: var(--dk-inv, #1F1F21);
  --positive-soft: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --button: #8799C3;             /* primary buttons: periwinkle, styles.css:56 */
  --mist: var(--dk-b-1f1f21a12, rgba(31, 31, 33, .12)); /* empty step dots and rules */
  --twilight: var(--dk-inv, #1F1F21);           /* finished steps, chart lines */

  /* Status: busy is a neutral charcoal tint (periwinkle is kept for the primary action and the current selection); the rest sit on the palette. */
  --st-busy: var(--dk-inv, #1F1F21);   --st-busy-bg: var(--dk-b-1f1f21a8, rgba(31, 31, 33, .08)); --st-busy-dot: var(--dk-b-1f1f21a62, rgba(31, 31, 33, .62));
  --st-attn: #6B4814;   --st-attn-bg: var(--dk-b-eedfc3, #EEDFC3);                   --st-attn-dot: #BF8633;
  --st-done: #3B5233;   --st-done-bg: var(--dk-b-dce3d3, #DCE3D3);                   --st-done-dot: #6E8961;
  --st-fail: #87372B;   --st-fail-bg: var(--dk-b-efd8d1, #EFD8D1);                   --st-fail-dot: #B45747;
  --st-idle: var(--dk-b-1f1f21a72, rgba(31, 31, 33, .72)); --st-idle-bg: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); --st-idle-dot: var(--dk-b-1f1f21a35, rgba(31, 31, 33, .35));

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

/* ================================================================ *
 * BASE
 * ================================================================ */
html[data-look] body { font-family: var(--v-font); }
html[data-look="volare"] body { background: var(--v-alabaster); color: var(--v-charcoal); }
html[data-look="volare"] :focus-visible { outline: 2px solid var(--v-periwinkle); outline-offset: 3px; } /* styles.css:37 */
html[data-look="volare"] ::selection { background: var(--v-peri-24); }

/* Artwork. Classic keeps its scenic art; Volare hides it and shows the halftone. */
html[data-look="volare"] .shell > .atmos-slot--hero,
html[data-look="volare"] .atmos-slot--side { display: none; }
html[data-look="volare"] .main { background: none; }

/* The Volare counterpart on Home: the landing's halftone (halftone.js),
   top right behind the greeting, fading out to the left and down. */
/* Kept to the right of the greeting and below the top bar, so it never sits under the greeting, the search field or the bell. */
html[data-look="volare"] .shell > .atmos-halftone {
  position: absolute; top: 3.75rem; right: 0; z-index: 0; pointer-events: none;
  width: min(40rem, 48%); height: 14rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, transparent, #000 20%, #000 50%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, transparent, #000 20%, #000 50%, transparent);
          mask-composite: intersect;
}
html[data-look="volare"] body:not([data-route="home"]) .shell > .atmos-halftone,
html[data-look="volare"] .shell:has(.main--solo) > .atmos-halftone { display: none; }
@media (max-width: 680px) { html[data-look="volare"] .shell > .atmos-halftone { display: none; } }

/* Halftone canvases fill whatever they decorate. */
html[data-look="volare"] canvas.halftone { display: block; }

/* ================================================================ *
 * TYPE — Geist only; headings 600 at -.038em (landing styles.css:43-47)
 * ================================================================ */
html[data-look] .hero h1,
html[data-look] body.app .page-head h1,
html[data-look] body.app .page-head .page-title,
html[data-look] body.app .hero--brand h1,
html[data-look] .page-title,
html[data-look] body.app .page-head--ws .ws-title-row h1 {
  font: var(--type-title);  /* styles.css:45 */
  letter-spacing: -.038em;
  text-wrap: balance;
}
html[data-look="volare"] .hero h1,
html[data-look="volare"] body.app .page-head h1,
html[data-look="volare"] body.app .page-head .page-title,
html[data-look="volare"] body.app .hero--brand h1,
html[data-look="volare"] .page-title,
html[data-look="volare"] body.app .page-head--ws .ws-title-row h1 { color: var(--v-charcoal); }
html[data-look] .hero-sub,
html[data-look] .page-sub { font: var(--type-body); letter-spacing: -.005em; max-width: var(--measure); } /* styles.css:48 */
html[data-look="volare"] .hero-sub,
html[data-look="volare"] .page-sub { color: var(--v-ink-60); }
html[data-look] .hero-sub { margin-top: 10px; }
html[data-look] .page-sub { margin-top: 8px; }

/* Card titles (styles.css:46). */
html[data-look] .card-title,
html[data-look] .set-head-text h2,
html[data-look] .assistant-title,
html[data-look] .mem-title,
html[data-look] .modal h2,
html[data-look] .empty-title,
html[data-look] .current-info h3 { font: var(--type-section); letter-spacing: -.02em; }
html[data-look="volare"] .card-title,
html[data-look="volare"] .set-head-text h2,
html[data-look="volare"] .assistant-title,
html[data-look="volare"] .mem-title,
html[data-look="volare"] .modal h2,
html[data-look="volare"] .empty-title,
html[data-look="volare"] .current-info h3 { color: var(--v-charcoal); }
html[data-look] .set-pane-title { font: var(--type-section); letter-spacing: -.02em; }
html[data-look="volare"] .set-pane-title { color: var(--v-charcoal); }
html[data-look] .vbody h3 { font: var(--type-section); letter-spacing: -.02em; }
html[data-look="volare"] .vbody h3 { color: var(--v-charcoal); }
html[data-look] .card-head .t-eyebrow { white-space: nowrap; }
html[data-look] .plan-name { font: var(--type-title); letter-spacing: -.038em; }

/* Sentence-case eyebrows with light tracking. */
html[data-look] .eyebrow,
html[data-look] .t-eyebrow,
html[data-look] .pop-type {
  font: 600 var(--fs-meta)/1.2 var(--v-font); letter-spacing: .01em; text-transform: none; color: var(--muted);
}
html[data-look] .gs-head,
html[data-look] .menu-label,
html[data-look] .menu-group,
html[data-look] .cur-facts dt,
html[data-look] .tline-flag { font-weight: 600; letter-spacing: .12em; }
html[data-look] .itable-head { font-weight: 600; }

/* Stats 36px / 600, tabular (styles.css:272). */
html[data-look] .stat strong { font: 600 var(--fs-figure)/1.05 var(--v-font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

html[data-look] .link { font-weight: 500; transition: color var(--motion); }
html[data-look="volare"] .link { color: var(--v-charcoal); }
html[data-look="volare"] .link:hover { color: var(--dk-tx-v-peri-text, var(--v-peri-text)); }

/* ================================================================ *
 * BUTTONS — styles.css:53-66
 * ================================================================ */
html[data-look] .btn {
  height: 44px; padding: 0 18px; gap: 8px; border: 0; border-radius: 12px;
  font: 600 var(--fs-body)/1 var(--v-font); letter-spacing: 0;
  transition: background-color var(--motion), box-shadow var(--motion), color var(--motion);
}
html[data-look="volare"] .btn { box-shadow: none; }
html[data-look="volare"] .btn:focus-visible { outline: 2px solid var(--v-periwinkle); outline-offset: 3px; }
/* primary: periwinkle, charcoal text; hover a touch darker (styles.css:56,60) */
html[data-look="volare"] .btn--primary { background: var(--v-periwinkle); color: var(--v-charcoal); box-shadow: none; }
html[data-look="volare"] .btn--primary:hover { background: var(--v-peri-hover); }
html[data-look="volare"] .btn--primary:active { background: var(--v-peri-hover); }
/* ghost: an inset 1px line, peri-12 on hover (styles.css:64-65) */
html[data-look="volare"] .btn--outline,
html[data-look="volare"] .btn--light,
html[data-look="volare"] .btn--icon {
  background: transparent; color: var(--v-charcoal); box-shadow: var(--v-line-2);
}
html[data-look="volare"] .btn--outline:hover,
html[data-look="volare"] .btn--light:hover,
html[data-look="volare"] .btn--icon:hover,
html[data-look="volare"] .btn--outline:active,
html[data-look="volare"] .btn--light:active { background: var(--v-ink-06); box-shadow: var(--v-line-2); }
html[data-look="volare"] .btn--ghost { background: transparent; color: var(--v-charcoal); }
html[data-look="volare"] .btn--ghost:hover { background: var(--v-ink-06); }
html[data-look="volare"] .btn--danger { background: #87372B; color: var(--v-salt); }
html[data-look="volare"] .btn--danger:hover { background: #742E24; }
html[data-look="volare"] .btn--danger:active { background: #632720; }
html[data-look="volare"] .btn--ghost:active { background: var(--v-ink-12); }
/* Classic: its outline and icon buttons keep their line, drawn inside like Volare's. */
html[data-look="classic"] .btn--outline,
html[data-look="classic"] .btn--icon { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-look="classic"] .btn--outline:hover,
html[data-look="classic"] .btn--icon:hover { box-shadow: inset 0 0 0 1px var(--dk-l-b7c2d1, #B7C2D1); }
html[data-look="volare"] .input:disabled, html[data-look="volare"] .select select:disabled { background: var(--v-alabaster); box-shadow: var(--v-line); }
html[data-look="volare"] .input[aria-invalid="true"],
html[data-look="volare"] .select select[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--st-fail); }
html[data-look="volare"] .skel { background-image: linear-gradient(90deg, var(--v-ink-06) 0%, var(--v-ink-12) 50%, var(--v-ink-06) 100%); }
html[data-look="volare"] * { scrollbar-color: var(--v-ink-12) transparent; }
html[data-look="volare"] ::-webkit-scrollbar-thumb { background-color: var(--v-ink-12); }
html[data-look="volare"] ::-webkit-scrollbar-thumb:hover { background-color: var(--v-ink-60); }
html[data-look] .btn--icon { width: 44px; padding: 0; }
html[data-look] .btn[disabled],
html[data-look] .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; } /* styles.css:66 */
html[data-look="volare"] .btn--primary[disabled] { background: var(--v-periwinkle); color: var(--v-charcoal); }
html[data-look="volare"] .btn--light[disabled],
html[data-look="volare"] .btn--outline[disabled] { background: transparent; color: var(--v-charcoal); box-shadow: var(--v-line-2); }

/* ================================================================ *
 * SHELL
 * ================================================================ */
html[data-look] .sidebar { border-right: 0; }
html[data-look="volare"] .sidebar { background: var(--v-alabaster); box-shadow: inset -1px 0 0 var(--v-ink-06); }
html[data-look="classic"] .sidebar { box-shadow: inset -1px 0 0 var(--line-side); }
/* Content column: max width 1180px (styles.css:50); the gutters are --page-gutter (styles.css). */
html[data-look] body.app .main > .topbar,
html[data-look] body.app .main > .outlet { max-width: var(--page-max); margin-left: auto; margin-right: auto; }
@media (min-width: 1020px) {
  html[data-look] body.app .main > .topbar { width: 100%; }
}

/* Logo. Volare: the landing's mark as a charcoal mask (styles.css:77-78,
   assets/volare-mark.svg). Classic: its bird, in the same 30px box. The
   wordmark beside either is Geist 600. */
html[data-look] .logo-mark { width: 30px; height: 30px; margin-top: 0; object-fit: contain; }
html[data-look="volare"] .logo-mark,
html[data-look="volare"] .lockup-mark { display: none; }
html[data-look="volare"] .logo-mask,
html[data-look="volare"] .lockup-mask {
  display: inline-block; flex: none; background: var(--v-charcoal);
  -webkit-mask: url(../assets/volare-mark.svg) center / 150% no-repeat;
          mask: url(../assets/volare-mark.svg) center / 150% no-repeat;
}
html[data-look="volare"] .logo-mask { width: 30px; height: 30px; }
html[data-look] .logo { gap: 10px; padding-left: 8px; }
html[data-look] .logo span.side-label,
html[data-look] .sheet-title { font: 600 var(--fs-section)/1 var(--v-font); letter-spacing: -.02em; }
html[data-look="volare"] .logo span.side-label,
html[data-look="volare"] .sheet-title { color: var(--v-charcoal); }
html[data-look="volare"] .lockup-mask { width: 3.25em; height: 3.25em; }
html[data-look="volare"] .lockup-word { font: 600 1.75em/1 var(--v-font); letter-spacing: -.02em; color: var(--v-charcoal); }

html[data-look] .nav-item { border-radius: 10px; transition: background-color .2s var(--ease); }
html[data-look="volare"] .nav-item { color: var(--v-charcoal); }
html[data-look="volare"] .nav-item .i { color: var(--v-charcoal); }
html[data-look="volare"] .nav-item:hover { background: var(--v-ink-06); }
html[data-look] .nav-item.is-active { font-weight: 500; }
html[data-look="volare"] .nav-item.is-active { background: var(--v-peri-24); }
html[data-look="volare"] .side-toggle { color: var(--v-ink-60); }

html[data-look] .search { height: 44px; border: 0; border-radius: 12px; }
html[data-look="volare"] .search { background: var(--dk-paper, #fff); box-shadow: var(--v-field-edge); }
html[data-look="classic"] .search { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-look] .search input { font-family: var(--v-font); }
/* The search box draws the ring around itself; the field inside does not draw a second one. */
html[data-look] .search input:focus-visible { outline: none; }
html[data-look] .search:focus-within { border: 0; }
html[data-look="volare"] .search:focus-within { box-shadow: inset 0 0 0 2px var(--v-periwinkle); } /* styles.css:155 */
html[data-look="classic"] .search:focus-within { box-shadow: inset 0 0 0 1px var(--mist), 0 0 0 3px rgba(113, 126, 143, 0.16); }
html[data-look="volare"] .icon-btn:hover { background: var(--v-ink-06); }
html[data-look] .avatar { font-family: var(--v-font); }
html[data-look="volare"] .avatar { background: var(--v-salt); box-shadow: var(--v-line-2); color: var(--v-charcoal); }
html[data-look="volare"] .bell-dot { background: var(--v-charcoal); color: var(--v-salt); border-color: var(--v-alabaster); }
html[data-look="volare"] .pk-tag { color: var(--v-charcoal); }

html[data-look] .popover,
html[data-look] .gsearch-panel,
html[data-look] .menu { border: 0; border-radius: 12px; }
html[data-look="volare"] .popover,
html[data-look="volare"] .gsearch-panel,
html[data-look="volare"] .menu { background: var(--v-salt); box-shadow: var(--v-pop-shadow); }   /* styles.css:224 */
html[data-look="classic"] .popover,
html[data-look="classic"] .gsearch-panel { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(31,31,33,.06), 0 1rem 2.5rem -.75rem rgba(31,31,33,.24); }
html[data-look="volare"] .pop-row:hover,
html[data-look="volare"] .menu-row:hover,
html[data-look="volare"] .menu-row:focus-visible,
html[data-look="volare"] .gs-row:hover,
html[data-look="volare"] .gs-row:focus-visible { background: var(--v-ink-06); }
html[data-look="volare"] .menu-row--state.is-on { background: var(--v-peri-24); box-shadow: none; }
html[data-look="volare"] .menu-row--danger { color: var(--dk-t-87372b, #87372B); }

html[data-look] .toast { border-radius: 12px; font-family: var(--v-font); }
html[data-look="volare"] .toast { background: var(--v-charcoal); color: var(--v-salt); }
html[data-look] .modal { border-radius: 12px; }
html[data-look="volare"] .modal { background: var(--v-salt); box-shadow: var(--v-shadow); }
html[data-look="volare"] .modal-scrim,
html[data-look="volare"] .sheet-scrim { background: var(--dk-s-1f1f21a45, rgba(31, 31, 33, .45)); }
html[data-look] .tip { border-radius: 8px; }
html[data-look="volare"] .tip { background: var(--v-charcoal); color: var(--v-salt); }
html[data-look] .skip-link { border: 0; border-radius: 12px; }
html[data-look="volare"] .skip-link { background: var(--v-salt); box-shadow: var(--v-line-2); }
html[data-look="classic"] .skip-link { box-shadow: inset 0 0 0 1px var(--line-2); }

/* ================================================================ *
 * SURFACES — cards on the page ground, lines as inset shadows
 * ================================================================ */
html[data-look] .card { border-radius: 12px; padding: var(--pad-card); }
html[data-look="volare"] .card {
  background: var(--v-card); border-color: transparent;
  box-shadow: var(--v-edge), var(--v-shadow);
}
html[data-look] .card.set-card { padding: 0; }
html[data-look] .card.set-nav { padding: 8px; }
html[data-look] .card.assistant { padding: 16px 24px; }
html[data-look] .set-head { padding: 24px 24px 12px; }
html[data-look] .set-body { padding: 16px 24px 24px; }
html[data-look] .set-body--tight { padding-top: 0; }
html[data-look="volare"] .set-rule { background: var(--v-ink-06); }
html[data-look="volare"] .set-head-text p { color: var(--v-ink-60); }

/* One level of surface per region: rows and groups inside a card carry no
   frame of their own (styles.css, css/app.css). Only a thing you pick keeps
   an outline, because the outline is the control. */
html[data-look] .look-opt { border-radius: 12px; }
html[data-look="volare"] .look-opt { background: var(--v-salt); border-color: transparent; box-shadow: var(--v-line); }
html[data-look="volare"] .attn { color: var(--v-ink-60); }
html[data-look="volare"] .look-opt.is-on { box-shadow: inset 0 0 0 2px var(--v-periwinkle); background: var(--v-peri-12); }

/* A filled well inside a card: alabaster, as the landing's .gfx-row (styles.css:351). */
html[data-look] .blocker { border-radius: 12px; }
html[data-look="volare"] .blocker { background: var(--st-attn-bg); }
html[data-look] .note { border-radius: 12px; }
html[data-look="volare"] .note { background: var(--v-ink-06); }
html[data-look="volare"] .note--stop { background: var(--st-fail-bg); }
html[data-look="volare"] .note--ok { background: var(--st-done-bg); }
html[data-look="volare"] .note--warn { background: var(--st-attn-bg); }
html[data-look="volare"] .note-icon { color: var(--v-charcoal); }
html[data-look] .page-banner { border: 0; border-radius: 12px; }
html[data-look="volare"] .page-banner { background: var(--st-attn-bg); }

/* Fields: a filled ground with an inset line, a 2px ring on focus (styles.css:151-155). */
html[data-look] .input,
html[data-look] textarea.input,
html[data-look] .select select { height: 44px; border: 0; border-radius: 12px; font-family: var(--v-font); }
html[data-look="volare"] .input,
html[data-look="volare"] textarea.input,
html[data-look="volare"] .select select { background: var(--dk-paper, #fff); box-shadow: var(--v-field-edge); color: var(--v-charcoal); }
html[data-look="classic"] .input,
html[data-look="classic"] textarea.input,
html[data-look="classic"] .select select { box-shadow: inset 0 0 0 1px var(--dk-l-dfe2e7, #DFE2E7); }
html[data-look] textarea.input { height: auto; }
html[data-look="volare"] .input:hover,
html[data-look="volare"] .select select:hover { box-shadow: inset 0 0 0 1px rgba(31, 31, 33, .72); }
html[data-look="classic"] .input:hover,
html[data-look="classic"] .select select:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-look] .input:focus,
html[data-look] .input:focus-visible,
html[data-look] .select select:focus-visible { border: 0; outline: none; }
html[data-look="volare"] .input:focus,
html[data-look="volare"] .input:focus-visible,
html[data-look="volare"] .select select:focus-visible { box-shadow: inset 0 0 0 2px var(--v-periwinkle); }
html[data-look="classic"] .input:focus,
html[data-look="classic"] .input:focus-visible,
html[data-look="classic"] .select select:focus-visible { box-shadow: inset 0 0 0 1px var(--mist), 0 0 0 3px rgba(113, 126, 143, 0.16); }
html[data-look="classic"] .input[aria-invalid="true"],
html[data-look="classic"] .select select[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--st-fail); }
html[data-look="volare"] .select > .i { color: var(--v-charcoal); }
html[data-look="volare"] .field-label { color: var(--v-charcoal); }

/* Filter pills: the landing's chips (styles.css:306-312). */
html[data-look] .fpill { border-radius: 12px; transition: background-color var(--motion), box-shadow var(--motion); }
html[data-look="volare"] .fpill { background: var(--v-salt); border-color: transparent; box-shadow: var(--v-line); }
html[data-look="volare"] .fpill:hover { background: var(--v-salt); box-shadow: var(--v-line-2); }
html[data-look="volare"] .fpill.is-active { background: var(--v-periwinkle); box-shadow: none; color: var(--v-charcoal); }
html[data-look="volare"] .fpill.is-active .fpill-count { color: var(--v-charcoal); }

/* Status pills: the landing's pill shape (styles.css:252) on the status tokens. */
html[data-look] .pill { border-radius: 12px; font: 500 var(--fs-meta)/1 var(--v-font); letter-spacing: 0; }
html[data-look] .badge { font-family: var(--v-font); }
html[data-look="volare"] .badge { background: var(--v-charcoal); color: var(--v-salt); }
html[data-look] .delta { font-family: var(--v-font); }
html[data-look="volare"] .stat-icon,
html[data-look="volare"] .int-icon { background: var(--v-ink-06); color: var(--v-charcoal); }
html[data-look] .int-icon--brand { border: 0; }
html[data-look="volare"] .int-icon--brand { background: var(--v-salt); box-shadow: var(--v-line); }
html[data-look="classic"] .int-icon--brand { box-shadow: inset 0 0 0 1px var(--line); }
html[data-look] .spark-line { stroke-width: 2; }
html[data-look="volare"] .spark-line { stroke: var(--v-periwinkle); }
html[data-look="volare"] .spark-fill { fill: var(--v-periwinkle); opacity: .18; }
html[data-look="volare"] .perks .i { color: var(--v-charcoal); }
html[data-look="volare"] .mono-avatar { background: var(--v-ink-06); color: var(--v-charcoal); }
html[data-look="volare"] .rec-icon { color: var(--v-charcoal); }
html[data-look="volare"] .bullet { background: var(--v-charcoal); }
html[data-look="volare"] .sep { background: var(--v-ink-12); }

/* ================================================================ *
 * PROGRESS — Volare: charcoal for done, periwinkle for the step in progress
 * ================================================================ */
html[data-look="volare"] .step::before { background: var(--v-ink-12); }
html[data-look="volare"] .step.done::before,
html[data-look="volare"] .step.active::before,
html[data-look="volare"] .ws-steps .step.done::before,
html[data-look="volare"] .ws-steps .step.active::before { background: var(--v-charcoal); }
html[data-look] .dot { border: 0; }
html[data-look="volare"] .dot { background: var(--v-salt); box-shadow: var(--v-line-2); color: var(--v-ink-60); }
html[data-look="classic"] .dot { box-shadow: inset 0 0 0 1.5px var(--mist); }
html[data-look] .step.done .dot,
html[data-look] .ws-steps .step.done .dot { border: 0; }
html[data-look="volare"] .step.done .dot,
html[data-look="volare"] .ws-steps .step.done .dot { background: var(--v-charcoal); box-shadow: none; color: var(--v-salt); }
html[data-look="classic"] .step.done .dot,
html[data-look="classic"] .ws-steps .step.done .dot { box-shadow: none; }
html[data-look] .step.active .dot { border: 0; }
html[data-look="volare"] .step.active .dot {
  background: var(--v-periwinkle); color: var(--v-charcoal);
  box-shadow: 0 0 0 4px var(--v-peri-24);
}
html[data-look="classic"] .step.active .dot { box-shadow: inset 0 0 0 2px var(--dk-l-e3e8ef, #E3E8EF), 0 0 0 4px var(--dk-l-dde4ec, #DDE4EC), 0 0 0.875rem 0.3rem var(--dk-l-dfe4ea, #DFE4EA); }
html[data-look="volare"] .step.stopped .dot { background: var(--st-fail-bg); box-shadow: none; color: var(--dk-tx-st-fail, var(--st-fail)); }
html[data-look="classic"] .step.stopped .dot { box-shadow: inset 0 0 0 1.5px var(--dk-l-d9b4b4, #D9B4B4); }
html[data-look="classic"] .stepper--idle .dot { box-shadow: inset 0 0 0 1.5px var(--dk-l-dce2e9, #DCE2E9); }
html[data-look="volare"] .step { color: var(--v-ink-60); }

html[data-look="volare"] .vstep + .vstep::before { background: var(--v-ink-12); }
html[data-look="volare"] .vstep.is-done + .vstep::before { background: var(--v-charcoal); }
html[data-look] .vstep-dot { border: 0; }
html[data-look="volare"] .vstep-dot { background: var(--v-salt); box-shadow: var(--v-line-2); color: var(--v-ink-60); }
html[data-look="classic"] .vstep-dot { box-shadow: inset 0 0 0 1.5px var(--mist); }
html[data-look="volare"] .vstep.is-done .vstep-dot { background: var(--v-charcoal); box-shadow: none; color: var(--v-salt); }
html[data-look="classic"] .vstep.is-done .vstep-dot { box-shadow: none; }
html[data-look="volare"] .vstep.is-active .vstep-dot { background: var(--v-periwinkle); box-shadow: 0 0 0 4px var(--v-peri-24); color: var(--v-charcoal); }
html[data-look="volare"] .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="classic"] .vstep.is-waiting .vstep-dot { box-shadow: inset 0 0 0 1.5px var(--st-attn-dot); }
html[data-look="classic"] .vstep.is-stopped .vstep-dot { box-shadow: inset 0 0 0 1.5px var(--st-fail-dot); }

html[data-look] .fstep-n { border: 0; font-family: var(--v-font); }
html[data-look="volare"] .fstep-n { box-shadow: var(--v-line-2); background: var(--v-salt); }
html[data-look="classic"] .fstep-n { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-look="volare"] .fstep.is-on .fstep-n { background: var(--v-periwinkle); color: var(--v-charcoal); box-shadow: none; }
html[data-look="volare"] .fstep.is-done .fstep-n { background: var(--v-charcoal); color: var(--v-salt); box-shadow: none; }
html[data-look="classic"] .fstep.is-on .fstep-n,
html[data-look="classic"] .fstep.is-done .fstep-n { box-shadow: none; }
html[data-look="volare"] .fstep + .fstep::before { background: var(--v-ink-12); }
html[data-look="volare"] .fstep.is-done + .fstep::before { background: var(--v-charcoal); }

html[data-look="volare"] .uprog-bar,
html[data-look="volare"] .pbar,
html[data-look="volare"] .meter { background: var(--v-ink-12); }                  /* styles.css:184 */
html[data-look="volare"] .uprog-bar span,
html[data-look="volare"] .pbar i,
html[data-look="volare"] .meter i { background: var(--v-charcoal); }             /* styles.css:185 */

/* ================================================================ *
 * THUMBNAILS AND PLAYERS
 * ================================================================ */
/* The scene artwork stays on every thumbnail (it tells videos apart); the
   Volare look only warms it a little toward alabaster so the blue-grey
   illustrations sit on the landing's palette. */
html[data-look="volare"] .vthumb--art .vthumb-art,
html[data-look="volare"] .thumb--art > svg,
html[data-look="volare"] .ref-thumb > svg,
html[data-look="volare"] .frame-art > svg,
html[data-look="volare"] .caption-art,
html[data-look="volare"] .player-stage--still > svg { filter: sepia(.22) saturate(.85) brightness(1.02); }
html[data-look] .ref-thumb .thumb-more { display: none; }
html[data-look] .vcard { border-radius: 12px; }
html[data-look="volare"] .vcard { background: var(--v-salt); border-color: transparent; box-shadow: var(--v-line), var(--v-shadow); }
html[data-look] .duration,
html[data-look] .vthumb .duration { border-radius: 6px; font-family: var(--v-font); }
html[data-look="volare"] .duration,
html[data-look="volare"] .vthumb .duration { background: var(--dk-b-1f1f21a72, rgba(31, 31, 33, .72)); color: var(--v-salt); } /* styles.css:175 */
html[data-look="volare"] .vthumb--placeholder,
html[data-look="volare"] .thumb--placeholder { background: var(--v-ink-06); }
html[data-look="volare"] .vthumb--placeholder .vthumb-art,
html[data-look="volare"] .thumb--empty,
html[data-look="volare"] .thumb--empty .thumb-empty-label { color: var(--v-ink-60); }
html[data-look="volare"] .thumb--empty { background: var(--dk-b-f8f7f2a60, rgba(248, 247, 242, .6)); border-color: var(--v-ink-12); }
html[data-look] .thumb--lg { border-radius: 8px; }

/* Video players sit in a dark frame (styles.css:171-172, 246). */
html[data-look] .card.player { padding: 8px; border-radius: 12px; }
html[data-look="volare"] .card.player { background: var(--v-charcoal); box-shadow: var(--v-frame-shadow); }
html[data-look] .player-stage { border-radius: 8px; }
html[data-look="volare"] .player-stage { background: #2a2a2d; }
html[data-look="volare"] .player-stage--empty { background: #2a2a2d; color: var(--v-salt-60); }
html[data-look="volare"] .player-note { color: var(--v-salt-60); }
html[data-look="volare"] .player-stage--art { --pa-dot: 135, 153, 195; --pa-hi: 248, 247, 242; } /* periwinkle dots, salt highlight (halftone.js DARK) */
html[data-look="volare"] .player-play { background: var(--dk-b-f8f7f2a92, rgba(248, 247, 242, .92)); color: var(--v-charcoal); } /* styles.css:188 */
html[data-look="volare"] .player-stage video { background: #2a2a2d; }
html[data-look="volare"] .rv-player.is-before .card.player { box-shadow: var(--v-frame-shadow), 0 0 0 2px var(--v-periwinkle); }

/* Before / After: the landing's compare toggle (styles.css:202-204). */
html[data-look] .player-stage .ba { border-radius: 12px; padding: 3px; }
html[data-look="volare"] .player-stage .ba { background: var(--dk-b-1f1f21a72, rgba(31, 31, 33, .72)); }
html[data-look] .ba button { border-radius: 8px; font: 500 var(--fs-meta)/1 var(--v-font); }
html[data-look="volare"] .ba button { color: rgba(248, 247, 242, .86); }
html[data-look="volare"] .ba button[aria-pressed="true"] { background: var(--v-salt); color: var(--v-charcoal); }
/* On the dark player the periwinkle ring disappears; salt shows. */
html[data-look="volare"] .ba button:focus-visible { outline: 2px solid var(--v-salt); outline-offset: 2px; }
html[data-look="volare"] .rv-applying { background: var(--dk-b-1f1f21a45, rgba(31, 31, 33, .45)); }             /* styles.css:181 */
html[data-look] .rv-applying-card { border-radius: 12px; }                                  /* styles.css:183 */
html[data-look="volare"] .rv-applying-card { background: var(--v-salt); }

/* ================================================================ *
 * HOME
 * ================================================================ */
html[data-look] .hero { padding-top: 8px; }
html[data-look] .hero-actions { margin-top: 20px; }
/* Empty and first-run states are one calm block on the page ground (css/states.css):
   no panel, no card inside a card. The old wrappers keep their class names and
   simply stop drawing a surface of their own. */
html[data-look="volare"] .empty-art > canvas.halftone { display: none; }
html[data-look="volare"] .new-plus { background: var(--v-ink-06); color: var(--v-charcoal); }
html[data-look="volare"] .empty-body,
html[data-look="volare"] .card-empty-body { color: var(--v-charcoal); }

/* ================================================================ *
 * CREATE
 * ================================================================ */
/* The drop zone. Volare carries the halftone behind a salt label; Classic its dashed line. */
html[data-look] .drop {
  position: relative; isolation: isolate; overflow: hidden;
  border: 0; border-radius: 12px; padding: 28px;
}
html[data-look="volare"] .drop { background: var(--v-periwinkle); }
html[data-look="classic"] .drop:not(:focus-visible) { outline: 1px dashed var(--dashed); outline-offset: -1px; }
html[data-look="classic"] .drop:not(:focus-visible):hover { outline-color: var(--dashed-hover); }
html[data-look="classic"] .drop.is-over { outline: 0; }
html[data-look="volare"] .drop > canvas.halftone { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
html[data-look] .drop .drop-text { flex: 0 1 auto; padding: 10px 16px; border-radius: 12px; }
html[data-look="volare"] .drop .drop-text { background: var(--v-salt); box-shadow: var(--v-shadow); }
html[data-look="volare"] .drop .new-plus { background: var(--v-salt); }
html[data-look="volare"] .drop .btn--light { background: var(--v-salt); box-shadow: none; }
html[data-look="volare"] .drop:hover { background: var(--v-periwinkle); }
html[data-look="volare"] .drop.is-over { box-shadow: inset 0 0 0 2px var(--v-charcoal); background: var(--v-periwinkle); }
html[data-look] .drop.is-busy { opacity: .6; }

/* ================================================================ *
 * REVIEW
 * ================================================================ */
html[data-look] .tline-main { font-size: var(--fs-body); line-height: 1.42; border-radius: 12px; }  /* styles.css:128-130 */
html[data-look="volare"] .tline-main { color: var(--v-ink-60); }
html[data-look="volare"] .tline-main:hover { background: var(--v-ink-06); }                        /* styles.css:132 */
html[data-look="volare"] .tline.is-now .tline-main { color: var(--v-charcoal); }                  /* styles.css:134 */
html[data-look] .tline.is-sel { border-radius: 12px; }
html[data-look="volare"] .tline.is-sel { background: var(--v-peri-12); box-shadow: inset 2px 0 0 var(--v-periwinkle); } /* styles.css:134-135 */
html[data-look="volare"] .tline.is-sel .tline-main { color: var(--v-charcoal); }
html[data-look="volare"] .tline.is-cut .tline-tx { color: var(--v-ink-60); }
html[data-look] .tline-act { border-radius: 12px; font-family: var(--v-font); }               /* the landing's chips, styles.css:158-162 */
html[data-look="volare"] .tline-act { background: var(--v-ink-06); color: var(--v-charcoal); }
html[data-look="volare"] .tline-act:hover { background: var(--v-ink-12); }
html[data-look] .tnote-state { border-radius: 12px; font-family: var(--v-font); }
html[data-look="volare"] .rv-composer { border-top-color: var(--v-ink-06); }
html[data-look] .gitem { border-radius: 12px; }
html[data-look="volare"] .gitem:hover { background: var(--v-ink-06); }
html[data-look="volare"] .gitem.is-sel { background: var(--v-peri-12); border-color: transparent; }
html[data-look="volare"] .rv-g + .rv-g { border-top-color: var(--v-ink-06); }
html[data-look="volare"] .rv-chap:hover { background: var(--v-ink-06); }
html[data-look] .rv-title { font: var(--type-section); letter-spacing: -.02em; }

/* ================================================================ *
 * BRAND (its page stylesheet declares its own blues on :root)
 * ================================================================ */
html[data-look="volare"] {
  --blue: var(--dk-inv, #1F1F21);
  --blue-line: #8799C3;
  --blue-soft: rgba(135, 153, 195, .14);
  --pill: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06));
  --tile-line: var(--dk-l-1f1f21a6, rgba(31, 31, 33, .06));
  --tile-bg: var(--dk-b-f8f7f2, #F8F7F2);
}
html[data-look="volare"] .head-note { color: var(--v-ink-60); }
html[data-look="volare"] .sw-name { color: var(--v-ink-60); }
html[data-look="volare"] .chipdot { box-shadow: inset 0 0 0 1px var(--v-ink-12); }
html[data-look="volare"] .pref-head .i,
html[data-look="volare"] .frame-icon { color: var(--v-charcoal); }
html[data-look] .seg { border: 0; border-radius: 12px; padding: 2px; }
html[data-look="volare"] .seg { box-shadow: var(--v-line); background: var(--v-alabaster); }
html[data-look="classic"] .seg { box-shadow: inset 0 0 0 1px var(--line); }
html[data-look] .seg-opt { border-radius: 10px; }
html[data-look="volare"] .seg-opt { color: var(--v-ink-60); border-color: transparent; }
html[data-look="volare"] .seg-opt.is-on { background: var(--v-periwinkle); border-color: transparent; color: var(--v-charcoal); }
html[data-look] .frames .frame { border: 0; border-radius: 12px; }
html[data-look="volare"] .frames .frame { box-shadow: var(--v-line); background: var(--v-salt); }
html[data-look="classic"] .frames .frame { box-shadow: inset 0 0 0 1px var(--line); }
html[data-look="volare"] .frames .frame.is-on { background: var(--v-peri-12); box-shadow: inset 0 0 0 1px var(--v-periwinkle); }
html[data-look="classic"] .frames .frame.is-on { box-shadow: inset 0 0 0 1px var(--blue-line); }
html[data-look="volare"] .frame.is-on .frame-text strong { color: var(--v-charcoal); }
html[data-look="volare"] .slider-track::before { background: var(--v-ink-12); }
html[data-look="volare"] .slider-fill { background: var(--v-periwinkle); }
html[data-look="volare"] .stop { border-color: var(--v-ink-12); background: var(--v-salt); }
html[data-look="volare"] .stop.is-on { background: var(--v-periwinkle); border-color: var(--v-periwinkle); box-shadow: 0 0 0 3px var(--v-salt), 0 0 0 4.5px var(--v-periwinkle); }
html[data-look] .ref-add { border-radius: 12px; }
html[data-look="volare"] .ref-add { border-color: var(--v-ink-12); background: transparent; }
html[data-look="volare"] .ref-add:hover { background: var(--v-ink-06); border-color: var(--v-ink-60); }
html[data-look="volare"] .add-dot { background: var(--v-charcoal); color: var(--v-salt); }
html[data-look] .ref { border-radius: 12px; }
html[data-look="volare"] .ref { border-color: transparent; box-shadow: var(--v-line); }
html[data-look] .tagpill { border-radius: 8px; }
html[data-look="volare"] .tagpill { background: var(--v-ink-06); color: var(--v-charcoal); }
html[data-look="volare"] .learned-icon { background: var(--v-ink-06); color: var(--v-charcoal); }
html[data-look="volare"] .typo-aa { color: var(--v-charcoal); }
html[data-look] .sw-name { letter-spacing: 0; }

html[data-look="volare"] .typo-sep { background: var(--v-ink-12); }

/* ================================================================ *
 * SETTINGS, INSIGHTS
 * ================================================================ */
html[data-look] .set-nav-item { border-radius: 10px; }
html[data-look="volare"] .set-nav-item { color: var(--v-charcoal); }
html[data-look="volare"] .set-nav-item .i { color: var(--v-charcoal); }
html[data-look="volare"] .set-nav-item:hover { background: var(--v-ink-06); }
html[data-look="volare"] .set-nav-item.is-active { background: var(--v-peri-12); }
html[data-look="volare"] .split-right { border-left-color: var(--v-ink-12); }
html[data-look="volare"] .gridline { stroke: var(--v-ink-06); }
html[data-look="volare"] .gridline--base { stroke: var(--v-ink-12); }
html[data-look="volare"] .chart .bar { fill: var(--v-periwinkle); }
html[data-look="volare"] .chart .bar:hover { fill: var(--v-charcoal); }
html[data-look] .axis { font-family: var(--v-font); }
html[data-look="volare"] .axis { fill: var(--v-ink-60); }
html[data-look="volare"] .faq-foot { border-top-color: var(--v-ink-12); }

/* ================================================================ *
 * MOTION — one motion: a route's first paint fades and rises 6px, once,
 * in --motion (the .ui-in keyframes in styles.css). Nothing lifts or
 * bounces on hover. Off under prefers-reduced-motion and under the app's
 * own reduced-motion preference.
 * ================================================================ */
html[data-look] .outlet.is-enter > * { animation: ui-in var(--motion) var(--ease) both; }
html[data-look] .card,
html[data-look] .attn,
html[data-look] .project,
html[data-look] .vcard { transition: background-color var(--motion), box-shadow var(--motion); }
html[data-look="volare"] a.vcard:hover,
html[data-look="volare"] .vcard:has(a:hover) { box-shadow: var(--v-line-2), var(--v-shadow); }

/* The toast's one action and the rename field. */
html[data-look="volare"] .toast-act { color: var(--v-periwinkle); }

/* Text people read uses --muted, never --faint (placeholders and disabled
   labels only). Classic's own rules use --faint for these; Volare re-points
   them at the existing --muted token. */
html[data-look="volare"] .spark-range,
html[data-look="volare"] .menu-group,
html[data-look="volare"] .stepper--idle .step { color: var(--muted); }
html[data-look="volare"] input[type="checkbox"],
html[data-look="volare"] input[type="radio"] { accent-color: var(--v-charcoal); }

/* Integration actions appear only when the service is set up in this copy. */
#drivePick[hidden], #driveExport[hidden] { display: none !important; }

/* Editing style picker: the same tile as the Brand page's framing tiles */
html[data-look] .style-opt { border: 0; border-radius: 12px; }
html[data-look="volare"] .style-opt { box-shadow: var(--v-line); background: var(--v-salt); }
html[data-look="classic"] .style-opt { box-shadow: inset 0 0 0 1px var(--line); }
html[data-look="volare"] .style-opt:hover { box-shadow: var(--v-line); background: var(--v-alabaster); }
html[data-look="classic"] .style-opt:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-look="volare"] .style-opt.is-on { background: var(--v-peri-12); box-shadow: inset 0 0 0 1px var(--v-periwinkle); }
html[data-look="classic"] .style-opt.is-on { box-shadow: inset 0 0 0 1px var(--blue-line); }
html[data-look="volare"] .style-opt.is-on .style-opt-name { color: var(--v-charcoal); }


/* ================================================================ *
 * Q2 POLISH (Volare + Classic): one selected state, one card, no card in a card,
 * one checkbox row, focus ring, help-button clearance.
 * Selectors stay tolerant of a wrapper being removed (descendant, not child).
 * ================================================================ */
html[data-look] { --select-bg: var(--dk-b-eef1f6, #EEF1F6); --card-radius: 12px; }
html[data-look="volare"] { --select-bg: var(--v-peri-24); }

/* One selected-state token across the sidebar, the settings sub-nav and the Look tiles: a tinted fill, no outline. */
html[data-look] .nav-item.is-active,
html[data-look] .set-nav-item.is-active,
html[data-look] .look-opt.is-on { background: var(--select-bg); box-shadow: none; border-color: transparent; }
/* Look tiles are flat: the tile has no frame of its own, the picture and the tick carry it. */
html[data-look] .look-opt,
html[data-look="volare"] .look-opt { border: 0; border-radius: var(--card-radius); box-shadow: none; background: transparent; }
html[data-look] .look-opt:hover { background: var(--hover-bg); box-shadow: none; }
html[data-look] .look-opt:focus-within { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }

/* A card inside a card is never framed: the inner one gives up its border, fill, shadow and padding. */
html[data-look] .card .card.set-card,
html[data-look] .set-surface .card.set-card,
html[data-look] .set-surface .set-card {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; outline: 0;
}
html[data-look] .billing-page { display: block; }
html[data-look] .billing-page .field-value a, .set-surface .field-value, .set-surface .field-value a { overflow-wrap: anywhere; min-width: 0; }
html[data-look] .billing-page .fields > *, .set-surface .fields > * { min-width: 0; }

/* Dashed buttons are standard secondary buttons. */
html[data-look] .btn[style*="dashed"], html[data-look] .btn--dashed { border-style: solid; }

/* Checkbox rows: one component. The box sits on the first label line; every row has the same indent. */
html[data-look] .pref-label,
html[data-look] .tn-choice,
html[data-look] .tn-who label { display: flex; align-items: flex-start; gap: var(--s3); }
html[data-look] .tn-choice { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr); }
html[data-look] .pref-label input[type="checkbox"],
html[data-look] .tn-choice input[type="checkbox"],
html[data-look] .tn-choice input[type="radio"] { width: 1.05rem; height: 1.05rem; flex: none; margin: 0.2rem 0 0; }
html[data-look] .mn-desktop .pref-label { align-items: flex-start; }
html[data-look] .pref-label > span, html[data-look] .tn-choice-text { gap: var(--s1); }

/* Disabled permission rows read at full label contrast; only the control is dimmed. */
html[data-look] .tn-choice:has(input:disabled) .tn-choice-text { opacity: 1; }
html[data-look] .tn-choice:has(input:disabled) .tn-choice-text small { color: var(--ink); }
html[data-look] input[type="checkbox"]:disabled,
html[data-look] input[type="radio"]:disabled { opacity: 1; accent-color: var(--muted); cursor: not-allowed; }
html[data-look] input[type="checkbox"]:disabled:not(:checked) {
  appearance: none; -webkit-appearance: none; border-radius: 4px; background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--muted);
}
/* A disabled radio never looks chosen: an empty ring, whatever its state. */
html[data-look] input[type="radio"]:disabled {
  appearance: none; -webkit-appearance: none; border-radius: 50%; background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--muted);
}
html[data-look] .tn-who label { align-items: center; }
html[data-look] .tn-who input[type="radio"] { margin: 0; }
/* Control borders reach 3:1 on both looks. */
html[data-look="classic"] input[type="checkbox"]:not(:checked):not(:disabled),
html[data-look="classic"] input[type="radio"]:not(:checked):not(:disabled) { accent-color: var(--ink-strong); }

/* Focus: the brand ring everywhere; no heavy black outline on inputs. */
html[data-look="volare"] :focus-visible { outline: 2px solid var(--v-periwinkle); outline-offset: 3px; }
html[data-look="volare"] :where(a, button, [tabindex]:not([tabindex="-1"]), summary, .nav-item, .icon-btn, .avatar):focus-visible { outline: 2px solid var(--v-periwinkle); outline-offset: 3px; }
html[data-look="volare"] .input:focus-visible, html[data-look="volare"] textarea:focus-visible, html[data-look="volare"] .select select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--v-periwinkle); }
html[data-look="classic"] .input:focus-visible, html[data-look="classic"] textarea:focus-visible { outline: none; }

/* Classic control borders reach 3:1 on their ground. */
html[data-look="classic"] .input,
html[data-look="classic"] textarea.input,
html[data-look="classic"] .select select { box-shadow: inset 0 0 0 1px #7F8B9C; }
html[data-look="classic"] .input:hover,
html[data-look="classic"] .select select:hover { box-shadow: inset 0 0 0 1px var(--dk-l-5f6c7e, #5F6C7E); }
html[data-look="classic"] .btn--outline, html[data-look="classic"] .btn--light { box-shadow: inset 0 0 0 1px #7F8B9C; }
html[data-look="classic"] .seg { box-shadow: inset 0 0 0 1px #7F8B9C; }
html[data-look="classic"] .btn--primary { font-size: max(1rem, var(--fs-body)); }