/* OVision Discovery OS — the dark scheme.

   Loaded after ovision.css and after every per-page sheet, in every shell.
   The product runs on the tokens declared in ovision.css's :root, so most of
   a dark theme is a second token block; the rest is the handful of surfaces
   the light sheet pins to a literal colour (the washes, the near-black
   buttons, the glass over the wash, the RUO strip) — those get a token here
   whose light value is the literal it replaces, and one override rule each
   written against the token. Light is therefore unchanged to the pixel, and
   dark is a value change, not a second stylesheet.

   Ground is plum-black rather than grey: the H&E palette on paper becomes
   the same palette on a slide box. Eosin stays the brand, haematoxylin the
   counterpart, and every scientific state keeps its own colour, lifted so it
   clears WCAG AA on the dark paper (tests/discovery/test_theme.py measures).

   Three states, decided by the server, never by script:
     <html data-theme="dark">   the block below;
     <html data-theme="light">  nothing here applies;
     <html>                     "system": the prefers-color-scheme block.
   The two dark blocks are byte-identical; the test compares them. */

/* ------------------------------------------------ the surface tokens, light
   Each value is the literal ovision.css (or a per-page sheet) hardcodes. */
:root {
  color-scheme: light;
  --shadow-ink: 24, 24, 27;
  --heading: #18181b;
  --heading-sub: #52525b;
  --land-canvas: #fbfbfa;
  /* The measured curve's fill. On cream the brand ramp under the line is
     simply itself at low alpha; see the dark block for why it cannot be. */
  --trend-blend: normal; --trend-fill-top: .5; --trend-fill-mid: .16;
  --land-bar: rgba(251, 248, 249, .82);
  --land-hover: rgba(35, 21, 29, .06);
  --btn-bg: #18181b; --btn-bg-hover: #27272a; --btn-fg: #fff;
  --primary-bg: #18181b; --primary-bg-hover: #27272a; --primary-fg: #fff;
  --danger-bg: var(--red); --danger-bg-hover: #8f231c;
  --send-bg: #18181b; --send-bg-hover: #3f3f46; --send-fg: #fff;
  --avatar-bg: #3f3f46; --avatar-fg: #fff;
  --skip-bg: #18181b; --skip-fg: #fff;
  --ruo-bg: #18181b; --ruo-fg: #d4d4d8; --ruo-strong: #fff;
  --glass: rgba(255, 255, 255, .86);
  --glass-strong: rgba(255, 255, 255, .92);
  --glass-line: rgba(24, 24, 27, .08);
  --glass-line-focus: rgba(79, 70, 229, .45);
  --glass-hover: rgba(24, 24, 27, .04);
  --glass-hover-2: rgba(24, 24, 27, .06);
  --pill-glass: rgba(255, 255, 255, .8); --pill-glass-hover: #fff;
  --card-glass: rgba(255, 255, 255, .95);
  --jump-glass: rgba(255, 255, 255, .78); --jump-glass-hover: rgba(255, 255, 255, .95);
  --jump-art: linear-gradient(160deg, var(--canvas-2), #fff);
  --white-panel: #fff;
  --foot-bg: #f4f4f5;
  --how-bg: #18181b;
  --chip-fg: #7d5215; --chip-bg-hover: #fbeed6; --chip-fg-hover: #6a4512; --chip-ev-bg-hover: #e3eef8;
  --prov-fg: #3f3f46;
  --palette-scrim: rgba(24, 24, 27, .38);
  --gen-claim-bg: #eef2ff; --gen-score-bg: #fff3ea; --gen-score-fg: #b8562a;
  --haem-soft: #f4f4f5;
  /* The drawn pointer in the middle card, and the edges its panels carry. On
     paper the arrow is the page's own near-black; on a dark card that is the
     card, so the arrow disappeared into the panel it was pointing at. */
  --pointer-fill: #18181b; --pointer-ring: rgba(255, 255, 255, .85);
  --mini-edge: transparent; --trio-edge: var(--line);
  --ob-back-hover: rgba(255, 255, 255, .7);
  --sso-fg: #18181b; --sso-hover-bg: #fafafa; --sso-hover-line: #d4d4d8;
  --wash-closing:
    radial-gradient(52% 30% at 50% 22%, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 26% at 2% 54%,  #8fa0ff 0%, transparent 62%),
    radial-gradient(40% 26% at 98% 52%, #a996ff 0%, transparent 62%),
    radial-gradient(64% 30% at 50% 96%, #ff5fae 0%, transparent 66%),
    radial-gradient(44% 24% at 8% 106%, #ff8a6f 0%, transparent 60%),
    radial-gradient(44% 24% at 92% 106%, #ff4e8f 0%, transparent 60%),
    linear-gradient(180deg, #fbf8f9 0%, #f0eefb 16%, #dcdcff 40%, #c9b6ff 58%, #ffa9d5 82%, #ff6f9e 100%);
  --wash-trio:
    radial-gradient(60% 60% at 20% 20%, rgba(107, 70, 168, .18), transparent 70%),
    radial-gradient(60% 60% at 90% 90%, rgba(244, 144, 94, .18), transparent 70%),
    linear-gradient(160deg, #fdf5f8, #f7eef3);
}

/* --------------------------------------------------- the dark tokens
   Once for the explicit choice. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* The brand ramp, lifted so links and headings clear AA on plum paper.
     ink-500 keeps its value: it is a fill and a focus ring, never small type. */
  --ink-900: #eef2ff;
  --ink-800: #e0e7ff;
  --ink-700: #c7d2fe;
  --ink-600: #a5b4fc;
  --ink-500: #6366f1;

  --text: #f4f4f5;
  --text-2: #c4c4cb;
  --text-3: #a3a3ad;

  /* Plum-black ground; paper a step lighter so a card still reads as a card. */
  --paper: #2c2c31;
  --canvas: #232327;
  --canvas-2: #35353b;
  --line: #3a3a41;
  --line-2: #4b4b53;

  /* Every scientific state keeps its hue, lifted for the dark paper; the
     washes and rules behind them go deep instead of pale. */
  --amber: #f0b45a;  --amber-2: #3d2e1e;  --amber-line: #55401f;
  --green: #5fd0a0;  --green-2: #1a3c2e;  --green-line: #1f4d38;
  --red: #f58b80;    --red-2: #442320;    --red-line: #5a2a26;
  --blue: #86bdf0;   --blue-2: #1e2f40;   --blue-line: #274362;
  --violet: #c2a8f2; --violet-2: #312e81; --violet-line: #3730a3;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-3: 0 24px 60px -18px rgba(0, 0, 0, .75);
  --shadow-ink: 0, 0, 0;

  /* The surfaces the light sheet pins to a literal. */
  --heading: #f4f4f5;
  --heading-sub: #c4c4cb;
  --land-canvas: #232327;
  /* The curve's fill, chosen for this ground rather than inherited from the
     light one. A saturated eosin at 50% alpha over plum-black is a dark
     maroon — the fill went muddy and the line lost its glow — so on dark it
     is screened onto the ground, which makes the same ramp luminous instead
     of dirty, and the top stop carries a little further.
     This is the dataviz rule that dark mode is selected, not flipped. */
  --trend-blend: screen; --trend-fill-top: .62; --trend-fill-mid: .2;
  --land-bar: rgba(18, 14, 21, .82);
  --land-hover: rgba(255, 255, 255, .08);
  /* The near-black buttons become the light thing on the page. */
  --btn-bg: #f4f4f5; --btn-bg-hover: #ffffff; --btn-fg: #18181b;
  --primary-bg: #f4f4f5; --primary-bg-hover: #ffffff; --primary-fg: #18181b;
  --danger-bg: #b3352c; --danger-bg-hover: #c9463c;
  --send-bg: #f4f4f5; --send-bg-hover: #ffffff; --send-fg: #18181b;
  --avatar-bg: #52525b; --avatar-fg: #ffffff;
  --skip-bg: #f4f4f5; --skip-fg: #18181b;
  --ruo-bg: #1c1c1f; --ruo-fg: #d4d4d8; --ruo-strong: #ffffff;
  --glass: rgba(44, 44, 49, .9);
  --glass-strong: rgba(44, 44, 49, .95);
  --glass-line: rgba(255, 255, 255, .1);
  --glass-line-focus: rgba(165, 180, 252, .55);
  --glass-hover: rgba(255, 255, 255, .06);
  --glass-hover-2: rgba(255, 255, 255, .09);
  --pill-glass: rgba(44, 44, 49, .82); --pill-glass-hover: #34343a;
  --card-glass: rgba(44, 44, 49, .95);
  --jump-glass: rgba(44, 44, 49, .82); --jump-glass-hover: rgba(52, 52, 58, .96);
  --jump-art: linear-gradient(160deg, var(--canvas-2), #2f2438);
  --white-panel: #35353b;
  --foot-bg: #2c2c31;
  --how-bg: #1c1c1f;
  --chip-fg: #f0c98a; --chip-bg-hover: #4b3924; --chip-fg-hover: #f6d9a8; --chip-ev-bg-hover: #274362;
  --prov-fg: #3f3f46;
  --palette-scrim: rgba(0, 0, 0, .62);
  --gen-claim-bg: #312e81; --gen-score-bg: #3f2c21; --gen-score-fg: #f3a37a;
  --haem-soft: #35353b;
  /* The pointer inverts and keeps a dark ring, so it reads wherever the wash
     behind it lands. The panels and the cards gain a real edge: at --line on
     plum paper a card had no visible outline at all. */
  --pointer-fill: #f3ecf0; --pointer-ring: rgba(10, 7, 12, .75);
  --mini-edge: #3a3a41; --trio-edge: #3a3a41;
  --ob-back-hover: rgba(255, 255, 255, .08);
  --sso-fg: #f4f4f5; --sso-hover-bg: #34343a; --sso-hover-line: #4b4b53;
  /* The H&E wash, in the dark: deep plum at the top, haematoxylin through the
     middle, eosin and the warm stain at the foot. The bloom behind the type is
     now a dark one, doing the same job of keeping the headline off the stain. */
  --wash-closing:
    radial-gradient(52% 30% at 50% 22%, rgba(18, 14, 21, .92) 0%, rgba(18, 14, 21, 0) 70%),
    radial-gradient(40% 26% at 2% 54%,  #5a3fd6 0%, transparent 62%),
    radial-gradient(40% 26% at 98% 52%, #7a52e6 0%, transparent 62%),
    radial-gradient(64% 30% at 50% 96%, #e1337c 0%, transparent 66%),
    radial-gradient(44% 24% at 8% 106%, #ff6a5c 0%, transparent 60%),
    radial-gradient(44% 24% at 92% 106%, #ff3d7f 0%, transparent 60%),
    linear-gradient(180deg, #120e15 0%, #191328 16%, #2b1f4d 40%, #45307f 58%, #8f2a68 82%, #b3245c 100%);
  --wash-trio:
    radial-gradient(60% 60% at 20% 20%, rgba(107, 70, 168, .30), transparent 70%),
    radial-gradient(60% 60% at 90% 90%, rgba(244, 144, 94, .10), transparent 70%),
    linear-gradient(160deg, #221a2b, #191320);
  --ov-wave:
    linear-gradient(180deg, #1c1c1d 0%, rgba(28, 28, 29, .85) 7%, rgba(28, 28, 29, 0) 22%),
    radial-gradient(30% 62% at 50% 0%, #1c1c1d 0%, #1c1c1d 52%, rgba(28, 28, 29, .55) 76%, rgba(28, 28, 29, 0) 100%),
    radial-gradient(32% 28% at 20% 104%, #e83c66 0%, rgba(232, 60, 102, .7) 45%, rgba(232, 60, 102, 0) 100%),
    radial-gradient(32% 28% at 80% 104%, #e83c66 0%, rgba(232, 60, 102, .7) 45%, rgba(232, 60, 102, 0) 100%),
    radial-gradient(38% 48% at 12% 84%, #ed7ad8 0%, #ec78d5 36%, rgba(236, 120, 213, 0) 100%),
    radial-gradient(38% 48% at 88% 84%, #ed7ad8 0%, #ec78d5 36%, rgba(236, 120, 213, 0) 100%),
    radial-gradient(20% 30% at 50% 66%, #4f5ed4 0%, rgba(79, 94, 212, .8) 40%, rgba(79, 94, 212, 0) 100%),
    linear-gradient(180deg, #1d1e24 0%, #222537 12%, #2c3566 20%, #3b4ba4 28%, #475cd5 36%, #5667eb 46%, #5d65e8 58%, #7a69e5 68%, #b070dc 78%, #dc6fc8 87%, #e9589c 94%, #e84474 100%);
  --ov-wave-ground: #1c1c1d;
  --ov-wave-foot: #e84474;
  /* lovable.dev's dark hero, measured like the light one (ovision.css): the
     same royal blue, orchid and rose on a charcoal top instead of cream. White
     text sits on the charcoal; the vivid lower bands carry no bare text. */
  --on-wave: #ffffff;
  --on-wave-2: #ffffff;
  --on-wave-3: #ffffff;
  --on-wave-plate: rgba(255, 255, 255, .08);
  --on-wave-hover: rgba(255, 255, 255, .12);
  --on-wave-line: rgba(255, 255, 255, .38);
  --ground: #141416;
  --panel: #1c1c1f;
}

/* Once more for "system" when the operating system is dark. This block is
   byte-identical to the one above (the test compares them); keep it so. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* The brand ramp, lifted so links and headings clear AA on plum paper.
       ink-500 keeps its value: it is a fill and a focus ring, never small type. */
    --ink-900: #eef2ff;
    --ink-800: #e0e7ff;
    --ink-700: #c7d2fe;
    --ink-600: #a5b4fc;
    --ink-500: #6366f1;

    --text: #f4f4f5;
    --text-2: #c4c4cb;
    --text-3: #a3a3ad;

    /* Plum-black ground; paper a step lighter so a card still reads as a card. */
    --paper: #2c2c31;
    --canvas: #232327;
    --canvas-2: #35353b;
    --line: #3a3a41;
    --line-2: #4b4b53;

    /* Every scientific state keeps its hue, lifted for the dark paper; the
       washes and rules behind them go deep instead of pale. */
    --amber: #f0b45a;  --amber-2: #3d2e1e;  --amber-line: #55401f;
    --green: #5fd0a0;  --green-2: #1a3c2e;  --green-line: #1f4d38;
    --red: #f58b80;    --red-2: #442320;    --red-line: #5a2a26;
    --blue: #86bdf0;   --blue-2: #1e2f40;   --blue-line: #274362;
    --violet: #c2a8f2; --violet-2: #312e81; --violet-line: #3730a3;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-3: 0 24px 60px -18px rgba(0, 0, 0, .75);
    --shadow-ink: 0, 0, 0;

    /* The surfaces the light sheet pins to a literal. */
    --heading: #f4f4f5;
    --heading-sub: #c4c4cb;
    --land-canvas: #232327;
  /* The curve's fill, chosen for this ground rather than inherited from the
     light one. A saturated eosin at 50% alpha over plum-black is a dark
     maroon — the fill went muddy and the line lost its glow — so on dark it
     is screened onto the ground, which makes the same ramp luminous instead
     of dirty, and the top stop carries a little further.
     This is the dataviz rule that dark mode is selected, not flipped. */
  --trend-blend: screen; --trend-fill-top: .62; --trend-fill-mid: .2;
    --land-bar: rgba(18, 14, 21, .82);
    --land-hover: rgba(255, 255, 255, .08);
    /* The near-black buttons become the light thing on the page. */
    --btn-bg: #f4f4f5; --btn-bg-hover: #ffffff; --btn-fg: #18181b;
    --primary-bg: #f4f4f5; --primary-bg-hover: #ffffff; --primary-fg: #18181b;
    --danger-bg: #b3352c; --danger-bg-hover: #c9463c;
    --send-bg: #f4f4f5; --send-bg-hover: #ffffff; --send-fg: #18181b;
    --avatar-bg: #52525b; --avatar-fg: #ffffff;
    --skip-bg: #f4f4f5; --skip-fg: #18181b;
    --ruo-bg: #1c1c1f; --ruo-fg: #d4d4d8; --ruo-strong: #ffffff;
    --glass: rgba(44, 44, 49, .9);
    --glass-strong: rgba(44, 44, 49, .95);
    --glass-line: rgba(255, 255, 255, .1);
    --glass-line-focus: rgba(165, 180, 252, .55);
    --glass-hover: rgba(255, 255, 255, .06);
    --glass-hover-2: rgba(255, 255, 255, .09);
    --pill-glass: rgba(44, 44, 49, .82); --pill-glass-hover: #34343a;
    --card-glass: rgba(44, 44, 49, .95);
    --jump-glass: rgba(44, 44, 49, .82); --jump-glass-hover: rgba(52, 52, 58, .96);
    --jump-art: linear-gradient(160deg, var(--canvas-2), #2f2438);
    --white-panel: #35353b;
    --foot-bg: #2c2c31;
    --how-bg: #1c1c1f;
    --chip-fg: #f0c98a; --chip-bg-hover: #4b3924; --chip-fg-hover: #f6d9a8; --chip-ev-bg-hover: #274362;
    --prov-fg: #3f3f46;
    --palette-scrim: rgba(0, 0, 0, .62);
    --gen-claim-bg: #312e81; --gen-score-bg: #3f2c21; --gen-score-fg: #f3a37a;
    --haem-soft: #35353b;
  /* The pointer inverts and keeps a dark ring, so it reads wherever the wash
     behind it lands. The panels and the cards gain a real edge: at --line on
     plum paper a card had no visible outline at all. */
  --pointer-fill: #f3ecf0; --pointer-ring: rgba(10, 7, 12, .75);
  --mini-edge: #3a3a41; --trio-edge: #3a3a41;
    --ob-back-hover: rgba(255, 255, 255, .08);
    --sso-fg: #f4f4f5; --sso-hover-bg: #34343a; --sso-hover-line: #4b4b53;
    /* The H&E wash, in the dark: deep plum at the top, haematoxylin through the
       middle, eosin and the warm stain at the foot. The bloom behind the type is
       now a dark one, doing the same job of keeping the headline off the stain. */
    --wash-closing:
      radial-gradient(52% 30% at 50% 22%, rgba(18, 14, 21, .92) 0%, rgba(18, 14, 21, 0) 70%),
      radial-gradient(40% 26% at 2% 54%,  #5a3fd6 0%, transparent 62%),
      radial-gradient(40% 26% at 98% 52%, #7a52e6 0%, transparent 62%),
      radial-gradient(64% 30% at 50% 96%, #e1337c 0%, transparent 66%),
      radial-gradient(44% 24% at 8% 106%, #ff6a5c 0%, transparent 60%),
      radial-gradient(44% 24% at 92% 106%, #ff3d7f 0%, transparent 60%),
      linear-gradient(180deg, #120e15 0%, #191328 16%, #2b1f4d 40%, #45307f 58%, #8f2a68 82%, #b3245c 100%);
    --wash-trio:
      radial-gradient(60% 60% at 20% 20%, rgba(107, 70, 168, .30), transparent 70%),
      radial-gradient(60% 60% at 90% 90%, rgba(244, 144, 94, .10), transparent 70%),
      linear-gradient(160deg, #221a2b, #191320);
    --ov-wave:
    linear-gradient(180deg, #1c1c1d 0%, rgba(28, 28, 29, .85) 7%, rgba(28, 28, 29, 0) 22%),
    radial-gradient(30% 62% at 50% 0%, #1c1c1d 0%, #1c1c1d 52%, rgba(28, 28, 29, .55) 76%, rgba(28, 28, 29, 0) 100%),
    radial-gradient(32% 28% at 20% 104%, #e83c66 0%, rgba(232, 60, 102, .7) 45%, rgba(232, 60, 102, 0) 100%),
    radial-gradient(32% 28% at 80% 104%, #e83c66 0%, rgba(232, 60, 102, .7) 45%, rgba(232, 60, 102, 0) 100%),
    radial-gradient(38% 48% at 12% 84%, #ed7ad8 0%, #ec78d5 36%, rgba(236, 120, 213, 0) 100%),
    radial-gradient(38% 48% at 88% 84%, #ed7ad8 0%, #ec78d5 36%, rgba(236, 120, 213, 0) 100%),
    radial-gradient(20% 30% at 50% 66%, #4f5ed4 0%, rgba(79, 94, 212, .8) 40%, rgba(79, 94, 212, 0) 100%),
    linear-gradient(180deg, #1d1e24 0%, #222537 12%, #2c3566 20%, #3b4ba4 28%, #475cd5 36%, #5667eb 46%, #5d65e8 58%, #7a69e5 68%, #b070dc 78%, #dc6fc8 87%, #e9589c 94%, #e84474 100%);
    --ov-wave-ground: #1c1c1d;
    --ov-wave-foot: #e84474;
    /* lovable.dev's dark hero, measured like the light one (ovision.css): the
       same royal blue, orchid and rose on a charcoal top instead of cream. White
       text sits on the charcoal; the vivid lower bands carry no bare text. */
    --on-wave: #ffffff;
    --on-wave-2: #ffffff;
    --on-wave-3: #ffffff;
  --on-wave-plate: rgba(255, 255, 255, .08);
  --on-wave-hover: rgba(255, 255, 255, .12);
  --on-wave-line: rgba(255, 255, 255, .38);
    --ground: #141416;
    --panel: #1c1c1f;
  }
}

/* ------------------------------------------------------------ the surfaces
   Written once, against the tokens. Each rule repeats the selector the light
   sheet used at the same specificity, so it wins by order alone. */

/* Washes and grounds. */
.closing-wash { background: var(--wash-closing); }
.trio-art { background: var(--wash-trio); }
body.land { background: var(--land-canvas); }
.land-bar { background: var(--land-bar); }
.land-nav a:hover { background: var(--land-hover); }
.foot { background: var(--foot-bg); }
.how { background: var(--how-bg); }

/* Type the light sheet pinned to near-black. */
.hero-title, .band h2, .trio-card h3, .mini-guard b, .mini-list span.on, .stats dd, .closing h2,
.foot-cols h4, .dash-title, .ob-title, .auth-title,
.review-quote, .review-stats dd, .review-who b { color: var(--heading); }
.hero-sub { color: var(--heading-sub); }
.chip { color: var(--chip-fg); }
.chip:hover { background: var(--chip-bg-hover); color: var(--chip-fg-hover); }
.chip.ev:hover { background: var(--chip-ev-bg-hover); }
/* The provenance strip stays on a white slide thumbnail, so its type stays dark. */
.montage .tile .prov { color: var(--prov-fg); }

/* The research-use strip: the one line that must read in every scheme. */
.ruo-strip { background: var(--ruo-bg); color: var(--ruo-fg); }
.ruo-strip strong { color: var(--ruo-strong); }
/* Hover and focus keep the pair: a link's own hover colour (indigo) stood on
   this near-black plate at 2.2:1. */
.skip, .skip:hover, .skip:focus { background: var(--skip-bg); color: var(--skip-fg); }

/* Buttons and filled marks. */
button, .btn { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg); }
button:hover, .btn:hover { background: var(--primary-bg-hover); border-color: var(--primary-bg-hover); color: var(--primary-fg); }
button.danger, .btn.danger { background: var(--danger-bg); border-color: var(--danger-bg); color: #fff; }
button.danger:hover, .btn.danger:hover { background: var(--danger-bg-hover); border-color: var(--danger-bg-hover); color: #fff; }
.land-cta, .auth-go, .ob-go, a.ob-go { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.land-cta:hover, .auth-go:hover, .ob-go:hover, a.ob-go:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg); }
.composer-send { background: var(--send-bg); color: var(--send-fg); }
.composer-send:hover, .dash-composer .composer-send:hover { background: var(--send-bg-hover); }
.composer-send .ico { color: var(--send-fg); }
.avatar, .msg.assistant .who { background: var(--avatar-bg); color: var(--avatar-fg); }
.ob-back:hover, a.ob-back:hover { background: var(--ob-back-hover); }
.rail-upgrade .ico { background: var(--haem-soft); }

/* Glass: everything that floats on the wash. */
.composer {
  background: var(--glass); border-color: var(--glass-line);
  box-shadow: 0 1px 2px rgba(var(--shadow-ink), .04), 0 18px 44px -22px rgba(var(--shadow-ink), .3);
}
.composer:focus-within {
  border-color: var(--glass-line-focus);
  box-shadow: 0 1px 2px rgba(var(--shadow-ink), .04), 0 18px 44px -22px rgba(var(--shadow-ink), .34),
              0 0 0 3px rgba(222, 74, 123, .14);
}
.hero-composer {
  background: var(--glass-strong);
  box-shadow: 0 1px 2px rgba(var(--shadow-ink), .05), 0 24px 60px -24px rgba(var(--shadow-ink), .35);
}
.composer-select:hover { background: var(--glass-hover); }
.composer-select:focus-within { background: var(--glass-hover-2); }
.composer-plus:hover, .composer-plus[aria-expanded="true"],
.composer-mode:hover, .composer-mode[aria-expanded="true"] { background: var(--glass-hover); }
.dash-pill { background: var(--pill-glass); border-color: var(--glass-line); }
.dash-pill:hover { background: var(--pill-glass-hover); }
.jump-card { background: var(--jump-glass); border-color: var(--glass-line); }
.jump-card:hover { background: var(--jump-glass-hover); }
.jump-art { background: var(--jump-art); }
.ob-tile { background: var(--pill-glass); }
.ob-card { background: var(--card-glass); }
.mini-composer, .mini-guard, .mini-list {
  background: var(--white-panel);
  border: 1px solid var(--mini-edge);
  box-shadow: 0 10px 30px -14px rgba(var(--shadow-ink), .35);
}
/* A card needs an edge you can see. --line is a hairline between two light
   surfaces; on plum paper over a near-black page it drew nothing. */
.trio-card { border-color: var(--trio-edge); }
.dash-panel { box-shadow: 0 -2px 40px -18px rgba(var(--shadow-ink), .25); }
.auth-card { box-shadow: 0 30px 80px -30px rgba(var(--shadow-ink), .45), 0 1px 2px rgba(var(--shadow-ink), .06); }
.palette { background: var(--palette-scrim); }

/* The chat workspace's thumbnails. */
.gen-thumb.kind-claim { background: var(--gen-claim-bg); }
.gen-thumb.kind-scoreboard, .gen-thumb.kind-voi { background: var(--gen-score-bg); color: var(--gen-score-fg); }

/* Single sign-on buttons (auth-sso.css pins their type to near-black). */
.auth-sso-btn { color: var(--sso-fg); }
.auth-sso-btn:hover { background: var(--sso-hover-bg); border-color: var(--sso-hover-line); color: var(--sso-fg); }
.auth-sso-github svg { fill: var(--sso-fg); }

/* ------------------------------------------------- dark only, no light twin
   The fields ovision.css never styles (email, password, url, tel) take the
   browser's own dark field otherwise, which is legible but not this
   product's. Light keeps the browser default it always had. */
:root[data-theme="dark"] input[type=email], :root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] input[type=url], :root[data-theme="dark"] input[type=tel] {
  background: var(--paper); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type=email], :root:not([data-theme="light"]) input[type=password],
  :root:not([data-theme="light"]) input[type=url], :root:not([data-theme="light"]) input[type=tel] {
    background: var(--paper); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  }
}

/* The dark wash, scoped. This sheet's other surface rules are flat and lean on
   tokens that only change under the dark selectors; a wash written in literal
   hexes cannot do that, so it is scoped explicitly — once for an explicit
   choice, once for "system" on a dark OS — and never touches light. */
:root[data-theme="dark"] .hero-wash {
  background: var(--ov-wave);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-wash {
  background: var(--ov-wave);
  }
}

/* The landing's assistant and live card on charcoal (landing-extra.css):
   the same tokens, the ink buttons as the dark scheme's own. */
:root[data-theme="dark"] body.land .lt-helper-ask button,
:root[data-theme="dark"] body.land .lt-helper-open { background: var(--paper); color: var(--text); }