/* GENERATED by Scripts/sync_design_system.py from PageSoar's ui/css/00-tokens.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. */
/* ==========================================================================
   00-tokens.css

   Design tokens and the document base. EVERYTHING else depends on this file, so it
   loads first and nothing here may reference a class defined later.
   
   Colour and layout were tokenised long before type was, which is how a panel that
   forgot to set a font-size silently inherited the 16px body default and rendered a
   size and a half larger than the card around it. Use --fs-*; do not hardcode px.
   ========================================================================== */

:root{
/* Runtime measurement of the floating guide, keeping the final page action reachable. */
--story-clearance:0px;--story-clearance-x:0px;--story-overlay:0px;--upd-clearance:0px;--grace-clearance:0px;
/* How far the put-away guide's bar sits in from the window's bottom edge: flush here, inset in glass. */
--story-dock-gap:0px;
/* ── PALETTE ────────────────────────────────────────────────────────────────
   Re-skinned to the PageSoar design system (docs/design/PAGESOAR-RESKIN.html): a cool,
   neutral document ground with ONE saturated colour (the green) reserved for
   the brand and for "this went well". The previous warm cream/olive scheme
   tinted every surface, so a genuinely good result and a plain background were
   the same family of colour and neither read as a signal.

   The mockup's own names are the source of truth and are defined FIRST; the
   older semantic names below are aliases onto them, so the two vocabularies
   cannot drift apart. Prefer the mockup names in new CSS. */
/* FIVE OF THESE MOVED ON 2026-09-09, WHEN THE CONTRAST GUARD STARTED DERIVING
   ITS PAIRS. It had been checking a hand-written list of 25 while the sheets
   declared 84, and seven of the sixty it had never looked at were under 4.5:1
   in this scheme. Each token below is the nearest step of its OWN hue that
   clears 4.5:1 on every ground it is actually used on — the same method the
   2026-09-02 pass used on --ink3, --ink4 and --amber, applied to the pairs that
   pass was not looking at:

     --ink3  #676E79 -> #636A75   4.34 on --tint3 (.s-queued, .sbtag), and
                                  --muted is var(--ink3), which was 4.50 on
                                  --line2 (.qchip, .qcount)
     --red   #D63B4A -> #CE2B3B   4.02 on --red-l (.chip.ban, .dl.down,
                                  .bstatus.high, .kbrule.bad); --bad and --badbg
                                  are aliases of these two, so .count.over and
                                  .modalx:hover were the same 4.02. Also lifts
                                  --red on --surface from 4.58.
     --amber #A15E0A -> #9F5D0A   4.47 on --red-l (.bmode.prev, .bstatus.prev,
                                  .dec.needs_work). One step; imperceptible.
     --green #0E9F6E -> #0B7D57   3.02 on --grey-l (.bstatus.applied) — the
                                  worst pair in the app, an "applied" status
                                  chip nobody could read.
     --grey  #7A8494 -> #656F7E   3.40 on --tint2 (.dl.flat)

   Every pair in both schemes clears 4.5:1 after these, computed by
   tests/test_design_tokens.py, which now derives what it checks. */
--page:#EFF1F5;--surface:#fff;--tint:#F7F8FA;--tint2:#F1F3F7;--tint3:#E9ECF1;
--ink:#0F1319;--ink2:#454E5C;--ink3:#636A75;--ink4:#696E76;
--brand:#A94300;--brand-d:#8A3700;--brand-l:#FDEBDC;
--red:#CE2B3B;--red-l:#FDECEE;
--amber:#9F5D0A;--amber-l:#FDF2E3;
--blue:#2563C9;--blue-l:#EAF0FC;
--grey:#656F7E;--grey-l:#F0F2F5;
--purple:#7C4DBD;--purple-l:#F3EDFB;
--green:#0B7D57;--green-l:#E4F7EF;
/* ── THE LOGO ───────────────────────────────────────────────────────────────
   The mark is a white page with a green climb on a --brand tile.

   These three are var() references, not copies. --logo-tile and --logo-signal
   ARE --brand: writing #1F7A4C here would be a second home for a value that
   already has one, and the two would eventually disagree. The names exist so the
   identity can diverge from the UI later by editing one line, not by hunting
   the green through an SVG, an inline glyph and a stylesheet.

   --logo-page is #fff rather than var(--surface) on purpose: the page in the
   mark must not start tracking a UI surface colour, because the day --surface
   goes off-white the logo would follow it and nobody would be deciding that.

   scripts/gen_brand_marks.py reads these three and generates ui/favicon.svg,
   assets/pagesoar-mark.svg, the raster set under assets/icons/ and the sidebar
   mark in index.html. Change a value here and run that script; nothing downstream holds
   a copy, and tests/test_brand_marks.py fails if one does.

   RESIDUAL RISK, NAMED: --good is aliased to --brand below, so the identity and
   the "this went well" state are now the same green. That is a deliberate choice
   and it is a real cost — a reader cannot tell from colour alone whether the
   sidebar tile is branding or reporting. Splitting them later means changing
   --logo-tile and --logo-signal here, and nothing else. */
--logo-tile:var(--brand);--logo-page:#fff;--logo-signal:var(--brand);
--r-sm:4px;--r-check:4px;--r:6px;--r-lg:10px;--r-lg-in:calc(var(--r-lg) - var(--bw));
/* The capsule: a chip or a pill whose ends are half-circles at any height. Classic
   wrote it as 99px in four places; glass already named it (01-glass.css). */
--r-pill:999px;
/* A control's corner: every button and field. A pill (--r-pill) is a badge or the segmented control, nothing else. */
--r-ctl:var(--r);
/* PRESSED IS A CAPSULE, READ IS A TAG (the owner, 2026-09-30, after the buttons measured at 11px corners read as
   "very small difference from just a regular rectangle"; Apple's Liquid Glass, Shopify and Slack draw their buttons
   this way). A button, a chip button and an icon button (a capsule on a square is a circle) take --r-btn; a badge,
   which is read and never pressed, takes --r-badge, so the two are never mistaken for each other. Fields and
   card-sized buttons keep --r-ctl. This reverses 2026-09-25's "a pill is only a badge", at the owner's choice. */
--r-btn:var(--r-pill);--r-badge:var(--r-sm);
/* The distribution bar's own corners. A 10px-tall segment cannot wear --r-sm
   without reading as a lozenge, and the outer ends are deliberately rounder than
   the joins so the bar reads as one object rather than a row of tiles. Named
   rather than inlined because test_palette keeps the shape vocabulary closed —
   the point of that ratchet is that a deliberate new shape gets a name and an
   accidental one gets caught. */
--r-bar:2px;--r-bar-cap:5px;
--sh-1:0 1px 2px rgba(15,19,25,.05);
--sh-2:0 2px 8px rgba(15,19,25,.07),0 1px 2px rgba(15,19,25,.05);
--sheen:none;                                 /* the primary's highlight: none in classic, a gradient in glass (01-glass.css) */
--sh-3:0 14px 38px rgba(15,19,25,.13),0 2px 6px rgba(15,19,25,.06);

/* ── ALIASES — the names the rest of the stylesheets already use ──────────── */
--navy:var(--ink);--navy2:var(--ink2);
--accent:var(--brand);--accent-weak:var(--brand-l);--accent-ink:var(--brand-d);
--bg:var(--page);--card:var(--surface);
/* THE READING WIDTH, IN ONE PLACE. Six different caps had grown across the
   stylesheets — .lead 680px, .lead.mktlead 900px, .patbox .lead 78ch,
   .patdetail 76ch, .patwhy 76ch, .hsum 1000px — so a paragraph's width depended
   on which screen it happened to be on, and the summary sentence on a 1180px
   card stopped at 58% of it and read as a broken two-column layout. Changing it
   meant finding all six. Now it is one number and `min(…,100%)` keeps it inside
   whatever contains it. */
--measure:1000px;
/* THE READING WIDTH, in characters, for prose that is read rather than laid out.
   --measure above is a layout container in px; a paragraph capped at 1000px runs
   to about 125 characters, roughly double what is comfortable. Four blocks each
   invented their own instead (88ch, 78ch, 74ch, 64ch) — which is the drift the
   measure token exists to prevent, one level down from where it was looking. */
--measure-text:74ch;
--muted:var(--ink3);--line:#E1E6ED;--line2:#EDF0F4;--line-strong:var(--line-hover);
--good:var(--green);--goodbg:var(--green-l);
--warn:var(--amber);--warnbg:var(--amber-l);
--bad:var(--red);--badbg:var(--red-l);
--track:var(--tint2);--fill:var(--tint2);
/* A box inside a well (card, well, box): in classic --fill is opaque, so a second well would be the same colour and the
   box goes back to the card's shade; glass stacks a second translucent well instead (01-glass.css). */
--fill-in-fill:var(--surface);
/* THE ACTION COLUMN, defined once.
   The fix-all button in the summary card and the Fix now / Draft with AI buttons
   in the rows below it are the same column and must share a right edge. They were
   in two different cards computing their own inset, so the summary button sat
   ~70px to the left of every button under it. Both are now derived from these:
   change one number and the whole column moves together. */
--actw:170px;      /* .tact min-width and .qact width */
--rowpadx:16px;    /* .trow horizontal padding */
--rowgap:12px;     /* .trow gap, i.e. action column -> caret */
--carw:28px;       /* .tcar / .tcarpad */
--sumpadx:18px;    /* .qsummary horizontal padding */
--hair:rgba(15,19,25,.08);            /* hairline separator */
--sep:#EDF0F4;                        /* grouped-list row separator */
--dot-red:var(--red);--dot-amber:var(--amber);--dot-green:var(--brand);--dot-mauve:var(--purple);   /* marks follow their tokens */
/* EVIDENCE — where a number came from. These four must stay visually distinct
   from each other, because the whole point is that a reader can tell a measured
   figure from an estimate at a glance. The panel this serves once printed
   "6.0% is normal at #5", a hard-coded industry constant, in identical type
   beside real Search Console numbers. Tokenised rather than inlined so the
   distinction is defined once and cannot drift per panel. */
--ev-meas:#EAF0FC;--ev-meas-ink:#1B3F80;      /* a record exists */
--ev-der:#F3EDFB;--ev-der-ink:#5B3391;        /* arithmetic on records */
--ev-mod:#FDF2E3;--ev-mod-ink:#8A5217;        /* modelled constant, NOT your data */
--ev-wr:#FDECEE;--ev-wr-ink:#8A1F2C;          /* a model wrote it */
/* PROVENANCE — which source a phrase of the drafted copy came from. Six hues,
   one per source, plus two failure states. Chosen to survive being read as
   inline highlights inside a sentence, so they are pale with dark ink. */
--pv-search:#EAF0FC;--pv-search-ink:#1B3F80;
--pv-page:#E6F4EC;--pv-page-ink:#166039;
--pv-purpose:#F3EDFB;--pv-purpose-ink:#5B3391;
--pv-claim:#FDF2E3;--pv-claim-ink:#8A5217;
--pv-goal:#FDECEE;--pv-goal-ink:#8A1F2C;
--pv-brand:#EDEDFB;--pv-brand-ink:#3B3573;
--pv-market:#E1F1F0;--pv-market-ink:#1E4F4C;   /* DataForSEO — what outranks us */
--pv-warn:#FDF2E3;--pv-warn-ink:#7A4708;      /* rearranged from your sources */
--pv-bad:#FDECEE;--pv-bad-ink:#8A1F2C;
/* AA CONTRAST, MEASURED 2026-09-02: --ink3 (secondary copy) was 3.93:1 on white and 3.48:1 on
   the page, --ink4 2.58:1, --amber as text 3.71:1, dark --ink4 3.61:1. Each is the nearest step of
   its own hue that clears 4.5:1 on the page, the surface and the tint; tests/test_design_tokens.py
   computes the ratios and refuses a regression. */
/* semantic colours the sheets used to write by hand (85 literals, 2026-09-02) */
--on-fill:#fff;                       /* text and marks on a brand, red or ink fill */
--bad-ink:#8A1F2C;--warn-ink:#7A4708;--info-ink:#1B3F80;   /* dark text on the pale tints */
--bad-line:#F0CDD2;                   /* border of a red-tinted box */
--line-hover:#D2D8E1;                 /* a border on hover */
--control-line:#848B96;                 /* the boundary of a control: 3:1 (WCAG 1.4.11), where --line is a hairline for layout */        /* found in no source at all */
/* Google's own result colours. Not ours to theme — a listing preview is only
   useful if it looks like the thing it is previewing. */
--serp-link:#1a0dab;--serp-text:#4d5156;
/* Surfaces that tint a card without becoming a status. */
--tint-good:#F6FBF8;--tint-good-line:#CDE9DA;
--tint-warm:#FDFAF4;--tint-warm-line:#F0DFC4;
/* WASHES AND OVERLAYS the component sheets used to write as rgba() inline, named
   2026-09-18 at the values they had. The same in both schemes, as they always were:
   a translucent wash reads on either ground. --sunk is the neutral well four
   panels asked for by a name nothing defined, so each painted its own fallback
   (.07, .08, .1 of mid-grey); they were the one .08 of mid-grey until 2026-10-17, when
   it measured 3.9 and 3.4 Delta E from the card it sits in (scripts/nested_surfaces.js
   wants 5 in dark, 4 in light). It is the well, so it is --fill. */
--sunk:var(--fill);
--spin-track:rgba(31,122,76,.25);     /* the ring a spinner turns inside */
--pick-wash:rgba(20,60,110,.08);      /* the KPI tile that is filtering the table */
/* THE GLASS VOCABULARY, IN CLASSIC. 65-workspace.css is shared by both themes and
   read these names with a fallback each (var(--glass-edge,var(--line))), so the
   classic value of every one lived in a fallback beside the rule that used it. They
   are defined here instead, at exactly the value each fallback painted, and
   01-glass.css overrides them. --r-pill is the one that had NO fallback: classic
   never defined it, so every capsule the workspace sheet drew (the segmented
   control, the close button, the look cards' badges) painted square corners in
   classic. It is 999px here, as it is in glass. */
--scrim:var(--on-fill-wash);--scrim-blur:none;
--glass-strong:var(--surface);--glass-solid:var(--surface);--glass-blur-strong:none;--glass-edge:var(--line);
--r-panel:var(--r-lg);--sel:var(--brand-l);
--seg-pad:var(--sp-1);--seg-track:var(--tint2);--sh-primary:var(--sh-2);
/* The classic modal's own scrim (.modalback), darker than the sheet's. Glass paints
   .modalback with --scrim instead, in 75-glass.css. */
--modal-scrim:rgba(20,20,25,.42);--modal-scrim-blur:blur(3px);
--shadow:var(--sh-1);
--shadow-raise:var(--sh-2);
/* TYPE, defined once. Colour and layout were already tokenised; the type scale was
   not, so every panel picked its own px value and anything that forgot to pick one
   silently inherited the 16px body default. That is exactly what made the
   structured-data loading line render a size and a half larger than the card it
   sat inside, reading as a different (older) font next to everything around it.
   Use these; do not hardcode a new px size.

   Inter is the re-skin's typeface. It is requested from Google Fonts in
   index.html and falls back to the platform UI face, which is why the stack
   below still names -apple-system: a dashboard that loads on a machine with no
   network must not fall through to Times. */
/* THE PLATFORM'S OWN FACE, not Inter. Inter fetched from Google Fonts was the
   typeface of nearly every generated dashboard, and a reader who has seen a few
   recognises the template before the content; it was also a network request on
   every load. The stack below is what it fell back to offline all along. */
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-mono:'SF Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--fs-input-touch:16px;  /* a text field on a touch screen: under 16px, iOS Safari zooms in on focus and stays zoomed (ui/css/02-controls.css) */
--touch-target:44px;  /* the least a fingertip is given to press on a touch screen, Apple's minimum (ui/css/02-controls.css) */
/* ONE SCALE FOR A 13-INCH LAPTOP, ANCHORED ON A 15PX BODY (2026-09-19, the owner's
   redesign, docs/REDESIGN-2026-09.md section B). The scale before it read 13px body
   under a 20px page title, which on a 1280 to 1470px-wide laptop is small and flat:
   the title carried barely more weight than the card heads beneath it. Every step
   moved together, so each role keeps its place relative to the others; nothing
   outside this file names a pixel size, so every component followed. */
--fs-lead:16px;    /* the lead under a page title, card titles, a field at a phone's width */
--fs-body:15px;    /* the reading size, and a button's label */
--fs-sm:14px;      /* secondary copy, chips, a small button's label */
--fs-xs:13px;      /* captions, meta */
--fs-micro:12px;   /* badges and markers, in sentence case; nothing renders smaller */
/* THE STEPS ABOVE THE LEAD SIZE: row titles, card heads, section heads, the page
   title, a dialog's title, then the figures. --fs-h1 is every page's one heading,
   and --fs-h1-compact is the same heading at 820px and below, where 30px would
   wrap a four-word title onto three lines of a phone. */
--fs-lg:17px;--fs-h3:18px;--fs-h2:22px;--fs-h1:30px;--fs-h1-compact:26px;--fs-title:26px;
--fs-display:36px;--fs-display-lg:44px;--fs-hero:52px;--fs-hero-lg:64px;
/* Monospace runs large beside proportional text, so a code fragment inside a sentence
   is set at 92% of it rather than on a fixed step. */
--fs-code-inline:.92em;
/* ── INTERACTION STATES, one set for every control ───────────────────────────
   Measured 2026-09-18 in the dark scheme before these existed: .navbtn2:hover
   (--tint2 on --surface) 1.17:1, button:hover (--tint) 1.07:1, the table row's
   rgba(0,0,0,.02) and the KPI filter's undefined --card2 invisible, the card
   border on hover 1.02:1, and `button:hover{opacity:.85}` dimming the label
   instead of lifting the ground. A hover you cannot see is a control that does
   not answer. Every :hover in ui/css reads these now, and
   tests/test_liquid_glass.py holds them to: dark --hover 1.35:1 or more on
   --surface and --page, dark --hover-line 3:1 on --surface, light --hover
   1.12:1 on --surface, --ink and --ink2 4.5:1 on --hover, in both themes.

   --hover is --tint3 in light (1.18:1 on white), a named alias rather than a
   new grey. --hover-line is darker than --control-line, so a control's edge
   firms up under the pointer instead of fading (--line-hover, #D2D8E1, was
   LIGHTER than the resting #848B96). --press is one step past --hover, and
   --ring is the focus colour: the brand, 3:1 or more on every ground. */
--hover:var(--tint3);--hover-line:#767E8A;--press:#DDE1E8;--ring:var(--brand);
/* The count chip on a chosen pill, washed over the brand fill. It was a quarter
   of WHITE in both schemes, which in light put the white count on a paler green:
   3.2:1. It darkens the fill in light and lightens it in dark, so the chip reads
   as a well in the pill and its label clears 7:1 in both. */
--on-fill-wash:rgba(15,19,25,.20);
/* ── THE NON-COLOUR SCALE ────────────────────────────────────────────────────
   Nothing that themes the app is written as a literal anywhere else: a spacing,
   a size, a weight, a leading, a tracking, an opacity, a duration or a stacking
   order is a decision, and a decision gets a name. tests/test_nothing_is_hardcoded.py
   holds every sheet, door.css, index.html and every inline style in ui/js to that,
   with a zero ratchet and a closed list of what is not a literal.

   Each scale below was DESIGNED FROM A MEASUREMENT, 2026-09-18: that file's scanner
   counted 3,068 literal values across the sheets, door.css, the page, the scripts and
   the one Python-built page,
   and the steps are the values actually in use. Near-duplicates were snapped onto
   the nearest step where the difference is at or under what the eye resolves; every
   snap is listed in the commit that introduced these.

   SPACING, the 4px grid with its half steps. The half steps (2, 6, 10, 14, 18, 22)
   are not drift: 10px alone had 216 uses and 6px 196, so snapping them would
   have moved most of the app by 2px. What did snap is the ODD values, each to its
   4px-grid neighbour (3, 5 -> 4; 7, 9 -> 8; 11, 13 -> 12; 15, 17 -> 16): 402 of
   them, each one pixel or less (1.5 -> 2). --sp-px is the one-pixel optical nudge (37 uses), which
   rounding to 0 or 2 would undo. The same scale sizes small boxes (a 6px dot, an
   18px icon), because a dot and a gap are measured on one grid. */
--sp-px:1px;--sp-05:2px;
--sp-1:4px;--sp-15:6px;--sp-2:8px;--sp-25:10px;--sp-3:12px;--sp-35:14px;--sp-4:16px;--sp-45:18px;
--sp-5:20px;--sp-55:22px;--sp-6:24px;--sp-65:28px;--sp-7:32px;--sp-75:36px;--sp-8:40px;--sp-9:48px;
/* LAYOUT SIZES, above the spacing scale: every one a multiple of 8px, named by its
   count of 4px units (--size-14 is 56px), so the name says where it sits on the grid.
   A width over 48px snapped to the nearest 8px, ties up so nothing that fitted stops
   fitting: the largest move is 4px (52 -> 56, 92 -> 96). The widths only a layout
   uses once (a label column, a grid track's floor) are still steps on this one
   grid, rather than a name each, because a name per use is a literal with a label. */
--size-14:56px;--size-18:72px;--size-20:80px;--size-22:88px;--size-24:96px;--size-26:104px;
--size-28:112px;--size-30:120px;--size-34:136px;--size-38:152px;--size-40:160px;--size-42:168px;
--size-46:184px;--size-48:192px;--size-50:200px;--size-52:208px;--size-56:224px;--size-58:232px;
--size-60:240px;--size-62:248px;--size-66:264px;--size-68:272px;--size-70:280px;
--size-74:296px;--size-80:320px;--size-86:344px;--size-90:360px;--size-96:384px;--size-108:432px;
--size-110:440px;--size-128:512px;--size-140:560px;--size-150:600px;--size-166:664px;--size-206:824px;--size-246:984px;
/* READING MEASURES in characters, beside --measure-text above: a caption under a
   big figure (36ch), a note beside a score (52ch), and a counter three digits wide. */
--measure-sm:36ch;--measure-md:52ch;
/* Prose in boxes that set their own font size (Meta Ads): em is the text's own font, so 36em is ~75 characters whatever the size. */
--measure-em:36em;
--wrap-padx:32px;--wrap-max:1180px;
/* The narrowest content column the open guide window may leave beside it before it floats over the corner instead (storyKeepsColumn, 08-onboarding.js; item 354). */
--guide-min-column:var(--size-150);
--bar-h:52px;      /* the audit's sticky URL bar; the column beside it sticks just under it */
--lift:-1px;       /* how far a card rises under the pointer */
/* BORDERS AND RINGS. --bw-3 is the accent bar down a card's edge (eight uses);
   1.5px borders snapped to --bw, which is what they already painted at 1x. The
   focus halo and the outline's gap are named so every focus looks alike. */
--bw:1px;--bw-2:2px;--bw-3:3px;
--ring-halo:3px;--ring-offset:2px;
/* A control's height: md (a button, a field, a sidebar row), sm (a button in a row, a
   chip button), and lg, which is the page search alone. */
--bulk-list-h:24rem;--ctl-h:36px;--ctl-h-sm:30px;--ctl-h-lg:48px;--ctl-padx:14px;
/* THE COMPONENTS' OWN SIZES (ui/css/70-system.css draws them; nothing else sizes them).
   A badge is read, a chip is typed or removed, a button is pressed: three jobs, three
   sizes, and a row with a badge in it is exactly as tall as a row without one. */
--badge-h:22px;--badge-padx:var(--sp-2);--badge-fs:var(--fs-micro);--badge-fw:var(--fw-semibold);
--chip-h:var(--ctl-h-sm);--chip-padx:var(--sp-3);--chip-fs:var(--fs-sm);--chip-fw:var(--fw-medium);
--btn-padx:var(--ctl-padx);--btn-padx-sm:var(--sp-3);--btn-fs:var(--fs-body);--btn-fs-sm:var(--fs-sm);
--callout-pad-y:var(--sp-35);--callout-pad-x:var(--sp-45);
/* A SELECT IS A FIELD LIKE ANY OTHER: drawn without the platform's own control so it
   takes the field's height, and given this chevron in the text colour, which follows
   the theme and the appearance on its own. Two triangles, one --sp-15 square each. */
--select-chevron:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
--select-chevron-pos:calc(100% - var(--sp-45)) 50%,calc(100% - var(--sp-3)) 50%;
--select-chevron-size:var(--sp-15) var(--sp-15),var(--sp-15) var(--sp-15);
--select-pad-end:calc(var(--sp-6) + var(--sp-2));
/* WEIGHT. Five in use; 650 (four titles) snapped to 600 and the one 800 to 700, the
   heaviest test_palette allows. */
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
/* LEADING. Fifteen values were in use, most a twentieth apart: 1.45 and 1.55 snapped
   to 1.5, 1.1 to 1.25 to 1.2, 1.3 and 1.4 to 1.35, 1.7 to 1.6. --lh-airy is the one
   line that carries inline provenance chips and needs the room (1.95 -> 2). */
--lh-none:1;--lh-tight:1.2;--lh-snug:1.35;--lh-base:1.5;--lh-loose:1.6;--lh-airy:2;
/* TRACKING. Headings tighten, small caps open out; px values (-.1px, -.2px) became
   the em step they approximated at 13px. --ls-spaced is the one-time-code digits. */
--ls-tighter:-.03em;--ls-tight:-.02em;--ls-snug:-.01em;--ls-wide:.02em;--ls-spaced:.25em;
/* OPACITY, for de-emphasis, never for a hover (test_liquid_glass refuses a hover
   that dims). Fourteen values in use, snapped to six by the nearest .05. */
--op-ghost:.25;--op-faint:.35;--op-dim:.5;--op-muted:.6;--op-soft:.75;--op-high:.9;
/* MOTION. The three UI durations were already here; .1 to .16s transitions joined
   --dur-fast (a 30ms difference nobody can see), .4 to .5s became --dur-slower. The
   loops are named for what they do: a spinner, a heartbeat, a pulse, the score pop. */
--dur-fast:150ms;--dur-base:200ms;--dur-slow:250ms;--dur-slower:450ms;
--dur-spin:800ms;--dur-beat:1s;--dur-pulse:1.2s;--dur-pop:1.7s;
--ease-out:cubic-bezier(.22,1,.36,1);--ease-standard:cubic-bezier(.4,0,.2,1);
--ease-fall:cubic-bezier(.36,.65,.42,1);   /* confetti: quick out, slow settle */
/* Scale in motion: a pressed button, a sheet arriving, a score bumping and popping. */
--scale-press:.97;--scale-enter:.98;--scale-shrink:.9;--scale-bump:1.12;--scale-pop:1.25;
--spin-fall:720deg;                        /* how far a confetti piece turns falling */
--filter-knockout:brightness(0) invert(1); /* a dark logo shown white on a dark swatch */
/* STACKING, lowest first. Every z-index in the app, by what it has to sit above. --z-lift: a control
   above its own row's stretched hit area (the workspace picker's Manage over the row's Open). */
--z-lift:1;--z-sticky:4;--z-tabs:5;--z-pin:8;--z-chrome:20;--z-popover:50;--z-modal:60;--z-toast:99;
/* An infoTip's panel (00-core.js): never nearer a viewport edge than --tip-edge,
   and --tip-gap from the button that opened it. tipPlace() reads both. */
--tip-edge:var(--sp-4);--tip-gap:var(--sp-2);
--z-skip:100;--z-alert:200;--z-confetti:99999;
/* THE SHEET (ui/css/65-workspace.css): a dialog's reading width, and the wider one
   the first-run welcome uses for its three tiles. */
--sheet-w:560px;--sheet-w-wide:780px;
/* THE APPEARANCE PICKER'S MINIATURES (65-workspace.css .appcard). Each shows its own
   appearance whichever is on, so these are fixed values rather than the live tokens: a
   glass panel over the same three glows 01-glass.css paints, once light and once dark,
   at the values that file gives each appearance. */
--preview-page:#EFF1F5;--preview-bar:rgba(15,19,25,.07);
--preview-glass:rgba(255,255,255,.62);--preview-glass-edge:rgba(24,32,48,.10);
--preview-ambient:none;
--preview-page-dark:#080B11;--preview-bar-dark:rgba(255,255,255,.10);
--preview-glass-dark:rgba(34,40,53,.80);--preview-glass-edge-dark:rgba(255,255,255,.10);
--preview-ambient-dark:none;
/* >>> CONTROL MATRIX */
/* CONTROL MATRIX: generated by scripts/gen_control_tokens.py, never edited by hand.
   --ctl-{kind}-{emphasis}-{state}-{bg|fg|bd}, CONTROLS-SPEC section 1. One block for both
   appearances: each cell mixes a kind's base color, and the base colors flip on their own. */
--ctl-neutral-high-default-bg:var(--ink);--ctl-neutral-high-default-fg:var(--on-fill);--ctl-neutral-high-default-bd:var(--ink);--ctl-neutral-high-hover-bg:color-mix(in oklab, var(--ink) 86%, var(--surface));--ctl-neutral-high-hover-fg:var(--on-fill);--ctl-neutral-high-hover-bd:color-mix(in oklab, var(--ink) 86%, var(--surface));--ctl-neutral-high-active-bg:color-mix(in oklab, var(--ink) 72%, var(--surface));--ctl-neutral-high-active-fg:var(--on-fill);--ctl-neutral-high-active-bd:color-mix(in oklab, var(--ink) 72%, var(--surface));--ctl-neutral-high-disabled-bg:color-mix(in oklab, var(--ink) 38%, var(--surface));--ctl-neutral-high-disabled-fg:color-mix(in oklab, var(--on-fill) 70%, color-mix(in oklab, var(--ink) 38%, var(--surface)));--ctl-neutral-high-disabled-bd:color-mix(in oklab, var(--ink) 38%, var(--surface));
--ctl-neutral-medium-default-bg:var(--surface);--ctl-neutral-medium-default-fg:var(--ink);--ctl-neutral-medium-default-bd:var(--control-line);--ctl-neutral-medium-hover-bg:var(--hover);--ctl-neutral-medium-hover-fg:color-mix(in oklab, var(--ink) 86%, var(--surface));--ctl-neutral-medium-hover-bd:var(--hover-line);--ctl-neutral-medium-active-bg:var(--press);--ctl-neutral-medium-active-fg:color-mix(in oklab, var(--ink) 86%, var(--surface));--ctl-neutral-medium-active-bd:var(--hover-line);--ctl-neutral-medium-disabled-bg:var(--surface);--ctl-neutral-medium-disabled-fg:color-mix(in oklab, var(--ink) 42%, var(--surface));--ctl-neutral-medium-disabled-bd:color-mix(in oklab, var(--ink) 22%, var(--surface));
--ctl-neutral-low-default-bg:transparent;--ctl-neutral-low-default-fg:var(--ink);--ctl-neutral-low-default-bd:transparent;--ctl-neutral-low-hover-bg:var(--hover);--ctl-neutral-low-hover-fg:color-mix(in oklab, var(--ink) 86%, var(--surface));--ctl-neutral-low-hover-bd:transparent;--ctl-neutral-low-active-bg:var(--press);--ctl-neutral-low-active-fg:color-mix(in oklab, var(--ink) 86%, var(--surface));--ctl-neutral-low-active-bd:transparent;--ctl-neutral-low-disabled-bg:transparent;--ctl-neutral-low-disabled-fg:color-mix(in oklab, var(--ink) 42%, var(--surface));--ctl-neutral-low-disabled-bd:transparent;
--ctl-accent-high-default-bg:var(--brand);--ctl-accent-high-default-fg:var(--on-fill);--ctl-accent-high-default-bd:var(--brand);--ctl-accent-high-hover-bg:color-mix(in oklab, var(--brand) 86%, var(--ink));--ctl-accent-high-hover-fg:var(--on-fill);--ctl-accent-high-hover-bd:color-mix(in oklab, var(--brand) 86%, var(--ink));--ctl-accent-high-active-bg:color-mix(in oklab, var(--brand) 72%, var(--ink));--ctl-accent-high-active-fg:var(--on-fill);--ctl-accent-high-active-bd:color-mix(in oklab, var(--brand) 72%, var(--ink));--ctl-accent-high-disabled-bg:color-mix(in oklab, var(--brand) 38%, var(--surface));--ctl-accent-high-disabled-fg:color-mix(in oklab, var(--on-fill) 70%, color-mix(in oklab, var(--brand) 38%, var(--surface)));--ctl-accent-high-disabled-bd:color-mix(in oklab, var(--brand) 38%, var(--surface));
--ctl-accent-medium-default-bg:var(--surface);--ctl-accent-medium-default-fg:var(--brand);--ctl-accent-medium-default-bd:color-mix(in oklab, var(--brand) 60%, var(--surface));--ctl-accent-medium-hover-bg:color-mix(in oklab, var(--brand) 8%, var(--surface));--ctl-accent-medium-hover-fg:color-mix(in oklab, var(--brand) 86%, var(--ink));--ctl-accent-medium-hover-bd:color-mix(in oklab, var(--brand) 80%, var(--surface));--ctl-accent-medium-active-bg:color-mix(in oklab, var(--brand) 16%, var(--surface));--ctl-accent-medium-active-fg:color-mix(in oklab, var(--brand) 86%, var(--ink));--ctl-accent-medium-active-bd:color-mix(in oklab, var(--brand) 86%, var(--ink));--ctl-accent-medium-disabled-bg:var(--surface);--ctl-accent-medium-disabled-fg:color-mix(in oklab, var(--brand) 42%, var(--surface));--ctl-accent-medium-disabled-bd:color-mix(in oklab, var(--brand) 22%, var(--surface));
--ctl-accent-low-default-bg:transparent;--ctl-accent-low-default-fg:var(--brand);--ctl-accent-low-default-bd:transparent;--ctl-accent-low-hover-bg:color-mix(in oklab, var(--brand) 8%, var(--surface));--ctl-accent-low-hover-fg:color-mix(in oklab, var(--brand) 86%, var(--ink));--ctl-accent-low-hover-bd:transparent;--ctl-accent-low-active-bg:color-mix(in oklab, var(--brand) 16%, var(--surface));--ctl-accent-low-active-fg:color-mix(in oklab, var(--brand) 86%, var(--ink));--ctl-accent-low-active-bd:transparent;--ctl-accent-low-disabled-bg:transparent;--ctl-accent-low-disabled-fg:color-mix(in oklab, var(--brand) 42%, var(--surface));--ctl-accent-low-disabled-bd:transparent;
--ctl-negative-high-default-bg:var(--red);--ctl-negative-high-default-fg:var(--on-fill);--ctl-negative-high-default-bd:var(--red);--ctl-negative-high-hover-bg:color-mix(in oklab, var(--red) 86%, var(--ink));--ctl-negative-high-hover-fg:var(--on-fill);--ctl-negative-high-hover-bd:color-mix(in oklab, var(--red) 86%, var(--ink));--ctl-negative-high-active-bg:color-mix(in oklab, var(--red) 72%, var(--ink));--ctl-negative-high-active-fg:var(--on-fill);--ctl-negative-high-active-bd:color-mix(in oklab, var(--red) 72%, var(--ink));--ctl-negative-high-disabled-bg:color-mix(in oklab, var(--red) 38%, var(--surface));--ctl-negative-high-disabled-fg:color-mix(in oklab, var(--on-fill) 70%, color-mix(in oklab, var(--red) 38%, var(--surface)));--ctl-negative-high-disabled-bd:color-mix(in oklab, var(--red) 38%, var(--surface));
--ctl-negative-medium-default-bg:var(--surface);--ctl-negative-medium-default-fg:var(--red);--ctl-negative-medium-default-bd:color-mix(in oklab, var(--red) 60%, var(--surface));--ctl-negative-medium-hover-bg:color-mix(in oklab, var(--red) 8%, var(--surface));--ctl-negative-medium-hover-fg:color-mix(in oklab, var(--red) 86%, var(--ink));--ctl-negative-medium-hover-bd:color-mix(in oklab, var(--red) 80%, var(--surface));--ctl-negative-medium-active-bg:color-mix(in oklab, var(--red) 16%, var(--surface));--ctl-negative-medium-active-fg:color-mix(in oklab, var(--red) 86%, var(--ink));--ctl-negative-medium-active-bd:color-mix(in oklab, var(--red) 86%, var(--ink));--ctl-negative-medium-disabled-bg:var(--surface);--ctl-negative-medium-disabled-fg:color-mix(in oklab, var(--red) 42%, var(--surface));--ctl-negative-medium-disabled-bd:color-mix(in oklab, var(--red) 22%, var(--surface));
--ctl-negative-low-default-bg:transparent;--ctl-negative-low-default-fg:var(--red);--ctl-negative-low-default-bd:transparent;--ctl-negative-low-hover-bg:color-mix(in oklab, var(--red) 8%, var(--surface));--ctl-negative-low-hover-fg:color-mix(in oklab, var(--red) 86%, var(--ink));--ctl-negative-low-hover-bd:transparent;--ctl-negative-low-active-bg:color-mix(in oklab, var(--red) 16%, var(--surface));--ctl-negative-low-active-fg:color-mix(in oklab, var(--red) 86%, var(--ink));--ctl-negative-low-active-bd:transparent;--ctl-negative-low-disabled-bg:transparent;--ctl-negative-low-disabled-fg:color-mix(in oklab, var(--red) 42%, var(--surface));--ctl-negative-low-disabled-bd:transparent;
--ctl-ai-high-default-bg:var(--purple);--ctl-ai-high-default-fg:var(--on-fill);--ctl-ai-high-default-bd:var(--purple);--ctl-ai-high-hover-bg:color-mix(in oklab, var(--purple) 86%, var(--ink));--ctl-ai-high-hover-fg:var(--on-fill);--ctl-ai-high-hover-bd:color-mix(in oklab, var(--purple) 86%, var(--ink));--ctl-ai-high-active-bg:color-mix(in oklab, var(--purple) 72%, var(--ink));--ctl-ai-high-active-fg:var(--on-fill);--ctl-ai-high-active-bd:color-mix(in oklab, var(--purple) 72%, var(--ink));--ctl-ai-high-disabled-bg:color-mix(in oklab, var(--purple) 38%, var(--surface));--ctl-ai-high-disabled-fg:color-mix(in oklab, var(--on-fill) 70%, color-mix(in oklab, var(--purple) 38%, var(--surface)));--ctl-ai-high-disabled-bd:color-mix(in oklab, var(--purple) 38%, var(--surface));
--ctl-ai-medium-default-bg:var(--surface);--ctl-ai-medium-default-fg:var(--purple);--ctl-ai-medium-default-bd:color-mix(in oklab, var(--purple) 60%, var(--surface));--ctl-ai-medium-hover-bg:color-mix(in oklab, var(--purple) 8%, var(--surface));--ctl-ai-medium-hover-fg:color-mix(in oklab, var(--purple) 86%, var(--ink));--ctl-ai-medium-hover-bd:color-mix(in oklab, var(--purple) 80%, var(--surface));--ctl-ai-medium-active-bg:color-mix(in oklab, var(--purple) 16%, var(--surface));--ctl-ai-medium-active-fg:color-mix(in oklab, var(--purple) 86%, var(--ink));--ctl-ai-medium-active-bd:color-mix(in oklab, var(--purple) 86%, var(--ink));--ctl-ai-medium-disabled-bg:var(--surface);--ctl-ai-medium-disabled-fg:color-mix(in oklab, var(--purple) 42%, var(--surface));--ctl-ai-medium-disabled-bd:color-mix(in oklab, var(--purple) 22%, var(--surface));
--ctl-ai-low-default-bg:transparent;--ctl-ai-low-default-fg:var(--purple);--ctl-ai-low-default-bd:transparent;--ctl-ai-low-hover-bg:color-mix(in oklab, var(--purple) 8%, var(--surface));--ctl-ai-low-hover-fg:color-mix(in oklab, var(--purple) 86%, var(--ink));--ctl-ai-low-hover-bd:transparent;--ctl-ai-low-active-bg:color-mix(in oklab, var(--purple) 16%, var(--surface));--ctl-ai-low-active-fg:color-mix(in oklab, var(--purple) 86%, var(--ink));--ctl-ai-low-active-bd:transparent;--ctl-ai-low-disabled-bg:transparent;--ctl-ai-low-disabled-fg:color-mix(in oklab, var(--purple) 42%, var(--surface));--ctl-ai-low-disabled-bd:transparent;
/* <<< CONTROL MATRIX */
}
*{box-sizing:border-box}html{font-family:var(--font)}body{margin:0;font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg);color:var(--ink);line-height:var(--lh-base);font-size:var(--fs-body)}
/* The shared busy line. Every "the agent is doing something" message uses this, so
   a new one cannot forget its size and fall back to the body default. */
.loadrow{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body);line-height:var(--lh-base);color:var(--navy2)}
/* THE PARTS THE BROWSER DRAWS carry the palette too (impeccable.style's craft floor, adopted
   2026-09-25; docs/design/IMPECCABLE.md): the selection, the caret, and every native control
   that takes an accent. A checkbox drawn by the app sets appearance:none and ignores it. */
:is(input[type=range],input[type=checkbox],input[type=radio],progress){accent-color:var(--accent)}
:is(input,textarea,[contenteditable]){caret-color:var(--accent)}
::selection{background:var(--accent-weak);color:var(--accent-ink)}
/* Headings wrap to even lines and prose avoids a one-word last line, in the app and on the
   public site alike (both load this sheet). Neither ever adds a line. */
:is(h1,h2,h3,h4){text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--accent-ink)}


/* DARK, FROM THE SAME TOKENS. There was no dark theme at all: with the system set
   to dark the body stayed #EFF1F5 (read 2026-09-02). Every token the sheets read is
   redefined here once; nothing is styled inside this block, so a component never has
   a colour whose only definition sits behind a media query.

   SCOPED :not([data-appearance="light"]) since 2026-09-18, so an install pinned to
   light stays light on a dark OS. Pinned DARK is not written here a second time:
   src/pagesoar/web/webassets.forced_dark() generates the same declarations under
   [data-appearance="dark"] and appends them to this file as served. Edit the one
   block below; its twin follows. */
@media (prefers-color-scheme: dark){
:root:not([data-appearance="light"]){
color-scheme:dark;
--page:#0F1319;--surface:#171B22;--tint:#1C212A;--tint2:#222833;--tint3:#2A313C;--card-nested:#2A313C;--card-nested2:#3A4352;--line-nested:rgba(255,255,255,.12);--ink3-nested:#B4BBC6;--red-nested:#FF8A96;
/* --ink3 #8A93A0 -> #9199A5 on 2026-09-09: 4.22 on --tint3 (.s-queued, .sbtag),
   the one pair this scheme had under 4.5:1 once the guard derived its pairs
   instead of reading a list. --muted is var(--ink3) and rides with it. The
   scheme's other seven sub-AA pairs were all in the light palette. */
--ink:#EEF1F5;--ink2:#C3C9D3;--ink3:#9199A5;--ink4:#7E8897;
--brand:#FF9F0A;--brand-d:#FFB444;--brand-l:#3A2410;
--red:#F07080;--red-l:#3A1A1F;
--amber:#E8A04A;--amber-l:#3A2A12;
--blue:#7AA2F0;--blue-l:#172640;
--grey:#9AA3B2;--grey-l:#262C36;
--purple:#B08AE6;--purple-l:#2A2140;
--green:#4FC496;--green-l:#14332A;
--sh-1:0 1px 2px rgba(0,0,0,.5);
--sh-2:0 2px 8px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4);
--sh-3:0 14px 38px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.45);
--line:#2A303A;--line2:#232932;--line-strong:var(--line-hover);
--hair:rgba(255,255,255,.08);--sep:#232932;
--dot-red:#F07080;--dot-amber:#E8A04A;--dot-green:#5CC08A;--dot-mauve:#B08AE6;
--ev-meas:#172640;--ev-meas-ink:#A9C3F5;
--ev-der:#2A2140;--ev-der-ink:#CDB6F0;
--ev-mod:#3A2A12;--ev-mod-ink:#F0C48A;
--ev-wr:#3A1A1F;--ev-wr-ink:#F5A3AD;
--pv-search:#172640;--pv-search-ink:#A9C3F5;
--pv-page:#173424;--pv-page-ink:#9BDDB8;
--pv-purpose:#2A2140;--pv-purpose-ink:#CDB6F0;
--pv-claim:#3A2A12;--pv-claim-ink:#F0C48A;
--pv-goal:#3A1A1F;--pv-goal-ink:#F5A3AD;
--pv-brand:#23224A;--pv-brand-ink:#BCB8F0;
--pv-market:#16312F;--pv-market-ink:#9AD6D0;
--pv-warn:#3A2A12;--pv-warn-ink:#F0C48A;
--pv-bad:#3A1A1F;--pv-bad-ink:#F5A3AD;
--on-fill:#0F1319;
--bad-ink:#F5A3AD;--warn-ink:#F0C48A;--info-ink:#A9C3F5;
--bad-line:#5A2A31;
--line-hover:#3A4351;
--control-line:#5D6C82;
--serp-link:#8AB4F8;--serp-text:#BDC1C6;
--tint-good:#16221C;--tint-good-line:#24503A;
--tint-warm:#23201A;--tint-warm-line:#4A3D24;
/* 1.36:1 on --surface and 1.46:1 on --page (the floor is 1.35), --ink2 7.65:1
   on it. --hover-line 3.98:1 on --surface, brighter than the resting
   --control-line so the edge firms up. */
--hover:#2C333E;--hover-line:#6E7A8E;--press:#353D4A;--ring:var(--brand);
--on-fill-wash:rgba(255,255,255,.25);
}
/* A CARD INSIDE A CARD STEPS UP (the owner, 2026-10-17, on Needs attention: "that card should be much lighter so its
   very easy to tell it is its own element nested within the darker component"). Glass drew both on the same .58
   surface, 1.08:1 apart; --card-nested (the dark token blocks) is 1.25:1 or more. Dark only, system or forced: in
   light a hairline border separates them. In dark the good and bad cards tone their text, not their fill, so they step
   up too; a popover (absolute, with its own shadow) is a layer, not a nested card. It lives here, in the token sheet's dark block, because the
   server makes its forced twin from this block (tests/test_liquid_glass.py), so the two dark switches cannot list
   different cards. SkailSites check_text_fills_box.js measureNestedSurface
   holds every screen to it (tests/js/test_shared_layout_guard.js). */
html:not([data-appearance="light"]) :is(.patbox,.card,.homepanel,.kbcard,.rvcard,.bulkcol,.synthbox,.xhero,.hpage,.csbox,.mktsec,.pbcard,.ovrow,.abcard) :is(.qpick>div,.pbcard,.rvcard,.pbdrawer,.homestat,.xratio,.rvdiff,.rec2,.ovtablewrap,.ovstats,.npserp,.linksrcs,.kbrules,.csbox,.bulkpills,.afind,.bhold){background:var(--card-nested);border-color:var(--line-nested);--ink3:var(--ink3-nested);--ink4:var(--ink3-nested);--muted:var(--ink3-nested);--red:var(--red-nested);--bad:var(--red-nested)}
/* A card inside a nested card steps up once more (item 293: Internal links' sources in their card, a playbook drawer in its
   card and a recommendation in its box all drew --card-nested on --card-nested, Delta E 0; scripts/nested_surfaces.js). Secondary text and the loss red step up with the ground (--ink3-nested, --red-nested: the board
   measured #A0A8B4 at 3.4:1 on the second step), and the second step drops its outline: one tonal inset, as the first. */
html:not([data-appearance="light"]) :is(.patbox,.card,.homepanel,.kbcard,.rvcard,.bulkcol,.synthbox,.xhero,.hpage,.csbox,.mktsec,.pbcard,.ovrow,.abcard) :is(.qpick>div,.pbcard,.rvcard,.pbdrawer,.homestat,.xratio,.rvdiff,.rec2,.ovtablewrap,.ovstats,.npserp,.linksrcs,.kbrules,.csbox,.bulkpills,.afind,.bhold) :is(.qpick>div,.pbcard,.rvcard,.pbdrawer,.homestat,.xratio,.rvdiff,.rec2,.ovtablewrap,.ovstats,.npserp,.linksrcs,.kbrules,.csbox,.bulkpills,.afind,.bhold){background:var(--card-nested2);border-color:transparent}
}

/* GENERATED by forced_dark(): pinned dark, as PageSoar's front door serves it. */
:root[data-appearance="dark"]{
color-scheme:dark;
--page:#0F1319;--surface:#171B22;--tint:#1C212A;--tint2:#222833;--tint3:#2A313C;--card-nested:#2A313C;--card-nested2:#3A4352;--line-nested:rgba(255,255,255,.12);--ink3-nested:#B4BBC6;--red-nested:#FF8A96;

--ink:#EEF1F5;--ink2:#C3C9D3;--ink3:#9199A5;--ink4:#7E8897;
--brand:#FF9F0A;--brand-d:#FFB444;--brand-l:#3A2410;
--red:#F07080;--red-l:#3A1A1F;
--amber:#E8A04A;--amber-l:#3A2A12;
--blue:#7AA2F0;--blue-l:#172640;
--grey:#9AA3B2;--grey-l:#262C36;
--purple:#B08AE6;--purple-l:#2A2140;
--green:#4FC496;--green-l:#14332A;
--sh-1:0 1px 2px rgba(0,0,0,.5);
--sh-2:0 2px 8px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4);
--sh-3:0 14px 38px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.45);
--line:#2A303A;--line2:#232932;--line-strong:var(--line-hover);
--hair:rgba(255,255,255,.08);--sep:#232932;
--dot-red:#F07080;--dot-amber:#E8A04A;--dot-green:#5CC08A;--dot-mauve:#B08AE6;
--ev-meas:#172640;--ev-meas-ink:#A9C3F5;
--ev-der:#2A2140;--ev-der-ink:#CDB6F0;
--ev-mod:#3A2A12;--ev-mod-ink:#F0C48A;
--ev-wr:#3A1A1F;--ev-wr-ink:#F5A3AD;
--pv-search:#172640;--pv-search-ink:#A9C3F5;
--pv-page:#173424;--pv-page-ink:#9BDDB8;
--pv-purpose:#2A2140;--pv-purpose-ink:#CDB6F0;
--pv-claim:#3A2A12;--pv-claim-ink:#F0C48A;
--pv-goal:#3A1A1F;--pv-goal-ink:#F5A3AD;
--pv-brand:#23224A;--pv-brand-ink:#BCB8F0;
--pv-market:#16312F;--pv-market-ink:#9AD6D0;
--pv-warn:#3A2A12;--pv-warn-ink:#F0C48A;
--pv-bad:#3A1A1F;--pv-bad-ink:#F5A3AD;
--on-fill:#0F1319;
--bad-ink:#F5A3AD;--warn-ink:#F0C48A;--info-ink:#A9C3F5;
--bad-line:#5A2A31;
--line-hover:#3A4351;
--control-line:#5D6C82;
--serp-link:#8AB4F8;--serp-text:#BDC1C6;
--tint-good:#16221C;--tint-good-line:#24503A;
--tint-warm:#23201A;--tint-warm-line:#4A3D24;

--hover:#2C333E;--hover-line:#6E7A8E;--press:#353D4A;--ring:var(--brand);
--on-fill-wash:rgba(255,255,255,.25);
}
html[data-appearance="dark"] :is(.patbox,.card,.homepanel,.kbcard,.rvcard,.bulkcol,.synthbox,.xhero,.hpage,.csbox,.mktsec,.pbcard,.ovrow,.abcard) :is(.qpick>div,.pbcard,.rvcard,.pbdrawer,.homestat,.xratio,.rvdiff,.rec2,.ovtablewrap,.ovstats,.npserp,.linksrcs,.kbrules,.csbox,.bulkpills,.afind,.bhold){background:var(--card-nested);border-color:var(--line-nested);--ink3:var(--ink3-nested);--ink4:var(--ink3-nested);--muted:var(--ink3-nested);--red:var(--red-nested);--bad:var(--red-nested)}
html[data-appearance="dark"] :is(.patbox,.card,.homepanel,.kbcard,.rvcard,.bulkcol,.synthbox,.xhero,.hpage,.csbox,.mktsec,.pbcard,.ovrow,.abcard) :is(.qpick>div,.pbcard,.rvcard,.pbdrawer,.homestat,.xratio,.rvdiff,.rec2,.ovtablewrap,.ovstats,.npserp,.linksrcs,.kbrules,.csbox,.bulkpills,.afind,.bhold) :is(.qpick>div,.pbcard,.rvcard,.pbdrawer,.homestat,.xratio,.rvdiff,.rec2,.ovtablewrap,.ovstats,.npserp,.linksrcs,.kbrules,.csbox,.bulkpills,.afind,.bhold){background:var(--card-nested2);border-color:transparent}