/* [hidden] MUST beat a component's display.
   Every dl- component sets display:flex or grid, and a class selector outranks
   the UA sheet's `[hidden]{display:none}`. Without this line, hiding a component
   with the hidden attribute does NOTHING — it stays on screen. Hit twice in one
   file on 2026-07-31: an empty .dl-alert painted a bare bar, and all four
   .dl-auth-card screens of forgot-password rendered at once while every gate
   reported green. A page-level workaround was written for the first and not the
   second, which is exactly why this is a rule and not a patch. */
[hidden]{display:none !important}

/**
 * dialed-ui.css — the "body": components, built ENTIRELY on foundation tokens.
 * ============================================================================
 * Spacing, type, radius, sizing, elevation and motion come from foundation.css;
 * colour comes from skins.css. The rule is: if a token exists for it, use the
 * token — that is the enforcement, spec = code.
 *
 * HONEST STATE (measured, 2026-07-25): the framework sections above hold to that
 * strictly. The component sections below — lifted verbatim from the 15 graded
 * design-book mocks so the extraction could be proven pixel-identical — still
 * carry 11 raw hex values (mostly #fff on a coloured fill) and a number of raw
 * px for one-off dimensions the scale does not cover (a 34px avatar, a 9px status
 * dot, icon sizes). Tokenising those is real follow-up work; it is NOT done, and
 * this header will not claim otherwise.
 *
 * DEPENDS ON: foundation.css (scales) + skins.css (color), loaded first.
 * NAMESPACE: dl-. Legacy pages own .card/.rail; rebuilt markup opts in via dl-.
 *   Framework: .dl-<thing>.  Modal chassis: .dl-dlg-*.  Per-component sections
 *   below use a two-letter component key (.dl-rv-* review, .dl-po-* purchase
 *   order, .dl-sd-* sample detail, .dl-sr-* sample request, .dl-ac-* add contact,
 *   .dl-cp-* compose, .dl-pc-* pearl chat, .dl-ca-* chat actions, .dl-cd-* cards,
 *   .dl-nv-* nav, .dl-dp-* date picker, .dl-ts-* toast) because the same short
 *   name meant three different things across three mocks (`.sec` was a label, a
 *   flex column, and a padded panel).
 * ============================================================================ */

/* ─────────────────────────── APP FRAME ─────────────────────────────────── */
.dl-canvas{
  /* pointer-events:none is load-bearing twice over: a BACKGROUND layer must
     never swallow clicks, and LAW 49's edge detector exempts decoration only
     when it is non-interactive AND textless. Content is never inside this
     layer (it is fixed + overflow:hidden — nothing nested here can scroll). */
  position:fixed;inset:-4%;z-index:0;overflow:hidden;will-change:transform;pointer-events:none;
  /* Vibrant mesh — the glass needs real colour behind it to read as glass.
     Uses the skin's saturated tint inks + accent at strong opacity. */
  background:
    radial-gradient(80% 64% at 8% -4%   in oklab, color-mix(in oklab,var(--t1-ink),transparent 38%) 0%, transparent 58%),
    radial-gradient(72% 60% at 94% 2%    in oklab, color-mix(in oklab,var(--t2-ink),transparent 46%) 0%, transparent 56%),
    radial-gradient(90% 74% at 88% 104%  in oklab, color-mix(in oklab,var(--t3-ink),transparent 40%) 0%, transparent 60%),
    radial-gradient(76% 64% at 14% 106%  in oklab, color-mix(in oklab,var(--accent),transparent 44%) 0%, transparent 56%),
    radial-gradient(120% 100% at 50% 40% in oklab, transparent 40%, color-mix(in oklab,var(--deep),transparent 88%) 100%),
    var(--canvas);
  animation:dlMesh 44s ease-in-out infinite alternate;
}
@keyframes dlMesh{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-2%,1.5%,0)}}
/* PHONE MESH (Elle 2026-08-29, "the right side of every container open/cut
   off"): the desktop vignette stop paints deep at every edge — on a 390px
   canvas that lands in the content gutter as a dirty vertical band, and
   bleeds through translucent cards where iOS drops blur. On phones the
   orbs breathe past the edges and the vignette stands down. */
@media (max-width:640px){
  .dl-canvas{background:
    radial-gradient(90% 60% at -6% -8%   in oklab, color-mix(in oklab,var(--t1-ink),transparent 46%) 0%, transparent 58%),
    radial-gradient(80% 56% at 108% -6%  in oklab, color-mix(in oklab,var(--t2-ink),transparent 54%) 0%, transparent 56%),
    radial-gradient(96% 70% at 106% 110% in oklab, color-mix(in oklab,var(--t3-ink),transparent 50%) 0%, transparent 60%),
    radial-gradient(84% 60% at -8% 112%  in oklab, color-mix(in oklab,var(--accent),transparent 52%) 0%, transparent 56%),
    var(--canvas)}
}
.dl-canvas::after{
  content:'';position:absolute;inset:0;opacity:.08;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
:root[data-tone="dark"] .dl-canvas::after{mix-blend-mode:normal;opacity:.06}
.dl-shell{position:relative;z-index:1;min-height:100vh;padding:var(--sp-5) var(--sp-8) var(--sp-16) calc(var(--dl-rail-w) + var(--sp-12));transition:padding-left var(--t-slow) var(--ease)}

/* ─────────────────────────── FLOATING RAIL ─────────────────────────────── */
.dl-rail{
  position:fixed;left:var(--sp-5);top:50%;transform:translateY(-50%);z-index:60;
  width:var(--dl-rail-w);max-height:calc(100vh - var(--sp-8));
  padding:var(--sp-2);display:flex;flex-direction:column;gap:1px;border-radius:var(--r-3xl);
  background:linear-gradient(168deg,
    color-mix(in oklab,var(--deep),transparent 34%) 0%,
    color-mix(in oklab,var(--deep),transparent 16%) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--el-2);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  transition:width var(--t-slow) var(--ease),border-radius var(--t-slow) var(--ease);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  --r-ink:var(--rail-ink);--r-ink-2:var(--rail-ink-2);--r-ink-3:var(--rail-ink-3);--r-line:var(--rail-line);
}
:root[data-tone="dark"] .dl-rail{
  background:linear-gradient(168deg,
    color-mix(in oklab,var(--deep),transparent 30%) 0%,
    color-mix(in oklab,var(--deep),transparent 8%) 100%);
  border-color:rgba(255,255,255,.10);
}
/* Rail modes + shell adoption (grown 2026-08-01, the admin shell swap).
   The 3-state mode pill maps onto the book rail: hover = the rail's native
   behaviour; pinned = held open; closed = never opens. JS sets ONE data attr. */
.dl-rail[data-mode="open"]{width:var(--dl-rail-open);border-radius:var(--r-2xl)}
body:has(.dl-rail[data-mode="open"]) .dl-shell{padding-left:calc(var(--dl-rail-open) + var(--sp-12))}
.dl-rail[data-mode="closed"]:hover .dl-item .dl-lbl{max-width:0;opacity:0}
.dl-rail[data-mode="closed"]:hover{width:var(--dl-rail-w);border-radius:var(--r-2xl)}
body:has(.dl-rail[data-mode="closed"]:hover) .dl-shell{padding-left:calc(var(--dl-rail-w) + var(--sp-12))}
.dl-rail[data-mode="closed"]:hover .dl-xp{max-width:0;opacity:0}
.dl-rail-modes{flex-direction:row;gap:2px;margin:0 auto}
.dl-rail-group[data-collapsed="true"] > .dl-item{display:none}
.dl-rail .drag-handle{cursor:grab;opacity:.4;margin-right:4px}
.dl-rail::-webkit-scrollbar{display:none}
.dl-rail > *{flex:0 0 auto}
.dl-rail::before{content:'';position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.dl-rail:is(:hover,[data-mode="open"]){width:var(--dl-rail-open);border-radius:var(--r-2xl)}
body:has(.dl-rail:is(:hover,[data-mode="open"])) .dl-shell{padding-left:calc(var(--dl-rail-open) + var(--sp-12))}
.dl-xp{max-width:0;overflow:hidden;opacity:0;transition:max-width var(--t-slow) var(--ease),opacity var(--t-base) var(--ease)}
.dl-rail:is(:hover,[data-mode="open"]) .dl-xp{max-width:180px;opacity:1}

.dl-rail-brand{display:flex;align-items:center;justify-content:center;gap:0;padding:var(--sp-1) var(--sp-1) var(--sp-2);border-bottom:1px solid var(--r-line)}
.dl-rail:is(:hover,[data-mode="open"]) .dl-rail-brand{justify-content:flex-start;gap:var(--sp-3);padding-left:var(--sp-2)}
.dl-mark{width:var(--h-sm);height:var(--h-sm);flex:0 0 auto;   /* NOT 0 0 var(--h-sm): in a flex COLUMN the basis controls
     HEIGHT, so a hard-coded basis silently overrode every size override. The
     book's own _mock-page-auth sets width/height to --sp-12 and rendered 48x32,
     as did all three auth pages rebuilt 2026-07-31. Elle spotted the squashed
     d before any gate did — nothing measures aspect ratio. Basis auto lets the
     set height win; width/height still default to --h-sm. */
  border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(145deg,var(--deep),var(--accent));color:#FDFCFA;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);
  box-shadow:0 4px 12px -5px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.25) inset}
.dl-wordmark{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-medium);letter-spacing:var(--tr-tight);white-space:nowrap;
  background:linear-gradient(90deg,var(--rail-ink) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dl-group-label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--r-ink-3);padding:var(--sp-1) var(--sp-3) var(--sp-1);white-space:nowrap;opacity:0;height:0;overflow:hidden;transition:.35s var(--ease)}
.dl-rail:is(:hover,[data-mode="open"]) .dl-group-label{opacity:1;height:18px}
.dl-rail-group{display:flex;flex-direction:column;gap:1px;padding:var(--sp-1) 0}
.dl-rail-group + .dl-rail-group{border-top:1px solid var(--r-line)}
/* collapsed → each item is a centered SQUARE (highlight hugs the icon);
   hover → item grows to a full-width pill, icon+label left-aligned */
.dl-item{position:relative;display:flex;align-items:center;justify-content:center;gap:0;
  width:var(--h-md);height:var(--h-md);margin:0 auto;padding:0;border-radius:var(--r-md);
  color:var(--r-ink-2);text-decoration:none;white-space:nowrap;transition:background var(--t-base),color var(--t-base)}
.dl-rail:is(:hover,[data-mode="open"]) .dl-item{width:auto;margin:0;padding:0 var(--sp-3);gap:var(--sp-3);justify-content:flex-start}
.dl-item svg{width:var(--ic-lg);height:var(--ic-lg);flex:0 0 var(--ic-lg);stroke:currentColor;fill:none;stroke-width:1.7}
.dl-item .dl-lbl{font-size:var(--fs-sm);font-weight:var(--fw-medium);max-width:0;overflow:hidden;opacity:0;transition:max-width var(--t-slow) var(--ease),opacity var(--t-base) var(--ease)}
.dl-rail:is(:hover,[data-mode="open"]) .dl-item .dl-lbl{max-width:170px;opacity:1}
.dl-item:hover{background:rgba(255,255,255,.10);color:var(--r-ink)}
.dl-item[aria-current="page"]{background:rgba(253,252,250,.95);color:var(--deep);box-shadow:0 6px 16px -9px rgba(0,0,0,.7)}
/* Base count chip: inline, breathing room off its label, quiet weight.
   The rail rule below overrides it into the absolute badge position. */
.dl-cnt{margin-left:var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--muted)}
.dl-cnt:empty{display:none}  /* LAW D13 at the component: a zero-suppressed count must paint NOTHING — an empty chip with a ground reads as a dash pill (2026-09-02 eyes) */
.dl-item .dl-cnt{position:absolute;right:var(--sp-3);top:50%;transform:translateY(-50%);margin-left:0;font-size:var(--fs-2xs);font-weight:var(--fw-bold);padding:2px var(--sp-2);border-radius:var(--r-pill);background:rgba(232,133,133,.22);color:#F0AFAF;opacity:0;transition:opacity var(--t-base)}
.dl-rail:is(:hover,[data-mode="open"]) .dl-item .dl-cnt{opacity:1}
.dl-item .dl-pip{position:absolute;right:var(--sp-2);top:var(--sp-2);width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.dl-rail:is(:hover,[data-mode="open"]) .dl-item .dl-pip{opacity:0}
.dl-rail-foot{margin-top:var(--sp-1);padding:var(--sp-2) var(--sp-2) 2px;border-top:1px solid var(--r-line)}

/* ─────────────────────────── TOP BAR ───────────────────────────────────── */
/* SLEEK (Elle 2026-08-24: "search bar is too thick... more discreet, more
   sleek minimal — one chassis, same on every page"). ONE chassis it already
   is (both shells render this class); the thickness lived here: sp-2 pads +
   40px controls made a ~58px slab. Now sp-1 pads + 32px field/buttons ≈ 42px
   — a quiet strip, not a bar. Mobile keeps its 44px tap floor below. */
.dl-topbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-5);margin-bottom:var(--sp-6);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--el-1);
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%)}
.dl-crumb{font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-crumb b{color:var(--text-secondary);font-weight:var(--fw-semibold)}
/* THE SEARCH BAR OWNS THE TOPBAR (Elle 2026-08-05: "needs to be a full click in
   search bar"). It was a 300px pill hugging the right edge, and it was a <div>,
   so it was not clickable and not reachable by keyboard at all. It is now the
   element that fills the bar, and it is a real control: font:inherit and
   text-align:left so a <button> stops looking like a button, cursor:text so the
   whole width reads as a field, and a focus ring like every other control. */
/* THE SEARCH IS THE TOPBAR (Elle 2026-08-05: "make that bar just the search that
   goes full width with a little grey mag glass when you click in to type is
   disapesrs"). It is a REAL FIELD you type into — not a button that opens
   something — so the whole bar is the control, and the glass is a small muted
   mark that steps out of the way the moment you focus it. */
.dl-search{flex:1 1 auto;min-width:0;position:relative;display:flex;align-items:center;height:var(--h-sm);
  /* padding:0 is load-bearing: legacy sheets (portal-core) pad labels, which
     shifts the input while the absolute icon stays at the padding box — the
     magnifier then overlaps the first glyphs (2026-09-02 sweep, messages+po-sales) */
  padding:0;
  background:none;border:0;box-shadow:none}
.dl-search:hover,.dl-search:focus-within{background:none;border:0;box-shadow:none}
.dl-search svg{position:absolute;left:0;width:var(--ic-sm);height:var(--ic-sm);flex:0 0 auto;
  stroke:var(--text-muted);fill:none;stroke-width:1.8;pointer-events:none;
  opacity:1;transition:opacity .12s ease,transform .12s ease}
/* the glass disappears on focus and the text starts at the left edge */
.dl-search:focus-within svg{opacity:0;transform:translateX(-4px)}
.dl-search input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--sp-4) 0 calc(var(--ic-sm) + var(--sp-2));
  border:0;background:none;color:var(--text-primary);font:inherit;font-size:var(--fs-base);
  transition:padding .12s ease}
.dl-search input:focus{outline:none;box-shadow:none}
.dl-search input{caret-color:var(--accent);-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.dl-search:focus-within input{padding-left:0}
.dl-search input::placeholder{color:var(--text-muted)}   /* same grey as the glass */
.dl-topbar .dl-iconbtn{width:var(--h-sm);height:var(--h-sm);flex:0 0 var(--h-sm)}
.dl-search input:focus{outline:none}
.dl-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.dl-search .dl-kbd{position:absolute;right:var(--sp-3);flex:0 0 auto;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:.04em;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:1px var(--sp-1);background:var(--bg-card);pointer-events:none;transition:opacity .12s ease}
.dl-search:focus-within .dl-kbd{opacity:0}
/* Results hang under the field, so the answer appears where you are looking.
   position:FIXED, not absolute: .dl-topbar carries overflow:hidden (U13, so its
   radius clips its own backdrop-filter), which silently clipped an absolutely
   positioned panel to nothing. The opener measures the field and sets
   left/top/width, so the panel escapes the bar without the bar giving up its
   clip. */
.dl-search-out{position:fixed;z-index:90;display:none;
  flex-direction:column;gap:2px;max-height:min(60vh,420px);overflow:auto;padding:var(--sp-2);
  border-radius:var(--r-md);
  /* OPAQUE: the elevated glass stacked over the solid canvas — the page can
     never bleed through the panel (Elle 2026-08-27: "the alert pop open is
     sloppy, too translucent"). */
  background:linear-gradient(var(--bg-elevated),var(--bg-elevated)),var(--canvas,#F4F1EA);
  border:1px solid var(--border);box-shadow:var(--el-3)}
.dl-search-out.is-open{display:flex}
.dl-search-out button{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-3);
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-primary);font:inherit;
  font-size:var(--fs-sm);text-align:left;cursor:pointer}
.dl-search-out button:hover,.dl-search-out button[aria-selected="true"]{background:var(--bg-hover)}
.dl-search-out button em{margin-left:auto;padding-left:var(--sp-3);font-style:normal;font-size:var(--fs-xs);
  color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.dl-search-out button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a group label, so brands, contacts and items are not one undifferentiated list */
.dl-search-grp{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
.dl-search-grp:first-child{padding-top:var(--sp-1)}
.dl-search svg{width:var(--ic-sm);height:var(--ic-sm);stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 auto}
.dl-search span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-iconbtn{position:relative;width:var(--h-md);height:var(--h-md);display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--bg-hover);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:var(--t-base)}
.dl-iconbtn:hover{background:var(--glass-hi);color:var(--text-primary)}
.dl-iconbtn svg{width:var(--ic-md);height:var(--ic-md);stroke:currentColor;fill:none;stroke-width:1.7}
.dl-iconbtn .dl-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg-card)}

/* ─────────────────────────── HEADER + ASK-PEARL ────────────────────────── */
.dl-eyebrow{font-family:var(--font-accent);font-style:italic;font-size:var(--fs-2xl);letter-spacing:.01em;color:var(--text-secondary)}
.dl-hello{font-family:var(--font-display);font-size:var(--fs-display);font-weight:var(--fw-semibold);letter-spacing:var(--tr-tight);margin:1px 0 var(--sp-1);color:var(--text-primary)}
.dl-sub{font-size:var(--fs-base);color:var(--text-secondary);margin-bottom:var(--sp-5)}
.dl-sub b{color:var(--accent-ink);font-weight:var(--fw-semibold)}
.dl-prompt{border-radius:var(--r-2xl);padding:var(--sp-4);margin-bottom:var(--sp-6);background:var(--surface-2);border:1px solid var(--border);
  box-shadow:var(--el-1);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%)}
.dl-prompt-field{min-height:84px;border-radius:var(--r-lg);padding:var(--sp-4);background:var(--glass-hi);border:1px solid var(--border);
  color:var(--text-muted);font-size:var(--fs-md);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}

/* ─────────────────────────── BUTTONS (full set — U11) ──────────────────── */
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--h-md);padding:0 var(--sp-4);border-radius:var(--r-md);
  border:1px solid transparent;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast),opacity var(--t-fast);white-space:nowrap}
.dl-btn svg{width:var(--ic-sm);height:var(--ic-sm);stroke:currentColor;fill:none;stroke-width:1.8}
.dl-btn:active{transform:translateY(1px)}
.dl-btn:disabled,.dl-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.dl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* THE ONE FOCUS RING (LAW 10). Measured across the estate: four different
   treatments (auto 1px, auto 3px, solid 2px) and pearl-playbook with
   outline-style:none — a keyboard user had no idea where they were. Iris,
   2px, on everything focusable, declared once. */
body.dl-page :is(a,button,summary,[tabindex],[role="button"],[role="tab"]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
/* A FIELD'S FOCUS IS ITS OWN BOX (Elle 2026-09-07, "the purple rings are not
   properly aligned when clicking in any field, every time"): a typed field
   never wears the ring, which sat on the inner input while the visible box was
   the affix wrapper. The box that is drawn is the box that lights: accent
   border + a soft halo, on the input itself or on the affix that holds it. */
body.dl-page :is(.dl-input,.dl-select,.dl-textarea):focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 78%)}
body.dl-page .dl-affix:focus-within{box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 78%)}
body.dl-page .dl-affix > :is(.dl-input,.dl-select):focus-visible{box-shadow:none}
/* a pointer press never earns a ring on a summary or a segment button; the keyboard does */
body.dl-page[data-modality="pointer"] :is(summary,.dl-seg button,.dl-filter,.dl-disc > summary):focus-visible{outline:none}
/* variants */
a.dl-btn,a.dl-btn:hover{text-decoration:none}   /* an <a> styled as a button must not carry the UA underline (book gap found by eyes, 2026-08-04) */
/* Same gap, one level up: an <a> wearing a book surface class is a CARD, not a
   link. Without this it renders in the UA's #0000EE with an underline, which is
   exactly what shipped on portal/help. Book-level so no page re-solves it. */
a.dl-card,a.dl-card:hover,a.dl-card:visited,a.dl-stat,a.dl-stat:hover,a.dl-stat:visited,
a.dl-convo,a.dl-convo:hover,a.dl-convo:visited{color:inherit;text-decoration:none}
/* Elle 2026-08-06, looking at the sage skin: "is the new message dark purple
   button on the olive green skin suppose to be dark purple". It was, on every
   light skin, because this rule painted the button with var(--text-primary) —
   the INK token — and only reached for the accent on HOVER. The skin's own
   --btn-primary-bg (a gradient built from --accent) already existed and was
   used by the modal chassis's .dl-dlg-primary, so the primary button inside a
   modal followed the skin and the primary button on the page did not. */
.dl-btn-primary{background:var(--btn-primary-bg);color:var(--on-accent);border-color:transparent}
.dl-btn-primary:hover{filter:brightness(1.06)}
.dl-btn-secondary{background:var(--glass-hi);color:var(--text-primary);border-color:var(--border)}
.dl-btn-secondary:hover{background:var(--bg-elevated)}
.dl-btn-ghost{background:transparent;color:var(--text-secondary)}
.dl-btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
/* QUIET DESTRUCTIVE. A filled red button sitting in a row of ghosts competes
   with the row's actual primary - the email reading bar had a green Reply AND a
   filled red Delete shouting at once (Elle 2026-08-18: "the buttons breakign the
   design laws"). Destructive emphasis belongs at the CONFIRM step, where the
   choice is actually irreversible; in a toolbar the verb only needs to be
   findable and unmistakably destructive, which danger INK on a quiet ground
   does. dl-btn-danger stays for confirm dialogs. */
.dl-btn-quiet-danger{background:transparent;color:var(--danger-ink)}
.dl-btn-quiet-danger:hover{background:var(--danger-bg);color:var(--danger-ink)}
.dl-btn-danger{background:var(--danger);color:var(--on-danger)}
.dl-btn-danger:hover{filter:brightness(1.06)}
/* sizes */
.dl-btn-sm{height:var(--h-sm);padding:0 var(--sp-3);font-size:var(--fs-xs)}
.dl-btn-lg{height:var(--h-lg);padding:0 var(--sp-5);font-size:var(--fs-base)}
/* loading */
.dl-btn[data-loading="true"]{color:transparent;pointer-events:none;position:relative}
.dl-btn[data-loading="true"]::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;animation:dlSpin .7s linear infinite}
@keyframes dlSpin{to{transform:rotate(360deg)}}

/* --- THE CHIP GROUP (one rule, every width) -------------------------------
   A row of chips (filters, a selectable set, quick-adds) WRAPS. Chips compact
   on a phone so one row usually holds them; wrapping is the honest fallback;
   a hidden sideways scroll is never the answer (Elle 2026-08-29, "containers
   are cut off, this is illegal"; LAW 46.1 / 49). Three containers used to
   encode three policies for the same row (.dl-chips swiped on phones,
   .dl-chiprail swiped on desktop, .dl-chipset wrapped): one rule now, the
   twins retired (LAW 28/36, 2026-09-05). */
.dl-chips{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);max-width:100%;min-width:0;margin-top:var(--sp-3)}
.dl-chips > *{flex:0 0 auto}
.dl-chip{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-sm);padding:0 var(--dl-chip-px,var(--sp-3));border-radius:var(--r-md);
  background:var(--bg-hover);border:1px solid var(--border);color:var(--text-secondary);font-size:var(--dl-chip-fs,var(--fs-sm));font-weight:var(--fw-medium);cursor:pointer;transition:var(--t-base)}
.dl-chip:hover{background:var(--glass-hi);color:var(--text-primary);transform:translateY(-1px)}

/* --- FILE DROP ZONE (§8) -------------------------------------------------
   The zone is a LABEL wrapping a real file input, so clicking works, tabbing
   works, and a screen reader announces it — a div with a drop handler is
   reachable by mouse only. Drag state is an attribute (U34). */
.dl-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:calc(var(--sp-16) * 1.5);padding:var(--sp-6) var(--sp-4);text-align:center;cursor:pointer;
  border:2px dashed var(--border);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast)}
.dl-drop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dl-drop:hover,.dl-drop:focus-within{border-color:color-mix(in oklab,var(--accent),transparent 45%)}
.dl-drop[data-dragover="true"]{border-color:var(--accent);
  background:color-mix(in oklab,var(--accent),var(--pearl-white) 90%)}
.dl-drop b{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-drop span{font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-drop svg{width:var(--sp-8);height:var(--sp-8);stroke:var(--text-tertiary);fill:none;stroke-width:1.5}

/* --- REPEATABLE EDITOR (§8) ---------------------------------------------
   Rows you add and remove: brands on a contact, SKUs on a PO, regions on a
   deal. Remove sits ON the row rather than in a menu, because hiding a
   destructive control behind a kebab is how a row gets deleted by accident. */
.dl-repeat{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-repeat-row{display:flex;align-items:center;gap:var(--sp-2)}
.dl-repeat-row > *{flex:1 1 auto;min-width:0}
.dl-repeat-x{flex:0 0 auto;width:var(--h-lg);height:var(--h-lg);display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  color:var(--text-secondary);cursor:pointer}
.dl-repeat-x:hover{color:var(--danger-ink);border-color:color-mix(in oklab,var(--danger),transparent 55%)}
.dl-repeat-x svg{width:var(--ic-sm);height:var(--ic-sm);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dl-repeat-add{align-self:flex-start;margin-top:var(--sp-1)}
/* On a phone, two fields plus a remove button in one row leaves each field ~120px
   and "lori.mann@costco.com" renders as "lori.mann@c…" (U32: a field carries every
   length it needs). The fields stack; the remove button stays ON the row, level with
   its first field, and a rule marks where one row ends and the next begins. It sits
   level rather than centred because a row can carry two fields or five, and a control
   that drifts down the card as fields are added is a control you have to hunt for. */
@media (max-width:520px){
  .dl-repeat-row{display:grid;grid-template-columns:1fr var(--h-lg);align-items:start;
    padding-bottom:var(--sp-3);border-bottom:1px solid var(--card-line)}
  .dl-repeat-row > *{grid-column:1}
  .dl-repeat-row:last-of-type{padding-bottom:0;border-bottom:0}
  .dl-repeat-x{grid-column:2;grid-row:1;align-self:start}
}

/* --- DENSITY (§10) -------------------------------------------------------
   Elle reads 248 contacts; a demo reads six. Density is the operator's call,
   not the designer's. It drives the SCALE, so every component follows without
   knowing the setting exists. */
.dl-density{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-md);
  background:var(--bg-hover);border:1px solid var(--border)}
.dl-density button{min-width:var(--h-lg);height:var(--h-lg);border:0;background:none;
  border-radius:var(--r-sm);color:var(--text-secondary);cursor:pointer;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.dl-density button[aria-pressed="true"]{background:var(--surface);color:var(--text-primary);box-shadow:var(--el-1)}
/* Density compresses the SPACE BETWEEN rows. It does NOT shrink the control:
   44px is the tap floor (LAW 32.5), and a "compact" setting that drops a field
   to 38px hands the operator a target their thumb misses. Compact buys its rows
   back from the gaps, which cost nothing to hit. */
/* The book must be self-sufficient: portal/items.html (and others) do not load
   foundation.css, so --tabbar-h would resolve to nothing and the page gutter
   would collapse under the nav. :where() contributes ZERO specificity, so
   foundation's own :root declaration still wins wherever it IS loaded — this is
   a default, not an override. Declared as a variable, so it is a named layout
   constant rather than an off-scale literal inside a padding (U3). */
:where(:root){--tabbar-h:0px}  /* zero-specificity FALLBACK only; foundation.css owns the responsive value */
[data-density="compact"]{--sp-4:12px;--sp-3:9px;--sp-2:6px;--h-lg:44px}
[data-density="roomy"]{--sp-4:20px;--sp-3:15px;--sp-2:10px;--h-lg:52px}

/* --- DATA VIZ (§7) -------------------------------------------------------
   No chart library: the CSP blocks every CDN, and a chart that needs 90KB of
   JavaScript to draw eight numbers is not a chart, it is a dependency. These
   are SVG and CSS, they take their colour from the skin, and every one of them
   shows the number as text as well — a shape without its value is decoration,
   and a person who cannot see the shape gets nothing. */
/* A sparkline is drawn with preserveAspectRatio="none" so it spans its card at
   any width. That stretch would also stretch the STROKE — a 2px line rendered
   4px wide horizontally and 1px vertically reads as a smear. non-scaling-stroke
   keeps the line honest while the geometry stretches. */
.dl-spark{display:block;width:100%;height:var(--sp-8);overflow:visible}
.dl-spark path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dl-spark .dl-spark-fill{fill:color-mix(in oklab,var(--accent),transparent 88%);stroke:none}
.dl-spark circle{fill:var(--accent);stroke:var(--bg-card);stroke-width:2}

/* height:auto, NOT a fixed height. An SVG with a viewBox and a fixed height
   scales to fit the SMALLER axis, so a short box parks a full-width chart as a
   centred third of the card with dead space either side. Letting the viewBox
   ratio drive the height fills the card and keeps the axes undistorted. */
.dl-line{display:block;width:100%;height:auto;overflow:visible}
.dl-line .dl-grid-l{stroke:var(--card-line);stroke-width:1}
.dl-line .dl-axis{font-size:var(--fs-xs);fill:var(--text-secondary)}
.dl-line path.dl-series{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dl-line path.dl-series-2{stroke:var(--teal)}
.dl-line .dl-area{fill:color-mix(in oklab,var(--accent),transparent 90%);stroke:none}

.dl-donut{display:grid;place-items:center;position:relative;width:calc(var(--sp-16) * 1.4);height:calc(var(--sp-16) * 1.4)}
.dl-donut svg{transform:rotate(-90deg)}
.dl-donut circle{fill:none;stroke-width:14;stroke-linecap:round}
.dl-donut .dl-donut-t{stroke:var(--bg-hover)}
.dl-donut .dl-donut-v{stroke:var(--accent);transition:stroke-dasharray var(--t-slow) var(--ease)}
.dl-donut-c{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px}
.dl-donut-c b{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-tight);color:var(--text-primary);line-height:1}
.dl-donut-c span{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-secondary)}

/* activity heatmap. Intensity is OPACITY of one hue, never a rainbow: a scale
   that changes hue makes the reader learn a legend to read a calendar. */
.dl-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:var(--sp-1);overflow-x:auto}
.dl-heat i{width:12px;height:12px;border-radius:3px;background:var(--bg-hover)}
.dl-heat i[data-v="1"]{background:color-mix(in oklab,var(--accent),transparent 72%)}
.dl-heat i[data-v="2"]{background:color-mix(in oklab,var(--accent),transparent 48%)}
.dl-heat i[data-v="3"]{background:color-mix(in oklab,var(--accent),transparent 24%)}
.dl-heat i[data-v="4"]{background:var(--accent)}
.dl-heat-k{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);
  font-size:var(--fs-xs);color:var(--text-secondary)}

/* geo overview: a list of regions carrying their own numbers. A map of the US
   tells an operator where Idaho is, which they know; the NUMBER per region is
   the thing they came for.

   ONE COLUMN, one shared bar track. Regions in side-by-side boxes each get a
   different track width, so a 100% bar and a 62% bar can render the same
   length — which destroys the only thing a bar is for. Rows stacked on a common
   grid make the lengths directly comparable down the column.

   The BAR TRACK is a fixed width, not 1fr. Each row is its own grid, so a 1fr
   bar takes whatever the label and the number leave it — and "$412K · 3 buyers"
   is wider than "$74K · 1 buyer", which made the four tracks 325/328/332/341px.
   Bars measured against four different rulers cannot be compared, which is the
   only thing they are for. Fixing the track makes every ruler the same. */
.dl-geo{display:grid;gap:var(--sp-2)}
.dl-geo-r{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--sp-16) * 3) auto;
  align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--card-line)}
.dl-geo-r b{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-geo-bar{height:6px;border-radius:99px;background:var(--bg-hover);overflow:hidden;min-width:0}
.dl-geo-bar i{display:block;height:100%;background:var(--accent)}
.dl-geo-r span{font-size:var(--fs-xs);color:var(--text-secondary);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* on a phone the three columns will not fit: the bar drops to its own row
   BELOW the label and number, still full width, still a shared track. */
@media (max-width:520px){
  .dl-geo-r{grid-template-columns:1fr auto}
  .dl-geo-bar{grid-column:1 / -1;order:2}
}

/* live pill — a dot that pulses only while something is genuinely streaming.
   A "live" badge on stale data is a lie the interface tells continuously. */
.dl-live{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-sm);padding:0 var(--sp-3);
  border-radius:var(--r-pill);background:var(--success-bg);color:var(--success-ink);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase}
.dl-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:dlLive 1.8s ease-in-out infinite}
@keyframes dlLive{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.dl-live i{animation:none}}

/* --- CALENDAR (§14) ------------------------------------------------------
   The seventh archetype. calendar.html, admin-calendar.html, portal-calendar.html
   and portal/calendar.html carry 184 controls between them and the classifier put
   all four in "form" at 0-31% confidence — which is the classifier saying it does
   not know, not that they are forms. A month grid is not a list, a table, or a
   form: it is a fixed 7-column shape where the ROW is a week and the CELL is a
   date that may hold nothing at all.

   The month grid is a DESKTOP shape. At 390px a 7-column grid gives 50px cells,
   and 50px cannot hold "Costco buyer call" — it can hold a dot. So the phone gets
   an AGENDA instead: the same events as a scrolling list of days, every title at
   full length. This is not a degraded month view, it is the shape that actually
   answers "what do I have on" on a phone. Month view is reachable on a phone via
   the view tabs; it just is not the default. */
/* CALENDAR BAR (Elle 2026-08-05: the view toggle "in the middle needs a new home
   thats cleaner"). It used to float centred in its own track, unattached to
   anything, with the date on the left and the arrows on the right — so the two
   controls that BOTH change what you are looking at sat at opposite ends with an
   orphan between them. Now: the date and the arrows that move it are one cluster
   on the left, and the view switch is the right edge. Nothing floats. */
.dl-cal-bar{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-3);margin-bottom:var(--sp-4)}
.dl-cal-bar > .dl-tabs{margin-left:auto}
@media (max-width:640px){
  /* on a phone the switch takes its own line rather than crushing the date */
  .dl-cal-bar > .dl-tabs{margin-left:0;flex:1 1 100%;justify-content:stretch}
  .dl-cal-bar > .dl-tabs button{flex:1 1 0}
}
.dl-cal-t{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-tight);color:var(--text-primary);white-space:nowrap}
.dl-cal-nav{display:flex;align-items:center;gap:var(--sp-2)}
.dl-cal-nav button{width:var(--h-lg);height:var(--h-lg);display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  color:var(--text-secondary);cursor:pointer;transition:.15s}
.dl-cal-nav button:hover{color:var(--text-primary);border-color:var(--accent)}
.dl-cal-nav button svg{width:var(--ic-sm);height:var(--ic-sm);fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-cal-nav .dl-cal-today{width:auto;padding:0 var(--sp-4);font:inherit;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold)}

.dl-cal-hd{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-1);margin-bottom:var(--sp-1)}
.dl-cal-hd span{text-align:center;padding:var(--sp-2) 0;font-size:var(--fs-xs);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-secondary)}
.dl-cal{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(calc(var(--sp-16) * 1.5),auto);
  gap:var(--sp-1)}
.dl-cal-d{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);min-width:0;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--card-line)}
.dl-cal-d > b{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary);
  font-variant-numeric:tabular-nums}
/* Days spilling in from the neighbouring month stay READABLE. Greying them to
   near-invisible is the common move and it breaks the one thing the spill is for:
   telling you the 1st is a Wednesday. */
.dl-cal-d[data-out="true"]{background:transparent;border-color:transparent}
.dl-cal-d[data-out="true"] > b{color:var(--text-secondary)}
/* Today is marked by an ARIA attribute, not a class (U34): the state a screen
   reader announces and the state you can see are the same fact. */
.dl-cal-d[aria-current="date"]{border-color:var(--accent);
  background:color-mix(in oklab,var(--accent),var(--pearl-white) 92%)}
.dl-cal-d[aria-current="date"] > b{color:var(--accent-ink)}

/* An event chip in a month cell TRUNCATES, and that is the honest trade: a cell
   cannot grow without pushing every other week off the screen. The full title is
   one tap away in the agenda and the detail, so no length is ever lost — it just
   is not all on the month grid at once. */
.dl-cal-ev{display:flex;align-items:center;gap:var(--sp-1);width:100%;padding:var(--sp-1) var(--sp-2);
  border:0;border-radius:var(--r-sm);background:color-mix(in oklab,var(--accent),transparent 88%);
  color:var(--text-primary);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dl-cal-ev::before{content:"";flex:0 0 auto;width:var(--sp-1);height:var(--sp-1);
  border-radius:50%;background:var(--accent)}
.dl-cal-ev[data-kind="sample"]{background:color-mix(in oklab,var(--teal),transparent 88%)}
.dl-cal-ev[data-kind="sample"]::before{background:var(--teal)}
.dl-cal-ev[data-kind="due"]{background:var(--warning-bg)}
.dl-cal-ev[data-kind="due"]::before{background:var(--warning)}
.dl-cal-more{align-self:flex-start;border:0;background:none;padding:0 var(--sp-1);
  font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--text-secondary);cursor:pointer;text-decoration:underline}

/* THE AGENDA — the phone default, and a legitimate desktop view in its own right.
   Full titles, real times, and days with nothing on them are simply absent rather
   than rendered as empty furniture. */
.dl-agenda{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-agenda-day{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-agenda-hd{display:flex;align-items:baseline;gap:var(--sp-2);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--card-line)}
.dl-agenda-hd b{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-agenda-hd span{font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-agenda-hd[aria-current="date"] b{color:var(--accent-ink)}
.dl-agenda-ev{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:var(--sp-3);
  width:100%;padding:var(--sp-3);border:1px solid var(--card-line);border-radius:var(--r-md);
  background:var(--surface);color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;
  transition:border-color var(--t-fast)}
.dl-agenda-ev:hover{border-color:var(--accent)}
.dl-agenda-tm{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-secondary);
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:calc(var(--sp-16) * .8)}
.dl-agenda-ev b{display:block;font-size:var(--fs-base);font-weight:var(--fw-semibold);
  color:var(--text-primary)}
.dl-agenda-ev span{display:block;margin-top:var(--sp-1);font-size:var(--fs-sm);
  color:var(--text-secondary)}

/* WHICH VIEW IS SHOWING IS STATE, NOT VIEWPORT. The selected tab and the shape
   on screen must be the same fact: a tab reading "Month" above an agenda is the
   interface lying about itself. The page owns data-view; the tab follows it. */
.dl-calview[data-view="agenda"] .dl-cal,
.dl-calview[data-view="agenda"] .dl-cal-hd{display:none}

@media (max-width:720px){
  .dl-cal-bar{grid-template-columns:1fr auto;row-gap:var(--sp-2)}
  .dl-cal-bar > .dl-tabs{grid-column:1 / -1;justify-self:stretch}
  /* No-JS fallback ONLY. A 390px month grid gives 50px cells, so if the page
     never gets to set data-view, the grid still must not render here. When JS
     runs it sets data-view="agenda" first and the tab agrees with the screen. */
  .dl-cal,.dl-cal-hd{display:none}
}

/* --- THE STEPPER (onboarding, 99 controls across 6 steps) ---------------
   A wizard's first job is telling you where you are and how much is left. The
   steps are a LIST, numbered, with the current one named — not four dots that
   make you count. Done steps stay clickable: a wizard you cannot walk back
   through is a form that punishes a typo on step 2 with starting again. */
.dl-steps{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.dl-step{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--h-lg);
  padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--surface);color:var(--text-secondary);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap}
.dl-step-n{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  background:var(--bg-hover);color:var(--text-secondary);font-size:var(--fs-2xs);font-weight:var(--fw-black)}
.dl-step[aria-current="step"]{border-color:color-mix(in oklab,var(--accent),transparent 45%);
  background:color-mix(in oklab,var(--accent),var(--pearl-white) 88%);color:var(--accent-ink)}
.dl-step[aria-current="step"] .dl-step-n{background:var(--accent);color:var(--pearl-white)}
.dl-step[data-done="true"]{color:var(--text-primary);cursor:pointer}
.dl-step[data-done="true"] .dl-step-n{background:var(--success);color:var(--on-success,var(--pearl-white))}
/* the sentence a bare progress bar cannot say */
.dl-steps-s{flex:1 0 100%;font-size:var(--fs-sm);color:var(--text-secondary);margin-top:var(--sp-1)}

/* --- THE CONSENT SHEET (cookie consent · terms · session timeout) --------
   Three surfaces the platform has and the book did not. They share a shape:
   a short, unavoidable question docked at the bottom, with the honest choice
   on both sides. Docked rather than centred, because a modal over a page a
   person has not consented to see is the wrong order of events.

   The decline is a REAL button, not a link in the small print. A consent
   surface where refusing is harder than agreeing is not consent. */
/* LAW D10 (2026-08-23 census): this was the banned slab — full-width,
   translucent + backdrop-filter, and a FIXED LIGHT --pearl-white ground
   that read as a pale slab under every dark skin (the exact class Elle
   named on the old calculator dock). Now the floating opaque inset card. */
.dl-consent{position:fixed;left:var(--sp-5);right:var(--sp-5);
  bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));z-index:80;
  display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-6);
  background:var(--bg-card-solid,var(--surface));
  border:1px solid var(--card-line);border-radius:var(--r-lg,16px);
  box-shadow:0 18px 48px -12px color-mix(in oklab,var(--deep),transparent 45%)}
.dl-consent-t{flex:1 1 auto;min-width:0}
.dl-consent-t b{display:block;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-consent-t p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--text-secondary);max-width:62ch}
.dl-consent-a{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}
@media (max-width:900px){
  .dl-consent{padding-left:var(--sp-4);padding-right:var(--sp-4);bottom:var(--tabbar-h)}
  .dl-consent-a{width:100%} .dl-consent-a .dl-btn{flex:1 1 0;min-width:0}
}

/* --- THE AGREEMENT (e-sign) ---------------------------------------------
   A document you are asked to sign shows the DOCUMENT, scrollable, with the
   signature under it — never a checkbox beside a link to a PDF nobody opened.
   The document is on paper, not on the app's glass, for the same reason the
   studio preview is. */
.dl-agree{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-agree-doc{max-height:calc(var(--sp-16) * 5);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-5);border-radius:var(--r-lg);
  background:var(--pearl-white);border:1px solid var(--card-line);
  font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-secondary)}
.dl-agree-doc h4{margin-bottom:var(--sp-2);font-family:var(--font-display);
  font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-agree-doc p + h4{margin-top:var(--sp-4)}
.dl-agree-sign{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-4);border-radius:var(--r-lg);
  background:var(--surface);border:1px dashed var(--border)}
.dl-agree-name{flex:1 1 auto;min-width:calc(var(--sp-16) * 2);min-height:var(--h-lg);
  font-family:var(--font-accent);font-style:italic;font-size:var(--fs-xl);
  color:var(--text-primary);border:0;border-bottom:1px solid var(--border);
  background:none;padding:var(--sp-2) 0}
.dl-agree-name:focus{outline:none;border-bottom-color:var(--accent)}
.dl-agree-meta{flex:0 0 auto;font-size:var(--fs-xs);color:var(--text-secondary)}

/* --- THE SAVE BAR (LAW 46.4) --------------------------------------------
   A form of 92 fields cannot put Save at the bottom and hope. The bar docks:
   full width, flush at the bottom, ABOVE the tab bar and the safe area, and
   the page pads itself by exactly the bar's height so no field can ever hide
   under it — which is the failure LAW 46.4 was written for.

   It carries the STATE of the form, not just its buttons. "Saved 2 minutes
   ago" and "3 unsaved changes" are the two things an operator wants to know
   without hunting, and a bar that only holds buttons makes them hunt. */
.dl-savebar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-8) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:color-mix(in oklab,var(--pearl-white),transparent 6%);
  border-top:1px solid var(--card-line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.dl-savebar-s{flex:1 1 auto;min-width:0;font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-savebar-s b{color:var(--text-primary);font-weight:var(--fw-semibold)}
/* unsaved is a STATE of the form, so it is an attribute (U34) */
.dl-savebar[data-dirty="true"] .dl-savebar-s b{color:var(--warning-ink)}
/* the page reserves exactly the bar's height. A form whose last field sits
   under the Save button is the oldest bug in forms. */
.dl-has-savebar{padding-bottom:calc(var(--sp-16) + env(safe-area-inset-bottom))}
@media (max-width:900px){
  .dl-savebar{padding-left:var(--sp-4);padding-right:var(--sp-4);
    bottom:var(--tabbar-h);flex-wrap:wrap}
  .dl-savebar-s{flex:1 0 100%;margin-bottom:var(--sp-1)}
  .dl-savebar .dl-btn{flex:1 1 0;min-width:0}
  .dl-has-savebar{padding-bottom:calc(var(--sp-16) + var(--sp-12) + env(safe-area-inset-bottom))}
}

/* --- THE AUTH SHELL ------------------------------------------------------
   Sign-in is the one surface with no rail, no tab bar and nothing to navigate
   to — the person is not in the app yet. So it is its own frame: one centred
   card on the ground, and nothing else competing for the eye. */
.dl-auth{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;
  padding:var(--sp-6) var(--sp-4)}
.dl-auth-card{width:min(100%,var(--sp-16) * 6);display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-8) var(--sp-6);border-radius:var(--r-3xl);
  /* HERMES PASS (Elle-approved): floating card — canvas crown, accent-kissed
     hairline, deep-soft layered shadow (spread inside the radius, U7). */
  background:linear-gradient(180deg, color-mix(in oklab, var(--surface), var(--canvas) 26%), var(--surface) 140px);
  border:1px solid color-mix(in oklab, var(--accent), var(--card-line) 76%);
  box-shadow:inset 0 1px 0 0 var(--hi),
    0 26px 60px -22px color-mix(in oklab, var(--deep), transparent 68%),
    0 6px 18px -10px color-mix(in oklab, var(--deep), transparent 82%);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
@media (prefers-reduced-motion:no-preference){
  .dl-auth-card{animation:dlAuthRise .55s var(--ease) both}
  @keyframes dlAuthRise{from{opacity:0;transform:translateY(14px) scale(.985)}}
}
.dl-auth-card .dl-wordmark{font-size:var(--fs-2xl);
  background:linear-gradient(90deg, var(--text-primary) 0%, var(--accent-deep) 100%);
  -webkit-background-clip:text;background-clip:text}
.dl-auth-card .dl-tabs{background:color-mix(in oklab, var(--deep), transparent 93%);
  border:0;border-radius:var(--r-pill);padding:var(--sp-1);gap:var(--sp-1)}
.dl-auth-card .dl-tabs [role="tab"]{border-radius:var(--r-pill);min-height:44px;border:0;
  font-weight:var(--fw-semibold)}
.dl-auth-card .dl-tabs [role="tab"][aria-selected="true"]{background:var(--surface);
  box-shadow:0 1px 8px -3px color-mix(in oklab, var(--deep), transparent 65%), inset 0 1px 0 0 var(--hi)}
.dl-auth-card .dl-input{min-height:52px;
  background:color-mix(in oklab, var(--surface), var(--canvas) 45%)}
.dl-auth-card .dl-input:focus{border-color:color-mix(in oklab, var(--accent), transparent 30%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 82%)}
.dl-auth-card .dl-btn-primary{min-height:52px;border-radius:var(--r-pill);
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent), var(--canvas) 16%), var(--accent-deep));
  box-shadow:0 12px 26px -12px color-mix(in oklab, var(--accent-deep), transparent 40%), inset 0 1px 0 0 var(--hi)}
.dl-auth-card .dl-btn-primary:hover{transform:translateY(-1px);
  box-shadow:0 16px 30px -12px color-mix(in oklab, var(--accent-deep), transparent 34%), inset 0 1px 0 0 var(--hi)}
.dl-auth-brand{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.dl-auth-card h1{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);color:var(--text-primary);text-align:center}
.dl-auth-sub{font-size:var(--fs-sm);color:var(--text-secondary);text-align:center;max-width:38ch}
.dl-auth-foot{display:flex;justify-content:center;align-items:center;gap:var(--sp-2);min-height:var(--h-lg);
  padding-top:var(--sp-3);border-top:1px solid var(--card-line);
  font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-auth-foot a{display:inline-flex;align-items:center;min-height:var(--h-lg);padding:0 var(--sp-2)}
  /* "Forgot your password?" is the link a locked-out person needs most, and it
     was a 14px target. A recovery link is not a footnote. */

/* --- THE STUDIO SPLIT ----------------------------------------------------
   A studio is an editor beside what it produces. Side by side on a desk;
   on a phone they STACK and swap by tab, because two panes at 375px gives
   neither of them enough room to be either. */
.dl-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);
  align-items:start}
.dl-studio-pane{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;
  padding:var(--sp-4);border-radius:var(--r-2xl);
  background:var(--surface);border:1px solid var(--card-line);box-shadow:inset 0 1px 0 0 var(--hi)}
.dl-studio-hd{display:flex;align-items:center;gap:var(--sp-2);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--card-line)}
.dl-studio-hd h3{font-family:var(--font-display);font-size:var(--fs-md);font-weight:var(--fw-semibold);
  color:var(--text-primary)}
/* the produced thing sits on its own paper, not on the app's glass — a preview
   that wears the app's chrome is not showing you what you are making */
.dl-studio-out{border-radius:var(--r-lg);background:var(--pearl-white);
  border:1px solid var(--card-line);padding:var(--sp-5);min-height:calc(var(--sp-16) * 3)}
@media (max-width:900px){
  .dl-studio{grid-template-columns:1fr}
  .dl-studio-pane[data-pane-hidden="true"]{display:none}
}

/* --- THE GROUND (LAW 4) --------------------------------------------------
   LAW 4 requires a gradient background with floating orbs for depth, and the
   design book had NO shipping version of it — the mesh lived only in
   _mock-frame.css, which is dev staging and never deploys. So every mock has
   been reviewed on a ground no real page could ever have. Promoted here, where
   pages can reach it.

   It is built from the SKIN's own tints, so all 17 arrive for free and none of
   them needs a hand-picked gradient. Fixed rather than scrolling, so the
   ground stays still while content moves over it — a background that scrolls
   with the page reads as a very long image.

   30s drift, alternate: LAW 9 wants ambient motion, never attention-seeking.
   It is off entirely under prefers-reduced-motion. */
.dl-ground{position:fixed;inset:-6%;z-index:0;pointer-events:none;background:
  radial-gradient(70% 60% at 12% -2%  in oklab, color-mix(in oklab,var(--t1-ink),transparent 30%) 0%, transparent 56%),
  radial-gradient(66% 58% at 92% 4%   in oklab, color-mix(in oklab,var(--t2-ink),transparent 40%) 0%, transparent 55%),
  radial-gradient(80% 72% at 88% 102% in oklab, color-mix(in oklab,var(--t3-ink),transparent 34%) 0%, transparent 58%),
  radial-gradient(72% 62% at 10% 104% in oklab, color-mix(in oklab,var(--accent),transparent 40%) 0%, transparent 56%),
  var(--canvas);
  animation:dlDrift 30s ease-in-out infinite alternate}
@keyframes dlDrift{100%{transform:translate3d(-2%,1.5%,0) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.dl-ground{animation:none}}

/* a single orb, for a surface that wants one deliberate glow rather than the
   whole ground — a hero, an empty state, a sign-in card */
.dl-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(60px);opacity:.5;background:var(--accent)}

/* --- DISCLOSURE ----------------------------------------------------------
   faq-item / faq-question / faq-answer, and every "collapsed" section across
   the platform, are one pattern: a summary you press and a body that opens.
   Built on <details>/<summary> so the state is the browser's — which means it
   works before JavaScript loads, and a screen reader announces it without
   anything being wired. */
.dl-disc{border-bottom:1px solid var(--card-line)}
.dl-disc:last-of-type{border-bottom:0} /* a rule under the last item is a line to nothing */
.dl-disc > summary{display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--h-lg);padding:var(--sp-3) 0;cursor:pointer;list-style:none;
  font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-disc > summary::-webkit-details-marker{display:none}
/* LAW D14: ONE right anchor per summary row. A status tag pins flush to the
   right edge, beside the chevron. Without this, the tag's margin-left:auto
   and the chevron's split the free space in two, so the tag floats mid-row
   at a different x on every section (position tracks the title length). */
.dl-disc > summary .dl-tag{margin-left:auto}
.dl-disc > summary:has(.dl-tag)::after{margin-left:0}
/* Y1 (Elle 2026-09-12): a section's Edit/Done verb sits at the right anchor too, beside the tag and the chevron */
.dl-disc > summary [data-bp="sec-edit"]{flex:0 0 auto;margin-left:auto}
.dl-disc > summary .dl-tag + [data-bp="sec-edit"]{margin-left:0}
/* THE TITLE YIELDS, IT NEVER COLLAPSES (Elle's iPhone, 2026-09-13): in the war-room sheet an
   item's summary is art + name + a nowrap value tag + the chevron; with no flex sizing the name
   was squeezed to one letter per line down the whole screen. The name is the flexible member
   with a floor; on a phone the row wraps so the tag takes its own line and the art is 48px. */
.dl-disc > summary .dl-disc-t{flex:1 1 auto;min-width:0}
.dl-itemdisc > summary .dl-disc-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){
  .dl-itemdisc > summary{flex-wrap:wrap;row-gap:var(--sp-2)}
  .dl-itemdisc > summary .dl-brandart-xl{flex-basis:var(--sp-12);width:var(--sp-12);height:var(--sp-12);padding:0;border-radius:var(--r-md)}
  .dl-itemdisc > summary .dl-brandart-xl img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
  .dl-itemdisc > summary .dl-disc-t{flex:1 1 0;min-width:calc(var(--sp-16) * 2);-webkit-line-clamp:3}
  .dl-itemdisc > summary .dl-tag{white-space:normal;text-align:right}
}
/* a helper sentence inside a disclosure title reads on its own line in every host (the deal drill's
   "Matters on this brand" ran into its subtitle in the phone sheet); the PO disc keeps its inline count */
.dl-disc > summary .dl-disc-t .dl-help{display:block;margin-top:2px;font-weight:var(--fw-normal)}
.dl-podisc > summary .dl-disc-t .dl-help{display:inline;margin-left:var(--sp-2);margin-top:0}
.dl-disc > summary:has([data-bp="sec-edit"])::after{margin-left:0}
@media (max-width:640px){details[data-sec] > summary .dl-help{display:none!important}}   /* a phone summary is the title, the tag, Edit and the chevron: the helper sentence goes */
/* THE PROFILE ON A PHONE IS A GROUPED LIST (Elle's iPhone 2026-09-13, "junky and dumpy"): six 150px boxes for six
   one-line rows, with a status pill, Edit and a chevron all fighting for the right edge. Rows are one dense line
   apart, and Edit shows only on the section that is OPEN — a closed row is title · status · chevron (LAW D14). */
@media (max-width:640px){
  details[data-sec].dl-card{margin-bottom:var(--sp-2)!important}
  details[data-sec] > summary{padding:var(--sp-3) var(--sp-4)!important;min-height:var(--h-lg)}
  details[data-sec]:not([open]) > summary [data-bp="sec-edit"]{display:none}
}
.dl-disc > summary::after{content:'';flex:0 0 auto;margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t-base) var(--ease)}
.dl-disc[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.dl-disc-body{padding:0 0 var(--sp-4);font-size:var(--fs-sm);color:var(--text-secondary);max-width:70ch}

/* --- ACTION CLUSTER -----------------------------------------------------
   header-actions appears on 28 pages: the controls that sit at the end of a
   header row. The topbar, the page head and a card head all grow one, so it is
   a primitive rather than a part of any of them. On a phone it wraps to its
   own line at full width instead of squeezing — a header with four buttons
   crushed into 90px is the "smushed" failure by another route. */
.dl-acts{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:0 0 auto}
.dl-acts > *{flex:0 0 auto}
@media (max-width:640px){
  .dl-acts{width:100%;margin-left:0;margin-top:var(--sp-3)}
  .dl-acts > .dl-btn{flex:1 1 0;min-width:0}
  /* --quiet: a LAW 54 commit control (Save), NOT the page's verb — it never
     inflates into a thumb-wide hero slab on phones (Elle 2026-09-02, the
     profile's "huge ass save changes"). Compact, right-aligned, unstretched. */
  .dl-acts--quiet{width:auto;margin-left:auto;margin-top:var(--sp-2)}
  .dl-acts--quiet > .dl-btn{flex:0 0 auto}
}

/* --- U34 · THE ACCESSIBLE STATE IS THE STATE ---------------------------
   This sheet had SEVEN ways to say "this thing is on": .dl-on, .dl-sel,
   .dl-active, .dl-open, plus aria-pressed, aria-selected and aria-expanded.
   That is the same disease as the 11,564 legacy class names, in the design
   system that was supposed to cure it.
   ONE rule: where ARIA has a word for the state, the ARIA attribute IS the
   state and the CSS keys off it. A control cannot then look pressed and
   announce as unpressed, because there is only one thing to set. Where ARIA
   has no word — error, loading, tint, tone — use data-*.
     on / off        aria-pressed="true"      (toggles, filter chips)
     open / closed   aria-expanded="true"     (disclosures, menus)
     chosen          aria-selected="true"     (menu items, tabs)
     you are here    aria-current="page"      (nav)
     unavailable     aria-disabled="true"
     everything else data-error, data-loading, data-open, data-tint, data-tone
*/

/* ─────────────────────────── FORMS (U12) ──────────────────────────────── */
.dl-field{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-4)}
.dl-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-primary)} /* names the field: muted 3.9:1, secondary 4.2:1, both under AA at 11px */
.dl-input,.dl-select,.dl-textarea{width:100%;min-height:var(--h-lg);padding:0 var(--sp-3);border-radius:var(--r-md);
  background:var(--bg-hover);border:1px solid var(--border);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--fs-base);transition:border-color var(--t-fast),background var(--t-fast);
  caret-color:var(--accent)} /* U12/LAW45: 16px effective on mobile via base+, explicit caret */
.dl-textarea{min-height:96px;padding:var(--sp-3);resize:vertical;line-height:var(--lh-body)}
.dl-input:focus,.dl-select:focus,.dl-textarea:focus{outline:none;border-color:var(--accent);background:var(--bg-card)}
.dl-input::placeholder,.dl-textarea::placeholder{color:var(--text-tertiary)}
/* A locked value reads as furniture, not as something to type into. `readOnly = true`
   in JS reflects the attribute, so pages never set colours from script. */
.dl-input[readonly],.dl-input:disabled{background:var(--bg-hover);color:var(--text-secondary)}
.dl-field[data-error="true"] .dl-input,.dl-field[data-error="true"] .dl-textarea{border-color:var(--danger)}
/* Strength meter (grown 2026-08-01, portal-register needed it): N bars filled by
   data-score, colour by severity. Script sets ONE attribute, never paints. */
.dl-strength{display:flex;gap:var(--sp-1);margin-top:var(--sp-2)}
.dl-strength i{height:var(--sp-1);flex:1;border-radius:var(--r-pill);background:var(--border)}
.dl-strength[data-score="1"] i:nth-child(-n+1){background:var(--danger-ink)}
.dl-strength[data-score="2"] i:nth-child(-n+2){background:var(--warning-ink)}
.dl-strength[data-score="3"] i:nth-child(-n+3){background:var(--success-ink)}
.dl-strength[data-score="4"] i{background:var(--success-ink)}
.dl-help{font-size:var(--fs-xs);color:var(--text-secondary)}
  /* help text EXPLAINS the field — content, not trim. --text-muted measured 4.1:1. */
/* The -ink tokens are documented in skins.css as "AA text-on-glass variants":
   they are the INK for a tinted ground, and every other use in this sheet pairs
   them (--danger-bg + --danger-ink). .dl-error was using one on bare page and
   measured 3.2:1 with --danger, 4.0:1 with --danger-ink. Giving it the ground
   the token was designed for clears AA — and an error you can find is better
   than an error rendered in a red you have to hunt for. */
.dl-error{display:block;font-size:var(--fs-xs);color:var(--danger-ink);
  /* OPAQUE ground, mixed against --pearl-white. --danger-bg is 16% alpha, so
     the tint took whatever the animated mesh was doing behind it and the
     ratio swung with the background — same lesson as the 5%-opaque --card. */
  background:color-mix(in oklab,var(--danger),var(--pearl-white) 86%);
  padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);
  border-left:2px solid var(--danger)}
/* LAW 48: no focus-zoom. Keyed on the ELEMENT, not on three class names.
   iOS Safari zooms the whole page when a focused editable computes under 16px,
   and the zoom sticks -- it shears every fixed container (LAW 46/49). The rule
   used to list .dl-input, .dl-select and .dl-textarea, which made protection
   OPT-IN: any editable surface that was not one of those three was exposed by
   default, and a law you have to remember to join is a preference. Found when a
   new in-place diff editor computed 15px and nothing complained. The type scale
   has no 16px step (15 then 17), so this is deliberately a literal: it is the
   platform's floor, not a step in the book's ramp. */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea, select, [contenteditable]:not([contenteditable=false]){font-size:16px}
}
/* --- U12 · THE SIX JOBS THE LEGACY FORM CLASSES DID THAT THIS DID NOT ------
   27 legacy classes across four parallel families — form-*, field-*, wizard-*
   and strays — turned out to be doing about thirteen jobs. Seven were already
   covered (dl-field, dl-label, dl-input, dl-select, dl-textarea, dl-help,
   dl-error, dl-choice, dl-switch). These are the six that were not. The point
   of the collapse is that form-group, field-input, wizard-field and quick-form
   -group all become the SAME component; matching them one-to-one would have
   rebuilt the mess in a new vocabulary. */

/* 1 · fields that share a line. Legacy: form-row, form-grid.
   auto-fit rather than fixed columns, so a two-field row and a four-field row
   are the same component and neither strands a field alone on a line. */
.dl-fieldrow{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) * 2),1fr))}
/* min-width:0 is load-bearing: a grid cell's auto minimum let a nowrap chip
   rail INFLATE its parent field to ~1000px past the phone edge instead of
   scrolling inside it (profile's Active Marketing Channels, 2026-09-02
   composed gate). The rail scrolls; the field clamps. */
.dl-fieldrow > .dl-field{margin-bottom:0;min-width:0;max-width:100%}
.dl-field > .dl-chips{max-width:100%}
.dl-fieldrow + .dl-fieldrow,.dl-fieldrow + .dl-field{margin-top:var(--sp-4)}
/* nested pair-rows are GRID ITEMS side by side — the sibling rhythm above
   must not shove the 2nd..nth pair down inside the row (the Instagram-vs-
   TikTok 20px label offset, Elle's spacing sweep 2026-08-24) */
.dl-fieldrow > .dl-fieldrow{margin-top:0}

/* 2 · a titled group of fields. Legacy: form-section, input-section,
   wizard-section-header, wizard-divider — a heading and a rule, four ways. */
.dl-fieldset{border:0;padding:0;margin:0 0 var(--sp-5);min-width:0;min-inline-size:0 /* a fieldset defaults to min-content: one long line pushed vendor setup 45px past its card on the phone (2026-09-23 audit) */}
.dl-fieldset > legend,.dl-fieldset-t{display:block;width:100%;padding:0 0 var(--sp-2);margin-bottom:var(--sp-4);
/* a help paragraph that opens a fieldset (the Account folder's champions note) breathes before its first field */
.dl-fieldset > p.dl-help{margin:0 0 var(--sp-3)}
  border-bottom:1px solid var(--card-line);
  font-family:var(--font-display);font-size:var(--fs-md);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-snug);color:var(--text-primary)}
.dl-fieldset-t small{display:block;margin-top:var(--sp-1);font-family:var(--font-body);
  font-size:var(--fs-sm);font-weight:var(--fw-normal);letter-spacing:0;color:var(--text-primary);opacity:.82}
  /* --text-secondary measured 4.0-4.4:1 in graphite and onyx, the two tightest
     skins. This sentence explains what a whole section is for, so it is content:
     primary ink held back with opacity keeps the hierarchy without the deficit. */
  /* fs-sm not fs-xs: this sentence explains the whole section, and 11px secondary
     measured 4.1:1 — under AA. Small text is where --text-secondary runs out. */

/* 3 · a value shown, not edited. Legacy: field-value-display.
   It reads as CONTENT, not as a disabled input: a greyed-out box says "you
   could have typed here but cannot", which is a different and wrong message. */
.dl-readonly{min-height:var(--h-lg);display:flex;align-items:center;
  font-size:var(--fs-base);color:var(--text-primary);word-break:break-word}
.dl-readonly:empty::before{content:'—';color:var(--text-muted)}

/* 4 · the settings row: what it is, what it does, and the switch. Legacy:
   toggle-row, toggle-info, checkbox-label. dl-switch alone is inline and has
   nowhere to put the sentence explaining what the setting means. */
.dl-togglerow{display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--card-line)}
.dl-togglerow:last-child{border-bottom:0}
.dl-togglerow-t{flex:1;min-width:0}
.dl-togglerow-t b{display:block;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-togglerow-t span{display:block;margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-togglerow > .dl-switch{flex:0 0 auto;margin-top:var(--sp-1)}

/* 5 · a unit that belongs to the field, not to the value. Legacy: input-prefix.
   Typing "$" into a currency field is the machine's work, not the operator's. */
.dl-affix{display:flex;align-items:center;width:100%;border-radius:var(--r-md);
  background:var(--bg-hover);border:1px solid var(--border);
  transition:border-color var(--t-fast),background var(--t-fast)}
.dl-affix:focus-within{border-color:var(--accent);background:var(--bg-card)}
.dl-affix > .dl-input{border:0;background:none;flex:1 1 auto;min-width:0}
.dl-affix > .dl-input:focus{background:none}
.dl-affix-u{flex:0 0 auto;padding:0 var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--text-secondary);white-space:nowrap} /* the unit is the field's meaning, not trim */
.dl-affix-u:first-child{padding-right:0}
.dl-affix-u:last-child{padding-left:0}

/* 6 · required, said once. A red star with no legend is a puzzle; the marker
   carries its own meaning for a screen reader and needs none on the page. */
.dl-req::after{content:'*';margin-left:var(--sp-1);color:var(--danger-ink,var(--danger));font-weight:var(--fw-bold)}  /* -ink pair: raw --danger as text ink fails AA (recurrence class) */

/* checkbox + radio */
.dl-choice{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--h-lg);
  font-size:var(--fs-base);color:var(--text-secondary);cursor:pointer;user-select:none} /* LAW 32.5: a 20px choice is a mouse control */
.dl-choice input{position:absolute;opacity:0;width:0;height:0}
.dl-choice .box{width:20px;height:20px;flex:0 0 20px;border-radius:var(--r-sm);border:2px solid var(--border-primary);background:var(--bg-hover);display:grid;place-items:center;transition:.15s}
.dl-choice .box.rd{border-radius:50%}
.dl-choice .box svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;opacity:0;transition:.15s}
.dl-choice .box .dot{width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:.15s}
.dl-choice input:checked + .box{background:var(--accent);border-color:var(--accent)}
.dl-choice input:checked + .box svg{opacity:1}
.dl-choice input:checked + .box .dot{transform:scale(1)}
.dl-choice input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
/* toggle switch */
.dl-switch{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--h-lg);min-width:var(--h-lg);cursor:pointer;user-select:none;font-size:var(--fs-base);color:var(--text-secondary)}
  /* the TRACK is 38x22 by design; the LABEL is what a thumb hits, so it carries the 44px floor */
.dl-switch input{position:absolute;opacity:0;width:0;height:0}
.dl-switch .tr{width:38px;height:22px;flex:0 0 38px;border-radius:var(--r-pill);background:var(--border-primary);position:relative;transition:.2s}
.dl-switch .tr::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.dl-switch input:checked + .tr{background:var(--accent)}
.dl-switch input:checked + .tr::after{transform:translateX(16px)}
.dl-switch input:focus-visible + .tr{outline:2px solid var(--accent);outline-offset:2px}
/* search field */
/* date/time inputs: iOS shadow chrome ignores text metrics — unstyled they
   render as tall empty shells (Elle 2026-08-31). Pinned to field height. */
.dl-input[type="date"],.dl-input[type="time"],.dl-input[type="datetime-local"]{
  -webkit-appearance:none;appearance:none;height:var(--h-md);min-height:var(--h-md);
  display:flex;align-items:center;line-height:1.2}
.dl-input::-webkit-date-and-time-value{text-align:left;margin:0}
.dl-searchfield{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-md);background:var(--bg-hover);border:1px solid var(--border)}
.dl-searchfield svg{width:var(--ic-sm);height:var(--ic-sm);stroke:var(--text-muted);fill:none;stroke-width:1.8;flex:0 0 auto}
.dl-searchfield input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-family:var(--font-body);font-size:var(--fs-base);color:var(--text-primary);caret-color:var(--accent)}
/* LEGACY DE-LEAK (Elle 2026-09-01, the double focus ring): dialed-theme.css
   still styles bare input/input:focus (border + radius + focus shadow) on the
   8 pages that load it, painting a SECOND rounded ring INSIDE the book field.
   The component seals its input against element-selector leaks outright. */
.dl-searchfield input,.dl-searchfield input:focus{border:0 !important;box-shadow:none !important;
  outline:none !important;padding:0 !important;background:transparent !important;width:auto !important}
.dl-searchfield input::placeholder{color:var(--text-muted)}
.dl-searchfield:focus-within{border-color:var(--accent);background:var(--bg-card)}
/* inline alert/banner */
.dl-alert{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-sm);border:1px solid var(--border)}
.dl-alert svg{width:var(--ic-md);height:var(--ic-md);flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8}
/* headline ABOVE explanation. Side by side, "Microsoft refused the send."
   wrapped into a narrow column next to the sentence explaining it, and one
   message read as two. */
.dl-alert b{display:block;font-weight:var(--fw-semibold);margin-bottom:2px}
.dl-alert b + span{display:block}
.dl-alert:has(b){flex-direction:column;align-items:stretch}
.dl-alert:has(b) svg{margin-bottom:var(--sp-1)}
.dl-alert.dl-ok{background:var(--success-bg);color:var(--success-ink);border-color:transparent}
.dl-alert.dl-warn{background:var(--warning-bg);color:var(--warning-ink);border-color:transparent}
.dl-alert.dl-bad{background:var(--danger-bg);color:var(--danger-ink);border-color:transparent}
.dl-alert.dl-info{background:color-mix(in oklab,var(--teal),transparent 90%);
  border-color:color-mix(in oklab,var(--teal),transparent 75%);color:var(--teal-ink)}
/* progress bar */
.dl-progress{height:8px;border-radius:var(--r-pill);background:var(--bg-hover);overflow:hidden}
.dl-progress > i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
/* avatar */
.dl-avatar{width:var(--h-md);height:var(--h-md);border-radius:50%;display:grid;place-items:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#fff;
  background:linear-gradient(145deg,var(--deep),var(--accent));box-shadow:0 0 0 2px var(--bg-card)}
/* role-coded monograms (atlas chip 9) — the circle's color says WHO this is.
   Book families only: admin=accent, team=teal, client=success, buyer=warning,
   prospect=info. Ink comes from each family's calibrated -ink/on-* pair (the
   AA-designed text-on-wash partners), never a re-derived hex. The wash is the
   family's -bg layered over the card surface so it stays opaque on glass. */
.dl-avatar[data-role="admin"]{background:var(--btn-primary-bg);color:var(--on-accent)}
.dl-avatar[data-role="team"]{background:linear-gradient(color-mix(in oklab,var(--teal) 16%,transparent),color-mix(in oklab,var(--teal) 16%,transparent)) var(--bg-card);color:var(--teal-ink);
  box-shadow:0 0 0 2px var(--bg-card),inset 0 0 0 1px color-mix(in oklab,var(--teal) 40%,transparent)}
.dl-avatar[data-role="client"]{background:linear-gradient(var(--success-bg),var(--success-bg)) var(--bg-card);color:var(--success-ink);
  box-shadow:0 0 0 2px var(--bg-card),inset 0 0 0 1px color-mix(in oklab,var(--success) 40%,transparent)}
.dl-avatar[data-role="buyer"]{background:linear-gradient(var(--warning-bg),var(--warning-bg)) var(--bg-card);color:var(--warning-ink);
  box-shadow:0 0 0 2px var(--bg-card),inset 0 0 0 1px color-mix(in oklab,var(--warning) 40%,transparent)}
.dl-avatar[data-role="prospect"]{background:linear-gradient(var(--info-bg),var(--info-bg)) var(--bg-card);color:var(--info-ink);
  box-shadow:0 0 0 2px var(--bg-card),inset 0 0 0 1px color-mix(in oklab,var(--info) 40%,transparent)}
/* tabs */
/* U35 · CHIP RAIL — ONE horizontal rail for chips / tabs / segments that must
   never wrap ragged or clip silently (Apple bench 08-23, defect class 05:
   eight pages shipped bespoke rows that clipped mid-glyph at 375px, active
   states born half-offscreen). Children keep their own look; the rail owns
   overflow. At narrow widths an edge fade says "there is more" — the
   affordance every clipped row was missing. */
/* LAW 46.1/49 (Elle 2026-08-29, "containers are cut off — this is illegal"):
   a hidden-scrollbar rail reads as CLIPPED on a phone. Chips and tabs WRAP;
   no undiscoverable sideways scroll. */
@media (max-width:640px){
/* same law for segmented tab rails — six segments in 390px is a clip.
   Chips COMPACT first so one row usually holds them (Elle 2026-08-29,
   "one row"); wrap stays as the honest fallback, never a hidden clip. */
.dl-tabs{flex-wrap:wrap}
/* compaction rides on tokens the chip and tab rules read (--dl-chip-fs,
   --dl-chip-px), so no later base rule can outrank it: the selector version
   of this line (.dl-chips>*) lost to .dl-filter for a week and never applied */
.dl-tabs,.dl-chips{--dl-chip-fs:var(--fs-xs);--dl-chip-px:var(--sp-2)}
.dl-tabs{gap:0}
.dl-tabs .dl-cnt,.dl-chips .dl-cnt{font-size:var(--fs-xs);margin-left:2px}
/* THE COUNTER LAW (Elle 2026-08-29, "the dashboard counters aren't in
   bubbles"): on a phone a stat NEVER wears a card. Any grid of stat cards
   collapses to the dashboard's bare-numerals strip — one book pattern. */
.dl-grid:has(> .dl-card .dl-stat){display:flex;flex-wrap:nowrap;gap:var(--sp-4);margin-bottom:var(--sp-4);
  overflow-x:auto;scrollbar-width:thin;
  scrollbar-color:color-mix(in oklab,var(--accent),transparent 55%) transparent}
.dl-grid:has(> .dl-card .dl-stat)::-webkit-scrollbar{height:4px}
.dl-grid:has(> .dl-card .dl-stat)::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--accent),transparent 55%);border-radius:99px}
.dl-grid > .dl-card:has(.dl-stat){background:none;border:0;box-shadow:none;
  /* flex-shrink 0 is load-bearing: shrinkable cells under nowrap labels clipped
     every label mid-word ("EMAILABLE ADDR…") instead of letting the strip
     scroll (2026-09-02 sweep, costco-marketing) */
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;flex:0 0 auto;min-width:0;border-radius:0}
.dl-grid > .dl-card:has(.dl-stat) .dl-help{display:none}
.dl-grid > .dl-card:has(.dl-stat) .dl-stat{font-size:var(--fs-xl);display:block}
.dl-grid > .dl-card:has(.dl-stat) .dl-stat-k{display:block;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:2px;white-space:nowrap}
/* page-purpose helper copy is a desktop refinement; the phone stays tight */
.dl-ph .dl-help{display:none}
/* the opaque ladder for the book's cards on phones: iOS silently drops
   backdrop blur inside the content frame, so the 12%-alpha surface was a
   window onto the mesh — cards read washed/cut at the edges. And every card
   CLOSES on all four sides: a real hairline + even soft shadow (the 7%
   card-line vanished on cream — "the right side is cut off"). */
.dl-card{background:var(--bg-card-solid,var(--surface));backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid color-mix(in oklab, var(--deep, #2D2438), transparent 84%);
  box-shadow:0 1px 2px color-mix(in oklab, var(--deep, #2D2438), transparent 92%),
             0 6px 20px -12px color-mix(in oklab, var(--deep, #2D2438), transparent 80%)}}
/* a tab strip WRAPS when it must (same rule as the chip group): compact first, never a hidden sideways scroll */
.dl-tabs{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:2px;padding:2px;border-radius:var(--r-md);background:none;border:0}
/* The SELECTED tab still carries a surface, because that is the state. The
   track behind the unselected ones does not need one. */
.dl-tabs button{min-height:44px;border:0;background:transparent;color:var(--text-secondary);/* an unselected tab is still a destination you can read and reach */font:inherit;font-size:var(--dl-chip-fs,var(--fs-sm));font-weight:var(--fw-semibold);padding:var(--sp-1) var(--dl-chip-px,var(--sp-3));border-radius:var(--r-sm);cursor:pointer;transition:.15s}
.dl-tabs button[aria-selected="true"]{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--el-1)}
/* APP ICON — the pearl-orb chrome on an iOS squircle */
.dl-appicon{position:relative;border-radius:22.37%;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 32% 24%, #fff 0%, rgba(255,255,255,.55) 14%, rgba(255,255,255,0) 46%),
    conic-gradient(from 210deg at 50% 50%,
      color-mix(in oklab,var(--t1-ink),#fff 40%),color-mix(in oklab,var(--t2-ink),#fff 38%),
      color-mix(in oklab,var(--t3-ink),#fff 40%),color-mix(in oklab,var(--accent),#fff 36%),
      color-mix(in oklab,var(--t1-ink),#fff 40%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 -8px 20px -8px rgba(0,0,0,.35),0 10px 30px -8px rgba(0,0,0,.4)}
.dl-appicon .g{font-family:var(--font-display);font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35);line-height:1}

/* ─────────────────────────── CARDS + GRID ──────────────────────────────── */
/* LAW D15: a group header EARNS ITS AIR — sp-6 above (separation from the
   previous group's fields), sp-4 below (set-off from its own). Zero top
   margin here was why every ALL-CAPS group rule sat flush on the textarea
   above it, on every page that composes sections (Elle 2026-08-23). */
.dl-sectionbar{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-6) 2px var(--sp-4)}
.dl-sectionbar:first-child{margin-top:0}
.dl-sectionbar h2{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary);
  white-space:nowrap /* section titles are short by design — "CALL NOTES" breaking mid-title against its own hairline reads broken (2026-09-03 eyes) */}
.dl-sectionbar .dl-line{flex:1;height:1px;background:var(--border)}
/* A SECTION THAT FOLDS (Elle 2026-09-05, the roster: "prospect and terminated should be
   able to collapse"; Finder groups, Mail's Show / Hide). Native details/summary so the
   fold is keyboard- and screen-reader-real; the summary IS the section bar, with the
   book's chevron; the open state is the element's own [open]. Tap target 44px. */
.dl-section > summary{list-style:none;cursor:pointer;min-height:var(--h-lg);user-select:none}
.dl-section > summary::-webkit-details-marker{display:none}
.dl-section > summary::after{content:'';flex:0 0 auto;width:9px;height:9px;margin-left:var(--sp-1);
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(-45deg) translateY(1px);transition:transform var(--t-fast)}
.dl-section[open] > summary::after{transform:rotate(45deg) translateY(-2px)}
.dl-section > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.dl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-4)}
/* Glass — clean frosted pane matching the approved mock: pure-white fill,
   subtle dark hairline, crisp white inset top-rim, wide soft float shadow. */
/* THE LIQUID GLASS MATERIAL (Elle 2026-09-23: "i need the liquid glass on desktop and mobile"): ONE recipe for every
   card, tile and sheet in a frame, the same at every width. The frame cannot blur the shell's mesh across the
   document edge (iOS drops it; 09-15 P0: the page bled through sheets as blobs), so the glass is built from what
   renders everywhere: the translucent pearl fill over the mesh, a specular sheen falling from the top-left, a lit top
   rim and a soft contact shadow. The hairline stays, so no edge vanishes on cream (08-29 "the right side is cut off"). */
:root{
  --lg-fill:var(--surface);
  --lg-fill-tile:color-mix(in oklab,var(--surface),transparent 28%);
  --lg-sheen:linear-gradient(160deg,color-mix(in oklab,#fff,transparent 42%) 0%,color-mix(in oklab,#fff,transparent 88%) 38%,transparent 62%);
  --lg-rim:inset 0 1px 0 0 color-mix(in oklab,#fff,transparent 8%),inset 0 0 0 1px color-mix(in oklab,#fff,transparent 70%);
  --lg-drop:0 1px 2px color-mix(in oklab,var(--deep,#2D2438),transparent 93%),0 10px 28px -16px color-mix(in oklab,var(--deep,#2D2438),transparent 78%)}
:root[data-tone="dark"]{
  --lg-sheen:linear-gradient(160deg,color-mix(in oklab,#fff,transparent 90%) 0%,transparent 45%);
  --lg-rim:inset 0 1px 0 0 color-mix(in oklab,#fff,transparent 88%),inset 0 0 0 1px color-mix(in oklab,#fff,transparent 94%);
  --lg-drop:0 10px 26px -14px rgba(0,0,0,.5)}
.dl-card{position:relative;grid-column:span 4;border-radius:var(--r-2xl);padding:var(--sp-4);
  background:var(--lg-sheen),var(--lg-fill);border:1px solid var(--card-line);
  box-shadow:var(--lg-rim),var(--lg-drop);
  display:flex;flex-direction:column;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}

/* HOVER IS FOR THINGS YOU CAN CLICK (Elle 2026-08-06: "theres a weird background
   box that appears when hovering inside the sections"). This lifted EVERY card
   and painted an 80-90px shadow under it, so moving the pointer across a page of
   read-only content cards made boxes rise and fall for no reason — and on a
   touch device the lift never resolves at all. Scoped to cards that actually do
   something, and the lift is a fraction of what it was. */
:is(a,button,[role="button"]).dl-card:hover,
.dl-card[onclick]:hover,.dl-stat-act:hover{transform:translateY(-1px);
  box-shadow:0 12px 28px -18px rgba(45,36,56,.34), inset 0 1px 0 0 rgba(255,255,255,.95)}
:root[data-tone="dark"] :is(a,button,[role="button"]).dl-card:hover,
:root[data-tone="dark"] .dl-card[onclick]:hover,
:root[data-tone="dark"] .dl-stat-act:hover{
  box-shadow:0 14px 32px -18px rgba(0,0,0,.62), inset 0 1px 0 0 rgba(255,255,255,.10)}

.dl-card.dl-span6{grid-column:span 6}.dl-card.dl-span3{grid-column:span 3}.dl-card.dl-span12{grid-column:span 12}
/* --- THE CARD MEDIA TILE (item cards, file cards) ------------------------
   A card's picture band: fixed height, the book's radius, the accent wash
   behind an image-less item, status tags and the ⋯ verb ride its corners.
   Was inline paint in item-components.js (LAW 23); one rule, every face. */
.dl-card-media{position:relative;height:132px;border-radius:var(--r-md);overflow:hidden;display:grid;place-items:center;
  background:color-mix(in oklab,var(--accent),transparent 93%);margin-bottom:var(--sp-3)}
.dl-card-media img,.dl-card-media canvas,.dl-card-media > div{width:100%;height:100%;object-fit:cover;display:block}
/* a selectable card's chosen state is an attribute the sheet paints, not an inline outline */
.dl-card[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}
.dl-card-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.dl-card-head h3{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:var(--tr-snug);color:var(--text-primary)}
/* 11px, not 10px: LAW 32.7 floors RENDERED metadata at 11px, and these two
   are the most-rendered small components in the estate. --fs-2xs stays for
   non-text uses. Same fix already applied to .dl-pact-k and .dl-cp-lbl. */
.dl-badge{font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--danger-bg);color:var(--danger-ink)}
.dl-badge.dl-n{background:var(--bg-hover);color:var(--text-muted)}
/* Severity variant. The base badge is danger-toned, so critical and high were
   painting identically and the difference between them stopped reading. One
   definition, because two surfaces now show priority (queue + Today). */
.dl-badge[data-pri="high"]{background:var(--warning-bg);color:var(--warning-ink)}
.dl-badge[data-pri="medium"],.dl-badge[data-pri="low"]{background:var(--bg-hover);color:var(--text-muted)}
.dl-more{margin-left:auto;color:var(--text-secondary);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer}
.dl-more:hover{color:var(--accent)}
.dl-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0}
.dl-row + .dl-row{border-top:1px solid var(--card-line)}
.dl-pip{width:var(--sp-8);height:var(--sp-8);flex:0 0 var(--sp-8);border-radius:var(--r-md);display:grid;place-items:center;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border)}
.dl-pip.dl-dark{background:var(--text-primary);color:var(--bg-card);border-color:transparent}
.dl-m{flex:1;min-width:0}
.dl-m b{display:block;font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-m i{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-tag{font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border);white-space:nowrap}
.dl-tag.dl-ok{background:var(--success-bg);color:var(--success-ink);border-color:transparent}
.dl-tag.dl-warn{background:var(--warning-bg);color:var(--warning-ink);border-color:transparent}
.dl-tag.dl-bad{background:var(--danger-bg);color:var(--danger-ink);border-color:transparent}
.dl-stat{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:var(--fw-semibold);letter-spacing:var(--tr-tight);line-height:1;color:var(--text-primary)}
/* the caption is usable as a class as well as a nested <small>: legacy markup
   writes stat-label as a sibling, not a child, and rewriting every one of
   those 165 usages into a nesting is work with no payoff. */
.dl-stat small,.dl-stat-k{display:block;font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted);margin-top:var(--sp-2)}
.dl-track{height:7px;border-radius:var(--r-pill);background:var(--bg-hover);overflow:hidden;margin-top:var(--sp-2)}
.dl-track > i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}

/* ─────────────────────────── FEEDBACK (U17) ───────────────────────────── */
/* U36 · An empty state OWNS its canvas (Apple bench 08-23, class 07: eleven
   pages ended 40-70% up the viewport with raw mesh below — the ambient ground
   is beautiful, it is not a substitute for composition). The component now
   claims real vertical space and centres its content in it; a page that
   genuinely wants a compact empty row opts out with .dl-empty--compact. */
.dl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--text-muted);min-height:clamp(280px,44vh,560px)}
.dl-empty--compact{min-height:0;justify-content:flex-start}
.dl-empty svg{width:28px;height:28px;stroke:var(--text-tertiary);fill:none;stroke-width:1.6}
.dl-empty p,.dl-empty-t{font-size:var(--fs-base);color:var(--text-secondary);max-width:42ch}
.dl-empty svg,.dl-empty-ic{width:28px;height:28px;flex:0 0 auto}
.dl-empty-ic{display:grid;place-items:center;color:var(--text-tertiary)}
/* A good empty state offers the next step. One primary action, sitting a full
   step below the sentence so it reads as the answer to it rather than as part
   of the sentence. */
.dl-empty .dl-btn{margin-top:var(--sp-2)}

/* --- LOADING · a spinner, once ----------------------------------------
   66 usages across 28 pages under two names — loading-spinner and spinner —
   and the design book had only a shimmer skeleton, which answers a different
   question. A skeleton says "content is coming and it will look like this";
   a spinner says "something is happening and I cannot tell you how long".
   Both are honest; they are not interchangeable. */
.dl-spinner{display:inline-block;width:var(--ic-md);height:var(--ic-md);flex:0 0 auto;
  border:2px solid color-mix(in oklab,var(--text-primary),transparent 78%);
  border-top-color:var(--accent);border-radius:50%;
  /* inside a button the spinner is part of the LABEL, so it takes the
     button's ink. On a filled button the page accent washed out. */
  animation:dlSpin .7s linear infinite}
.dl-spinner-lg{width:var(--sp-8);height:var(--sp-8);border-width:3px}

/* --- FILE PREVIEW (the one preview, on the one chassis) --------------------
   FileCardGrid.openPreview is the single file preview (LAW 36) and it opens
   in a DialedModal (LAW 43): the chassis owns the scrim, the pinned ✕, ESC,
   the scroll lock. These rules size the document inside it and paint the
   viewer from tokens; the engine carries no colours (2026-09-05). The
   wrapper declares its height up front because the chassis freezes a
   modal's height at open, before a document has streamed in. */
.dl-preview{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;
  /* the chassis top bar, footer row and body padding take ~224px on desktop; the
     phone sheet's chrome is smaller (measured, 2026-09-05) */
  height:calc(100dvh - var(--sp-16) - var(--sp-16) - var(--sp-16) - var(--sp-8))}
.dl-preview-body{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dl-preview-scroll{height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  border-radius:var(--r-md);background:color-mix(in oklab,var(--deep,#2D2438),transparent 88%)}
.dl-preview-img{display:flex;align-items:center;justify-content:center;touch-action:none}
.dl-preview-doc{padding:var(--sp-4)}
.dl-preview-image{max-width:100%;max-height:100%;border-radius:var(--r-md);box-shadow:var(--el-3);display:block}
.dl-preview-page{background:transparent;border-radius:0}   /* X9 (Elle 2026-09-12, "the file has at least 2 backgrounds behind"): the stage is the ONE tone behind a page; the page slot draws nothing of its own */
.dl-preview-canvas{box-shadow:var(--el-3);border-radius:0;display:block}
/* min-width:0 (item 70, 2026-09-15): the paper is a flex item; its default min-width:auto let a 3,000 px sheet size
   the paper instead of the sheet's own scroll box, and the body's overflow:hidden cut every column past the box */
.dl-preview-paper{height:100%;width:100%;min-width:0;max-width:100%;background:var(--bg-card-solid,var(--surface));border-radius:var(--r-md);overflow:hidden}
.dl-preview-foot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0;width:100%}
.dl-preview-name{margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-preview-actions{display:inline-flex;gap:var(--sp-2);align-items:center}
.dl-zoombar{display:inline-flex;gap:var(--sp-1);align-items:center}
/* an embedded engine (the file-manager picker) fills the same document box */
.dl-preview-frame{flex:1 1 auto;min-height:0;width:100%;border:0;display:block;border-radius:var(--r-md);background:var(--bg-card-solid,var(--surface))}
/* on the phone sheet the footer rides the scroll under the document (U41), so
   the document leaves it room instead of pushing it under the fold */
@media (max-width:768px){.dl-preview{height:calc(100dvh - var(--sp-16) - var(--sp-16) - var(--sp-16) - var(--sp-16) - var(--sp-8))}.dl-preview-name{flex:1 1 100%}}
/* a document box with no footer (the file-manager picker) keeps that room for itself */
.dl-preview-nofoot{height:calc(100dvh - var(--sp-16) - var(--sp-16) - var(--sp-12))}
@media (max-width:768px){.dl-preview-nofoot{height:calc(100dvh - var(--sp-16) - var(--sp-16) - var(--sp-12))}}
.dl-btn .dl-spinner{border-color:color-mix(in oklab,currentColor,transparent 70%);border-top-color:currentColor}
@keyframes dlSpin{to{transform:rotate(360deg)}}
/* LAW 10: a spinner that cannot spin still has to say something is happening,
   so it pulses instead of rotating. */
@media (prefers-reduced-motion:reduce){
  .dl-spinner{animation:dlPulse 1.4s ease-in-out infinite}
  .dl-skeleton{animation:dlPulse 1.6s ease-in-out infinite}
}
@keyframes dlPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* the whole-surface loading state: a spinner with a sentence saying WHAT is
   loading. "Loading…" alone tells the operator nothing they did not know. */
.dl-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);padding:var(--sp-8) var(--sp-4);text-align:center;min-height:calc(var(--sp-16) * 2)}
.dl-loading p{font-size:var(--fs-sm);color:var(--text-secondary)}
/* --bg-hover → --bg-elevated is almost no travel on a light ground, so the
   shimmer was invisible in eleven of the seventeen skins. Mixing against the
   INK gives the same visible movement whichever tone is underneath. */
/* Progress ring (grown 2026-08-01, portal/profile needed it — atlas chip 69).
   Pure SVG + tokens: page JS sets stroke-dasharray on .fg, never a colour. */
.dl-ring{position:relative;width:72px;height:72px;flex:0 0 auto}
.dl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dl-ring .bg{fill:none;stroke:color-mix(in oklab,var(--text-primary),transparent 86%);stroke-width:6}
.dl-ring .fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .4s ease}
.dl-ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.dl-ring-txt b{font-family:var(--font-display);font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text-primary);line-height:1}
.dl-ring-txt small{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;color:var(--text-secondary)}
.dl-skeleton{border-radius:var(--r-md);background:linear-gradient(90deg,color-mix(in oklab,var(--text-primary),transparent 92%) 25%,color-mix(in oklab,var(--text-primary),transparent 84%) 50%,color-mix(in oklab,var(--text-primary),transparent 92%) 75%);background-size:200% 100%;animation:dlShimmer 1.4s ease infinite}
@keyframes dlShimmer{to{background-position:-200% 0}}
.dl-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(74px + var(--sp-4) + env(safe-area-inset-bottom));z-index:800;display:flex;flex-direction:column;gap:var(--sp-2);pointer-events:none}
.dl-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--el-2);color:var(--text-primary);font-size:var(--fs-base);font-weight:var(--fw-medium)}
.dl-toast.dl-ok{border-left:3px solid var(--success)} .dl-toast.dl-bad{border-left:3px solid var(--danger)}

/* ─────────────────────────── TABLE (U18) ──────────────────────────────── */
/* max-width is what makes the wrap CLIP: without it the table sizes the wrap to
   its own intrinsic width (measured 724px in a 375 viewport) and scrolls nothing */
.dl-tablewrap{max-width:100%;overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--card-line);background:var(--surface);backdrop-filter:blur(20px)}
/* FOUR ROUND CORNERS, ALWAYS (Elle 2026-09-12: "every section that has round
   corners MUST show round corners on all 4, platform wide"). A table flushed
   into a rounded card (padding:0; overflow:hidden) squared its bottom corners
   in Safari: the wrap's backdrop-filter makes a composited layer, and WebKit
   does not clip a composited child to an ancestor's border-radius. So a wrap
   that sits directly in a card drops the blur it never needed (the card is
   already solid) and inherits the card's radius so it clips ITSELF; and the
   last row never draws a hard line along a rounded edge. */
.dl-card > .dl-tablewrap{backdrop-filter:none;-webkit-backdrop-filter:none}
.dl-card > .dl-tablewrap:last-child,.dl-card > .dl-tablewrap:has(+ :empty:last-child){border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.dl-tablewrap .dl-table tbody tr:last-child td{border-bottom:0}
.dl-table{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.dl-table th{position:sticky;top:0;text-align:left;font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted);padding:var(--sp-3) var(--sp-4);background:var(--bg-elevated);border-bottom:1px solid var(--card-line)}
.dl-table td{padding:var(--sp-3) var(--sp-4);color:var(--text-secondary);border-bottom:1px solid var(--card-line)}
.dl-table td.dl-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-primary)}
/* a column header sits over its column: a numeric header left-aligned above
   right-aligned figures reads as a different column */
.dl-table th.dl-num{text-align:right}
.dl-table tbody tr:hover{background:var(--bg-hover)}

/* ─────────────────────────── PEARL ORB ────────────────────────────────── */
.dl-pearl{position:relative;border-radius:50%;display:grid;place-items:center;
  background:
    radial-gradient(circle at 34% 26%,#fff 0%,rgba(255,255,255,.7) 12%,rgba(255,255,255,0) 46%),
    conic-gradient(from 210deg at 50% 50%,
      color-mix(in oklab,var(--t1-ink),#fff 76%),color-mix(in oklab,var(--t2-ink),#fff 74%),
      color-mix(in oklab,var(--t3-ink),#fff 75%),color-mix(in oklab,var(--accent),#fff 72%),
      color-mix(in oklab,var(--t1-ink),#fff 76%)),#FDFCFA;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -3px 7px -4px rgba(0,0,0,.22),0 2px 6px -2px rgba(0,0,0,.22)}
:root[data-tone="dark"] .dl-pearl{
  background:
    radial-gradient(circle at 34% 26%,#fff 0%,rgba(255,255,255,.75) 12%,rgba(255,255,255,0) 46%),
    conic-gradient(from 210deg at 50% 50%,
      color-mix(in oklab,var(--t1-ink),#fff 58%),color-mix(in oklab,var(--t2-ink),#fff 56%),
      color-mix(in oklab,var(--t3-ink),#fff 57%),color-mix(in oklab,var(--accent),#fff 54%),
      color-mix(in oklab,var(--t1-ink),#fff 58%)),#FDFCFA;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -3px 7px -4px rgba(0,0,0,.3),0 2px 8px -2px rgba(0,0,0,.45)}
.dl-pearl .dl-glyph{font-family:var(--font-display);font-weight:var(--fw-bold);color:#2D2438;text-shadow:0 1px 0 rgba(255,255,255,.7);line-height:1;letter-spacing:var(--tr-snug);position:relative;z-index:1}

/* ─────────────────────────── MENUS + DROPDOWNS ─────────────────────────── */
/* ONE chassis, two patterns: a select-dropdown open state and an overflow /
   context menu. Panels are OPAQUE by contract — a translucent panel over the
   mesh samples mid-tone and drops menu text below AA. Never add a
   backdrop-filter here. */
.dl-select-trigger{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-3);border-radius:var(--r-md);
  border:1px solid color-mix(in oklab,var(--accent),transparent 45%);background:var(--pearl-white);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-medium);cursor:pointer;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 84%)}
.dl-select-trigger .dl-chev{margin-left:auto;transition:var(--t-base);color:var(--text-muted)}
.dl-select-trigger[aria-expanded="true"] .dl-chev{transform:rotate(180deg)}
.dl-kebab{width:var(--h-lg);height:var(--h-lg);border-radius:50%;border:1px solid var(--card-line);background:var(--glass-hi);
  color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;font-size:var(--fs-lg);letter-spacing:1px}
.dl-menu{border-radius:var(--r-md);overflow:hidden;padding:var(--sp-1);
  background:var(--pearl-white);border:1px solid var(--card-line);
  box-shadow:0 22px 54px -8px color-mix(in oklab,var(--deep),transparent 36%),inset 0 1px 0 0 var(--hi)}
.dl-menu.dl-right{margin-left:auto;width:210px}
.dl-menu-head{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);padding:var(--sp-2) var(--sp-3) var(--sp-1)}
.dl-menu-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:8px var(--sp-3);border:0;background:none;cursor:pointer;
  border-radius:var(--r-sm);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--text-primary);text-align:left;transition:background var(--t-fast),color var(--t-fast)}
.dl-menu-item:hover{background:var(--bg-hover)}
/* a menu row with a second line (a choice sheet: title + what it means) */
.dl-menu-list{display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-menu-item-lg{min-height:var(--h-lg);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);text-align:left;font:inherit;color:var(--text-primary)}
.dl-menu-item-lg svg{width:var(--ic-md);height:var(--ic-md);flex:0 0 var(--ic-md)}
.dl-menu-item-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-menu-item-t strong{font-weight:var(--fw-semibold)}
.dl-menu-item svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:var(--text-secondary);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dl-menu-item .dl-tick{margin-left:auto;color:var(--accent-ink);display:flex}
.dl-menu-item .dl-tick svg{stroke:var(--accent-ink);width:16px;height:16px}
.dl-menu-item[aria-selected="true"]{background:color-mix(in oklab,var(--accent),transparent 90%);color:var(--accent-ink);font-weight:var(--fw-semibold)}
.dl-menu-item[aria-selected="true"] svg{stroke:var(--accent-ink)}
.dl-menu-item.dl-danger{color:var(--danger-ink)}
.dl-menu-item.dl-danger svg{stroke:var(--danger-ink)}
.dl-menu-div{height:1px;background:var(--card-line);margin:var(--sp-1) var(--sp-2)}
.dl-menu-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}

/* ─────────────────────────── TOOLTIP ───────────────────────────────────── */
/* Dark glass pill above its anchor, with an arrow. Per LAW 32.4 anything
   conveying critical context needs a tappable equivalent — a tooltip is
   enhancement, never the only path to the information. */
.dl-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  padding:8px var(--sp-3);border-radius:var(--r-sm);white-space:nowrap;
  background:color-mix(in oklab,var(--deep),transparent 6%);color:var(--text-on-dark);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.01em;
  box-shadow:0 12px 30px -4px color-mix(in oklab,var(--deep),transparent 40%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dl-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:color-mix(in oklab,var(--deep),transparent 6%)}
.dl-tip.dl-rich{white-space:normal;width:220px;text-align:left;padding:var(--sp-3);border-radius:var(--r-md)}
.dl-tip.dl-rich b{display:block;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:4px}
.dl-tip.dl-rich span{display:block;font-weight:var(--fw-medium);color:color-mix(in oklab,var(--text-on-dark),transparent 28%);
  line-height:var(--lh-body);font-size:var(--fs-xs)}
.dl-anchor{position:relative;display:flex;flex-direction:column;align-items:center}
/* ─────────────────────────── HINT (ⓘ) ─────────────────────────────────── */
/* js/dl-hint.js (Elle 2026-09-23: "hover to explain where necessary"): the
   sentence that used to sit under a number lives behind a small ⓘ. Hover on a
   desktop, tap on the phone. The ⓘ is 18px to the eye and 44px to a thumb. */
.dl-hint{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin:0 0 0 var(--sp-2);padding:0;
  vertical-align:middle;flex:0 0 auto;border-radius:50%;cursor:help;
  border:1px solid color-mix(in oklab,var(--text-muted),transparent 55%);background:color-mix(in oklab,var(--glass-hi,#fff),transparent 20%);
  color:var(--text-muted);font:italic var(--fw-bold) 11px/1 var(--font-display,Georgia,serif);letter-spacing:0;text-transform:none;
  transition:color .15s,border-color .15s,background .15s}
.dl-hint{z-index:1}  /* the thumb area rides above later positioned siblings (right and bottom lost to them) */
.dl-hint::before{content:'';position:absolute;inset:-14px}
/* (inset 14: WebKit measures it from inside the 1px border, so 13 left a 42px target) */
/* the legacy mobile-*.css blankets (button{min-height:44px;padding:12px 20px}) blew the ⓘ into a big circle on the
   phone (2026-09-23 audit): its box is its own, whatever width; the 44px thumb area is the ::before above */
.dl-hint,.dl-hint:hover,.dl-hint:active{width:18px !important;height:18px !important;min-width:0 !important;min-height:0 !important;
  max-width:18px !important;padding:0 !important;font-size:11px !important;line-height:1 !important;box-sizing:border-box !important;transform:none !important}
/* a label carrying an ⓘ sits on one line with it, so FOB and MEMBER PRICE keep one baseline */
.dl-label:has(> .dl-hint),h2:has(> .dl-hint),b:has(> .dl-hint){display:inline-flex;align-items:center;gap:var(--sp-2);min-height:18px}
.dl-label:has(> .dl-hint) > .dl-hint,b:has(> .dl-hint) > .dl-hint{margin:0}
.ic-program-hero .dl-label:has(> .dl-hint),.ic-program-tail .dl-label:has(> .dl-hint){display:flex}
.dl-hint:hover,.dl-hint[aria-expanded="true"],.dl-hint:focus-visible{color:var(--accent-ink,var(--accent));border-color:var(--accent);
  background:color-mix(in oklab,var(--accent),transparent 88%);outline:none}
.dl-hint-pop{position:fixed;z-index:2147483000;left:0;top:0;max-width:300px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md,12px);
  background:color-mix(in oklab,var(--deep,#2D2438),transparent 12%);color:var(--text-on-dark,#fff);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid color-mix(in oklab,#fff,transparent 82%);
  box-shadow:0 18px 40px -12px color-mix(in oklab,var(--deep,#2D2438),transparent 45%);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:var(--lh-body,1.5);letter-spacing:.005em;text-transform:none;text-align:left;
  opacity:0;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;pointer-events:none}
.dl-hint-pop.is-on{opacity:1;transform:none;pointer-events:auto}
.dl-hint-pop b{display:block;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:var(--sp-1)}
.dl-hint-pop span{display:block;color:color-mix(in oklab,var(--text-on-dark,#fff),transparent 12%)}
.dl-hint-pop::after{content:'';position:absolute;top:100%;left:var(--hint-arrow,50%);transform:translateX(-50%);
  border:6px solid transparent;border-top-color:color-mix(in oklab,var(--deep,#2D2438),transparent 12%)}
.dl-hint-pop.dl-hint-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:color-mix(in oklab,var(--deep,#2D2438),transparent 12%)}
@media (prefers-reduced-motion:reduce){.dl-hint-pop{transition:none}}

.dl-iconbtn-round{width:var(--h-lg);height:var(--h-lg);border-radius:50%;border:1px solid var(--card-line);background:var(--glass-hi);
  color:var(--text-secondary);display:grid;place-items:center;cursor:pointer}
.dl-iconbtn-round svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ─────────────────────── MODAL CHASSIS (LAW 42/43/44) ──────────────────── */
/* ONE dialog shell for every modal in the book. Seven mocks each carried a
   byte-identical copy of this block before it lived here — that duplication was
   the LAW 36 debt, not the modals themselves. A modal varies its SIZE and
   nothing else: set --dlg-w-n / --dlg-h-n (unitless px counts) on the element.
   Fixed by contract, never per-modal:
     • fixed height; the body is the ONLY scroll region (LAW 44)
     • the ✕ is 44px (--h-lg) and never scrolls out of reach (LAW 42)
     • footer: secondary left, primary right, every modal (LAW 42.2)
     • mobile keeps the desktop composition and scales it to fit (Elle
       2026-07-24). The zoom is DERIVED from the width against 351px of usable
       phone width — it was a hand-typed magic number in all seven copies. */
/* Scrim strength is per-modal content, not chassis: a small alert and a
   full-height compose do not want the same weight behind them. The IMPLEMENTATION
   is one (LAW 36); the value is a knob (--scrim-a / --scrim-blur). */
.dl-scrim{position:fixed;inset:0;z-index:1;background:color-mix(in oklab,var(--deep),transparent var(--scrim-a,58%));
  backdrop-filter:blur(var(--scrim-blur,4px));-webkit-backdrop-filter:blur(var(--scrim-blur,4px))}
/* re-pinned 2026-08-17 to the ratified ONE-MODAL geometry: SMART content-fitted
   height (floor 220, capped) — width stays a per-mock knob on the scale steps,
   per Elle's ruling that one width did not make sense (ONE-MODAL-GEOMETRY §6). */
.dl-dlg{--dlg-w-n:600;--dlg-h-n:760;
  position:relative;z-index:2;width:min(calc(var(--dlg-w-n) * 1px),var(--dlg-vw,94vw));height:auto;min-height:220px;max-height:min(calc(var(--dlg-h-n) * 1px),var(--dlg-vh,90dvh));
  display:flex;flex-direction:column;border-radius:var(--r-3xl);overflow:hidden;
  background:var(--card);border:1px solid var(--card-line);
  box-shadow:0 40px 100px -22px color-mix(in oklab,var(--deep),transparent 30%),0 0 0 1px color-mix(in oklab,var(--accent),transparent 82%),inset 0 1px 0 0 rgba(255,255,255,.9);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
:root[data-tone="dark"] .dl-dlg{box-shadow:0 46px 110px -28px rgba(0,0,0,.8),0 0 0 1px color-mix(in oklab,var(--accent),transparent 74%),inset 0 1px 0 0 rgba(255,255,255,.10)}
.dl-dlg::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--t1-ink),transparent 40%),color-mix(in oklab,var(--accent),transparent 30%),color-mix(in oklab,var(--t3-ink),transparent 40%),transparent)}
.dl-dlg.dl-danger::before{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--danger),transparent 40%),color-mix(in oklab,var(--danger),transparent 20%),color-mix(in oklab,var(--danger),transparent 40%),transparent)}
/* alert / confirm: content-sized and centred. A confirm never grows with input,
   so the fixed-height rule does not apply to it (LAW 44). */
.dl-dlg-alert{--dlg-w-n:420;height:auto;align-items:center;text-align:center;gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-6) var(--sp-5);border-radius:var(--r-2xl)}
.dl-dlg-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:var(--sp-1)}
.dl-dlg-icon svg{width:26px;height:26px;fill:none;stroke-width:2}
.dl-dlg-icon.dl-danger{background:var(--danger-bg);border:1px solid color-mix(in oklab,var(--danger),transparent 66%)}
.dl-dlg-icon.dl-danger svg{stroke:var(--danger-ink)}
.dl-dlg-icon.dl-confirm{background:color-mix(in oklab,var(--accent),transparent 86%);border:1px solid color-mix(in oklab,var(--accent),transparent 72%)}
.dl-dlg-icon.dl-confirm svg{stroke:var(--accent-ink)}
/* the chassis title nudges 1px to sit optically under an eyebrow; an alert has
   no eyebrow, so it sits flush */
.dl-dlg-alert .dl-dlg-title{margin-top:0}
.dl-dlg-msg{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-body);max-width:34ch}
.dl-dlg-actions{display:flex;gap:var(--sp-2);width:100%;margin-top:var(--sp-3)}
.dl-dlg-actions > button{flex:1;height:var(--h-lg);border-radius:var(--r-pill);font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2)}
.dl-dlg-cancel{border:1px solid var(--card-line);background:var(--glass-hi);color:var(--text-secondary)}
.dl-dlg-cancel:hover{background:var(--bg-hover)}
.dl-dlg-destroy{border:0;color:var(--on-danger);background:var(--btn-danger-bg);box-shadow:0 8px 22px -8px var(--danger),inset 0 1px 0 0 rgba(255,255,255,.35)}
.dl-dlg-destroy svg{width:var(--ic-sm);height:var(--ic-sm);stroke:var(--on-danger);fill:none;stroke-width:2}
/* header / body / footer */
.dl-dlg-head{flex:0 0 auto;display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--dlg-head-pad,var(--sp-5) var(--sp-5) var(--sp-4));border-bottom:1px solid var(--card-line)}
.dl-dlg-head.dl-mid{align-items:center}
.dl-dlg-eyebrow{font-family:var(--font-accent);font-style:italic;font-size:var(--fs-md);color:var(--teal-ink)}
.dl-dlg-title{font-family:var(--font-display);font-size:var(--dlg-title-size,var(--fs-2xl));font-weight:var(--fw-bold);letter-spacing:var(--tr-tight);margin-top:1px}
.dl-dlg-x{margin-left:auto;width:var(--h-lg);height:var(--h-lg);flex:0 0 var(--h-lg);border-radius:50%;border:1px solid var(--card-line);background:var(--glass-hi);color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;font-size:var(--fs-base);transition:.15s}
.dl-dlg-x:hover{background:var(--bg-hover);transform:rotate(90deg)}
.dl-dlg-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--dlg-body-pad,var(--sp-4) var(--sp-5) var(--sp-5));display:flex;flex-direction:column;gap:var(--dlg-body-gap,0)}
.dl-dlg-body::-webkit-scrollbar{width:8px}
.dl-dlg-body::-webkit-scrollbar-thumb{background:var(--card-line);border-radius:var(--r-pill)}
.dl-dlg-foot{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--dlg-foot-pad,var(--sp-4) var(--sp-5));border-top:1px solid var(--card-line);
  background:color-mix(in oklab,var(--card),var(--canvas) 30%)}
.dl-dlg-ghost{height:var(--h-lg);padding:0 var(--sp-4);border:1px solid var(--card-line);background:var(--glass-hi);border-radius:var(--r-pill);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer}
.dl-dlg-ghost.dl-ic{display:inline-flex;align-items:center;gap:8px} /* ghost carrying an icon */
.dl-dlg-soft{height:var(--h-lg);padding:0 var(--sp-4);border:1px solid color-mix(in oklab,var(--accent),transparent 60%);background:color-mix(in oklab,var(--accent),transparent 88%);border-radius:var(--r-pill);color:var(--accent-ink);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer}
.dl-dlg-primary{margin-left:auto;display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-5);border:0;cursor:pointer;border-radius:var(--r-pill);font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--on-accent);
  background:var(--btn-primary-bg);box-shadow:0 8px 22px -8px var(--accent),inset 0 1px 0 0 rgba(255,255,255,.4)}
.dl-dlg-primary svg{width:var(--ic-sm);height:var(--ic-sm);stroke:var(--on-accent);fill:none;stroke-width:2}
@media (max-width:480px){
  /* Mobile is NOT a scaled-down desktop. Shrinking a 620x760 composition to fit
     351px of width left it 340px tall on a 667px screen — half the display empty,
     and every glyph optically smaller than the rest of the OS. LAW 43 ("mobile =
     full-screen sheet"), LAW 46.7 (sheets fit above the tab bar) and LAW 49.3
     ("exactly 100dvh") all already said so. A content modal is a full-height
     sheet at real size. */
  .dl-dlg{zoom:1;width:100%;max-width:none;height:100dvh;border-radius:0;flex:1 1 auto}
  .dl-dlg-head{padding-top:calc(var(--sp-4) + env(safe-area-inset-top))}
  .dl-dlg-foot{padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom))}
  /* An alert is the exception: it asks one question, so it stays content-sized
     and centred. Full height would be a lie about how much there is to read. */
  .dl-dlg-alert{width:min(100%,420px);height:auto;flex:0 0 auto;border-radius:var(--r-2xl);
    padding-top:var(--sp-6)}
  .dl-dlg-alert .dl-dlg-head,.dl-dlg-alert .dl-dlg-foot{padding-top:0;padding-bottom:0}
}

/* ─────────────────────────── MOBILE ────────────────────────────────────── */
@media (max-width:900px){
  .dl-rail{display:none}
  /* The topbar must fit the phone. .dl-search carries min-width:300px, which
     forced the bar wider than 375 and pushed the icon buttons off-screen; the
     LAW 49 seal clipped it, so nothing failed — it just vanished. The crumb is
     redundant on phone (the tab bar already names the page), so it stands down
     and the field takes the room. */
  .dl-crumb{display:none}
  .dl-search{height:var(--h-lg);white-space:nowrap;overflow:hidden}
  /* ONE search bar per screen (Elle 2026-09-01, "isn't two search bars on one
     page stupid?"): on a page that carries its OWN list search, the global
     field collapses to a magnifier icon — Apple's compact-layout move. A tap
     expands it full-width and focuses; blur-empty collapses it back. */
  body[data-local-search] .dl-search:not(.gs-open){flex:0 0 var(--h-lg);width:var(--h-lg);cursor:pointer;
    margin-right:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md)}
  body[data-local-search] .dl-search:not(.gs-open) svg{left:50%;transform:translateX(-50%);opacity:1}
  body[data-local-search] .dl-search:not(.gs-open) input,
  body[data-local-search] .dl-search:not(.gs-open) .dl-kbd{opacity:0;pointer-events:none}
  body[data-local-search] .dl-search.gs-open{flex:1 1 auto;width:auto}
  .dl-search .dl-kbd,.dl-affix .dl-kbd{display:none}   /* no keyboard shortcut on a phone (affix-hosted hints too — help's Ctrl+K clipped the placeholder, 2026-09-02) */
  textarea{resize:none}   /* the desktop drag-grip is a dead glyph on touch (2026-09-02 sweep: help ticket + profile goals) */
  /* a section bar's tools WRAP under the title instead of being crushed beside it
     (task-manager's Open/Done stacked vertically in a sliver, 2026-09-02 sweep) */
  .dl-sectionbar{flex-wrap:wrap}
  .dl-sectionbar .dl-tabs{flex:0 1 auto;min-width:0}
  /* a FOLDING bar never wraps: the title yields (ellipsis) so the tag and the chevron stay on
     its line ("REGIONS AND PROGRAMS · 1 region · 1 program" left its chevron alone on the next
     line, the item sheet on a phone, 2026-09-14) */
  /* a bar that does not fold may wrap its title rather than push the page wide (2026-09-23 audit: Pulse's
     "CALL NOTES 1 NOT YET SHARED WITH YUMEARTH" ran to 417 of 390 and widened the panel 39px) */
  .dl-sectionbar:not(summary) > h2{white-space:normal;min-width:0;flex:0 1 auto;overflow-wrap:anywhere}
  summary.dl-sectionbar{flex-wrap:nowrap}
  summary.dl-sectionbar h2{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  summary.dl-sectionbar .dl-line{flex:1 1 var(--sp-3);min-width:var(--sp-3)}
  summary.dl-sectionbar .dl-tag{flex:0 0 auto;white-space:nowrap}

  /* Phone tap targets: 44px floor, no exceptions (LAW 32.5 / LAW 46). --h-md is
     40 and --h-sm is 32, which is fine on a mouse and wrong under a thumb. */
  .dl-btn,.dl-btn-sm{height:var(--h-lg)}
  .dl-iconbtn{width:var(--h-lg);height:var(--h-lg);flex:0 0 var(--h-lg)}
  .dl-chip{height:var(--h-lg);padding:0 var(--sp-4)}
  /* The ask-Pearl field stacks: on a 375 viewport the button was eating 112px
     and squeezing the prompt to 131px, so the text wrapped to five lines beside
     it. Text takes the full width, the button sits under it at full width. */
  .dl-prompt-field{flex-direction:column;align-items:stretch;gap:var(--sp-3);min-height:0}
  .dl-prompt-field .dl-btn{width:100%}
  .dl-shell{padding:var(--sp-5) var(--sp-4) calc(var(--tabbar-h) + var(--sp-5))}
  .dl-card,.dl-card.dl-span6,.dl-card.dl-span3,.dl-card.dl-span12{grid-column:span 12}
  .dl-hello{font-size:var(--fs-2xl)}
}
.dl-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:space-around;gap:2px;
  padding:var(--sp-2) var(--sp-2) calc(var(--sp-5) + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--border);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%)}
@media (max-width:900px){.dl-tabbar{display:flex}}
.dl-tabbar::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent),transparent 60%),transparent)}
/* scoped to the BOOK's own dl-tabbar (mock pages) — 2026-08-28: the bare
   selector leaked width/bottom into the injected #mobileTabBar handle and
   dragged its hit zone 170px-left-anchored (Elle's giant-box tap). */
.dl-tabbar .dl-nav-handle{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sp-1) + env(safe-area-inset-bottom));z-index:3;width:170px;height:16px;border:0;background:none;cursor:grab;display:grid;place-items:center;padding:0}
.dl-tabbar .dl-nav-handle i{display:block;width:96px;height:4px;border-radius:var(--r-pill);background:var(--text-muted);opacity:.34;transition:var(--t-base)}
.dl-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);flex:1;height:var(--h-lg);border:0;background:none;
  color:var(--text-secondary);font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);cursor:pointer;letter-spacing:var(--tr-snug)}
.dl-tab svg{width:var(--ic-xl);height:var(--ic-xl);stroke:currentColor;fill:none;stroke-width:1.8}
.dl-tab.dl-active{color:var(--text-primary)}
.dl-tab-pearl{position:relative;z-index:2}
.dl-tab-pearl .dl-pearl{width:42px;height:42px;transform:translateY(-12px);margin-bottom:-12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 4px var(--glass-hi),0 2px 8px -2px rgba(0,0,0,.3)}
.dl-tab-pearl .dl-glyph{font-size:var(--fs-lg)}

/* THE NAV SHEET IS MOBILE ONLY, MECHANICALLY (Elle 2026-08-05: "that should
   only be for mobile why is it in desktop layout with the rail in the
   background... make sure its ONLY FOR MOBILE!").
   It was only ever HIDDEN on desktop by being translated off-screen, which means
   it stayed in the layout, its scrim covered the whole desktop viewport at
   opacity 0, and anything that called open() would slide a phone sheet over a
   1440px page that already has a rail. Now it does not exist above 900px, so
   there is nothing to open and nothing to translate. The tab bar that launches
   it is already display:none above 900. */
@media (min-width:901px){ .dl-sheet, .dl-sheet-scrim{display:none !important} }
.dl-sheet-scrim{position:fixed;inset:0;z-index:74;background:color-mix(in oklab,var(--deep),transparent 55%);opacity:0;pointer-events:none;transition:opacity .34s var(--ease)}
.dl-sheet{position:fixed;left:0;right:0;bottom:0;z-index:75;height:calc(100% - var(--sp-6));display:flex;flex-direction:column;
  border-radius:var(--r-3xl) var(--r-3xl) 0 0;background:color-mix(in oklab,var(--canvas),#fff 42%);border:1px solid var(--border);border-bottom:0;
  box-shadow:var(--el-3);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  transform:translateY(calc(100% + var(--sp-2)));transition:transform var(--t-slow) var(--ease)}
:root[data-tone="dark"] .dl-sheet{background:color-mix(in oklab,var(--canvas),#fff 9%)}
.dl-open .dl-sheet{transform:translateY(0)}
.dl-open .dl-sheet-scrim{opacity:1;pointer-events:auto}
.dl-grabber{width:38px;height:4px;border-radius:var(--r-pill);background:var(--text-muted);opacity:.42;margin:var(--sp-2) auto var(--sp-1);flex:0 0 auto}
.dl-sheet-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-4) var(--sp-2);flex:0 0 auto}
.dl-sheet-title{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--tr-snug);padding-left:var(--sp-2);
  background:linear-gradient(90deg,var(--text-primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dl-sheet-x{margin-left:auto;width:var(--h-lg);height:var(--h-lg);flex:0 0 var(--h-lg);border:1px solid var(--border);border-radius:50%;background:var(--bg-hover);color:var(--text-secondary);font-size:var(--fs-base);cursor:pointer;display:grid;place-items:center}
.dl-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--sp-4) calc(var(--tabbar-h) + var(--sp-4));scrollbar-width:none}
.dl-sheet-body::-webkit-scrollbar{display:none}
.dl-dialsec{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;margin:var(--sp-4) 0 var(--sp-2)}
.dl-dialsec::after{content:'';flex:1;height:1px;background:currentColor;opacity:.22}
.dl-dialgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.dl-dialcard{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--card-line)}
.dl-dialcard .dl-ic{flex:0 0 var(--sp-8);width:var(--sp-8);height:var(--sp-8);border-radius:var(--r-md);display:grid;place-items:center}
.dl-dialcard .dl-ic svg{width:var(--ic-md);height:var(--ic-md);fill:none;stroke-width:1.8}
.dl-dialcard .dl-nm{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--text-primary)}
[data-tint="0"] .dl-dialsec{color:var(--t1-ink)} [data-tint="0"] .dl-ic{background:var(--t1-bg)} [data-tint="0"] .dl-ic svg{stroke:var(--t1-ink)}
[data-tint="1"] .dl-dialsec{color:var(--t2-ink)} [data-tint="1"] .dl-ic{background:var(--t2-bg)} [data-tint="1"] .dl-ic svg{stroke:var(--t2-ink)}
[data-tint="2"] .dl-dialsec{color:var(--t3-ink)} [data-tint="2"] .dl-ic{background:var(--t3-bg)} [data-tint="2"] .dl-ic svg{stroke:var(--t3-ink)}
.dl-dialcard .dl-ct{margin-left:auto;font-size:var(--fs-2xs);font-weight:var(--fw-bold);padding:2px var(--sp-2);border-radius:var(--r-pill);background:color-mix(in oklab,var(--accent),transparent 84%);color:var(--accent)}
.dl-dialsearch{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-4);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--card-line);color:var(--text-muted);font-size:var(--fs-base);margin-top:var(--sp-1)}
.dl-dialsearch svg{width:var(--ic-md);height:var(--ic-md);stroke:currentColor;fill:none;stroke-width:1.8}
.dl-dialchips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.dl-dialchip{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--bg-hover);border:1px solid var(--border);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-secondary)}

@media (max-width:1280px){.dl-card{grid-column:span 6}.dl-card.dl-span3{grid-column:span 6}}

/* --- REVIEW / ACTION-DETAIL MODAL ------------------------------ */
.dl-rv-chips{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap}
.dl-rv-badge{display:inline-flex;align-items:center;gap:8px;padding:4px var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.04em}
.dl-rv-pearl{color:var(--accent-ink);background:color-mix(in oklab,var(--accent),var(--pearl-white) 82%);border:1px solid color-mix(in oklab,var(--accent),transparent 74%)}
.dl-rv-pearl .dl-rv-orb{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 75%);box-shadow:0 0 8px -1px var(--accent)}
.dl-rv-conf{color:var(--teal-ink);background:color-mix(in oklab,var(--teal),transparent 86%);border:1px solid color-mix(in oklab,var(--teal),transparent 74%)}
.dl-rv-sec{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink);margin:var(--sp-1) 0 var(--sp-2)}
/* source email chip — collapsed, expandable (progressive disclosure) */
.dl-rv-src{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--glass-hi);border:1px solid var(--card-line);cursor:pointer;flex:0 0 auto}
.dl-rv-src .dl-rv-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:#fff;background:linear-gradient(145deg,var(--deep),var(--accent))}
.dl-rv-src .dl-rv-m{flex:1;min-width:0}
.dl-rv-src .dl-rv-m b{display:block;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-rv-src .dl-rv-m i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-rv-src .dl-rv-cv{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--teal-ink);white-space:nowrap}
/* the drafted reply — the primary content, grows */
.dl-rv-draft{flex:1 1 auto;margin-top:var(--sp-4);padding:var(--sp-4);border-radius:var(--r-lg);background:color-mix(in oklab,var(--card),var(--canvas) 25%);border:1px solid var(--card-line);
font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text-secondary)}
.dl-rv-draft b{color:var(--text-primary);font-weight:var(--fw-semibold)}
.dl-rv-meta{flex:0 0 auto;display:flex;gap:var(--sp-4);margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--text-muted)}
.dl-rv-meta span b{color:var(--text-secondary);font-weight:var(--fw-semibold)}

/* --- PURCHASE-ORDER DETAIL MODAL ------------------------------- */
.dl-po-metaline{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px}
.dl-po-pill{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.03em;margin-top:var(--sp-2);
color:var(--success-ink);background:var(--success-bg);border:1px solid color-mix(in oklab,var(--success),transparent 66%)}
.dl-po-pill .dl-po-dot{width:8px;height:8px;border-radius:50%;background:var(--success-ink)}
/* section card */
.dl-po-sec{padding:var(--sp-4);border-radius:var(--r-md);background:var(--glass-hi);border:1px solid var(--card-line)}
.dl-po-sec h4{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2)}
.dl-po-region{height:20px;padding:0 var(--sp-2);border-radius:var(--r-pill);background:color-mix(in oklab,var(--accent),transparent 82%);color:var(--text-primary);border:1px solid color-mix(in oklab,var(--accent),transparent 66%);font-size:var(--fs-2xs);font-weight:var(--fw-bold);display:inline-flex;align-items:center;letter-spacing:0}
/* kv grid */
.dl-po-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.dl-po-kv label{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--teal-ink);margin-bottom:var(--sp-1)}
.dl-po-kv .dl-po-v{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-po-subtle{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-body);margin-top:var(--sp-1)}
/* line-items table */
.dl-po-lxscroll{overflow-x:auto;border-radius:var(--r-sm)}
table.dl-po-lx{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.dl-po-lx th{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:0 var(--sp-2) var(--sp-2);border-bottom:1px solid var(--card-line);white-space:nowrap}
table.dl-po-lx td{padding:var(--sp-2);border-bottom:1px solid var(--card-line);color:var(--text-secondary)}
table.dl-po-lx tr:last-child td{border-bottom:0}
table.dl-po-lx td:nth-child(2){color:var(--text-primary);font-weight:var(--fw-medium)}
table.dl-po-lx .dl-po-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.dl-po-lx td.dl-po-num strong{color:var(--text-primary)}
table.dl-po-lx th.dl-po-num{text-align:right}
table.dl-po-lx td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);color:var(--text-muted)}
/* ledger */
.dl-po-ledger{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-po-lrow{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-po-lrow span:last-child{font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);color:var(--text-primary)}
.dl-po-lrow .dl-po-neg{color:var(--danger-ink)}
.dl-po-lrow.dl-po-is-subtle{font-size:var(--fs-xs);color:var(--text-muted)}
.dl-po-lrow.dl-po-is-subtle span:last-child{color:var(--text-secondary);font-weight:var(--fw-medium)}
.dl-po-lrow.dl-po-is-total{margin-top:var(--sp-1);padding-top:var(--sp-2);border-top:1px solid var(--card-line);font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--text-primary)}
.dl-po-lrow.dl-po-is-total span:last-child{font-weight:var(--fw-black);font-size:var(--fs-md)}
/* estimated-payment callout */
.dl-po-est{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
background:color-mix(in oklab,var(--accent),var(--pearl-white) 90%);border:1px solid color-mix(in oklab,var(--accent),transparent 78%)}
.dl-po-est.dl-po-soon{background:color-mix(in oklab,var(--warning),var(--pearl-white) 84%);border-color:color-mix(in oklab,var(--warning),transparent 66%)}
.dl-po-est label{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin-bottom:2px}
.dl-po-est .dl-po-date{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--text-primary)}
.dl-po-est .dl-po-when{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-secondary);text-align:right}
/* --surface carries 12% alpha, so mixing a ground against it stayed effectively
   transparent (measured 0.1 alpha) and the text was really sitting on the mesh.
   --pearl-white is the opaque base; a status ground has to be one. */
.dl-po-est.dl-po-soon .dl-po-when{color:var(--warning-ink)}
.dl-po-basis{font-size:var(--fs-xs);color:var(--text-secondary);margin-top:var(--sp-2);line-height:var(--lh-body)}
/* document row */
.dl-po-doc{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--glass);border:1px solid var(--card-line);cursor:pointer;text-decoration:none}
.dl-po-doc .dl-po-dic{width:var(--h-md);height:var(--h-md);flex:0 0 var(--h-md);border-radius:var(--r-sm);display:grid;place-items:center;background:color-mix(in oklab,var(--danger),transparent 84%)}
.dl-po-doc .dl-po-dic svg{width:var(--ic-sm);height:var(--ic-sm);stroke:var(--danger-ink);fill:none;stroke-width:2}
.dl-po-doc .dl-po-dm{flex:1;min-width:0}
.dl-po-doc .dl-po-dm b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-po-doc .dl-po-dm i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-muted)}
.dl-po-doc .dl-po-go{color:var(--text-muted);font-size:var(--fs-base)}

/* --- SAMPLE DETAIL MODAL --------------------------------------- */
.dl-sd-metaline{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px}
.dl-sd-pill{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.03em;margin-top:var(--sp-2);
color:var(--teal-ink);background:color-mix(in oklab,var(--teal),transparent 86%);border:1px solid color-mix(in oklab,var(--teal),transparent 70%)}
.dl-sd-pill .dl-sd-dot{width:8px;height:8px;border-radius:50%;background:var(--teal-ink);box-shadow:0 0 7px -1px var(--teal)}
/* timeline */
.dl-sd-tl{position:relative;display:flex;justify-content:space-between;padding:var(--sp-2) 8% var(--sp-1)}
.dl-sd-tl::before{content:'';position:absolute;top:calc(var(--sp-2) + 9px);left:8%;right:8%;height:2px;background:var(--card-line)}
.dl-sd-tl .dl-sd-fill{position:absolute;top:calc(var(--sp-2) + 9px);left:8%;width:42%;height:2px;background:var(--accent);border-radius:2px}
.dl-sd-tl .dl-sd-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1;flex:1}
.dl-sd-tl .dl-sd-stepdot{width:20px;height:20px;border-radius:50%;background:var(--glass-hi);border:2px solid var(--card-line);display:grid;place-items:center}
.dl-sd-tl .dl-sd-stepdot svg{width:11px;height:11px;stroke:var(--on-accent);fill:none;stroke-width:3;opacity:0}
.dl-sd-tl .dl-sd-step.dl-sd-done .dl-sd-stepdot{background:var(--accent);border-color:transparent}
.dl-sd-tl .dl-sd-step.dl-sd-done .dl-sd-stepdot svg{opacity:1}
.dl-sd-tl .dl-sd-step.dl-sd-cur .dl-sd-stepdot{background:var(--accent);border-color:transparent;box-shadow:0 0 0 4px color-mix(in oklab,var(--accent),transparent 76%)}
.dl-sd-tl .dl-sd-lb{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--text-muted);text-align:center;line-height:1.2;max-width:72px}
.dl-sd-tl .dl-sd-step.dl-sd-done .dl-sd-lb,.dl-sd-tl .dl-sd-step.dl-sd-cur .dl-sd-lb{color:var(--text-primary)}
/* instruction strip */
.dl-sd-instr{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:color-mix(in oklab,var(--accent),transparent 90%);border:1px solid color-mix(in oklab,var(--accent),transparent 80%);font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-sd-instr b{color:var(--text-primary);font-weight:var(--fw-semibold)}
.dl-sd-instr .dl-sd-ic{width:var(--h-md);height:var(--h-md);flex:0 0 var(--h-md);border-radius:var(--r-sm);display:grid;place-items:center;background:var(--glass-hi)}
.dl-sd-instr .dl-sd-ic svg{width:var(--ic-sm);height:var(--ic-sm);stroke:var(--accent-ink);fill:none;stroke-width:2}
/* section card */
.dl-sd-sec{padding:var(--sp-4);border-radius:var(--r-md);background:var(--glass-hi);border:1px solid var(--card-line)}
.dl-sd-sec h4{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2)}
.dl-sd-sec h4 .dl-sd-count{margin-left:auto;height:20px;min-width:20px;padding:0 8px;border-radius:var(--r-pill);background:color-mix(in oklab,var(--accent),transparent 86%);color:var(--accent-ink);font-size:var(--fs-2xs);font-weight:var(--fw-bold);display:grid;place-items:center;letter-spacing:0}
.dl-sd-sub{font-size:var(--fs-xs);color:var(--text-muted);margin:-4px 0 var(--sp-3)}
/* items grid */
.dl-sd-items{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.dl-sd-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:84px}
.dl-sd-item .dl-sd-th{width:84px;height:84px;border-radius:var(--r-md);background:var(--glass);overflow:hidden;display:grid;place-items:center;border:1px solid var(--card-line)}
.dl-sd-item .dl-sd-th img{width:100%;height:100%;object-fit:cover;display:block}
.dl-sd-item .dl-sd-th svg{width:26px;height:26px;stroke:var(--text-muted);fill:none;stroke-width:2}
.dl-sd-item .dl-sd-nm{font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--text-secondary);text-align:center;line-height:1.2}
/* detail rows */
.dl-sd-rows{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-sd-drow{display:flex;align-items:baseline;gap:var(--sp-3);font-size:var(--fs-sm)}
.dl-sd-drow .dl-sd-label{flex:0 0 40%;color:var(--text-secondary);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.03em}
.dl-sd-drow .dl-sd-value{flex:1;color:var(--text-primary);font-weight:var(--fw-medium)}
.dl-sd-drow .dl-sd-value.dl-sd-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs)}
.dl-sd-addr{margin-top:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--card-line);font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-body)}
/* tracking buttons */
.dl-sd-trkbtns{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.dl-sd-btnrow{display:inline-flex;align-items:center;gap:8px;height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid var(--card-line);background:var(--glass);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer;text-decoration:none}
.dl-sd-btnrow.dl-sd-live{color:var(--on-accent);border-color:transparent;background:var(--btn-primary-bg);box-shadow:0 4px 12px -4px var(--accent)}
/* a destructive action needs a stable ground of its own: danger ink on the
   translucent default sat at 3.7 over the mesh once the sheet went full-height */
.dl-sd-btnrow.dl-sd-danger{color:var(--danger-ink);background:color-mix(in oklab,var(--danger),var(--pearl-white) 84%);border-color:transparent}
/* feedback card */
.dl-sd-sec.dl-sd-fb{background:color-mix(in oklab,var(--teal),transparent 90%);border-color:color-mix(in oklab,var(--teal),transparent 74%)}
.dl-sd-sec.dl-sd-fb h4{color:var(--teal-ink)}
.dl-sd-sec p.dl-sd-body{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-body)}

/* --- SAMPLE REQUEST MODAL -------------------------------------- */
.dl-dlg-head .dl-sr-ic{width:var(--h-md);height:var(--h-md);flex:0 0 var(--h-md);border-radius:var(--r-md);display:grid;place-items:center;background:var(--btn-primary-bg);box-shadow:0 6px 16px -8px var(--accent)}
.dl-dlg-head .dl-sr-ic svg{width:var(--ic-sm);height:var(--ic-sm);stroke:var(--on-accent);fill:none;stroke-width:2}
/* section */
.dl-sr-sec{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-sr-sh{display:flex;align-items:center;gap:var(--sp-2)}
.dl-sr-st{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink)}
.dl-sr-req{color:var(--accent-ink);font-weight:var(--fw-black)}
.dl-sr-selall{margin-left:auto;height:26px;padding:0 var(--sp-2);border-radius:var(--r-pill);border:1px solid var(--card-line);background:var(--glass-hi);color:var(--accent-ink);font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);cursor:pointer}
.dl-sr-lbl{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink)}
.dl-sr-in,.dl-sr-sel,.dl-sr-ta{width:100%;padding:0 var(--sp-3);border-radius:var(--r-md);border:1px solid var(--card-line);background:var(--glass);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-base)}
.dl-sr-in,.dl-sr-sel{height:var(--h-lg)}
.dl-sr-ta{padding:var(--sp-3);min-height:76px;resize:vertical;line-height:var(--lh-body)}
.dl-sr-in::placeholder,.dl-sr-ta::placeholder{color:var(--text-muted)}
.dl-sr-in:focus,.dl-sr-sel:focus,.dl-sr-ta:focus{outline:none;border-color:color-mix(in oklab,var(--accent),transparent 40%);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 82%)}
.dl-sr-sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-3) center;padding-right:var(--sp-6)}
.dl-sr-fld{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.dl-sr-row2{display:flex;gap:var(--sp-3)}
/* search */
.dl-sr-search{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-3);border-radius:var(--r-md);border:1px solid var(--card-line);background:var(--glass)}
.dl-sr-search svg{width:var(--ic-sm);height:var(--ic-sm);stroke:var(--text-muted);fill:none;stroke-width:2;flex:0 0 auto}
.dl-sr-search input{flex:1;border:0;background:none;outline:none;color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-base)}
.dl-sr-search input::placeholder{color:var(--text-muted)}
/* product cards — thumbnail + name + corner check badge (matches the real creator) */
.dl-sr-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.dl-sr-card{position:relative;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);border-radius:var(--r-md);border:2px solid var(--card-line);background:var(--glass-hi);cursor:pointer;text-align:left;transition:.15s;font-family:var(--font-body)}
.dl-sr-card:hover{border-color:color-mix(in oklab,var(--accent),transparent 55%)}
.dl-sr-card .dl-sr-thumb{flex:0 0 46px;width:46px;height:46px;border-radius:var(--r-sm);background:var(--glass);display:grid;place-items:center;overflow:hidden}
.dl-sr-card .dl-sr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dl-sr-card .dl-sr-thumb svg{width:20px;height:20px;stroke:var(--text-muted);fill:none;stroke-width:2}
.dl-sr-card .dl-sr-cn{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-sr-card .dl-sr-chk{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;background:var(--accent);display:none;place-items:center;box-shadow:0 2px 6px -1px var(--accent)}
.dl-sr-card .dl-sr-chk svg{width:12px;height:12px;stroke:var(--on-accent);fill:none;stroke-width:3}
.dl-sr-card.dl-sr-on{border-color:color-mix(in oklab,var(--accent),transparent 40%);background:color-mix(in oklab,var(--accent),transparent 86%)}
.dl-sr-card.dl-sr-on .dl-sr-cn{color:var(--accent-ink)}
.dl-sr-card.dl-sr-on .dl-sr-chk{display:grid}
/* manual add row */
.dl-sr-manual{display:flex;gap:var(--sp-2)}
.dl-sr-manual .dl-sr-in{flex:1}
.dl-sr-madd{flex:0 0 auto;height:var(--h-lg);padding:0 var(--sp-4);border-radius:var(--r-md);border:1px solid color-mix(in oklab,var(--accent),transparent 55%);background:color-mix(in oklab,var(--accent),transparent 88%);color:var(--accent-ink);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer}
.dl-sr-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.dl-sr-chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 var(--sp-2) 0 var(--sp-3);border-radius:var(--r-pill);background:color-mix(in oklab,var(--accent),transparent 86%);border:1px solid color-mix(in oklab,var(--accent),transparent 74%);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.dl-sr-chip button{border:0;background:none;color:var(--accent-ink);cursor:pointer;font-size:var(--fs-base);line-height:1;display:flex;opacity:.7}
/* team chips (assign) */
.dl-sr-team{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.dl-sr-tchip{height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid var(--card-line);background:var(--glass-hi);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer}
.dl-sr-tchip.dl-sr-on{background:var(--btn-primary-bg);border-color:transparent;color:var(--on-accent);box-shadow:0 6px 16px -8px var(--accent)}
/* checkbox toggle */
.dl-sr-toggle{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);border:1px solid var(--card-line);background:var(--glass-hi);cursor:pointer}
.dl-sr-toggle input{position:absolute;opacity:0}
.dl-sr-box{width:22px;height:22px;flex:0 0 22px;border-radius:7px;border:2px solid var(--card-line);display:grid;place-items:center;margin-top:1px;transition:.15s}
.dl-sr-box svg{width:13px;height:13px;stroke:var(--on-accent);fill:none;stroke-width:3;opacity:0}
.dl-sr-toggle input:checked + .dl-sr-box{background:var(--accent);border-color:transparent}
.dl-sr-toggle input:checked + .dl-sr-box svg{opacity:1}
.dl-sr-toggle .dl-sr-tt{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-body)}
.dl-sr-toggle .dl-sr-tt b{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* --- ADD-CONTACT MODAL ----------------------------------------- */
/* segmented contact-type selector */
.dl-ac-seg{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.dl-ac-seg label{display:inline-flex;align-items:center;height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid var(--card-line);background:var(--glass-hi);color:var(--text-secondary);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;transition:.15s}
.dl-ac-seg label:hover{background:var(--bg-hover)}
.dl-ac-seg input{position:absolute;opacity:0;pointer-events:none}
.dl-ac-seg input:checked + span{color:var(--on-accent)}
.dl-ac-seg label:has(input:checked){background:var(--btn-primary-bg);border-color:transparent;color:var(--on-accent);box-shadow:0 6px 16px -8px var(--accent)}
/* form fields */
.dl-ac-fld{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.dl-ac-row{display:flex;gap:var(--sp-3)}
.dl-ac-lbl{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink)}
.dl-ac-lbl .dl-ac-opt{font-weight:var(--fw-medium);letter-spacing:0;text-transform:none;color:var(--text-muted);font-size:var(--fs-2xs)}
.dl-ac-in,.dl-ac-sel{height:var(--h-lg);width:100%;padding:0 var(--sp-3);border-radius:var(--r-md);border:1px solid var(--card-line);background:var(--glass);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-base)}
.dl-ac-in::placeholder{color:var(--text-muted)}
.dl-ac-in:focus,.dl-ac-sel:focus{outline:none;border-color:color-mix(in oklab,var(--accent),transparent 40%);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 82%)}
.dl-ac-sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-3) center;padding-right:var(--sp-6)}
.dl-ac-ghostadd{align-self:flex-start;height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px dashed color-mix(in oklab,var(--accent),transparent 55%);background:color-mix(in oklab,var(--accent),transparent 90%);color:var(--accent-ink);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer}
/* collapsible address */
details.dl-ac-addr{border:1px solid var(--card-line);border-radius:var(--r-md);background:var(--glass-hi);overflow:hidden}
details.dl-ac-addr summary{list-style:none;cursor:pointer;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary);display:flex;align-items:center;gap:var(--sp-2)}
details.dl-ac-addr summary::-webkit-details-marker{display:none}
details.dl-ac-addr summary .dl-ac-ch{margin-left:auto;font-size:var(--fs-2xs);color:var(--text-muted);transition:.2s}
details.dl-ac-addr[open] summary .dl-ac-ch{transform:rotate(180deg)}
details.dl-ac-addr:not([open]) .dl-ac-inner{display:none}
details.dl-ac-addr .dl-ac-inner{padding:0 var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}

/* --- COMPOSE MODAL --------------------------------------------- */
.dl-cp-pb{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:2px var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--accent-ink);background:color-mix(in oklab,var(--accent),var(--pearl-white) 82%);border:1px solid color-mix(in oklab,var(--accent),transparent 74%)}
.dl-cp-pb .dl-cp-orb{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 75%);box-shadow:0 0 7px -1px var(--accent)}
.dl-cp-win{margin-left:auto;display:flex;gap:8px}
.dl-cp-wb{width:30px;height:30px;border-radius:50%;border:1px solid var(--card-line);background:var(--glass-hi);color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;font-size:var(--fs-sm);transition:.15s}
.dl-cp-wb:hover{background:var(--bg-hover)} .dl-cp-wb.dl-cp-cl:hover{transform:rotate(90deg)}
.dl-cp-wb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
/* recipients */
.dl-cp-rows{flex:0 0 auto;padding:0 var(--sp-5)}
.dl-cp-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--card-line)}
.dl-cp-lbl{font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink);width:34px;flex:0 0 34px}
.dl-cp-recips{display:flex;gap:var(--sp-2);flex-wrap:wrap;flex:1;align-items:center}
.dl-cp-rchip{display:inline-flex;align-items:center;gap:8px;padding:4px;border-radius:var(--r-pill);background:var(--glass-hi);border:1px solid var(--card-line);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.dl-cp-rav{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:#fff;background:linear-gradient(145deg,var(--deep),var(--accent))}
.dl-cp-rin{flex:1;border:0;background:none;outline:none;font-size:var(--fs-sm);color:var(--text-primary);caret-color:var(--accent);min-width:50px;font-family:var(--font-body)}
.dl-cp-rin::placeholder{color:var(--text-muted)}
/* One collapsed affordance, and a QUIET one. It reveals the Cc/Bcc fields; it is
   not a peer of the To field, so it carries no fill and no border — accent text
   only, at label scale. As a filled pill it competed with the field beside it and
   its own height pushed the row taller. The 44px target is carried invisibly:
   the hit area meets LAW 32.5 without adding a pixel of visual weight. */
.dl-cp-ccrow-unused{display:flex;align-items:center;gap:var(--sp-3);width:100%;
  padding:var(--sp-3) 0;border:0;border-bottom:1px solid var(--card-line);background:none;
  min-height:var(--h-lg);cursor:pointer;text-align:left;font-family:var(--font-body)}
.dl-cp-ccrow .dl-cp-lbl{padding-top:0}
.dl-cp-ccfrom{font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-cp-ccrow:hover .dl-cp-ccfrom{color:var(--text-primary)}
.dl-cp-ccbcc{flex:0 0 auto;border:0;background:none;padding:0 var(--sp-2);
  min-height:var(--h-lg);display:inline-flex;align-items:center;
  font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--accent-ink);cursor:pointer;white-space:nowrap}
.dl-cp-ccbcc:hover{color:var(--text-primary)}
.dl-cp-subj{width:100%;border:0;background:none;outline:none;padding:var(--sp-3) 0;font-family:var(--font-display);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary);caret-color:var(--accent);border-bottom:1px solid var(--card-line)}
/* FULL formatting toolbar */
.dl-cp-tb{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--card-line);overflow-x:auto;background:color-mix(in oklab,var(--card),var(--canvas) 20%)}
.dl-cp-tb::-webkit-scrollbar{height:0}
.dl-cp-tsel{height:30px;padding:0 var(--sp-2);border:1px solid var(--card-line);border-radius:var(--r-sm);background:var(--glass-hi);color:var(--text-secondary);font-size:var(--fs-xs);font-family:var(--font-body);margin-right:4px;flex:0 0 auto}
.dl-cp-t{width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-sm);border:0;background:none;color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;transition:.12s}
.dl-cp-t:hover{background:var(--bg-hover);color:var(--text-primary)}
.dl-cp-t svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.dl-cp-t b{font-family:var(--font-display);font-size:14px;font-weight:800} .dl-cp-t i{font-style:italic;font-family:Georgia,serif;font-size:14px} .dl-cp-t u{text-decoration:underline;font-size:14px} .dl-cp-t s{font-size:14px}
.dl-cp-sep{width:1px;height:18px;background:var(--card-line);margin:0 4px;flex:0 0 auto}
.dl-cp-swatch{width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,var(--accent),var(--teal))}
.dl-cp-editor{width:100%;flex:1 1 auto;border:0;background:none;outline:none;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text-secondary);caret-color:var(--accent);font-family:var(--font-body)}
/* signature — real data (Elle), rendered INLINE + themed so it adapts to every skin
    (readable light-on-dark), no card/block, glassy body preserved */
.dl-cp-sig{flex:0 0 auto;margin-top:var(--sp-4);display:flex;gap:var(--sp-3);align-items:center}
.dl-cp-sigphoto{width:54px;height:54px;flex:0 0 54px;border-radius:50%;background:url('/signatures/elle-face.png') center/cover no-repeat, var(--bg-hover);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent),transparent 45%)}
.dl-cp-signame{font-family:var(--font-display);font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--text-primary);letter-spacing:var(--tr-snug)}
.dl-cp-sigtitle{font-size:var(--fs-xs);color:var(--text-muted);margin-top:1px}
.dl-cp-siglinks{font-size:var(--fs-xs);color:var(--text-secondary);margin-top:8px}
.dl-cp-siglinks a{color:var(--accent-ink);text-decoration:none}
.dl-cp-sigwm{font-size:var(--fs-2xs);color:var(--text-muted);margin-top:8px;display:flex;align-items:center;gap:4px}
.dl-cp-sigwm .dl-cp-v{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-primary)}
.dl-cp-sigwm .dl-cp-d{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--accent-ink)}
/* attachments — subtle, minimal, attached above the send bar (NOT in the message body) */
.dl-cp-att{margin-top:var(--sp-4);flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-2) var(--sp-5);border-top:1px solid var(--card-line)}
.dl-cp-aitem{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-cp-aitem .dl-cp-fi{width:14px;height:14px;flex:0 0 14px;stroke:var(--text-muted);fill:none;stroke-width:1.8}
.dl-cp-asz{color:var(--text-muted);font-size:var(--fs-2xs)}
.dl-cp-ax{border:0;background:none;color:var(--text-muted);cursor:pointer;opacity:.4;font-size:var(--fs-xs);padding:2px;line-height:1;display:grid;place-items:center}.dl-cp-ax:hover{opacity:1}
.dl-cp-fbtn{width:var(--h-md);height:var(--h-md);flex:0 0 var(--h-md);border:1px solid var(--card-line);background:var(--glass-hi);border-radius:var(--r-md);color:var(--text-muted);cursor:pointer;display:grid;place-items:center}
.dl-cp-fbtn:hover{background:var(--bg-hover);color:var(--text-primary)} .dl-cp-fbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.dl-cp-discard{margin-left:auto;height:var(--h-lg);padding:0 var(--sp-4);border:1px solid var(--card-line);background:var(--glass-hi);border-radius:var(--r-pill);color:var(--text-secondary);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;font-family:var(--font-body)}
.dl-cp-send{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-4);border:0;cursor:pointer;border-radius:var(--r-pill);font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--on-accent);background:var(--btn-primary-bg);box-shadow:0 8px 22px -8px var(--accent),inset 0 1px 0 0 rgba(255,255,255,.4)}
.dl-cp-send svg{width:var(--ic-sm);height:var(--ic-sm);stroke:var(--on-accent);fill:none;stroke-width:2}
.dl-cp-sched{width:var(--h-lg);padding:0 var(--sp-2);border:0;border-left:1px solid rgba(255,255,255,.25);background:linear-gradient(135deg,var(--accent),color-mix(in oklab,var(--accent),var(--deep) 40%));color:#fff;border-radius:0 var(--r-pill) var(--r-pill) 0;cursor:pointer;margin-left:-8px;box-shadow:0 8px 22px -8px var(--accent)}
.dl-cp-sched svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2}
.dl-cp-sendwrap{display:flex}

/* --- PEARL CHAT PANEL ------------------------------------------ */
/* floating chat window — glass chassis, fitted fixed size, thread scrolls inside (LAW 44) */
/* 2026-08-15 GLASS graduation (Elle: "glassy or super apple design forward"):
   the shell wears the approved DialedModal sheet material verbatim
   (dialed-modal.js .dlg) — surface+accent-4% over OPAQUE canvas (solid from
   first paint, no filter wait), blur(44)/sat(170), 1px specular inset, deep
   48/120 elevation. Approved on _mock-pearl-chat.html, both tones. */
.dl-pc-win{position:relative;width:min(400px,94vw);height:min(640px,86dvh);display:flex;flex-direction:column;border-radius:var(--r-2xl);overflow:hidden;
background:linear-gradient(color-mix(in oklab,var(--surface),var(--accent) 4%),color-mix(in oklab,var(--surface),var(--accent) 4%)),var(--canvas);
border:1px solid color-mix(in oklab,var(--accent),transparent 50%);
box-shadow:0 40px 100px -20px color-mix(in oklab,var(--deep),transparent 30%),0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(255,255,255,.08) inset;
backdrop-filter:blur(44px) saturate(170%);-webkit-backdrop-filter:blur(44px) saturate(170%)}
/* dark tone: the elevation stays, the specular quiets to an edge catch, not a white seam */
:root[data-tone="dark"] .dl-pc-win{box-shadow:0 48px 120px -24px rgba(0,0,0,.72),0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(255,255,255,.07) inset}
/* top hairline follows the modal head: ONE accent specular, edge to edge */
.dl-pc-win::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent),transparent 30%),transparent)}
/* header — dark deep-glass ombre band (DialedModal .dlg-top recipe, verbatim) */
.dl-pc-hd{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--card-line);
background:linear-gradient(180deg,color-mix(in oklab,var(--deep),transparent 55%) 0%,color-mix(in oklab,var(--deep),transparent 86%) 62%,transparent 100%)}
.dl-pc-av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-base);color:var(--on-accent);background:radial-gradient(circle at 34% 28%,color-mix(in oklab,var(--accent),#fff 30%),var(--accent) 72%);box-shadow:0 0 0 2px rgba(255,255,255,.28),0 4px 14px -4px var(--accent)}
.dl-pc-who{display:flex;flex-direction:column;line-height:1.15}
.dl-pc-who b{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary)}
.dl-pc-who .dl-pc-on{display:flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--success-ink)}
.dl-pc-who .dl-pc-on i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 6px -1px var(--success);animation:dlpcPulse 2.6s ease-in-out infinite}
@keyframes dlpcPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--success),transparent 45%)}50%{box-shadow:0 0 0 4px color-mix(in oklab,var(--success),transparent 90%)}}
.dl-pc-hdr{margin-left:auto;display:flex;align-items:center;gap:8px}
.dl-pc-model{height:30px;padding:0 var(--sp-2);border-radius:var(--r-pill);border:1px solid color-mix(in oklab,var(--accent),transparent 68%);background-color:color-mix(in oklab,var(--surface),transparent 28%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset;color:var(--text-secondary);font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);appearance:none;padding-right:20px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}
.dl-pc-hbtn{width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in oklab,var(--accent),transparent 68%);background:color-mix(in oklab,var(--surface),transparent 28%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset;color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;transition:.15s}
:root[data-tone="dark"] .dl-pc-model,:root[data-tone="dark"] .dl-pc-hbtn{box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.dl-pc-hbtn:hover{background:var(--bg-hover);color:var(--text-primary)}
.dl-pc-hbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
/* thread */
.dl-pc-thread{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-pc-thread::-webkit-scrollbar{width:8px}.dl-pc-thread::-webkit-scrollbar-thumb{background:var(--card-line);border-radius:var(--r-pill)}
/* centered time stamp (iMessage: shown occasionally, not per-message) */
/* date stamp — a tiny glass pill; receipts stay quiet muted ink */
.dl-pc-stamp{align-self:center;font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--text-muted);margin:var(--sp-1) 0 var(--sp-2);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
background:color-mix(in oklab,var(--surface),transparent 30%);border:1px solid var(--card-line);box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%)}
:root[data-tone="dark"] .dl-pc-stamp{box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.dl-pc-stamp b{font-weight:var(--fw-bold);color:var(--text-secondary)}
.dl-pc-msg{display:flex;flex-direction:column;max-width:82%;gap:2px}
.dl-pc-msg.dl-pc-assistant{align-self:flex-start}
.dl-pc-msg.dl-pc-user{align-self:flex-end;align-items:flex-end}
/* iMessage bubbles — rounded with a tail on the speaker's side */
.dl-pc-bubble{padding:8px 16px;border-radius:20px;font-size:var(--fs-sm);line-height:var(--lh-body);overflow-wrap:anywhere}
/* bubbles — assistant = frosted glass chip (the sheet material at chip scale),
   user = the calibrated accent pair. Asymmetric 18/18/18/6 tails. */
.dl-pc-msg.dl-pc-assistant .dl-pc-bubble{background:linear-gradient(color-mix(in oklab,var(--surface),var(--accent) 4%),color-mix(in oklab,var(--surface),var(--accent) 4%));
border:1px solid color-mix(in oklab,var(--accent),transparent 70%);color:var(--text-primary);border-radius:18px 18px 18px 6px;
box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 14px 30px -22px color-mix(in oklab,var(--deep),transparent 35%)}
:root[data-tone="dark"] .dl-pc-msg.dl-pc-assistant .dl-pc-bubble{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 14px 30px -22px rgba(0,0,0,.6)}
.dl-pc-msg.dl-pc-user .dl-pc-bubble{background:var(--btn-primary-bg);color:var(--on-accent);border-radius:18px 18px 6px 18px;
box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 14px 30px -16px color-mix(in oklab,var(--accent),transparent 25%)}
.dl-pc-bubble p + p{margin-top:var(--sp-2)}
.dl-pc-bubble ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);display:flex;flex-direction:column;gap:4px}
.dl-pc-bubble b{font-weight:var(--fw-semibold)}
.dl-pc-receipt{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--text-muted);padding:1px 8px 0}
/* Pearl action chip (she tees up, human executes) */
.dl-pc-chip{margin-top:var(--sp-1);display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid color-mix(in oklab,var(--accent),transparent 55%);background:color-mix(in oklab,var(--accent),transparent 86%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset;color:var(--accent-ink);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer;align-self:flex-start}
:root[data-tone="dark"] .dl-pc-chip{box-shadow:0 1px 0 rgba(255,255,255,.10) inset}
.dl-pc-chip svg{width:13px;height:13px;fill:none;stroke:var(--accent-ink);stroke-width:2}
/* typing */
.dl-pc-typing{align-self:flex-start;display:flex;gap:4px;padding:12px var(--sp-3);border-radius:18px 18px 18px 6px;
background:linear-gradient(color-mix(in oklab,var(--surface),var(--accent) 4%),color-mix(in oklab,var(--surface),var(--accent) 4%));
border:1px solid color-mix(in oklab,var(--accent),transparent 70%);
box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 14px 30px -22px color-mix(in oklab,var(--deep),transparent 35%)}
:root[data-tone="dark"] .dl-pc-typing{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 14px 30px -22px rgba(0,0,0,.6)}
.dl-pc-typing i{width:7px;height:7px;border-radius:50%;background:var(--text-muted);animation:blink 1.3s infinite}
.dl-pc-typing i:nth-child(2){animation-delay:.18s}.dl-pc-typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
/* iMessage-style input: "+" attach, then a pill holding the text + mic + send */
/* input row — glass capsule (r-pill) over a quiet deep ombre mirror of the head */
.dl-pc-input{flex:0 0 auto;display:flex;align-items:flex-end;gap:var(--sp-2);padding:var(--sp-3);border-top:1px solid color-mix(in oklab,var(--accent),transparent 80%);background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--deep),transparent 90%))}
.dl-pc-plus{width:var(--h-md);height:var(--h-md);flex:0 0 var(--h-md);border-radius:50%;border:1px solid color-mix(in oklab,var(--accent),transparent 68%);background:color-mix(in oklab,var(--surface),transparent 28%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset;color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;transition:.15s}
:root[data-tone="dark"] .dl-pc-plus{box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.dl-pc-plus:hover{background:var(--bg-hover);color:var(--accent-ink)}
.dl-pc-plus svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.dl-pc-field{flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px 16px;border-radius:var(--r-pill);border:1px solid color-mix(in oklab,var(--accent),transparent 62%);
background:linear-gradient(color-mix(in oklab,var(--surface),var(--accent) 4%),color-mix(in oklab,var(--surface),var(--accent) 4%));
box-shadow:0 1px 0 rgba(255,255,255,.5) inset;transition:.15s}
:root[data-tone="dark"] .dl-pc-field{box-shadow:0 1px 0 rgba(255,255,255,.14) inset}
.dl-pc-field:focus-within{border-color:color-mix(in oklab,var(--accent),transparent 35%);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 0 0 3px color-mix(in oklab,var(--accent),transparent 82%)}
/* 16px everywhere (LAW 45/48: no iOS focus-zoom) + explicit caret (LAW 45: the
   shell carries a backdrop-filter, an inherited caret can go unpainted) */
.dl-pc-ta{flex:1;min-width:0;min-height:30px;max-height:96px;padding:4px 0;border:0;background:none;color:var(--text-primary);font-family:var(--font-body);font-size:16px;caret-color:var(--accent);resize:none;line-height:1.5}
.dl-pc-ta:focus{outline:none}
.dl-pc-ta::placeholder{color:var(--text-muted)}
.dl-pc-mic{width:30px;height:30px;flex:0 0 30px;border:0;background:none;color:var(--text-muted);display:grid;place-items:center;cursor:pointer;border-radius:50%}
.dl-pc-mic:hover{color:var(--accent-ink)}
.dl-pc-mic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.dl-pc-send{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:var(--btn-primary-bg);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 16px -6px var(--accent)}
.dl-pc-send svg{width:16px;height:16px;fill:none;stroke:var(--on-accent);stroke-width:2.4}
/* motion — subtle only, honored off (LAW 10) */
@media (prefers-reduced-motion:reduce){
.dl-pc-who .dl-pc-on i{animation:none}
.dl-pc-typing i{animation:none;opacity:.55}
}
@media (max-width:480px){
.stage{padding:var(--sp-3)}
/* A chat is full-screen on a phone, like every messaging app on the device.
   Scaled to 351px it sat at 75% of the display with the rest empty. */
.dl-pc-win{zoom:1;width:100%;max-width:none;height:100dvh;border-radius:0;flex:1 1 auto}
.dl-pc-hd{padding-top:calc(var(--sp-3) + env(safe-area-inset-top))}
.dl-pc-input{padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom))}
}

/* --- PEARL CHAT DOCK (the shell's floating widget) -------------- */
/* Where the chat panel LIVES on a shell page: fixed bottom-right, inert and
   invisible until .open; .minimized swaps the window for a pill that keeps
   working. Ported from css/pearl-chat-widget.css on 2026-09-13 (LAW 28: the
   legacy pearl-* vocabulary died with that sheet). The state classes
   (.open .minimized .pearl-kb-open .working .done .mic-active .mic-speaking)
   are the JS contract in admin.html and keep their names. */
body.iframe-modal-open .dl-pc-dock{display:none!important}
.dl-pc-dock{position:fixed;bottom:var(--sp-6);right:var(--sp-6);z-index:9999;font-family:var(--font-body);pointer-events:none;visibility:hidden}
.dl-pc-dock.open,.dl-pc-dock.minimized{pointer-events:auto;visibility:visible}
/* the window is sized for a shell with a sidebar; hidden until opened */
.dl-pc-dock .dl-pc-win{display:none;width:420px;max-width:calc(100vw - 340px);height:550px;max-height:calc(100vh - 100px)}
.dl-pc-dock.open .dl-pc-win{display:flex;animation:dlpcSlideUp .3s ease}
.dl-pc-dock.minimized .dl-pc-win{display:none!important}
@keyframes dlpcSlideUp{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
/* head: draggable on the desk; LAW 47 geometry — the identity never wraps,
   the select is the one elastic child, icon buttons never shrink */
.dl-pc-dock .dl-pc-hd{cursor:grab;user-select:none}
.dl-pc-dock .dl-pc-hd:active{cursor:grabbing}
.dl-pc-dock .dl-pc-av{flex:0 0 36px}
.dl-pc-dock .dl-pc-who{min-width:0;max-width:50%}
.dl-pc-dock .dl-pc-who b,.dl-pc-dock .dl-pc-on{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-pc-dock .dl-pc-hdr{flex:1 1 auto;justify-content:flex-end;min-width:0}
.dl-pc-dock .dl-pc-model{flex:0 1 auto;min-width:60px;max-width:124px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dl-pc-dock .dl-pc-hbtn{flex:0 0 auto;padding:0}
/* minimized pill — wears the window's sheet material so pill and window read
   as one object; .working pulses, .done breathes teal until tapped */
.dl-pc-pill{display:none;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);min-height:48px;
background:linear-gradient(color-mix(in oklab,var(--surface),var(--accent) 4%),color-mix(in oklab,var(--surface),var(--accent) 4%)),var(--canvas);
backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
border:1px solid color-mix(in oklab,var(--accent),transparent 50%);border-radius:var(--r-pill);
box-shadow:0 4px 24px color-mix(in oklab,var(--accent),transparent 75%),0 2px 8px rgba(0,0,0,.08),0 1px 0 rgba(255,255,255,.5) inset;
cursor:pointer;font-family:var(--font-body);transition:transform .2s ease,box-shadow .2s ease}
:root[data-tone="dark"] .dl-pc-pill{box-shadow:0 4px 24px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.16) inset}
.dl-pc-dock.minimized .dl-pc-pill{display:inline-flex}
.dl-pc-pill:hover{transform:translateY(-2px);box-shadow:0 8px 32px color-mix(in oklab,var(--accent),transparent 65%),0 2px 8px rgba(0,0,0,.1)}
.dl-pc-pill .dl-pc-av{width:32px;height:32px;flex:0 0 32px;font-size:var(--fs-sm)}
.dl-pc-pill-label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.dl-pc-pill.working .dl-pc-av{animation:dlpcMiniPulse 1.6s ease-in-out infinite}
.dl-pc-pill.done{border-color:color-mix(in oklab,var(--teal-ink),transparent 40%);animation:dlpcPillGlow 1.8s ease-in-out infinite}
.dl-pc-pill.done .dl-pc-pill-label{color:var(--teal-ink)}
@keyframes dlpcMiniPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent),transparent 55%)}50%{box-shadow:0 0 0 8px color-mix(in oklab,var(--accent),transparent 100%)}}
@keyframes dlpcPillGlow{0%,100%{box-shadow:0 4px 24px color-mix(in oklab,var(--accent),transparent 75%),0 0 0 0 color-mix(in oklab,var(--teal),transparent 65%)}50%{box-shadow:0 4px 28px color-mix(in oklab,var(--accent),transparent 60%),0 0 18px 5px color-mix(in oklab,var(--teal),transparent 50%)}}
/* thread supplements the book bubble does not carry: one unbroken string
   must never pan the thread sideways (LAW 46.1/49); links wrap, media and
   code stay inside the bubble */
.dl-pc-dock .dl-pc-thread{overflow-x:hidden}
.dl-pc-dock .dl-pc-bubble a{word-break:break-all}
.dl-pc-dock .dl-pc-bubble img,.dl-pc-dock .dl-pc-bubble iframe,.dl-pc-dock .dl-pc-bubble table{max-width:100%}
.dl-pc-dock .dl-pc-bubble code{background:color-mix(in oklab,var(--deep),transparent 94%);padding:0 var(--sp-1);border-radius:var(--r-xs);font-size:var(--fs-sm)}
.dl-pc-dock .dl-pc-bubble pre{background:color-mix(in oklab,var(--deep),transparent 94%);padding:var(--sp-3);border-radius:var(--r-sm);overflow-x:auto;margin:var(--sp-2) 0}
/* live status text riding inside the typing pill ("Running search_emails…") */
.dl-pc-live{margin-left:var(--sp-1);font-size:var(--fs-sm);color:var(--text-secondary)}
/* what Pearl did — a collapsible trail under her message (LAW 51: a confident
   wrong answer traces to the tool that produced it) */
.dl-pc-trail{margin:var(--sp-1) 0 0;font-size:var(--fs-2xs)}
.dl-pc-trail summary{cursor:pointer;color:var(--text-muted);list-style:none;user-select:none}
.dl-pc-trail-rows{padding:var(--sp-1) 0 0}
.dl-pc-trail-row{display:flex;gap:var(--sp-2);align-items:baseline;min-height:var(--sp-4)}
.dl-pc-trail-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex:none;transform:translateY(2px)}
.dl-pc-trail-dot.fail{background:var(--danger)}
.dl-pc-trail-name{font-family:var(--font-mono,monospace);font-size:var(--fs-2xs);color:var(--text-secondary)}
.dl-pc-trail-args{font-size:var(--fs-2xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a file Pearl shows inside a bubble, and the chips above the composer */
.dl-pc-file-name{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--sp-2)}
.dl-pc-file-media img{max-width:100%;border-radius:var(--r-md);display:block}
.dl-pc-file-media iframe{width:100%;height:340px;border-radius:var(--r-md);border:1px solid color-mix(in oklab,var(--accent),transparent 80%);background:var(--surface)}
.dl-pc-file-open{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--accent-ink);font-weight:var(--fw-semibold);text-decoration:none}
.dl-pc-files{display:none;flex-wrap:wrap;gap:var(--sp-1);padding:var(--sp-2) var(--sp-4);border-top:1px solid color-mix(in oklab,var(--accent),transparent 90%);background:color-mix(in oklab,var(--accent),transparent 95%)}
.dl-pc-file{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);background:var(--glass-hi);border:1px solid color-mix(in oklab,var(--accent),transparent 80%);border-radius:var(--r-sm);font-size:var(--fs-2xs);color:var(--text-primary)}
.dl-pc-file img{width:24px;height:24px;object-fit:cover;border-radius:var(--r-xs)}
.dl-pc-file span{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-pc-file-x{background:none;border:0;cursor:pointer;color:var(--text-muted);padding:0;display:flex;align-items:center}
.dl-pc-file-x:hover{color:var(--danger-ink)}
/* an email draft Pearl wrote — never sent from here (Pearl tees up, humans execute) */
.dl-pc-draft{border:1px solid color-mix(in oklab,var(--accent),transparent 65%);border-radius:var(--r-md);margin:var(--sp-2) 0;overflow:hidden}
.dl-pc-draft-hd{background:color-mix(in oklab,var(--accent),transparent 90%);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.04em;color:var(--accent-ink)}
.dl-pc-draft pre{margin:0;padding:var(--sp-3);white-space:pre-wrap;font-family:inherit;font-size:var(--fs-sm);line-height:var(--lh-body);max-height:340px;overflow-y:auto}
.dl-pc-draft-ft{padding:var(--sp-2) var(--sp-3);border-top:1px solid color-mix(in oklab,var(--accent),transparent 80%)}
/* the mic while a voice session is live */
.dl-pc-mic.mic-active{color:var(--accent-ink);background:color-mix(in oklab,var(--accent),transparent 85%);animation:dlpcMicPulse 1.4s ease-in-out infinite}
.dl-pc-mic.mic-speaking{color:var(--teal-ink)}
@keyframes dlpcMicPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent),transparent 60%)}50%{box-shadow:0 0 0 6px color-mix(in oklab,var(--accent),transparent 100%)}}
/* LAW 45: under the window's backdrop-filter an inherited caret or selection
   can go unpainted — paint both explicitly on EVERY editable descendant, so a
   field added tomorrow is covered the moment it exists */
.dl-pc-dock input,.dl-pc-dock textarea,.dl-pc-dock [contenteditable]{caret-color:var(--accent-deep)}
.dl-pc-dock input::selection,.dl-pc-dock textarea::selection,.dl-pc-dock [contenteditable]::selection{background:color-mix(in oklab,var(--accent),transparent 65%)}
.dl-pc-dock input::-moz-selection,.dl-pc-dock textarea::-moz-selection,.dl-pc-dock [contenteditable]::-moz-selection{background:color-mix(in oklab,var(--accent),transparent 65%)}
@media (prefers-reduced-motion:reduce){
.dl-pc-pill.done{animation:none;box-shadow:0 4px 28px color-mix(in oklab,var(--accent),transparent 60%),0 0 14px 4px color-mix(in oklab,var(--teal),transparent 55%)}
.dl-pc-pill.working .dl-pc-av,.dl-pc-mic.mic-active{animation:none}
}
/* app shell: the dock sits above the permanent tab bar (LAW 46.5) — same
   media arm as js/app-shell-tabbar.js */
@media (max-width:900px),((hover:none) and (pointer:coarse) and (max-width:1023px)){
.dl-pc-dock{bottom:calc(54px + env(safe-area-inset-bottom,0px) + var(--sp-3))}
}
/* phone: the open chat is a FULL sheet (LAW 32/46) — the tab bar yields
   (body.pearl-chat-open hides it), the sheet owns the viewport; 44px targets
   and 16px fields (LAW 45/48); the keyboard-fit JS stamps .pearl-kb-open so
   the composer sits flush on the keyboard with no home-indicator clearance */
@media (max-width:768px){
body.pearl-chat-open{overflow:hidden}
.dl-pc-dock{left:0;right:0;bottom:0;top:auto}
.dl-pc-dock.open{inset:0;bottom:0!important;right:0!important}
.dl-pc-dock.open .dl-pc-win{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.dl-pc-dock .dl-pc-hd{gap:var(--sp-2);padding:var(--sp-3);padding-top:calc(var(--sp-3) + env(safe-area-inset-top,0px))}
.dl-pc-dock .dl-pc-hdr{gap:var(--sp-1)}
/* !important on the select and the round buttons: mobile-responsive.css forces
   select{width:100%} and button{padding:12px 20px;border-radius:10px} with
   !important at these widths, which blew the row apart and squared the circles */
.dl-pc-dock .dl-pc-model{width:auto!important;min-width:60px;max-width:124px;height:var(--h-lg);min-height:var(--h-lg)!important;padding:0 var(--sp-2)!important;font-size:var(--fs-input)}
.dl-pc-dock .dl-pc-hbtn{width:var(--h-lg);height:var(--h-lg);padding:0!important;border-radius:50%!important}
.dl-pc-dock .dl-pc-hbtn svg{width:22px;height:22px}
.dl-pc-dock .dl-pc-input{gap:var(--sp-1);padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom,0px))}
.dl-pc-dock.pearl-kb-open .dl-pc-win{padding-bottom:0!important}
.dl-pc-dock.pearl-kb-open .dl-pc-input{padding-bottom:var(--sp-2)!important}
.dl-pc-dock .dl-pc-plus,.dl-pc-dock .dl-pc-mic,.dl-pc-dock .dl-pc-send{width:var(--h-lg);height:var(--h-lg);flex:0 0 var(--h-lg);padding:0!important;border-radius:50%!important}
.dl-pc-dock .dl-pc-plus svg,.dl-pc-dock .dl-pc-mic svg{width:22px;height:22px}
.dl-pc-dock .dl-pc-send svg{width:20px;height:20px}
/* readable body on a phone (LAW 32.7 floor) */
.dl-pc-dock .dl-pc-bubble{font-size:var(--fs-base)}
/* the minimized pill docks above the tab bar, clear of content */
.dl-pc-dock.minimized{left:auto;right:var(--sp-3);bottom:calc(74px + env(safe-area-inset-bottom,0px));top:auto}
}

/* --- PORTFOLIO BRAND SWITCHER (in the rail) --------------------- */
/* A parent company sees its brands in one portal; js/brand-switcher.js emits
   this family into #brandSwitcherContainer (portal shell) or its fallback
   slot. Ported from portal.html's inline block + the sheet the script used to
   inject with literal hex (a bespoke palette that went light-on-light on dark
   skins) on 2026-09-13. */
.dl-bsw-rail{padding:var(--sp-2);position:relative;z-index:100}
.dl-bsw{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2);background:color-mix(in oklab,var(--teal),transparent 90%);border:1px solid color-mix(in oklab,var(--teal),transparent 78%);border-radius:var(--r-md)}
.dl-bsw-hd{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.12em;color:var(--r-ink-3)}
.dl-bsw-hd svg{width:14px;height:14px;opacity:.9}
.dl-bsw-n{margin-left:auto;padding:2px var(--sp-2);background:color-mix(in oklab,var(--accent),transparent 70%);border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--r-ink)}
.dl-bsw-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);width:100%;min-height:var(--h-sm);padding:var(--sp-2) var(--sp-3);background:color-mix(in oklab,var(--r-ink),transparent 94%);border:1px solid color-mix(in oklab,var(--teal),transparent 82%);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--r-ink);cursor:pointer;transition:background .15s;text-align:left}
.dl-bsw-btn:hover{background:color-mix(in oklab,var(--teal),transparent 88%)}
.dl-bsw-btn svg{color:var(--r-ink-3);flex:0 0 auto}
.dl-bsw-cur{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-bsw-menu{position:fixed;top:auto;left:var(--sp-4);width:248px;background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-md);box-shadow:0 12px 32px color-mix(in oklab,var(--deep),transparent 55%);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:999999;max-height:280px;overflow-y:auto;color:var(--text-primary)}
.dl-bsw-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.dl-bsw-opt{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);min-height:var(--h-md);cursor:pointer;transition:background .15s;color:var(--text-primary)}
.dl-bsw-opt:hover{background:var(--bg-hover)}
.dl-bsw-opt.active{background:color-mix(in oklab,var(--accent),transparent 85%)}
.dl-bsw-opt.active .dl-bsw-name{color:var(--accent-ink);font-weight:var(--fw-bold)}
.dl-bsw-logo{width:32px;height:32px;border-radius:var(--r-xs);object-fit:contain;background:var(--bg-hover);padding:2px;flex:0 0 32px}
.dl-bsw-ini{width:32px;height:32px;flex:0 0 32px;border-radius:var(--r-xs);background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.dl-bsw-ini.all{background:linear-gradient(135deg,var(--teal),var(--teal-ink))}
.dl-bsw-info{flex:1;min-width:0}
.dl-bsw-name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-bsw-count{font-size:var(--fs-2xs);color:var(--text-muted);margin-top:2px;font-weight:var(--fw-semibold)}
.dl-bsw-check{color:var(--teal-ink);flex:0 0 auto}
.dl-bsw-div{height:1px;background:var(--card-line);margin:var(--sp-1) 0}

/* --- FIRST-LOGIN WELCOME + TOUR (client portal) ----------------- */
/* The welcome sheet rides the DialedModal chassis (LAW 43); these are its
   content blocks. The tour is an anchored glass popover with a soft pearl
   spotlight on the rail item it names. Ported from portal.html's inline block
   (literal #1F1828 / #4D4258 / white / #7DD3C0 palette) on 2026-09-13. */
.dl-welcome-card{background:linear-gradient(135deg,color-mix(in oklab,var(--accent),transparent 92%),color-mix(in oklab,var(--teal),transparent 94%));border:1px solid color-mix(in oklab,var(--accent),transparent 82%);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0}
.dl-welcome-card b{display:block;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary);margin-bottom:var(--sp-1)}
.dl-welcome-card p{margin:0;font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-body)}
.dl-welcome-next{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:color-mix(in oklab,var(--teal),transparent 90%);border-left:3px solid var(--teal);border-radius:var(--r-sm);margin-bottom:var(--sp-2)}
.dl-welcome-next .dl-label{color:var(--teal-ink);flex:0 0 auto;margin:0}
.dl-welcome-next p{margin:0;font-size:var(--fs-sm);color:var(--text-primary);font-weight:var(--fw-medium);line-height:var(--lh-body)}
.dl-welcome-acts{display:flex;flex-direction:column;gap:var(--sp-2);width:100%}
.dl-welcome-acts .dl-btn{width:100%;min-height:var(--h-lg);justify-content:center}
/* THE TOUR (H2, 2026-09-17): a cut-out HOLE over a plain dim. The pointed section or the whole rail sits
   in the hole at full brightness; nothing blurs (the old veil blurred the rail exactly while pointing at it). */
#tourOverlay{position:fixed;inset:0;z-index:9998;pointer-events:none;animation:dlFadeIn .36s cubic-bezier(.2,.8,.2,1)}
#tourOverlay.dl-leaving{animation:dlFadeOut .22s ease-in forwards}
@keyframes dlFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dlFadeOut{from{opacity:1}to{opacity:0}}
.dl-tour-catch{position:absolute;inset:0;pointer-events:auto;background:transparent}
.dl-tour-hole{position:absolute;pointer-events:none;border-radius:var(--r-2xl);
  box-shadow:0 0 0 2px color-mix(in oklab,var(--accent),transparent 35%),0 0 0 200vmax color-mix(in oklab,var(--deep),transparent 52%);
  transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
.dl-tour{position:fixed;width:360px;max-width:calc(100vw - var(--sp-8));pointer-events:auto;transition:top .4s cubic-bezier(.2,.8,.2,1),left .4s cubic-bezier(.2,.8,.2,1);animation:dlTourIn .42s cubic-bezier(.2,.8,.2,1);
filter:drop-shadow(0 10px 18px color-mix(in oklab,var(--deep),transparent 72%))}
@keyframes dlTourIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.dl-tour-card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6) var(--sp-4);
background:linear-gradient(color-mix(in oklab,var(--surface),var(--accent) 4%),color-mix(in oklab,var(--surface),var(--accent) 4%)),var(--canvas);
border:1px solid color-mix(in oklab,var(--accent),transparent 60%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -1px 0 color-mix(in oklab,var(--deep),transparent 96%) inset}
:root[data-tone="dark"] .dl-tour-card{box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
/* iridescent shimmer line along the top, the brand's ramp */
.dl-tour-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:.7;background:linear-gradient(90deg,transparent 0%,var(--accent) 18%,color-mix(in oklab,var(--accent),var(--surface) 55%) 38%,color-mix(in oklab,var(--teal),var(--surface) 45%) 58%,var(--teal) 78%,transparent 100%)}
.dl-tour-arrow{position:absolute;width:14px;height:14px;background:color-mix(in oklab,var(--surface),var(--accent) 4%);border:1px solid color-mix(in oklab,var(--accent),transparent 60%);border-width:1px 0 0 1px}
.dl-tour[data-side="right"] .dl-tour-arrow{left:-8px;top:50%;transform:translateY(-50%) rotate(-45deg)}
.dl-tour[data-side="below"] .dl-tour-arrow{top:-8px;left:50%;transform:translateX(-50%) rotate(45deg)}
.dl-tour[data-side="above"] .dl-tour-arrow{bottom:-8px;left:50%;transform:translateX(-50%) rotate(-135deg)}
.dl-tour[data-side="left"] .dl-tour-arrow{right:-8px;top:50%;transform:translateY(-50%) rotate(135deg)}
.dl-tour-dot.act2{border-radius:2px}
.dl-tour-eyebrow{font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);font-weight:var(--fw-bold);margin-bottom:var(--sp-2)}
.dl-tour-h{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--text-primary);margin:0 0 var(--sp-2);letter-spacing:var(--tr-tight);line-height:var(--lh-snug)}
.dl-tour-body{font-size:var(--fs-base);color:var(--text-secondary);line-height:var(--lh-body);margin:0 0 var(--sp-4)}
.dl-tour-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3)}
/* the last button is a job's verb ("Create your first offer"): it takes its own line rather than clipping */
.dl-tour-acts .dl-btn{white-space:nowrap}
.dl-tour-dots{display:flex;gap:var(--sp-1);flex:0 0 auto}
.dl-tour-dot{width:6px;height:6px;border-radius:50%;background:color-mix(in oklab,var(--accent),transparent 82%);transition:width .32s cubic-bezier(.2,.8,.2,1),background .32s}
.dl-tour-dot.done{background:color-mix(in oklab,var(--accent),transparent 40%)}
.dl-tour-dot.active{width:22px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent),var(--surface) 40%))}
.dl-tour-acts{display:flex;gap:var(--sp-2)}
.dl-tour-spot{border-radius:var(--r-md)!important;color:var(--rail-ink)!important;
  background:color-mix(in oklab,var(--accent),transparent 84%)!important;
  box-shadow:0 0 0 2px var(--accent),0 0 0 6px color-mix(in oklab,var(--accent),transparent 75%)!important;animation:dlTourPulse 2.4s ease-in-out infinite}
.dl-tour-spot svg{color:var(--rail-ink)!important}
#mobileTabBar .dl-tour-spot{border-radius:var(--r-lg)!important}
/* the tab bar is a light surface: --rail-ink is the DARK rail's near-white ink and painted the pointed tab invisible (Elle's recording 2026-09-18, 373 s) */
#mobileTabBar .dl-tour-spot,#mobileTabBar .dl-tour-spot svg,#mobileTabBar .dl-tour-spot span{color:var(--accent-ink)!important}
@keyframes dlTourPulse{0%,100%{box-shadow:0 0 0 2px var(--accent),0 0 0 6px color-mix(in oklab,var(--accent),transparent 75%)}50%{box-shadow:0 0 0 2px var(--accent),0 0 0 9px color-mix(in oklab,var(--accent),transparent 62%)}}
@media (prefers-reduced-motion:reduce){.dl-tour-spot{animation:none}}
@media (max-width:720px){
.dl-tour{width:calc(100vw - var(--sp-8));max-width:380px}
.dl-tour-card{padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.dl-tour-h{font-size:var(--fs-lg)}
}

/* --- CHAT MESSAGE ACTIONS -------------------------------------- */
/* reaction tapback bar */
.dl-ca-reactions{display:flex;align-items:center;gap:2px;padding:8px;border-radius:var(--r-pill);
background:var(--card);border:1px solid var(--card-line);
box-shadow:0 20px 50px -18px color-mix(in oklab,var(--deep),transparent 40%),inset 0 1px 0 0 rgba(255,255,255,.85);
backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
:root[data-tone="dark"] .dl-ca-reactions{box-shadow:0 22px 54px -18px rgba(0,0,0,.7),inset 0 1px 0 0 rgba(255,255,255,.10)}
.dl-ca-react{width:42px;height:42px;border:0;background:none;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;display:grid;place-items:center;transition:.14s}
.dl-ca-react:hover{background:var(--bg-hover);transform:scale(1.18)}
.dl-ca-react.dl-ca-on{background:color-mix(in oklab,var(--accent),transparent 82%)}
.dl-ca-react.dl-ca-more{font-size:20px;color:var(--text-secondary)}
/* the lifted message (stays sharp above the scrim) */
.dl-ca-lifted{max-width:82%;padding:8px 16px;border-radius:20px;border-bottom-left-radius:6px;font-size:var(--fs-sm);line-height:var(--lh-body);
background:var(--glass-hi);border:1px solid var(--card-line);color:var(--text-primary);
box-shadow:0 24px 60px -20px color-mix(in oklab,var(--deep),transparent 40%)}
.dl-ca-lifted b{font-weight:var(--fw-semibold)}
/* context menu */
.dl-ca-menu{width:250px;border-radius:var(--r-lg);overflow:hidden;
background:var(--card);border:1px solid var(--card-line);
box-shadow:0 24px 60px -12px color-mix(in oklab,var(--deep),transparent 38%),inset 0 1px 0 0 rgba(255,255,255,.85);
backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
:root[data-tone="dark"] .dl-ca-menu{box-shadow:0 26px 64px -18px rgba(0,0,0,.7),inset 0 1px 0 0 rgba(255,255,255,.10)}
.dl-ca-mi{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:12px var(--sp-4);border:0;background:none;cursor:pointer;
font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-primary);text-align:left;transition:.12s}
.dl-ca-mi:hover{background:var(--bg-hover)}
.dl-ca-mi + .dl-ca-mi{border-top:1px solid var(--card-line)}
.dl-ca-mi svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--text-secondary);stroke-width:1.8}
.dl-ca-mi .dl-ca-kb{margin-left:auto;font-size:var(--fs-2xs);color:var(--text-muted);font-weight:var(--fw-semibold)}
.dl-ca-mi.dl-ca-danger{color:var(--danger-ink)} .dl-ca-mi.dl-ca-danger svg{stroke:var(--danger-ink)}

/* --- DASHBOARD CARDS (KPI + BRAND) ----------------------------- */
.dl-cd-wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-cd-row{display:grid;gap:var(--sp-4)}
.dl-cd-row.dl-cd-kpis{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.dl-cd-row.dl-cd-kpis{grid-template-columns:1fr}}
/* base glass card */
.dl-cd-card{padding:var(--sp-5);border-radius:var(--r-xl);background:var(--pearl-white);border:1px solid var(--card-line);
box-shadow:inset 0 1px 0 0 var(--hi)}
/* KPI card */
.dl-cd-kpi{display:flex;flex-direction:column;gap:var(--sp-2);position:relative;overflow:hidden}
.dl-cd-kpi .dl-cd-lbl{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink)}
.dl-cd-kpi .dl-cd-num{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:var(--fw-black);letter-spacing:var(--tr-tight);line-height:1;color:var(--text-primary)}
.dl-cd-kpi .dl-cd-foot{display:flex;align-items:center;gap:var(--sp-2);margin-top:2px}
.dl-cd-trend{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.dl-cd-trend.dl-cd-up{color:var(--success-ink);background:var(--success-bg)} .dl-cd-trend.dl-cd-down{color:var(--danger-ink);background:var(--danger-bg)}
.dl-cd-trend svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4}
.dl-cd-kpi .dl-cd-sub{font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-cd-spark{position:absolute;right:var(--sp-4);top:var(--sp-4);width:88px;height:36px}
.dl-cd-spark path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.dl-cd-spark .dl-cd-fill{fill:color-mix(in oklab,var(--accent),transparent 88%);stroke:none}
/* brand card */
.dl-cd-brand{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-cd-btop{display:flex;align-items:center;gap:var(--sp-3)}
.dl-cd-logo{width:48px;height:48px;flex:0 0 48px;border-radius:var(--r-md);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-lg);color:var(--on-accent);background:var(--btn-primary-bg);box-shadow:0 6px 16px -8px var(--accent)}
.dl-cd-bname{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--tr-tight)}
.dl-cd-bmeta{font-size:var(--fs-xs);color:var(--text-secondary);margin-top:1px}
.dl-cd-pill{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--success-ink);background:var(--success-bg);border:1px solid color-mix(in oklab,var(--success),transparent 66%)}
.dl-cd-pill .dl-cd-dot{width:7px;height:7px;border-radius:50%;background:var(--success-ink)}
.dl-cd-bstats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--card-line)}
.dl-cd-bstat .dl-cd-k{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)}
.dl-cd-bstat .dl-cd-v{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text-primary);margin-top:2px}
.dl-cd-bstat .dl-cd-v small{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-secondary)}

/* --- MOBILE NAV (TAB BAR + SHEET) ------------------------------ */
.dl-nv-frame{position:fixed;inset:0;z-index:2;width:min(430px,100vw);margin:0 auto}
/* swipe-up sheet — clean, mostly-opaque surface (no mesh haze) */
.dl-nv-sheet{position:absolute;left:0;right:0;bottom:62px;z-index:1;display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 62px);border-radius:var(--r-2xl) var(--r-2xl) 0 0;overflow:hidden;
background:color-mix(in oklab, var(--pearl-white), transparent 6%);
border:1px solid var(--card-line);border-bottom:0;
box-shadow:0 -20px 80px -20px color-mix(in oklab,var(--deep),transparent 40%),inset 0 1px 0 0 var(--hi);
backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
.dl-nv-grab{flex:0 0 auto;width:40px;height:5px;border-radius:var(--r-pill);background:color-mix(in oklab,var(--text-muted),transparent 58%);margin:var(--sp-3) auto var(--sp-2)}
.dl-nv-shead{flex:0 0 auto;padding:0 var(--sp-4) var(--sp-1)}
.dl-nv-search{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-3);border-radius:var(--r-md);border:1px solid var(--card-line);background:var(--pearl-white);box-shadow:0 2px 10px -6px color-mix(in oklab,var(--deep),transparent 70%)}
.dl-nv-search svg{width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:2;flex:0 0 16px}
.dl-nv-search span{color:var(--text-muted);font-size:var(--fs-sm)}
.dl-nv-recents{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}
.dl-nv-rchip{display:inline-flex;align-items:center;gap:8px;height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid color-mix(in oklab,var(--accent),transparent 66%);background:color-mix(in oklab,var(--accent),transparent 88%);color:var(--accent-ink);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer}
.dl-nv-rchip svg{width:15px;height:15px;stroke:var(--accent-ink);fill:none;stroke-width:1.8}
.dl-nv-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-1) var(--sp-4) var(--sp-5)}
.dl-nv-body::-webkit-scrollbar{width:8px}.dl-nv-body::-webkit-scrollbar-thumb{background:var(--card-line);border-radius:var(--r-pill)}
/* section header — eyebrow + hairline */
.dl-nv-sec{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4) 2px var(--sp-2);font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink)}
.dl-nv-sec::after{content:'';flex:1;height:1px;background:var(--card-line)}
/* CLEAN horizontal cards — white/glass card + small colored icon chip + name */
.dl-nv-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.dl-nv-card{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 12px;border-radius:var(--r-md);cursor:pointer;text-align:left;font-family:var(--font-body);transition:.15s;
background:var(--pearl-white);border:1px solid var(--card-line);box-shadow:0 3px 12px -7px color-mix(in oklab,var(--deep),transparent 62%)}
.dl-nv-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px color-mix(in oklab,var(--deep),transparent 56%)}
.dl-nv-card .dl-nv-ic{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.dl-nv-card .dl-nv-ic svg{width:18px;height:18px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dl-nv-card .dl-nv-nm{flex:1;min-width:0;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:1.2;color:var(--text-primary)}
.dl-nv-card .dl-nv-ct{flex:0 0 auto;font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--accent-ink);background:color-mix(in oklab,var(--accent),transparent 86%);border-radius:var(--r-pill);padding:2px 8px}
/* per-section hue — small chip only (iris / teal / rose, adaptive per skin) */
.dl-nv-grp[data-tint="0"] .dl-nv-ic{background:color-mix(in oklab,var(--t1-ink),transparent 84%)} .dl-nv-grp[data-tint="0"] .dl-nv-ic svg{stroke:var(--t1-ink)}
.dl-nv-grp[data-tint="1"] .dl-nv-ic{background:color-mix(in oklab,var(--t2-ink),transparent 84%)} .dl-nv-grp[data-tint="1"] .dl-nv-ic svg{stroke:var(--t2-ink)}
.dl-nv-grp[data-tint="2"] .dl-nv-ic{background:color-mix(in oklab,var(--t3-ink),transparent 82%)} .dl-nv-grp[data-tint="2"] .dl-nv-ic svg{stroke:var(--t3-ink)}
/* bottom tab bar — the current clean bar + chrome-pearl Pearl pill */
.dl-nv-tabbar{position:absolute;left:0;right:0;bottom:0;z-index:10;height:62px;display:flex;align-items:stretch;padding:0 4px;
background:color-mix(in oklab,var(--pearl-white),transparent 6%);border-top:1px solid color-mix(in oklab,var(--accent),transparent 84%);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.dl-nv-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:none;cursor:pointer;color:var(--text-muted)}
.dl-nv-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.dl-nv-tab span{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.01em;color:inherit}
.dl-nv-tab.dl-nv-on{color:var(--accent-ink)}
.dl-nv-tab.dl-nv-pearl{overflow:visible}
/* a genuine pearl: lustrous nacre — specular highlight + soft iridescent sheen + depth */
.dl-nv-tab.dl-nv-pearl .dl-nv-pp{width:54px;height:54px;margin-top:-24px;border-radius:50%;display:grid;place-items:center;position:relative;
   color:#2D2438;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.3rem;letter-spacing:-.01em;
   background:
     radial-gradient(ellipse 42% 34% at 32% 24%, rgba(255,255,255,.98), rgba(255,255,255,0) 60%),
     conic-gradient(from 150deg at 50% 46%, rgba(178,204,255,.5), rgba(224,204,255,.42), rgba(255,208,228,.42), rgba(202,246,224,.42), rgba(232,222,255,.5), rgba(178,204,255,.5)),
     radial-gradient(circle at 45% 40%, #FCFCFE 0%, #ECEDF2 54%, #D3D6E0 100%);
   box-shadow:0 8px 22px color-mix(in oklab,var(--accent),transparent 58%),0 2px 6px rgba(28,28,30,.16),
     inset 0 3px 4px rgba(255,255,255,.95),inset 0 -6px 10px rgba(118,108,148,.30);
   border:1px solid rgba(255,255,255,.55)}
/* a faint sharp glint on the nacre */
.dl-nv-tab.dl-nv-pearl .dl-nv-pp::after{content:'';position:absolute;top:9px;left:13px;width:11px;height:7px;border-radius:50%;background:rgba(255,255,255,.9);filter:blur(1px);transform:rotate(-18deg)}
.dl-nv-tab.dl-nv-pearl span{color:var(--accent-ink)}

/* --- DATE PICKER ----------------------------------------------- */
.dl-dp-fieldwrap{width:min(320px,90vw)}
.dl-dp-lbl{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink);margin:0 0 8px 2px}
.dl-dp-field{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-3);border-radius:var(--r-md);border:1px solid color-mix(in oklab,var(--accent),transparent 45%);background:var(--pearl-white);color:var(--text-primary);font-size:var(--fs-base);font-weight:var(--fw-medium);cursor:pointer;box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 84%)}
.dl-dp-field svg{width:17px;height:17px;stroke:var(--text-muted);fill:none;stroke-width:1.9}
/* calendar popover */
.dl-dp-cal{width:min(320px,90vw);margin-top:var(--sp-1);padding:var(--sp-3);border-radius:var(--r-lg);
background:var(--pearl-white);border:1px solid var(--card-line);
box-shadow:0 24px 60px -12px color-mix(in oklab,var(--deep),transparent 34%),inset 0 1px 0 0 var(--hi)}
.dl-dp-calhd{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.dl-dp-calhd .dl-dp-m{font-family:var(--font-display);font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--text-primary)}
.dl-dp-navb{width:32px;height:32px;border-radius:50%;border:1px solid var(--card-line);background:var(--glass-hi);color:var(--text-secondary);display:grid;place-items:center;cursor:pointer}
.dl-dp-navb:hover{background:var(--bg-hover);color:var(--text-primary)}
.dl-dp-navb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.dl-dp-navb.dl-dp-next{margin-left:auto}
.dl-dp-navb.dl-dp-prev{margin-left:auto}
.dl-dp-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.dl-dp-dow span{text-align:center;font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.04em;color:var(--text-muted);padding:4px 0}
.dl-dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dl-dp-day{aspect-ratio:1;display:grid;place-items:center;border:0;background:none;cursor:pointer;border-radius:50%;
font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-primary);transition:.12s}
.dl-dp-day:hover{background:var(--bg-hover)}
.dl-dp-day.dl-dp-mute{color:var(--text-muted)}
.dl-dp-day.dl-dp-today{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--accent),transparent 40%);color:var(--accent-ink);font-weight:var(--fw-bold)}
.dl-dp-day.dl-dp-sel{background:var(--btn-primary-bg);color:var(--on-accent);font-weight:var(--fw-bold);box-shadow:0 6px 14px -6px var(--accent)}
.dl-dp-calft{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--card-line)}
.dl-dp-qb{height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid var(--card-line);background:var(--glass-hi);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer}
.dl-dp-qb.dl-dp-accent{border-color:transparent;background:var(--btn-primary-bg);color:var(--on-accent);margin-left:auto}

/* --- TOAST (STACK + VARIANTS) ---------------------------------- */
/* toast stack — bottom-center, above where the tab bar would be (LAW 46) */
.dl-ts-stack{position:fixed;left:0;right:0;bottom:var(--sp-6);z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);pointer-events:none}
.dl-ts-toast{position:relative;pointer-events:auto;display:flex;align-items:flex-start;gap:var(--sp-3);width:min(400px,94vw);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);overflow:hidden;
background:var(--card);border:1px solid var(--card-line);
box-shadow:0 20px 50px -12px color-mix(in oklab,var(--deep),transparent 40%),inset 0 1px 0 0 var(--hi);
backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
.dl-ts-ic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.dl-ts-ic svg{width:16px;height:16px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dl-ts-bd{flex:1;min-width:0}
.dl-ts-tt{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);letter-spacing:var(--tr-snug)}
.dl-ts-ms{font-size:var(--fs-xs);color:var(--text-secondary);line-height:var(--lh-body);margin-top:2px}
.dl-ts-act{flex:0 0 auto;align-self:center;height:var(--h-md);padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid color-mix(in oklab,var(--accent),transparent 55%);background:color-mix(in oklab,var(--accent),transparent 88%);color:var(--accent-ink);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer}
.dl-ts-x{flex:0 0 auto;width:22px;height:22px;border:0;background:none;color:var(--text-muted);cursor:pointer;display:grid;place-items:center;border-radius:50%;font-size:var(--fs-sm);margin-top:2px}
.dl-ts-x:hover{background:var(--bg-hover);color:var(--text-secondary)}
.dl-ts-bar{position:absolute;left:0;bottom:0;height:2px;border-radius:0 var(--r-pill) var(--r-pill) 0}
/* variants */
.dl-ts-toast.dl-ts-ok .dl-ts-ic{background:var(--success-bg)} .dl-ts-toast.dl-ts-ok .dl-ts-ic svg{stroke:var(--success-ink)} .dl-ts-toast.dl-ts-ok .dl-ts-bar{background:var(--success)}
.dl-ts-toast.dl-ts-bad   .dl-ts-ic{background:var(--danger-bg)}  .dl-ts-toast.dl-ts-bad .dl-ts-ic svg{stroke:var(--danger-ink)}   .dl-ts-toast.dl-ts-bad .dl-ts-bar{background:var(--danger)}
.dl-ts-toast.dl-ts-pearl   .dl-ts-ic{background:color-mix(in oklab,var(--accent),transparent 84%)} .dl-ts-toast.dl-ts-pearl .dl-ts-ic svg{stroke:var(--accent-ink)} .dl-ts-toast.dl-ts-pearl .dl-ts-bar{background:linear-gradient(90deg,var(--accent),var(--teal))}

/* --- PAGE SHELL + DASHBOARD ------------------------------------ */
/* The mocks get their reset from _mock-frame.css (dev only). A REAL rebuilt
   page opts in here instead, and everything is scoped to body.dl-page so that
   linking this sheet into a legacy page can never restyle it out from under
   itself — the 123 files that still redefine --iris are reason enough to keep
   the blast radius at zero. */
/* THE GLASS FLOOR (Elle 2026-08-04: "square box background on every page" —
   pages painted an OPAQUE canvas over the shell's mesh, so the glass had
   nothing behind it). The floor lives on <html>; the BODY is clear. Framed
   pages (inside the shell) clear <html> too, so the ONE shell mesh shows
   through the whole chain. Standalone pages get a mesh injected by
   skin-apply.js (.dl-canvas--page). LAW 36/47. */
html:has(> body.dl-page){background:var(--canvas)}
/* The mesh (.dl-canvas) is a FIXED viewport layer — alive while scrolling,
   but full-page capture tools stitch scrolled tiles and a fixed layer only
   paints the FIRST one, so long captures showed a hard cut to flat ground
   (Elle 2026-08-25: "what's with the mesh background cutting"). This
   DOCUMENT-anchored wash rides the body box (root backgrounds cannot scroll,
   so it must live here), sits UNDER the fixed mesh, and is scoped away from
   framed pages so shell compositing is untouched. Invisible in normal use;
   captures and overscroll fade through the skin's own hues instead of
   cutting. Tones come from skin tokens — no literal any skin lacks. */
:root:not(.dl-framed) body.dl-page{background:
  linear-gradient(180deg,
    color-mix(in oklab, var(--canvas), var(--accent) 10%) 0,
    color-mix(in oklab, var(--canvas), var(--teal, var(--accent)) 5%) 900px,
    var(--canvas) 2200px)}
:root.dl-framed:has(> body.dl-page){background:transparent}
.dl-canvas.dl-canvas--page{z-index:-1}
body.dl-page{font-family:var(--font-body);color:var(--text-primary);background:transparent;
  margin:0;   /* the UA's 8px default margin — full width is the LAW (Elle 2026-08-31) */
  overflow-x:clip;-webkit-font-smoothing:antialiased;
  /* THE ONE PAGE GUTTER (LAW D8.2 + LAW 46.1). The estate had SEVEN: 48px on
     notifications and team, 24 on calendar, 22 inline on six pages, 14 on
     task-board, 12 on pipeline, 8 on file-manager — declared two incompatible
     ways (inline style= versus a per-page sheet), which is exactly the
     "no pattern for pages" complaint. It is declared HERE, once, and the
     bottom clears the 74px mobile tab bar plus the home indicator so no page
     re-solves either. A page that genuinely needs a different gutter says so
     with data-gutter, it does not quietly redeclare the rule. */
  padding:var(--sp-5) var(--sp-5) calc(var(--tabbar-h) + var(--sp-4) + env(safe-area-inset-bottom,0px))}
/* PHONE GUTTER = THE LEDGER'S 12px (Elle 2026-08-28 graded the admin queue at
   "12px page edges both sides at 375, measured", and 2026-09-02: "the margins
   on the side are so big compared to admin" on the portal). One number, both
   shells, every page — the composed gate reads this same token. */
@media (max-width:640px){
  body.dl-page{padding-left:var(--sp-3);padding-right:var(--sp-3)}
}
body.dl-page[data-gutter="flush"]{padding-left:0;padding-right:0}
/* APPLE TOP BAND (Elle 2026-08-29: "every page has a huge wasted section at
   the top"). Framed on mobile, THREE gutters stacked — topbar margin + body
   page gutter + pagewrap padding ≈ 65px of air before the first word. The
   shell IS the top chrome; the page starts tight under it (~18px total). */
@media (max-width:768px){
  html.dl-framed body.dl-page{padding-top:var(--sp-2);
    /* LAW 46.7's own warning, caught live (2026-09-02 messages thread): the
       shell's content-frame ALREADY clears the tab bar (54px + safe-area
       padding in app-shell-tabbar.js), so the page-level tab-bar clearance
       double-compensated — a ~145px phantom band under every framed page and
       a composer floating mid-air. Framed pages keep only a breathing gap;
       the unframed direct-load path keeps the full clearance above. */
    padding-bottom:var(--sp-4)}
}
/* The SHELL is chrome, not a page — it owns its own fit (LAW 46.1) and must not
   inherit the page gutter, or the rail/topbar inset doubles and a 90px dead
   band opens under the frame. Declared, not silently special-cased. */
body.dl-page[data-gutter="none"]{padding:0}
:where(body.dl-page) *{box-sizing:border-box;margin:0;padding:0}
/* :where() keeps the scope but contributes ZERO specificity, so this behaves
   exactly like the bare `*` reset it replaces. Written as `body.dl-page *` it
   scored (0,1,1) and beat every component class — .dl-shell lost its 124px
   left padding and the floating rail sat on top of the content. The gate did
   not catch that: it measures contrast and fit, not layout correctness. Eyes
   did. */

/* Certified KPI tiles + brand card (the .dl-cd-* family, lifted from the graded
   cards mock) sit in the page grid. */
.dl-grid > .dl-cd-card{grid-column:span 6}
@media (max-width:900px){.dl-grid > .dl-cd-card{grid-column:span 12}}

/* Service/agent liveness rows */
.dl-db-health{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:12px}
.dl-db-health + .dl-db-health{border-top:1px solid var(--card-line)}
.dl-db-led{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.dl-db-led.dl-ok{background:var(--success);box-shadow:0 0 0 3px var(--success-bg)}
.dl-db-led.dl-warn{background:var(--warning);box-shadow:0 0 0 3px var(--warning-bg)}
.dl-db-health .dl-db-t{flex:1;color:var(--text-secondary)}
.dl-db-health .dl-db-v{color:var(--text-secondary);font-size:12px}
/* Sample-pipeline stage rows */
.dl-db-stage{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:8px 0;color:var(--text-secondary)}
.dl-db-stage + .dl-db-stage{border-top:1px solid var(--card-line)}
.dl-db-stage span{color:var(--text-secondary);font-size:12px}
/* Pipeline bar chart */
.dl-db-bars{display:flex;align-items:flex-end;gap:4px;height:56px;margin-top:16px}
.dl-db-bars i{flex:1;border-radius:4px 4px 2px 2px;background:var(--accent);opacity:.85}

/* the KPI band needs air before the section bar that follows it */
body.dl-page .dl-cd-kpis{margin-bottom:var(--sp-5)}

/* --- MOBILE REFLOW FOR THE FULL-HEIGHT SHEETS ------------------ */
/* Making the sheet full-height exposed the real work: this content was composed
   for a 620px column and, unzoomed at 375, side-by-side fields collide and wide
   tables clip. Multi-column rows stack; a genuinely tabular block scrolls inside
   its own container rather than being crushed (LAW 46.1). */
@media (max-width:480px){
  /* Pair, do not stack. Blanket-stacking turned every two-up row into two
     full-width rows and left the right half of the sheet empty — a 375px column
     still fits two 148px fields side by side. auto-fit keeps them paired where
     they fit and drops to one only where they genuinely cannot. */
  /* contact type: one swipeable row, not two ragged rows of bubbles */
  .dl-ac-seg{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .dl-ac-seg::-webkit-scrollbar{display:none}
  .dl-ac-seg label{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .dl-ac-row,.dl-sr-row2,.dl-sr-fldrow{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) * 2),1fr));gap:var(--sp-3)}
  /* two dates always fit two-up: 148px minimums plus the gap tipped auto-fit to a
     single column at 299px of usable width, which is not what a date needs */
  .dl-po-grid{grid-template-columns:1fr 1fr;gap:var(--sp-3)}
  .dl-ac-row > *,.dl-sr-row2 > *{width:auto;min-width:0}
  /* the product picker keeps two-up too: the thumbnail carries the recognition,
     the name only has to confirm it */
  .dl-sr-cards{grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) * 2),1fr))}
  .dl-po-lxscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dl-po-lxscroll > *{min-width:520px}
  /* compose: the send button is the primary action and takes the width it needs;
     the icon row keeps its 44px targets */
  .dl-cp-fbtn{width:var(--h-lg);height:var(--h-lg);flex:0 0 var(--h-lg)}
  /* inline "add another field" actions are real targets, not captions */
  .dl-ac-ghostadd,.dl-sr-selall,.dl-sr-madd{min-height:var(--h-lg);display:inline-flex;align-items:center}
  /* choice pills: --h-md is 40 and reads fine with a mouse, 4px short under a thumb */
  .dl-ac-seg label,.dl-sr-tchip,.dl-sr-chip{height:var(--h-lg)}
  /* Four tool buttons + Discard + Send does not fit 375 in one row. The footer
     wraps: tools and Discard stay on the first row, the primary action takes the
     whole second row where it is unmissable and comfortably tappable. */
  /* Compose is a place to WRITE. Measured before this: the editor body had 40px
     of visible height against 332px of content, because the recipient stack, the
     toolbar and a wrapped two-row footer had taken the sheet. The second and
     third tool buttons move behind the attach control, the empty Cc row waits
     until it is asked for, and the footer stays one row. */
  .dl-dlg-foot{flex-wrap:nowrap;row-gap:0}
  .dl-cp-fbtn:nth-of-type(n+3){display:none}
  .dl-cp-discard{margin-left:auto;padding:0 var(--sp-3)}
  .dl-cp-send{margin-left:var(--sp-2);padding:0 var(--sp-4)}
  .dl-cp-editor{min-height:calc(var(--sp-16) * 3)}
}

/* --- DASHBOARD ON A PHONE -------------------------------------- */
/* Scoped to body.dl-page so the graded cards mock is untouched. The complaint
   these answer: everything was full width and stacked, so the ask-Pearl block
   plus four chips plus three KPI tiles filled two screens before a single
   widget appeared. Suggestions and KPIs are scan-and-swipe content, not a list. */
@media (max-width:900px){
  /* KPI tiles swipe as a row, sized so the next one peeks and the row reads as
     scrollable without a scrollbar to tell you so */
  body.dl-page .dl-cd-kpis{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:var(--sp-4)}
  body.dl-page .dl-cd-kpis::-webkit-scrollbar{display:none}
  body.dl-page .dl-cd-kpis > .dl-cd-card{flex:0 0 100%;scroll-snap-align:center}
  /* the prompt is an entry point, not a panel: give the page back the height */
  body.dl-page .dl-prompt{padding:var(--sp-3)}
  body.dl-page .dl-prompt-field{min-height:0;padding:var(--sp-3)}
}

/* --- PHONE TAP TARGETS ACROSS THE LIBRARY ---------------------- */
/* Unzooming the sheets exposed these: at 0.57 scale a 30px icon button measured
   17 on screen and nobody could see it was wrong, because everything was wrong
   together. At real size the 44px floor (LAW 32.5 / LAW 46) binds every control. */
@media (max-width:480px){
  /* square icon buttons */
  .dl-cp-wb,.dl-cp-t,.dl-cp-ax,.dl-pc-hbtn,.dl-pc-mic,.dl-pc-send,.dl-ts-x,.dl-dp-navb{
    width:var(--h-lg);height:var(--h-lg);flex:0 0 var(--h-lg)}
  /* pills, chips and inline controls */
  .dl-cp-tsel,.dl-pc-model,.dl-pc-chip,.dl-pc-plus,.dl-dp-qb,.dl-nv-rchip,
  .dl-sd-btnrow,.dl-ts-act,.dl-menu-item{min-height:var(--h-lg)}
  .dl-sr-tchip{min-width:var(--h-lg)}
  /* text entry rows */
  .dl-cp-rin,.dl-cp-subj{min-height:var(--h-lg)}
  /* a recipient chip truncates rather than wrapping to two lines and pushing the
     To row to 115px — the name is the identifier, the address is confirmation */
  .dl-cp-rchip{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dl-cp-recips{flex-wrap:nowrap;min-width:0}
  /* the label leads the row: centred against a two-line recipient block it reads
     as sitting underneath the chip rather than labelling it */
  .dl-cp-row{align-items:flex-start}
  .dl-cp-lbl{padding-top:var(--sp-3)}
  /* remove-x inside a chip is still a target someone has to hit */
  .dl-sr-chip button{width:var(--h-lg);height:var(--h-lg);margin-right:calc(var(--sp-2) * -1)}
  /* the calendar needs the room for 7 columns of 44 */
  .dl-dp-cal{width:100%}
  /* the plus is a square target like its siblings */
  .dl-pc-plus{width:var(--h-lg);flex:0 0 var(--h-lg)}
  /* a bare input inside a styled field pill measured 17px tall while its wrapper
     was 44: stretch it so the whole pill is the target, which is also what a
     thumb expects when it lands anywhere in the field */
  .dl-sr-search input,.dl-searchfield input{align-self:stretch;min-height:var(--h-lg)}
  .dl-dp-day{height:var(--h-lg);min-width:var(--h-lg)}
}

/* DELETED (U39, 2026-08-29): the phone "scroll affordance" fade block.
   .dl-po-lxscroll was a phantom selector; .dl-cp-tb's buttons FIT at 390
   (runtime probe, fade-law-sweep), so its fade only ever erased the last
   button's edge. A fade is earned by ACTUAL overflow, never worn as
   decoration — and CSS cannot see overflow, so no static fade here. */

/* --- PAIRED SECTION ROW ---------------------------------------- */
/* Two short sections sitting side by side instead of stacking, so a phone does
   not spend a whole row on 100px of content and 250px of nothing. auto-fit means
   it degrades to one column only when the columns would genuinely be too narrow. */
.dl-pairrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) * 2),1fr));
  gap:var(--dlg-body-gap,var(--sp-4));align-items:start}

/* --- TOOLTIP SPECIMEN STAGGER ---------------------------------- */
/* Both states are shown at once so they can be compared; without a stagger the
   rich variant covers the simple one and neither reads. This is staging of the
   specimen, not the component: a real tooltip has one instance at a time. */
.dl-anchor:nth-of-type(2) .dl-tip{bottom:auto;top:calc(100% + var(--sp-3))}
.dl-anchor:nth-of-type(2) .dl-tip::after{top:auto;bottom:100%;
  border-top-color:transparent;border-bottom-color:color-mix(in oklab,var(--deep),transparent 6%)}

/* --- U6 ADDENDUM · GLASS CLIPS TO ITS OWN RADIUS --------------- */
/* Chromium does not clip a backdrop-filter region to the element's border-radius
   unless the element also establishes a clip. Without this, every glass surface
   paints a SQUARE shoulder outside its rounded corner — visible on the dashboard
   top bar at the top-left, and present on 12 of the 17 filtered rules in this
   sheet. This is a law, not a patch: any surface that combines backdrop-filter
   with a radius clips itself. */
/* NB: the tab bars are deliberately NOT in this list. The Pearl orb rises above
   the bar and clipping it would cut the orb in half. */
/* NB: .dl-tablewrap is deliberately NOT here. It must SCROLL sideways, and a
   blanket overflow:hidden silently overrode its overflow-x:auto — the table
   clipped at 325px with 699px of content and no way to reach the rest. */
.dl-rail,.dl-topbar,.dl-prompt,.dl-card,.dl-tip,.dl-scrim,
.dl-sheet,.dl-ca-reactions,.dl-cd-card{
  overflow:hidden;isolation:isolate}
.dl-tablewrap{overflow-x:auto;overflow-y:hidden}
/* the rail expands on hover and must not clip its own labels */
.dl-rail{overflow-y:auto;overflow-x:hidden}

/* --- U13 ADDENDUM · CONTENT SURFACES DO NOT FILTER ------------- */
/* A backdrop-filter paints a RECTANGULAR region that the element's own
   border-radius does not clip once an ancestor scrolls. On the dashboard's
   swipeable KPI row that showed as a grey square wedge outside every card's
   rounded corner. A content card is opaque by contract anyway (--surface is 88%
   opaque, so the blur contributed 12% of nothing), which makes the filter pure
   cost. Filtering belongs to surfaces that sit OVER content and need it sensed
   through them: the modal, the rail, the tab bar, the tooltip, the scrim. */

/* --- U7 ADDENDUM · A SHADOW MUST NOT SQUARE ITS OWN CORNERS ---- */
/* A box-shadow with a negative spread shrinks its rectangle by that amount on
   every side, and the corner radius shrinks with it. Once |spread| >= radius the
   radius reaches zero and the shadow paints SQUARE corners just outside a rounded
   element — a hard grey point sitting against the arc. Ten rules in this sheet
   did that (the dashboard KPI card was 0 20px 50px -22px against a 20px radius),
   which is the "rounded corner with a square point next to it" defect.
   THE RULE: |negative spread| <= radius - 4. Enforced by scripts/check-tokens.sh. */

/* --- U13 ADDENDUM · A CONTENT CARD CASTS NO DROP SHADOW -------- */
/* A drop shadow under a rounded card paints INTO the corner notch, so the notch
   shows shadow rather than the page and reads as a grey square wedge against the
   arc. Softening it only made the wedge fainter; removing it makes the corner a
   clean arc, confirmed by sampling the notch pixel against the page background.
   Apple's grouped cards work the same way: a fill, a hairline, no shadow.
   Elevation is for things that FLOAT — modals, menus, toasts, the rail. A card
   sitting in the page is not floating. */

/* --- PEARL IS ALWAYS ON TOP ------------------------------------ */
/* The orb rises above the tab bar, so any ancestor that clips or any sibling
   that outranks it will cut it in half or bury it. It carries its own stacking
   context above every chrome layer, and nothing in its ancestry clips. */
.dl-nv-tabbar,.dl-tabbar{overflow:visible}
.dl-nv-pearl,.dl-tab-pearl{position:relative;z-index:120}
.dl-nv-pp,.dl-tab-pearl .dl-pearl{position:relative;z-index:121}

/* --- COMPOSE · CC/BCC DISCLOSURE ------------------------------- */
/* A chevron at the end of the To line, not a row of its own. A dedicated row
   collided with the From address and spent a whole line on a control nobody
   uses most of the time. Compose opens collapsed, which is the common case;
   tapping the chevron expands Cc and Bcc in place. */
.dl-cp-more{flex:0 0 var(--h-lg);width:var(--h-lg);height:var(--h-lg);border:0;background:none;
  display:grid;place-items:center;cursor:pointer;color:var(--text-muted);border-radius:var(--r-pill)}
.dl-cp-more:hover{background:var(--bg-hover);color:var(--text-primary)}
.dl-cp-more svg{width:var(--ic-md);height:var(--ic-md);fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base)}
.dl-cp-more[aria-expanded="true"] svg{transform:rotate(180deg)}

.dl-cp-recips{min-width:0}
.dl-cp-rchip{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- COMPOSE · MAIL-CLIENT ORDER ------------------------------- */
/* The avatar is a fixed circle. Inside a chip that truncates, a flex item with
   only a width gets compressed into an oval — it needs its basis pinned. */
.dl-cp-rav{flex:0 0 22px;width:22px;height:22px;border-radius:var(--r-pill)}
/* The format bar sits at the BOTTOM, above the send bar, the way Mail puts it
   above the keyboard — and the attachment tray sits directly above the format
   bar rather than floating in the middle of the message. */
/* These bands are PART of the glass sheet, not panels sitting on it. The sheet
   already blurs what is behind it; filtering again inside stacks a second frosted
   layer and paints an opaque white slab across the middle of the overlay. They
   carry a hairline and nothing else, so the one piece of glass reads as one. */
.dl-cp-tb{flex:0 0 auto;border-top:0;border-bottom:1px solid var(--card-line);background:transparent}
/* One row holds every attachment: small chips that scroll sideways, so two files
   cost 52px instead of 240. Sits between the recipients and the style bar, which
   is where a mail client puts what you have added to the message. Glass, like the
   rest of this overlay — it is part of the sheet, not a panel bolted to it. */
.dl-cp-att{flex:0 0 auto;margin:0;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--sp-2);
  align-items:center;padding:var(--sp-2) var(--sp-4);overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--card-line);background:transparent}
.dl-cp-att::-webkit-scrollbar{display:none}
/* Fixed-width chips. A file name that runs long truncates rather than stretching
   the chip, so the row stays a predictable rhythm no matter what is attached —
   the icon and the size carry the identification, the name confirms it. */
.dl-cp-aitem{display:inline-flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;
  width:calc(var(--sp-16) * 3);min-width:0;
  height:var(--h-lg);padding:0 var(--sp-1) 0 var(--sp-3);border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--glass-hi),transparent 35%);border:1px solid var(--card-line);
  font-size:var(--fs-xs);color:var(--text-secondary);white-space:nowrap}
.dl-cp-aitem .dl-cp-fi{width:14px;height:14px;flex:0 0 14px}
/* only the NAME truncates: the size and the remove keep their room, so a long
   file name never pushes the controls out of its own chip */
.dl-cp-aitem{overflow:hidden;white-space:nowrap}
.dl-cp-an{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-cp-asz{flex:0 0 auto}
/* the remove is a real target, so the chip is a real target's height */
.dl-cp-att .dl-cp-ax{margin-left:0;flex:0 0 var(--h-lg);width:var(--h-lg);height:var(--h-lg);font-size:var(--fs-2xs)}

/* A recipient chip carries the NAME. The address is how the machine finds the
   person; the name is how Elle knows who it is going to — and an address that
   truncates mid-domain tells you nothing anyway. Typing resolves a contact and
   the name is what lands in the chip. */
.dl-cp-rchip{max-width:none;overflow:visible;text-overflow:clip}
.dl-cp-rin{margin-left:var(--sp-2)}

/* ═══════════════ PEARL ACTION CARDS (LAW 19) ═══════════════════ */
/* The contract LAW 19 sets, encoded once so no card can drift from it:
   one headline that is verb + object, a description of one or two sentences,
   ONE primary CTA carrying the actual verb, every identifier already resolved to
   a human name, and sources as collapsed chips that open in place. Iris is the
   primary CTA and nothing else; teal and the status inks carry state. */
.dl-pact{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--card-line);
  box-shadow:inset 0 1px 0 0 var(--hi)}
/* Family marker: the 2px iridescent top hairline the chassis already uses, tinted
   per family. A 3px left bar is the LEGACY pearl-actions convention (19 uses in
   the old sheet) and importing it here would have carried the old theme into the
   new one. The glass system marks a surface across its top edge, not down its side. */
.dl-pact::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  border-radius:var(--r-xl) var(--r-xl) 0 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--t1-ink),transparent 40%),color-mix(in oklab,var(--accent),transparent 30%),color-mix(in oklab,var(--t3-ink),transparent 40%),transparent)}
.dl-pact.dl-pact-risk::before{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--danger),transparent 46%),color-mix(in oklab,var(--danger),transparent 22%),color-mix(in oklab,var(--danger),transparent 46%),transparent)}
.dl-pact.dl-pact-watch::before{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--teal),transparent 46%),color-mix(in oklab,var(--teal),transparent 22%),color-mix(in oklab,var(--teal),transparent 46%),transparent)}
.dl-pact.dl-pact-task::before{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--t2-ink),transparent 46%),color-mix(in oklab,var(--t2-ink),transparent 22%),color-mix(in oklab,var(--t2-ink),transparent 46%),transparent)}

.dl-pact-hd{display:flex;align-items:flex-start;gap:var(--sp-3)}
.dl-pact-eyebrow{font-family:var(--font-accent);font-style:italic;font-size:var(--fs-sm);color:var(--teal-ink)}
.dl-pact-title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);color:var(--text-primary);margin-top:1px}
.dl-pact-desc{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-secondary);max-width:60ch}
.dl-pact-desc b{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* chips: Pearl authorship, confidence, priority. Ink on an opaque tint. */
.dl-pact-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.dl-pact-chip{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-sm);
  padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);letter-spacing:.04em;white-space:nowrap}
.dl-pact-chip.dl-pearl-chip{color:var(--accent-ink);background:color-mix(in oklab,var(--accent),var(--pearl-white) 82%);
  border:1px solid color-mix(in oklab,var(--accent),transparent 74%)}
.dl-pact-chip.dl-pearl-chip .dl-pact-orb{width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 75%)}
.dl-pact-chip.dl-conf{color:var(--teal-ink);background:color-mix(in oklab,var(--teal),var(--pearl-white) 84%);
  border:1px solid color-mix(in oklab,var(--teal),transparent 74%)}
.dl-pact-chip.dl-pri-now{color:var(--danger-ink);background:color-mix(in oklab,var(--danger),var(--pearl-white) 84%);
  border:1px solid color-mix(in oklab,var(--danger),transparent 74%)}
.dl-pact-chip.dl-pri-soon{color:var(--warning-ink);background:color-mix(in oklab,var(--warning),var(--pearl-white) 84%);
  border:1px solid color-mix(in oklab,var(--warning),transparent 74%)}
.dl-pact-chip.dl-pri-when{color:var(--text-secondary);background:var(--bg-hover);border:1px solid var(--card-line)}

/* source chip — collapsed by default, opens in place (LAW 19 progressive disclosure) */
.dl-pact-src{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--h-lg);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);text-align:left;cursor:pointer;
  background:var(--bg-hover);border:1px solid var(--card-line);font-family:var(--font-body)}
.dl-pact-src:hover{background:var(--glass-hi)}
.dl-pact-av{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:#fff;
  background:linear-gradient(145deg,var(--deep),var(--accent))}
.dl-pact-srcm{flex:1;min-width:0}
.dl-pact-srcm b{display:block;font-family:var(--font-display);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-pact-srcm i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-pact-count{flex:0 0 auto;font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--teal-ink)}

/* WHY expander — Pearl's reasoning, closed until asked for */
.dl-pact-why{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-lg);
  padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-body);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--accent-ink);text-align:left}
.dl-pact-why svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base)}
.dl-pact-why[aria-expanded="true"] svg{transform:rotate(180deg)}
.dl-pact-whybody{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--text-secondary);
  padding:var(--sp-3);border-radius:var(--r-md);background:var(--bg-hover);border:1px solid var(--card-line)}

/* the draft/quote body a card puts up for review */
.dl-pact-quote{padding:var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-sm);
  line-height:var(--lh-body);color:var(--text-secondary);
  background:color-mix(in oklab,var(--pearl-white),var(--canvas) 24%);border:1px solid var(--card-line)}
.dl-pact-quote b{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* key/value pairs for decision + record cards */
.dl-pact-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) * 2),1fr));
  gap:var(--sp-3)}
.dl-pact-k{font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--teal-ink);margin-bottom:var(--sp-1)}
.dl-pact-v{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-pact-v s{color:var(--text-secondary);font-weight:var(--fw-medium);margin-right:var(--sp-2)}

/* footer: ONE primary, carrying the real verb (LAW 19); secondaries stay quiet */
.dl-pact-ft{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding-top:var(--sp-3);border-top:1px solid var(--card-line)}
.dl-pact-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--h-lg);padding:0 var(--sp-4);border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap}
.dl-pact-btn svg{width:var(--ic-sm);height:var(--ic-sm);fill:none;stroke:currentColor;stroke-width:2}
.dl-pact-go{margin-left:auto;border:0;color:var(--on-accent);background:var(--btn-primary-bg);
  box-shadow:0 8px 20px -10px var(--accent)}
.dl-pact-go svg{stroke:var(--on-accent)}
.dl-pact-2nd{border:1px solid color-mix(in oklab,var(--accent),transparent 60%);
  background:color-mix(in oklab,var(--accent),var(--pearl-white) 90%);color:var(--accent-ink)}
.dl-pact-quiet{border:1px solid var(--card-line);background:var(--glass-hi);color:var(--text-secondary)}

/* queue states */
.dl-pact.dl-is-done{opacity:.72}
.dl-pact.dl-is-done::before{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--success),transparent 46%),color-mix(in oklab,var(--success),transparent 22%),color-mix(in oklab,var(--success),transparent 46%),transparent)}
.dl-pact.dl-is-gone::before{background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--text-tertiary),transparent 40%),transparent)}
.dl-pact-stamp{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold)}
.dl-pact-stamp.dl-ok{color:var(--success-ink)}
.dl-pact-stamp.dl-gone{color:var(--text-secondary)}
.dl-pact-stamp.dl-bad{color:var(--danger-ink)}
.dl-pact-err{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3);
  border-radius:var(--r-md);font-size:var(--fs-xs);line-height:var(--lh-body);
  color:var(--danger-ink);background:color-mix(in oklab,var(--danger),var(--pearl-white) 88%);
  border:1px solid color-mix(in oklab,var(--danger),transparent 76%)}
.dl-pact-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-10) var(--sp-4);text-align:center}
.dl-pact-empty h3{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-pact-empty p{font-size:var(--fs-sm);color:var(--text-secondary);max-width:44ch}
.dl-pact-empty .dl-pearl{width:52px;height:52px}

/* the queue itself */
.dl-pact-queue{display:flex;flex-direction:column;gap:var(--sp-3);width:min(560px,100%)}
@media (max-width:480px){
  /* The primary goes LAST, not first. Stacked, it was sitting above Discard and
     Edit, which reads as the card asking you to commit before it has shown you
     the alternatives — and it is the opposite of the bottom-right position it
     holds on desktop, so muscle memory breaks between the two. */
  .dl-pact-ft{gap:var(--sp-2);flex-wrap:wrap}
  .dl-pact-go{margin-left:0;flex:1 0 100%;order:2}
  .dl-pact-btn:not(.dl-pact-go){flex:1 1 auto}
  /* the chip row swipes rather than stacking three deep */
  .dl-pact-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .dl-pact-chips::-webkit-scrollbar{display:none}
  .dl-pact-chip{flex:0 0 auto}
}

/* ═══════════════ FEATURE CARDS + ROWS (surface list §6) ════════ */
/* The surfaces every list and detail page is assembled from. They share ONE
   shell so a contact, a sample and a PO cannot drift apart: glass surface, a
   hairline, no drop shadow (a card in a page is not floating), and the family
   marked by the 2px top hairline the chassis uses. Rows, tags, pips and avatars
   are the framework primitives already in this sheet — extended, not forked. */
.dl-fc{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-4);border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--card-line);box-shadow:inset 0 1px 0 0 var(--hi)}
.dl-fc::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  border-radius:var(--r-xl) var(--r-xl) 0 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--t1-ink),transparent 40%),color-mix(in oklab,var(--accent),transparent 30%),color-mix(in oklab,var(--t3-ink),transparent 40%),transparent)}
.dl-fc.dl-fc-flat::before{display:none}
.dl-fc-link{cursor:pointer;text-align:left;font-family:var(--font-body);width:100%}
.dl-fc-link:hover{border-color:color-mix(in oklab,var(--accent),transparent 55%)}

/* identity block: monogram or logo, name, one line of context, a status pill */
.dl-fc-top{display:flex;align-items:center;gap:var(--sp-3)}
.dl-fc-mark{width:var(--sp-10);height:var(--sp-10);flex:0 0 var(--sp-10);border-radius:var(--r-md);
  display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-sm);
  font-weight:var(--fw-bold);color:#fff;background:linear-gradient(145deg,var(--deep),var(--accent))}
.dl-fc-mark.dl-fc-round{border-radius:50%}
/* One monogram treatment, not two. A tinted variant could not hold AA across
   17 skins at any mix that still read as a tint, and two monograms for one job
   is the parallel-implementation problem in miniature (LAW 36). */
.dl-fc-id{flex:1;min-width:0}
.dl-fc-name{display:block;font-family:var(--font-display);font-size:var(--fs-base);font-weight:var(--fw-semibold);
  color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-fc-meta{display:block;font-size:var(--fs-xs);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-fc-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-sm);
  padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.dl-fc-pill.dl-ok{color:var(--success-ink);background:color-mix(in oklab,var(--success),var(--pearl-white) 84%)}
.dl-fc-pill.dl-warn{color:var(--warning-ink);background:color-mix(in oklab,var(--warning),var(--pearl-white) 84%)}
.dl-fc-pill.dl-bad{color:var(--danger-ink);background:color-mix(in oklab,var(--danger),var(--pearl-white) 84%)}
.dl-fc-pill.dl-info{color:var(--teal-ink);background:color-mix(in oklab,var(--teal),var(--pearl-white) 84%)}
.dl-fc-pill .dl-fc-dot{width:8px;height:8px;border-radius:50%;background:currentColor}

/* the stat strip a card carries under its identity */
.dl-fc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) + var(--sp-8)),1fr));
  gap:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--card-line)}
.dl-fc-k{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--teal-ink);margin-bottom:var(--sp-1)}
.dl-fc-v{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-fc-v small{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-secondary)}

/* a line of detail inside a card */
.dl-fc-line{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-fc-line svg{width:var(--ic-sm);height:var(--ic-sm);flex:0 0 var(--ic-sm);stroke:var(--text-secondary);fill:none;stroke-width:1.8}
.dl-fc-line b{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* ── KANBAN COLUMN ─────────────────────────────────────────────── */
.dl-kan{display:flex;flex-direction:column;gap:var(--sp-3);width:min(300px,100%);
  padding:var(--sp-3);border-radius:var(--r-xl);border:1px solid var(--card-line);
  /* a recessed but OPAQUE trough: --bg-hover is translucent, so in dark skins the
     column heading was really sitting on the mesh (measured 4.3 on onyx) */
  background:color-mix(in oklab,var(--pearl-white),var(--canvas) 45%)}
.dl-kan-hd{display:flex;align-items:center;gap:var(--sp-2)}
.dl-kan-hd h4{font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:var(--fw-black);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-primary)}
.dl-kan-n{font-size:var(--fs-2xs);font-weight:var(--fw-bold);padding:2px var(--sp-2);
  border-radius:var(--r-pill);background:var(--surface);color:var(--text-secondary);border:1px solid var(--card-line)}
.dl-kan-add{margin-left:auto;width:var(--h-lg);height:var(--h-lg);border:0;background:none;border-radius:var(--r-md);
  color:var(--text-secondary);cursor:pointer;display:grid;place-items:center}
.dl-kan-add:hover{background:var(--surface);color:var(--text-primary)}
.dl-kan-add svg{width:var(--ic-md);height:var(--ic-md);fill:none;stroke:currentColor;stroke-width:2}

/* ── EMAIL ROW (S/V source badge) ──────────────────────────────── */
.dl-erow{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--h-lg);
  padding:var(--sp-3);border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--card-line);cursor:pointer;text-align:left;font-family:var(--font-body)}
.dl-erow:hover{border-color:color-mix(in oklab,var(--accent),transparent 55%)}
.dl-erow.dl-unread .dl-erow-subj{font-weight:var(--fw-bold);color:var(--text-primary)}
.dl-erow-src{flex:0 0 auto;width:22px;height:22px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:0}
.dl-erow-src.dl-src-s{color:var(--accent-ink);background:color-mix(in oklab,var(--accent),var(--pearl-white) 80%)}
.dl-erow-src.dl-src-v{color:var(--teal-ink);background:color-mix(in oklab,var(--teal),var(--pearl-white) 80%)}
.dl-erow-m{display:block;flex:1;min-width:0}
.dl-erow-from{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-erow-subj{display:block;font-size:var(--fs-xs);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-erow-when{flex:0 0 auto;font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--text-secondary)}

/* ── MESSAGE THREAD ────────────────────────────────────────────── */
.dl-thread{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-msg{display:flex;gap:var(--sp-3);align-items:flex-start}
.dl-msg-b{padding:var(--sp-3);border-radius:var(--r-lg);font-size:var(--fs-sm);line-height:var(--lh-body);
  background:var(--bg-hover);color:var(--text-secondary);max-width:76%}
.dl-msg.dl-mine{flex-direction:row-reverse}
.dl-msg.dl-mine .dl-msg-b{background:color-mix(in oklab,var(--accent),var(--pearl-white) 84%);color:var(--accent-ink)}
.dl-msg-when{font-size:var(--fs-2xs);color:var(--text-secondary);align-self:flex-end}

/* ── COLOUR SWATCH ─────────────────────────────────────────────── */
.dl-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) + var(--sp-8)),1fr));gap:var(--sp-3)}
.dl-swatch-c{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-swatch-chip{height:var(--sp-16);border-radius:var(--r-md);border:1px solid var(--card-line)}
.dl-swatch-n{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--text-primary)}
.dl-swatch-h{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-2xs);
  color:var(--text-secondary);font-variant-numeric:tabular-nums}

.dl-fc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) * 4),1fr));
  gap:var(--sp-4);width:min(880px,100%)}
.dl-fc-stack{display:flex;flex-direction:column;gap:var(--sp-3);width:min(560px,100%)}

/* --- U24 ADDENDUM · TRUNCATION NEEDS A BLOCK ------------------- */
/* text-overflow:ellipsis does nothing on an INLINE box: a nowrap span simply
   grows past its parent and runs off the screen. Every truncating element in
   this sheet is block-level for that reason. It bit twice — the feature-card
   name and meta, then the email row subject at 424px in a 375 viewport — which
   is why it is written down rather than fixed twice more. */

/* DELETED (Elle 2026-08-29, THE right-side ghost): a ≤480px mask faded the
   tablewrap's last 28px to transparent as a "scrolls sideways" hint — but
   U28 turns every table into CARDS below 640px, so the mask only ever
   ERASED card right edges: the "ombre overlaying the entire right side",
   the "open/cut off" containers, the missing outlines she reported five
   times while border fixes rendered underneath an eraser. A scroll hint
   may only ever exist on a surface that actually scrolls. */

/* ═══════════════ PAGE ARCHETYPES (surface list §12) ════════════ */
/* List, detail and table are the three shapes most Dialed pages take. They are
   assembly, not invention: the cards, rows, tables, tags and pills already exist,
   so an archetype is the furniture AROUND them — a page head, a toolbar, a
   selection bar, a pager. Building the furniture once is what stops Contacts and
   Samples from drifting into two different list pages. */

/* page head: what this page is, and the one thing you do on it */
.dl-ph{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
/* COMPACT HEADER for WORKBENCH pages. Elle 2026-08-18: "the space at the top...
   above mailbox and the subtext... i need the columns taller. apple or google
   would never ship this."

   She is right, and the rule is about what a page IS. A report or a document is
   READ, so it can afford a full header: eyebrow, title, and a sentence of
   context. A workbench - email, calendar, files - is WORKED IN all day, and
   every pixel the chrome takes is a pixel off the thing you actually use. Gmail
   does not label its inbox "Mailbox / Email / here is what this page does"; the
   nav already said where you are, and the sentence is onboarding copy you have
   read a thousand times.

   Measured on email at 982px: eyebrow + title + help + margins = 103px of chrome
   before the columns began. Compact returns ~48px of it to the panes. */
.dl-ph-t{flex:1;min-width:0}
/* AN EYEBROW THAT IS A LINK IS THE WAY BACK (2026-09-05, Elle's phone: five head verbs
   in two ragged rows). The parent list's name sits where a navigation bar's back
   control sits, above the title, with a chevron; it never competes with the verbs. */
a.dl-ph-eyebrow{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:var(--sp-1);
  /* a 44px hit box (LAW 32.5) without moving the type: the padding is paid back by the margin */
  min-height:var(--h-lg);padding:var(--sp-3) var(--sp-2) var(--sp-3) 0;margin:calc(-1 * var(--sp-3)) 0}
a.dl-ph-eyebrow svg{width:var(--ic-sm);height:var(--ic-sm);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
a.dl-ph-eyebrow:hover{text-decoration:underline}
/* THE ACTION ROW (U32 + LAW 32): a head's verbs carry a long and a short label; on a
   phone the row becomes equal tiles, icon above the short label (Apple: Contacts),
   one row, every tile at the 44px floor. On desktop the long labels ride beside
   the icon in one flex row. */
.dl-actionrow{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.dl-long{display:inline}
.dl-short{display:none}
@media (max-width:640px){
  .dl-actionrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);width:100%}
  .dl-actionrow .dl-btn{flex-direction:column;justify-content:center;gap:var(--sp-1);height:auto;min-height:var(--h-lg);padding:var(--sp-2) var(--sp-1);font-size:var(--fs-xs);width:100%;min-width:0}
  .dl-actionrow .dl-btn svg{width:var(--ic-md);height:var(--ic-md)}
  .dl-actionrow .dl-long{display:none}
  .dl-actionrow .dl-short{display:inline}
  .dl-actionrow > *{min-width:0}
}
.dl-ph-eyebrow{font-family:var(--font-accent);font-style:italic;font-size:var(--fs-md);
  font-weight:var(--fw-semibold);color:var(--teal-ink)}
  /* An italic serif at fs-md in --teal-ink measured 4.4:1 in three skins — it
     passed on the other archetypes only because of WHERE it happened to sit on
     the drifting ground, which is not a pass, it is luck. Semibold gives the
     stroke enough weight to clear AA wherever it lands. */
.dl-ph h1{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);color:var(--text-primary)}
.dl-ph-sub{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:var(--sp-1)}
.dl-ph-sub b{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* toolbar: search, filters, the view toggle */
.dl-tb2{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.dl-tb2 .dl-searchfield{flex:1 1 auto;min-width:calc(var(--sp-16) * 3)}
.dl-filter{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--dl-chip-px,var(--sp-3));
  border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);font-family:var(--font-body);font-size:var(--dl-chip-fs,var(--fs-sm));
  font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap}
.dl-filter:hover{color:var(--text-primary);border-color:color-mix(in oklab,var(--accent),transparent 55%)}
.dl-filter[aria-pressed="true"]{color:var(--accent-ink);border-color:color-mix(in oklab,var(--accent),transparent 55%);
  background:color-mix(in oklab,var(--accent),var(--pearl-white) 88%)}
.dl-filter svg{width:var(--ic-sm);height:var(--ic-sm);fill:none;stroke:currentColor;stroke-width:1.9}
.dl-vt{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-md);
  background:var(--bg-hover);border:1px solid var(--border)}
.dl-vt button{min-width:var(--h-lg);height:var(--h-lg);border:0;background:none;border-radius:var(--r-sm);
  color:var(--text-secondary);cursor:pointer;display:grid;place-items:center}
.dl-vt button[aria-pressed="true"]{background:var(--surface);color:var(--text-primary);box-shadow:var(--el-1)}
.dl-vt svg{width:var(--ic-md);height:var(--ic-md);fill:none;stroke:currentColor;stroke-width:1.9}

/* --- U33 · FILTERS ARE MARKED, NOT LISTED -----------------------------
   A row of chips restating what you already picked is noise: it grows with
   every choice, pushes the content down, and tells you nothing you did not
   just do. ONE button says filters are on and how many. Open it to see them,
   change them, or clear them. The toolbar stays one line at any count.
   The panel is the EXISTING .dl-menu on desktop and the EXISTING .dl-sheet on
   phone (LAW 36/43) — a filter picker is not a new kind of overlay. */
.dl-filterdock{position:relative;display:inline-flex}
.dl-filterbtn{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-lg);padding:0 var(--sp-3);
  border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);font-family:var(--font-body);font-size:var(--fs-sm);
  font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap}
.dl-filterbtn:hover{color:var(--text-primary);border-color:color-mix(in oklab,var(--accent),transparent 55%)}
.dl-filterbtn svg{width:var(--ic-sm);height:var(--ic-sm);fill:none;stroke:currentColor;stroke-width:1.9}
/* the MARK: filters are on, and this many. It replaces the whole chip row. */
.dl-filterbtn[aria-expanded="true"]{color:var(--accent-ink);border-color:color-mix(in oklab,var(--accent),transparent 55%);
  background:color-mix(in oklab,var(--accent),var(--pearl-white) 88%)}
.dl-filterbtn-n{display:grid;place-items:center;min-width:19px;height:19px;padding:0 var(--sp-1);
  border-radius:999px;background:var(--accent);color:var(--pearl-white);
  font-size:var(--fs-2xs);font-weight:var(--fw-black);font-variant-numeric:tabular-nums}
.dl-filterbtn:not([aria-expanded="true"]) .dl-filterbtn-n{display:none}

.dl-filtermenu{position:absolute;top:calc(100% + var(--sp-2));right:0;z-index:60;width:264px;
  display:flex;flex-direction:column;max-height:min(70dvh,480px);padding:0;
  background:var(--card);border:1px solid var(--card-line);
  box-shadow:var(--el-3);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
/* ONE scroll region, footer fixed outside it (LAW 44.2). A long filter set
   scrolls; Clear all and Done never move. */
.dl-filtermenu-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-1);scrollbar-width:none}
.dl-filtermenu-body::-webkit-scrollbar{display:none}
.dl-filterdock:not([data-open="true"]) .dl-filtermenu{display:none}
/* the panel's own footer, so clearing never means hunting for a chip's x */
.dl-filtermenu-foot{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;
  padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--card-line)}
.dl-filtermenu-foot .dl-btn{height:var(--h-md);padding:0 var(--sp-3);font-size:var(--fs-sm)}
.dl-filtermenu-foot .dl-btn:last-child{margin-left:auto}

/* the topbar's search label carries BOTH lengths. Clipping the long one on a
   phone produced "Search brands, ..." — an ellipsis mid-list reads as broken,
   not as abbreviated. */
.dl-search-narrow{display:none}

/* selection bar: appears when rows are picked, says what happens next */
.dl-bulk{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);
  background:color-mix(in oklab,var(--accent),var(--pearl-white) 88%);
  border:1px solid color-mix(in oklab,var(--accent),transparent 66%)}
/* the count sits left, the actions CLUSTER right. `.dl-btn{margin-left:auto}`
   put an auto margin on EVERY button, so each one pushed off the last and the
   three of them spread evenly across the whole bar with air between them. */
.dl-bulk-n{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--accent-ink);margin-right:auto}
/* Clear is the DISMISS, not a third action. As a word-button it competed with
   the two real verbs and orphaned onto its own line on a phone; as the X it
   sits on the count row where a dismiss belongs. */
.dl-bulk-x{width:var(--h-lg);height:var(--h-lg);flex:0 0 auto;display:grid;place-items:center;
  border:0;background:none;border-radius:var(--r-md);color:var(--accent-ink);cursor:pointer}
.dl-bulk-x:hover{background:color-mix(in oklab,var(--accent),transparent 82%)}
.dl-bulk-x svg{width:var(--ic-md);height:var(--ic-md);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* the list itself */
.dl-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-list.dl-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--sp-16) * 4),1fr));gap:var(--sp-4)}

/* pager */
.dl-pager{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:1px solid var(--card-line)}
/* same shape as the selection bar: the count pushes, the actions cluster.
   Putting the auto margin on the buttons spreads them once there are two. */
.dl-pager-n{font-size:var(--fs-sm);color:var(--text-secondary);margin-right:auto}
.dl-pager-n b{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* DETAIL: the identity hero a record opens with */
.dl-hero{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-5);border-radius:var(--r-2xl);margin-bottom:var(--sp-4);
  background:var(--surface);border:1px solid var(--card-line);box-shadow:inset 0 1px 0 0 var(--hi)}
.dl-hero-mark{width:var(--sp-16);height:var(--sp-16);flex:0 0 var(--sp-16);border-radius:var(--r-lg);
  display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-xl);
  font-weight:var(--fw-bold);color:#fff;background:linear-gradient(145deg,var(--deep),var(--accent))}
.dl-hero-id{flex:1;min-width:calc(var(--sp-16) * 3)}
.dl-hero-id h1{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);color:var(--text-primary)}
.dl-hero-meta{display:block;font-size:var(--fs-sm);color:var(--text-secondary);margin-top:var(--sp-1)}
.dl-hero-acts{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.dl-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--sp-16) + var(--sp-8)),1fr));
  gap:var(--sp-4);width:100%;padding-top:var(--sp-4);border-top:1px solid var(--card-line)}

/* TABLE page furniture */
.dl-tbl-tools{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.dl-table td .dl-tag{white-space:nowrap}
.dl-table .dl-rowact{display:inline-flex;align-items:center;justify-content:center;
  width:var(--h-lg);height:var(--h-lg);border:0;background:none;border-radius:var(--r-md);
  color:var(--text-secondary);cursor:pointer}
.dl-table .dl-rowact:hover{background:var(--bg-hover);color:var(--text-primary)}
.dl-table .dl-rowact svg{width:var(--ic-md);height:var(--ic-md);fill:none;stroke:currentColor;stroke-width:2}

@media (max-width:900px){
  /* the page head stacks: a title and its action are not two things
     competing for one row. Squeezed side by side, the subtitle wraps around
     the button and the button shrinks below its label. */
  .dl-ph{margin-bottom:var(--sp-3);align-items:stretch;flex-direction:column;gap:var(--sp-3)}
  .dl-ph > .dl-btn{width:100%}
  /* one field per line on a phone: auto-fit's 2-across squeezed 160px inputs
     whose placeholders clipped mid-word. Labels read top-to-bottom. */
  .dl-fieldrow{grid-template-columns:1fr}
  /* the completion ring shrinks to jewelry beside the title — 72px of chrome
     was pushing the page name below the fold on 375. */
  .dl-ring{width:52px;height:52px}
  .dl-ring-txt small{display:none}
  .dl-ring-txt b{font-size:var(--fs-sm)}
  /* search takes its own row on both toolbars. Sharing a line with a filter
     chip clips the placeholder mid-word. */
  .dl-tb2,.dl-tbl-tools{gap:var(--sp-2)}
  .dl-tb2 .dl-searchfield,.dl-tbl-tools .dl-searchfield{flex:1 0 100%}
  /* the toggle SHARES the filter row: the filters swipe inside their strip and
     it sits at the end. Given a row to itself it was one small control against
     an empty line, which is the wasted space that reads as unfinished.
     This is a GRID, not wrap: a flex line breaks on the items' BASE widths, so
     the strip never got the chance to shrink — the browser saw 290 + 96 > 327,
     broke the line, and only then let the strip grow to fill it alone. */
  .dl-tb2,.dl-tbl-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .dl-tb2 .dl-searchfield,.dl-tbl-tools .dl-searchfield{grid-column:1 / -1}
  .dl-filterdock{grid-column:1;min-width:0}
  .dl-vt,.dl-tbl-tools > .dl-filter:last-child{grid-column:2}
  .dl-filterbtn{width:100%;justify-content:center}
  /* on a phone the picker is the app's SHEET, not a 264px card floating in a
     corner: same overlay every other list-of-choices uses (LAW 43). It sits
     ABOVE the tab bar, which is permanent chrome (LAW 46.7) — anchored at 0 it
     slid under the bar and took its own footer with it, so Done and Clear all
     were unreachable. ONE scroll region, the footer pinned outside it. */
  /* an overlay this size needs its OWN ground and a scrim. On --card (5% in a
     dark skin) the list behind it showed straight through the options, and
     with nothing dimming the page it read as floating rather than as on top. */
  .dl-filterdock[data-open="true"]::before{content:'';position:fixed;inset:0;z-index:59;
    background:color-mix(in oklab,var(--deep),transparent 46%)}   /* dims, never blurs: a phone veil (item 9) */
  /* a filter chip on a phone is a full-width, 44px row with its own chevron (phone pass #24: native selects
     painted invisible in the two-column grid, "TITLE" / "STATUS" labels with nothing beside them) */
  .dl-tb2 > .dl-selchip{grid-column:1 / -1;min-height:var(--h-lg);padding-right:var(--sp-3);
    background:var(--bg-card-solid,var(--surface))}
  .dl-tb2 > .dl-selchip select{-webkit-appearance:none;appearance:none;min-height:calc(var(--h-lg) - 2px);
    font-size:var(--fs-base);padding-right:var(--sp-6);
    background:no-repeat right center / 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5860' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>")}
  .dl-filtermenu{position:fixed;left:0;right:0;bottom:var(--tabbar-h);top:auto;
    width:auto;max-height:calc(74dvh - var(--tabbar-h));
    display:flex;flex-direction:column;overflow:hidden;
    border-radius:var(--r-3xl) var(--r-3xl) 0 0;border-bottom:0;padding:0;
    background:color-mix(in oklab,var(--pearl-white),transparent 3%);
    box-shadow:0 -12px 40px -12px color-mix(in oklab,var(--deep),transparent 62%)}
  .dl-filtermenu-foot{background:transparent}
  .dl-filtermenu::before{content:'';display:block;width:36px;height:4px;flex:0 0 auto;
    margin:var(--sp-2) auto var(--sp-1);border-radius:999px;background:var(--border)}
  .dl-filtermenu-body{padding:0 var(--sp-2)}
  .dl-filtermenu .dl-menu-item{min-height:var(--h-lg)}
  .dl-filtermenu-foot{margin:0;flex:0 0 auto;
    padding:var(--sp-3) var(--sp-3) calc(env(safe-area-inset-bottom) + var(--sp-3) + var(--shell-handle,0px))}
  .dl-filtermenu-foot .dl-btn{height:var(--h-lg);flex:1 1 0}
  /* the count row carries the count and the dismiss; the two real actions
     share the row below and are the same width, so neither is ragged */
  .dl-bulk{gap:var(--sp-2)}
  .dl-bulk-n{order:0;flex:1 0 calc(100% - var(--h-lg) - var(--sp-2));margin-right:0}
  .dl-bulk-x{order:1}
  .dl-bulk .dl-btn{order:2;flex:1 1 0;min-width:0}
  /* the long search label would clip mid-list at this width */
  .dl-search-wide{display:none}
  .dl-search-narrow{display:inline}
  .dl-hero-acts{width:100%}
  .dl-hero-acts .dl-btn{flex:1 1 auto}
}

/* --- U28 · A TABLE IS NOT A TABLE ON A PHONE -------------------- */
/* Seven columns in 375px is not a grid, it is a word puzzle: every cell wraps
   to two lines, the numbers stop lining up, and the last three columns sit off
   the edge behind a sideways scroll nobody discovers. So below 640px each ROW
   becomes a card and each cell carries its own label.
   THE CONTRACT: every <td> in a .dl-table declares data-label="<its column>".
   The first cell is the row's identity and needs none; it reads as the title. */
@media (max-width:640px){
  .dl-tablewrap{overflow-x:visible;background:none;border:0;border-radius:0}
  .dl-table,.dl-table tbody,.dl-table tr,.dl-table td{display:block;width:100%}
  /* the head stays in the DOM for assistive tech but must not spill: a 1px box
     full of table-cells will happily paint past the screen edge */
  .dl-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .dl-table thead tr{display:block;width:1px;overflow:hidden;padding:0;margin:0;border:0;background:none}
  .dl-table thead th{display:block;width:1px;overflow:hidden;padding:0}
  /* the ROW is now the card, so it takes the ground the wrap used to hold.
     --surface carries 12% alpha: without the blur underneath it, this text is
     sitting on the animated mesh and measures 2.0:1. */
  .dl-table tr{position:relative;margin-bottom:var(--sp-3);padding:var(--sp-3) var(--sp-4);
    border-radius:var(--r-lg);background:var(--bg-card-solid,var(--surface));
    /* a card must CLOSE on every side (Elle 2026-08-29, "the entire right
       side of every entry is cut off"): the 7%-alpha hairline + zero shadow
       left near-white on cream with no boundary — the right edge dissolved.
       A real hairline + an even soft shadow define all four edges. */
    border:1px solid color-mix(in oklab, var(--deep, #2D2438), transparent 84%);
    box-shadow:0 1px 2px color-mix(in oklab, var(--deep, #2D2438), transparent 92%),
               0 6px 20px -12px color-mix(in oklab, var(--deep, #2D2438), transparent 80%)}
  .dl-table tr:last-child{margin-bottom:0}
  .dl-table tbody tr:hover{background:var(--surface)}
  .dl-table td{display:flex;align-items:baseline;justify-content:space-between;
    gap:var(--sp-4);padding:var(--sp-1) 0;border:0;text-align:right}
  .dl-table td:empty{display:none}  /* a labeled row with NO value is undesigned absence — omit it (2026-09-02, the blank REGION/DEPOT line) */
  .dl-table td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);
    text-transform:uppercase;color:var(--text-muted)}
  .dl-table td.dl-num{text-align:right}
  /* the identity cell is the card's title, so it drops the label and the row */
  .dl-table td:first-child{display:block;text-align:left;padding:0 var(--h-lg) var(--sp-2) 0;
    margin-bottom:var(--sp-2);border-bottom:1px solid var(--card-line);
    font-family:var(--font-display);font-size:var(--fs-md);font-weight:var(--fw-semibold);
    color:var(--text-primary)}
  .dl-table td:first-child::before{content:none}
  /* row actions pin to the card's corner rather than pretending to be a cell */
  .dl-table td:has(> .dl-rowact){position:absolute;top:var(--sp-2);right:var(--sp-2);
    width:auto;padding:0;justify-content:flex-end}
  .dl-table td:has(> .dl-rowact)::before{content:none}
}

/* --- ARCHETYPE MOBILE ------------------------------------------ */
@media (max-width:900px){
  /* a tab strip's tabs are real targets: 23px tall is a mouse control, not a
     thumb control. The strip WRAPS (one rule with the chip group), never swipes. */
  .dl-tabs button{min-height:var(--h-lg);flex:0 0 auto;white-space:nowrap}
  .dl-hero{padding:var(--sp-4)}
  .dl-hero-mark{width:var(--sp-12);height:var(--sp-12);flex:0 0 var(--sp-12);font-size:var(--fs-lg)}
}

/* ── SKIN RAIL ────────────────────────────────────────────────────────────
   The skin chooser: a thin rail of round dots, one per palette, the current
   one ringed. Elle's design, and it already existed and shipped in
   public/_atlas.html as `.sw` before this component was written. Promoted here
   verbatim so the atlas and Settings > Appearance share ONE implementation
   instead of two (LAW 36) — the atlas is a mock, and a component that lives
   only in a mock is a picture no real page can use.

   A rail, not a grid of cards: seventeen skins is a palette to scan, not a
   list to read, and the dot IS the information. My first build made big
   labelled swatch cards, which turned a glance into a page.

   Each dot is a <button> with aria-pressed, so selection is announced and
   reachable by keyboard. The 26px dot sits inside a 44px tap target on touch
   (LAW 32) without changing its painted size. */
.dl-skins{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.dl-skin{width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;position:relative;background:none;flex:0 0 auto}
.dl-skin i{position:absolute;inset:3px;border-radius:50%}
.dl-skin[aria-pressed="true"]{border-color:var(--accent)}
.dl-skin:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (hover:none){
  /* Touch needs 44px of reachable target (LAW 32). The dot keeps its 26px look
     and the HIT AREA grows around it, so the design does not inflate on phones.
     Sized in tokens, not raw px: --sp-3 is 12px, giving 26 + 24 = 50px, which
     clears 44 on the scale. My first pass used a bare 9px to land exactly on
     44 and the spacing gate refused it — correctly, because an off-scale number
     is how a scale stops being one. */
  .dl-skin{margin:var(--sp-3)}
  .dl-skin::after{content:"";position:absolute;inset:calc(-1 * var(--sp-3))}
}

/* ── REQUIREMENT CHECKLIST ────────────────────────────────────────────────
   A live list of conditions that tick green as the user satisfies them: the
   password rules on a reset screen, and anywhere else a field has to teach its
   own constraints while being typed into.

   ADDED BECAUSE A REAL PAGE NEEDED IT, which is the rule: forgot-password.html
   was the first true rebuild and this was the ONLY thing the book could not
   already express. Everything else it needed — dl-auth, dl-field, dl-input,
   dl-label, dl-help, dl-btn, dl-alert, dl-mark — already existed.

   State rides `aria-checked` on the item, not a class, so a screen reader is
   told the same thing the eye is. The glyph is drawn in CSS rather than swapped
   in JS, so the page's script only sets one attribute. */
.dl-reqs{margin-top:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-md);
  background:var(--bg-hover);border:1px solid var(--card-line)}
.dl-reqs-t{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:var(--sp-2)}
.dl-reqs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-reqs li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);
  color:var(--text-secondary)}
.dl-reqs li svg{width:14px;height:14px;flex:0 0 14px;border-radius:50%;padding:2px;
  border:2px solid var(--text-tertiary);stroke:transparent;fill:none;stroke-width:3.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:background var(--t-fast),border-color var(--t-fast),stroke var(--t-fast)}
.dl-reqs li[aria-checked="true"]{color:var(--success-ink)}
.dl-reqs li[aria-checked="true"] svg{background:var(--success);border-color:var(--success);
  stroke:var(--on-accent)}

/* ── AUTH, SPLIT ──────────────────────────────────────────────────────────
   The two-panel sign-in: a dark brand panel beside the card. login.html,
   register.html and portal-register.html all use this shape, so it belongs in
   the book once rather than three times in three private stylesheets.

   ADDED TO PRESERVE, NOT TO INVENT. Rebuilding those pages on the plain
   .dl-auth (a single centred card) would have silently DELETED the brand panel
   — its tagline, description and three feature blocks — which is a product
   decision and not a rebuild's to make. Growing the book is the conservative
   move; the parity gate counts controls, not copy, so nothing else would have
   caught that loss.

   Proportions lifted from login.html's own rules (1fr 1fr, 4rem / 3rem padding,
   420px card) so the rebuild is a re-housing, not a redesign. Below the tablet
   breakpoint the aside drops away entirely: on a phone the card is the whole
   job and a dark panel above it is just scrolling. */
.dl-auth-split{position:relative;z-index:1;min-height:100dvh;width:100%;
  display:grid;grid-template-columns:1fr 1fr}
.dl-auth-aside{padding:var(--sp-16);display:flex;flex-direction:column;
  justify-content:center;position:relative;overflow:hidden}
.dl-auth-split > .dl-auth{min-height:0;padding:var(--sp-12)}
.dl-auth-glass{background:linear-gradient(135deg,var(--sidebar-mid),var(--sidebar-dark));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--rail-line);border-radius:var(--r-2xl);padding:var(--sp-10);
  color:var(--rail-ink)}
.dl-auth-glass h2{font-family:var(--font-display);font-size:var(--fs-2xl);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-tight);margin:var(--sp-3) 0;
  color:var(--rail-ink)}   /* dark glass: page ink vanished on it */
.dl-auth-glass h2 em{font-style:italic;color:var(--accent);filter:brightness(1.5)}
.dl-auth-glass p{color:var(--rail-ink-2);font-size:var(--fs-base);max-width:46ch}
.dl-auth-feats{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.dl-auth-feat{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--rail-line);border-radius:var(--r-lg);border:1px solid transparent;
  transition:background var(--t-fast),border-color var(--t-fast)}
.dl-auth-feat:hover{background:var(--glass);border-color:var(--rail-line)}
.dl-auth-feat svg{width:var(--ic-md);height:var(--ic-md);flex:0 0 auto;
  stroke:var(--rail-ink);fill:none;stroke-width:1.8}
.dl-auth-feat h4{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--rail-ink);margin:0}
.dl-auth-feat p{font-size:var(--fs-xs);color:var(--rail-ink-3);margin:2px 0 0;max-width:none}
@media (max-width:900px){
  /* The aside is context, not the task. On a phone it is scrolling between the
     user and the sign-in button, so it goes rather than stacks. */
  .dl-auth-split{grid-template-columns:1fr}
  .dl-auth-aside{display:none}
  .dl-auth-split > .dl-auth{min-height:100dvh;padding:var(--sp-5)}
}

/* Migration guard: legacy sheets (dialed-theme) paint bare spans globally; book components own their ink (LAW D1). */
.dl-rail :where(span,p,label,li),.dl-topbar :where(span,p,label,li){color:inherit}

/* Page-transition veil (LAW 46.6): pearl ground + orb + page name. One loader,
   owned by the shell — pages never roll their own. */
.dl-loadveil{position:absolute;inset:0;z-index:90;/* ABOVE the shell content frame (z80, shell.css) — at 60 the veil sat UNDER the iframe, so a refresh showed the stale cached page instead of the loading state (Elle 2026-08-23: 'old container in the background'). Modals (z1000+) and toasts (800) still outrank it. */display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);
  background:var(--canvas);opacity:0;transition:opacity var(--t-base) var(--ease)}
.dl-loadveil.active{display:flex;opacity:1}
.dl-loadveil-t{font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary)}

/* Rail ink discipline: the rail is dark glass in EVERY skin — text inside it
   always uses rail ink roles, never page text roles (the gold-light "blue
   quote" incident, 2026-08-02). */
.dl-rail .dl-help{color:var(--r-ink-3)}
/* Photo-in-orb: a designed treatment. Any img inside a pearl orb fills the
   circle — never a raw square (runtime avatar injection, LAW D2). The glyph
   span drops its positioning while hosting a photo so the img anchors to the
   ORB, not the text span. */
.dl-pearl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.dl-pearl .dl-glyph:has(img){position:static}

/* Workbench selection state (LAW D5): the bench's core interaction — the row
   the detail panel is showing — must be VISIBLY marked. Same accent language
   as the rail's active pill. */
.dl-table tr[aria-current="true"] td{background:color-mix(in oklab,var(--accent),transparent 90%)}
.dl-table tr[aria-current="true"] td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.dl-card[aria-current="true"]{outline:2px solid color-mix(in oklab,var(--accent),transparent 40%);outline-offset:-1px}
/* Actionable stat (LAW D5): a pulse number that filters the bench is a CONTROL
   and must read as one. */
.dl-stat-act{cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.dl-stat-act:hover{transform:translateY(-2px)}
.dl-stat-act .dl-stat{color:var(--accent-ink)}

/* Mobile grid discipline (LAW 32/49, found via the workbench phone proof):
   under 900px every dl-grid child stacks full-width — no side-by-side squeeze.
   Stat cards pair up 2x2 (four stacked full-width numbers is a scroll tax). */
@media (max-width:900px){
  /* !important is load-bearing: instance spans ride inline style attrs
     (per-instance data, LAW D1.3) and MUST lose to the responsive law. */
  .dl-grid > *{grid-column:1 / -1 !important}
  .dl-grid > .dl-card:has(> .dl-stat){grid-column:span 6 !important}
}

/* The second .dl-search block that used to live here is GONE. It re-added a
   focus box and a border 2,600 lines after the component was defined, so the
   field had two conflicting definitions and the later one silently won — which
   is why removing the grey box in one place did not remove it on screen. One
   component, one definition (LAW 36). Everything it did now lives with the
   component above.
   The mag glass keeps stroke:var(--text-muted) so it and the placeholder are
   the SAME grey (Elle 2026-08-06). */

/* Rail user identity (Elle 2026-08-03: "name and face at the TOP with the user
   type label") — sits directly under the brand. Collapsed rail shows the
   avatar orb; open/hover reveals name + role, same reveal as labels. */
.dl-rail-user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2);border-bottom:1px solid var(--r-line)}
.dl-rail-user .dl-xp{opacity:0;max-width:0;overflow:hidden;transition:opacity var(--t-base) var(--ease),max-width var(--t-slow) var(--ease);white-space:nowrap}
.dl-rail:is(:hover,[data-mode="open"]) .dl-rail-user .dl-xp{opacity:1;max-width:170px}

/* ───────────────────────── CHAT FAMILY (LAW D7) ─────────────────────────
   One chat vocabulary for every messaging surface (portal messages, admin
   messages, the Pearl chat widget slice). Split pane · conversation rows ·
   bubbles · composer. */
.dl-chat{display:grid;grid-template-columns:320px 1fr;gap:var(--sp-4);height:calc(100dvh - 140px);min-height:420px}
.dl-chat-pane{display:flex;flex-direction:column;min-height:0}
.dl-convo{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);cursor:pointer;transition:background var(--t-fast)}
.dl-convo:hover{background:var(--bg-hover)}
.dl-convo[aria-current="true"]{background:color-mix(in oklab,var(--accent),transparent 88%)}
.dl-convo.unread .dl-convo-name{font-weight:var(--fw-bold)}
.dl-convo-name{font-weight:var(--fw-medium);color:var(--text-primary)}
.dl-convo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px}
.dl-bubbles{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-2)}
.dl-msg{display:flex;gap:var(--sp-2);max-width:78%}
.dl-msg.sent{align-self:flex-end;flex-direction:row-reverse}
.dl-bubble{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-lg);background:var(--bg-hover);border:1px solid var(--border);color:var(--text-primary);font-size:var(--fs-sm);line-height:1.45;overflow-wrap:anywhere}
.dl-msg.sent .dl-bubble{background:color-mix(in oklab,var(--accent),transparent 82%);border-color:color-mix(in oklab,var(--accent),transparent 60%)}
.dl-msg .dl-help{align-self:flex-end}
.dl-composer{display:flex;gap:var(--sp-2);align-items:flex-end;padding-top:var(--sp-3);border-top:1px solid var(--card-line)}
.dl-composer .dl-textarea{min-height:var(--h-lg);max-height:120px;resize:none}
@media (max-width:900px){
  /* Phone height fills the page's padding box exactly: the old fixed
     subtraction (a hundred-eighty) still compensated for a topbar that lives
     in the SHELL, so the composer floated far above the tab bar (2026-09-02
     eyes, framed thread view). The terms are the dl-page paddings themselves:
     --sp-2 top (framed) + tab-bar clearance bottom. */
  .dl-chat{grid-template-columns:1fr;
    height:calc(100dvh - var(--sp-2) - var(--tabbar-h) - var(--sp-4) - env(safe-area-inset-bottom,0px))}
  html.dl-framed .dl-chat{height:calc(100dvh - var(--sp-2) - var(--sp-4))}
  .dl-chat-pane.dl-chat-list.hidden{display:none}
  .dl-chat-pane.dl-chat-view{display:none}
  .dl-chat-pane.dl-chat-view.active{display:flex}
  /* Phones DISSOLVE the pane cards (the Elle-graded pos-tablecard move,
     2026-09-02): one page-sized rounded slab on the mesh is the D11 wrapper
     defect. Content sits on the mesh; the convo ROWS take the card ground
     (U28 language), and the search + composer keep their own footing. */
  .dl-card.dl-chat-pane{border:0;background:none;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
  .dl-chat-list > .dl-sectionbar{display:none} /* the tab bar already names the page */
  .dl-convo{margin-bottom:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);
    background:var(--bg-card-solid,var(--surface));
    border:1px solid color-mix(in oklab, var(--deep, #2D2438), transparent 84%);
    box-shadow:0 1px 2px color-mix(in oklab, var(--deep, #2D2438), transparent 92%),
               0 6px 20px -12px color-mix(in oklab, var(--deep, #2D2438), transparent 80%)}
  .dl-chat-list .dl-search,
  .dl-chat-list .dl-search:hover,
  .dl-chat-list .dl-search:focus-within{height:var(--h-md);
    padding:0 var(--sp-3) 0 calc(var(--sp-3) + var(--ic-sm) + var(--sp-2));
    background:var(--bg-card-solid,var(--surface));
    border:1px solid color-mix(in oklab, var(--deep, #2D2438), transparent 84%);
    border-radius:var(--r-lg)}
  .dl-chat-list .dl-search svg{left:var(--sp-3)}
  .dl-composer{padding:var(--sp-2) var(--sp-3);border-top:0;border-radius:var(--r-lg);
    background:var(--bg-card-solid,var(--surface));
    border:1px solid color-mix(in oklab, var(--deep, #2D2438), transparent 84%)}
}

/* ── SHARED TOAST (js/toast.js) ────────────────────────────────────────────
   The toast is one shared module serving rebuilt AND un-rebuilt pages, so it
   cannot read plain token names: an un-rebuilt page defines --text-primary
   with its own meaning and would paint dark ink on the dark toast. These
   names exist ONLY here, so a page without the book always gets the module's
   literal fallbacks and nothing that has not been rebuilt changes. */
:root{
  --dl-toast-dark-bg: var(--bg-elevated, #2C2A3A);
  --dl-toast-dark-ink: var(--text-primary, #FFFFFF);
  --dl-toast-dark-ink2: var(--text-secondary, rgba(255,255,255,.55));
  --dl-toast-light-bg: var(--surface, #FDFCFA);
  --dl-toast-light-ink: var(--text-primary, #1E1D24);
  --dl-toast-light-ink2: var(--text-secondary, rgba(30,29,36,.55));
  --dl-toast-line: var(--card-line, rgba(184,169,201,.28));
  --dl-toast-accent: var(--accent, #8A7ABB);
  --dl-toast-accent2: var(--accent-deep, #4A9999);
}

/* .dl-card ships grid-column:span 6 for the book's 12-column .dl-grid. Dropped
   into an auto-fill track list that span became "span all six tracks", so every
   card rendered one-per-row full width (portal/items shipped that way). Any
   auto-fill grid declares itself and its children size to their own track. */
.dl-autogrid > .dl-card{grid-column:auto}

/* DOCKED ACTION BAR (LAW 46.4). A persistent action bar sits flush at the
   bottom, above the mobile tab bar and the home indicator, and never floats or
   clips. Pages that show one add matching bottom padding to their scroll
   region so no content ever hides beneath it. portal/items shipped an
   undefined `.bulk-bar` that rendered as naked text at y=1713 on a phone —
   entirely offscreen — which is what this exists to make impossible. */
/* THE DOCK (Elle 2026-09-06, "this looks sloppy"): on a desktop the unsaved
   state is a floating pill centred at the foot of the folder, status + verbs
   in one hand, never a thin full-width strip; on a phone it docks full width
   above the tab bar (the rules below). */
.dl-dockbar{position:fixed;left:50%;right:auto;bottom:var(--sp-5);transform:translateX(-50%);z-index:60;display:none;
  align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  max-width:calc(100% - var(--sp-8));white-space:nowrap;
  background:var(--bg-card-solid,var(--surface));border:1px solid var(--card-line);border-radius:var(--r-pill);
  box-shadow:var(--el-3,0 18px 40px -12px rgba(0,0,0,.28))}
.dl-dockbar.is-open{display:flex}
.dl-dockbar > .dl-help{font-weight:var(--fw-semibold);color:var(--text-primary)}
@media (max-width:900px){
  /* opaque on a phone (iOS drops blur inside the frame and the 12%-alpha surface
     was a window onto the fields beneath, Elle's phone 2026-09-05); the status
     line takes the first row, the verbs share the second with Save growing */
  .dl-dockbar{left:0;right:0;transform:none;max-width:none;white-space:normal;border-radius:0;border:0;border-top:1px solid var(--card-line);padding:var(--sp-3) var(--sp-4);
    bottom:var(--tabbar-h,64px);background:var(--bg-card-solid,var(--surface));
    padding-bottom:calc(var(--sp-3) + var(--shell-handle,0px));flex-wrap:wrap;row-gap:var(--sp-2)}
  .dl-dockbar > .dl-help{flex:1 1 100%}
  .dl-dockbar > .dl-btn-primary{flex:1 1 auto}
}

/* THE SHELL HALF OF A FRAMED MODAL SCRIM. A page inside the content iframe can
   only dim its own viewport, so the rail and topbar stayed bright with a modal
   open. The chassis posts dialed:modal and the shell shows this, so one modal
   reads as ONE scrim across the whole screen. Non-interactive on purpose: the
   page owns close-on-backdrop, and two competing close paths is how a modal
   ends up half-shut. */
/* ONE BACKGROUND, NOT TWO (Elle 2026-08-06: "theres a double background - 1 full
   screen and one inline square ... its super dark and in front of everything").
   Two faults, both introduced by the first version of this scrim:
   1. z-index:900 put it ABOVE the content frame, so it covered the modal that
      lives inside that frame. It now sits BELOW the frame and above the rail, so
      it dims the rail, the topbar and the gutters and never the dialog.
   2. It used a different colour and blur from the chassis overlay, so the shell
      half and the page half read as two different greys meeting at the frame
      edge. Both halves now carry EXACTLY the chassis values, so they compose
      into one continuous background. */
#shellModalScrim{position:fixed;inset:0;z-index:90;pointer-events:none}
/* THE SCRIM DIMS, NEVER BLURS (Elle, P0 2026-09-15). One skin-deep wash over
   the composed screen - page (through the frame), gutters, topbar - above the
   content frame (z:90 > frame's 80), with the open modal showing through a
   hole at its posted rect. The wash is ONE element, .dl-scrimring: a rounded-
   rect spotlight whose huge box-shadow spread paints the dim everywhere
   outside the sheet with no seams and a radius that hugs the sheet's own
   corners (Elle 2026-08-24, "the lines and the corners"). The glass era's
   frost bands (four backdrop-filter rects around the hole) are retired with
   the glass: the sheet is opaque (dialed-modal.js) and nothing blurs. */
.dl-scrimring{position:fixed;pointer-events:none;display:none;
  box-shadow:0 0 0 200vmax color-mix(in oklab, var(--deep, #2D2438), transparent 62%)}
/* NO opacity animation on the wash - filmed 2026-08-13: an animated wash
   bled the page texture. The ring appears and moves by geometry only. */
/* THE FRAME STAYS PUT ON DESKTOP (Elle 2026-09-22, "whats up with the
   background that shifts when overlays pop up"). The 2026-08-12 full-window
   expansion ("why is the component overlay not taller?") resized the frame
   under an open sheet, so the page behind it reflowed: slid under the rail,
   lost its title, rewrapped its columns. The page must hold still behind the
   veil, chrome and all (the wash dims the frame's edge; nothing shows through
   the hole but the sheet). Desktop sheets fit the frame they open in; the
   app-shell full-screen sheet below keeps the expansion and sheds the frame's
   chrome, where the frame is already full-width. */
/* APP-SHELL MODE: the tab bar is PERMANENT chrome (LAW 46.7) and paints above
   everything at z:9998 - a full-window frame put the sheet's footer (More /
   Edit / Mark shipped) UNDERNEATH it (mobile filmstrip 2026-08-13). The frame
   stops at the tab bar's top, so 100dvh inside it = exactly the space above
   the nav and the fixed footer lands visible (LAW 42/49.3). Same media terms
   as the tab bar's own visibility (app-shell-tabbar.js APP_SHELL_MQ). */
@media (max-width: 900px), ((hover: none) and (pointer: coarse) and (max-width: 1023px)){
  /* FULL SCREEN (Elle 2026-08-30, "what would Apple do?"): the modal owns
     the whole screen — the shell slides the tab bar away (dl-veiled), so
     the frame takes the FULL viewport while a sheet is open. Replaces the
     62px above-the-bar reservation (the retired dim-strip shape). */
  body.dl-modal-scrim-open .content-frame{
    box-shadow:none !important;border:none !important;background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    position:fixed !important;inset:0 !important;width:100vw !important;border-radius:0 !important;
    height:100dvh !important;
    /* margin 0 (2026-09-23): a page scrolled down has hidden the topbar, whose rule pulls the frame up with a
       negative margin (shell.css data-bar="hidden"), and a FIXED box still honours its margin: every sheet opened
       after a scroll sat 72px high, its ✕ and title above the screen and a bare band under it (the audit's band) */
    margin:0 !important;
    padding-bottom:0 !important}
}
#shellModalScrim[hidden]{display:none}
/* THE RAIL DROPS UNDER THE VEIL WHILE A MODAL IS OPEN (Elle 2026-08-10: "the
   overlay background still has separate sections still highlighted behind the
   overlays"). The scrim lives inside <main>, whose position:relative+z-index:1
   is load-bearing (it keeps content above .dl-canvas), so the scrim's z:70 is
   LOCAL to that context and the rail's root-level z:60 painted above the whole
   subtree — a crisp, still-clickable rail next to a dimmed page. Rather than a
   second veil on the rail (a seam waiting to happen), the rail steps below
   <main> for the duration, so the ONE scrim covers it; pointer-events:none
   makes it inert, matching the scrim's own click-blocking above. */


/* ── FIELD-DIFF (dl-fd) — EDITABLE contact/record diff rows ───────────────
   Atlas chip 57 (Contact-diff modal) + the documented static-fielddiff bug's
   design answer: the legacy .pact-review-fielddiff rendered Pearl's proposed
   value READ-ONLY, so the operator could only approve-or-decline Pearl's
   text, never correct it (LAW 20: never make the user re-type elsewhere).
   Anatomy per row: field label · current value (struck) · proposed value as
   a REAL input (editable before accepting) · per-row accept toggle
   (dl-switch). data-accepted="false" quiets a declined row without hiding
   it — the operator can flip it back. Exemplar: _mock-modal-compositions.html. */
.dl-fd{display:flex;flex-direction:column;border:1px solid var(--card-line);
  border-radius:var(--r-md);background:var(--glass-hi);overflow:hidden}
.dl-fd-row{display:grid;grid-template-columns:minmax(84px,.6fr) 1fr 1.3fr auto;
  gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--card-line);transition:opacity var(--t-fast)}
.dl-fd-row:last-child{border-bottom:0}
.dl-fd-k{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-muted)}
.dl-fd-cur{font-size:var(--fs-sm);color:var(--text-tertiary);overflow-wrap:anywhere;
  text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--danger),transparent 45%)}
.dl-fd-cur[data-empty]{text-decoration:none;font-style:italic}
.dl-fd-in{height:var(--h-sm);font-size:var(--fs-sm);padding:0 var(--sp-3)}
.dl-fd-row[data-accepted="false"]{opacity:.5}
.dl-fd-row[data-accepted="false"] .dl-fd-in{pointer-events:none;background:var(--bg-hover)}
@media (max-width:640px){
  .dl-fd-row{grid-template-columns:1fr auto;grid-template-areas:"k tgl" "cur tgl" "new tgl"}
  .dl-fd-k{grid-area:k}.dl-fd-cur{grid-area:cur}.dl-fd-in{grid-area:new}
  .dl-fd-row > .dl-switch{grid-area:tgl}
}

/* ─────────────────── DECISION PATTERNS (U34) ──────────────────────────────
   Two shapes recur on every Pearl action that asks a person for a judgement,
   and neither was in the book — so every review surface grew its own, which is
   how action-queue.html ended up with 95 pact-review-* classes for what is
   really two components used twenty ways.

   .dl-diff — a proposed CHANGE. The old value stays visible and struck through
     instead of being quietly replaced, because approving a change means seeing
     what it replaces. An edit you cannot see is not a decision you made.
   .dl-opt — a proposed CHOICE. Pearl's pick arrives pre-selected and the
     alternatives stay one tap away: the default is hers, the decision is still
     yours (Pearl tees up, humans execute).

   Both are built from tokens only, so they follow all 17 skins, and both are
   sized above the LAW 32 floors — the mistake .dl-pact-k and .dl-cp-lbl were
   carrying until today. */
.dl-diff{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-diff-row{display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-3);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--card-line)}
.dl-diff-k{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--accent-ink)}
.dl-diff-old{color:var(--text-muted);font-weight:var(--fw-normal);
  text-decoration:line-through;
  text-decoration-color:color-mix(in oklab,var(--text-muted),transparent 50%)}
.dl-diff-new{color:var(--text-primary);font-weight:var(--fw-semibold);font-size:var(--fs-base)}

.dl-opt{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-opt-row{display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3);border-radius:var(--r-md);cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--card-line);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.dl-opt-row:hover{border-color:color-mix(in oklab,var(--accent),transparent 55%)}
.dl-opt-row[aria-checked="true"],.dl-opt-row.dl-on{
  border-color:var(--accent);background:color-mix(in oklab,var(--accent),transparent 90%)}
.dl-opt-mark{ /* EMPTY by contract: the tick is drawn below, never a glyph —
     a character inside would be text under the LAW 32 floor at this size */
  width:var(--ic-md);height:var(--ic-md);flex:0 0 var(--ic-md);margin-top:2px;
  border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;
  color:transparent;font-size:0}
.dl-opt-row[aria-checked="true"] .dl-opt-mark::after,.dl-opt-row.dl-on .dl-opt-mark::after{
  content:'';width:9px;height:5px;border-left:2px solid var(--on-accent);
  border-bottom:2px solid var(--on-accent);transform:rotate(-45deg) translate(1px,-1px)}
.dl-opt-row[aria-checked="true"] .dl-opt-mark,.dl-opt-row.dl-on .dl-opt-mark{
  background:var(--accent);border-color:var(--accent)}
.dl-opt-b{display:flex;flex-direction:column;gap:var(--sp-1);flex:1;min-width:0}
.dl-opt-t{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-opt-d{font-size:var(--fs-sm);color:var(--text-secondary)}

/* ─────────────────── BASE HEADINGS (U35) ──────────────────────────────────
   Elle 2026-08-21: "the heading page fonts are not on skin theme consistently
   … some pages have correct color fonts and some do not."

   She was right, and the cause was a hole in THIS file. The book styled .dl-*
   components and left the semantic headings alone, so a page could link the
   book, pass every gate, and still render its <h1> in the BODY face at the
   browser's default 2em — inheriting Inter and a size nothing chose. Five pages
   were doing exactly that: file-manager, comms-center, pearl-playbook,
   portal/calendar and portal/settings, each with a 32px Inter page title.

   An element selector is the lowest specificity there is, so every component
   and every page class still wins. This only catches the headings that nobody
   dressed — which is precisely the set that was wrong. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-snug);
}
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold) }
h2 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold) }
h3 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold) }
h4 { font-size: var(--fs-md);  font-weight: var(--fw-semibold) }

/* ═══════════════ PROGRAM DASHBOARD (Elle-graded mock v3, 2026-08-24) ═══════
   The client dashboard's anatomy, promoted into the book when the graded
   design shipped: status hero, program cards with region tracklist rows,
   ask/quiet/delta/answer/up cards, the program-sheet interior, the
   getting-started runway. Region leads; the last client-visible word rides
   every row; zeros never render (D13). All tokens — every skin moves this. */
/* FULL SPREAD (Elle 2026-08-24: "a desktop should have a full spread —
   no wasted space, visually easy to grab takeaway information"). The
   dashboard stops being a centered scroll column: wide canvas, and at
   desktop width the page splits into MAIN (the programs — the answer) and
   a RAIL (needs-you, the business, coming up, since-your-visit) so the
   whole state of the account lands in one screenful. */
.dl-pagewrap{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:var(--sp-6) var(--sp-6) var(--sp-16)}
/* Inside the shell the topbar already carries its own gap below (sp-4) —
   the pagewrap's sp-6 stacked on it read as dead air between the search bar
   and the page header (Elle 2026-08-28: "remove extra wasted space"). */
html.dl-framed .dl-pagewrap{padding-top:0}
.dl-dashgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
/* THE REACH ROW (item 69, 2026-09-15): an email or a phone on any card is a verb — tap the value to email
   or call — with its copy beside it. ONE shape on every face (js/contact-verbs.js renders it). */
.dl-reach{display:flex;align-items:center;gap:var(--sp-1);min-width:0;max-width:100%}
.dl-reach-v{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--h-md);padding:0 var(--sp-1);border:0;background:none;border-radius:var(--r-sm);
  font:inherit;font-size:var(--fs-sm);color:var(--text-secondary);cursor:pointer;min-width:0;max-width:100%;text-align:left}
.dl-reach-v svg{width:var(--ic-sm);height:var(--ic-sm);flex:0 0 auto;color:var(--text-muted)}
.dl-reach-v span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dl-reach-v:hover{color:var(--accent-ink,var(--accent));background:var(--bg-hover)}
.dl-reach-copy{flex:0 0 auto;width:var(--h-md);height:var(--h-md);display:inline-flex;align-items:center;justify-content:center;border:0;background:none;border-radius:var(--r-sm);color:var(--text-muted);cursor:pointer}
.dl-reach-copy svg{width:14px;height:14px}
.dl-reach-copy:hover{color:var(--accent-ink,var(--accent));background:var(--bg-hover)}
@media (max-width:640px){.dl-reach-v,.dl-reach-copy{min-height:44px}.dl-reach-copy{width:44px;height:44px}}
/* THE MAIN COLUMN IS ONE GRID WITH ONE GAP (Elle, P0 2026-09-15, item 64: the Samples in motion card sat on
   the stat tiles with no gap). Every band in it is a section whose head carries no outer margin; the grid
   gap is the only space between bands, so nothing can overlap and nothing can double up. */
.dl-dashmain{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6);align-content:start;min-width:0}
.dl-dashmain > .dl-dashband > .dl-bandhead{margin:0 0 var(--sp-3)}
.dl-dashmain > .dl-nudge{margin:0}
@media (min-width:1120px){
  .dl-dashgrid{grid-template-columns:minmax(0,1fr) minmax(320px,380px);align-items:start}
}
.dl-dashrail{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-dashrail .dl-bandhead{margin:var(--sp-2) 0 0}
.dl-dashrail .dl-bandhead:first-child{margin-top:0}
/* THE PRIZE BAND (v4, Elle-graded 2026-08-24): the Volume opportunity math
   as the page's second line — full national value vs activated, regions
   live, the next decision window. Values come from the ONE PipelineValue
   engine; a tile with no real number does not render (LAW 38/D13). */
.dl-prize{display:flex;align-items:stretch;border-radius:var(--r-2xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--card-line);margin-bottom:var(--sp-6)}
.dl-prize>div{flex:1;padding:var(--sp-4) var(--sp-5);position:relative;min-width:0}
.dl-prize>div+div{border-left:1px solid var(--card-line)}
.dl-prize b{display:block;font-family:var(--font-display);font-size:var(--fs-2xl);
  font-weight:var(--fw-bold);color:var(--text-primary);font-variant-numeric:tabular-nums}
.dl-prize b.dl-teal{color:var(--teal-ink)}
.dl-prize>div>span{display:block;margin-top:2px;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary)}
.dl-prize .dl-help{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);text-transform:none;
  letter-spacing:0;font-weight:var(--fw-regular)}
/* (.dl-prize-bar, the "% of the prize" meter, retired 2026-09-15 with the summed prize: item 68) */
@media (max-width:900px){.dl-prize{flex-direction:column}.dl-prize>div+div{border-left:0;border-top:1px solid var(--card-line)}}

/* REGION COVERAGE DOTS — Costco's sellable regions on every item card */
.dl-cov{display:flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);flex-wrap:wrap}
.dl-cov i{width:9px;height:9px;border-radius:50%;border:2px solid var(--card-line);background:transparent}
.dl-cov i.live{background:var(--teal-ink);border-color:transparent}
.dl-cov i.motion{border-color:var(--accent);background:color-mix(in oklab,var(--accent),transparent 70%)}
.dl-cov em{font-style:normal;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted);margin-left:var(--sp-1)}

/* THE LADDER — test → rotation → everyday (Costco's buying ladder) */
.dl-ladder{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase}
.dl-ladder s{text-decoration:none;color:var(--text-muted);padding:2px var(--sp-2);border-radius:var(--r-sm);border:1px solid var(--card-line)}
.dl-ladder s.on{color:var(--on-accent,#fff);background:var(--teal-ink);border-color:transparent}
.dl-ladder u{text-decoration:none;color:var(--text-muted)}

/* region row's value block + open-ground row */
.dl-region-win{flex:0 0 auto;text-align:right}
.dl-region-win b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-primary);font-variant-numeric:tabular-nums}
.dl-region-win span{font-size:var(--fs-2xs);color:var(--text-muted)}
.dl-region-open{padding:var(--sp-3) var(--sp-5);border-top:1px dashed var(--card-line);
  font-size:var(--fs-sm);color:var(--text-secondary);cursor:pointer}
.dl-region-open:hover{color:var(--accent-ink)}

/* TITLE MENU — the heading IS the picker (Apple's navigation-title menu /
   Mac pop-up button). Slotted into the dl-modal head by DialedModal.titleMenu;
   it inherits the heading's type from the chassis. The native <select> rides
   invisibly on top so the tap opens the OS menu: no custom overlay, no wrap.
   Replaced the 11-region .dl-sheettabs wall (Elle 2026-09-04). */
.dl-titlemenu{position:relative;display:inline-flex;align-items:center;gap:var(--sp-1);max-width:100%;
  cursor:pointer;border-radius:var(--r-sm)}
.dl-titlemenu-face{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-titlemenu-chev{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--text-muted);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:var(--t-base)}
.dl-titlemenu:hover .dl-titlemenu-chev,.dl-titlemenu:focus-within .dl-titlemenu-chev{stroke:var(--accent-ink)}
.dl-titlemenu:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.dl-titlemenu-select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
  font-size:16px;-webkit-appearance:none;appearance:none}
/* the inline war room (no modal head): the same control as the drill's region line */
.dl-region-line{margin:calc(-1 * var(--sp-2)) 0 var(--sp-2)}
.dl-titlemenu-inline{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:var(--text-primary);letter-spacing:.02em}
.dl-sheetfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin:var(--sp-4) 0}
.dl-sheetfacts>div{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--bg-hover)}
.dl-sheetfacts b{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--text-primary);font-variant-numeric:tabular-nums}
.dl-sheetfacts span{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-secondary)}

/* ═══════════════ THE FIRST-HOUR SPREAD (PROGRAM H1, 2026-09-17) ═══════════
   One composition for every day of a brand's life on Dialed: the main column
   is five sections (Get pitch-ready · Your next steps · Your calls with
   Volume · Your pipeline · Upcoming), each filled or a designed placeholder
   with ONE verb; the rail is the people and what changed. The job grid is the
   day-one hero. All tokens; 375 first (LAW 32): one column, 44 px verbs. */
.dl-bandhead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-width:0}
.dl-bandhead>span{min-width:0}
.dl-bandcount{font-family:var(--font-accent);font-style:italic;font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--teal-ink);margin-left:var(--sp-2);white-space:nowrap}
.dl-bandhead .dl-btn{flex:0 0 auto}
.dl-jobgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-4)}
.dl-jobcard{grid-column:auto;padding:var(--sp-5);gap:var(--sp-2);min-height:100%}
.dl-jobcard .dl-job-k{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
.dl-jobcard>b{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:var(--tr-snug);color:var(--text-primary);line-height:var(--lh-snug)}
.dl-jobcard>.dl-help{flex:1;font-size:var(--fs-sm);line-height:var(--lh-body)}
.dl-jobcard>.dl-btn{margin-top:var(--sp-3);align-self:flex-start;min-height:44px}
/* lit by the welcome sheet's "Get pitch-ready": the first undone job glows for a beat, then rests */
.dl-jobcard[data-lit]{box-shadow:0 0 0 2px var(--accent),0 0 0 8px color-mix(in oklab,var(--accent),transparent 82%),0 18px 40px -20px color-mix(in oklab,var(--accent),transparent 55%);transition:box-shadow var(--t-slow) var(--ease)}
.dl-jobdone .dl-row{padding:var(--sp-2) 0}
.dl-jobdone .dl-pip.dl-dark{background:var(--teal-ink)}
.dl-jobdone .dl-m i{white-space:normal}
.dl-jobdone .dl-btn{margin-left:auto;flex:0 0 auto}
/* placeholder rows: the honest line and its verb, never a lone sentence */
.dl-deltalist .dl-row.dl-placeholder{cursor:default;align-items:center;gap:var(--sp-4)}
.dl-deltalist .dl-row.dl-placeholder .dl-btn{margin-left:auto;flex:0 0 auto}
.dl-deltalist .dl-row[data-go]{cursor:pointer}
.dl-deltalist .dl-row[data-go]:hover .dl-delta-what,.dl-deltalist .dl-row[data-go]:focus-visible .dl-delta-what{color:var(--accent-ink,var(--accent))}
.dl-deltalist .dl-row>.dl-btn:last-child{margin-left:auto;flex:0 0 auto}
.dl-steplist .dl-delta-when{flex-basis:84px}
/* the pipeline drawn empty: the brand's regions on the same ladder every program climbs */
.dl-emptyladder>.dl-help{padding:var(--sp-2) 0 var(--sp-1)}
.dl-emptyladder .dl-row{cursor:default}
.dl-emptyladder .dl-ladder{margin-left:auto;flex:0 0 auto;opacity:.75}
.dl-emptyladder .dl-m i{color:var(--text-muted)}
.dl-emptyladder-rows{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--sp-6)}
@media (min-width:900px){.dl-emptyladder-rows{grid-template-columns:repeat(2,minmax(0,1fr))}.dl-emptyladder-rows .dl-row:nth-child(2){border-top:0}}
/* the team card's verbs wrap under the name on a phone instead of clipping off the edge */
@media (max-width:640px){.dl-teamlist .dl-row{flex-wrap:wrap}.dl-teamlist .dl-actions{padding-left:0;gap:var(--sp-1)}.dl-teamlist .dl-actions .dl-btn{padding:0 var(--sp-2)}.dl-teamlist .dl-actions .dl-reach-copy{width:36px}}
.dl-datelist .dl-datechip{flex:0 0 auto}
.dl-nextmeeting{grid-column:auto;cursor:pointer}
.dl-dashmain .dl-microhead{margin-top:var(--sp-4)}
@media (max-width:640px){
  .dl-jobgrid{grid-template-columns:minmax(0,1fr)}
  .dl-jobcard>.dl-btn{width:100%;justify-content:center;align-self:stretch}
  .dl-dashmain .dl-btn,.dl-dashrail .dl-btn{min-height:44px}
  .dl-bandhead{flex-wrap:wrap}
  .dl-emptyladder .dl-ladder{display:none}
  .dl-deltalist .dl-row.dl-placeholder{flex-wrap:wrap}
  .dl-deltalist .dl-row.dl-placeholder .dl-btn{margin-left:0;width:100%;justify-content:center}
}
/* ═══════════════ THE FIRST HOUR · YOU FIRST (PROGRAM H5, 2026-09-17) ═══════
   The welcome sheet's four steps (you · get to know you · your look · your
   dashboard), the one skin picker's labeled rails, and the admin brand page's
   people block. All tokens; 375 first: one column, 44 px controls. */
.dl-welcome-steps{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.dl-welcome-dot{width:6px;height:6px;border-radius:50%;background:color-mix(in oklab,var(--accent),transparent 82%);transition:width .32s cubic-bezier(.2,.8,.2,1),background .32s}
.dl-welcome-dot.done{background:color-mix(in oklab,var(--accent),transparent 40%)}
.dl-welcome-dot.active{width:22px;border-radius:var(--r-xs);background:var(--accent)}
.dl-welcome-photo{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0 var(--sp-4)}
.dl-welcome-photo>div{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.dl-welcome-photo>div .dl-btn{align-self:flex-start;margin-top:var(--sp-1)}
.dl-welcome-avatar{width:72px;height:72px;flex:0 0 72px;border-radius:50%;border:2px dashed color-mix(in oklab,var(--accent),transparent 40%);background:color-mix(in oklab,var(--accent),transparent 92%);
  display:grid;place-items:center;overflow:hidden;cursor:pointer;font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-semibold);color:var(--accent-ink,var(--accent));padding:0}
.dl-welcome-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.dl-welcome-avatar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#welcomeBody .dl-label{display:block;margin:var(--sp-3) 0 var(--sp-1)}
#welcomeBody .dl-label .dl-help{text-transform:none;letter-spacing:0;font-weight:var(--fw-normal);margin-left:var(--sp-1)}
#welcomeBody .dl-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
#welcomeBody .dl-chips .dl-filter{min-height:40px}
.dl-input-sm{flex:1 1 140px;min-width:120px}
.dl-welcome-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.dl-welcome-bday{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:var(--sp-2)}
.dl-welcome-q{padding:var(--sp-2) 0}
.dl-welcome-status{display:block;min-height:1.2em;margin-top:var(--sp-2)}
.dl-welcome-acts .dl-btn-ghost{min-height:var(--h-md);color:var(--text-muted)}
/* the one picker's rails: a labeled 32 px swatch a thumb can hit, in a 44 px cell */
.dl-skinrails{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-skinrail>.dl-label{display:block;margin-bottom:var(--sp-2)}
.dl-skinrails .dl-skins{gap:var(--sp-3)}
.dl-skinrails .dl-skin{width:auto;height:auto;min-width:44px;min-height:44px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px;cursor:pointer;border-radius:var(--r-sm)}
.dl-skinrails .dl-skin i{position:static;width:32px;height:32px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px color-mix(in oklab,var(--deep),transparent 85%);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast)}
.dl-skinrails .dl-skin span{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary)}
.dl-skinrails .dl-skin[aria-checked="true"] i{border-color:var(--text-primary);transform:scale(1.08)}
.dl-skinrails .dl-skin[aria-checked="true"] span{color:var(--text-primary)}
.dl-skinrails .dl-skin:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){.dl-skinrails .dl-skins{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2)}.dl-skinrails .dl-skin{width:100%!important;min-width:0;padding:2px 0}.dl-skinrails .dl-skin span{display:block;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;letter-spacing:.04em}}
/* the people block on the admin brand page */
.dl-people{grid-column:span 12;padding:var(--sp-2) var(--sp-5)}
.dl-person{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-3) 0}
.dl-person+.dl-person{border-top:1px solid var(--card-line)}
.dl-person-photo{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:color-mix(in oklab,var(--accent),transparent 88%);color:var(--accent-ink,var(--accent));font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.dl-person-mono{font-size:var(--fs-sm)}
.dl-person-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dl-person-body>b{font-size:var(--fs-base)}
.dl-person-body .dl-tag{align-self:flex-start;margin-top:2px}
.dl-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-2)}
.dl-fact{display:flex;flex-direction:column;font-size:var(--fs-sm);color:var(--text-primary);min-width:0}
.dl-fact small{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
@media (max-width:640px){
  .dl-welcome-2col{grid-template-columns:minmax(0,1fr)}
  .dl-welcome-bday{grid-template-columns:1fr 1fr}
  .dl-welcome-bday input{grid-column:1 / -1}
  #welcomeBody .dl-input,#welcomeBody .dl-select{min-height:44px;font-size:16px}
}
/* ═══════════════ GET THE APP (PROGRAM H7, 2026-09-17) ═══════════════ */
.dl-app-steps{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-app-steps li{display:flex;gap:var(--sp-3);align-items:center}
.dl-app-steps li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-app-frame{width:120px;flex:0 0 120px;height:auto;border-radius:var(--r-md);display:block}
/* real iPhone screenshots (Elle's, 2026-09-17): full width, the caption under each */
.dl-app-steps[data-shots] li{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
.dl-app-shot{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r-lg);border:1px solid color-mix(in oklab,var(--text-primary),transparent 88%);box-shadow:0 10px 24px -12px rgba(28,28,30,.45)}
/* PROGRAM H9: the icon that will land on the home screen, in this skin, named */
.dl-app-iconrow{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-4) 0 var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--bg-hover)}
.dl-app-iconrow>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-app-iconrow b{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-app-icon{width:56px;height:56px;flex:0 0 56px;border-radius:14px;box-shadow:0 6px 18px -8px rgba(28,28,30,.45),0 0 0 1px color-mix(in oklab,var(--text-primary),transparent 88%);display:block}
/* PROGRAM H10 (Elle 2026-09-17: "push to Volume to review first, then send"): the admin dashboard's
   own call-notes section, one row per unshared summary, two verbs, 44 px each on the phone */
.dl-notereview{display:flex;flex-direction:column}
.dl-notereview .dl-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0;border-top:1px solid var(--border-subtle);min-width:0}
.dl-notereview .dl-row:first-child{border-top:0;padding-top:0}
.dl-notereview .dl-row:last-of-type{padding-bottom:0}
.dl-notereview .dl-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-notereview .dl-m b{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-md);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-notereview .dl-m b small{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-sm);color:var(--text-muted);margin-left:var(--sp-2)}
.dl-notereview .dl-m i{font-style:normal;font-size:var(--fs-sm);line-height:1.45;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-notereview .dl-eyebrow{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);font-weight:var(--fw-semibold)}
.dl-notereview .dl-acts{display:flex;gap:var(--sp-2);flex:0 0 auto}
.dl-notereview .dl-more{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);color:var(--text-secondary)}
@media (max-width:640px){
  .dl-notereview .dl-row{flex-wrap:wrap;gap:var(--sp-2)}
  .dl-notereview .dl-m{flex-basis:100%}
  .dl-notereview .dl-m b,.dl-notereview .dl-m i{white-space:normal}
  .dl-notereview .dl-acts{width:100%}
  .dl-notereview .dl-acts .dl-btn{flex:1;min-height:44px}
}
@media (max-width:640px){.dl-app-frame{width:104px;flex-basis:104px}}

/* ═══════════════ THE SPREAD AS GLASS (PROGRAM H6, 2026-09-17) ═══════════
   Elle: "it looks like blocks … liquid glass but incredibly well styled."
   PAINTED glass, never filtered: a real backdrop blur over the frame's
   transparent body is the iOS failure class (blur-over-iframe). Each card is
   a pane: a translucent surface gradient, an accent bloom top-left and a
   teal bloom bottom-right, a hairline highlight rim, a whisper of grain, and
   a soft floor shadow. Tokens only, so every skin paints its own glass. */
.dl-dashgrid .dl-card,.dl-prize{position:relative;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in oklab,var(--surface),transparent 8%) 0%,color-mix(in oklab,var(--surface),transparent 26%) 100%);
  border:1px solid color-mix(in oklab,var(--card-line),rgba(255,255,255,.6) 40%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 color-mix(in oklab,var(--deep),transparent 94%),0 14px 34px -22px color-mix(in oklab,var(--deep),transparent 66%)}
.dl-dashgrid .dl-card::before,.dl-prize::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in oklab,var(--accent),transparent 89%),transparent 55%),radial-gradient(90% 80% at 100% 100%,color-mix(in oklab,var(--teal),transparent 93%),transparent 60%)}
.dl-dashgrid .dl-card::after,.dl-prize::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.dl-dashgrid .dl-card>*,.dl-prize>*{position:relative;z-index:1}
:root[data-tone="dark"] .dl-dashgrid .dl-card,:root[data-tone="dark"] .dl-prize{
  background:linear-gradient(160deg,color-mix(in oklab,var(--surface),transparent 4%) 0%,color-mix(in oklab,var(--surface),transparent 18%) 100%);
  border-color:color-mix(in oklab,var(--card-line),rgba(255,255,255,.18) 50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 36px -22px rgba(0,0,0,.7)}
:root[data-tone="dark"] .dl-dashgrid .dl-card::after,:root[data-tone="dark"] .dl-prize::after{mix-blend-mode:screen;opacity:.05}
/* the job cards: a stronger bloom, the number as a lit eyebrow, the verb resting on the pane's floor */
.dl-jobcard{padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.dl-jobcard::before{background:radial-gradient(130% 100% at 0% 0%,color-mix(in oklab,var(--accent),transparent 84%),transparent 58%),radial-gradient(80% 70% at 100% 100%,color-mix(in oklab,var(--teal),transparent 92%),transparent 60%)}
.dl-jobcard .dl-job-k{color:var(--accent-ink,var(--accent))}
.dl-jobcard>.dl-btn{box-shadow:0 8px 20px -12px color-mix(in oklab,var(--accent),transparent 30%)}
.dl-jobcard[data-lit]{box-shadow:0 0 0 2px var(--accent),0 0 0 8px color-mix(in oklab,var(--accent),transparent 82%),0 24px 50px -24px color-mix(in oklab,var(--accent),transparent 45%)}
/* done rows and list rows sit flush on the pane */
.dl-dashgrid .dl-deltalist .dl-row+.dl-row{border-top-color:color-mix(in oklab,var(--card-line),transparent 30%)}
/* the empty ladder: the steps are glass chips on a rail */
.dl-emptyladder .dl-ladder s{background:color-mix(in oklab,var(--surface),transparent 30%);border-color:color-mix(in oklab,var(--card-line),rgba(255,255,255,.5) 40%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.dl-emptyladder .dl-ladder u{opacity:.7}
/* the hero band above the spread */
.dl-prize>div+div{border-left-color:color-mix(in oklab,var(--card-line),transparent 20%)}
/* rail-sized variants of the band cards */
.dl-dashrail .dl-answer-tile{grid-column:auto}
.dl-dashrail .dl-upcard{grid-column:auto}
.dl-dashrail .dl-askcard{padding:var(--sp-3) var(--sp-4)}
.dl-dashrail .dl-askcard .dl-btn{padding:0 var(--sp-3)}
/* phone gutter is ONE standard: 12px — the surface belongs to the content
   (Elle 2026-08-27: all page widths optimized platform-wide). */
@media (max-width:640px){.dl-pagewrap{padding:var(--sp-3) var(--sp-3) var(--sp-16)}}

/* hero */
.dl-statuseyebrow{font-family:var(--font-accent);font-style:italic;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--teal-ink)}
.dl-statusline{margin:2px 0 var(--sp-6);font-family:Satoshi,Inter,sans-serif;
  font-size:clamp(22px,3vw,30px);line-height:1.25;font-weight:var(--fw-bold);
  color:var(--text-primary);letter-spacing:-.01em;max-width:26ch;text-wrap:balance}
.dl-statusline em{font-style:normal;color:var(--teal-ink)}

/* active items */
.dl-progcard{grid-column:span 12;padding:0;overflow:hidden}
.dl-progcard-head{display:flex;flex-direction:row;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);cursor:pointer}
.dl-progcard-head:hover .dl-progcard-name{color:var(--accent-ink,var(--accent))}
.dl-progcard-art{flex:0 0 72px;width:72px;height:72px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-hover);border:1px solid var(--card-line);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.dl-progcard-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:640px){.dl-progcard-art{flex-basis:56px;width:56px;height:56px}}
.dl-progcard-name{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-lg);
  font-weight:var(--fw-bold);color:var(--text-primary);transition:color var(--t-fast) var(--ease)}
.dl-progcard-meta{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-progcard-open{margin-left:auto;flex:0 0 auto;font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);color:var(--text-muted);white-space:nowrap}

/* region rows — REGION IS THE LEAD */
.dl-region-row{display:flex;flex-direction:row;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--card-line);
  cursor:pointer;transition:background var(--t-fast) var(--ease)}
.dl-region-row:hover{background:var(--bg-hover)}
.dl-region-lead{flex:0 0 176px;min-width:0}
.dl-region-name{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-md);
  font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--text-primary);
  text-transform:uppercase}
.dl-region-stage{display:block;margin-top:2px;font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);color:var(--teal-ink)}
.dl-region-stage.hot{color:var(--warning-ink)}
.dl-region-stage.bad{color:var(--danger-ink)}
.dl-region-mid{flex:1;min-width:0}
/* the flavors a region was pitched, stacked before its name; a program line in the drill (2026-09-08) */
.dl-region-plates{display:inline-flex;align-items:center;margin-right:var(--sp-2);vertical-align:middle}
.dl-region-plates .dl-brandart + .dl-brandart{margin-left:calc(-1 * var(--sp-2))}
.dl-region-lead > .dl-help{display:block;margin-top:2px;font-size:var(--fs-xs)}
.dl-region-progline{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.dl-region-progline > div{flex:1 1 auto;min-width:0}
.dl-region-progline > .dl-btn{flex:0 0 auto}
.dl-region-rail{display:flex;gap:var(--sp-1);max-width:340px}
.dl-region-rail i{flex:1;height:4px;border-radius:999px;background:var(--bg-hover);
  border:1px solid var(--card-line)}
.dl-region-rail i.done{background:var(--teal-ink);border-color:transparent;opacity:.45}
.dl-region-rail i.here{background:var(--accent);border-color:transparent}
.dl-region-word{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* THE WAR ROOM ON THE MESH (Elle 2026-09-07, "flat and washed out"): each item
   a book card, its regions hairlined rows inside, the rail with some weight */
.dl-warroom-inline > .dl-card{display:block;padding:var(--sp-2) var(--sp-5) var(--sp-3)}
.dl-warroom-inline > .dl-card + .dl-card{margin-top:var(--sp-3)}
.dl-warroom-inline > .dl-card > .dl-disc{border-bottom:0}
.dl-warroom-inline > .dl-card > .dl-disc > summary{min-height:var(--h-xl);font-size:var(--fs-md);gap:var(--sp-4)}
.dl-warroom-inline > .dl-derivation{margin:0 0 var(--sp-4)}
.dl-warroom-inline > .dl-card > .dl-disc > summary .dl-disc-t .dl-help{display:block;font-weight:var(--fw-normal)}
.dl-warroom-inline .dl-region-row{padding:var(--sp-3) 0;gap:var(--sp-5)}
.dl-warroom-inline .dl-region-row:hover{background:transparent}
.dl-warroom-inline .dl-region-row .dl-region-name{color:var(--text-primary)}
.dl-warroom-inline .dl-region-rail i{height:6px}
.dl-warroom-inline .dl-region-picks{margin-top:var(--sp-2)}
.dl-warroom-inline .dl-region-picks .dl-tag{font-size:var(--fs-xs);min-height:var(--sp-6)}
.dl-warroom-inline .dl-region-open{padding:0 0 var(--sp-3)}
.dl-region-when{flex:0 0 auto;font-size:var(--fs-xs);color:var(--text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-region-chev{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--text-muted);
  border-top:2px solid var(--text-muted);transform:rotate(45deg)}
/* ── THE PIPELINE READS AS A LIST WITH AN OPINION (Elle 2026-09-10: "this is
   really flat and overwhelmingly boring... from style to info and
   categorization/grouping and sectioning") ───────────────────────────────────
   Four bands carry one ink each, so a person reads the state before the words:
   won and moving is success, with the buyer is accent, not started is quiet,
   closed is muted. The ink is a token per band, never a hex per rule. */
.dl-bandbar{--band-ink:var(--text-muted);margin:var(--sp-8) 0 var(--sp-4)}   /* Y4 (Elle 2026-09-12): the band title never crowds its first card */
.dl-bandbar:first-child{margin-top:var(--sp-2)}
.dl-bandbar[data-band="motion"]{--band-ink:var(--accent-deep,var(--accent))}
.dl-bandbar[data-band="buyer"]{--band-ink:var(--accent-ink,var(--accent))}
.dl-bandbar[data-band="ready"]{--band-ink:var(--text-secondary)}
.dl-bandbar[data-band="closed"]{--band-ink:var(--text-muted)}
.dl-bandbar > h3{display:flex;align-items:baseline;gap:var(--sp-3);margin:0;
  font-family:var(--font-display,Satoshi,Inter,sans-serif);font-size:var(--fs-sm);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--band-ink);white-space:nowrap}
.dl-bandbar > h3 .dl-help{text-transform:none;letter-spacing:normal;font-weight:var(--fw-normal);
  font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-bandbar > .dl-line{background:color-mix(in oklab,var(--band-ink),transparent 82%)}

/* the stage, as a chip that carries its own band's ink — not bare grey text */
.dl-stagetap{cursor:pointer;appearance:none;font:inherit}
.dl-stagetap:hover{box-shadow:0 0 0 2px color-mix(in oklab,var(--accent),transparent 70%)}
.dl-stagetap-host .dl-stagepick{margin:0}
.dl-stagechip{display:inline-flex;align-items:center;min-height:var(--sp-6);
  padding:0 var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;
  white-space:nowrap;color:var(--band-ink,var(--text-secondary));
  background:color-mix(in oklab,var(--band-ink,var(--text-muted)),transparent 90%);
  border:1px solid color-mix(in oklab,var(--band-ink,var(--text-muted)),transparent 78%)}
.dl-stagechip[data-band="motion"]{--band-ink:var(--accent-deep,var(--accent))}
.dl-stagechip[data-band="buyer"]{--band-ink:var(--accent-ink,var(--accent))}
.dl-stagechip[data-band="ready"]{--band-ink:var(--text-secondary)}
.dl-stagechip[data-band="closed"]{--band-ink:var(--text-muted)}

/* ONE progress track, not eight pills a row. Eight rows of eight bars was the
   noise that made the tab read as a grid of identical marks. */
.dl-region-prog{display:block;height:3px;margin-top:var(--sp-2);border-radius:999px;
  background:color-mix(in oklab,var(--text-muted),transparent 88%);overflow:hidden}
.dl-region-prog > i{display:block;height:100%;border-radius:999px;
  background:color-mix(in oklab,var(--band-ink,var(--accent)),transparent 25%)}

/* what is waiting on a human, said on the row it is waiting on */
.dl-needchip{display:inline-flex;align-items:center;min-height:var(--sp-6);margin-top:var(--sp-2);
  padding:0 var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap;
  color:var(--accent-deep,var(--accent));background:color-mix(in oklab,var(--accent),transparent 88%)}

/* THE DEAL ROW IS A GRID, NOT A FLEX STACK (eyes 2026-09-10: the flex row stacked
   the chip, the track and the sentence into a 115px column and left a dead gulf
   across the middle 40% of the width). Five columns: who · where it stands · what
   to do · the money · in. `.dl-dealrow` scopes this to the Pipeline, because
   `.dl-region-row` is also the dashboard roster's and the portal's row. */
.dl-region-row{--band-ink:var(--text-muted);position:relative}
.dl-region-row[data-band="motion"]{--band-ink:var(--accent-deep,var(--accent))}
.dl-region-row[data-band="buyer"]{--band-ink:var(--accent-ink,var(--accent))}
.dl-region-row[data-band="ready"]{--band-ink:var(--text-secondary)}
.dl-region-row[data-band="closed"]{--band-ink:var(--text-muted)}
.dl-region-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}

.dl-dealrow{display:grid;align-items:center;
  grid-template-columns:minmax(150px,210px) minmax(120px,150px) minmax(0,1fr) auto 10px;
  gap:var(--sp-4);padding:var(--sp-3) var(--sp-4)}
.dl-dealrow[data-needs="1"]{background:color-mix(in oklab,var(--accent),transparent 95%)}   /* the skin's accent, never gold (Elle 2026-09-18) */
.dl-dealrow > .dl-region-lead{flex:none;min-width:0}
/* weight: the money is the only bold thing on the row; the region name is medium; the rest is quiet (sweep 2026-09-12) */
.dl-dealrow .dl-region-name{font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.2;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-dealrow .dl-region-lead > .dl-help{margin-top:1px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* where it stands: the chip with its own track directly under it, one unit */
.dl-region-state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);min-width:0}
.dl-dealrow .dl-region-prog{width:100%;margin-top:0}
/* what to do: the alarm inline with the words, never stacked above them */
.dl-dealrow > .dl-region-mid{display:flex;align-items:baseline;gap:var(--sp-2);min-width:0}
.dl-dealrow .dl-needchip{margin-top:0;flex:0 0 auto}
/* one line on the row, every row the same height; the whole sentence lives in the drill */
.dl-dealrow .dl-region-word{margin-top:0;white-space:normal;min-width:0;font-weight:var(--fw-normal);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* the money: a program's own PO is solid, the engine's guess is quiet and marked */
.dl-dealrow > .dl-region-win{min-width:var(--sp-16)}
.dl-dealrow > .dl-region-win b{font-size:var(--fs-sm)}
.dl-region-win[data-est="1"] b{font-weight:var(--fw-medium);color:var(--text-secondary)}
.dl-region-win[data-est="1"] span{font-style:italic}
.dl-dealrow > .dl-region-chev{justify-self:end}
/* The flex-era rule `.dl-warroom-inline .dl-region-row{padding:.. 0;gap:--sp-5}` outranks
   `.dl-dealrow` (0,2,0 beats 0,1,0) and was injecting a 20px ROW-gap into the grid, which
   is what made a phone row 142px for two short lines. Restated at equal weight. */
.dl-warroom-inline .dl-dealrow{padding:var(--sp-3) var(--sp-4);gap:var(--sp-4)}
/* ── THE DRILL, RE-READ AS A PERSON READS IT (Elle 2026-09-12: "so many places are crammed... images a
   pinhead... sectioned not spaced or aligned"). The rail carries the journey's dates; a note somebody
   wrote is a card; the feed opens at three; a sample wears its next move; documents are one tile and
   quiet lists; the item's picture is big enough to recognise and appears ONCE. */
.dl-stagerail small{display:block;margin-top:1px;font-size:var(--fs-2xs);color:var(--text-muted);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.dl-stagerail .here small{color:var(--text-secondary)}
/* the date under a step is a tap to correct it (X1) */
.dl-stagerail .dl-stagedate{min-height:0;text-align:left}
.dl-stagedate{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted color-mix(in oklab,var(--text-muted),transparent 40%);text-underline-offset:2px}
.dl-stagedate:hover{color:var(--accent-ink,var(--accent))}
.dl-stagedate-in{min-height:var(--h-sm);height:var(--h-sm);padding:0 var(--sp-1);font-size:var(--fs-2xs);width:auto;max-width:100%}
.dl-entries[data-shown="3"] > li:nth-child(n+4){display:none}
.dl-entries-more{margin:var(--sp-2) 0 0 calc(var(--sp-12) + var(--sp-3))}
.dl-entry[data-kind="note"]{border-top:0;padding-top:var(--sp-2)}
.dl-entry[data-kind="note"] > .dl-entry-body > .dl-notecard{background:color-mix(in oklab,var(--accent),transparent 95%);border-color:color-mix(in oklab,var(--accent),transparent 84%);border-left:3px solid color-mix(in oklab,var(--accent),transparent 30%)}
.dl-entry[data-kind="note"] > .dl-entry-body > .dl-notecard > b{display:block;margin-bottom:var(--sp-1);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-entry[data-kind="note"] > .dl-entry-body > .dl-notecard > cite{font-weight:var(--fw-normal)}
.dl-entry-edit{display:grid;gap:var(--sp-2)}
.dl-entry-edit .dl-chips{margin:0}
.dl-entry .dl-entry-body .dl-doclink{font-size:inherit;color:inherit;text-decoration-color:color-mix(in oklab,var(--text-muted),transparent 40%)}
.dl-samplerow{align-items:center}
/* a money cell on a feed row sits in the RIGHT column on every row (the POs fold; Y3) */
.dl-feedrow > .dl-region-win{flex:0 0 auto;margin-left:auto;align-self:center;text-align:right;min-width:var(--sp-16)}
.dl-samplerow > .dl-tag{flex:0 0 auto;margin-left:auto;align-self:center}
.dl-doclist-quiet{margin-top:var(--sp-1)}
.dl-doclist-quiet .dl-feedrow{padding:var(--sp-1) 0}
.dl-dealhost .dl-disc > summary .dl-disc-t .dl-help{display:block;margin-top:2px;font-weight:var(--fw-normal)}
.dl-dealmeta{margin:0 0 var(--sp-4)}
/* THE DRILL'S RHYTHM (X2, Elle 2026-09-12: "everything so close together almost overlapping"): every block head
   sits the same distance from the block above; a quiet line or a fold never touches its neighbour */
/* Y4 (Elle 2026-09-12, "all of this washes out, not distinct enough"): every block of the drill is a SECTION — a
   hairline above its head (or its one-line empty, or its fold), then the head, then the body */
.dl-dealhost .dl-microhead{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--card-line)}
.dl-dealhost .dl-dealsum + .dl-dealmeta{margin-top:var(--sp-4)}
.dl-dealhost .dl-emptyline{margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--card-line)}
.dl-dealhost .dl-emptyline + .dl-emptyline{margin-top:var(--sp-3);padding-top:0;border-top:0}   /* two quiet lines in a row share one section */
.dl-dealhost .dl-microhead + .dl-emptyline{margin-top:0;padding-top:0;border-top:0}
.dl-dealhost .dl-deal-tiles{margin-bottom:var(--sp-2)}
.dl-dealhost .dl-podisc{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--card-line);border-bottom:0;border-radius:0}
.dl-dealhost .dl-podisc > summary .dl-disc-t .dl-help{display:inline;margin-left:var(--sp-2)}
.dl-dealhost .dl-podisc > .dl-disc-b{padding-top:var(--sp-2)}
.dl-dealhost .dl-picks{margin-top:var(--sp-5)}
/* the add tray of faces is a row, not a dashed box (X2) */
/* THE TRAY OPENS BESIDE THE + RING, ON THE SAME ROW (Elle 2026-09-13: "why do faces add a new row — put the
   option to the right of the + bubble"): picker and tray flow inline; a tray too wide for the row wraps
   under it, never before. The tray's faces read as candidates (lighter) until tapped. */
/* the tray opens BESIDE the + ring on the same row, a hairline between the picked faces and the offered
   ones (Elle's recording 2026-09-13: "why do faces add a new row"); it wraps only when the row is full */
.dl-facepick-tray{display:contents}
.dl-facepick-tray[hidden]{display:none}
.dl-facepick-tray > button:first-child{border-left:1px solid var(--card-line);border-radius:0 var(--r-md) var(--r-md) 0;padding-left:var(--sp-3)}
.dl-facepick-tray .dl-champ{width:44px;height:44px;opacity:.75}
.dl-facepick-add[aria-expanded="true"]{outline:0}
/* the line's card wears no picture: a quiet word in the tile (X14) */
.dl-brandart-line{background:color-mix(in oklab,var(--accent),transparent 92%);border-color:color-mix(in oklab,var(--accent),transparent 80%)}
.dl-brandart-line .dl-brandart-word{font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--accent-ink,var(--accent))}
/* the line's tile is its items' pictures, a 2×2 of them (Elle 2026-09-13) */
.dl-brandart-stack{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:2px;padding:var(--sp-1);overflow:hidden}
.dl-brandart-stack > img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm);background:var(--surface)}
.dl-brandart-stack > img:only-child{grid-column:1 / -1}
/* the next touch on the summary line (X13): a scheduled call reads in the accent, a passed one asks to be logged */
.dl-touch{color:var(--accent-ink,var(--accent));font-weight:var(--fw-medium)}
.dl-touch.is-passed{color:var(--warning-ink,#8A6A1F)}
.dl-touch .dl-doclink{font-size:inherit;color:inherit}
#upTouchWhen{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-2)}
@media (max-width:640px){#upTouchWhen{grid-template-columns:1fr}}
/* the buying team's verbs sit at the row's end, quiet until hovered; a former buyer reads muted (X3) */
.dl-rosterrow{align-items:center}
.dl-rosterrow > .dl-rosterverbs{margin:0 0 0 auto;flex:0 0 auto;gap:var(--sp-1);opacity:.55;transition:opacity var(--t-fast)}
.dl-rosterrow:hover > .dl-rosterverbs,.dl-rosterrow:focus-within > .dl-rosterverbs{opacity:1}
.dl-rosterrow.is-former > div > b{color:var(--text-secondary);font-weight:var(--fw-medium)}
.dl-select-sm{min-height:var(--h-sm);height:var(--h-sm);padding:0 var(--sp-2);font-size:var(--fs-xs);width:auto}
@media (max-width:760px){.dl-rosterrow{flex-wrap:wrap}.dl-rosterrow > .dl-rosterverbs{flex-basis:100%;max-width:100%;margin-left:0;flex-wrap:wrap;opacity:1}}
.dl-microhead .dl-help{text-transform:none;letter-spacing:0;font-weight:var(--fw-normal)}
.dl-notecard.is-summary > p{font-size:var(--fs-base)}
.dl-notecard.is-summary > .dl-notecard-body .dl-note-p{font-size:var(--fs-base)}   /* the summary reads a size up, as its plain form does */
/* the item's picture, once, big enough to recognise: the product is centred in its photo, so a square crop
   zoomed a quarter shows the pack, not the white around it */
@media (max-width:900px){
  .dl-warroom-inline > .dl-itemcard > .dl-itemdisc > summary{flex-wrap:wrap}
  .dl-warroom-inline > .dl-itemcard > .dl-itemdisc > summary > .dl-tag{order:9;flex-basis:100%;width:max-content;max-width:100%;margin-left:calc(var(--sp-16) + var(--sp-3))}
}
/* the track has to read at a glance or it is a stray hairline */
.dl-dealrow .dl-region-prog{height:4px;background:color-mix(in oklab,var(--text-muted),transparent 82%)}
.dl-dealrow .dl-region-prog > i{background:var(--band-ink,var(--accent))}
/* ── THE DEAL RECORD (Elle 2026-09-10: "the css for the region break out detail
   page is awful still... any pearl notes should look as entered notes not field
   with text in it to edit... fully stunning and on theme") ──────────────────────
   The drill was a stack of full-width form controls: the buyer's own sentence sat
   inside an edit box and read like a form value. Now words that somebody wrote
   READ as words, attributed and dated, and the input appears when you ask for it. */

/* the deal expands under its own row, tied to it by a rule down the left */
.dl-dealhost{margin:0 0 var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-5);
  border-left:2px solid color-mix(in oklab,var(--accent),transparent 70%);
  background:color-mix(in oklab,var(--accent),transparent 97%);
  border-radius:0 var(--r-md) var(--r-md) 0;animation:dlDealIn var(--t-base) var(--ease)}
@keyframes dlDealIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dl-dealrow[data-open="1"]{background:color-mix(in oklab,var(--accent),transparent 88%)}
.dl-dealrow[data-open="1"] .dl-region-chev{transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.dl-dealhost{animation:none}}

/* where it stands, said once, at the top of the record */
.dl-deal-now{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
.dl-deal-now > b{font-family:var(--font-display,Satoshi,Inter,sans-serif);font-size:var(--fs-lg);
  font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-deal-now > span{font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-deal-now > .dl-help{margin-left:auto}

/* six columns: what you write spans the row, what you pick takes a third.
   The ONE .dl-dealgrid definition lives with the other deal rules below. */
.dl-recfield{grid-column:1 / -1;min-width:0}
.dl-recfield-sm{grid-column:span 2}
.dl-recfield-k{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-1)}
.dl-recfield-k > em{font-style:normal;font-weight:var(--fw-medium);text-transform:none;
  letter-spacing:normal;color:var(--text-secondary)}
/* a field with content shows its READ face; its input waits in the DOM for autosave */
.dl-recfield[data-has="1"]:not([data-editing]) > .dl-recfield-form{display:none}
.dl-recfield[data-editing] > .dl-recfield-read{display:none}
/* READ FACE, EDIT FACE BY SECTION (Y1, Elle 2026-09-12: "field become visible if editing"): inside a
   disclosure that is not editing, every recfield shows its text and hides its control; data-editing on the
   disclosure flips the whole section. The controls stay in the DOM for autosave and the payload (LAW 54). */
:is(.dl-disc,[data-recscope]):not([data-editing]) .dl-recfield > :is(.dl-input,.dl-textarea,.dl-select,.dl-chips,.dl-help,input[type="checkbox"]){display:none}
:is(.dl-disc,[data-recscope])[data-editing] .dl-recfield > .dl-recfield-read{display:none}
:is(.dl-disc,[data-recscope]) .dl-recfield-read{padding-right:0}
/* a scope's edit-only furniture (add verbs, remove crosses, row inputs) rests hidden; its row read faces show */
[data-recscope]:not([data-editing]) :is([data-edit-only],.ct-ch-add,.ct-ch-x,.ct-brandchip > button,.ct-ch-row > input){display:none}
:is(.dl-disc,[data-recscope]):not([data-editing]) [data-edit-only]{display:none}   /* a section's edit-time helper sentence rests with its inputs */
[data-recscope][data-editing] .ct-ch-row > .dl-recfield-read{display:none}
[data-recscope]:not([data-editing]) .ct-checkrow > label{display:none}
[data-recscope]:not([data-editing]) .ct-checkrow:not(:has(.dl-recfield-p)){display:none}
[data-recscope]:not([data-editing]) .dl-field:has(> .ct-ch:empty){display:none}   /* no extra channels: the row says nothing */   /* an unlocked record says nothing about the lock */
.dl-fieldrow > .dl-field.dl-recfield{grid-column:auto}   /* the deal record's full-span rule does not apply inside a field row: two fields a row stay two a row */
.dl-recfield-empty{color:var(--text-muted)}
/* THE NOTE, READ AS A PERSON LAYS IT OUT (Y2, js/dialed-note.js): a run of "Label: words" is a definition list,
   paragraphs stay paragraphs, dashes are bullets, numbers and dates are tabular */
.dl-note{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:var(--sp-4);row-gap:var(--sp-2);margin:0;font-size:var(--fs-sm)}
.dl-note > dt{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted);padding-top:var(--sp-1);max-width:22ch;line-height:1.4}
.dl-note > dd{margin:0;color:var(--text-primary);line-height:1.5;min-width:0;overflow-wrap:anywhere}
.dl-note-p{margin:0 0 var(--sp-2);font-size:var(--fs-sm);line-height:1.55;color:var(--text-primary);overflow-wrap:anywhere}
.dl-note-p:last-child{margin-bottom:0}
.dl-note-list{margin:0 0 var(--sp-2);padding-left:1.2em;font-size:var(--fs-sm);line-height:1.5;color:var(--text-primary)}
.dl-note + .dl-note,.dl-note-p + .dl-note,.dl-note + .dl-note-p{margin-top:var(--sp-3)}
.dl-num{font-variant-numeric:tabular-nums}
@media (max-width:640px){.dl-note{grid-template-columns:1fr;row-gap:var(--sp-1)} .dl-note > dt{padding-top:var(--sp-2);max-width:none} .dl-note > dd{margin-bottom:var(--sp-1)}}
.dl-disc:not([data-editing]) .dl-recfield > .dl-label{color:var(--text-muted)}
.dl-recfield-read{position:relative;padding-right:var(--sp-12)}
/* THE READ FACE READS LIKE A RECORD, NOT A FORM (Elle's recording 2026-09-13, 3:05–3:30: "bold header
   sections so you can read the input text"): the field's name is a bold small header, its value is body
   text under it; an empty field says nothing at all (a wall of "—" rows was the Marketing section); the
   edit-time helper sentences ("Select all that apply…") belong to the edit face only. */
.dl-recfield-p{margin:0;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text-primary);overflow-wrap:anywhere}
:is(.dl-disc,[data-recscope]):not([data-editing]) .dl-recfield > .dl-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-primary);margin-bottom:var(--sp-1)}
:is(.dl-disc,[data-recscope]):not([data-editing]) .dl-recfield{margin-bottom:var(--sp-3)}
:is(.dl-disc,[data-recscope]):not([data-editing]) .dl-recfield:has(> .dl-recfield-read > .dl-recfield-empty:only-child){display:none}
:is(.dl-disc,[data-recscope]):not([data-editing]) :is(.dl-disc-b,.dl-recscope-body) > p.dl-help{display:none}
.dl-recfield-edit{position:absolute;top:0;right:0;appearance:none;border:0;background:none;
  padding:0 var(--sp-1);font:inherit;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted);cursor:pointer;opacity:0;
  transition:opacity var(--t-fast) var(--ease)}
.dl-recfield:hover .dl-recfield-edit,.dl-recfield-edit:focus-visible{opacity:1}
.dl-recfield-edit:hover{color:var(--accent-ink,var(--accent))}
@media (hover:none){.dl-recfield-edit{opacity:1}}

/* ── THE DEAL, CONDENSED (Elle 2026-09-11: "condensed into an add update... give a
   high level of where the progress is and key info then a + update... so much wasted
   space and unfinished") ──────────────────────────────────────────────────────── */
.dl-dealsum{margin:var(--sp-3) 0 var(--sp-5)}
.dl-dealsum-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3)}
.dl-dealsum-facts{font-size:var(--fs-sm);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.dl-dealsum-add{margin-left:auto;flex:0 0 auto}
.dl-dealsum-next{margin:var(--sp-3) 0 0;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text-primary)}
.dl-dealsum-next > span:not(.dl-quiet){display:inline-block;margin-right:var(--sp-2);font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
/* the sentence when there is no next step is quiet prose, not a second label (it inherited the label's
   caps: "NEXT  NO NEXT STEP ON RECORD" on Elle's iPhone, 2026-09-13) */
.dl-dealsum-next > .dl-quiet{color:var(--text-muted);font-style:italic}
.dl-dealsum-next em{display:inline-block;margin-right:var(--sp-2);padding:0 var(--sp-2);
  border-radius:var(--r-pill);font-style:normal;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap;
  color:var(--accent-deep,var(--accent));background:color-mix(in oklab,var(--warning-ink,#8A6A1F),transparent 90%)}

/* the history: what a person or Pearl actually entered, newest first */
.dl-entries{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1)}
.dl-entry{display:grid;grid-template-columns:var(--sp-12) minmax(0,1fr);gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;border-top:1px solid var(--card-line)}
.dl-entry:first-child{border-top:0}
.dl-entry-when{font-size:var(--fs-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;padding-top:2px}
.dl-entry-body > b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-entry-body > p{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);line-height:var(--lh-body);
  color:var(--text-secondary);white-space:pre-wrap}
.dl-entry-who{display:block;margin-top:var(--sp-1);font-size:var(--fs-2xs);color:var(--text-muted)}
.dl-entry[data-kind="pearl"] .dl-entry-body > b{color:var(--accent-ink,var(--accent))}
.dl-entry[data-kind="pearl"]{background:color-mix(in oklab,var(--accent),transparent 96%);
  border-radius:var(--r-sm);padding-left:var(--sp-3)}
.dl-entry .dl-quote{margin-top:var(--sp-2);font-size:var(--fs-sm)}

/* an empty section states itself in one line and offers its verb; a card of nothing
   is the "so much wasted space" Elle kept seeing (2026-09-11) */
.dl-emptyline{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);
  margin:0 0 var(--sp-4);font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-emptyline > b{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-muted)}
.dl-emptyline .dl-chips{margin:0}

/* the deal's controls, together, instead of each on its own empty line */
.dl-dealmeta{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--sp-5);margin:var(--sp-2) 0 var(--sp-4)}
.dl-dealmeta > .dl-driverline{margin:0}
/* Y7: on the deal's leads row the bench rests muted beside the leads; a lead is full and ringed */
.dl-driverline .dl-facepick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dl-driverline .dl-facepick::-webkit-scrollbar{display:none}
.dl-driverline .dl-facepick button[aria-pressed="false"] .dl-champ{opacity:.45;filter:saturate(.6)}
.dl-driverline .dl-facepick button[aria-pressed="false"]{color:var(--text-muted)}
.dl-driverline .dl-facepick button[aria-pressed="false"]:hover .dl-champ{opacity:.85}
@media (max-width:640px){.dl-driverline .dl-facepick{flex-wrap:wrap;overflow:visible}}

/* documents in the drill are the book's dl-filetile, the same tile the Files folder
   paints (LAW 36) — no second grid lives here */
.dl-deal-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-3)}
.dl-deal-tiles > .dl-filetile{grid-column:auto}
/* an input on the tiles reads as an input, not as a fact we measured (sweep 2026-09-12) */
.dl-dealmeta > [data-input]{border:1px dashed color-mix(in oklab,var(--text-muted),transparent 45%);background:transparent}
.dl-deal-tiles-k{display:block;margin:var(--sp-3) 0 var(--sp-2);font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
@media (max-width:760px){.dl-dealsum-add{margin-left:0}}

/* the buyer's own words, set as a quotation and signed */
/* the fact tiles and the varieties wall both belong to the deal record: keep their
   chips from becoming five equal blocks that read as a wall */
.dl-dealhost .dl-chips > .dl-filter{flex:0 1 auto}
.dl-quote{margin:0;padding:0 0 0 var(--sp-4);border-left:2px solid color-mix(in oklab,var(--accent),transparent 72%);
  font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text-primary)}
.dl-quote > cite{display:block;margin-top:var(--sp-2);font-style:normal;font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}

/* a note reads as a note somebody entered, never as a value inside a box */
.dl-notecard{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--bg-hover);border:1px solid var(--card-line)}
.dl-notecard > p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-primary);white-space:pre-wrap}
.dl-notecard > cite{display:block;margin-top:var(--sp-2);font-style:normal;font-size:var(--fs-2xs);
  font-weight:var(--fw-semibold);color:var(--text-muted)}
.dl-notecard.is-pearl{background:color-mix(in oklab,var(--accent),transparent 94%);
  border-color:color-mix(in oklab,var(--accent),transparent 82%)}
.dl-notecard.is-pearl > cite{color:var(--accent-ink,var(--accent))}

@media (max-width:760px){
  .dl-recfield-sm{grid-column:span 3}
  .dl-dealhost{padding:var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4);margin-left:0}
  .dl-deal-now > .dl-help{margin-left:0;flex-basis:100%}
}

/* a closed deal is present but spent: it never competes with a live one for the eye */
.dl-dealrow[data-closed="1"]{opacity:.72}
.dl-dealrow[data-closed="1"] .dl-region-prog > i{background:color-mix(in oklab,var(--text-muted),transparent 55%)}
.dl-dealrow[data-closed="1"] .dl-region-name{color:var(--text-secondary)}

@media (max-width:900px){
  .dl-dealrow{grid-template-columns:minmax(0,1fr) auto 10px;
    grid-template-areas:"lead money in" "state state state" "mid mid mid";
    row-gap:var(--sp-1);padding:var(--sp-3)}
  .dl-dealrow > .dl-region-lead{grid-area:lead}
  .dl-dealrow > .dl-region-state{grid-area:state;flex-direction:row;align-items:center;gap:var(--sp-3)}
  .dl-dealrow .dl-region-prog{width:min(180px,40%)}
  .dl-dealrow > .dl-region-mid{grid-area:mid}
  .dl-dealrow > .dl-region-win{grid-area:money}
  .dl-dealrow > .dl-region-chev{grid-area:in}
  .dl-dealrow > .dl-region-mid:empty,.dl-dealrow > .dl-region-win:empty{display:none}
  /* on a phone the words are the scarce thing: give the next step three lines and
     let the state column sit tight under the name instead of floating a row away */
  .dl-dealrow > .dl-region-state{margin-top:var(--sp-1)}
  .dl-dealrow .dl-region-word{-webkit-line-clamp:2}
  .dl-dealrow > .dl-region-chev{align-self:start;margin-top:var(--sp-2)}
  .dl-warroom-inline .dl-dealrow{padding:var(--sp-3);row-gap:var(--sp-1);column-gap:var(--sp-3)}
}
/* an item that needs a human wears the mark on its NAME while it is folded shut;
   a bare dot under the words read as a stray artifact (eyes, 2026-09-10) */
.dl-itemdisc[data-needs="1"] > summary .dl-disc-t{
  background:linear-gradient(to right,color-mix(in oklab,var(--warning-ink,#8A6A1F),transparent 88%) 0 3px,transparent 3px);
  padding-left:var(--sp-3);border-radius:var(--r-sm)}
.dl-itemdisc[data-needs="1"] > summary::before{content:"";flex:0 0 3px;align-self:stretch;
  border-radius:999px;background:var(--warning-ink,#8A6A1F);margin-right:var(--sp-1)}

/* A COLLAPSED LIST HAS TO FIT ON A SCREEN (eyes, 2026-09-10: seven items at 155px
   each is a scroll before a person has read anything). The folded item is one dense
   row; opening it is what earns the space. */
.dl-warroom-inline > .dl-itemcard{padding:0}
.dl-warroom-inline > .dl-itemcard > .dl-itemdisc > summary{min-height:var(--h-lg);
  padding:var(--sp-3) var(--sp-4);gap:var(--sp-3)}
/* the item's picture, once, big enough to recognise (Elle 2026-09-12: "images still a pinhead"): the 96px tile's
   padding left a 16px pack inside a 40px box; now 56px, no padding, a square crop zoomed a quarter, because the
   product is centred in its photo and the white around it is what was showing */
.dl-warroom-inline > .dl-itemcard > .dl-itemdisc > summary .dl-brandart-xl{
  width:var(--sp-16);height:var(--sp-16);flex:0 0 var(--sp-16);padding:0;border-radius:var(--r-md)}
.dl-warroom-inline > .dl-itemcard > .dl-itemdisc > summary .dl-brandart-xl img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;transform:scale(1.28)}
.dl-warroom-inline > .dl-itemcard > .dl-itemdisc > summary .dl-disc-t{font-size:var(--fs-md);min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-warroom-inline > .dl-itemcard > .dl-itemdisc[open] > summary{border-bottom:1px solid var(--card-line)}
.dl-warroom-inline > .dl-itemcard > .dl-itemdisc > .dl-disc-b{padding:0 var(--sp-4) var(--sp-2)}
.dl-warroom-inline > .dl-card + .dl-card{margin-top:var(--sp-2)}

/* a state, said quietly, so it never competes with a real next step */
.dl-region-word.dl-quiet{color:var(--text-muted);font-weight:var(--fw-normal);font-style:italic}

@media (max-width:760px){
  .dl-region-row{flex-wrap:wrap}.dl-region-lead{flex:1 1 100%}.dl-region-mid{flex:1 1 70%}
  .dl-bandbar > h3 .dl-help{display:none}
}

/* section heads + bands */
.dl-bandhead{margin:var(--sp-8) 0 var(--sp-3);font-family:Satoshi,Inter,sans-serif;
  font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--text-primary)}
.dl-askcard{grid-column:span 12;display:flex;flex-direction:row;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);cursor:pointer}
.dl-askcard>span:first-child{flex:1;min-width:0;text-align:left}
.dl-askcard b{font-size:var(--fs-base)}
.dl-askcard .dl-help{display:block;margin-top:2px}
.dl-askcard .dl-btn{margin-left:auto;flex:0 0 auto}
.dl-quietcard{grid-column:span 12;padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);
  color:var(--text-secondary)}
.dl-quietcard b{color:var(--teal-ink)}
.dl-deltalist{grid-column:span 12;padding:var(--sp-2) var(--sp-5)}
.dl-deltalist .dl-row{align-items:flex-start;cursor:pointer}
.dl-deltalist .dl-row:hover .dl-delta-what{color:var(--accent-ink,var(--accent))}
.dl-delta-when{flex:0 0 76px;font-size:var(--fs-xs);color:var(--text-muted);
  font-variant-numeric:tabular-nums;padding-top:2px}
.dl-delta-what{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--text-primary);
  transition:color var(--t-fast) var(--ease)}
.dl-delta-what .dl-help{display:block;margin-top:1px}
.dl-answer-tile{grid-column:span 4;padding:var(--sp-4) var(--sp-5);cursor:pointer}
.dl-answer-tile:hover .dl-stat{color:var(--accent-ink,var(--accent))}
.dl-answer-tile .dl-stat{font-variant-numeric:tabular-nums;transition:color var(--t-fast) var(--ease)}
.dl-upcard{grid-column:span 6;display:flex;flex-direction:row;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);cursor:pointer}
.dl-datechip{flex:0 0 auto;text-align:center;min-width:52px;padding:var(--sp-2);
  border-radius:var(--r-md);background:var(--bg-hover);border:1px solid var(--card-line)}
.dl-datechip b{display:block;font-size:var(--fs-lg);line-height:1;color:var(--text-primary)}
.dl-datechip span{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-muted)}
@media (max-width:760px){.dl-answer-tile,.dl-upcard{grid-column:span 12}}
.dl-nudge{margin-top:var(--sp-8);font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-nudge a{color:var(--accent-ink,var(--accent));font-weight:var(--fw-semibold);cursor:pointer}

/* program sheet interior (the chassis owns the shell) */
.dl-stagerail{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-2)}
.dl-stagerail > span{flex:1;min-width:0;display:flex;flex-direction:column}
.dl-stagerail > .dl-stagestep > button{width:100%}
.dl-stagerail button{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer;min-height:var(--h-lg);border-radius:var(--r-sm)}
.dl-stagerail button:hover i{background:var(--accent);opacity:.6}
.dl-stagerail button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-stagerail i{display:block;height:5px;border-radius:999px;background:var(--bg-hover);border:1px solid var(--card-line)}
.dl-stagerail .done i{background:var(--accent);border-color:transparent;opacity:.4}   /* the skin's own accent (Elle 2026-09-18: 'every theme needs to stick to its colors') */
.dl-stagerail .here i{background:var(--accent);border-color:transparent}
.dl-stagerail em{display:block;margin-top:var(--sp-1);font-style:normal;font-size:var(--fs-2xs);
  font-weight:var(--fw-semibold);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-stagerail .here em{color:var(--text-primary)}
@media (max-width:640px){.dl-stagerail em{display:none}.dl-stagerail small{display:none}}
/* the stage as words with a picker (2026-09-08): the rail reads, the picker moves; on a phone the picker is the only labeled control */
/* THE DEAL'S OWN WORDS (2026-09-09): next step, owner, decision date, feedback, notes as fields that save as you type; Pearl's read; a note logged */
.dl-deal{display:flex;flex-direction:column;gap:var(--sp-3)}
/* 2026-09-10: six columns, so a written field can span the row while a picked one
   takes a third. Was repeat(2,...) and, being LATER in the file, it silently flattened
   the record's grid back to two full-width columns. One definition, not two (LAW 36). */
.dl-dealgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-3) var(--sp-4)}
.dl-dealgrid > .dl-field{grid-column:span 2}
.dl-dealgrid .dl-field{margin:0;min-width:0}
.dl-dealgrid .dl-input,.dl-dealgrid .dl-select,.dl-dealgrid .dl-textarea{width:100%;max-width:100%;box-sizing:border-box;min-width:0}
.dl-dealgrid .dl-deal-wide{grid-column:1 / -1}
.dl-dealgrid .dl-textarea{min-height:0}
.dl-dealnote{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.dl-dealnote > .dl-input{flex:1 1 220px;width:auto;min-width:0}
.dl-pearlread{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);border:1px solid color-mix(in oklab,var(--accent),transparent 70%);background:color-mix(in oklab,var(--accent),transparent 94%)}
.dl-pearlread > div{display:flex;align-items:baseline;gap:var(--sp-2)}
.dl-pearlread > div > b{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:var(--fw-semibold)}
.dl-pearlread > div > span{font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-pearlread p{margin:0;font-size:var(--fs-sm);color:var(--text-primary)}
.dl-pearlread ul{margin:0;padding-left:var(--sp-5);font-size:var(--fs-sm);color:var(--text-primary)}
.dl-doclink{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:var(--text-primary);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--accent),transparent 50%);text-underline-offset:3px;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.dl-doclink:hover{color:var(--accent-ink,var(--accent))}
.dl-doclink:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.dl-itemopen{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer;text-align:left;min-width:0}
/* the drill's head is art + name + a flag: the name yields (Elle's recording 2026-09-13, 1:26 — a column of letters beside STALLED) */
.dl-sheethead .dl-itemopen{flex:1 1 auto}
.dl-itemopen .dl-disc-t{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-sheethead .dl-pipe-flag{flex:0 0 auto}
.dl-itemopen:hover .dl-disc-t{color:var(--accent-ink,var(--accent))}
.dl-itemopen:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-md)}
@media (max-width:640px){.dl-dealgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.dl-dealgrid > .dl-field{grid-column:1 / -1}.dl-doclink{display:inline-flex;align-items:center;min-height:44px}}
.dl-stagepick{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-4)}
.dl-stagepick > .dl-label{margin:0}
.dl-stagepick > .dl-select{width:auto;flex:0 1 220px;min-height:var(--h-lg)}
.dl-stagepick > .dl-help{flex:1 1 200px;font-size:var(--fs-xs)}
.dl-nextstep{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-4) 0;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--bg-hover);
  font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-owner{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;padding:2px var(--sp-2);border-radius:var(--r-sm);
  background:var(--teal-bg,var(--bg-hover));color:var(--teal-ink);white-space:nowrap}
.dl-microhead{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary)}
.dl-event{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--card-line);
  font-size:var(--fs-sm)}
.dl-event:first-of-type{border-top:0}
.dl-event time{flex:0 0 64px;color:var(--text-muted);font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;padding-top:2px}
.dl-event div{flex:1;min-width:0;color:var(--text-primary)}
.dl-event .dl-help{display:block;margin-top:1px}

/* getting started */
/* (the getting-started runway retired 2026-09-17 with PROGRAM H1: its three steps are cards in the pitch-ready grid) */

/* skeleton while loading — no blank frame (LAW 46.6) */
.dl-skelband{height:120px;border-radius:var(--r-2xl);background:var(--bg-hover);
  border:1px solid var(--card-line);animation:pdPulse 1.2s ease-in-out infinite;margin-bottom:var(--sp-4)}
@keyframes pdPulse{0%,100%{opacity:.55}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.dl-skelband{animation:none}}


/* ═══════════════ CALC DOCUMENT HEADER (Elle-graded mock, 2026-08-24) ═══════
   The calculator in the document idiom: ONE header owns identity + status +
   actions (Numbers/Pages — no Apple document app stacks four identity bands
   or floats a save dock); the program is the document's MODE, a segmented
   control visible in full. Ported from the graded _mock-calc-page — the
   mobile rules carry the same day's catches: full-width gutters, a segment
   that scrolls in ITS OWN container (LAW 46.1), a title that never clips. */
.dl-doc{display:flex;align-items:flex-start;gap:var(--sp-5);flex-wrap:wrap;
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--card-line);margin-bottom:var(--sp-4)}
.dl-doc-id{flex:1 1 380px;min-width:0}
.dl-titlein{display:block;width:100%;font-family:Satoshi,Inter,sans-serif;
  font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--tr-tight);
  color:var(--text-primary);background:none;border:1px solid transparent;
  border-radius:var(--r-md);padding:2px var(--sp-2);margin-left:calc(var(--sp-2) * -1);
  min-height:var(--h-md)}
.dl-titlein:hover{border-color:var(--card-line)}
.dl-titlein:focus{outline:none;border-color:var(--accent);background:var(--glass)}
.dl-titlein::placeholder{color:var(--text-muted)}
/* a native <select> wearing chip clothes: every JS hook keeps its element */
.dl-selchip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--h-sm);
  padding:0 var(--sp-2) 0 var(--sp-3);border:1px solid var(--card-line);border-radius:var(--r-md);
  background:var(--glass);color:var(--text-secondary);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);max-width:100%}
.dl-selchip:hover{background:var(--glass-hi)}
.dl-selchip-k{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.dl-selchip select{border:0;background:transparent;color:var(--text-primary);
  font:inherit;font-weight:var(--fw-semibold);min-height:calc(var(--h-sm) - 2px);
  /* 200 not 260: five chips + state must hold ONE row beside the actions
     (Elle 2026-08-25 — the ragged two-row pile is dead) */
  max-width:200px;min-width:0;text-overflow:ellipsis;cursor:pointer}
.dl-selchip select:focus{outline:none}
.dl-selchip .dl-iconbtn{width:26px;height:26px;min-height:26px}
.dl-state{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--h-sm);
  padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--success-bg);
  color:var(--success-ink);font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap}
/* the MODE row: segmented program control + its one-line description */
.dl-progrow{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.dl-seg{display:inline-flex;padding:2px;border:1px solid var(--card-line);
  border-radius:var(--r-md);background:var(--glass)}
.dl-seg button{border:0;background:transparent;font:inherit;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-secondary);min-height:38px;
  padding:0 var(--sp-4);border-radius:calc(var(--r-md) - 2px);cursor:pointer;
  transition:background-color .15s,color .15s}
.dl-seg button:hover{color:var(--text-primary)}
/* the options are tap targets: 38px is a mouse control; under a thumb the option
   takes the 44px floor (LAW 32.5; Flat / Tiered measured 38px on the Payout proof,
   2026-09-05). Declared here, after the base rule, so it cannot be outranked. */
@media (max-width:900px){.dl-seg button{min-height:var(--h-lg)}}
/* accent-ink, not accent: the raw accent fill puts 12px white ink below AA
   in the light gold/pearl skins (4.04/4.39:1) — the ink-grade accent holds */
.dl-seg button[aria-pressed="true"]{background:var(--accent-ink,var(--accent));color:var(--on-accent,#fff)}
.dl-progdesc{font-size:var(--fs-sm);color:var(--text-muted)}
@media (max-width:640px){
  .dl-titlein{font-size:var(--fs-base)}
  .dl-doc-id{flex:1 1 100%}
  .dl-progrow{display:block}
  .dl-seg{display:flex;width:100%;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .dl-seg::-webkit-scrollbar{display:none}
  .dl-seg button{flex:0 0 auto;white-space:nowrap;padding:0 var(--sp-5)}
  .dl-progdesc{margin-top:var(--sp-2)}
  .dl-selchip{max-width:100%}
  .dl-selchip select{max-width:none;flex:1}
}

/* ═══════════════ OPERATOR DASHBOARD (Elle-graded mock, 2026-08-25) ═════════
   The admin dashboard as the operator's spread: THE ASK queue in do-work
   form (verb-first, one grounding line, evidence chips, ONE verb — all verb
   pills ONE size), pipeline motion per brand with the value column as the
   ONE right anchor, the money week as short same-row sections. Promoted from
   _mock-admin-dashboard.html after the Apple punch-list pass. */
.dl-ask{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);
  background:var(--glass);border:1px solid var(--card-line);border-radius:var(--r-lg);
  margin-bottom:var(--sp-2)}
.dl-ask-t{min-width:0;flex:1 1 auto}
.dl-ask-verbline{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-base);
  font-weight:var(--fw-bold);color:var(--text-primary);letter-spacing:var(--tr-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-ask-ground{font-size:var(--fs-sm);color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-ask-chips{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.dl-evchip{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;
  padding:0 var(--sp-2);border:1px solid var(--card-line);border-radius:var(--r-pill);
  background:none;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--text-muted);cursor:pointer;white-space:nowrap}
.dl-evchip:hover{color:var(--text-primary);background:var(--glass-hi)}
.dl-evchip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Elle's rule: ALL verb pills in a card list are the SAME SIZE */
.dl-ask .dl-btn{flex:0 0 auto;min-width:128px;min-height:44px;justify-content:center}
.dl-ask-later{flex:0 0 auto;min-height:44px;padding:0 var(--sp-3);border:0;
  background:none;color:var(--text-muted);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);cursor:pointer;border-radius:var(--r-sm)}
.dl-ask-later:hover{background:var(--bg-hover);color:var(--text-primary)}
.dl-evchip:focus-visible,.dl-ask-later:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* pipeline motion rows */
.dl-piperow{display:flex;align-items:center;gap:var(--sp-4);min-height:56px;cursor:pointer;
  padding:var(--sp-2) var(--sp-4);border-bottom:1px solid color-mix(in oklab,var(--card-line),transparent 40%);
  width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;font:inherit;color:inherit}
/* Y3 (Elle 2026-09-12, "the far right column needs to be held and the status or alert on stalled needs to be
   aligned in column for each row"): the desktop row is a GRID whose flag and money columns exist on EVERY row —
   a row with no flag or no money leaves its cell empty instead of sliding its neighbours right. */
@media (min-width:641px){
  .dl-piperow{display:grid;grid-template-columns:40px 150px minmax(0,1fr) 76px 76px;
    grid-template-areas:'art brand lad flag pipe';column-gap:var(--sp-3);align-items:center}
  .has-booked > .dl-piperow{grid-template-columns:40px 150px minmax(0,1fr) 76px 76px 76px;grid-template-areas:'art brand lad flag booked pipe'}
  .dl-piperow .dl-brandart{grid-area:art}
  .dl-piperow .dl-pipe-brand{grid-area:brand;flex-basis:auto}
  .dl-piperow .dl-pipe-lad{grid-area:lad}
  .dl-piperow .dl-pipe-stage{flex:1 1 auto;min-width:0}   /* the stage word takes what the row leaves, never a fixed 150px that truncates 'Buyer review' to 'Buye…' */
  .dl-piperow .dl-pipe-flag{grid-area:flag;justify-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .dl-piperow .dl-win-booked{grid-area:booked;flex-basis:auto}
  .dl-piperow .dl-win-pipe{grid-area:pipe}
  .dl-piperow .dl-region-win{min-width:0}
}
.dl-piperow:last-child{border-bottom:0}
.dl-piperow:hover{background:var(--bg-hover)}
.dl-pipe-brand{flex:0 0 190px;min-width:0;font-family:Satoshi,Inter,sans-serif;
  font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--text-primary);
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-pipe-brand small{display:block;font-family:Inter,sans-serif;font-weight:var(--fw-medium);
  font-size:var(--fs-xs);color:var(--text-muted);text-transform:none;letter-spacing:0}
/* rungs RETIRED 2026-08-25 (LAW 36): rows use the portal's dl-region-rail */
.dl-pipe-lad{flex:1 1 auto;display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.dl-pipe-stage{flex:0 0 150px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-pipe-val{flex:0 0 92px;text-align:right;font-family:Satoshi,Inter,sans-serif;
  font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--teal-ink);
  font-variant-numeric:tabular-nums}
.dl-pipe-flag{flex:0 0 auto;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--danger-ink);
  background:var(--danger-bg,transparent);border-radius:var(--r-pill);padding:2px var(--sp-2)}
.dl-pipe-flag.dl-warn{color:color-mix(in oklab,var(--danger-ink),var(--text-secondary) 35%);
  background:color-mix(in oklab,var(--danger-bg,transparent),transparent 40%)}
/* the money week — short sections on the SAME row */
.dl-moneyrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.dl-moneyrow > .dl-card{grid-column:auto;padding:var(--sp-3) var(--sp-4)}
.dl-moneyrow b{display:block;font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-lg);
  font-weight:var(--fw-bold);color:var(--text-primary);font-variant-numeric:tabular-nums}
.dl-moneyrow span{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-muted)}
.dl-moneyrow small{display:block;font-size:var(--fs-xs);color:var(--text-secondary);margin-top:2px}
/* THE ANSWER (2026-09-10): a surface leads with its number, four tiles, never a
   run-on fact line. One grammar with the item sheet's answer (LAW 36); the item
   sheet's ic-answer-tiles is the same shape and converges onto this next. */
.dl-moneyrow.dl-answer{grid-template-columns:repeat(4,1fr)}
/* a stat tile is a TILE, never a button (Elle, P0 2026-09-15, item 64): the card's pill radius on a short wide
   box read as a row of buttons. Tiles take the card radius (LAW 19: 16px on cards) and a resting cursor. */
.dl-moneyrow > .dl-card{border-radius:var(--r-lg);cursor:default}
.dl-moneyrow.dl-answer > .dl-card{display:flex;flex-direction:column;gap:2px}
/* the brand face shows three tiles (the document-total tile hides until M1) */
.dl-moneyrow.dl-answer[data-face="brand"]{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.dl-moneyrow.dl-answer[data-face="brand"]{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.dl-moneyrow.dl-answer[data-face="brand"]{grid-template-columns:repeat(2,1fr)}.dl-moneyrow.dl-answer[data-face="brand"] > .dl-card:last-child:nth-child(odd){grid-column:1 / -1}}
.dl-moneyrow.dl-answer > .dl-card.is-key{border-color:color-mix(in oklab,var(--accent),transparent 55%)}
.dl-moneyrow.dl-answer > .dl-card.is-key > b{color:var(--accent-ink,var(--accent))}
@media (max-width:900px){.dl-moneyrow.dl-answer{grid-template-columns:repeat(2,1fr)}}
.dl-derivation{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-muted);margin-top:var(--sp-2)}
@media (max-width:640px){
  .dl-moneyrow{grid-template-columns:repeat(2,1fr)}
  .dl-moneyrow > .dl-card:last-child:nth-child(odd){grid-column:1 / -1}
  .dl-pipe-brand{flex-basis:120px}
  .dl-pipe-stage{display:none}
  /* 2026-08-28 autopsy: flex-wrap collapsed desktop columns into three
     ragged lines per row. The phone row is a GRID with intent:
       [logo] [brand + champions]        [money]
              [stage rail · word]
     Empty money cells are omitted upstream (grounded-or-null). */
  .dl-piperow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-areas:'art brand money' 'art lad flag';
    align-items:center;column-gap:var(--sp-3);row-gap:var(--sp-1)}
  .dl-piperow .dl-brandart{grid-area:art}
  .dl-piperow .dl-pipe-brand{grid-area:brand;min-width:0}
  .dl-piperow .dl-pipe-lad{grid-area:lad;min-width:0}
  .dl-piperow .dl-region-win{grid-area:money;text-align:right}
  .dl-piperow .dl-pipe-flag{grid-area:flag;justify-self:end;white-space:nowrap}
  .dl-piperow .dl-win-booked:has(+ .dl-win-pipe){display:none} /* one number on a phone: pipeline wins */
  .dl-pipe-flag{order:5;flex:1 0 100%;background:none;padding-left:0;margin-top:-2px}
  .dl-ask-verbline{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .dl-ask{flex-wrap:wrap}
  .dl-ask .dl-btn{flex:1 1 auto}
}

/* ═══════════ THE ACTION CARD, IN THE BOOK (2026-08-26) ═══════════════════
   Pearl Actions is the platform's heaviest legacy debt: 440 distinct .pact-*
   classes over 6,841 lines, all scoped under body.pearl-actions-ritz-v2 so
   nothing can share them. The dashboard's dl-ask row already proved the
   do-work card in book vocabulary; these families grow it to carry what the
   QUEUE card carries, so one card paints on the dashboard, in the queue and
   inside a case file. Tokens only, no scope prefix, no bespoke values. */

/* the card itself — a stacked variant of dl-ask (the row variant stays) */
.dl-actcard{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--sp-3);align-items:start;
  padding:var(--sp-4) var(--sp-5);background:var(--surface);
  border:1px solid var(--card-line);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.95);
  margin-bottom:var(--sp-3);transition:border-color var(--t-fast,.15s)}
/* --glass was the original ground here; it is a CHIP token, and inside the
   shell's framed canvas it resolves to 6% — the whole queue rendered as a
   ghost (2026-08-27 first-light). Floor-level cards ground on --surface,
   the same recipe as .dl-card. */
.dl-actcard:hover{border-color:color-mix(in oklab,var(--accent),transparent 60%)}
/* no severity rail: the chip says it, the sort order says it, and a coloured
   stripe down every card is the generic dashboard tell. Critical earns a
   slightly firmer edge — the same material, not a new ornament. */
.dl-actcard[data-tone="critical"]{border-color:color-mix(in oklab,var(--danger),transparent 55%)}

/* eyebrow row: brand · type · age, plus a right-anchored state */
.dl-acthead{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.dl-actbrand{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-xs);
  font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-primary)}
.dl-acttype{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-ink,var(--text-muted));font-weight:var(--fw-semibold)}
.dl-actage{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* the one verb line + its grounding, reusing the ask type scale */
.dl-actverb{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-md);
  font-weight:var(--fw-bold);color:var(--text-primary);letter-spacing:var(--tr-tight)}
.dl-actground{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-body)}

/* WHAT PEARL PREPARED — the finished work the card carries */
.dl-actwork{border:1px solid var(--card-line);border-radius:var(--r-md);
  background:color-mix(in oklab,var(--canvas),transparent 35%);
  padding:var(--sp-3) var(--sp-4)}
.dl-actwork-k{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-ink,var(--text-muted));margin-bottom:var(--sp-1)}
.dl-actwork-b{font-size:var(--fs-sm);color:var(--text-primary);line-height:var(--lh-body);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* evidence + verbs share the ask families; the row keeps one anchor */
.dl-actfoot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.dl-actfoot .dl-btn{min-width:128px;min-height:44px;justify-content:center}
.dl-actfoot .dl-ask-later{margin-inline-start:auto}
/* ── MOBILE COMPOSITION (Elle 2026-08-27: "wasted space, unaligned random
   $$, big unhelpful buttons"). The phone card is a COLUMN with intent:
   row 1 brand + badge (money leaves the head — it already lives in the
   why-line, stating it twice on a 375px card is noise); the PRIMARY verb
   alone goes full-width (it is THE action); secondary buttons stay their
   natural size side by side; evidence chips + age left, quick icons
   right, one tidy row. */
@media (max-width:640px){
  .dl-acthead > .dl-actage:has(.dl-actval){display:none}
  .dl-actfoot .dl-btn-primary,
  .dl-actfoot .pact-btn-primary{flex:1 1 100%}
  .dl-actfoot .dl-btn{min-width:0}
  .dl-actfoot .dl-actage{margin-inline-start:0}
  .dl-actfoot .pact-quick-cluster{margin-inline-start:auto}
  .dl-actfoot .dl-ask-later{margin-inline-start:0;width:100%}
}

/* the ranked card's extras (2026-08-26 v2): one reason chip, the score
   Pearl already computed, the value at stake, and a grouped-stack count */
.dl-actsig{display:inline-flex;align-items:center;gap:var(--sp-1);height:22px;
  padding:0 var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;
  background:color-mix(in oklab,var(--accent),transparent 88%);
  color:var(--accent-ink,var(--accent))}
.dl-actsig[data-sig="urgent"]{background:color-mix(in oklab,var(--danger),transparent 88%);color:var(--danger-ink,var(--danger))}
.dl-actsig[data-sig="expiring"]{background:color-mix(in oklab,var(--warning-ink,var(--accent)),transparent 88%);color:var(--warning-ink,var(--accent))}
.dl-actsig[data-sig="repeat"]{background:var(--bg-hover);color:var(--text-muted)}
.dl-actsig[data-sig="quiet"]{background:var(--bg-hover);color:var(--text-secondary)}
.dl-actval{font-family:Satoshi,Inter,sans-serif;font-weight:var(--fw-bold);
  font-size:var(--fs-lg);color:var(--text-primary);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tr-tight);line-height:1}
.dl-actval + .dl-actscope{font-size:var(--fs-xs);color:var(--text-muted);
  letter-spacing:.04em;text-transform:lowercase}
.dl-actwhy{display:flex;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-xs);
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.dl-actwhy b{font-weight:var(--fw-semibold);color:var(--text-secondary)}
.dl-actstack{font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--text-secondary);background:var(--bg-hover);border-radius:var(--r-pill);
  padding:2px var(--sp-2)}

/* ═══════════════ BOARD BAR + SHEET SUPPORT (2026-08-25) ═══════════════════
   Elle's brands-board refinement: champion + sort tab groups on one bar,
   quiet empty line, disc art thumbnails, sheet action row, and long-form
   prose in modals — so NO page needs a single inline style attribute. */
.dl-boardbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;margin-bottom:var(--sp-2)}
.dl-boardcard{padding:var(--sp-2) 0}
.dl-boardempty{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-art-blank{background:var(--bg-hover)}
.dl-disc summary .dl-progcard-art{flex-basis:44px;width:44px;height:44px;border-radius:var(--r-md)}
.dl-sheetacts{margin-top:var(--sp-4)}
/* a destructive verb sits apart from the two safe ones so it is never the next
   thing under a moving thumb (Elle 2026-09-10, add/edit/delete on everything) */
.dl-sheetacts-end{margin-left:auto}
@media (max-width:640px){.dl-sheetacts-end{margin-left:0;width:100%}}
.dl-prose{white-space:pre-wrap;font-size:var(--fs-sm);line-height:var(--lh-body)}
/* section rhythm without inline margins: a microhead following content
   breathes on its own (D15 spirit) */
.dl-microhead:not(:first-child){margin-top:var(--sp-5)}
/* sheet drill-in head (brand sheet → program detail, 2026-08-25) */
.dl-sheethead{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-3) 0 var(--sp-3)}
.dl-sheethead .dl-progcard-art{flex-basis:56px;width:56px;height:56px}
/* ── brand art + the booked/pipeline distinction + TRUE GLASS board ─────────
   (Elle 2026-08-25: 'i need brand logos... why still opaque not liquid
   glass?... total POs/sales or opportunity, obviously distinct') */
.dl-brandart{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-md);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--glass);
  border:1px solid var(--card-line)}
.dl-brandart img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
/* THE BRAND LOGO, ONE COMPONENT (Elle 2026-09-05, the roster: "the logos are off ...
   none are cut off anywhere and they are positioned largely and cleanly"). A logo
   is CONTAINED, never cropped, inside a padded tile on a quiet ground; three
   sizes cover every surface (a row, a card, a hero). Anything that crops a logo
   (object-fit:cover in a square) is a defect, not a style. */
.dl-brandart{padding:var(--sp-1);box-sizing:border-box;background:var(--trademark-plate,#FDFCFA);border:1px solid var(--card-line)}
/* the mark merges with the plate: a JPEG that arrives with its own white rectangle
   loses it (multiply on a white ground is a no-op for the ink, transparent for the
   white). The plate is pinned light on every skin, so the blend is always safe. */
.dl-brandart img{mix-blend-mode:multiply}
/* THE PLATE IS THE TILE (Elle 2026-09-05, "like the container is the logo"): on a
   roster the card itself is the plate, one rounded square, the mark centred at 70%,
   no frame inside a frame. */
.dl-brandplate{display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:100%;padding:15%;box-sizing:border-box;
  background:var(--trademark-plate,#FDFCFA);border:1px solid var(--card-line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  transition:transform var(--t-fast),box-shadow var(--t-fast)}
.dl-brandplate img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;mix-blend-mode:multiply}
/* an item card's photo arrives late on a phone: a soft ground until it lands, never a white void (Elle's recording 2026-09-18, 385 s) */
.ic-card-art .dl-brandplate:has(img){background:color-mix(in oklab,var(--accent),transparent 93%)}
.ic-card-art .dl-brandplate img[src]:not([data-loaded]){opacity:0;transition:opacity .25s ease}
.ic-card-art .dl-brandplate img[data-loaded]{opacity:1}
.dl-brandplate:hover{transform:translateY(-2px);box-shadow:var(--el-2)}
.dl-brandplate:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-brandplate .dl-brandart-word{font-size:var(--fs-md)}

/* THE PAYOUT PEOPLE ROW (2026-09-06, js/payout-people.js): who + share + remove,
   the same row on the brand Payout folder and the item sheet; the referral row
   adds the cut off the top and the agreement it comes from. */
/* THE PERSON CELL (Elle 2026-09-06, "cleaner and aesthetically stunning"): one
   soft cell per person; the head is who + share + remove on one line, the
   rubric's word is one quiet line beneath with its verb at the right, and the
   tuning (base, why) is one aligned row under that. */
.dl-pprow{display:grid;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--card-line);border-radius:var(--r-lg);background:var(--surface);margin-top:var(--sp-2)}
.dl-pprow-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,120px) var(--h-lg);gap:var(--sp-3);align-items:center}
.is-even > .dl-pprow-head{grid-template-columns:minmax(0,1fr) var(--h-lg)}
.dl-pprow .dl-field{margin-bottom:0}
.dl-pprow-who{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--h-lg);min-width:0;font-size:var(--fs-md);color:var(--text-primary)}
.dl-pprow-who .dl-champ{width:var(--sp-10);height:var(--sp-10);font-size:var(--fs-md);flex:0 0 auto}
.dl-pprow-who b{font-weight:var(--fw-semibold);min-width:0;overflow-wrap:anywhere}
.dl-addfaces{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.dl-addfaces .dl-label{margin:0}
.dl-pprow-x{width:var(--h-lg);height:var(--h-lg);padding:0;justify-self:end}
.dl-pprow-meta{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--text-secondary);padding-top:var(--sp-3);border-top:1px solid var(--card-line)}
.dl-pprow-meta > span:first-child{flex:1 1 auto;min-width:0}
.dl-pprow-tune{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--sp-3);align-items:end}
/* a referral partner's row (2026-09-14, one list): the Referral tag beside the name (under it when the row is
   narrow, so the name never breaks letter by letter), the agreement under the head */
.dl-pprow.is-partner .dl-pprow-who{flex-wrap:wrap;row-gap:var(--sp-1)}
.dl-pprow.is-partner .dl-pprow-who b{flex:1 1 auto;overflow-wrap:normal}
.dl-pprow-who .dl-tag{flex:0 0 auto}
.dl-pprow-terms{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);align-items:center;padding-top:var(--sp-2);border-top:1px solid var(--card-line)}
.dl-pprow-terms .dl-label{margin:0}
.dl-ppadd-partner{display:flex;flex-direction:column;gap:var(--sp-1);flex:1 1 220px;min-width:0}
.dl-ppadd-partner .dl-label{margin:0}
@media (max-width:640px){
  .dl-pprow-head{grid-template-columns:minmax(0,1fr) minmax(0,88px) var(--h-lg)}
  .dl-pprow-meta{flex-wrap:wrap}
  .dl-pprow-tune{grid-template-columns:minmax(0,1fr)}
}
/* A FOLDING FIELDSET (2026-09-06, the Payout folder): a fieldset whose title is
   the summary; closed until needed (bonuses, the deal preview). */
details.dl-fold > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-lg)}
details.dl-fold > summary::-webkit-details-marker{display:none}
details.dl-fold > summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:1px solid var(--text-secondary);border-bottom:1px solid var(--text-secondary);transform:rotate(-45deg);transition:transform var(--t-fast);flex:0 0 auto}
details.dl-fold[open] > summary::after{transform:rotate(45deg)}
details.dl-fold:not([open]) > summary{margin-bottom:0}
/* THE TEAM LIST on the brand's side (2026-09-06): a delta-list row per person
   with a star on the primary and the reach actions (Call, Email, Message) at
   the end of the row; on the phone the actions drop under the name. */
.dl-teamlist .dl-row{cursor:default;align-items:center;flex-wrap:wrap}
.dl-teamlist .dl-row:hover .dl-delta-what{color:var(--text-primary)}
.dl-teamlist .dl-champ{width:var(--sp-8);height:var(--sp-8);font-size:var(--fs-sm)}
.dl-teamlist .dl-actions{display:flex;gap:var(--sp-2);flex:1 1 100%;padding-left:calc(var(--sp-8) + var(--sp-3))}
.dl-teamlist .dl-actions .dl-btn{flex:1 1 0;min-height:var(--h-md)}
.dl-star{color:var(--accent-deep,var(--accent));font-size:.9em}
@media (max-width:640px){.dl-teamlist .dl-actions .dl-btn{min-height:var(--h-lg)}}
/* A FITTED FIELD ROW (2026-09-07, Elle: "this could look so much better" on a
   1,900px screen): fields size to their content and sit left, never stretch
   to the screen; the phone still stacks them. */
.dl-fieldrow-fit{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);justify-content:flex-start}
.dl-fieldrow-fit > .dl-field{flex:0 1 auto;min-width:160px;max-width:260px;margin:0}
.dl-fieldrow-fit > .dl-field > .dl-select,.dl-fieldrow-fit > .dl-field > .dl-input,.dl-fieldrow-fit > .dl-field > .dl-affix{width:100%}
.dl-fieldrow-fit .dl-affix > .dl-input{width:auto;flex:1 1 auto;min-width:0}
.dl-fieldrow-fit > .dl-field .dl-seg{display:inline-flex}
@media (max-width:640px){.dl-fieldrow-fit > .dl-field{flex:1 1 100%;max-width:none}}
/* A TIER LADDER (2026-09-07): one labelled grid, amount then rate then the
   remove, sized to its numbers; the last rung reads "and above". */
.dl-tiers{display:grid;grid-template-columns:minmax(0,220px) minmax(0,120px) var(--h-lg);gap:var(--sp-2) var(--sp-3);align-items:center;max-width:100%}
.dl-tiers .dl-label{margin:0}
.dl-tiers .dl-affix{width:100%}
.dl-tiers .dl-tiers-above{min-height:var(--h-md);display:flex;align-items:center;padding-left:var(--sp-3)}
@media (max-width:640px){.dl-tiers{grid-template-columns:minmax(0,1fr) minmax(0,96px) var(--h-lg)}.dl-tiers .dl-btn{min-height:var(--h-lg);height:var(--h-lg);width:var(--h-lg);padding:0}}
/* A REMOVABLE TAG (2026-09-06): a dl-tag that carries its own ×, for a value
   on a menu or a pick that can be taken off in place. */
.dl-tag .dl-tag-x{appearance:none;border:0;background:none;padding:0 0 0 var(--sp-1);margin:0;font:inherit;color:inherit;cursor:pointer;line-height:1;min-width:var(--sp-5);min-height:var(--sp-5);display:inline-flex;align-items:center;justify-content:center}
.dl-tag .dl-tag-x:hover{color:var(--text-primary)}
.dl-tag .dl-tag-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* THE PICKS (2026-09-06): a region's choices from the item's menu wear as
   small tags under the region name on the board; the drill's picks block is
   a stack of labelled chip rows; a priced chip shows its price beneath. */
.dl-region-picks{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1);max-width:100%}
.dl-region-picks .dl-tag{font-size:var(--fs-2xs);padding:0 var(--sp-2);min-height:var(--sp-5);max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
.dl-picks{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-4) 0}
.dl-picks .dl-field{margin:0}
.dl-picks .dl-filter{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;gap:2px}
.dl-picks .dl-filter small{font-size:var(--fs-2xs);color:var(--text-secondary)}
.dl-picks .dl-filter[aria-pressed="true"] small{color:inherit}
/* one line a chip, the price inline (sweep 2026-09-12: '$9' wrapped under the name and no two chips were the same height) */
#wrPicks .dl-filter{flex-direction:row;align-items:center;gap:var(--sp-1);white-space:nowrap;line-height:1.2}
#wrPicks .dl-filter small{font-size:var(--fs-xs);margin:0}
/* THE FACE PICKER (2026-09-06): the team as faces, tap to press; the pressed
   face wears a ring and its label beneath. Account (originators) and the war
   room drill (leads on a deal) share it. */
.dl-facepick{display:inline-flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-start;vertical-align:middle;max-width:100%}
.dl-facepick button{appearance:none;border:0;background:none;padding:var(--sp-1);margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);min-width:72px;min-height:var(--h-lg);font:inherit;color:var(--text-secondary);border-radius:var(--r-md)}
.dl-facepick .dl-champ{width:56px;height:56px;font-size:var(--fs-lg);box-shadow:0 0 0 2px var(--surface);transition:box-shadow var(--t-fast),transform var(--t-fast)}
.dl-facepick button:hover .dl-champ{transform:translateY(-1px)}
.dl-facepick button[aria-pressed="true"] .dl-champ{box-shadow:0 0 0 2px var(--surface),0 0 0 5px var(--accent)}
.dl-facepick button[aria-pressed="true"]{color:var(--text-primary)}
.dl-facepick small{font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1.1}
.dl-facepick em{font-style:normal;font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep,var(--accent));min-height:1em;line-height:1}
.dl-facepick button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-facepick-add .dl-champ-add{font-size:var(--fs-xl)}
@media (max-width:640px){.dl-facepick{gap:var(--sp-2)}.dl-facepick button{min-width:64px}.dl-facepick .dl-champ{width:48px;height:48px}}
/* the deal's driver on the war room drill (2026-09-06): one book field under the stage rail */
/* 2026-09-10: the label and its sentence ran together on one line and the faces sat in
   a wide empty band under them. Label, then the sentence on its own line, then the faces. */
.dl-driverline{display:grid;gap:var(--sp-1);margin:var(--sp-4) 0;max-width:calc(var(--sp-16) * 6)}
.dl-driverline > .dl-label{display:block}
.dl-driverline > .dl-help{display:block;margin-bottom:var(--sp-1);line-height:var(--lh-body)}
.dl-brandart-sm{flex-basis:28px;width:28px;height:28px;padding:2px;border-radius:var(--r-sm)}
.dl-brandart-md{flex-basis:56px;width:56px;height:56px;padding:var(--sp-2)}
.dl-brandart-lg{flex-basis:120px;width:120px;height:120px;padding:var(--sp-3);border-radius:var(--r-lg)}
.dl-brandart-xl{flex-basis:96px;width:96px;height:96px;padding:var(--sp-3);border-radius:var(--r-lg)}
.dl-brandart-word{font-family:var(--font-display);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:var(--tr-snug);
  /* ink for the PLATE, not the skin: the plate is pinned pearl on every skin, so a
     dark skin's light text-primary would vanish on it (the contrast gate caught
     'Volume' at 1:1 on six dark skins, 2026-09-05) */
  font-size:var(--fs-sm);line-height:1.15;text-align:center;color:var(--trademark-plate-ink,#4D4258);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.dl-brandart-mono{font-family:Satoshi,Inter,sans-serif;font-weight:var(--fw-bold);
  font-size:var(--fs-base);color:var(--trademark-plate-ink,#4D4258)}
/* booked = real money, pipeline = potential: two labeled columns, two tones */
.dl-win-booked{flex:0 0 84px}
.dl-win-booked b{color:var(--text-primary)}
.dl-win-pipe{flex:0 0 84px}
.dl-win-pipe b{color:var(--teal-ink)}
/* the board is FROST, not a slab — the mock's material on the card and rows */
.dl-boardcard{background:var(--glass);border:1px solid var(--card-line)}
.dl-boardcard .dl-piperow:hover{background:var(--glass-hi,var(--bg-hover))}
/* champion avatar stacks + intelligence chip tones (2026-08-25) */
.dl-champline{display:flex;align-items:center;gap:var(--sp-2);margin-top:2px;min-width:0}
/* THE CLUSTER IS THE CONTROL (Elle 2026-09-05, "make that selection super accessible
   and showcase it on the brand view"; Apple: Messages / FaceTime / Calendar put the
   people cluster in the header and tapping it opens the people sheet). As a button
   it keeps the line's look, takes the 44px floor, and an open position shows a
   soft + avatar so an unassigned brand is visibly unassigned. */
button.dl-champline{border:0;background:none;padding:var(--sp-1) 0;margin:0;cursor:pointer;font:inherit;color:inherit;text-align:left;min-height:var(--h-lg);border-radius:var(--r-sm)}
button.dl-champline:hover small{color:var(--text-primary)}
button.dl-champline:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-champline-lg .dl-champ{width:28px;height:28px;font-size:var(--fs-sm)}
.dl-champline-lg .dl-champstack .dl-champ + .dl-champ{margin-left:calc(-1 * var(--sp-2))}
.dl-champ-add{display:inline-grid;place-items:center;border:1px dashed color-mix(in oklab,var(--accent),transparent 40%);background:var(--bg-hover);color:var(--accent-ink,var(--accent));font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.dl-champline small{font-family:Inter,sans-serif;font-weight:var(--fw-medium);
  font-size:var(--fs-xs);color:var(--text-muted);text-transform:none;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-champstack{display:inline-flex;flex:0 0 auto}
.dl-champ{width:20px;height:20px;border-radius:50%;object-fit:cover;
  border:1px solid var(--card-line);background:var(--glass);display:inline-flex;
  align-items:center;justify-content:center}
.dl-champstack .dl-champ + .dl-champ{margin-left:calc(-1 * var(--sp-2))}
.dl-champ-mono{font-family:Satoshi,Inter,sans-serif;font-weight:var(--fw-bold);
  font-size:var(--fs-xs);color:var(--accent-ink,var(--accent))}
.dl-pipe-flag.dl-flag-info{color:var(--accent-ink,var(--accent));
  background:color-mix(in oklab,var(--accent),transparent 88%)}
/* the brand sheet's update feed (2026-08-25: 'this is where the region
   pipeline updates go') */
.dl-feed{border:1px solid var(--card-line);border-radius:var(--r-lg);
  background:var(--glass);padding:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-2)}
.dl-feedrow{display:flex;gap:var(--sp-3);padding:var(--sp-2) 0;
  border-bottom:1px solid color-mix(in oklab,var(--card-line),transparent 40%);
  font-size:var(--fs-sm)}
.dl-feedrow:last-child{border-bottom:0}
.dl-feedrow time{flex:0 0 56px;color:var(--text-muted);font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;padding-top:2px}
.dl-feedrow b{font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-feedtext{color:var(--text-secondary);margin-top:2px}
/* commitments carry a status pill in the time slot — give it room */
.dl-feed-wide .dl-feedrow time{flex-basis:96px;white-space:nowrap}
.dl-feed-wide .dl-feedrow time .dl-pipe-flag{white-space:nowrap}
/* the body column shrinks before it shoves the money column (a 12-digit PO number was pushing $ off the line by 3px; Y3) */
.dl-feedrow > div{min-width:0;flex:1 1 auto}
@media (max-width:640px){.dl-feed-wide .dl-feedrow time{flex-basis:52px}}   /* a phone has no room for a 96px date column */
/* a tag on a feed row sits at the row's top, never stretched into a grey slab; on a phone a long
   move ("no feedback on record · delivered 134d ago") wraps under the words instead of crushing
   them into a 60px column (Elle's iPhone, the samples list, 2026-09-13) */
.dl-feedrow > .dl-tag{flex:0 0 auto;align-self:flex-start;margin-left:auto}
@media (max-width:640px){
  .dl-feedrow{flex-wrap:wrap}
  .dl-feedrow > .dl-tag{flex:0 1 auto;white-space:normal;margin-left:calc(var(--sp-12) + var(--sp-1) + var(--sp-3));text-align:left}
}
/* a feedrow that navigates (the Matters rows): a REAL button, full-bleed in
   its feed, hover tint + pointer so the affordance is visible (LAW 20/32) */
.dl-feedrow.dl-rowlink{appearance:none;border:0 none;border-bottom:1px solid
  color-mix(in oklab,var(--card-line),transparent 40%);background:none;
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border-radius:var(--r-sm);min-height:44px;align-items:flex-start;
  transition:background var(--t-fast,0.15s)}
.dl-feedrow.dl-rowlink:last-child{border-bottom:0}
.dl-feedrow.dl-rowlink:hover{background:color-mix(in oklab,var(--accent),transparent 92%)}
.dl-feedrow.dl-rowlink:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* the war room's RECENT FILES strip: image thumbs open popups (popup law) */
.dl-filestrip{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.dl-filethumb{width:72px;height:72px;padding:0;border:1px solid var(--card-line);
  border-radius:var(--r-md);overflow:hidden;background:var(--glass);cursor:pointer;
  transition:border-color var(--t-fast,0.15s)}
.dl-filethumb:hover{border-color:color-mix(in oklab,var(--accent),transparent 55%)}
.dl-filethumb img{width:100%;height:100%;object-fit:cover;display:block}
.dl-fileimg{max-width:100%;border-radius:var(--r-md);display:block}
.dl-fileframe{width:100%;height:70vh;border:0;border-radius:var(--r-md);background:var(--glass)}
/* a failed disposition says so in place, and the card stays put (LAW 54) */
.dl-askmsg{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
  background:color-mix(in oklab,var(--danger),transparent 92%);
  color:var(--danger-ink,var(--danger));font-size:var(--fs-sm)}


/* ── HERO STATS (2026-08-27, "what would Apple do"): numbers set AS
   numbers — big numerals, whispered labels, no borders (Fitness/Stocks/
   Salesforce KPI typography, never text pills). */
.dl-herochips{display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-6);margin-top:var(--sp-4);align-items:flex-end}
.dl-stat{display:flex;flex-direction:column;gap:2px}
.dl-stat b{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-2xl);line-height:1;
  font-weight:var(--fw-bold);color:var(--text-primary);font-variant-numeric:tabular-nums}
.dl-stat i{font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.dl-statnext{flex-basis:100%;display:block;line-height:1.4;
  font-size:var(--fs-sm);color:var(--text-secondary)}   /* one sentence, wraps as prose (was a flex row that broke "Up next" / title / time into columns on the phone) */
.dl-statnext b{font-weight:var(--fw-semibold);color:var(--text-primary)}

/* THE LEADING IDENTITY TILE (Elle 2026-08-27 "what would Apple do":
   iOS Mail anchors every row with a leading avatar; the brand board
   anchors every row with the logo. The queue card shares that anatomy —
   40px logo tile, monogram initials when no logo exists, one dominant
   headline in the content column). */
.dl-actart{grid-row:1 / -1}
.dl-actart b{font-family:Satoshi,Inter,sans-serif;font-weight:var(--fw-bold);
  font-size:var(--fs-sm);color:var(--text-muted);letter-spacing:.04em}
.dl-actmain{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.dl-actwhy .dl-champ{width:16px;height:16px;vertical-align:calc(-1*var(--sp-1));margin-right:var(--sp-1)}


/* ── MOBILE TOPBAR (Elle 2026-08-27: "the search bar and alert buttons are
   breaking design laws"). On phones the search is a REAL field — glass
   pill, inset icon, 16px input (LAW 45/48) — and the icon buttons are
   uniform 44px. Desktop keeps its minimal bare treatment. */
@media (max-width:900px){
  /* the View-as tag on a phone is the verb alone: "Exit ✕" (P0 walk 2026-09-15) */
  .dl-topbar .dl-viewas-tag{flex:0 0 auto;height:44px;display:inline-flex;align-items:center}
  .dl-topbar .dl-viewas-tag .dl-long{display:none}
  .dl-topbar{gap:var(--sp-2);padding-inline:var(--sp-3);margin-bottom:var(--sp-2);
    /* LIQUID GLASS (Elle 2026-08-29: "double container behind search — it
       should only be the search bar that's Liquid Glass, buttons not within
       a grouped background container"): the BAND dies; each element floats
       as its own glass over the shell mesh. Blur is safe here — the topbar
       is host chrome over the host's own mesh, nothing cross-document. */
    background:transparent;border:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .dl-topbar .dl-search input{
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-edge);
    box-shadow:var(--glass-highlight), 0 8px 24px -18px color-mix(in oklab, var(--deep,#2D2438), transparent 55%)}
  .dl-topbar .dl-iconbtn{
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-edge);
    box-shadow:var(--glass-highlight)}
  /* ONE pill (Elle 2026-08-29, "double container behind search" — measured:
     this label painted its own white .5 pill AROUND the glass input). The
     LABEL is layout only; the INPUT is the one liquid-glass pill. */
  .dl-search{height:44px;background:none;border:0;box-shadow:none;padding:0}
  .dl-search:hover,.dl-search:focus-within{background:none;border:0;box-shadow:none}
  /* topbar-scoped: the sp-3 icon inset pairs with the topbar input's 35px
     padding below. Unscoped it moved EVERY page's search icon under the
     placeholder's first glyphs (2026-09-02 sweep, messages + po-sales). */
  .dl-topbar .dl-search svg{left:var(--sp-3)}
  /* 2026-08-28: mobile-responsive.css blankets input[type=search] with
     padding:12px !important — the icon sat ON the text no matter what
     this sheet said. Scoped counter-importance until that legacy blanket
     retires (filed): icon at 12, text at 40 → 12px visible gap. */
  .dl-topbar .dl-search input{padding:0 var(--sp-4) 0 calc(var(--sp-3) + var(--ic-sm) + var(--sp-2)) !important;font-size:16px}
  .dl-search .dl-kbd{display:none}
  /* 2026-08-28 measured: a legacy blanket forces padding:12px 20px onto
     buttons, leaving 4px of content box for a 17px glyph — it overflowed
     left-anchored and read RIGHT-JUSTIFIED (Elle, repeatedly, correctly).
     Zero it with counter-importance until the mobile-*.css blankets retire. */
  .dl-topbar .dl-iconbtn{width:44px;height:44px;flex:0 0 44px;padding:0 !important}
  /* the unread dot sits in the button CORNER, clear of the glyph — at 44px
     the old 7px/8px offsets landed ON the bell's head (Elle 2026-08-28) */
  .dl-topbar .dl-iconbtn .dl-dot{top:6px;right:6px;width:8px;height:8px;box-shadow:0 0 0 2px var(--surface)}
}

/* dashboard ask card: the brand leads its own quiet line (2026-08-27) */
.dl-ask-kick{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:.08em;color:var(--text-muted);margin-bottom:2px}


/* ── ASK ROWS ARE TAPPABLE, VERBS LIVE IN THE POPUP (Elle 2026-08-28:
   popups not redirections; no random huge buttons on the card face). */
.dl-ask-row{display:flex;flex-direction:row;align-items:center;gap:var(--sp-3);width:100%;
  text-align:left;border:0;background:var(--surface);cursor:pointer;
  font:inherit;color:inherit}
.dl-ask-row .dl-ask-t{flex:1 1 auto;min-width:0}
.dl-ask-go{flex:0 0 auto;font-size:var(--fs-xl);color:var(--text-muted);line-height:1}
.dl-ask-row:hover .dl-ask-go{color:var(--text-primary)}

/* ── THE MOBILE HERO, COMPOSED (Elle 2026-08-28: "the top heading — I
   hate it on mobile… come up with something out of the box"). The
   greeting drops a register; the stats become ONE swipeable numeral
   strip (scroll-snap, edge fade — iOS Fitness pattern) instead of a
   wrapped stack; Up next stands on its own line. */
.dl-statnextrow{margin-top:var(--sp-3)}
@media (max-width:640px){
  .dl-statusline #heroText{font-size:var(--fs-xl)}
  /* phone pass item 37 (Elle 2026-09-15): the numbers WRAP into rows; the swipe rail hid the fifth
     number behind a fade and the phone showed "4 NEED YO" cut at the edge */
  .dl-herochips{flex-wrap:wrap;gap:var(--sp-4) var(--sp-5);row-gap:var(--sp-3)}
  .dl-herochips .dl-stat{flex:0 0 auto}
}

/* ask-row trailing actions: compact, 44px targets, never huge pills */
.dl-ask-acts{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}
.dl-ask-acts .dl-iconbtn{width:36px;height:36px}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FILE TILE (dl-filetile) — the tile carries its own date and its own save (Elle 2026-09-10:
   "hover over file to show the full entire document name and date upload must be
   present on the thumbnail"). The card's title attribute holds name + date + size,
   so the whole name is readable on hover even though the label itself ellipses.

   The thumbnail engine does `container.innerHTML = ''` on .dl-card-media when it
   paints, so the date and the save control are SIBLINGS of the tile inside
   .dl-filetile-media — never children of it, or the first paint erases them. The wrapper
   is a one-cell grid so both overlays pin to the TILE's box exactly (absolute
   offsets against the wrapper let the button overhang the tile's corner).
   ═══════════════════════════════════════════════════════════════════════════ */
.dl-filetile .dl-filetile-media { position: relative; display: grid; margin-bottom: var(--sp-3); }
.dl-filetile .dl-filetile-media > * { grid-area: 1 / 1; min-width: 0; }
/* the tile's own bottom margin would sit INSIDE the grid area and push the scrim past the
   tile's edge (measured: date bottom 501 vs tile bottom 489) — the wrapper carries it instead */
.dl-filetile .dl-filetile-media > .dl-card-media { margin-bottom: 0; }
.dl-filetile .dl-filetile-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the date rides a bottom scrim across the tile, so it reads as chrome instead of
   a sticker dropped on top of a document */
/* .dl-card-media is position:relative, so it paints in the positioned layer and would cover a
   STATIC sibling no matter the DOM order — the overlays must be positioned too, and stacked. */
.dl-filetile .dl-filetile-date {
    position: relative; z-index: 1;
    align-self: end; justify-self: stretch;
    padding: 2px var(--sp-2); border-radius: var(--r-pill, 999px);
    font-size: var(--fs-xs, 11px); font-weight: 600; line-height: 1.4; letter-spacing: .01em;
    color: var(--text-primary);
    pointer-events: none;
}
/* LIGHT GLASS, NOT A GREY SCRIM (Elle 2026-09-23, "what's with the grey backgrounds of preview?"): the date was a dark
   gradient across the bottom half of every preview and the save / ⋯ were dark discs, so every light document read
   muddy grey. The date is a small frosted pill in the corner and the discs are frosted light glass with dark glyphs;
   the preview itself shows through clean. A real blur works here (the tile and its preview are one document). */
.dl-filetile .dl-filetile-date {
    justify-self: start; margin: var(--sp-2);
    background: color-mix(in oklab, var(--surface, #FDFCFA), transparent 18%);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-highlight), 0 1px 3px color-mix(in oklab, var(--deep, #2D2438), transparent 85%);
}
/* the tile's own controls, one row top-right: the save and the ⋯ (F1 2026-09-16: the ⋯ opens the one
   sheet: Open · Download · Rename · Move · Show/Hide from the brand · Delete). Both are ALWAYS painted, on
   every viewport (LAW 32: nothing hover-only), as quiet discs; the hit area is 44px, the painted disc 36px
   (the padding is part of the tap area but not of the paint, background-clip:content-box). */
.dl-filetile .dl-filetile-save, .dl-filetile .dl-filetile-more {
    position: relative; z-index: 2;
    align-self: start; justify-self: end; margin: var(--sp-1);
    width: 44px; height: 44px; padding: 4px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px; cursor: pointer;
    color: var(--text-primary);
    /* the 36px disc and its hairline ring drawn in the background, inside the 44px tap area: a ring keeps a light disc
       visible on a white page. (A filter:drop-shadow did the same and, with the blur, made WebKit paint a black square
       at the frame's corner; 2026-09-23.) */
    background: radial-gradient(circle closest-side, color-mix(in oklab, var(--surface, #FDFCFA), transparent 10%) 17px, color-mix(in oklab, var(--deep, #2D2438), transparent 80%) 18px, transparent 19px);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    opacity: 1; transition: opacity .14s ease, background .14s ease;
}
.dl-filetile .dl-filetile-save svg, .dl-filetile .dl-filetile-more svg { width: 17px; height: 17px; }
.dl-filetile .dl-filetile-save { margin-right: calc(var(--sp-1) + 48px); }
.dl-filetile:hover .dl-filetile-save, .dl-filetile:hover .dl-filetile-more,
.dl-filetile:focus-within .dl-filetile-save, .dl-filetile:focus-within .dl-filetile-more { opacity: 1; }
.dl-filetile .dl-filetile-save:hover, .dl-filetile .dl-filetile-more:hover { color: var(--accent-ink, var(--accent)); }
.dl-filetile .dl-filetile-save:focus-visible, .dl-filetile .dl-filetile-more:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: -4px; }
/* the select check, top-left: painted only in select mode; filled when the tile is picked */
.dl-filetile .dl-filetile-check {
    position: relative; z-index: 2; align-self: start; justify-self: start; margin: var(--sp-2);
    width: 24px; height: 24px; border-radius: 50%; display: none; place-items: center;
    border: 2px solid rgba(255, 255, 255, .92); background: rgba(20, 18, 28, .40); color: #fff;
    box-shadow: 0 1px 4px rgba(20, 18, 28, .25);
}
.dl-filetile .dl-filetile-check svg { width: 13px; height: 13px; opacity: 0; }
.dl-filegrid[data-select-mode="true"] .dl-filetile-check { display: grid; }
.dl-filetile.is-selected .dl-filetile-check, .dl-filetile[aria-pressed="true"] .dl-filetile-check { background: var(--accent); border-color: var(--accent); }
.dl-filetile.is-selected .dl-filetile-check svg, .dl-filetile[aria-pressed="true"] .dl-filetile-check svg { opacity: 1; }
.dl-filetile.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.dl-filegrid[data-select-mode="true"] .dl-filetile-save, .dl-filegrid[data-select-mode="true"] .dl-filetile-more { display: none; }
.dl-filetile .dl-filetile-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); flex-wrap: wrap; min-width: 0; }
.dl-filetile .dl-filetile-meta .dl-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dl-filetile[data-hidden="1"] .dl-card-media { opacity: .72; }
/* THE ONE GRID of tiles (the engine's container) */
.dl-filegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.dl-filegrid.dl-filegrid-compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
.dl-filegrid > .dl-filetile { grid-column: auto; }
@media (max-width: 640px) {
    .dl-filegrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
    .dl-filegrid.dl-filegrid-compact { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* THE SHELF — what a brand with no files sees first (F2.5, Elle 2026-09-17: "look at it from a user
   that's never been in Dialed"). The six folders as cards, each with the one line that says what goes
   in it, so the empty page teaches the system instead of saying nothing. */
.dl-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
/* the shelf is the WHOLE empty grid, not one cell of it (the engine's grid is its parent) */
.dl-filegrid > .dl-shelf { grid-column: 1 / -1; }
.dl-shelf-lead { grid-column: 1 / -1; margin: 0 0 var(--sp-2); color: var(--text-secondary); font-size: var(--fs-sm); }
/* the book's .dl-card spans four columns of the page grid; on the shelf each card is ONE cell, so the
   six sit three or four across instead of stacking full-width with two lines of text in an acre of air */
.dl-shelf > .dl-shelfcard { grid-column: auto; }
.dl-shelfcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); min-height: 88px; text-align: left;
    cursor: pointer; font: inherit; color: var(--text-primary); }
.dl-shelfcard b { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.dl-shelfcard .dl-help { font-size: var(--fs-sm); line-height: 1.45; }
.dl-shelfcard:hover { border-color: color-mix(in oklab, var(--accent), transparent 55%); }
.dl-shelfcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* an empty folder says what belongs in IT, never a bare "is empty" */
.dl-boardempty b { display: block; font-family: var(--font-display); font-size: var(--fs-base); color: var(--text-primary); margin-bottom: var(--sp-1); }
.dl-boardempty span { display: block; max-width: 46ch; margin: 0 auto; }
@media (max-width: 640px) { .dl-shelf { grid-template-columns: 1fr; gap: var(--sp-2); } .dl-shelfcard { min-height: 0; } }

/* THE FILES BAR: the count, then Sort / Select / Upload. On a phone the count takes its own line and the
   three verbs share the next one, so Upload is never an orphan (the 09-14 walk at 389). */
.dl-filesbar .dl-filesbar-acts { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
@media (max-width: 640px) {
    .dl-filesbar { flex-wrap: wrap; }
    .dl-filesbar .dl-line { display: none; }
    .dl-filesbar h2 { flex: 1 1 100%; }
    .dl-filesbar .dl-filesbar-acts { flex: 1 1 100%; min-width: 0; }
    .dl-filesbar .dl-filesbar-acts > .dl-btn-primary { margin-left: auto; }
}

/* THE UPLOAD SHEET (the one door, on the chassis) */
.dl-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 132px;
    padding: var(--sp-5); border: 2px dashed color-mix(in oklab, var(--accent), transparent 55%); border-radius: var(--r-lg);
    background: color-mix(in oklab, var(--accent), transparent 94%); color: var(--text-primary); cursor: pointer; text-align: center; transition: .15s; }
.dl-dropzone svg { width: 28px; height: 28px; fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dl-dropzone b { font-family: var(--font-display); font-size: var(--fs-base); }
.dl-dropzone:hover, .dl-dropzone.is-over, .dl-dropzone:focus-visible { border-color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 88%); outline: none; }
.dl-uplist { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); }
.dl-uprow { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--bg-hover); }
.dl-uprow-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.dl-uprow.is-ok { background: var(--success-bg); }
.dl-uprow.is-fail { background: var(--danger-bg); }
.dl-uprow .dl-iconbtn { width: 36px; height: 36px; flex: 0 0 36px; }
.dl-upload-dest svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* the Files folder's drop target: the whole zone takes a drop when the page says so */
.dl-files-zone.is-dropping { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: var(--r-lg); }

/* the sort control is a control, not a headline: it sits compact beside Select/Upload and never eats the section bar */
.dl-sectionbar #cvfSort { flex: 0 0 auto; width: auto; min-width: 148px; max-width: 200px; }
.dl-sectionbar label[for="cvfSort"] { flex: 0 0 auto; }
@media (max-width: 640px) { .dl-sectionbar #cvfSort { min-width: 132px; min-height: 44px; } } /* a 44 px target on a phone (LAW 32; it was the one control under 44 on the 09-14 walk) */

/* ═══════════════ DOCUMENT POPUP (DocPreview.show) ═══════════════ */
/* A filed document (a PO's original PDF) opens as a popup on the one modal
   chassis, never as a full-viewport frame that reads as a new page (Elle
   2026-09-12). The frame fills the sheet; the viewer's own toolbar is hidden
   where the browser allows, so no storage filename ever shows. */
.dl-docpop{display:flex;flex-direction:column;min-height:min(70vh,760px);margin:calc(var(--sp-4) * -1);margin-bottom:0}
.dl-docpop-frame{flex:1 1 auto;width:100%;min-height:min(70vh,760px);border:0;background:var(--bg-elevated);border-radius:var(--r-md)}
@media (max-width:640px){.dl-docpop,.dl-docpop-frame{min-height:72dvh}}

/* THE MESSAGE COMPOSE (message-compose.js, 2026-09-14): faces to choose who, one body, Send at the end
   of the scroll (LAW 42.4). Rows stack; the label sits above its faces on a phone. */
.dl-compose{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-compose-faces{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-compose-row{align-items:flex-start;gap:var(--sp-2) var(--sp-3)}
.dl-compose-row > .dl-label{flex:0 0 100%;margin:0}
.dl-compose-body{min-height:132px;font-size:var(--fs-base);caret-color:var(--accent)}
.dl-compose-acts{display:flex;justify-content:flex-end;gap:var(--sp-2)}
@media (max-width:640px){.dl-compose-body{font-size:16px}.dl-compose-acts .dl-btn{flex:1 1 auto}}
/* THE NEW EVENT SHEET (schedule-event.js): the compose's recipient chips + type-ahead host inside one
   field box; the faces above it are a tap-shortcut into the same chips. */
.dl-schedule-with{position:relative;min-height:var(--h-lg);padding:var(--sp-1) var(--sp-3);border:1px solid var(--border-primary);border-radius:var(--r-md);background:var(--surface);cursor:text;margin-top:var(--sp-2)}
/* the compose's --pc-* aliases live on .pc-compose-root; outside it the type-ahead painted with no ground
   (the proof's phone shot, 2026-09-14). The book's own tokens here. */
.dl-schedule-with .pc-recipient-dropdown{background:var(--pearl-white);border:1px solid var(--border-primary);border-radius:var(--r-md);box-shadow:0 12px 32px rgba(0,0,0,.14);z-index:60}
.dl-schedule-with .pc-recipient-item{color:var(--text-primary);font-family:inherit;border-radius:var(--r-sm)}
.dl-schedule-with .pc-recipient-item:hover,.dl-schedule-with .pc-recipient-item.active,.dl-schedule-with .pc-recipient-item[aria-selected="true"]{background:var(--bg-hover)}
.dl-schedule-with .pc-chip{background:var(--surface-2);color:var(--text-primary);border:1px solid var(--border-primary);border-radius:var(--r-pill);font-family:inherit}
.dl-schedule-with:focus-within{border-color:var(--accent)}
.dl-schedule-with .pc-row{border-bottom:0;padding:0;width:100%}
.dl-schedule-with .pc-row-input{font-size:var(--fs-base);color:var(--text-primary)}
.dl-schedule-teams{align-self:flex-start;color:var(--text-primary)}
@media (max-width:640px){.dl-schedule-with .pc-row-input{font-size:16px}}
/* V0.1 (2026-09-14, the brand face): the collapsed item row carries its two verbs, Open item and Edit,
   as buttons beside the title; the row body only opens and closes. On a phone they take their own line. */
.dl-itemdisc > summary .dl-disc-verbs{display:inline-flex;gap:var(--sp-2);align-items:center;flex:0 0 auto}
.dl-itemdisc > summary .dl-disc-verbs .dl-btn{min-height:44px}
@media (max-width:640px){
  .dl-itemdisc > summary .dl-disc-verbs{flex-basis:100%;order:9}
  .dl-itemdisc > summary .dl-disc-verbs .dl-btn{flex:1 1 auto;justify-content:center}
}
/* V0.2 (2026-09-14): the brand dashboard's Samples in motion band: one row per kit, the tracking number a
   real link that never opens the row */
.dl-kitlist .dl-kitrow{cursor:pointer}
.dl-kitlist .dl-kitrow .dl-help a{color:var(--accent-ink,var(--accent));text-decoration:underline;text-underline-offset:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ── WHAT EACH ITEM COULD BE (item 68 amendment, 2026-09-16) ─────────────────
   One row per item: name + program, the forecast (a number with its word), the
   stage today, the source line. A list of disclosed forecasts; never a tile,
   never a hero; the optional total is one quiet line. */
.dl-couldbe{margin-top:var(--sp-5)}
.dl-couldbe-row{display:grid;grid-template-columns:minmax(0,1.6fr) auto auto;grid-template-areas:"id num stage" "src src src";
  column-gap:var(--sp-4);row-gap:2px;align-items:center;padding:var(--sp-3) 0;border-top:1px solid var(--card-line)}
.dl-couldbe-row:last-of-type{border-bottom:1px solid var(--card-line)}
.dl-couldbe-id{grid-area:id;min-width:0;display:flex;flex-direction:column;gap:1px}
.dl-couldbe-id b{font-weight:var(--fw-semibold);color:var(--text-primary);overflow-wrap:anywhere}
.dl-couldbe-num{grid-area:num;display:flex;align-items:baseline;gap:var(--sp-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.dl-couldbe-num b{font-family:var(--font-display);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-couldbe-num small{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted)}
.dl-couldbe-stage{grid-area:stage}
.dl-couldbe-src{grid-area:src;font-size:var(--fs-xs);color:var(--text-muted)}
.dl-couldbe-total{margin:var(--sp-2) 0 0;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .dl-couldbe-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id num" "stage stage" "src src"}
  .dl-couldbe-stage{justify-self:start}
}

/* Key Contacts: the one line that says who accounting is (Elle 2026-09-16) */
.bp-acct{align-items:center;margin-bottom:var(--sp-3)}
.bp-acct > div{min-width:0;display:flex;flex-direction:column;gap:2px}
.bp-acct .dl-help{display:block}
@media (max-width:640px){.bp-acct{flex-wrap:wrap}.bp-acct > .dl-btn{margin-left:0 !important;flex:1 1 100%}}

/* ── THE FILE CARD'S TWO OTHER SHAPES (F2c, 2026-09-18): the file manager's List and Large views are the
   same card, laid flat or made bigger — one object a person meets everywhere, not four renderers. ── */
.dl-filelist { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.dl-filerow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); cursor: pointer; min-width: 0; }
.dl-filerow-media { position: relative; width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); flex: 0 0 auto; }
.dl-filerow-media > .dl-card-media { width: 44px; height: 44px; margin: 0; }
.dl-filerow-media .dl-filetile-check { position: absolute; left: 4px; top: 4px; }
.dl-filerow-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-filerow .dl-filetile-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-filerow .dl-filetile-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.dl-filerow-acts { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.dl-filerow .dl-filetile-save, .dl-filerow .dl-filetile-more { position: static; margin: 0; }
.dl-filerow.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 85%); }
/* Large: the tile with room — bigger picture, the name in two lines */
.dl-filegrid-lg { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.dl-filetile-lg .dl-card-media { height: 160px; }
.dl-filetile-lg .dl-filetile-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-md); }
/* on a phone Large is a row card (Elle's recording, t=23: five things on one line read "CSN") */
@media (max-width: 640px) {
  .dl-filegrid-lg { grid-template-columns: 1fr; }
  .dl-filetile-lg { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
  .dl-filetile-lg .dl-filetile-media { grid-row: 1 / span 2; margin: 0; }
  .dl-filetile-lg .dl-card-media { height: 84px; width: 84px; }
  .dl-filetile-lg .dl-filetile-name { padding-right: var(--sp-8); }
  .dl-filetile-lg .dl-filetile-save { display: none; }
  /* Icons on a phone: TWO across, the name in two lines (t=78: one cut line). Three across (83px tiles) put the file
     badge under the ⋯, cut every folder tag to "MADE Or…", and wrapped a name one word to a line (2026-09-23 audit) */
  .dl-filegrid:not(.dl-filegrid-lg):not(.dl-filelist) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .dl-filegrid:not(.dl-filegrid-lg) .dl-filetile .dl-filetile-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-xs); }
  .dl-filegrid:not(.dl-filegrid-lg) .dl-filetile .dl-filetile-save { display: none; }
}
/* hover reveals exist only where hover exists; on touch nothing sticks after a tap (t=20) */
@media (hover: none) { .fcg-card:hover { transform: none; box-shadow: none; } .fcg-card:not(.is-selected) .dl-filetile-check { opacity: 0; } }
/* the row is compact: a 14px name, an 11px meta line, a small chip, a 56px row */
.dl-filerow { min-height: 56px; }
.dl-filerow .dl-filetile-name { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1.3; }
.dl-filerow .dl-filetile-meta .dl-help { font-size: var(--fs-2xs); }
.dl-filerow .dl-tag { font-size: var(--fs-2xs); padding: 1px var(--sp-2); line-height: 1.4; }
.dl-filerow-acts .dl-filetile-save, .dl-filerow-acts .dl-filetile-more { width: 44px; height: 44px; border: 0; background: transparent; }
@media (max-width: 640px) { .dl-filerow-acts .dl-filetile-save { display: none; } .dl-filerow { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: var(--sp-2); padding: var(--sp-2); } }
/* the row's scope chip is a button, so it keeps a 44px hit area — painted as a small pill (content-box) */
.dl-filerow .dl-filetile-meta .dl-tag { min-height: 44px; padding: 8px var(--sp-2); margin: -8px 0; background-clip: content-box; border: 0; box-shadow: inset 0 0 0 1px var(--border); line-height: 1.4; }

/* T9 sign-in history (2026-09-18): the record line is a verb that opens the sheet */

/* ── SIGN-IN CONTROL + BRAND SEATS (Elle 2026-09-18: "the sign in for the admin users looks so plain;
   the brand user list is messy, can't be clicked open, can't be deleted"). One control on every face
   (Users cards, seat rows, the brand contact card): device glyph · count · last · where, opens the
   session sheet. Seats are grouped under their brand; a row is a button that opens the seat sheet. */
.dl-signin{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--h-lg);padding:var(--sp-2) var(--sp-3);margin:0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font:inherit;color:var(--text-primary);text-align:left;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.dl-signin:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(45,36,56,.08)}
.dl-signin:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-signin-ico{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--accent),transparent 88%);color:var(--accent-ink)}
.dl-signin-ico svg{width:18px;height:18px}
.dl-signin-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-signin-n{font-weight:var(--fw-semibold);font-size:var(--fs-base);line-height:1.25;color:var(--text-primary)}
.dl-signin-m{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-signin-chev{flex:0 0 auto;width:16px;height:16px;color:var(--text-muted)}
.dl-signin.is-none{cursor:default;background:transparent;border-style:dashed}
.dl-signin.is-none:hover{border-color:var(--border);box-shadow:none}
.dl-signin.is-none .dl-signin-ico{background:var(--bg-hover);color:var(--text-muted)}
.dl-signin.is-none .dl-signin-n{color:var(--text-secondary);font-weight:var(--fw-medium)}
.dl-signin.is-compact{width:auto;max-width:100%;min-height:var(--h-md);padding:var(--sp-1) var(--sp-2);border-color:transparent;background:transparent}
.dl-signin.is-compact .dl-signin-ico{width:24px;height:24px}
.dl-signin.is-compact .dl-signin-ico svg{width:14px;height:14px}
.dl-signin.is-compact .dl-signin-n{font-size:var(--fs-sm)}
.dl-signin.is-compact .dl-signin-m{font-size:var(--fs-xs)}

.dl-seats{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-seatgroup{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.dl-seatgroup-h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);background:var(--surface)}
.dl-seatgroup-brand{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:var(--h-md);padding:0;border:0;background:none;font:inherit;color:var(--text-primary);cursor:pointer;min-width:0}
.dl-seatgroup-brand:hover .dl-seatgroup-name{color:var(--accent-ink)}
.dl-seatgroup-logo{width:32px;height:32px;border-radius:var(--r-sm);object-fit:contain;background:var(--bg-card);border:1px solid var(--border);flex:0 0 auto}
.dl-seatgroup-mark{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;background:color-mix(in oklab,var(--accent),transparent 86%);color:var(--accent-ink);font-size:var(--fs-sm);font-weight:var(--fw-bold);flex:0 0 auto}
.dl-seatgroup-name{font-weight:var(--fw-semibold);letter-spacing:.02em;text-transform:uppercase;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-seatgroup-n{margin-left:auto;font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap}
.dl-seat{display:grid;grid-template-columns:var(--h-md) minmax(0,1fr) auto auto 16px;align-items:center;column-gap:var(--sp-3);width:100%;min-height:56px;padding:var(--sp-2) var(--sp-4);border:0;border-top:1px solid var(--border);background:none;font:inherit;color:var(--text-primary);text-align:left;cursor:pointer;transition:background-color .15s ease}
.dl-seat:first-of-type{border-top:0}
.dl-seat:hover{background:var(--bg-hover)}
.dl-seat:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dl-seat-body{min-width:0;display:flex;flex-direction:column;gap:1px}
.dl-seat-name{font-weight:var(--fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-seat-mail{font-size:var(--fs-sm);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-seat-last{font-size:var(--fs-sm);color:var(--text-secondary);white-space:nowrap;text-align:right}
.dl-seat-chev{width:16px;height:16px;color:var(--text-muted)}
.dl-seatgroup-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--h-lg);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-seatgroup-fold>summary::-webkit-details-marker{display:none}
.dl-seatgroup-fold>summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);transition:transform .15s ease}
.dl-seatgroup-fold[open]>summary::after{transform:rotate(-135deg)}
.dl-seatgroup-fold[open]>summary{border-bottom:1px solid var(--border)}
.dl-seat-sheet-id{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);align-items:center;margin:0 0 var(--sp-4)}
.dl-seat-sheet-id dt{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0}
.dl-seat-sheet-id dd{margin:0;min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){
  .dl-seat{grid-template-columns:var(--h-md) minmax(0,1fr) auto 16px}
  .dl-seat-last{display:none}
}
.tm-signin{padding:var(--sp-1) 0 var(--sp-2)}

/* ── THE REGION IN MOTION IS A PANEL OF TILES (Elle 2026-09-18: "the expanded region… everything blends in still").
   The open row caps a solid panel; the rail and the story are its head band; every part is a tile with a named head,
   two abreast on a desk, stacked on a phone; an empty part is a quiet dashed tile. Both faces, every host. ── */
.dl-dealhost{margin:0 0 var(--sp-4);padding:0;background:var(--card-bg,var(--bg-elevated));border:1px solid var(--card-line);border-left:3px solid var(--accent);border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg);box-shadow:0 22px 44px -30px rgba(28,28,30,.32);overflow:hidden}
.dl-dealrow[data-open="1"]{background:color-mix(in oklab,var(--accent),transparent 88%);scroll-margin-top:var(--sp-4)}
.dl-drillstory{padding:var(--sp-4) var(--sp-5) var(--sp-4);background:color-mix(in oklab,var(--accent),transparent 94%);border-bottom:1px solid var(--card-line)}
.dl-drillstory .dl-stagerail{margin-bottom:var(--sp-3)}
.dl-drillstory .dl-dealsum{margin:0}
.dl-drillstory .dl-dealmeta{margin-top:var(--sp-3)}
.dl-drillgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.dl-drillblock{min-width:0;padding:var(--sp-3) var(--sp-4) var(--sp-4);background:var(--bg-elevated,var(--card-bg));border:1px solid var(--card-line);border-radius:var(--r-md)}
.dl-drillblock.is-quiet{background:transparent;border-style:dashed}
.dl-drillblock.is-quiet .dl-microhead{color:var(--text-secondary)}
.dl-dealhost .dl-drillblock .dl-microhead{margin:0 0 var(--sp-3);padding:0 0 var(--sp-2);border-top:0;border-bottom:1px solid var(--card-line);display:flex;align-items:center;gap:var(--sp-2);color:var(--text-primary);text-transform:uppercase}
.dl-dealhost .dl-drillblock .dl-microhead::before{content:'';flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.dl-drillblock[data-block="program"] .dl-microhead::before,.dl-drillblock[data-block="pos"] .dl-microhead::before{background:var(--teal-ink,#4A9999)}
.dl-drillblock[data-block="samples"] .dl-microhead::before{background:var(--iris,#8A7ABB)}
.dl-drillblock[data-block="documents"] .dl-microhead::before,.dl-drillblock[data-block="afterwin"] .dl-microhead::before{background:var(--mocha,#8B7355)}
.dl-drillblock[data-block="history"] .dl-microhead::before,.dl-drillblock[data-block="buyers"] .dl-microhead::before{background:var(--text-secondary)}
.dl-drillblock .dl-microhead .dl-help{margin-left:auto}
.dl-dealhost .dl-drillblock .dl-picks{margin-top:0}
.dl-dealhost .dl-drillblock .dl-emptyline{margin:0;padding:0;border:0}
.dl-dealhost .dl-drillblock .dl-emptyline + .dl-emptyline{margin-top:var(--sp-2)}
.dl-dealhost .dl-drillblock .dl-podisc{margin:0;padding:0;border:0}
.dl-dealhost .dl-drillblock .dl-feed{margin:0}
.dl-dealhost .dl-drillblock .dl-deal-tiles{margin-bottom:0}
.dl-dealhost .dl-drillblock .dl-derivation{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px dashed var(--card-line)}
.dl-drillblock[data-block="matters"]{padding:0;border:0;background:transparent}
.dl-drillblock[data-block="matters"] > .dl-card{margin:0}
.dl-drillblock[data-block="pearl"]{background:color-mix(in oklab,var(--iris,#8A7ABB),transparent 92%);border-color:color-mix(in oklab,var(--iris,#8A7ABB),transparent 70%)}
.dl-dealhost .dl-sheetacts{margin:0;padding:var(--sp-3) var(--sp-4) var(--sp-4);border-top:1px solid var(--card-line);background:var(--bg-elevated,var(--card-bg))}
@media (min-width:900px){
  .dl-drillgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-3)}
  .dl-drillblock.is-wide{grid-column:1 / -1}
  .dl-drillstory{padding:var(--sp-5) var(--sp-6)}
  .dl-dealhost .dl-sheetacts{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
}
@media (max-width:640px){
  .dl-dealhost{border-radius:0 0 var(--r-md) var(--r-md);border-left-width:3px;box-shadow:0 16px 32px -26px rgba(28,28,30,.35)}
  .dl-drillstory{padding:var(--sp-4) var(--sp-4)}
  .dl-drillgrid{padding:var(--sp-3) var(--sp-3) var(--sp-2);gap:var(--sp-3)}
  .dl-dealhost .dl-sheetacts{padding:var(--sp-3) var(--sp-3) var(--sp-4)}
}
.dl-dealhost .dl-drillblock .dl-picks{margin:0}
.dl-drillblock > :last-child{margin-bottom:0}
.dl-drillblock .dl-emptyline > b{display:none}   /* the tile's head already names it */
@media (max-width:640px){
  .dl-drillblock[data-block="picks"] .dl-microhead .dl-help{display:none}   /* the chips say what is pitched; the sentence would wrap the head */
}

/* ── K2d (Elle 2026-09-18): the panel and its tiles are LIQUID GLASS, not white; the rail and chips wear the skin's
   accent; flavors show their pictures; leads fold behind a button; samples and documents get real rows ── */
.dl-dealhost{background:var(--surface);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);border-color:color-mix(in oklab,var(--accent),transparent 80%)}
.dl-drillstory{background:color-mix(in oklab,var(--accent),transparent 91%)}
.dl-drillblock{background:var(--glass);border-color:color-mix(in oklab,var(--deep),transparent 90%)}
.dl-drillblock.is-quiet{background:transparent}
.dl-drillblock[data-block="pearl"]{background:color-mix(in oklab,var(--accent),transparent 90%);border-color:color-mix(in oklab,var(--accent),transparent 70%)}
.dl-dealhost .dl-sheetacts{background:transparent}
.dl-dealhost .dl-drillblock .dl-microhead::before{background:var(--accent)}
.dl-drillblock[data-block] .dl-microhead::before{background:var(--accent)}
.dl-drillblock[data-block="history"] .dl-microhead::before,.dl-drillblock[data-block="buyers"] .dl-microhead::before,.dl-drillblock[data-block="documents"] .dl-microhead::before{background:color-mix(in oklab,var(--accent),var(--text-secondary) 55%)}
/* a flavor chip wears its picture */
.dl-filter-art{width:28px;height:28px;border-radius:var(--r-sm);object-fit:cover;flex:0 0 28px;margin-left:calc(var(--sp-1) * -1)}
.dl-drillblock .dl-picks .dl-filter{height:auto;min-height:var(--h-lg);padding:var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2)}
/* the leads fold: one button, the faces behind it */
.dl-leadpick{margin-top:var(--sp-3)}
.dl-leadpick > summary{list-style:none;display:inline-flex;cursor:pointer}
.dl-leadpick > summary::-webkit-details-marker{display:none}
.dl-leadpick > summary::after{content:'';width:7px;height:7px;margin-left:var(--sp-2);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-base) var(--ease)}
.dl-leadpick[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.dl-leadpick > .dl-driverline{margin-top:var(--sp-3)}
/* rows inside a tile: the tile is the box, the feed is not a second one */
.dl-dealhost .dl-drillblock .dl-feed{border:0;background:transparent;padding:0;border-radius:0}
.dl-dealhost .dl-drillblock .dl-feedrow{padding:var(--sp-3) 0;gap:var(--sp-3);align-items:center}
.dl-dealhost .dl-drillblock .dl-feedrow:first-child{padding-top:0}
.dl-dealhost .dl-drillblock .dl-feedrow:last-child{padding-bottom:0}
.dl-dealhost .dl-drillblock .dl-feed-wide .dl-feedrow time{flex-basis:auto;min-width:56px;font-weight:var(--fw-semibold);color:var(--text-secondary)}
.dl-rowart{flex:0 0 44px;width:44px;height:44px;border-radius:var(--r-md);overflow:hidden;background:var(--glass-hi);border:1px solid var(--card-line)}
.dl-rowart img{width:100%;height:100%;object-fit:cover}
.dl-dealhost .dl-drillblock .dl-samplerow > div > b{font-size:var(--fs-base)}
.dl-dealhost .dl-drillblock .dl-samplerow > .dl-tag{align-self:center}
.dl-dealhost .dl-drillblock .dl-emptyline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);color:var(--text-secondary)}
.dl-dealhost .dl-drillblock .dl-emptyline .dl-chips{margin:0}
.dl-dealhost .dl-drillblock .dl-deal-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (max-width:640px){
  .dl-dealhost .dl-drillblock .dl-samplerow{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"art body" "art time" "tag tag";column-gap:var(--sp-3);row-gap:var(--sp-1)}
  .dl-dealhost .dl-drillblock .dl-samplerow > .dl-rowart{grid-area:art}
  .dl-dealhost .dl-drillblock .dl-progrow{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"art body" "art time";column-gap:var(--sp-3);row-gap:var(--sp-1)}
  .dl-dealhost .dl-drillblock .dl-progrow > .dl-rowart{grid-area:art}
  .dl-dealhost .dl-drillblock .dl-progrow > .dl-region-progline{grid-area:body}
  .dl-dealhost .dl-drillblock .dl-progrow > time{grid-area:time;min-width:0;font-weight:var(--fw-normal);color:var(--text-muted)}
  .dl-dealhost .dl-drillblock .dl-samplerow > div{grid-area:body}
  .dl-dealhost .dl-drillblock .dl-samplerow > time{grid-area:time;min-width:0;font-weight:var(--fw-normal);color:var(--text-muted)}
  .dl-dealhost .dl-drillblock .dl-samplerow > .dl-tag{grid-area:tag;margin-left:0;justify-self:start}
}
.dl-dealhost .dl-drillblock .dl-progrow{align-items:center}
.dl-dealhost .dl-drillblock .dl-progrow .dl-region-progline{flex:1 1 auto;min-width:0}

/* After the win on a phone: the three stage words stay (the bare rail read as a skeleton that never filled, Elle's recording 2026-09-19) */
@media (max-width:640px){
  .dl-drillblock[data-block="afterwin"] .dl-stagerail{flex-direction:column;gap:var(--sp-2)}
  .dl-drillblock[data-block="afterwin"] .dl-stagerail > span{flex-direction:row;align-items:center;gap:var(--sp-3);flex:0 0 auto}
  .dl-drillblock[data-block="afterwin"] .dl-stagerail > span > i{flex:0 0 44px;width:44px}
  .dl-drillblock[data-block="afterwin"] .dl-stagerail em{display:block;margin:0;font-size:var(--fs-xs);letter-spacing:.02em;text-transform:none;white-space:normal;overflow:visible;text-overflow:clip}
}

/* a select wears the book's field, not the platform's box (Elle 2026-09-19: "the select and field css is off brand") */
select.dl-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right var(--sp-3) center;padding-right:calc(var(--sp-3) * 2 + 12px);font:inherit;color:var(--text-primary)}
select.dl-select:focus{border-color:var(--accent)}

/* a card's words do not select under a finger (Elle's recording 2026-09-19: Copy / Look Up popped on every long press); typed fields and prose still do */
@media (hover:none){
  .dl-card,.dl-row,.dl-feedrow,.dl-run-weekrow,.dl-drillblock,.dl-pl-row,.dl-region-row,.dl-kittile,.dl-run-fact,.dl-stagerail,.dl-sectionbar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .dl-card input,.dl-card textarea,.dl-card [contenteditable],.dl-recfield-read,.dl-prose,.ic-prose,.dl-docpop,.dl-preview{-webkit-user-select:text;user-select:text}
}

/* a card's rare verbs fold behind one quiet ⋯ on the verb row; the menu opens beside it */
.dl-morefold{position:relative;display:inline-flex}
.dl-morefold > summary{list-style:none;cursor:pointer;min-width:44px;justify-content:center;font-size:var(--fs-lg);line-height:1}
.dl-morefold > summary::-webkit-details-marker{display:none}
.dl-morefold > .dl-morefold-menu{position:absolute;right:0;bottom:calc(100% + var(--sp-1));z-index:20;display:flex;flex-direction:column;gap:var(--sp-1);min-width:160px;padding:var(--sp-2);background:var(--bg-card-solid,var(--surface));border:1px solid var(--card-line);border-radius:var(--r-md);box-shadow:var(--el-2)}
.dl-morefold > .dl-morefold-menu .dl-btn{justify-content:flex-start;width:100%}

/* the seat's photo and its onboarding answers on the contact card */
.dl-told-face{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover}
.dl-told{margin-top:var(--sp-3);border-top:1px dashed var(--card-line)}
.dl-told > summary{padding:var(--sp-2) 0;min-height:44px}
.dl-told > summary .dl-disc-t{font-size:var(--fs-sm)}
.dl-told-q{padding:var(--sp-2) 0;border-top:1px solid color-mix(in oklab,var(--card-line),transparent 40%)}
.dl-told-q:first-child{border-top:0}
.dl-told-q > p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--text-primary)}

/* the drill's sample rows open the sample chassis: a chevron says so; the buyer's words read under the row */
.dl-dealhost .dl-drillblock .dl-samplerow[role="button"]{cursor:pointer}
.dl-dealhost .dl-drillblock .dl-samplerow > .dl-region-chev{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(-45deg);margin-left:var(--sp-1)}
.dl-samplefb{margin-top:var(--sp-1);color:var(--text-primary)}
.dl-samplefb > b{color:var(--accent-deep,var(--accent));font-weight:var(--fw-semibold);margin-right:var(--sp-1)}
/* Pitched here on a phone: plates in a strip, the name under each, one line each (Elle 2026-09-19: "look at MADE on mobile, messy") */
@media (max-width:640px){
  .dl-drillblock .dl-picks .dl-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:var(--sp-3);padding:var(--sp-1) 0 var(--sp-2);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .dl-drillblock .dl-picks .dl-chips::-webkit-scrollbar{display:none}
  /* #wrPicks .dl-filter (an id rule) lays the chip out as a row; the phone plate outranks it by naming the id too */
  .dl-drillblock #wrPicks.dl-picks .dl-filter{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--sp-1);height:auto;min-height:0;padding:var(--sp-2);width:96px;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:var(--fs-xs);line-height:1.2}
  .dl-drillblock #wrPicks.dl-picks .dl-filter .dl-filter-art{width:56px;height:56px;flex:0 0 56px;margin:0;border-radius:var(--r-md)}
  .dl-drillblock #wrPicks.dl-picks .dl-filter small{display:block;font-size:var(--fs-2xs)}
  .dl-drillblock #wrPicks.dl-picks .dl-filter[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
}

/* ── K2j (Elle 2026-09-19): REGION BADGES — one two-letter plate per region, its own hue on every surface
   (js/region-badge.js). The hue is the region's signal, tinted over the skin's surface so every theme keeps its
   ground; the ink is the hue deepened toward the text so it reads on cream and on dark. ── */
.dl-rg{--rg:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:28px;height:20px;padding:0 var(--sp-1);
  border-radius:var(--r-sm);font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;line-height:1;
  color:color-mix(in oklab,var(--rg),var(--text-primary) 55%);background:color-mix(in oklab,var(--rg),var(--surface) 84%);
  border:1px solid color-mix(in oklab,var(--rg),transparent 60%);vertical-align:middle;white-space:nowrap}
.dl-rg-md{min-width:36px;height:24px;font-size:var(--fs-xs)}
.dl-rg-pair{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0}
.dl-rg-word{min-width:0;overflow-wrap:anywhere}
:root[data-tone="dark"] .dl-rg{color:color-mix(in oklab,var(--rg),var(--text-primary) 55%);background:color-mix(in oklab,var(--rg),var(--surface) 78%)}
.dl-rg[data-rg="nw"]{--rg:#3F8F7A}   /* evergreen */
.dl-rg[data-rg="ba"]{--rg:#C0703A}   /* golden gate */
.dl-rg[data-rg="la"]{--rg:#D98E3B}   /* sun */
.dl-rg[data-rg="sd"]{--rg:#3C8FB8}   /* pacific */
.dl-rg[data-rg="tx"]{--rg:#B5533E}   /* clay */
.dl-rg[data-rg="mw"]{--rg:#7E8B3F}   /* prairie */
.dl-rg[data-rg="ne"]{--rg:#4A64B8}   /* atlantic */
.dl-rg[data-rg="se"]{--rg:#B84A78}   /* magnolia */
.dl-rg[data-rg="bc"]{--rg:#6B6F8A}   /* slate */
.dl-rg[data-rg="us"]{--rg:#8A7ABB}   /* iris */
.dl-rg[data-rg="com"]{--rg:#4A9999}  /* teal */
.dl-rg[data-rg="ca"]{--rg:#B04848}
.dl-rg[data-rg="int"]{--rg:#5A8FB0}
/* the region row and the run card lead with the plate */
.dl-region-lead > .dl-rg{margin-right:var(--sp-2)}
.dl-run-title .dl-rg,.dl-delta-what .dl-rg,.dl-kittile-body .dl-rg,.sd-metaline .dl-rg,.smp-card .dl-rg{margin-right:var(--sp-1)}

/* ── K2j: STAGE CHIPS carry their stage's tone, not one ink per band ("can the statuses in the region section be
   different colors so they signal they're in different stages"). Preparing is quiet; pitched is iris; samples out is
   teal; buyer review is amber; accepted, vendor setup and live are green (deepening); ended and passed are muted. ── */
.dl-stagechip[data-stage="preparing"]{--band-ink:var(--text-muted)}
.dl-stagechip[data-stage="pitched"]{--band-ink:var(--accent-ink,var(--accent))}
.dl-stagechip[data-stage="samples"]{--band-ink:var(--teal-ink,var(--teal))}
.dl-stagechip[data-stage="buyer_review"]{--band-ink:var(--warning-ink,var(--warning))}
.dl-stagechip[data-stage="accepted"]{--band-ink:var(--success-ink,var(--success))}
.dl-stagechip[data-stage="vendor_setup"]{--band-ink:color-mix(in oklab,var(--success-ink,var(--success)),var(--text-primary) 20%)}
.dl-stagechip[data-stage="live"]{--band-ink:var(--success-ink,var(--success))}
.dl-stagechip[data-stage="live"]{background:color-mix(in oklab,var(--success-ink,var(--success)),transparent 82%)}
.dl-stagechip[data-stage="ended"],.dl-stagechip[data-stage="passed"]{--band-ink:var(--text-muted)}

/* ── K2j: THE TASK SHEET (js/task-sheet.js): Done first, then the words, the date, the note ── */
.dl-tasksheet{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-tasksheet .dl-field{display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-tasksheet .dl-input,.dl-tasksheet .dl-textarea{width:100%;min-height:44px;font-size:16px;box-sizing:border-box}
.dl-tasksheet .dl-tasksheet-done{width:auto;height:auto;flex:none;display:inline-flex;grid-template-columns:none;align-items:center;justify-content:flex-start;gap:var(--sp-3);min-height:44px;padding-right:var(--sp-3);cursor:pointer}
.dl-tasksheet .dl-tasksheet-done input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dl-tasksheet-done .dl-tasksheet-donew{font-weight:var(--fw-semibold);color:var(--text-primary)}
.dl-tasksheet-done input:checked ~ .dl-tasksheet-donew{color:var(--text-secondary);text-decoration:line-through}

/* ── K2j: NOTES & TASKS as bands (Elle: "why so many white background containers"): a band head, ONE glass card of rows
   per column, never a card inside a card. The rows are the dashboard's (.dl-deltalist .dl-row). ── */
.dl-tmband{grid-column:span 6;display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
@media (max-width:900px){.dl-tmband{grid-column:span 12}}
.dl-tmband > .dl-bandhead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:0;font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.dl-tmband > .dl-bandhead .dl-bandcount{font-family:var(--font-accent,inherit);font-style:italic;font-weight:400;font-size:var(--fs-sm);color:var(--teal-ink);margin-left:var(--sp-2)}
.dl-tmband .dl-deltalist{grid-column:auto;padding:var(--sp-2) var(--sp-4)}
.dl-tmband .dl-row{padding:var(--sp-3) 0;border-top:1px solid var(--card-line);min-height:56px}
.dl-tmband .dl-row:first-child{border-top:0}
.dl-tmband .dl-row[role="button"]{cursor:pointer}
.dl-tmband .dl-row[role="button"]:hover .dl-delta-what > b{color:var(--accent-ink,var(--accent))}
.dl-tmband .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-tmband .dl-delta-what > b{overflow-wrap:anywhere}
.dl-tmband .dl-delta-when{flex:0 0 auto;min-width:56px;font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-tmband .dl-row.dl-done .dl-delta-what > b{text-decoration:line-through;color:var(--text-secondary)}
.dl-tmband .dl-note-body{display:none;padding:var(--sp-2) 0 var(--sp-3) calc(var(--sp-3) + 3.5rem)}
.dl-tmband .dl-row[aria-expanded="true"] + .dl-note-body{display:block}
.dl-tmband .dl-note-body .dl-label{display:block;margin:var(--sp-3) 0 var(--sp-1)}
.dl-tmband .dl-note-body .dl-note-item{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;cursor:pointer}
.dl-tmband .dl-note-body .dl-note-item.dl-done b{text-decoration:line-through;color:var(--text-secondary)}
.dl-tmband .dl-seg{margin-left:auto}
@media (max-width:640px){.dl-tmband .dl-note-body{padding-left:0}}

/* ── K2j: the punch-list check is the book's check (moved from program-run-card.css: the task sheet and Notes & Tasks use it too, LAW 36) ── */
.dl-pl-check{position:relative;flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.dl-pl-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dl-pl-check input:disabled{cursor:not-allowed}
.dl-pl-box{width:22px;height:22px;border-radius:6px;border:2px solid var(--text-muted);display:grid;place-items:center;transition:background .15s ease,border-color .15s ease}
.dl-pl-check input:checked + .dl-pl-box{background:var(--success);border-color:var(--success)}
.dl-pl-check input:checked + .dl-pl-box::after{content:"";width:6px;height:11px;border:solid var(--on-success,var(--pearl-white));border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.dl-pl-check input:focus-visible + .dl-pl-box{outline:2px solid var(--accent);outline-offset:2px}
.dl-pl-check input:disabled + .dl-pl-box{opacity:.45}

/* ── THE CLIENT SWEEP (2026-09-20): what the hand found on every page at 375 ──
   (the stat strip scrolls sideways inside its own container by the 2026-09-02 decision above; it is not cut)
   standalone links and icon verbs meet the thumb: a 44px band on a phone (LAW 32), the words unchanged; links inside
   prose keep their line */
@media (max-width:640px){
  a.dl-more,a[href^="tel:"],a[href^="mailto:"],.smp-track,.dl-iconbtn{min-height:44px;display:inline-flex;align-items:center}
  a[href^="tel:"],a[href^="mailto:"]{padding:0 var(--sp-1);margin:0 calc(var(--sp-1) * -1)}
  .dl-iconbtn{min-width:44px;justify-content:center}
}
/* every page ends with air above the tab bar on a phone (the dashboard and Notes & Tasks got theirs by name; the rest
   read 16px): one rule for the book's pages, the frame's own bottom being the tab bar's top (LAW 46.7) */
@media (max-width:900px){
  body.dl-page > main,body.dl-page > .dl-page-body,body.dl-page > section:last-of-type{padding-bottom:max(var(--sp-8),48px)}
  body.dl-page{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--sp-4))}
}
/* K2l: the task sheet's files, verbs and the question to Volume */
.dl-tasksheet-files .dl-chips{margin-top:var(--sp-1)}
.dl-tasksheet-verbs{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.dl-tasksheet-verbs:empty{display:none}
.dl-tasksheet-verbs .dl-btn-quiet-danger{margin-left:auto}
.dl-tasksheet-ask .dl-textarea{width:100%;min-height:72px;font-size:16px;box-sizing:border-box}
.dl-tasksheet-askrow{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.dl-tasksheet-theirs,.dl-tasksheet-na{margin:0}
/* K2l: the program row opens its numbers in place (the drill): a grid of facts, two by two on a phone */
.dl-progwrap{display:flex;flex-direction:column}
.dl-progrow[role="button"]{cursor:pointer}
.dl-progrow[aria-expanded="true"]{background:var(--bg-hover);border-radius:var(--r-md)}
.dl-progrow > .dl-region-chev{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg);margin-left:auto;transition:transform .15s ease}
.dl-progrow[aria-expanded="true"] > .dl-region-chev{transform:rotate(-135deg)}
.dl-progrow time .dl-run-type{margin:0}
.dl-econ{margin:var(--sp-2) 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--glass-hi);border:1px solid var(--card-line)}
.dl-econ[hidden]{display:none}
.dl-econ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-3) var(--sp-4)}
.dl-econ-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-econ-fact > b{font-size:var(--fs-sm);overflow-wrap:anywhere}
.dl-econ > .dl-help{margin:var(--sp-3) 0 0}
@media (max-width:640px){.dl-econ-grid{grid-template-columns:1fr;gap:0}.dl-econ-fact{flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--card-line)}.dl-econ-fact:first-child{border-top:0}.dl-econ-fact > b{text-align:right}}

/* ── R2 (2026-09-20): VENDOR SETUP, one list on both faces (js/vendor-setup.js). The client band is a dashboard band; the
   admin card is a fieldset on the brand page. A step is a row (the book's .dl-row) with a state dot; the bar is the 12
   steps as cells. States: missing (needed) · ready (handed in, to check) · approved/setup_complete (on file) · skip. ── */
.dl-vs-card{padding:var(--sp-3) var(--sp-4)}
.dl-vs-line{margin:0 0 var(--sp-3)}
.dl-vs-bar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;height:8px;margin:0 0 var(--sp-3);min-width:0;max-width:100%}
.dl-vs-bar i{display:block;border-radius:2px;background:var(--card-line)}
.dl-vs-bar i[data-vs-state="ready"]{background:var(--teal,#4A9999);opacity:.55}
.dl-vs-bar i[data-vs-state="approved"],.dl-vs-bar i[data-vs-state="setup_complete"],.dl-vs-bar i[data-vs-state="shared"]{background:var(--teal-ink,#4A9999)}
.dl-vs-bar i[data-vs-state="skip"]{background:transparent;border:1px dashed var(--card-line)}
.dl-vs-fold > summary{min-height:44px}
.dl-vs-fold .dl-disc-b{padding-bottom:var(--sp-2)}
.dl-vs-list .dl-vs-row{min-height:56px;padding:var(--sp-2) 0;border-top:1px solid var(--card-line);cursor:pointer}
.dl-vs-list .dl-vs-row:first-child{border-top:0}
.dl-vs-list .dl-vs-row:hover .dl-delta-what > b,.dl-vs-list .dl-vs-row:focus-visible .dl-delta-what > b{color:var(--accent-ink,var(--accent))}
.dl-vs-row .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-vs-row .dl-delta-what > b{overflow-wrap:anywhere}
.dl-vs-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--card-line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.dl-vs-row[data-vs-state="missing"] .dl-vs-dot{background:var(--warning,#C9A227)}
.dl-vs-row[data-vs-state="ready"] .dl-vs-dot{background:var(--teal,#4A9999);opacity:.6}
.dl-vs-row[data-vs-state="approved"] .dl-vs-dot,.dl-vs-row[data-vs-state="setup_complete"] .dl-vs-dot,.dl-vs-row[data-vs-state="shared"] .dl-vs-dot{background:var(--teal-ink,#4A9999)}
.dl-vs-row[data-vs-state="skip"] .dl-vs-dot{background:transparent;border:1px dashed var(--card-line)}
.dl-vs-row[data-vs-state="approved"] .dl-delta-what > b,.dl-vs-row[data-vs-state="setup_complete"] .dl-delta-what > b,.dl-vs-row[data-vs-state="skip"] .dl-delta-what > b{color:var(--text-secondary)}
.dl-vs-cue{min-height:56px;padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-3);border-radius:var(--r-md);background:color-mix(in srgb,var(--warning,#C9A227) 12%,transparent);cursor:pointer}
.dl-vs-admin .dl-vs-bar{margin:var(--sp-2) 0 var(--sp-3)}
.dl-vs-admin .dl-vs-list{padding:0}
.dl-vs-admin .dl-fieldset-t small{font-family:var(--font-accent,inherit);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--teal-ink)}
.dl-vs-ready{margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:color-mix(in srgb,var(--teal,#4A9999) 12%,transparent)}
/* ── R2b: THE GUIDED STEP inside the ONE sheet (js/vendor-setup.js mountStep): Costco's screen, the ask, the status, the
   fields (a profile-filled one is tagged), the file slots, the step's rule, prev/next. ── */
.dl-tasksheet-answer .dl-disc-b,.dl-tasksheet-ask .dl-disc-b{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-vs-step{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-vs-shot{margin:0}
.dl-vs-shot-btn{display:block;width:100%;padding:0;border:1px solid var(--card-line);border-radius:var(--r-md);background:var(--bg-card);overflow:hidden;cursor:zoom-in}
.dl-vs-shot-btn img{display:block;width:100%;height:auto}
.dl-vs-shot figcaption{margin-top:var(--sp-1)}
.dl-vs-ask{margin:0;font-size:var(--fs-md);line-height:1.45;color:var(--text-primary)}
.dl-vs-status{margin:0;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--bg-muted,rgba(0,0,0,.04))}
.dl-vs-status[data-state="todo"]{background:color-mix(in srgb,var(--warning,#C9A227) 14%,transparent);color:var(--text-primary)}
.dl-vs-status[data-state="ready"]{background:color-mix(in srgb,var(--teal,#4A9999) 14%,transparent);color:var(--text-primary)}
.dl-vs-status[data-state="ok"]{background:color-mix(in srgb,var(--teal-ink,#4A9999) 18%,transparent);color:var(--text-primary)}
.dl-vs-fields{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-vs-fieldrow{display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-vs-fieldrow[data-filled="1"] > .dl-label::after{content:"✓";margin-left:var(--sp-1);color:var(--teal-ink,#4A9999);font-weight:var(--fw-bold)}
.dl-vs-fieldrow .dl-input,.dl-vs-fieldrow .dl-select{width:100%;min-height:44px;font-size:16px;box-sizing:border-box}
.dl-vs-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-secondary)}
.dl-vs-tag{display:inline-block;padding:0 var(--sp-2);border-radius:var(--r-sm);background:var(--bg-muted,rgba(0,0,0,.05));font-size:var(--fs-2xs);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
.dl-vs-src{color:var(--teal-ink,#4A9999)}
.dl-vs-seg{display:inline-flex;gap:4px}
.dl-vs-seg button{min-height:44px;min-width:88px;padding:0 var(--sp-4);border:1px solid var(--card-line);border-radius:var(--r-md);background:var(--bg-card);font:inherit;font-size:16px;cursor:pointer}
.dl-vs-seg button[aria-pressed="true"]{background:var(--text-primary);color:var(--bg-card);border-color:transparent}
.dl-vs-seg button:disabled{opacity:.6;cursor:default}
.dl-vs-slots{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-vs-slot{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);border:1px dashed var(--card-line);border-radius:var(--r-md)}
.dl-vs-slot[data-filled="1"]{border-style:solid;border-color:color-mix(in srgb,var(--teal,#4A9999) 50%,var(--card-line))}
.dl-vs-slot[data-filled="1"] > .dl-label::after{content:"✓";margin-left:var(--sp-1);color:var(--teal-ink,#4A9999);font-weight:var(--fw-bold)}
.dl-vs-slot .dl-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-1)}
.dl-vs-chip{display:inline-flex;align-items:stretch;min-height:44px;border:1px solid var(--card-line);border-radius:var(--r-md);overflow:hidden;background:var(--bg-card)}
.dl-vs-chip-open{border:0;background:transparent;padding:0 var(--sp-3);font:inherit;cursor:pointer;max-width:56vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-vs-chip-x{border:0;border-left:1px solid var(--card-line);background:transparent;width:44px;font-size:var(--fs-lg);cursor:pointer;color:var(--text-secondary)}
.dl-vs-help{margin:0}
.dl-vs-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--card-line)}
.dl-vs-nav .dl-btn{max-width:100%;white-space:normal;text-align:left}
.dl-vs-zoombody img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.dl-vs-dot-act{margin:0 var(--sp-3) 0 var(--sp-4)}
#pdRoot .dl-bandhead .dl-btn-primary{white-space:normal;text-align:left}
/* ── R2b: THE EDITOR (Platform → Vendor setup, js/vendor-setup-editor.js) ── */
.dl-vse-list{padding:var(--sp-2) var(--sp-4)}
.dl-vse-row{min-height:64px;padding:var(--sp-2) 0;border-top:1px solid var(--card-line);gap:var(--sp-3)}
.dl-vse-row:first-child{border-top:0}
.dl-vse-no{flex:0 0 24px;font-family:var(--font-accent,inherit);font-style:italic;color:var(--teal-ink)}
.dl-vse-thumb{flex:0 0 56px;width:56px;height:40px;object-fit:cover;object-position:top;border-radius:var(--r-sm);border:1px solid var(--card-line);background:var(--bg-muted,rgba(0,0,0,.04))}
.dl-vse-row .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-vse-verbs{display:flex;gap:var(--sp-1);flex:0 0 auto}
.dl-vse-foot{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.dl-vse-editor{display:flex;flex-direction:column;gap:var(--sp-4)}
.dl-vse-editor .dl-field{display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-vse-editor .dl-fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.dl-vse-editor .dl-vse-narrow{grid-column:auto}
.dl-vse-editor .dl-input,.dl-vse-editor .dl-select,.dl-vse-editor .dl-textarea{width:100%;min-height:44px;font-size:16px;box-sizing:border-box}
.dl-vse-field,.dl-vse-doc{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);border:1px solid var(--card-line);border-radius:var(--r-md);margin-bottom:var(--sp-3)}
.dl-vse-fverbs{display:flex;gap:var(--sp-1);justify-content:flex-end}
.dl-vse-shot img{display:block;max-width:100%;height:auto;border:1px solid var(--card-line);border-radius:var(--r-md);margin-bottom:var(--sp-2)}
.dl-vse-danger{display:flex;align-items:center;gap:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--card-line)}
@media (max-width:640px){.dl-vse-editor .dl-fieldrow{grid-template-columns:1fr}.dl-vse-verbs{flex-wrap:wrap;justify-content:flex-end}.dl-vse-row{flex-wrap:wrap}}
/* ── R2b: the banking layer — hidden fields, the Reveal, the secure line ── */
.dl-vs-secure{margin:0;padding:var(--sp-2) var(--sp-3);border-left:2px solid var(--teal-ink,#4A9999);background:color-mix(in srgb,var(--teal,#4A9999) 8%,transparent);border-radius:0 var(--r-md) var(--r-md) 0}
.dl-vs-status[data-state="hidden"]{background:var(--bg-muted,rgba(0,0,0,.05));color:var(--text-secondary)}
.dl-vs-masked{letter-spacing:.2em;color:var(--text-secondary)}
.dl-vs-tag-lock{background:color-mix(in srgb,var(--warning,#C9A227) 18%,transparent);color:var(--text-primary)}
.dl-vs-chip-hidden{border-style:dashed;color:var(--text-secondary)}
.dl-vs-chip-hidden .dl-vs-chip-open{cursor:default}

/* ── AD8 · PLAYBOOKS (pages/playbooks.html, 2026-09-20): one page for every list a brand or a program copies from;
   lists are tabs, each list ONE card of rows edited in place ─────────────────────────────────────────────── */
.dl-pb-main{max-width:1100px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-5)}
.dl-pb-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-4) 0 var(--sp-5)}
.dl-pb-tabs .dl-chip{min-height:44px;padding:0 var(--sp-4);cursor:pointer}
.dl-pb-tabs .dl-chip[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent}
.dl-pb-list .dl-bandhead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:0 0 var(--sp-3);font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.dl-pb-list .dl-bandhead .dl-help{font-weight:400;font-size:var(--fs-sm)}
.dl-pb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-4);padding:var(--sp-3) 0;align-items:start}
.dl-pb-row + .dl-pb-row{border-top:1px solid var(--card-line)}
.dl-pb-row.dl-pb-off .dl-pb-title{opacity:.55;text-decoration:line-through}
.dl-pb-row .dl-input{min-height:44px;font-size:16px}
.dl-pb-title{font-family:Satoshi,Inter,sans-serif;font-weight:var(--fw-bold);font-size:var(--fs-md);border:0;background:transparent;width:100%;padding:var(--sp-1) 0}
.dl-pb-title:focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.dl-pb-note{width:100%;border:0;background:transparent;color:var(--text-secondary);padding:var(--sp-1) 0;font-size:16px}
.dl-pb-note:focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.dl-pb-meta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-1)}
.dl-pb-meta .dl-seg .dl-chip{min-height:44px;cursor:pointer}
.dl-pb-meta .dl-seg .dl-chip[aria-checked="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent}
.dl-pb-due{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--text-secondary);font-size:var(--fs-sm)}
.dl-pb-due input{width:72px;text-align:center}
.dl-pb-also{font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-pb-acts{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
.dl-pb-acts .dl-btn{min-height:44px}
.dl-pb-headacts{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.dl-pb-headacts .dl-btn{min-height:44px}
.dl-pb-status{font-size:var(--fs-sm);color:var(--text-secondary);min-height:1.4em}
.dl-pb-status[data-state="saved"]{color:var(--teal-ink)}
.dl-pb-status[data-state="kept"]{color:var(--danger,#b4553f)}
@media (max-width:640px){.dl-pb-row{grid-template-columns:1fr}.dl-pb-acts{justify-content:flex-start}}
/* ── R2c: ONE checklist in two sections (the pitch pack, Costco's vendor setup) in the band and on the admin card ── */
.dl-vs-section{margin-top:var(--sp-2)}
.dl-vs-section + .dl-vs-section{margin-top:var(--sp-4)}
.dl-vs-section > .dl-act-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0 var(--sp-1);border-top:2px solid var(--card-line);font-family:Satoshi,Inter,sans-serif;font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.dl-vs-section > .dl-act-head .dl-bandcount{font-family:var(--font-accent,inherit);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--teal-ink)}
.dl-vs-section:first-of-type > .dl-act-head{border-top:0;padding-top:0}
.dl-vs-section .dl-vs-bar{margin:var(--sp-2) 0}
.dl-vs-why{margin:0}
.dl-vs-row[data-lit="1"] .dl-delta-what > b{color:var(--accent-ink,var(--accent))}
.dl-vs-step .dl-btn-primary[data-vs-verb]{align-self:flex-start}
.dl-vs-donefold > summary{min-height:44px}
.dl-vs-donefold .dl-vs-list .dl-vs-row:first-child{border-top:0}
/* ── R2d: THE FLOW (one screen, one thing) ── */
.dl-vs-flow{display:flex;flex-direction:column;gap:var(--sp-4);flex:1 0 auto}
/* the chassis wraps the body in .dlg-content; on a flow screen that wrapper fills the sheet so the buttons land at the bottom, thumb-reachable, no empty band beneath them */
.dlg-content:has(> .dl-vs-flow){flex:1 0 auto;display:flex;flex-direction:column} /* grows to the footer on a short screen (fitFlow measures), never shrinks under it on a long one: the body scrolls */
.dl-vs-flowline{margin:0;font-size:var(--fs-md);line-height:1.45}
.dl-vs-flowq{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-vs-flowlabel{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:0;text-transform:none;line-height:1.25;color:var(--text-primary)}
.dl-vs-flowq .dl-input,.dl-vs-flowq .dl-select,.dl-vs-flowq .dl-textarea{width:100%;min-height:48px;font-size:18px;box-sizing:border-box}
.dl-vs-flowq .dl-vs-seg button{min-height:48px;min-width:112px;font-size:18px}
.dl-vs-flowdrop{align-self:flex-start;min-height:48px}
.dl-vs-flowverb{align-self:flex-start;min-height:48px}
.dl-vs-flowinfo{align-self:flex-start}
.dl-vs-flowask{margin-top:auto}
.dl-vs-flowask .dl-disc-b{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-vs-flowdone{margin:0;font-size:var(--fs-xl);line-height:1.35}
.dl-vs-havelist .dl-vs-have{width:100%;text-align:left;border:0;background:transparent;font:inherit;min-height:56px;padding:var(--sp-2) 0;border-top:1px solid var(--card-line);cursor:pointer}
.dl-vs-havelist .dl-vs-have:first-child{border-top:0}
.dl-vs-have .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-vs-flowfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.dl-vs-info img{display:block;width:100%;height:auto;border:1px solid var(--card-line);border-radius:var(--r-md);margin-bottom:var(--sp-3)}

/* ── THE FOUR BLOCKS on the client dashboard (Elle 2026-09-21: "one block per thing, click it to complete it; the progress bar
   still, stunning and simple"). One bar over four tiles; each tile a 44px+ button with its own thin bar; phone = one column. ── */
.dl-vs-blocks{padding:var(--sp-4)}
.dl-vs-progress{position:relative;height:8px;border-radius:4px;background:color-mix(in oklab,var(--accent,#8A7ABB) 14%,transparent);overflow:hidden;margin:0 0 var(--sp-3)}
.dl-vs-progress i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:linear-gradient(90deg,var(--teal,#4A9999),var(--accent,#8A7ABB));transition:width .5s ease}
.dl-vs-blocks .dl-vs-line{margin:0 0 var(--sp-4)}
.dl-vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.dl-vs-block{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:var(--sp-3);row-gap:var(--sp-2);align-items:start;text-align:left;width:100%;min-height:44px;padding:var(--sp-4);border-radius:var(--r-lg);border:1px solid var(--card-line);background:var(--bg-card-solid,var(--surface,#FDFCFA));color:inherit;font:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.dl-vs-block:hover{transform:translateY(-2px);box-shadow:0 8px 24px color-mix(in oklab,var(--accent,#8A7ABB) 16%,transparent);border-color:color-mix(in oklab,var(--accent,#8A7ABB) 40%,var(--card-line))}
.dl-vs-block:focus-visible{outline:2px solid var(--accent,#8A7ABB);outline-offset:2px}
.dl-vs-block[data-done="1"]{background:color-mix(in oklab,var(--teal,#4A9999) 8%,var(--bg-card-solid,var(--surface,#FDFCFA)))}
.dl-vs-blockn{grid-row:1/4;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--accent-deep,#7A6FA8);background:color-mix(in oklab,var(--accent,#8A7ABB) 14%,transparent)}
.dl-vs-block[data-done="1"] .dl-vs-blockn{color:var(--pearl-white,#FDFCFA);background:var(--teal-ink,#4A9999)}
.dl-vs-blockt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-vs-blockt b{font-family:var(--font-display);font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.25}
.dl-vs-blockbar{display:block;height:4px;border-radius:2px;background:color-mix(in oklab,var(--accent,#8A7ABB) 12%,transparent);overflow:hidden}
.dl-vs-blockbar i{display:block;height:100%;border-radius:2px;background:var(--teal-ink,#4A9999);transition:width .5s ease}
.dl-vs-blockfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}
.dl-vs-blockin{color:var(--text-muted);white-space:nowrap;flex:0 0 auto}
.dl-vs-blockverb{color:var(--accent-deep,#7A6FA8);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dl-vs-quizline{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:44px;margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:0;border-top:1px solid var(--card-line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.dl-vs-quizline b{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap}
.dl-vs-quizline .dl-help{flex:1 1 auto;min-width:0}
@media (max-width:640px){.dl-vs-grid{grid-template-columns:minmax(0,1fr)}.dl-vs-block{padding:var(--sp-3)}}
/* block 2, the uploads sheet: one row per slot, the file door on each, the drive link beneath */
.dl-vs-uploads{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-vs-uploads > .dl-help{margin:0}
.dl-vs-uplist{display:flex;flex-direction:column}
.dl-vs-uprow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:56px;padding:var(--sp-2) 0;border-top:1px solid var(--card-line)}
.dl-vs-uprow:first-child{border-top:0}
.dl-vs-uprow[data-filled="1"] .dl-vs-upt b::before{content:"✓ ";color:var(--teal-ink,#4A9999)}
.dl-vs-upt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-vs-upt b{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.dl-vs-upt .dl-chips{margin-top:2px}
.dl-vs-uprow .dl-btn{flex:0 0 auto;min-height:44px}
.dl-vs-updrive{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--card-line)}
.dl-vs-quiz{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-vs-quiz > .dl-help{margin:0 0 var(--sp-2)}

/* TOUCH REACH (2026-09-23 audit, LAW 32.5): the stage chip (24px), a feed row's "Track live", "Edit the playbook" and
   an inline help link (13–18px) were under a thumb's 44px. Each gets an invisible hit area; nothing it sits in moves. */
@media (pointer:coarse){
  .dl-stagetap,.dl-feedtext > a,a.dl-pl-playbook,.dl-help > a{position:relative}
  .dl-stagetap::after{content:'';position:absolute;inset:-10px -4px}
  .dl-feedtext > a::after,a.dl-pl-playbook::after,.dl-help > a::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
}

/* LIQUID GLASS, the popovers (Elle 2026-09-23): a menu floats over its OWN page, so a true backdrop blur works here
   (nothing crosses a frame edge). The foundation recipe (--glass-*), a touch more fill so every item reads. */
.dl-menu,.dl-morefold > .dl-morefold-menu{
  background:var(--lg-sheen),color-mix(in oklab,var(--surface),transparent 14%);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--card-line);
  box-shadow:var(--glass-highlight),0 22px 54px -10px color-mix(in oklab,var(--deep,#2D2438),transparent 50%)}

/* vendor setup's section count wraps rather than widen its card ("11 of 13 done · 1 of 12 on file · 8 still missing
   from the brand · 1 to check" is 298px of nowrap; it pushed the card 29px past the phone, 2026-09-23 audit) */
.dl-vs-section .dl-act-head{flex-wrap:wrap;min-width:0}
.dl-vs-section .dl-act-head .dl-bandcount{white-space:normal;min-width:0;max-width:100%}

/* VENDOR SETUP: what is done folds under "N done", crossed out (Elle 2026-09-23) */
.dl-vs-done{margin-top:var(--sp-2);border-top:1px solid var(--card-line,var(--line));}
.dl-vs-done > summary{font-size:14px;list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:44px;padding:0 var(--sp-1);font-weight:600;color:var(--ink-2,inherit)}
.dl-vs-done > summary::-webkit-details-marker{display:none}
.dl-vs-done > summary .dl-help::after{content:" ›";display:inline-block;transition:transform .15s}
.dl-vs-done[open] > summary .dl-help{font-size:0}
.dl-vs-done[open] > summary .dl-help::after{content:"Hide";font-size:12px}
.dl-vs-done .dl-vs-row .dl-delta-what > b{text-decoration:line-through;text-decoration-thickness:1px;opacity:.7}
.dl-vs-done .dl-vs-row .dl-delta-what .dl-help{opacity:.75}

/* ONE STACK, ONE GAP (Elle 2026-09-23: "the containers are overlapping… a design law should make it impossible").
   A page is a stack of groups; a group is a header and its body. Space comes ONLY from the stack's and the group's gap,
   never from a margin on a sibling, so a wrapper, a late-mounted card or a button in a header can never land on its neighbour. */
.dl-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8,32px);min-width:0}
.dl-group{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3,12px);min-width:0;align-content:start}
.dl-stack > *,.dl-group > *{margin-top:0!important;margin-bottom:0!important;min-width:0;grid-column:1 / -1!important}
.dl-group > .dl-sectionbar{min-height:44px}