/* ==========================================================================
   DecisionLayer design system ("editorial" look, November 2026)

   Paper, ink, a red accent and a blue accent; Archivo (wide) for display and
   UI, Newsreader for long-form prose, IBM Plex Mono for kickers, labels and
   buttons. Rules instead of cards, no rounded corners, no drop shadows.

   Two layers:
     1. Tokens + reusable classes (dl-*) for pages written for this system.
     2. A re-skin of the Tailwind utilities the older templates use, scoped
        with an `html` prefix so it beats the Tailwind CDN's runtime styles.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  --paper: #faf7ef;
  --card: #fffefb;
  --ink: #15161a;
  --tint: #f1ecdf;
  --rule: #d3ccba;
  --body: #3d3e42;
  --mute: #55565a;
  --meta: #6b675c;
  --faint: #8a8578;
  --blue: #17348f;
  --red: #cc3a1b;
  --red-deep: #b23217;
  --sealup: #17348f;
  --link: #17348f;
  --on-ink: #faf7ef;
  --on-blue: #f7f3e8;
  --blue-meta: #9fb0e2;
  --callout: #17348f;
  --on-callout: #f7f3e8;
  --callout-meta: #9fb0e2;
  --ok: #2f6b3a;
  --warn: #a35a00;
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(18px, 5vw, 44px);
  --page-max: 1280px;
  /* Side padding that lines a full-bleed band (header row, footer) up with the
     centred page column below it. */
  --column-inset: max(var(--gutter), calc(50% - var(--page-max) / 2 + var(--gutter)));
  color-scheme: light;
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
  /* Sideways overflow is cut off at the page edge. It must be `clip`, not
     `hidden`: `hidden` turns <body> into a scroll container that never
     scrolls, and then position: sticky (page asides, the demo rail) has
     nothing to stick to. `hidden` is only the fallback for browsers without
     `clip`. Layouts keep overflow-x-hidden on <html>, which the viewport
     takes over, so the page never scrolls sideways either way. */
  overflow-x: hidden;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-stretch: 125%; letter-spacing: -0.035em; line-height: 1.02; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

::selection { background: var(--ink); color: var(--paper); }

/* Form controls: square, hairline ink border, card background. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: 0;
}

input::placeholder, textarea::placeholder { color: var(--faint); }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
/* The page column: --page-max wide including both gutters and centred on wide
   screens, as the site's old Tailwind max-w-7xl container was. A fixed-width block
   that is the whole page (.dl-sim, a .dl-narrow or a lone .dl-page__body that opens
   the page) centres inside it; a block below a full-width one stays at the left
   edge, under the heading above it; everything else fills the column. */
.dl-wrap { max-width: var(--page-max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.dl-wrap > .dl-narrow:first-child { margin-left: auto; margin-right: auto; }
.dl-narrow { max-width: 760px; }
.dl-measure { max-width: 680px; }
.dl-rule { height: 1px; background: var(--ink); }
.dl-rule--soft { height: 1px; background: var(--rule); }
.dl-rule--thick { height: 2px; background: var(--ink); }
.dl-rule--triple { display: flex; flex-direction: column; gap: 3px; }
.dl-rule--triple > span { display: block; height: 2px; background: var(--ink); }

/* Two-column page: body + sticky aside (md pages). */
.dl-page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; padding: 52px 0 64px; align-items: flex-start; }
.dl-page__body { flex: 999 1 480px; max-width: 760px; min-width: 0; }
.dl-wrap > .dl-page:first-child > .dl-page__body:only-child { margin-left: auto; margin-right: auto; }
.dl-page__aside { flex: 1 1 240px; max-width: 300px; align-self: flex-start; margin-top: 6px; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 900px) { .dl-page__aside { position: sticky; top: 24px; } }
/* In a short window (a small laptop, a zoomed page) an aside can be taller
   than the screen. There it scrolls within itself, so its last entries stay
   reachable while it is pinned, and focus rings are drawn inside the element
   so the scroll box does not cut their sides off. */
@media (min-width: 900px) and (max-height: 759px) {
  .dl-page__aside { max-height: calc(100vh - 48px); overflow-y: auto; }
  .dl-page__aside :focus-visible { outline-offset: -2px; }
}

/* -------------------------------------------------------------------------
   4. Typography classes
   ------------------------------------------------------------------------- */
.dl-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.dl-kicker--meta { color: var(--meta); letter-spacing: 0.14em; }
.dl-kicker--blue { color: var(--blue); }
.dl-kicker--ink { color: var(--ink); }
.dl-kicker--sm { font-size: 10px; letter-spacing: 0.16em; }

.dl-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.dl-mono--lower { text-transform: none; letter-spacing: 0.04em; font-size: 13px; }

.dl-display {
  font-family: var(--font-sans);
  font-stretch: 125%;
  font-size: clamp(36px, 4.8vw, 66px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.dl-display--md { font-size: clamp(28px, 4vw, 40px); line-height: 1.02; letter-spacing: -0.035em; }
.dl-display--sm { font-size: clamp(24px, 3vw, 30px); line-height: 1.08; letter-spacing: -0.035em; }

.dl-h2 { font-family: var(--font-sans); font-stretch: 125%; font-size: 30px; line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; }
.dl-h3 { font-family: var(--font-sans); font-stretch: 112%; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.dl-h4 { font-family: var(--font-sans); font-stretch: 112%; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }

.dl-lede { font-family: var(--font-serif); font-size: clamp(21px, 2.4vw, 25px); line-height: 1.36; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.dl-prose { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.dl-prose--sm { font-size: 17px; }
.dl-prose p + p { margin-top: 16px; }
.dl-prose a, .dl-link { color: var(--link); border-bottom: 1px solid var(--link); overflow-wrap: anywhere; }
.dl-prose a:hover, .dl-link:hover { color: var(--red); border-bottom-color: var(--red); }
.dl-prose strong { font-weight: 600; color: var(--ink); }
.dl-prose em { font-style: italic; }
.dl-prose h2, .dl-prose h3 { font-family: var(--font-sans); color: var(--ink); }
.dl-prose ul, .dl-prose ol { margin: 4px 0 20px; padding-left: 0; list-style: none; border-top: 1px solid var(--ink); }
/* The number hangs in the left padding rather than a grid column: prose items
   mix text with inline elements (<strong>Term</strong>: definition), and in a
   grid each of those runs becomes its own cell, one word wide. */
.dl-prose li { position: relative; padding: 11px 0 11px 40px; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.5; }
.dl-prose li:last-child { border-bottom-color: var(--ink); }
.dl-prose li::before { content: counter(dl-item, decimal-leading-zero); counter-increment: dl-item; position: absolute; left: 0; top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--red); }
.dl-prose ul, .dl-prose ol { counter-reset: dl-item; }
.dl-prose blockquote { background: var(--callout); color: var(--on-callout); padding: 30px 34px; margin: 8px 0 24px; font-size: 27px; line-height: 1.32; letter-spacing: -0.01em; }
.dl-prose blockquote p { color: inherit; }
.dl-prose code { font-family: var(--font-mono); font-size: 0.85em; background: var(--tint); padding: 1px 5px; }
.dl-prose pre { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; padding: 20px 22px; overflow-x: auto; margin: 8px 0 24px; }
.dl-prose pre code { background: none; padding: 0; color: inherit; }

.dl-body { font-size: 15px; line-height: 1.6; color: var(--mute); }
.dl-small { font-family: var(--font-serif); font-size: 12px; line-height: 1.5; color: var(--mute); }
.dl-muted { color: var(--mute); }
.dl-meta { color: var(--meta); }
.dl-ink { color: var(--ink); }
.dl-red { color: var(--red); }
.dl-blue { color: var(--blue); }

.dl-sup { font-family: var(--font-mono); font-size: 0.6em; font-weight: 500; letter-spacing: 0; line-height: 0; margin-left: 3px; }
.dl-sup a { color: var(--red); border: 0; }

/* Numbered section header: "§ 01  Heading" over a 2px rule. */
.dl-section { display: flex; align-items: baseline; gap: 16px; border-top: 2px solid var(--ink); padding-top: 14px; margin: 52px 0 20px; scroll-margin-top: 60px; }
.dl-section--tight { margin: 28px 0 16px; }
.dl-section__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--red); flex: none; }
.dl-section__title { font-family: var(--font-sans); font-stretch: 125%; font-size: 30px; line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; margin: 0; }
.dl-section__title--caps { font-size: 22px; letter-spacing: -0.005em; }
.dl-section__title--sm { font-size: 22px; }
.dl-section__aside { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--meta); text-transform: uppercase; }
.dl-subhead { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin: 30px 0 12px; }

/* Page header block used on every content page. */
.dl-pagehead { padding: 52px 0 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.dl-pagehead .dl-kicker { margin-bottom: 18px; }
.dl-pagehead__meta { display: grid; grid-template-columns: auto auto; gap: 6px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.dl-pagehead__meta > span:nth-child(odd) { color: var(--meta); }

/* -------------------------------------------------------------------------
   5. Buttons, tags, badges
   ------------------------------------------------------------------------- */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 23px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.dl-btn:hover { background: var(--ink); color: var(--paper); }
.dl-btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.dl-btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.dl-btn--blue { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.dl-btn--blue:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dl-btn--sm { font-size: 11px; padding: 9px 14px; letter-spacing: 0.14em; }
.dl-btn--lg { font-size: 13px; padding: 17px 28px; }
.dl-btn--block { display: flex; width: 100%; }
.dl-btn--quiet { border-color: var(--rule); color: var(--mute); }
.dl-btn--quiet:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.dl-btn[disabled], .dl-btn[aria-disabled="true"], .dl-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.dl-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--ink);
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.dl-tag--fill { background: var(--ink); color: var(--paper); }
.dl-tag--red { border-color: var(--red); color: var(--red); }
.dl-tag--blue { border-color: var(--blue); color: var(--blue); }
.dl-tag--ok { border-color: var(--ok); color: var(--ok); }
.dl-tag--warn { border-color: var(--warn); color: var(--warn); }
.dl-tag--muted { border-color: var(--rule); color: var(--meta); }

/* -------------------------------------------------------------------------
   6. Rule tables, key/value grids, lists
   ------------------------------------------------------------------------- */
.dl-table { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin: 6px 0 22px; }
.dl-table__head { display: grid; gap: 4px 24px; padding: 10px 0; border-bottom: 1px solid var(--ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.dl-table__row { display: grid; gap: 4px 24px; padding: 15px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.dl-table__row:first-of-type { border-top: 0; }
.dl-table__key { font-family: var(--font-sans); font-stretch: 112%; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dl-table__cell { font-size: 15px; line-height: 1.55; color: var(--mute); }
.dl-table__money { font-family: var(--font-sans); font-stretch: 125%; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--blue); line-height: 1.15; }
.dl-table--3 .dl-table__head, .dl-table--3 .dl-table__row { grid-template-columns: minmax(130px, 0.8fr) minmax(0, 2fr) minmax(90px, 0.55fr); }
.dl-table--2 .dl-table__head, .dl-table--2 .dl-table__row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); }
/* A row that is itself an outbound link (investor list): ink text, red arrow at the right. */
.dl-table__row--link { color: var(--ink); }
.dl-table__row--link:hover .dl-table__key { color: var(--red); }
.dl-table__arrow { text-align: right; color: var(--red); font-family: var(--font-mono); font-size: 12px; }
.dl-table.dl-table--2 .dl-table__row--link { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 600px) {
  .dl-table__head { display: none; }
  .dl-table--3 .dl-table__row, .dl-table--2 .dl-table__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Real <table> elements (admin, dashboard) in the same voice. */
.dl-datatable { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.dl-datatable thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ink); font-weight: 500; white-space: nowrap; }
.dl-datatable tbody td { padding: 13px 12px 13px 0; border-top: 1px solid var(--rule); vertical-align: top; font-size: 14px; line-height: 1.45; color: var(--body); }
.dl-datatable tbody tr:first-child td { border-top: 0; }
.dl-datatable tbody tr:hover td { background: var(--tint); }
.dl-datatable td:last-child, .dl-datatable th:last-child { padding-right: 0; }

/* Definition grid: label / value rows. */
.dl-kv { display: grid; grid-template-columns: fit-content(58%) minmax(0, 1fr); gap: 0 16px; font-size: 14px; line-height: 1.4; border-top: 3px solid var(--ink); }
.dl-kv > dt, .dl-kv > .dl-kv__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dl-kv > dd, .dl-kv > .dl-kv__v { padding: 9px 0; border-bottom: 1px solid var(--rule); margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.dl-kv > dt:nth-last-child(2), .dl-kv > dd:last-child, .dl-kv > .dl-kv__k:nth-last-child(2), .dl-kv > .dl-kv__v:last-child { border-bottom-color: var(--ink); }
.dl-kv--plain { border-top: 0; }

/* Feature cells: numbered grid with hairline dividers (steps, benefits). */
.dl-cells { overflow: hidden; border-top: 2px solid var(--ink); }
.dl-cells__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: -1px 0 0 -31px; }
.dl-cell { padding: 24px 24px 26px 30px; border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.dl-cell__num { font-family: var(--font-sans); font-stretch: 125%; font-weight: 800; font-size: 60px; line-height: 0.85; letter-spacing: -0.05em; color: var(--red); }
.dl-cell__num--sm { font-size: 40px; line-height: 0.9; }
.dl-cell__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.dl-cell h3 { margin: 16px 0 9px; }
.dl-cell p { font-size: 15px; line-height: 1.6; color: var(--mute); }

/* Stat strip (big numbers). */
.dl-stat { padding: 26px 16px 26px 30px; border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.dl-stat__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); margin-bottom: 10px; }
.dl-stat__value { font-family: var(--font-sans); font-stretch: 125%; font-weight: 700; letter-spacing: -0.045em; font-size: clamp(34px, 4.2vw, 52px); white-space: nowrap; line-height: 1; color: var(--blue); }
.dl-stat__value--red { color: var(--red); }
.dl-stat__value--ink { color: var(--ink); }
.dl-stat__value--sm { font-size: clamp(26px, 3vw, 36px); }

/* Numbered list rows (ordered content, TOCs). */
.dl-list { list-style: none; margin: 4px 0 20px; padding: 0; border-top: 1px solid var(--ink); }
.dl-list > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--body); }
.dl-list > li:last-child { border-bottom-color: var(--ink); }
.dl-list__num { font-family: var(--font-mono); font-size: 11px; color: var(--red); padding-top: 4px; }
.dl-list--serif > li { font-family: var(--font-serif); font-size: 18px; }
.dl-list--dots > li { grid-template-columns: 22px minmax(0, 1fr); font-size: 15px; padding: 10px 0; }
.dl-list--dots .dl-list__dot { width: 10px; height: 10px; border: 2px solid var(--blue); border-radius: 50%; margin-top: 5px; }

.dl-toc { border-top: 3px solid var(--ink); padding-top: 14px; }
.dl-toc__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.dl-toc__list { max-height: calc(100vh - 260px); overflow-y: auto; }
/* Row layout is for list entries (marker span + label span) only; a plain
   link elsewhere in the block, such as an email address, stays inline. */
.dl-toc__list a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.35; color: var(--ink); }
.dl-toc__list a:hover { color: var(--red); }
.dl-toc__list a > span:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--red); }

/* Footnotes. */
.dl-notes { border-top: 2px solid var(--ink); padding: 14px 0 44px; }
.dl-notes__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--meta); margin-bottom: 6px; }
.dl-notes ol { list-style: none; margin: 0; padding: 0; font-family: var(--font-serif); font-size: 12px; line-height: 1.5; color: var(--mute); max-width: 820px; text-wrap: pretty; }
.dl-notes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; padding: 8px 0; border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.dl-notes li > span:first-child { font-family: var(--font-mono); font-size: 10px; color: var(--red); padding-top: 2px; }
.dl-notes li > div { display: flex; flex-direction: column; gap: 6px; }
.dl-notes a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.dl-notes strong { color: var(--ink); }

/* -------------------------------------------------------------------------
   7. Panels, callouts, forms, steppers (app surfaces)
   ------------------------------------------------------------------------- */
.dl-panel { background: var(--card); border: 1px solid var(--rule); }
.dl-panel--ink { border: 2px solid var(--ink); }
.dl-panel__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 10px 22px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.dl-panel__body { padding: 18px 22px; }
.dl-panel__row { padding: 14px 22px; border-top: 1px solid var(--rule); }
.dl-panel__row:first-child { border-top: 0; }
.dl-panel__foot { padding: 14px 22px; border-top: 1px solid var(--ink); background: var(--paper); }

.dl-callout { background: var(--callout); color: var(--on-callout); padding: clamp(22px, 4vw, 30px) clamp(20px, 4vw, 32px); }
.dl-callout .dl-kicker { color: var(--callout-meta); margin-bottom: 14px; }
.dl-callout p { font-family: var(--font-serif); font-size: 21px; line-height: 1.4; }
.dl-callout a { color: inherit; border-bottom: 1px solid currentColor; }
.dl-callout--ink { background: var(--ink); color: var(--paper); }
.dl-callout--ink .dl-kicker { color: var(--faint); }
.dl-callout--tint { background: var(--tint); color: var(--ink); border-left: 3px solid var(--ink); }
.dl-callout--tint .dl-kicker { color: var(--red); }
.dl-callout--tint p { font-size: 16px; line-height: 1.55; color: var(--body); font-family: var(--font-sans); }
.dl-callout--red { background: var(--tint); color: var(--ink); border-left: 3px solid var(--red); }
.dl-callout--red .dl-kicker { color: var(--red); }
.dl-callout--red p { font-size: 16px; line-height: 1.55; color: var(--body); font-family: var(--font-sans); }

/* Legal emphasis block (caps paragraphs in terms). */
.dl-caps { font-family: var(--font-sans); font-stretch: 100%; font-size: 14px; line-height: 1.6; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); background: var(--tint); padding: 14px 16px; margin: 4px 0 14px; }

.dl-field { display: block; margin-bottom: 20px; }
.dl-field > span, .dl-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.dl-field .dl-req, .dl-label .dl-req { color: var(--red); }
.dl-input, .dl-field input:not([type="checkbox"]):not([type="radio"]), .dl-field select, .dl-field textarea {
  width: 100%;
  border: 1px solid var(--ink);
  background: var(--card);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  border-radius: 0;
}
.dl-field textarea, textarea.dl-input { font-family: var(--font-serif); font-size: 18px; line-height: 1.5; resize: vertical; }
.dl-help { font-size: 13px; line-height: 1.5; color: var(--meta); margin-top: 6px; }
.dl-error { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--red); margin-top: 6px; }
.dl-field.has-error input, .dl-field.has-error textarea, .dl-field.has-error select, .dl-input.has-error { border-color: var(--red); outline: 1px solid var(--red); }

.dl-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--body); }
.dl-check input { margin-top: 4px; width: 16px; height: 16px; flex: none; }

/* Step rail for multi-step flows (file a case, respond, consent). */
.dl-steps { display: flex; flex-wrap: wrap; gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); margin-bottom: 36px; }
.dl-step { flex: 1 1 160px; display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 12px 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); border-top: 1px solid transparent; }
.dl-step + .dl-step { padding-left: 16px; border-left: 1px solid var(--rule); }
.dl-step__num { font-family: var(--font-sans); font-stretch: 125%; font-weight: 800; font-size: 22px; letter-spacing: -0.04em; line-height: 1; color: var(--faint); }
.dl-step.is-current { color: var(--ink); }
.dl-step.is-current .dl-step__num { color: var(--red); }
.dl-step.is-done { color: var(--mute); }
.dl-step.is-done .dl-step__num { color: var(--blue); }

/* Status line (inline label : value pairs in mono). */
.dl-status { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.dl-status > span > span:first-child { color: var(--meta); margin-right: 8px; }

/* Flash / alert messages. */
.dl-alert { border-left: 3px solid var(--ink); background: var(--tint); padding: 14px 18px; font-size: 15px; line-height: 1.5; color: var(--body); margin-bottom: 20px; }
.dl-alert strong { color: var(--ink); font-weight: 600; }
.dl-alert--ok { border-left-color: var(--ok); }
.dl-alert--warn { border-left-color: var(--warn); }
.dl-alert--error { border-left-color: var(--red); }
.dl-alert--info { border-left-color: var(--blue); }

/* -------------------------------------------------------------------------
   8. Site chrome: seal, header rail, nav, footer
   ------------------------------------------------------------------------- */
.dl-seal { position: relative; width: 40px; height: 40px; flex: none; }
.dl-seal > span { position: absolute; inset: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.dl-seal__wedge { -webkit-mask-image: url("/static/images/seal/seal-wedge.png"); mask-image: url("/static/images/seal/seal-wedge.png"); background: var(--sealup); }
.dl-seal__arc { -webkit-mask-image: url("/static/images/seal/seal-arc.png"); mask-image: url("/static/images/seal/seal-arc.png"); background: var(--red); }
.dl-seal__ring { -webkit-mask-image: url("/static/images/seal/seal-ring.png"); mask-image: url("/static/images/seal/seal-ring.png"); background: var(--ink); }
.dl-seal--sm { width: 28px; height: 28px; }
.dl-seal--lg { width: 64px; height: 64px; }

.dl-wordmark { font-family: var(--font-sans); font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }

.dl-header { padding: 24px 0 3px; }
.dl-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: 0 var(--column-inset); }
.dl-header__brand { display: flex; align-items: center; gap: 12px; color: var(--ink); white-space: nowrap; }
.dl-header__brand:hover { color: var(--ink); }
/* The nav must stay overflow: visible. Any other overflow value makes it a scroll
   container that clips the user menu dropdown hanging below it; when the links do
   not fit beside the brand, the header row wraps the nav onto its own line. */
.dl-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 24px); white-space: nowrap; max-width: 100%; min-width: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.dl-nav a, .dl-nav button { color: inherit; flex: none; }
.dl-nav a:hover { color: var(--red); }
.dl-nav__btn { border: 1px solid var(--ink); padding: 8px 13px; line-height: 1; }
.dl-nav__btn:hover { background: var(--ink); color: var(--paper) !important; }
.dl-nav__btn--fill { background: var(--blue); border-color: var(--blue); color: var(--on-blue) !important; }
.dl-nav__btn--fill:hover { background: var(--ink); border-color: var(--ink); }

/* Mobile: a menu button in the header row; the primary links stack beneath the row when it is open. */
.dl-burger { width: 32px; height: 32px; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; background: var(--card); color: var(--ink); cursor: pointer; padding: 0; flex: none; }
.dl-burger:hover, .dl-burger[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.dl-burger svg { width: 18px; height: 18px; }
.dl-mobile-menu { display: flex; flex-direction: column; margin: 14px var(--gutter) 0; border-top: 1px solid var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.dl-mobile-menu a { display: block; padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.dl-mobile-menu a:hover { color: var(--red); }
@media (min-width: 768px) { .dl-burger, .dl-mobile-menu { display: none; } }
.dl-rail { display: block; overflow: hidden; color: var(--ink); margin-top: 14px; }
.dl-rail > g { transform: translateX(clamp(-26px, calc(5vw - 44px), 0px)); }

/* User menu (authenticated). */
.dl-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: var(--card); border: 1px solid var(--ink); z-index: 60; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; text-transform: none; white-space: normal; }
.dl-menu__id { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.dl-menu__id p:first-child { font-weight: 600; color: var(--ink); }
.dl-menu__id p + p { color: var(--meta); font-size: 13px; overflow-wrap: anywhere; }
.dl-menu a, .dl-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; text-align: left; color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; }
.dl-menu a:hover, .dl-menu button:hover { background: var(--tint); color: var(--red); }
.dl-avatar { width: 32px; height: 32px; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; background: var(--card); color: var(--ink); cursor: pointer; }
.dl-avatar:hover { background: var(--ink); color: var(--paper); }
.dl-avatar svg { width: 18px; height: 18px; }

.dl-footer { margin-top: 48px; }
.dl-footer__links { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 18px var(--column-inset); border-top: 1px solid var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.dl-footer__links a, .dl-footer__links button { color: var(--ink); background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.dl-footer__links a:hover, .dl-footer__links button:hover { color: var(--red); }
.dl-footer__bar { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px var(--column-inset); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dl-footer__bar a { color: inherit; }
.dl-footer__bar a:hover { color: var(--red); }

/* Preview-mode banner. */
.dl-preview-banner { background: var(--red); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; padding: 10px var(--gutter); }

/* Cookie banner. */
.dl-cookie { position: fixed; bottom: 16px; right: 16px; z-index: 50; width: min(380px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--ink); }
.dl-cookie__body { padding: 16px 18px 14px; }
.dl-cookie__actions { display: flex; gap: 8px; padding: 0 18px 16px; }
.dl-cookie__actions .dl-btn { flex: 1; }

/* Toasts from app.js. */
.toast { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--ink); backdrop-filter: none !important; font-family: var(--font-sans); }
.toast-success { background-color: var(--ink) !important; color: var(--paper) !important; border-left: 4px solid var(--ok) !important; }
.toast-error { background-color: var(--ink) !important; color: var(--paper) !important; border-left: 4px solid var(--red) !important; }
.toast-warning { background-color: var(--ink) !important; color: var(--paper) !important; border-left: 4px solid var(--warn) !important; }
.toast-info { background-color: var(--ink) !important; color: var(--paper) !important; border-left: 4px solid var(--blue) !important; }

/* Print: paper is white, chrome goes away. */
@media print {
  :root { --paper: #fff; --card: #fff; }
  .dl-header, .dl-footer, .dl-cookie, .dl-rail { display: none !important; }
}

/* -------------------------------------------------------------------------
   9. Tailwind re-skin for templates not yet rewritten for this system.
      `html .class` outranks the Tailwind CDN's runtime `.class` rules.
   ------------------------------------------------------------------------- */
/* Shape: square corners, no shadows (a hairline keeps panels legible on paper). */
html .rounded, html .rounded-sm, html .rounded-md, html .rounded-lg, html .rounded-xl, html .rounded-2xl, html .rounded-3xl,
html .rounded-t-lg, html .rounded-b-lg, html .rounded-l-lg, html .rounded-r-lg, html .rounded-t-md, html .rounded-b-md, html .rounded-t-xl, html .rounded-b-xl { border-radius: 0; }
html .shadow-sm, html .shadow, html .shadow-md, html .shadow-lg, html .shadow-xl, html .shadow-2xl, html .hover\:shadow-md:hover, html .hover\:shadow-lg:hover, html .hover\:shadow-xl:hover { box-shadow: 0 0 0 1px var(--rule); }
html .ring-1, html .ring-black { --tw-ring-color: var(--rule); }
html .hover\:-translate-y-0\.5:hover, html .hover\:scale-105:hover { transform: none; }

/* Surfaces. */
html .bg-white { background-color: var(--card); }
html .bg-gray-50, html .bg-slate-50 { background-color: var(--paper); }
html .bg-gray-100, html .bg-slate-100, html .bg-blue-50, html .bg-blue-100, html .bg-indigo-50, html .bg-purple-50, html .bg-purple-100, html .bg-green-50, html .bg-green-100, html .bg-red-50, html .bg-red-100, html .bg-yellow-50, html .bg-yellow-100, html .bg-orange-50, html .bg-orange-100, html .bg-amber-50, html .bg-amber-100, html .bg-emerald-50, html .bg-emerald-100 { background-color: var(--tint); }
html .bg-gray-200, html .bg-gray-300 { background-color: var(--rule); }
html .bg-gray-800, html .bg-gray-900, html .bg-slate-800, html .bg-slate-900, html .bg-black { background-color: var(--ink); }
html .hover\:bg-gray-50:hover, html .hover\:bg-gray-100:hover, html .hover\:bg-blue-50:hover, html .hover\:bg-gray-200:hover, html .hover\:bg-yellow-50:hover { background-color: var(--tint); }
html .divide-gray-200 > :not([hidden]) ~ :not([hidden]), html .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html .divide-yellow-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--rule); }
html .bg-gradient-to-br, html .bg-gradient-to-b, html .bg-gradient-to-r, html .bg-gradient-to-tr { background-image: none; background-color: var(--paper); }
html .bg-gradient-to-br.text-white, html .bg-gradient-to-r.text-white { background-color: var(--ink); }

/* Primary actions: red; every other filled button: blue (hover: ink). */
html .bg-blue-600, html .bg-blue-500, html .bg-indigo-600, html .bg-green-600, html .bg-green-500, html .bg-emerald-600 { background-color: var(--red); color: #fff; }
html .hover\:bg-blue-700:hover, html .hover\:bg-blue-600:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-green-700:hover, html .hover\:bg-green-600:hover, html .hover\:bg-emerald-700:hover { background-color: var(--red-deep); color: #fff; }
html .bg-blue-700, html .bg-purple-600, html .bg-purple-500, html .bg-yellow-500, html .bg-yellow-600, html .bg-orange-500, html .bg-orange-600, html .bg-amber-500 { background-color: var(--blue); color: var(--on-blue); }
html .hover\:bg-purple-700:hover, html .hover\:bg-yellow-600:hover, html .hover\:bg-yellow-700:hover, html .hover\:bg-orange-600:hover, html .hover\:bg-blue-800:hover { background-color: var(--ink); color: var(--paper); }
html .bg-red-600, html .bg-red-500 { background-color: var(--ink); color: var(--paper); }
html .hover\:bg-red-700:hover, html .hover\:bg-red-600:hover { background-color: var(--red); color: #fff; }
html .bg-gray-600, html .bg-gray-700 { background-color: var(--blue); color: var(--on-blue); }
html .hover\:bg-gray-700:hover, html .hover\:bg-gray-800:hover { background-color: var(--ink); color: var(--paper); }
html .bg-blue-600.text-blue-600, html .bg-white.text-blue-600 { color: var(--blue); }
html .text-white { color: #fff; }
html [class*="bg-gradient"] .text-blue-100, html [class*="bg-gradient"] .text-blue-200 { color: var(--faint); }

/* Text. */
html .text-gray-900, html .text-gray-800, html .text-slate-900, html .text-black { color: var(--ink); }
html .text-gray-700, html .text-gray-600, html .text-slate-700, html .text-slate-600 { color: var(--body); }
html .text-gray-500, html .text-slate-500 { color: var(--meta); }
html .text-gray-400, html .text-gray-300, html .text-slate-400 { color: var(--faint); }
html .text-blue-600, html .text-blue-700, html .text-blue-800, html .text-blue-500, html .text-indigo-600, html .text-purple-600, html .text-purple-700, html .text-purple-800 { color: var(--blue); }
html .hover\:text-blue-600:hover, html .hover\:text-blue-700:hover, html .hover\:text-blue-800:hover, html .hover\:text-blue-500:hover, html .hover\:text-gray-900:hover, html .hover\:text-gray-700:hover { color: var(--red); }
html .text-yellow-800, html .text-yellow-900, html .text-yellow-700, html .text-orange-600, html .text-orange-700, html .text-orange-800, html .text-amber-700, html .text-amber-800 { color: var(--warn); }
html .text-green-600, html .text-green-700, html .text-green-800, html .text-emerald-700 { color: var(--ok); }
html .text-red-600, html .text-red-700, html .text-red-800, html .text-red-500 { color: var(--red); }
html .placeholder-gray-400::placeholder, html .placeholder-gray-500::placeholder { color: var(--faint); }

/* Borders and rings. */
html .border-gray-100, html .border-gray-200, html .border-gray-300, html .border-slate-200, html .border-slate-300, html .border-yellow-200, html .border-blue-100, html .border-blue-200, html .border-green-200, html .border-red-200, html .border-purple-200 { border-color: var(--rule); }
html .border-blue-500, html .border-blue-600, html .border-gray-900, html .border-black, html .border-indigo-500 { border-color: var(--ink); }
html .border-yellow-400, html .border-yellow-500, html .border-orange-400, html .border-orange-500 { border-color: var(--warn); }
html .border-red-400, html .border-red-500, html .border-red-600 { border-color: var(--red); }
html .border-green-400, html .border-green-500 { border-color: var(--ok); }
html .border-purple-500 { border-color: var(--blue); }
html .hover\:border-blue-500:hover, html .hover\:border-gray-400:hover, html .hover\:border-gray-300:hover { border-color: var(--ink); }
html .focus\:ring-blue-500:focus, html .focus\:ring-indigo-500:focus, html .focus\:ring-green-500:focus { --tw-ring-color: var(--ink); }
html .focus\:border-blue-500:focus, html .focus\:border-indigo-500:focus { border-color: var(--ink); }
html .ring-offset-2 { --tw-ring-offset-color: var(--paper); }

/* Pills and badges: keep hue, lose the pastel. */
html .rounded-full.bg-blue-100, html .rounded-full.bg-green-100, html .rounded-full.bg-red-100, html .rounded-full.bg-yellow-100, html .rounded-full.bg-purple-100, html .rounded-full.bg-gray-100, html .rounded-full.bg-orange-100 { border-radius: 0; border: 1px solid currentColor; background-color: transparent; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Typography utilities. */
html .font-mono { font-family: var(--font-mono); }
html .font-serif { font-family: var(--font-serif); }
html .font-sans { font-family: var(--font-sans); }
html .tracking-tight { letter-spacing: -0.03em; }

/* Form controls styled by Tailwind classes. */
html input.border-gray-300, html select.border-gray-300, html textarea.border-gray-300, html input.border-gray-200, html textarea.border-gray-200, html select.border-gray-200, html .form-input, html .form-select, html .form-textarea { border-color: var(--ink); background-color: var(--card); }

/* Legacy marketing decorations. */
html .hero-gradient { background: var(--ink); }
html .animate-pulse.bg-blue-200, html .animate-pulse.bg-purple-200, html .blur-3xl { display: none; }
html .mix-blend-multiply { display: none; }
html .network-bg { display: none; }

/* Partner / backer logo strip: monochrome ink. */
.dl-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; padding: 18px 0 22px; border-bottom: 1px solid var(--rule); }
.dl-logos img { height: 26px; width: auto; filter: grayscale(1); opacity: .85; }
.dl-logos a:hover img { opacity: 1; }

/* B: filing flows */
/* Drop zone: resting state is a dashed ink hairline on tint. The Tailwind
   classes the upload scripts toggle (border-blue-400/500 while dragging,
   border-green-400 once files are chosen) recolour the border. */
html .dl-dropzone { border: 1px dashed var(--ink); background: var(--tint); padding: 26px 20px; text-align: center; transition: border-color .15s, background-color .15s; }
html .dl-dropzone:hover { background: var(--card); }
html .dl-dropzone.border-blue-400, html .dl-dropzone.border-blue-500 { border-color: var(--blue); background: var(--card); }
html .dl-dropzone.border-green-400 { border-color: var(--ok); border-style: solid; }
.dl-dropzone__label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.dl-dropzone__label:hover { color: var(--red); }
.dl-dropzone__hint { font-size: 13px; color: var(--meta); margin-top: 6px; }
html .dl-filelist > div { background: var(--card); border: 1px solid var(--rule); }
/* Scrollable terms text inside a dl-panel. */
.dl-scroll { max-height: 24rem; overflow-y: auto; padding: 18px 22px; }

/* A1: company pages */
/* Small monochrome logo set inline with text (about page investors). */
.dl-logo-inline { height: 20px; width: auto; filter: grayscale(1); opacity: .85; vertical-align: middle; }
/* Numbered legal section header (terms): big red numeral + small title. */
.dl-legal-head { display: flex; align-items: baseline; gap: 18px; border-top: 1px solid var(--ink); padding-top: 16px; margin: 44px 0 14px; scroll-margin-top: 60px; }
.dl-page__body > section:first-child > .dl-legal-head { margin-top: 0; }
.dl-legal-num { font-family: var(--font-sans); font-stretch: 125%; font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.04em; color: var(--red); flex: none; min-width: 40px; }
/* Person block name (about page founders). */
.dl-person-name { font-family: var(--font-sans); font-stretch: 125%; font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }

/* -------------------------------------------------------------------------
   C: logged-in
   Dashboard, case pages, account pages and OAuth consent.
   ------------------------------------------------------------------------- */
.dl-ok { color: var(--ok); }
.dl-warn { color: var(--warn); }

/* Stat strip wrapper: hides the first cell's left hairline. */
.dl-stats { overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.dl-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin: -1px 0 0 -1px; }
.dl-stats .dl-stat { padding: 18px 16px 18px 20px; display: block; }
a.dl-stat:hover .dl-stat__label { color: var(--red); }

/* Tabs (dashboard). Alpine toggles Tailwind border/text classes on the
   active tab; they are re-skinned here. */
.dl-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--ink); margin-bottom: 20px; overflow-x: auto; }
.dl-tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); padding: 0 2px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
html .dl-tab.border-blue-500 { border-color: var(--red); color: var(--ink); }
html .dl-tab.text-gray-500 { color: var(--meta); }
html .dl-tab.text-gray-500:hover { color: var(--ink); }
.dl-tab .dl-tag { padding: 4px 7px; }

/* Docket header on case pages. */
.dl-docket { padding: 0 0 22px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.dl-docket__line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.dl-docket .dl-status { margin-top: 14px; }
.dl-docket .dl-lede { margin-top: 12px; font-size: 19px; }
.dl-id { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: none; color: var(--meta); overflow-wrap: anywhere; }

/* Parties block (claimant / respondent), as on the home page award card. */
.dl-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin: 0 0 8px; }
.dl-party { padding: 16px 22px 16px 0; min-width: 0; }
.dl-party + .dl-party { border-left: 1px solid var(--rule); padding-left: 22px; }
@media (max-width: 599px) { .dl-party + .dl-party { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } }
.dl-party__name { font-family: var(--font-serif); font-size: 16px; line-height: 1.45; color: var(--ink); margin-top: 6px; }
.dl-party__name strong { font-weight: 600; }
.dl-party__meta { font-size: 13px; line-height: 1.5; color: var(--meta); margin-top: 4px; }

/* Long-form answers (claims, arguments) in Newsreader, keeping newlines. */
.dl-answer { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.dl-answer--sm { font-size: 15px; }
.dl-money { font-family: var(--font-sans); font-stretch: 125%; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--blue); line-height: 1.1; }

/* A labelled value inside a section: mono label over the value. */
.dl-item { margin-bottom: 18px; }
.dl-item:last-child { margin-bottom: 0; }
.dl-item__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); margin-bottom: 6px; }

/* Document rows with a download button. */
.dl-docs { border-top: 1px solid var(--ink); margin-top: 4px; }
.dl-doc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink); min-width: 0; }
.dl-doc__name { min-width: 0; overflow-wrap: anywhere; }
.dl-doc .dl-btn { flex: none; }

/* Upload drop zones. Page scripts toggle border-blue-400 / border-blue-500 /
   bg-blue-50 while a file is dragged over them. */
.dl-dropzone { border: 1px dashed var(--ink); background: var(--card); padding: 26px 20px; text-align: center; transition: background-color .15s, border-color .15s; }
.dl-dropzone:hover { background: var(--tint); }
.dl-dropzone__icon { width: 36px; height: 36px; margin: 0 auto 8px; color: var(--faint); }
.dl-dropzone__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.dl-dropzone__hint { font-size: 12px; color: var(--meta); margin-top: 6px; }
html .dl-dropzone.border-blue-400, html .dl-dropzone.border-blue-500, html .dl-dropzone.bg-blue-50 { border-color: var(--blue); border-style: solid; background-color: var(--tint); }

/* Saved-file rows rendered by the server (deletable). */
.dl-filerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--rule); background: var(--card); margin-bottom: 6px; font-size: 14px; }
.dl-filerow__name { min-width: 0; overflow-wrap: anywhere; }
.dl-filerow button { color: var(--red); background: none; border: 0; cursor: pointer; flex: none; padding: 2px; }
.dl-filerow button:hover { color: var(--ink); }

/* Buttons whose Alpine :class toggles Tailwind colours while busy. */
html .dl-btn.bg-blue-400, html .dl-btn.bg-gray-400 { opacity: .6; cursor: not-allowed; }
html .dl-btn.bg-blue-400 { background-color: var(--red); border-color: var(--red); color: #fff; }
html .dl-btn.bg-gray-400 { background-color: var(--blue); border-color: var(--blue); color: var(--on-blue); }
html .dl-btn.bg-gray-300 { background-color: var(--tint); border-color: var(--rule); color: var(--meta); }

/* Modal (postponement request, forgot password). */
/* Shared modal: scrim on the container, a transparent backdrop child keeps click-to-close working, box centred. */
.dl-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.dl-modal__backdrop { position: absolute; inset: 0; background: transparent; }
.dl-modal__box { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card); border: 2px solid var(--ink); padding: 24px 24px 22px; }

/* Narrow account column (log in, register, reset, log out). */
.dl-account { max-width: 440px; margin: 0 auto; padding: 48px 0 64px; }
.dl-account .dl-kicker { margin-bottom: 14px; }
.dl-account .dl-display { margin-bottom: 10px; }
.dl-account__intro { font-size: 15px; line-height: 1.55; color: var(--mute); margin-bottom: 28px; }
.dl-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.dl-divider::before, .dl-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.dl-eye { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 12px; background: none; border: 0; color: var(--faint); cursor: pointer; }
.dl-eye:hover { color: var(--ink); }
.dl-eye svg { width: 18px; height: 18px; }
.dl-spinner { width: 28px; height: 28px; border: 2px solid var(--rule); border-top-color: var(--red); border-radius: 50%; animation: dl-spin .8s linear infinite; margin: 0 auto; }
@keyframes dl-spin { to { transform: rotate(360deg); } }

/* Settings / profile list rows. */
.dl-rows { border-top: 2px solid var(--ink); }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink); flex-wrap: wrap; }
a.dl-row:hover .dl-row__title { color: var(--red); }
.dl-row__title { font-family: var(--font-sans); font-stretch: 112%; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.dl-row__text { font-size: 14px; line-height: 1.5; color: var(--mute); margin-top: 3px; }
.dl-row__actions { flex: none; display: flex; gap: 8px; }

/* OAuth consent panel. */
.dl-consent { max-width: 520px; margin: 0 auto; padding: 56px 0 64px; }
.dl-consent .dl-list > li { font-size: 15px; }

/* A2: clause, API, newsroom */
/* Clause block: a copyable clause on the arbitration-clause and insert-clause pages. */
.dl-clause { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 16px 0 22px; margin: 18px 0 8px; }
.dl-clause__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.dl-clause__text { background: var(--card); border: 1px solid var(--rule); padding: 22px 24px; font-family: var(--font-serif); font-size: 18px; line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.dl-clause__text p + p { margin-top: 16px; }
.dl-clause__text a { color: var(--link); border-bottom: 1px solid var(--link); overflow-wrap: anywhere; }
.dl-clause__text a:hover { color: var(--red); border-bottom-color: var(--red); }
.dl-clause__text strong { font-weight: 600; }
.dl-clause__text--sm { font-size: 16px; line-height: 1.6; padding: 18px 20px; }

/* Modal (opt-out address prompt on the clause pages). */
/* .dl-modal, .dl-modal__backdrop and .dl-modal__box are defined once, in the shared modal block above. */

/* Standalone code block outside dl-prose (API guides, playgrounds). */
pre.dl-code { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; padding: 20px 22px; overflow: auto; margin: 0; }
pre.dl-code code { background: none; padding: 0; color: inherit; font-family: inherit; }
.dl-cell code, .dl-kv code, .dl-datatable code, .dl-table code, .dl-body code, .dl-list code, .dl-callout code, .dl-alert code { font-family: var(--font-mono); font-size: 0.85em; background: var(--tint); padding: 1px 5px; }
.dl-callout--tint code, .dl-callout--red code, .dl-alert code { background: var(--card); border: 1px solid var(--rule); }

/* Newsroom: rule rows (date / category / title) and the ink thumbnail. */
.dl-newsrow { display: grid; grid-template-columns: 150px 130px minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); color: var(--ink); }
.dl-newsrow:hover { color: var(--red); }
.dl-newsrow__title { font-family: var(--font-sans); font-stretch: 112%; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.dl-newsrows__head { display: grid; grid-template-columns: 150px 130px minmax(0, 1fr); gap: 6px 24px; padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
@media (max-width: 640px) {
  .dl-newsrow, .dl-newsrows__head { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dl-newsrows__head > span + span { display: none; }
}
.dl-thumb { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--ink); color: var(--paper); display: flex; align-items: flex-end; padding: clamp(16px, 4vw, 32px); }
.dl-thumb__brand { display: flex; align-items: center; gap: 12px; }
.dl-thumb .dl-seal__ring { background: var(--paper); }
.dl-thumb .dl-wordmark { color: inherit; }
.newsroom-body h2 { font-size: 24px; font-weight: 700; font-stretch: 125%; letter-spacing: -0.03em; line-height: 1.1; margin: 36px 0 14px; }
.newsroom-body p + p { margin-top: 18px; }

/* -------------------------------------------------------------------------
   D: admin
   Working screens (admin lists and record pages, waitlist, metrics): sub-nav,
   filters, row lists, pagers, record tables, code blocks.
   ------------------------------------------------------------------------- */
.dl-faint { color: var(--faint); }

/* Admin sub-navigation: a mono row of links under the page header. */
.dl-adminnav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.dl-adminnav a { color: inherit; }
.dl-adminnav a:hover, .dl-adminnav a[aria-current="page"] { color: var(--red); }

/* Filter row: inline fields with the buttons at the end. */
.dl-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 24px 0; }
.dl-filters .dl-field { margin-bottom: 0; flex: 1 1 220px; }
.dl-filters .dl-field--narrow { flex: 0 1 240px; }
.dl-filters__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-filters .dl-btn { padding-top: 15px; padding-bottom: 15px; }

/* Inline count: a label over a figure, beside the filters. */
.dl-count { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; border-left: 2px solid var(--ink); }
.dl-count__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.dl-count__value { font-family: var(--font-sans); font-stretch: 125%; font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.04em; color: var(--blue); }
.dl-count__value small { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; color: var(--meta); }

/* Row lists: linked rows between rules. */
.dl-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.dl-rows > li { border-top: 1px solid var(--rule); }
.dl-rows > li:first-child { border-top: 0; }
.dl-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 28px; padding: 15px 0; color: var(--ink); }
a.dl-row:hover { color: var(--red); }
.dl-row__main { flex: 1 1 320px; min-width: 0; }
.dl-row__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.dl-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dl-row__id { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.dl-row__meta { font-size: 13px; line-height: 1.45; color: var(--meta); margin-top: 4px; overflow-wrap: anywhere; }
.dl-row__status { font-family: var(--font-sans); font-stretch: 112%; font-weight: 600; font-size: 14px; color: var(--ink); }
.dl-row__sub { padding: 0 0 15px; }
.dl-row__sub p { font-size: 14px; line-height: 1.5; }
.case-row { cursor: pointer; }
.case-row:hover { background: var(--tint); }
.case-row.selected { background: var(--tint); border-left: 4px solid var(--red); padding-left: 12px; }

/* Pager. */
.dl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 22px; }
.dl-pager__summary { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); }
.dl-pager__summary strong { color: var(--ink); font-weight: 500; }
.dl-pager__links { display: flex; flex-wrap: wrap; gap: 4px; }
.dl-pager__links a, .dl-pager__links span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 9px 11px; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--ink); }
.dl-pager__links a:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.dl-pager__links [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dl-pager__links .is-disabled { color: var(--faint); cursor: not-allowed; }

/* Empty state. */
.dl-empty { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 44px 16px; text-align: center; }
.dl-empty__title { font-family: var(--font-sans); font-stretch: 112%; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.dl-empty p { font-size: 14px; line-height: 1.5; color: var(--meta); margin-top: 6px; }

/* Code, preformatted blocks and figures on record pages. */
code.dl-code { font-family: var(--font-mono); font-size: 12.5px; background: var(--tint); color: var(--ink); padding: 2px 6px; overflow-wrap: anywhere; }
.dl-pre { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; background: var(--tint); color: var(--ink); padding: 14px 16px; margin: 0; max-height: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-figure { font-family: var(--font-sans); font-stretch: 112%; font-weight: 600; letter-spacing: -0.02em; color: var(--blue); white-space: nowrap; }

/* Linked feature cells (admin dashboards). */
a.dl-cell { display: block; color: var(--ink); }
a.dl-cell:hover { background: var(--tint); }
a.dl-cell:hover h3 { color: var(--red); }

/* Data tables: row headers, numeric cells and label/value field tables. */
.dl-datatable tbody th { padding: 13px 12px 13px 0; border-top: 1px solid var(--rule); vertical-align: top; text-align: left; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.dl-datatable tbody tr:first-child th { border-top: 0; }
.dl-datatable tbody tr:hover th { background: var(--tint); }
.dl-datatable th.is-num, .dl-datatable td.is-num { text-align: right; }
.dl-datatable .dl-tag { vertical-align: middle; }
.dl-datatable--fields tbody tr { border-top: 1px solid var(--rule); }
.dl-datatable--fields tbody tr:first-child { border-top: 0; }
.dl-datatable--fields tbody th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); font-weight: 500; border-top: 0; padding: 11px 12px 2px 0; }
.dl-datatable--fields tbody td { border-top: 0; padding: 2px 12px 11px 0; color: var(--ink); }
.dl-datatable--fields tbody td + th, .dl-datatable--fields tbody tr:first-child td + th { border-top: 1px solid var(--rule); }
.dl-datatable--fields tbody tr:hover th, .dl-datatable--fields tbody tr:hover td { background: transparent; }
@media (min-width: 768px) {
  .dl-datatable--fields tbody th, .dl-datatable--fields tbody td { padding: 11px 12px 11px 0; }
  .dl-datatable--fields tbody td + th, .dl-datatable--fields tbody tr:first-child td + th { border-top: 0; }
}

/* Endpoints directory. */
.dl-endpoints { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink); }
.dl-endpoint { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--rule); align-items: start; }
.dl-endpoint__methods { display: flex; flex-wrap: wrap; gap: 4px; }
.dl-endpoint p { font-size: 14px; line-height: 1.5; color: var(--mute); margin-top: 5px; }
@media (max-width: 600px) { .dl-endpoint { grid-template-columns: minmax(0, 1fr); } }
.dl-tag.bg-blue-100, .dl-tag.bg-green-100 { background-color: transparent; }

/* Preview index: stage rows and their variants. */
.dl-variants { margin-top: 10px; border-top: 1px solid var(--rule); }
.dl-variant { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 20px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dl-variant:last-child { border-bottom: 0; }

/* Postponement requests: stacked between rules. */
.dl-request { padding: 22px 0; border-top: 1px solid var(--rule); }
.dl-request:first-child { border-top: 0; }
.dl-request__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.dl-request__lines { font-size: 14px; line-height: 1.6; color: var(--body); }
.dl-request__lines strong { color: var(--ink); font-weight: 600; }
.dl-request__reason { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--tint); border-left: 3px solid var(--ink); padding: 12px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Numbered list rows with a wider marker column ("(iii)", "(vi)"). */
.dl-list--wide > li { grid-template-columns: 48px minmax(0, 1fr); }

/* -------------------------------------------------------------------------
   E: simulator
   /simulate, /simulate/samples, simulation detail / shared / history /
   results and the direct-upload overlay.
   ------------------------------------------------------------------------- */
.dl-sim { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 40px 0 64px; }
.dl-sim--narrow { max-width: 760px; }
/* Decision-document title, sized so "Simulation #<id>" stays on one line from
   iPad widths up when it has the full row (test_simulation_detail_layout.py). */
/* The case id is one unbreakable token; let it wrap inside itself only when it cannot fit (phones). */
.dl-sim-title { font-size: clamp(24px, 3.1vw, 38px); line-height: 1.04; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.dl-section-sub { font-size: 15px; line-height: 1.5; color: var(--mute); margin: -8px 0 20px; }
.dl-tab.is-current { border-bottom-color: var(--red); color: var(--ink); }
.dl-stats .dl-stat.is-active { background: var(--tint); }
.dl-stats .dl-stat.is-active .dl-stat__label { color: var(--red); }
.dl-btn.hidden { display: none; }

/* Raw decision text, set as a document rather than a code block. */
.dl-award { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-serif); font-size: 17px; line-height: 1.62; color: var(--body); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 20px 0 24px; }
.dl-award-text pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-serif); font-size: 17px; line-height: 1.62; color: var(--body); background: transparent; padding: 20px 0 24px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }

/* Sample award card (/simulate#sample-decision): numbered parts and citations. */
.dl-award-part { padding: 16px 22px 18px; border-top: 1px solid var(--rule); }
.dl-award-part > .dl-kicker { display: block; margin-bottom: 10px; }
.dl-award-part p { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink); }
.dl-award-part p + p, .dl-award-item + .dl-award-item { margin-top: 10px; }
.dl-award-part strong { font-weight: 600; }
.dl-award-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
.dl-award-item > span:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--red); padding-top: 4px; }
.dl-award-cites { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 5px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--mute); }
.dl-award-cites > span > span:first-child { color: var(--red); margin-right: 8px; }

/* Sample case gallery (/simulate/samples). */
.dl-samples { overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.dl-samples__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: -1px 0 0 -1px; }
.dl-sample { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 22px 24px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); text-align: left; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s; min-width: 0; }
.dl-sample:hover { background: var(--tint); }
.dl-sample:hover h3 { color: var(--red); }
.dl-sample p { font-size: 15px; line-height: 1.55; color: var(--mute); }
.dl-sample__costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: auto; }
.dl-sample__costs > div > span:first-child { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-bottom: 4px; white-space: nowrap; }
.dl-sample__costs > div > span:last-child { font-family: var(--font-sans); font-stretch: 125%; font-weight: 700; font-size: 18px; letter-spacing: -0.03em; color: var(--mute); white-space: nowrap; }
.dl-sample__costs > div:first-child > span:last-child { color: var(--blue); }
.dl-sample__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-sample--blank { align-items: center; justify-content: center; text-align: center; border-left-style: dashed; border-top-style: dashed; min-height: 220px; width: 100%; position: relative; }
/* The last row can stop short of the right edge. Carry the blank card's top
   rule across the empty cells, so the cards above them are closed off too. */
.dl-sample--blank::after { content: ""; position: absolute; top: -1px; left: 100%; width: 100vw; border-top: 1px dashed var(--ink); pointer-events: none; }
.dl-sample__plus { width: 40px; height: 40px; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.dl-sample--blank:hover .dl-sample__plus { background: var(--ink); color: var(--paper); }

/* Small inline spinner beside status text (markup also carries animate-spin). */
.dl-spin { width: 16px; height: 16px; flex: none; border: 2px solid var(--rule); border-top-color: var(--ink); border-radius: 50%; animation: dl-spin .8s linear infinite; }

/* Centred modal scrim; the simulator scripts toggle `hidden` on it. */
.dl-sim-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: rgba(0, 0, 0, .55); }
.dl-sim-modal.hidden { display: none; }
.dl-sim-modal__box { width: 100%; max-width: 520px; margin: auto; background: var(--card); }

/* Progress track (upload overlays). */
.dl-progress { height: 8px; border: 1px solid var(--ink); background: var(--paper); }
.dl-progress > div { height: 100%; background: var(--ink); }

/* copyShareUrl() swaps bg-purple-600 for bg-green-600 on the Copy button. */
.dl-btn.bg-purple-600 { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.dl-btn.bg-green-600 { background: var(--ok); border-color: var(--ok); color: #fff; }

/* Checkbox switch (public-link toggle). */
.dl-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.dl-toggle__track { position: relative; width: 34px; height: 18px; border: 1px solid var(--ink); border-radius: 9px; background: var(--card); transition: background-color .15s; }
.dl-toggle__knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: left .2s, background-color .15s; }
.dl-toggle input:checked + .dl-toggle__track { background: var(--ink); }
.dl-toggle input:checked + .dl-toggle__track .dl-toggle__knob { left: 18px; background: var(--paper); }
.dl-toggle input:focus-visible + .dl-toggle__track { outline: 2px solid var(--ink); outline-offset: 2px; }
.dl-toggle input:disabled + .dl-toggle__track { opacity: .5; }

/* Cost comparison breakdown lines inside a dl-table row. */
.dl-cost-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--mute); margin-bottom: 10px; }
.dl-cost-lines > span:nth-child(even) { color: var(--ink); text-align: right; white-space: nowrap; }
/* The cheapest channel sits on a blue block that bleeds past the table rules; the other totals are red. */
.dl-table__row--best { background: var(--blue); color: var(--on-blue); margin: 0 -18px; padding: 18px 18px 20px; border-top: 0; }
.dl-table__row--best + .dl-table__row { border-top: 0; }
.dl-table__row--best .dl-table__key, .dl-table__row--best .dl-table__cell { color: var(--on-blue); }
.dl-table__row--best .dl-kicker--meta, .dl-table__row--best .dl-cost-lines { color: var(--blue-meta); }
.dl-table__row--best .dl-cost-lines > span:nth-child(even) { color: var(--on-blue); }
.dl-table__row--best .dl-tag { background: var(--on-blue); border-color: var(--on-blue); color: var(--blue); }
.dl-table__row--best .dl-table__money { color: #fff; font-size: 30px; }
.dl-table__money--red { color: var(--red); }

/* Dashboard: buttons inside the fixed-layout case table may wrap instead of overflowing their column. */
.dashboard-table .dl-btn { white-space: normal; line-height: 1.3; text-align: center; }

/* -------------------------------------------------------------------------
   Demo walkthrough (/demo). A stage rail beside framed product screens:
   everything inside a .dl-demo-screen mirrors the product, everything
   outside it is commentary. Stages are stacked without script and shown
   one at a time once the page script adds .is-js.
   ------------------------------------------------------------------------- */
.dl-demo { padding: 32px 0 72px; }
.dl-demo__head { max-width: 820px; padding-bottom: 30px; }
.dl-demo__head .dl-lede { margin-top: 16px; }
.dl-demo__fineprint { font-size: 13px; line-height: 1.55; color: var(--meta); margin-top: 16px; max-width: 700px; }
.dl-demo__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; border-top: 2px solid var(--ink); }
.dl-demo__rail { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; background: var(--paper); margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); border-bottom: 1px solid var(--ink); }
.dl-demo__rail > nav { grid-column: 1 / -1; }
.dl-demo__case { display: none; }
.dl-demo__now { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; line-height: 1.5; text-transform: uppercase; color: var(--ink); margin: 0; }
.dl-demo__pager { display: flex; gap: 6px; }
.dl-demo__pager .dl-btn { padding: 9px 12px; }
.dl-demo__hint { display: none; }
.dl-demo:not(.is-js) .dl-demo__now, .dl-demo:not(.is-js) .dl-demo__pager { display: none; }

.dl-demo-nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dl-demo-nav__item { display: block; padding: 6px 0 8px; border-bottom: 3px solid var(--rule); color: var(--meta); }
.dl-demo-nav__item:hover { color: var(--ink); }
.dl-demo-nav__num { font-family: var(--font-sans); font-stretch: 125%; font-weight: 800; font-size: 18px; letter-spacing: -0.04em; line-height: 1; color: var(--faint); }
.dl-demo-nav__text { display: none; }
.dl-demo-nav__title { display: block; font-family: var(--font-sans); font-stretch: 112%; font-weight: 600; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; }
.dl-demo-nav__who { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); margin-top: 4px; }
.dl-demo-nav__item.is-done { border-bottom-color: var(--ink); }
.dl-demo-nav__item.is-done .dl-demo-nav__num { color: var(--mute); }
.dl-demo-nav__item.is-current { color: var(--ink); border-bottom-color: var(--ink); }
.dl-demo-nav__item.is-current .dl-demo-nav__num { color: var(--ink); }
.dl-demo-nav__item.is-current[data-party="claimant"] { border-bottom-color: var(--blue); }
.dl-demo-nav__item.is-current[data-party="claimant"] .dl-demo-nav__num, .dl-demo-nav__item[data-party="claimant"] .dl-demo-nav__who { color: var(--blue); }
.dl-demo-nav__item.is-current[data-party="respondent"] { border-bottom-color: var(--red); }
.dl-demo-nav__item.is-current[data-party="respondent"] .dl-demo-nav__num, .dl-demo-nav__item[data-party="respondent"] .dl-demo-nav__who { color: var(--red); }

@media (min-width: 1100px) {
  .dl-demo__layout { grid-template-columns: 236px minmax(0, 1fr); gap: 48px; }
  .dl-demo__rail { display: block; top: 20px; align-self: start; margin: 0; padding: 22px 0 0; border-bottom: 0; }
  .dl-demo__case { display: block; padding-bottom: 16px; }
  .dl-demo__case strong { display: block; font-family: var(--font-serif); font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ink); margin-top: 8px; }
  .dl-demo__case span { display: block; font-size: 13px; line-height: 1.45; color: var(--meta); margin-top: 6px; }
  .dl-demo__now { display: none; }
  .dl-demo__pager { margin-top: 18px; gap: 8px; }
  .dl-demo__pager .dl-btn { flex: 1 1 0; }
  .dl-demo__hint { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
  .dl-demo:not(.is-js) .dl-demo__hint { display: none; }
  .dl-demo-nav { display: block; border-top: 1px solid var(--ink); }
  .dl-demo-nav__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 13px 8px 13px 10px; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; margin-left: -13px; }
  .dl-demo-nav__item.is-done { border-bottom-color: var(--rule); }
  .dl-demo-nav__item.is-current { border-bottom-color: var(--rule); border-left-color: var(--ink); background: var(--tint); }
  .dl-demo-nav__item.is-current[data-party="claimant"] { border-bottom-color: var(--rule); border-left-color: var(--blue); }
  .dl-demo-nav__item.is-current[data-party="respondent"] { border-bottom-color: var(--rule); border-left-color: var(--red); }
  .dl-demo-nav__text { display: block; }
}

.dl-demo__stage { min-width: 0; padding-top: 4px; }
@media (min-width: 1100px) { .dl-demo__stage { padding-top: 26px; } }
.dl-demo-step { scroll-margin-top: 112px; }
@media (min-width: 1100px) { .dl-demo-step { scroll-margin-top: 20px; } }
.dl-demo.is-js .dl-demo-step:not(.is-current) { display: none; }
.dl-demo:not(.is-js) .dl-demo-step + .dl-demo-step { margin-top: 72px; }
.dl-demo-step__head { max-width: 760px; margin-bottom: 24px; }
.dl-demo-step__head .dl-kicker { display: block; margin-bottom: 12px; }
.dl-demo-step__head h2:focus { outline: none; }
.dl-demo-step__text { font-family: var(--font-serif); font-size: 19px; line-height: 1.5; color: var(--body); margin-top: 12px; text-wrap: pretty; }
.dl-demo-step__next { font-size: 14px; line-height: 1.55; color: var(--meta); margin-top: 10px; }
.dl-demo-step__next strong { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-right: 6px; }
.dl-demo-step__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 24px; }
.dl-demo:not(.is-js) .dl-demo-step__foot { display: none; }

/* The framed product screen. The bar says whose screen it is. */
.dl-demo-screen { border: 2px solid var(--ink); background: var(--paper); }
.dl-demo-screen__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 10px clamp(16px, 3.5vw, 36px); background: var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.dl-demo-screen__bar strong { font-weight: 500; }
.dl-demo-screen__url { margin-left: auto; text-transform: none; letter-spacing: 0.04em; opacity: 0.85; overflow-wrap: anywhere; }
.dl-demo-screen--claimant { border-color: var(--blue); }
.dl-demo-screen--claimant .dl-demo-screen__bar { background: var(--blue); color: var(--on-blue); }
.dl-demo-screen--respondent { border-color: var(--red-deep); }
.dl-demo-screen--respondent .dl-demo-screen__bar { background: var(--red-deep); color: var(--on-ink); }
.dl-demo-screen__body { padding: clamp(18px, 3.5vw, 36px); }
.dl-demo-screen__body > .dl-section:first-child { margin-top: 0; }

/* A filled-in field: looks like the form control, cannot be edited. */
.dl-demo-prompt { display: block; font-size: 14px; line-height: 1.5; color: var(--body); margin-bottom: 8px; }
.dl-demo-filled { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; }
.dl-demo-filled--blank { min-height: 104px; color: var(--faint); }
.dl-demo-filled--line { white-space: normal; font-family: var(--font-sans); font-size: 15px; }
.dl-demo-filled--money { max-width: 20rem; font-family: var(--font-sans); font-stretch: 125%; font-weight: 700; letter-spacing: -0.02em; font-size: 20px; color: var(--blue); }
.dl-demo-screen .dl-check input { accent-color: var(--ink); }

/* Long text and long file lists start folded; .dl-demo-more opens them. */
.dl-demo.is-js [data-demo-clamp] { position: relative; max-height: 268px; overflow: hidden; }
.dl-demo.is-js [data-demo-clamp]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, rgba(250, 247, 239, 0), var(--paper)); pointer-events: none; }
.dl-demo.is-js .dl-input[data-demo-clamp]::after, .dl-demo.is-js .dl-panel [data-demo-clamp]::after { background: linear-gradient(to bottom, rgba(255, 254, 251, 0), var(--card)); }
.dl-demo.is-js [data-demo-clamp].is-open { max-height: none; }
.dl-demo.is-js [data-demo-clamp].is-open::after { display: none; }
.dl-demo-more { display: inline-block; margin-top: 12px; padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid currentColor; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); cursor: pointer; }
.dl-demo-more:hover { color: var(--red); }
.dl-demo:not(.is-js) .dl-demo-more { display: none; }

/* Commentary placed inside a screen: dashed, so it never reads as product. */
.dl-demo-note { border: 1px dashed var(--ink); padding: 16px 18px; margin: 20px 0 0; }
.dl-demo-note .dl-kicker { display: block; margin-bottom: 8px; }
.dl-demo-note p { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink); }
.dl-demo-note .dl-demo-more { margin-top: 10px; }
.dl-demo-skip { display: flex; align-items: center; gap: 14px; margin: 30px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; line-height: 1.6; text-transform: uppercase; text-align: center; color: var(--meta); }
.dl-demo-skip::before, .dl-demo-skip::after { content: ""; flex: 1 1 24px; border-top: 1px dashed var(--faint); }

/* Award: the final calculation as a ledger, and the outcome strip above it. */
/* The stock award card only spaces like blocks; the simulator's text mixes them. */
.dl-demo-screen .dl-award-part > * + * { margin-top: 10px; }
.dl-demo-screen .dl-section__aside { white-space: nowrap; }
.dl-demo-screen .dl-kv .dl-btn { white-space: normal; }
.dl-demo-screen .dl-status .dl-id { font-size: 13px; color: var(--ink); }
.dl-demo-ledger { margin: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); max-width: 520px; }
.dl-demo-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.4; color: var(--body); }
.dl-demo-ledger__row:first-child { border-top: 0; }
.dl-demo-ledger__row > span:last-child { font-family: var(--font-mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
.dl-demo-ledger__row.is-total { border-top-color: var(--ink); font-weight: 600; color: var(--ink); }
.dl-demo-ledger__row.is-total > span:last-child { font-weight: 600; color: var(--blue); }
.dl-demo-outcome { margin: 22px 0 0; }
.dl-demo-outcome .dl-stat__value { font-size: clamp(26px, 3.4vw, 40px); }

/* Contract reader. */
.dl-demo-dialog { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.dl-demo-dialog[open] { display: flex; flex-direction: column; }
.dl-demo-dialog::backdrop { background: rgba(21, 22, 26, 0.6); }
.dl-demo-dialog__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 22px; border-bottom: 1px solid var(--ink); }
.dl-demo-dialog__head .dl-kicker { display: block; margin-bottom: 6px; }
.dl-demo-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-demo-dialog__body { overflow-y: auto; padding: 22px; }
.dl-demo-contract { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--body); }
.dl-demo-contract--clause { margin: 18px -12px; padding: 14px 12px; background: var(--tint); border-left: 3px solid var(--red); color: var(--ink); scroll-margin-top: 12px; }

.dl-demo-toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 12px); max-width: calc(100vw - 32px); padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.dl-demo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .dl-demo-toast { transition: none; } }