/* ═══════════════════════════════════════════════════════════════════════
   FIELDCUT UI — TOKENS
   The only file in FieldCut that is allowed to invent a value.
   If a number is not in here, it does not go in a stylesheet.

   THE DIRECTION, in one line:
   a bright white page with tight, quiet type, capsule buttons, soft
   generous corners and depth made of shadow rather than line — where
   exactly two colours survive: one for KEPT, one for DROPPED.

   Measured off the reference (spacefs.com, 16 September 2026) at 1024px
   and then held to FieldCut's own contrast floor:
     ground #ffffff · ink #0a0a0a · muted ink #737373 · line #e5e5e5
     primary button: black capsule, 48px tall, 0 28px, 14px at weight 500
     headings weight 500, tracking -0.025em, line-height 1.05–1.2
     corners 6 / 8 / 12 / 16 / 24 and a real capsule for controls
     depth: 0 1px 3px rgba(0,0,0,.08) near, 0 20px 70px rgba(0,0,0,.08) far
     motion 150ms cubic-bezier(.4,0,.2,1)
   The reference is a page you read once. FieldCut is a control you hit a
   thousand times, so the ink steps here are stronger than the reference's
   where it matters, and nothing below 4.5:1 is allowed to be text in this
   kit at all. Ratios in the comments are computed, not estimated.

   WHAT THE REFERENCE DOES NOT GET TO DECIDE. It is monochrome and puts a
   blue ring on focus. FieldCut cannot: blue already means KEPT and
   vermilion already means DROPPED, and those two meanings are how the grid
   is read. So the accent pair stays, the focus ring stays ink, and
   everything that is not kept-or-dropped goes monochrome.

   Load order, never shuffled:
     tokens.css → base.css → components.css → design.css / style.css
   ═══════════════════════════════════════════════════════════════════════ */

/* The ONE file FieldCut ships, and only a Windows or Linux visitor ever
   fetches it: a subset of Apple's SF Pro variable, weights 300-600, latin plus
   the punctuation, currency, arrows, keycap symbols and marks the product
   actually draws. On a Mac -apple-system answers first and this is never
   downloaded. Regenerate with scripts/build-sf-pro.py. Never hand-edit it. */
@font-face{
  font-family:'SF Pro';
  src:url('/fonts/SFPro-latin.woff2') format('woff2');
  font-weight:300 600;font-style:normal;font-display:swap;
}

/* ═════ 1 · LIGHT IS THE BASE ═════════════════════════════════════════
   Every colour is defined once here, on a bare :root, so no colour can
   exist only inside a media query. Dark redefines these same names and
   invents nothing.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light dark;

  /* ── GROUND ── four steps, no tint. A tinted grey next to a photograph
     reads as a colour cast, so every neutral here is exactly neutral.

     The page is now PURE WHITE, not the old off-white #fbfbfb. That is the
     single loudest thing the reference does: it does not lift a card by
     making it a lighter grey, it lifts it with a hairline and a shadow on
     a white page. So --fc-canvas and --fc-bg are deliberately the same
     value, and a card separates through --fc-sh-1, not through tone. */
  --fc-canvas:#ffffff;   /* the page behind everything */
  --fc-bg:#ffffff;       /* card, panel, sheet — lifted by shadow, not tone */
  --fc-bg2:#f5f5f5;      /* hovered row, quiet button hover, muted block */
  --fc-bg3:#ebebeb;      /* filled input, pressed control, well */

  /* ── INK ── three steps. All three clear 4.5:1 on all four grounds, so
     any of them may be text. Measured on --fc-canvas / on --fc-bg3: */
  --fc-fg:#0a0a0a;       /* 20.02 / 16.09 — primary (reference value) */
  --fc-fg2:#525252;      /*  7.46 /  6.00 — secondary, labels, meta */
  --fc-fg3:#737373;      /*  4.74 /  3.81 — placeholder, disabled label */

  /* ── LINE ── a hairline separates; a border defines. Two jobs, two
     tokens. --fc-border is decoration and never the only thing that
     shows a control exists. --fc-border2 is that thing, so it clears 3:1. */
  --fc-border:#e5e5e5;   /* 1.24 on white — separator, table rule, card edge */
  --fc-border2:#8f8f8f;  /* 3.23 on white — control edge */
  --fc-line:var(--fc-border);          /* alias, older stylesheets ask for this */

  /* ── FOCUS ── ink, not colour. The reference rings in #0066ff; FieldCut
     cannot, because blue already means kept. Ink also measures far past
     3:1 on every surface in both themes, which no accent hue manages. */
  --fc-ring:#0a0a0a;

  /* ── KEPT · ULTRAMARINE #1a2fd0 ──
     Chosen, selected, primary action. Kept for two reasons: it is 8.30:1
     on the white ground so it can be small text with no apology, and
     against vermilion it separates on LIGHTNESS as well as hue, which is
     what a red-green colourblind user actually reads. Nothing else is
     blue — including, now, the focus ring. */
  --fc-ac:#1a2fd0;                     /* fill.  8.30 vs white */
  --fc-ac-ink:#1a2fd0;                 /* as TEXT on the ground.  8.30 */
  --fc-ac-on:#ffffff;                  /* text sitting ON the fill.  8.89 */
  --fc-ac-wash:rgba(26,47,208,.08);    /* selected row, active tab */
  --fc-ac-line:rgba(26,47,208,.45);

  /* ── DROPPED · VERMILION #cf2500 ──
     One meaning: rejected, destructive, about to be undone. Carries white
     text at 5.36:1. Never relies on hue alone: everything dropped is also
     hatched, dashed, or struck through. */
  --fc-rj:#cf2500;                     /* fill.  5.00 vs white */
  --fc-rj-ink:#b32100;                 /* as TEXT on the ground.  6.25 */
  --fc-rj-on:#ffffff;                  /* text sitting ON the fill.  5.36 */
  --fc-rj-wash:rgba(207,37,0,.09);
  --fc-rj-line:rgba(207,37,0,.48);

  /* ── STATUS · meaning, never decoration ──
     green done/paid · amber waiting · red failed · blue in progress = accent.
     These sit on a badge, in a sentence, on a row end. Never on chrome. */
  --fc-ok:#0f7a3d;   --fc-ok-wash:rgba(15,122,61,.10);    /* 5.07 */
  --fc-warn:#8a5a00; --fc-warn-wash:rgba(138,90,0,.10);   /* 5.54 */
  --fc-err:#b3261e;  --fc-err-wash:rgba(179,38,30,.10);   /* 6.11 */

  /* Text sitting ON a status fill. Added 16 September 2026: the app had a
     badge lettering a hardcoded #000 on --fc-warn because this pair did not
     exist, which is the exact failure the one-file rule is meant to catch.
     Unlike --fc-ac-on and --fc-rj-on, these FLIP with the theme, because the
     status fills themselves do: light uses dark hues that carry white,
     dark uses bright hues that carry ink. Measured on their own fill. */
  --fc-ok-on:#ffffff;    /* 5.43 on #0f7a3d */
  --fc-warn-on:#ffffff;  /* 5.93 on #8a5a00 */
  --fc-err-on:#ffffff;   /* 6.11 on #b3261e */

  /* ── FIXED INK AND PAPER ──
     Deliberately the same in both themes, like the photo stage above, and
     for the same reason: these letter something whose GROUND is not ours.
     A folder swatch is a colour somebody picked, and a badge drawn on it
     needs ink that does not flip to near-white at night and vanish. Use
     these only where the surface underneath is user-chosen or a photograph.
     Never as a page colour — that is what --fc-fg and --fc-canvas are. */
  --fc-ink-fixed:#0a0a0a;
  --fc-paper-fixed:#ffffff;

  /* ── THE PHOTO STAGE ──
     Deliberately the SAME in both themes, and therefore deliberately absent
     from both dark blocks below. A photograph judged on a white surround in
     the morning and a black one at night is two different photographs. The
     chrome follows the device; the stage never does. */
  --fc-photo:#0a0a0a;
  --fc-photo-fg:#f2f2f2;               /* 17.68 on the stage */
  --fc-photo-fg2:rgba(242,242,242,.72);
  --fc-photo-line:rgba(255,255,255,.16);
  --fc-photo-ac:#7c8cff;               /* the kept blue, lifted for the stage. 6.65 */
  --fc-photo-rj:#ff8a70;               /* dropped, lifted for the stage. 8.60 */

  /* ── IMAGE EDGE ── pure black in light, pure white in dark, never a
     tinted neutral: a tint picks up the surface beneath and reads as dirt. */
  --fc-img-edge:rgba(0,0,0,.10);

  /* ── ELEVATION ── this is where the reference's whole look lives.
     On a white page with no tonal difference between card and ground,
     depth is the ONLY thing separating one surface from another, so these
     stopped being decoration and became structural. Four steps, measured
     off the reference and kept in its order: a hairline lift for a resting
     card, a near shadow for something that moved, a far soft shadow for a
     panel, and a very wide low-opacity bloom for product art floating in
     the middle of a white page. Wide and faint, never tight and dark. */
  --fc-sh-1:0 1px 3px rgba(0,0,0,.08);                                  /* resting card */
  --fc-sh-2:0 1px 2px rgba(0,0,0,.06), 0 0 0 .5px rgba(0,0,0,.06);      /* raised control */
  --fc-sh-soft:0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);    /* menu, popover */
  --fc-sh-pop:0 20px 70px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);   /* modal, sheet */
  --fc-sh-float:0 30px 70px -24px rgba(0,0,0,.28),
                0 8px 24px -12px rgba(0,0,0,.10);                       /* hero product art */

  /* ── GLASS ── bars and sheets that sit over something that scrolls */
  --fc-glass:rgba(255,255,255,.72);
  --fc-glass-fx:blur(20px) saturate(140%);

  /* ═════ 2 · TYPE ═════════════════════════════════════════════════════
     ONE FACE. SF Pro, the typeface macOS and iOS draw their own interfaces
     in, so FieldCut stops reading as a website that happens to run on a Mac
     and starts reading as something Apple shipped. The reference is set in
     Google Sans, which is Google's own and cannot be licensed; SF Pro is
     the closer face anyway, since FieldCut is a Mac app before it is a page.

     It is never downloaded. Apple's licence does not allow serving SF Pro as
     a webfont, and there is no reason to want to: -apple-system hands back
     the copy already on the machine, hinted by the OS, switching between the
     Text and Display cuts at the size where Apple switches them. The named
     'SF Pro' entries pick it up on a Windows or Linux machine where somebody
     installed it by hand; Segoe UI is the honest fallback.

     There is no second face and no third. Counts, timestamps, keycaps and
     filenames are SF Pro with tabular figures, which is what Finder and the
     menu bar do. --fc-font-mono stays as a NAME because forty rules ask for
     it, and resolves to the same face.
     ══════════════════════════════════════════════════════════════════ */
  --fc-font-body:-apple-system,BlinkMacSystemFont,'SF Pro',system-ui,'Segoe UI',sans-serif;
  --fc-font-sys:var(--fc-font-body);
  --fc-font-mono:var(--fc-font-body);
  --fc-font-display:var(--fc-font-body);
  --fc-font-alt:var(--fc-font-body);

  /* THREE WEIGHTS, and the middle one is new. The reference sets every
     heading, button, nav item and label at 500 and every paragraph at 400,
     and almost never goes to 600. That single move — 500 instead of 600 on
     everything that used to shout — is most of why it reads calm.

     400 reads everything. 500 is the working weight for anything that is a
     label rather than a sentence: heading, button, nav, table head, caps
     label. 600 survives for inline emphasis only, four or five places in
     the whole product. The old 300 is retired and --fc-fw-down now points
     at 400, because the reference has no light cut and SF Pro Light under
     a tight heading thins to grey mush. */
  --fc-fw-down:400;     /* retired. Kept as a name so nothing 404s. */
  --fc-fw:400;          /* every sentence */
  --fc-fw-mid:500;      /* heading · button · nav · table head · caps label */
  --fc-fw-up:600;       /* inline emphasis only. Nothing heavier exists. */
  --fc-fw-label:var(--fc-fw-mid);  /* older name — moved 600 → 500, see above */

  --fc-fs-1:11px;   /* caps label, table head */
  --fc-fs-2:12px;   /* meta, timestamp, count */
  --fc-fs-3:13px;   /* secondary text, dense cell */
  --fc-fs-4:14px;   /* DEFAULT in the app — body, control, row */
  --fc-fs-5:16px;   /* card and row title */
  --fc-fs-6:18px;   /* section heading */
  --fc-fs-7:22px;   /* page title */
  --fc-fs-8:28px;   /* hero number, one per screen */
  --fc-fs-note:14px;                       /* a small note on a marketing page */
  --fc-fs-read:16px;                       /* body on a marketing page (reference base) */
  --fc-fs-lead:clamp(17px,1.6vw,20px);     /* standfirst. Reference: 18px/500/-.025em */
  --fc-fs-9:clamp(26px,3.6vw,36px);        /* marketing subhead. Reference H3 = 36 */
  --fc-fs-10:clamp(32px,4.5vw,56px);       /* marketing headline. Reference H2 = 46 */
  --fc-fs-11:clamp(38px,5.6vw,72px);       /* marketing hero, one per page */

  /* A GLYPH IS NOT A TYPE SIZE. An arrow, a tick, a play triangle drawn as a
     character is a graphic dimension that happens to be set in font-size, and
     it must never borrow a step from the reading ladder above. */
  --fc-glyph-sm:24px;   /* an icon inside an empty state */
  --fc-glyph:40px;      /* a nav arrow, a success tick */
  --fc-glyph-lg:56px;   /* the play triangle over a video */

  /* LINE HEIGHT. The reference sets headings far tighter than FieldCut did:
     36px over 40 is 1.11, 46px over 48 is 1.05. --fc-lh-head moved from 1.6
     to 1.15 and that one number is the other half of why the reference reads
     the way it does. Prose is untouched at 1.6. */
  --fc-lh-tight:1.05;   /* display only */
  --fc-lh-snug:1.15;    /* every heading */
  --fc-lh:1.5;          /* UI text */
  --fc-lh-head:1.15;    /* the page title. Was 1.6. */
  --fc-lh-prose:1.6;    /* paragraphs */

  /* TRACKING. The reference tightens by exactly -0.025em on everything from
     18px up, headings and standfirsts alike, and leaves 16px and below
     alone. Two steps, and the threshold dropped from 28px to 18px. */
  --fc-ls-tight:-.025em;/* 18px and above */
  --fc-ls-mid:-.0125em; /* 16–17px, where full tightening would close it up */
  --fc-ls-caps:.07em;   /* only on all-caps labels */
  --fc-measure:68ch;    /* longest a line of prose gets */

  /* ═════ 3 · SPACE — 4px grid, these steps, nothing between ═════ */
  --fc-s-0:2px;  --fc-s-1:4px;  --fc-s-2:8px;  --fc-s-3:12px; --fc-s-4:16px;
  --fc-s-5:24px; --fc-s-6:32px; --fc-s-7:48px; --fc-s-8:64px; --fc-s-9:96px;
  --fc-s-10:clamp(72px,10vw,128px);  /* between the big sections of a page.
                                        Reference sits at 92–96px at 1024 and
                                        opens further on a wide screen. */

  --fc-gut:clamp(20px,5vw,72px);
  --fc-page-max:1180px;              /* the reference's container, exactly */
  --fc-prose-max:680px;              /* its paragraph column */
  --fc-prose-narrow:520px;           /* its standfirst column */

  /* ═════ 4 · SHAPE — a ladder, and the capsule is back ════════════════
     The old kit was one 5px corner on everything, taken from a reading
     page. The reference is the opposite: a soft ladder that gets rounder
     as a surface gets bigger, and a true capsule on every control you
     press. 16 September 2026, at Swayam's call, FieldCut moved to it.

     Concentric nesting comes free from the ladder: 24 − 8 = 16,
     16 − 4 = 12, 12 − 4 = 8, 8 − 2 = 6. An outer surface is always its
     inner surface plus the padding between them.

     One thing deliberately stays square-ish: a thumbnail in the grid.
     6px on a 160px tile is a corner; 16px is a rounded photograph, and a
     wall of rounded photographs reads as a moodboard rather than a
     working contact sheet. --fc-r-sm is that value and it is the tightest
     corner in the kit. */
  --fc-r-sm:6px;      /* thumbnail, chip, dense control */
  --fc-radius:8px;    /* input, select, small button, menu item */
  --fc-r-box:12px;    /* card, popover, toast */
  --fc-r-panel:16px;  /* panel, drawer, modal */
  --fc-r-xl:24px;     /* the big product frame on a marketing page */
  --fc-r-pill:9999px; /* a real capsule again: button, tab, badge, switch */
  --fc-r-pop:12px;    /* alias for the toast and the hint callout */

  --fc-ctrl-h-sm:32px;  /* the reference's small pill */
  --fc-ctrl-h:40px;     /* the working control, and a legal tap target unaided */
  --fc-ctrl-h-lg:48px;  /* the reference's primary button, exactly */
  --fc-hit:40px;        /* smallest tap target, always */
  --fc-pad-btn:28px;    /* the reference's horizontal button padding */
  --fc-pad-btn-sm:16px;
  --fc-bw:1px;
  --fc-bw2:2px;         /* focus ring, kept rail, dropped dash */

  /* ═════ 5 · MOTION — two speeds in, one out ═════════════════════════
     The reference transitions interactive state in 150ms on the standard
     material curve and does nothing else. --fc-dur-tap and --fc-ease moved
     onto those exact values; the entering and leaving curves are FieldCut's
     own and are unchanged, because the reference has no drawers.
     Only transform and opacity are ever animated. Never `all`. */
  --fc-dur-tap:150ms;   /* hover, press, colour (reference value) */
  --fc-dur:200ms;       /* something small entering */
  --fc-dur-slow:320ms;  /* modal, drawer, sheet */
  --fc-dur-out:140ms;   /* anything leaving: shorter and softer than entering */
  --fc-ease:cubic-bezier(.4,0,.2,1);     /* reference value */
  --fc-ease-out:cubic-bezier(.16,1,.3,1);
  --fc-ease-in:cubic-bezier(.4,0,1,1);
  --fc-stagger:40ms;    /* per item in a revealed list */
  --fc-press:.96;       /* press feedback. Exactly this. Below .95 looks acted. */
}

/* ═════ DARK ═════════════════════════════════════════════════════════════
   Designed, not derived. Only the names above are redefined, the photo
   stage excepted on purpose. Guarded so an explicit light choice wins.
   The reference's own dark scenes are #0a0a0a with #fafafa ink and an
   inset white hairline instead of a border, and that is what this is.
   Ratios measured on the dark --fc-canvas / on --fc-bg3.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fc-canvas:#0a0a0a;
    --fc-bg:#141414;
    --fc-bg2:#1f1f1f;
    --fc-bg3:#292929;

    --fc-fg:#fafafa;                    /* 19.03 / 14.11 */
    --fc-fg2:#a3a3a3;                   /*  7.85 /  5.82 */
    --fc-fg3:#8a8a8a;                   /*  5.74 /  4.25 */

    --fc-border:#262626;                /* 1.35 — separator */
    --fc-border2:#737373;               /* 4.17 — control edge */
    --fc-line:var(--fc-border);
    --fc-ring:#fafafa;                  /* 19.03 */

    /* #1a2fd0 is 2.2:1 on a black page — the button would have no edge.
       Same hue, lifted until the fill itself clears 3:1 against the page
       and still carries white type. */
    --fc-ac:#3d51ff;                    /* fill.  3.68 vs canvas, white on it 5.50 */
    --fc-ac-ink:#8f9dff;                /* as TEXT.  8.12 */
    --fc-ac-on:#ffffff;
    --fc-ac-wash:rgba(61,81,255,.18);
    --fc-ac-line:rgba(143,157,255,.45);

    --fc-rj:#d92800;                    /* fill.  4.09 vs canvas, white on it 4.94 */
    --fc-rj-ink:#ff9a80;                /* as TEXT.  9.81 */
    --fc-rj-on:#ffffff;
    --fc-rj-wash:rgba(217,40,0,.20);
    --fc-rj-line:rgba(255,154,128,.50);

    --fc-ok:#4ade80;   --fc-ok-wash:rgba(74,222,128,.14);    /* 11.60 */
    --fc-warn:#f5b544; --fc-warn-wash:rgba(245,181,68,.14);  /* 11.15 */
    --fc-err:#ff9a90;  --fc-err-wash:rgba(255,154,144,.14);  /*  9.89 */

    /* The dark status hues are bright, so text on them is ink, not white.
       This is the one colour pair in the kit that inverts between themes.
       Measured on their own fill: 11.37, 10.92, 9.69. */
    --fc-ok-on:#0a0a0a; --fc-warn-on:#0a0a0a; --fc-err-on:#0a0a0a;

    --fc-img-edge:rgba(255,255,255,.10);

    /* On black, a shadow cannot be seen. The reference solves it the same
       way every time: an inset white hairline does the separating and the
       shadow only says how far the thing is floating. */
    --fc-sh-1:inset 0 0 0 1px rgba(255,255,255,.07);
    --fc-sh-2:0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
    --fc-sh-soft:0 2px 8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
    --fc-sh-pop:0 18px 50px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
    --fc-sh-float:0 30px 70px -24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);

    --fc-glass:rgba(10,10,10,.72);
  }
}

/* The same values again for an explicit choice, so a toggle wins both ways.
   The second selector makes a THEME ISLAND possible: any element carrying
   data-theme flips only its own subtree, which is how one page can show
   both themes at once and how an app can pin a single panel. */
:root[data-theme="dark"],[data-theme="dark"]{
  --fc-canvas:#0a0a0a; --fc-bg:#141414; --fc-bg2:#1f1f1f; --fc-bg3:#292929;
  --fc-fg:#fafafa; --fc-fg2:#a3a3a3; --fc-fg3:#8a8a8a;
  --fc-border:#262626; --fc-border2:#737373; --fc-line:var(--fc-border);
  --fc-ring:#fafafa;
  --fc-ac:#3d51ff; --fc-ac-ink:#8f9dff; --fc-ac-on:#ffffff;
  --fc-ac-wash:rgba(61,81,255,.18); --fc-ac-line:rgba(143,157,255,.45);
  --fc-rj:#d92800; --fc-rj-ink:#ff9a80; --fc-rj-on:#ffffff;
  --fc-rj-wash:rgba(217,40,0,.20); --fc-rj-line:rgba(255,154,128,.50);
  --fc-ok:#4ade80; --fc-ok-wash:rgba(74,222,128,.14);
  --fc-warn:#f5b544; --fc-warn-wash:rgba(245,181,68,.14);
  --fc-err:#ff9a90; --fc-err-wash:rgba(255,154,144,.14);
  --fc-ok-on:#0a0a0a; --fc-warn-on:#0a0a0a; --fc-err-on:#0a0a0a;
  --fc-img-edge:rgba(255,255,255,.10);
  --fc-sh-1:inset 0 0 0 1px rgba(255,255,255,.07);
  --fc-sh-2:0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
  --fc-sh-soft:0 2px 8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
  --fc-sh-pop:0 18px 50px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
  --fc-sh-float:0 30px 70px -24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);
  --fc-glass:rgba(10,10,10,.72);
}

/* A light island — the same mirror in the other direction, so a light
   section inside a dark page (or the explicit light toggle) restates the
   palette instead of inheriting the wrong one. The bare :root block above
   is the source of truth; these are the same values, nothing new. */
:root[data-theme="light"],[data-theme="light"]{
  --fc-canvas:#ffffff; --fc-bg:#ffffff; --fc-bg2:#f5f5f5; --fc-bg3:#ebebeb;
  --fc-fg:#0a0a0a; --fc-fg2:#525252; --fc-fg3:#737373;
  --fc-border:#e5e5e5; --fc-border2:#8f8f8f; --fc-line:var(--fc-border);
  --fc-ring:#0a0a0a;
  --fc-ac:#1a2fd0; --fc-ac-ink:#1a2fd0; --fc-ac-on:#ffffff;
  --fc-ac-wash:rgba(26,47,208,.08); --fc-ac-line:rgba(26,47,208,.45);
  --fc-rj:#cf2500; --fc-rj-ink:#b32100; --fc-rj-on:#ffffff;
  --fc-rj-wash:rgba(207,37,0,.09); --fc-rj-line:rgba(207,37,0,.48);
  --fc-ok:#0f7a3d; --fc-ok-wash:rgba(15,122,61,.10);
  --fc-warn:#8a5a00; --fc-warn-wash:rgba(138,90,0,.10);
  --fc-err:#b3261e; --fc-err-wash:rgba(179,38,30,.10);
  --fc-ok-on:#ffffff; --fc-warn-on:#ffffff; --fc-err-on:#ffffff;
  --fc-img-edge:rgba(0,0,0,.10);
  --fc-sh-1:0 1px 3px rgba(0,0,0,.08);
  --fc-sh-2:0 1px 2px rgba(0,0,0,.06), 0 0 0 .5px rgba(0,0,0,.06);
  --fc-sh-soft:0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --fc-sh-pop:0 20px 70px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --fc-sh-float:0 30px 70px -24px rgba(0,0,0,.28), 0 8px 24px -12px rgba(0,0,0,.10);
  --fc-glass:rgba(255,255,255,.72);
  color-scheme:light;
}

/* An island paints its own ground, or it borrows the page's. */
[data-theme]{background-color:var(--fc-canvas);color:var(--fc-fg)}

/* A photo stage is a fixed dark room in either theme, so anything drawn
   inside one asks for these instead of the page tokens. */
.on-photo{
  --fc-canvas:var(--fc-photo); --fc-bg:#151515; --fc-bg2:#1f1f1f; --fc-bg3:#2b2b2b;
  --fc-fg:var(--fc-photo-fg); --fc-fg2:var(--fc-photo-fg2); --fc-fg3:rgba(242,242,242,.55);
  --fc-border:rgba(255,255,255,.14); --fc-border2:rgba(255,255,255,.42);
  --fc-line:var(--fc-border); --fc-ring:#f2f2f2;
  --fc-ac:#3d51ff; --fc-ac-ink:var(--fc-photo-ac); --fc-ac-on:#ffffff;
  --fc-ac-wash:rgba(61,81,255,.20); --fc-ac-line:rgba(124,140,255,.45);
  --fc-rj:#d92800; --fc-rj-ink:#ff9a80; --fc-rj-on:#ffffff;
  --fc-rj-wash:rgba(217,40,0,.22); --fc-rj-line:rgba(255,154,128,.50);
  --fc-img-edge:rgba(255,255,255,.10);
  --fc-glass:rgba(10,10,10,.80);
  color-scheme:dark;
}