/* GENERATED by Scripts/sync_design_system.py from PageSoar's ui/css/01-glass.css (source sha256 1f6301e30c37b5df), theme: Nowlark (dark and orange).
   DO NOT EDIT. The design system is PageSoar's; Nowlark differs only by the theme in that script, and
   tests/test_the_design_system_is_pagesoars.py fails if this file is not what the script produces. */
/* ==========================================================================
   01-glass.css

   THE LIQUID GLASS THEME'S TOKENS. The default theme since 2026-09-18; the
   original skin is still whole in 00-tokens.css and is called "classic".
   <html data-theme="glass|classic" data-appearance="auto|light|dark"> chooses.

   Only tokens live here, never a component. Everything is scoped to
   html[data-theme="glass"], so a classic page never reads a value from this
   file, and ui/css/75-glass.css holds the component treatment.

   HOW THE CASCADE RESOLVES, because it is not the order of this file:
     classic light  :root                                   (0,1,0)
     glass light    html[data-theme="glass"]                (0,1,1)
     classic dark   :root:not([data-appearance="light"])    (0,2,0)
     glass dark     html[data-theme="glass"]:not(...)       (0,2,1)
   Classic dark OUTRANKS glass light. So a colour token set in the light block
   below and not in the dark block would fall through to classic dark's value in
   dark mode, or, for a name classic never defines, keep its LIGHT value in the
   dark. tests/test_liquid_glass.py therefore requires the dark block to define
   every colour the light block defines. The forced-dark twin
   (html[data-theme="glass"][data-appearance="dark"], generated by
   webassets.forced_dark()) has the same (0,2,1) and is appended after this file.

   THE MATERIALS ARE TRANSLUCENT, AND THE CONTRAST GUARD KNOWS IT. --surface is
   the card material, so every card in the app turns to glass through the token
   rather than through a list of card classes that would miss the next one. Text
   contrast is then a function of what shows through, so the guard composites
   each rgba material over the WORST point of --ambient (each glow at its peak
   alone, and all of them stacked at once) and over the material at full
   opacity, which is the limit of any depth of nesting, and holds 4.5:1 on the
   worst of those.
   ========================================================================== */

html[data-theme="glass"]{
color-scheme:light;
/* ── SHAPE ─────────────────────────────────────────────────────────────────
   Larger, continuous corners: 7 / 11 / 18 against classic's 4 / 6 / 10, and a
   panel radius for the floating sidebar, the bars and the sheet. --r-pill is
   the capsule: buttons, segmented controls and chips. */
--r-sm:7px;--r-check:5px;--r:11px;--r-lg:18px;--r-panel:22px;--r-pill:999px;
--float-gap:12px;            /* how far floating chrome sits in from the window */
--story-dock-gap:var(--float-gap);   /* the put-away guide's bar floats in the same inset */
--seg-pad:3px;               /* the track around a segmented control's options */
--z-ambient:-1;              /* the ambient layer, under everything */

/* ── INK. One step darker than classic's, because it is read through glass:
   --ink3 and --ink4 clear 4.5:1 on the worst ambient point, where classic's
   #636A75 would read 4.3:1 on the stacked glows. */
--ink:#0B0F16;--ink2:#3B4452;--ink3:#515966;--ink4:#555D6B;
/* --grey is a text colour too (.dl.flat, on --tint2), so it takes the same step. */
--grey:#525C6A;
/* A field's edge, 3:1 on every material and on the page's darkest point. */
--control-line:#737A86;

/* ── THE GROUND ──────────────────────────────────────────────────────────── */
--page:#EEF1F6;
/* Three glows in the three hues the product already speaks (brand green, the
   evidence blue, the derived violet), each a pastel at a fifth opacity so the
   page reads as lit rather than coloured. */
--ambient:radial-gradient(70vmax 55vmax at 0% 0%,rgba(255,159,10,.20),transparent 70%);

/* ── MATERIALS ───────────────────────────────────────────────────────────── */
--surface:rgba(255,255,255,.70);        /* cards: the regular material */
--surface-solid:#FFFFFF;                /* --surface where translucency is off */
--glass:rgba(255,255,255,.58);          /* chrome: sidebar, bars, tab track */
--glass-strong:rgba(255,255,255,.88);   /* menus, sheets, popovers: text first */
--glass-solid:#F8F9FB;                  /* --glass where translucency is off */
--glass-line:rgba(255,255,255,.90);     /* the inner light edge, top */
--glass-edge:rgba(24,32,48,.10);        /* the outer hairline that defines it */
--glass-rim:rgba(255,255,255,.28);      /* the faint full rim inside the edge */
--glass-hi:inset 0 1px 0 var(--glass-line),inset 0 0 0 1px var(--glass-rim);
--glass-blur:blur(22px) saturate(180%);
--glass-blur-strong:blur(34px) saturate(190%);
--chrome:rgba(238,241,246,.40);         /* the backing of a sticky bar */
--scrim:rgba(15,19,25,.26);             /* behind a sheet */
--scrim-blur:blur(6px);
/* A sticky bar's lower edge fades out rather than ending on a line. The mask
   reads only alpha, so this black is opacity, not a colour on screen. */
--edge-fade:linear-gradient(to bottom,#000 75%,transparent);
/* Translucent overlays instead of greys, so a tint reads the same on any
   material it lands on. */
--tint:rgba(24,32,48,.035);--tint2:rgba(24,32,48,.055);--tint3:rgba(24,32,48,.085);
--fill-in-fill:var(--tint2);   /* a well on a well: the translucent wash stacks (00-tokens.css) */
/* --bg is classic's page colour, and inside a card it was used as a WELL (a plan
   step, a chat bubble). On glass the page is the ambient light, so the well is
   an overlay: sunk into whatever material it sits in. */
--bg:rgba(24,32,48,.03);
--line:rgba(24,32,48,.10);--line2:rgba(24,32,48,.065);--line-strong:rgba(24,32,48,.2);

/* ── STATES ─────────────────────────────────────────────────────────────── */
--hover:rgba(24,32,48,.075);
--hover-line:rgba(24,32,48,.34);
--press:rgba(24,32,48,.12);
--ring:var(--brand);
--sel:rgba(184,74,0,.13);              /* the current item: brand, not grey */
--seg-track:rgba(24,32,48,.06);

/* ── DEPTH. Soft, wide and cool; the specular edge rides on --sh-1 so every
   card and control picks it up without a rule of its own. */
--sh-1:var(--glass-hi),0 1px 2px rgba(20,28,45,.05),0 4px 14px rgba(20,28,45,.05);
--sh-2:var(--glass-hi),0 2px 6px rgba(20,28,45,.06),0 10px 28px rgba(20,28,45,.08);
--sh-3:var(--glass-hi),0 30px 70px rgba(20,28,45,.20),0 6px 18px rgba(20,28,45,.08);
--sh-float:var(--glass-hi),0 1px 1px rgba(20,28,45,.04),0 12px 36px rgba(20,28,45,.10);
--sh-primary:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(22,96,57,.30),0 6px 16px rgba(22,96,57,.22);
/* The brand fill's specular: at most a tenth of white, gone by the middle, so
   the label always sits on the brand itself. */
--sheen:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%);
}

@media (prefers-color-scheme: dark){
html[data-theme="glass"]:not([data-appearance="light"]){
color-scheme:dark;
--ink:#F3F5F9;--ink2:#C9CFD8;--ink3:#A0A8B4;--ink4:#939CA9;
--grey:#9AA3B2;
--control-line:#7A879B;
--page:#080B11;
/* Deep, not pastel: the same three hues at a quarter strength, so the ground
   has depth without lifting any text ground past what --ink3 can read on. */
--ambient:radial-gradient(70vmax 55vmax at 0% 0%,rgba(214,102,0,.24),transparent 70%);
--surface:rgba(34,40,53,.58);
--surface-solid:#1B2029;
--glass:rgba(28,33,44,.55);
--glass-strong:rgba(22,26,35,.90);
--glass-solid:#171B23;
--glass-line:rgba(255,255,255,.12);
--glass-edge:rgba(255,255,255,.09);
--glass-rim:rgba(255,255,255,.03);
--glass-hi:inset 0 1px 0 var(--glass-line),inset 0 0 0 1px var(--glass-rim);
--glass-blur:blur(24px) saturate(160%);
--glass-blur-strong:blur(36px) saturate(170%);
--chrome:rgba(8,11,17,.55);
--scrim:rgba(0,0,0,.50);
--tint:rgba(255,255,255,.035);--tint2:rgba(255,255,255,.055);--tint3:rgba(255,255,255,.085);--card-nested:rgba(62,72,92,.82);--card-nested2:rgba(255,255,255,.08);--ink3-nested:#BCC3CD;--red-nested:#FF8A96;--line-nested:rgba(255,255,255,.15);
--fill-in-fill:var(--tint2);
--bg:rgba(0,0,0,.20);
--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.06);--line-strong:rgba(255,255,255,.18);
--hover:rgba(255,255,255,.13);
--hover-line:rgba(255,255,255,.36);
--press:rgba(255,255,255,.18);
--ring:var(--brand);
--sel:rgba(255,159,10,.16);
--seg-track:rgba(255,255,255,.06);
--sh-1:var(--glass-hi),0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.25);
--sh-2:var(--glass-hi),0 2px 6px rgba(0,0,0,.40),0 10px 28px rgba(0,0,0,.35);
--sh-3:var(--glass-hi),0 30px 70px rgba(0,0,0,.60),0 6px 18px rgba(0,0,0,.35);
--sh-float:var(--glass-hi),0 1px 1px rgba(0,0,0,.30),0 14px 40px rgba(0,0,0,.40);
--sh-primary:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(0,0,0,.40),0 6px 16px rgba(0,0,0,.30);
--sheen:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);
}}

/* ── WHERE TRANSLUCENCY IS OFF, EVERY MATERIAL IS OPAQUE ─────────────────────
   Asked for (Reduce Transparency) or not supported (no backdrop-filter, prefixed
   or not). !important is the point, not a shortcut: this is a preference that
   outranks every scheme block above it, dark and forced dark included, and a
   selector heavy enough to beat (0,2,1) without it would have to name
   data-appearance to do so. The overlays (--tint*, --hover, --line) stay
   translucent: on an opaque ground they are opaque. */
@media (prefers-reduced-transparency: reduce){
html[data-theme="glass"]{
--surface:var(--surface-solid)!important;--glass:var(--glass-solid)!important;
--glass-strong:var(--glass-solid)!important;--chrome:var(--glass-solid)!important;
--glass-blur:none!important;
--glass-blur-strong:none!important;--scrim-blur:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html[data-theme="glass"]{
--surface:var(--surface-solid)!important;--glass:var(--glass-solid)!important;
--glass-strong:var(--glass-solid)!important;--chrome:var(--glass-solid)!important;
--glass-blur:none!important;
--glass-blur-strong:none!important;--scrim-blur:none!important}}

/* GENERATED by forced_dark(): pinned dark, as PageSoar's front door serves it. */
html[data-theme="glass"][data-appearance="dark"]{
color-scheme:dark;
--ink:#F3F5F9;--ink2:#C9CFD8;--ink3:#A0A8B4;--ink4:#939CA9;
--grey:#9AA3B2;
--control-line:#7A879B;
--page:#080B11;

--ambient:radial-gradient(70vmax 55vmax at 0% 0%,rgba(214,102,0,.24),transparent 70%);
--surface:rgba(34,40,53,.58);
--surface-solid:#1B2029;
--glass:rgba(28,33,44,.55);
--glass-strong:rgba(22,26,35,.90);
--glass-solid:#171B23;
--glass-line:rgba(255,255,255,.12);
--glass-edge:rgba(255,255,255,.09);
--glass-rim:rgba(255,255,255,.03);
--glass-hi:inset 0 1px 0 var(--glass-line),inset 0 0 0 1px var(--glass-rim);
--glass-blur:blur(24px) saturate(160%);
--glass-blur-strong:blur(36px) saturate(170%);
--chrome:rgba(8,11,17,.55);
--scrim:rgba(0,0,0,.50);
--tint:rgba(255,255,255,.035);--tint2:rgba(255,255,255,.055);--tint3:rgba(255,255,255,.085);--card-nested:rgba(62,72,92,.82);--card-nested2:rgba(255,255,255,.08);--ink3-nested:#BCC3CD;--red-nested:#FF8A96;--line-nested:rgba(255,255,255,.15);
--fill-in-fill:var(--tint2);
--bg:rgba(0,0,0,.20);
--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.06);--line-strong:rgba(255,255,255,.18);
--hover:rgba(255,255,255,.13);
--hover-line:rgba(255,255,255,.36);
--press:rgba(255,255,255,.18);
--ring:var(--brand);
--sel:rgba(255,159,10,.16);
--seg-track:rgba(255,255,255,.06);
--sh-1:var(--glass-hi),0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.25);
--sh-2:var(--glass-hi),0 2px 6px rgba(0,0,0,.40),0 10px 28px rgba(0,0,0,.35);
--sh-3:var(--glass-hi),0 30px 70px rgba(0,0,0,.60),0 6px 18px rgba(0,0,0,.35);
--sh-float:var(--glass-hi),0 1px 1px rgba(0,0,0,.30),0 14px 40px rgba(0,0,0,.40);
--sh-primary:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(0,0,0,.40),0 6px 16px rgba(0,0,0,.30);
--sheen:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);
}