/* ==========================================================================
   FOLIO · CARD SYSTEM  (v2)
   --------------------------------------------------------------------------
   Supersedes the hue-coded surfaces in folio.css. Three laws:

   L1 · VARIATION IS TONAL, NOT CHROMATIC
        A card never announces its category by hue. It varies by ground,
        edge device, radius, texture and scale.

   L2 · EVERY TINT IS AN EXISTING ACCENT WASHED TO 9% OVER PAPER
        No ground is invented. This keeps every tint above 14:1 for ink and
        stops the set drifting into arbitrary pastels.

   L3 · ACCENT DEVICES ALIGN TO THE TEXT COLUMN, NOT THE CONTAINER EDGE
        A bar bleeding down a card's edge reads as bolted-on chrome. Rules
        that measure the words read as typography.

   Load order: folio.css -> folio-cards.css -> folio-chrome.css
   ========================================================================== */

:root {
    /* ---- THE CHAMPAGNE LADDER ----------------------------------------
       The base canvas is LIGHT. Depth comes from sections stepping down
       into it, not from the whole page sitting at the darker tone.

         paper   98.6   the working surface, brightest
         quiet   96.7
         canvas  94.1   the page itself
         inset   90.6   recessed wells
         vellum  84.7   the band — 9.4 points below canvas, so it still
                        reads clearly after its edges fade out
       All five hold hue 41-44: one family, five weights.            */
    --f-paper: #fffdf8;
    --f-quiet: #fcf9f1;
    --f-canvas: #f9f4e7;
    --f-inset: #f2ebdc;
    --f-vellum: #ebe0c5;

    /* The band tone. 3.3 points under the canvas — enough to register a
       section change, not enough to look like a highlighted rectangle. */
    --f-band: #f2ecdd;

    /* ---- WARM ARC · hue 9deg to 60deg ---- */
    --f-clay: #a8674d;          /* 17  movement, money in motion, exceptions */
    --f-olive: #6b6b3f;         /* 60  bridge into the cool arc */

    /* ---- COOL ARC · hue 137deg to 180deg ---- */
    --f-sage: #4a7c59;          /* 138 evidence, observed and reconciled */
    --f-teal: #3d5c5c;          /* 180 borders and accent marks ONLY, never a ground */

    /* ---- NEUTRAL · hue 36deg, inside the canvas family ---- */
    --f-grey: #9a9081;          /* external, benchmark, dormant, archived */

    /* ---- dark grounds, in weight order ----
       espresso  warm  · financial weight: totals, net position
       forest    cool  · status weight: coverage, health, conclusions
       emerald   floor · one consequential decision, once per page          */
    --f-espresso: #33291d;      /* the champagne family at 16% lightness */
    --f-forest: #2f3a34;

    /* ---- tint grounds ---- */
    --f-t-sage: #eff1ea;
    --f-t-clay: #f7f0e9;
    --f-t-gold: #f7f1e2;
    --f-t-grey: #f4f1eb;

    /* ---- ink on dark grounds ---- */
    --f-on-dark: #f0e8d8;
    --f-on-dark-dim: rgba(240, 232, 216, 0.62);

    /* DEPRECATED: --f-slate sits at hue 206deg, outside both arcs, and reads
       as a foreign product on warm paper. Use --f-grey for external data and
       --f-teal where a cool accent mark is genuinely wanted. */
}

/* ==========================================================================
   GROUNDS
   ========================================================================== */

/* The production shell used by advisorFolioCard(). Catalogs and routes share
   this exact anatomy; card shape is no longer local demo CSS. */
.folio .folio-card {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-lg, 13px);
    background: var(--f-paper);
    box-shadow: var(--f-shadow);
}

/* Owner identity is a tinted card surface plus an initialled chip. There is no
   edge stripe: a 4px bar cannot say who owns the work, and reserving it for the
   missing-owner case put a red hatch on every card until the roster backfilled.
   Timing and priority stay labelled chips so the colour systems never compete. */
.folio .folio-work-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 14px 16px; border: 1px solid var(--f-line); border-radius: 10px; background: var(--f-paper); box-shadow: 0 2px 8px rgba(51, 41, 29, .045); }
.folio .folio-owner-surface--0 { --folio-owner-color: #236f5d; }
.folio .folio-owner-surface--1 { --folio-owner-color: #a67708; }
.folio .folio-owner-surface--2 { --folio-owner-color: #a8674d; }
.folio .folio-owner-surface--3 { --folio-owner-color: #4a7c59; }
.folio .folio-owner-surface--4 { --folio-owner-color: #684f7d; }
.folio .folio-owner-surface--5 { --folio-owner-color: #3d5c5c; }
.folio .folio-owner-surface--6 { --folio-owner-color: #8a5b32; }
.folio .folio-owner-surface--7 { --folio-owner-color: #626b3f; }

/* The chip is the identity: initials in the owner's colour, name when there is
   room for it. Unassigned is a quiet amber gap to fill, not a red alarm. */
.folio .folio-owner-chip { display: inline-flex; min-width: 0; align-items: center; gap: 7px; }
.folio .folio-owner-chip__mark { display: inline-grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 50%; background: var(--folio-owner-color, var(--f-grey)); color: #fff; font: 700 9.5px/1 var(--f-font-mono); letter-spacing: .02em; }
.folio .folio-owner-chip__name { min-width: 0; overflow: hidden; color: var(--f-ink); font: 550 12.5px/1.3 var(--f-font-ui); text-overflow: ellipsis; white-space: nowrap; }
.folio .folio-owner-chip__meta { display: block; color: var(--f-muted); font: 500 10.5px/1.2 var(--f-font-ui); letter-spacing: .01em; }
.folio .folio-owner-chip--unassigned .folio-owner-chip__mark { border: 1px dashed var(--f-gold); background: var(--f-gold-soft); color: var(--f-bronze); }
.folio .folio-owner-chip--unassigned .folio-owner-chip__name { color: var(--f-bronze); font-style: italic; }
.folio .folio-owner-chip--avatar { flex: none; }
.folio .folio-owner-chip--avatar .folio-owner-chip__mark { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--f-paper); }
.folio .folio-work-item--needs-owner { border-style: dashed; border-color: var(--f-line-strong); }

.folio .folio-work-item__open { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; white-space: normal; cursor: pointer; }
.folio .folio-work-item--list .folio-work-item__main { display: grid; grid-template-columns: minmax(200px, 0.85fr) minmax(430px, 1.15fr); column-gap: 22px; align-items: center; }
.folio .folio-work-item--list .folio-work-item__title-row,
.folio .folio-work-item--list .folio-work-item__context,
.folio .folio-work-item--list .folio-work-item__waiting { grid-column: 1; }
.folio .folio-work-item--list .folio-work-item__meta { grid-column: 2; grid-row: 1 / span 3; }
.folio .folio-work-item__title-row { display: flex; align-items: center; gap: 12px; }
.folio .folio-work-item__title { min-width: 0; overflow-wrap: anywhere; color: var(--f-ink); font: 620 14px/1.35 var(--f-font-ui); text-align: left; }
.folio .folio-work-item__open:hover .folio-work-item__title { color: var(--f-accent); text-decoration: underline; text-underline-offset: 3px; }
.folio .folio-work-item__open:focus-visible { border-radius: 4px; outline: 2px solid var(--f-accent); outline-offset: 4px; }
.folio .folio-work-item__context { display: block; margin: 5px 0 0; color: var(--f-dim); font: 500 10px/1.4 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* Waiting work is triaged by who is blocking it, so the blocker is a labelled
   band on the card in both layouts rather than a line of small grey text. */
.folio .folio-work-item__waiting { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; padding: 7px 9px; border-radius: 6px; background: var(--f-gold-soft); }
.folio .folio-work-item__waiting-label { flex: none; color: var(--f-bronze-deep); font: 650 8.5px/1.3 var(--f-font-mono); letter-spacing: .11em; text-transform: uppercase; }
.folio .folio-work-item__waiting-value { min-width: 0; overflow: hidden; color: var(--f-ink); font: 550 12.5px/1.35 var(--f-font-ui); text-overflow: ellipsis; white-space: nowrap; }
.folio .folio-work-item__waiting--missing .folio-work-item__waiting-value { color: var(--f-red); font-style: italic; }

/* Timing carries the longest string in the row ("Overdue - Aug 24, 2026"), so
   it gets the wider column instead of being clipped to an equal third. */
.folio .folio-work-item__meta { display: grid; grid-template-columns: 72px minmax(96px, 1fr) minmax(96px, 1fr) minmax(140px, 1.15fr); gap: 8px 14px; color: var(--f-dim); font-size: 12px; }
.folio .folio-work-item__datum { display: grid; gap: 4px; min-width: 0; align-content: start; }
.folio .folio-work-item__datum > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio .folio-work-item__datum-label { color: var(--f-dim); font: 600 9px/1.2 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-work-item__datum--exception .folio-owner-chip__name { color: var(--f-bronze); font-weight: 650; }
.folio .folio-work-item__controls { display: flex; align-items: center; gap: 7px; }

/* Board cards carry title, owner, blocker and one timing line. Context and
   category live in the detail sheet; a lane already states the status. */
.folio .folio-work-item--board { grid-template-columns: minmax(0, 1fr); min-height: 104px; gap: 0; padding: 14px; cursor: grab; user-select: none; }
.folio .folio-work-item--board > * { pointer-events: none; }
.folio .folio-work-item--board:active { cursor: grabbing; }
.folio .folio-work-item--board.is-dragging { opacity: .5; box-shadow: none; }
.folio .folio-work-item--board:hover .folio-work-item__title { color: var(--f-accent); }
.folio .folio-work-item--board:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
.folio .folio-work-item--board .folio-work-item__main { display: grid; align-content: space-between; gap: 12px; }
.folio .folio-work-item--board .folio-work-item__board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.folio .folio-work-item--board .folio-work-item__title { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.folio .folio-work-item--board .folio-work-item__context { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio .folio-work-item--board .folio-work-item__waiting { margin: 0; }
.folio .folio-work-item__board-footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.folio .folio-work-item__board-timing { flex: 1; min-width: 0; font-size: 10.5px; }
.folio .folio-work-item--board .folio-priority { padding: 3px 6px; }

/* Priority is only stated when it is elevated, so the pill has to read as a
   deliberate mark: centred text and one width for every level. */
.folio .folio-priority { display: inline-flex; flex: none; min-width: 56px; align-items: center; justify-content: center; padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; font: 650 9px/1 var(--f-font-mono); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.folio .folio-priority--urgent { color: var(--f-red); background: var(--f-red-soft); }
.folio .folio-priority--high { color: #795400; background: var(--f-t-gold); }
.folio .folio-priority--normal { color: var(--f-dim); background: var(--f-t-grey); }
.folio .folio-priority--low { color: var(--f-sage); background: var(--f-t-sage); }
.folio .folio-timing-label > :last-child { width: fit-content; max-width: 100%; padding: 3px 6px; border-radius: 4px; }
.folio .folio-timing--overdue .folio-timing-label > :last-child { background: var(--f-red-soft); color: var(--f-red); font-weight: 700; }
.folio .folio-timing--today .folio-timing-label > :last-child { background: var(--f-t-gold); color: #795400; font-weight: 700; }
.folio .folio-timing--upcoming .folio-timing-label > :last-child { background: var(--f-t-gold); color: #795400; font-weight: 650; }
.folio .folio-task-detail { display: grid; gap: 18px; }
.folio .folio-task-detail__signals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.folio .folio-task-detail__status,
.folio .folio-task-detail__timing { display: inline-flex; padding: 5px 8px; border-radius: 5px; background: var(--f-inset); color: var(--f-dim); font: 650 10px/1 var(--f-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.folio .folio-task-detail__timing.folio-timing--overdue { background: var(--f-red-soft); color: var(--f-red); }
.folio .folio-task-detail__timing.folio-timing--today,
.folio .folio-task-detail__timing.folio-timing--upcoming { background: var(--f-t-gold); color: #795400; }
.folio .folio-task-detail__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; border-top: 1px solid var(--f-line); border-left: 1px solid var(--f-line); }
.folio .folio-task-detail__fact { min-width: 0; padding: 12px; border-right: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); }
.folio .folio-task-detail__fact dt,
.folio .folio-task-detail__label { margin: 0 0 5px; color: var(--f-dim); font: 600 9px/1.2 var(--f-font-mono); letter-spacing: .11em; text-transform: uppercase; }
.folio .folio-task-detail__fact dd { margin: 0; overflow-wrap: anywhere; color: var(--f-ink); font-size: 13px; }
.folio .folio-task-detail__fact--exception dd { color: var(--f-red); font-weight: 700; }
.folio .folio-task-detail__callout { padding: 13px 14px; border-left: 3px solid var(--f-gold); background: var(--f-t-gold); }
.folio .folio-task-detail__callout p { margin: 0; color: var(--f-ink); font-size: 14px; }
.folio .folio-task-detail__callout > span:last-child:not(.folio-task-detail__label) { display: block; margin-top: 6px; color: var(--f-dim); font-size: 12px; }
.folio .folio-task-detail__notes { padding-top: 14px; border-top: 1px solid var(--f-line); }
.folio .folio-task-detail__notes h3 { margin: 0 0 7px; font: 620 13px/1.3 var(--f-font-ui); }
.folio .folio-task-detail__notes p { margin: 0; color: var(--f-dim); line-height: 1.55; white-space: pre-wrap; }
.folio .folio-badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; font: 600 9px/1 var(--f-font-mono); text-transform: uppercase; }
.folio .folio-badge--outside { border: 1px solid var(--f-grey); color: var(--f-dim); background: var(--f-t-grey); }

@media (max-width: 680px) {
    .folio .folio-work-item { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-work-item--list .folio-work-item__main { display: block; }
    .folio .folio-work-item__meta { grid-template-columns: 1fr 1fr; margin-top: 11px; }
    .folio .folio-work-item__datum:last-child { grid-column: 1 / -1; }
    .folio .folio-work-item__controls { justify-content: stretch; }
    .folio .folio-menu-select--status { flex: 1; }
    .folio .folio-menu-select--status .folio-menu-select__trigger { width: 100%; }
    .folio .folio-task-detail__facts { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 681px) and (max-width: 980px) {
    .folio .folio-work-item--list .folio-work-item__main { display: block; }
    .folio .folio-work-item--list .folio-work-item__meta { margin-top: 11px; }
}

.folio .folio-card--cut {
    position: relative;
    border: 0;
    border-radius: 0;
    outline: 1px solid var(--f-line-strong);
    outline-offset: -1px;
    box-shadow: none;
    background-image: linear-gradient(225deg,
        transparent 0 12.7px,
        var(--f-accent-c, var(--f-bronze)) 12.7px 14.1px,
        transparent 14.1px);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.folio .g-paper  { background: var(--f-paper); }
.folio .g-quiet  { background: #faf6ec; }
.folio .g-inset  { background: var(--f-inset); border-color: rgba(78, 66, 43, 0.10); box-shadow: none; }
.folio .g-vellum { background: var(--f-vellum); border-color: rgba(78, 66, 43, 0.14); box-shadow: none; }

.folio .g-sage { background: var(--f-t-sage); border-color: rgba(74, 124, 89, 0.20); }
.folio .g-clay { background: var(--f-t-clay); border-color: rgba(168, 103, 77, 0.20); }
.folio .g-gold { background: var(--f-t-gold); border-color: rgba(166, 119, 8, 0.20); }
.folio .g-grey { background: var(--f-t-grey); border-color: rgba(154, 144, 129, 0.30); }

/* teal survives as an accent border on the neutral ground, so the hue stays
   in the system without ever becoming a card fill */
.folio .g-grey.b-teal { border-color: rgba(61, 92, 92, 0.34); }

.folio .g-espresso { background: var(--f-espresso); border-color: transparent; color: var(--f-on-dark); }
.folio .g-forest   { background: var(--f-forest);   border-color: transparent; color: var(--f-on-dark); }
.folio .g-emerald  { background: var(--f-emerald);  border-color: transparent; color: #e6ece8; }

.folio :is(.g-espresso, .g-forest, .g-emerald) :is(p, .section-lede) { color: var(--f-on-dark-dim); }
.folio :is(.g-espresso, .g-emerald) :is(.eyebrow, .lab, .figure-label) { color: var(--f-gold-bright); }
.folio .g-forest :is(.eyebrow, .lab, .figure-label) { color: #8fc4a4; }
.folio :is(.g-espresso, .g-forest, .g-emerald) .delta-up { color: #7fc294; }

/* DEPRECATED hue-coded surface, remapped to the neutral ground so existing
   markup keeps working while it is migrated off. */
.folio .surface-blue {
    border-color: rgba(61, 92, 92, 0.34);
    background-color: var(--f-t-grey);
    background-image: none;
}

/* ==========================================================================
   ACCENT DEVICES
   --------------------------------------------------------------------------
   GOVERNANCE — this is what keeps eight devices from becoming clutter:

     The device is chosen by the card's JOB, never by taste. One primary
     device per card. D8 is the only device that may accompany another,
     because it sits behind the content rather than beside it. At most two
     distinct devices visible per section.

       D1  accountant's rule     SUMMARIZE   a figure that concludes; totals
       D2  accent eyebrow        EVIDENCE    source and provenance labelling
       D3  corner cut            INVESTIGATE analytical, technical surfaces
       D4  ruled cap             ORIENT      the card that opens a section
       D5  marginal tick         EXCEPTION   one flagged row within a set
       D6  underscored heading   DECIDE      the named thing being decided
       D7  column rule           COMPARE     values measured against each other
       D8  watermark numeral     SEQUENCE    chapter or position in an order

   Set the device colour with an .accent-* class, which resolves --f-accent-c.
   ========================================================================== */

.folio .accent-sage    { --f-accent-c: var(--f-sage); }
.folio .accent-clay    { --f-accent-c: var(--f-clay); }
.folio .accent-gold    { --f-accent-c: var(--f-gold); }
.folio .accent-bronze  { --f-accent-c: var(--f-bronze); }
.folio .accent-emerald { --f-accent-c: var(--f-accent); }
.folio .accent-teal    { --f-accent-c: var(--f-teal); }
.folio .accent-red     { --f-accent-c: var(--f-red); }
.folio .accent-grey    { --f-accent-c: var(--f-grey); }

/* D1 · accountant's rule — the classic double total rule beneath a figure */
.folio .d-total :is(.figure, .fig) { padding-bottom: 6px; }
.folio .d-total .total-rule {
    display: block;
    height: 0;
    margin-top: -2px;
    padding-top: 2.5px;
    border-top: 1.5px solid var(--f-accent-c);
    border-bottom: 1px solid var(--f-accent-c);
}

/* D2 · accent eyebrow — pure type, the cheapest device in the set */
.folio .d-eyebrow :is(.eyebrow, .lab) { color: var(--f-accent-c); }
.folio .d-eyebrow :is(.eyebrow, .lab)::before {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--f-accent-c);
    content: "";
    vertical-align: 1px;
}

/* D3 · corner cut — geometry, with a hairline following the cut.
   The gradient stops sit at 20 / sqrt(2) so the line lands on the bevel. */
.folio .d-cut {
    border: 0;
    outline: 1px solid var(--f-line);
    outline-offset: -1px;
    box-shadow: none;
    background-image: linear-gradient(225deg,
        transparent 0 12.7px, var(--f-accent-c) 12.7px 14.1px, transparent 14.1px);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

/* D4 · ruled cap — a short rule above the eyebrow, stopping where words stop */
.folio .d-cap { padding-top: 15px; }
.folio .d-cap > .cap {
    display: block;
    width: 38px;
    height: 2px;
    margin: 0 0 11px;
    border-radius: 1px;
    background: var(--f-accent-c);
}

/* D5 · marginal tick — a proofreader's mark in the gutter, outside the card.
   The parent must carry .gutter to reserve the margin. */
.folio .gutter { position: relative; padding-left: 22px; }
.folio .d-tick::before,
.folio .d-tick::after { position: absolute; background: var(--f-accent-c); content: ""; }
.folio .d-tick::before { top: 23px; left: -22px; width: 12px; height: 1.5px; }
.folio .d-tick::after  { top: 19px; left: -22px; width: 1.5px; height: 10px; }

/* D6 · underscored heading — a rule exactly as wide as the words */
.folio .d-underline :is(h3, .card-title) {
    display: inline;
    padding-bottom: 3px;
    background-image: linear-gradient(var(--f-accent-c), var(--f-accent-c));
    background-repeat: no-repeat;
    background-position: 0 1.15em;
    background-size: 100% 1.5px;
}

/* D7 · column rule — a vertical hairline between label and value */
.folio .d-col .kv {
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr);
    gap: 0 13px;
    align-items: baseline;
}
.folio .d-col .kv > .col-rule {
    align-self: stretch;
    background: var(--f-accent-c);
    opacity: 0.45;
}

/* D8 · watermark numeral — a folio number behind the content */
.folio .d-folio { overflow: hidden; }
.folio .d-folio > .folio-num {
    position: absolute;
    right: 11px;
    bottom: -9px;
    z-index: 0;
    color: var(--f-accent-c);
    font: 400 62px/1 var(--f-font-display);
    opacity: 0.13;
    pointer-events: none;
}
.folio .d-folio > :not(.folio-num) { position: relative; z-index: 1; }

/* ==========================================================================
   GLASS · the only place a gradient is permitted
   --------------------------------------------------------------------------
   The gradient does physical work here: light falling across a pane. What
   sells it is the inner top highlight and a border brighter than the fill,
   not opacity. backdrop-filter is GPU-expensive and only reads when there is
   something behind it, so glass belongs on hero bands and overlays — never
   on a page of cards.
   ========================================================================== */

.folio .glass {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 11px;
    background-image: linear-gradient(148deg,
        rgba(255, 253, 248, 0.78), rgba(255, 253, 248, 0.34) 48%, rgba(243, 235, 217, 0.46));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 30px rgba(66, 49, 20, 0.10);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
}

.folio .glass-deep {
    border-color: rgba(255, 255, 255, 0.20);
    background-image: linear-gradient(148deg,
        rgba(24, 38, 32, 0.60), rgba(16, 28, 23, 0.38) 52%, rgba(24, 38, 32, 0.52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 12px 34px rgba(20, 28, 22, 0.30);
    color: var(--f-on-dark);
}
.folio .glass-deep :is(.eyebrow, .lab) { color: var(--f-gold-bright); }
.folio .glass-deep p { color: var(--f-on-dark-dim); }

/* no backdrop-filter support: fall back to an opaque card, never a milky one */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .folio .glass { background-image: none; background-color: var(--f-paper); }
    .folio .glass-deep { background-image: none; background-color: var(--f-forest); }
}

/* ==========================================================================
   TEXTURE · tonal only, never chromatic
   'ruled' was removed: horizontal rules behind body copy moired against the
   line-height and made every card look misprinted.
   ========================================================================== */

.folio .x-grid {
    background-image:
        linear-gradient(rgba(78, 66, 43, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78, 66, 43, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* paper grain via offset dot pairs — far cheaper to raster than an SVG filter,
   which stalled compositing on long pages */
.folio .x-stipple {
    background-image:
        radial-gradient(rgba(78, 66, 43, 0.11) 0.5px, transparent 0.5px),
        radial-gradient(rgba(78, 66, 43, 0.08) 0.5px, transparent 0.5px);
    background-position: 0 0, 2.5px 2.5px;
    background-size: 5px 5px, 5px 5px;
}

/* reserved for in-flight and provisional values */
.folio .x-hatch {
    background-image: repeating-linear-gradient(-45deg,
        transparent 0 6px, rgba(78, 66, 43, 0.045) 6px 7px);
}

/* ==========================================================================
   PRESSED STATES
   The system carried exactly one :active rule. Every control now answers.
   ========================================================================== */

.folio :is(.btn, .segmented button, .tabs button, .tab, .folio-tab,
           .pages-btn, .popover-item, .master-item):active:not(:disabled) {
    transform: translateY(0.5px);
}
.folio .btn:active:not(:disabled) { filter: brightness(0.94); }
.folio :is(.segmented button, .tab, .folio-tab):active:not(:disabled) { opacity: 0.82; }
.folio :is(.check, .checkbox, .switch):active:not(:disabled) { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
    .folio :is(.btn, .segmented button, .tabs button, .tab, .folio-tab,
               .check, .checkbox, .switch):active { transform: none; }
}

/* ==========================================================================
   WIDE DESKTOP
   The system stopped at 1160px, which left 27-inch monitors stretching dense
   ledgers across the full viewport.
   ========================================================================== */

@media (min-width: 1440px) {
    :root { --f-page: 1360px; --f-gutter: 48px; }
}

@media (min-width: 1800px) {
    :root { --f-page: 1520px; }
}

/* ==========================================================================
   STATUS PILL  — the stage control reads as its own state, not as a form box
   --------------------------------------------------------------------------
   A bordered 40px select next to a card said "form field" when the thing it
   actually communicates is which stage the work is in. The native select is
   kept and made transparent so the platform still owns the popup, the keyboard
   and the touch target; only the skin changes.
   ========================================================================== */

/* The stage control is the shared menu listbox skinned as a pill; its colours
   live with the menu in folio-layout.css so one definition serves the card, the
   detail panel and the board lane header. */

.folio .folio-button--danger { border-color: var(--f-red); background: transparent; color: var(--f-red); }
.folio .folio-button--danger:hover { background: var(--f-red-soft); }
.folio .folio-task-detail__delete { margin-right: auto; }

/* ==========================================================================
   PRIORITY ACCENT  — crop marks, and only where the pill has no room
   --------------------------------------------------------------------------
   A coloured bar down the left edge is the reflex, and it reads as bolted-on
   chrome; the owner chip already carries identity. Elevated priority
   instead draws two sharp rules inside the card's diagonal corners -- crop
   marks, sitting clear of the corner radius rather than fighting it.

   List view does not get them. It has room for a labelled priority column, and
   a card that already states HIGH in a pill does not need to state it twice.
   ========================================================================== */

.folio .folio-work-item--board.folio-work-item--priority-high { --folio-priority-accent: var(--f-gold); }
.folio .folio-work-item--board.folio-work-item--priority-urgent { --folio-priority-accent: var(--f-red); }
.folio .folio-work-item--board.folio-work-item--priority-urgent::before,
.folio .folio-work-item--board.folio-work-item--priority-urgent::after,
.folio .folio-work-item--board.folio-work-item--priority-high::before,
.folio .folio-work-item--board.folio-work-item--priority-high::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    pointer-events: none;
}
.folio .folio-work-item--board.folio-work-item--priority-urgent::before,
.folio .folio-work-item--board.folio-work-item--priority-high::before {
    top: 6px;
    left: 6px;
    border-top: 2px solid var(--folio-priority-accent);
    border-left: 2px solid var(--folio-priority-accent);
}
.folio .folio-work-item--board.folio-work-item--priority-urgent::after,
.folio .folio-work-item--board.folio-work-item--priority-high::after {
    right: 6px;
    bottom: 6px;
    border-right: 2px solid var(--folio-priority-accent);
    border-bottom: 2px solid var(--folio-priority-accent);
}

/* Nothing in a list row hides behind an ellipsis. A column truncated to
   "Dale Whi..." or "Overdue - Aug 24, 20..." has lost the one thing it existed
   to say, so values wrap to a second line instead. Rows are already variable
   height -- a waiting row carries a blocker band -- so a wrap costs nothing. */
.folio .folio-work-item--list .folio-work-item__datum > :last-child,
.folio .folio-work-item--list .folio-work-item__datum .folio-owner-chip__name {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}
.folio .folio-work-item--list .folio-work-item__datum { align-items: start; }

/* The priority pill is a column of its own in list view, with the same label
   the other columns carry, and the chip centred inside it. */
.folio .folio-work-item__datum--priority { justify-items: center; text-align: center; }
/* The default priority is marked, not stated. An empty cell under a label reads
   as missing data; a dash reads as "nothing worth saying here". */
.folio .folio-priority-none { color: var(--f-faint); font: 500 13px/1 var(--f-font-ui); }
.folio .folio-work-item__datum--priority .folio-work-item__datum-label { text-align: center; }