/* copied from PRODUCTS/UnitGuideDemo_v2.0/shared/css/language.css (link 63); inline images moved to /shared/img/ */
/* ============================================================
   language.css — Baseera Phase 0.7: THE DESIGN LANGUAGE.

   The rule every declaration below answers to:
     one pigment, drawn by hand, tone by density,
     ignorance marked in a second pigment.

   What that means in practice, and the whole of what it means:
     · cobalt for structure, rules, diagrams and headings; near-black ink
       for body text, small text and every numeral.
     · tone made by line density and hatching. Never by an opacity fade,
       never by a gradient.
     · hairline frames and drawn corner marks instead of elevation.
     · a slight wobble in the drawn line, and a ground that is never flat.
     · manganese aubergine, and only ever for what is not known.
     · motion that decelerates and settles. No overshoot, no bounce.

   Prohibited outright and swept below: box-shadow anywhere, gradient
   backgrounds, glassmorphism, floating cards, emoji as icons, spring or
   bounce easing, rounded corners.

   Loaded AFTER tokens/base/components/journeys and scoped to
   <html class="dl">, so a screen opts in by carrying the class. No
   network: the faces are vendored in lib/fonts/ and linked from each
   page head — no @import, no CDN.
   ============================================================ */

/* ============================================================
   0. TOKENS — one pigment, a second pigment for ignorance
   ============================================================ */
html.dl{
  /* the ground */
  --porcelain:      #F4F0E5;
  --porcelain-2:    #F7F4EB;
  --porcelain-3:    #E7E1D2;
  --tile:           #F7F4EB;   /* no pure white anywhere */

  /* THE PIGMENT — cobalt: structure, rules, diagrams, headings */
  --cobalt:         #12306A;
  --cobalt-700:     #0C2251;
  --cobalt-500:     #2B4A83;
  --cobalt-400:     #4A69A0;
  --cobalt-200:     #93A6C8;
  --cobalt-050:     #E4E8F1;

  /* THE INK — body text, small text, every numeral.
     Measured on porcelain: ink 16.1:1, cobalt 11.1:1, muted 7.6:1. */
  --ink:            #16150F;
  --muted:          #5A5347;
  --rule:           #C9C0AA;

  /* THE SECOND PIGMENT is declared in tokens.css, not here, because it
     is a brand constant rather than a property of this language:
     --unknown / --unknown-ground. It is never redefined below.

     THE ACCENT WHEEL IS COLLAPSED, NOT ALIASED. Phase 0 carried three
     accents for states we KNOW: affirmed, pending, against-it. This
     language has one pigment for everything known, so all three are
     re-pointed at cobalt here — and none of them can carry aubergine,
     because none of them is the second pigment. The Part-1 aliases
     (--amber and --claret both set to #6E3B57) are deleted: they put a
     known state into the ignorance pigment, which is the one thing the
     second pigment may never mean. Their call sites were re-pointed at
     --stop / --pending / --unknown per site (DECISIONS_PHASE0_7.md §11),
     so the boundary now lives in the token, not in an exception. */
  --moss:           #12306A;   /* affirmed  → the one pigment */
  --pending:        #12306A;   /* pending   → the one pigment */
  --stop:           #12306A;   /* against-it→ the one pigment */

  /* type */
  --font-display:   "Cormorant Garamond",Garamond,"Palatino Linotype","Book Antiqua","Times New Roman",serif;
  --font-body:      "IBM Plex Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-mono:      "IBM Plex Mono","Cascadia Mono",Consolas,"Courier New",monospace;
  --font-ar:        "IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --font-ar-display:"Amiri","Traditional Arabic","Times New Roman",serif;

  /* rhythm: a drawn sheet has no radius and no elevation */
  --r:              0px;
  --hair:           1px;
  --shadow-1:       none;
  --shadow-2:       none;

  /* motion: an eye settling — long-tailed ease-out, no overshoot */
  --settle:         cubic-bezier(.16,.62,.24,1);
  --settle-slow:    cubic-bezier(.12,.68,.20,1);
  --t-fast:         240ms;
  --t-mid:          420ms;
  --t-slow:         720ms;

  /* Phase 0's repeating lozenge motifs are removed outright: a repeating
     ornament is the exact failure mode this round exists to fix. */
  --motif-corner:   none;
  --motif-field:    none;

  /* HATCHING — tone by line density, never by opacity, never by a
     gradient. Four steps, all full-strength pigment; only the spacing
     and the stroke change. */
  --hatch-1:url("/shared/img/5ffdbd9df80a.svg");
  --hatch-2:url("/shared/img/f4a53173fe8a.svg");
  --hatch-3:url("/shared/img/f8df6786f847.svg");
  --hatch-x:url("/shared/img/c3780310edc4.svg");
  /* the same ladder in the second pigment — unknown regions only */
  --hatch-u:url("/shared/img/39413f4f3d4c.svg");

  /* CORNER TICKS — the four registration marks of a bounded plot */
  --tick-tl:url("/shared/img/aaf5e1399dfc.svg");
  --tick-tr:url("/shared/img/77a449b86ea4.svg");
  --tick-bl:url("/shared/img/943f037d5288.svg");
  --tick-br:url("/shared/img/b41f843dbea2.svg");

  /* THE GROUND — kiln variation, not a gradient. Two states: hazy and
     warm where nothing is verified yet; cool and clear where the page
     is standing on something. Subtle enough that nobody points at it. */
  --ground-paper:url("/shared/img/05b94e54cfbd.svg");
  --ground-haze:url("/shared/img/9651ab11a903.svg");
  --ground-clear:url("/shared/img/9edc00222913.svg");
}

/* ============================================================
   0b. THE SWEEPS — what this language forbids, removed once
   ============================================================ */
html.dl *,html.dl *::before,html.dl *::after{
  box-shadow:none!important;      /* hierarchy is framing, weight, focus and ground */
  text-shadow:none!important;
  border-radius:0!important;      /* a drawn sheet has no rounded corner */
}
html.dl .mark__logo{filter:none}  /* Phase 0.5 hung a drop-shadow on it */

/* ============================================================
   1. THE GROUND — uneven, kiln-varied, never flat, never a gradient
   ============================================================ */
html.dl{background-color:var(--porcelain)}
html.dl body{
  background:transparent;color:var(--ink);position:relative;padding-block-end:4.4rem
}
html.dl body::before,html.dl body::after{
  content:"";position:fixed;inset:0;pointer-events:none;background-repeat:repeat;
  transition:opacity var(--t-slow) var(--settle-slow)
}
html.dl body::before{z-index:-2;background-image:var(--ground-paper);opacity:1}
html.dl body::after {z-index:-1;background-image:var(--ground-haze); opacity:0}
/* the thesis, on the ground itself */
html.dl[data-ground="haze"]  body::after {opacity:1}
html.dl[data-ground="clear"] body::before{opacity:.42}
html.dl[data-ground="clear"] body::after {opacity:0;background-image:var(--ground-clear)}

/* ============================================================
   2. TYPE — a real display scale, generous measure, start-aligned
   ============================================================ */
html.dl body{
  font-family:var(--font-body);
  font-size:clamp(16px,.42vw + 15px,18px);
  line-height:1.62;-webkit-font-smoothing:antialiased
}
html.dl[lang="ar"] body{font-family:var(--font-ar);line-height:1.85}

html.dl h1,html.dl h2,html.dl h3,html.dl h4{
  font-family:var(--font-display);font-weight:600;color:var(--cobalt);
  letter-spacing:-.006em;text-wrap:balance;margin:0 0 .34em
}
html.dl[lang="ar"] h1,html.dl[lang="ar"] h2,html.dl[lang="ar"] h3,html.dl[lang="ar"] h4{
  font-family:var(--font-ar-display);font-weight:400;letter-spacing:0
}
html.dl h1{font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.02}
html.dl h2{font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.08}
html.dl h3{font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.2}
html.dl h4{font-size:1.02rem;line-height:1.25}
/* Amiri sets small against Cormorant and its diacritics need headroom:
   the Arabic display is raised and let breathe. Interim pairing — see
   DECISIONS_PHASE0_7.md and screens/type-specimen.html. */
html.dl[lang="ar"] h1{font-size:clamp(2.7rem,6.6vw,5rem);line-height:1.3}
html.dl[lang="ar"] h2{font-size:clamp(1.95rem,3.9vw,2.95rem);line-height:1.36}
html.dl[lang="ar"] h3{font-size:clamp(1.24rem,2.05vw,1.6rem);line-height:1.5}

html.dl p{margin:0 0 .8em;max-inline-size:64ch;text-align:start}
html.dl .lede{
  font-family:var(--font-display);font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:400;
  line-height:1.44;color:var(--ink);max-inline-size:56ch
}
html.dl[lang="ar"] .lede{font-family:var(--font-ar-display);line-height:1.78;font-size:clamp(1.24rem,2vw,1.66rem)}
html.dl .small,html.dl small{font-size:.845rem;color:var(--ink)}
html.dl .muted{color:var(--muted)}
html.dl .eyebrow{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cobalt-500);margin:0 0 .7em;font-weight:400
}
/* every numeral is ink, never cobalt: tonal blue on porcelain fails
   contrast first on Arabic diacritics and Arabic-Indic digits. */
html.dl .num,html.dl .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
html.dl[lang="ar"] .num{font-family:var(--font-ar),var(--font-mono)}
html.dl a{color:var(--cobalt);text-decoration-thickness:1px;text-underline-offset:.22em}
html.dl a:focus-visible,html.dl button:focus-visible,html.dl input:focus-visible,
html.dl select:focus-visible,html.dl textarea:focus-visible,html.dl summary:focus-visible,
html.dl [tabindex]:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

/* ============================================================
   3. THE SHEET — frame, coordinate ticks, title block, scale bar.
   ============================================================ */
html.dl .sv-sheet{
  position:relative;isolation:isolate;border:var(--hair) solid var(--cobalt);background:transparent;
  padding:clamp(1.5rem,3.6vw,2.9rem) clamp(1.2rem,3.2vw,2.6rem);
  margin-block:clamp(1rem,3vw,2.2rem)
}
html.dl .sv-sheet::before{
  content:"";position:absolute;inset:6px;border:var(--hair) solid var(--cobalt-200);
  pointer-events:none;filter:url(#dl-wobble)
}
html.dl .sv-ticks{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
html.dl .sv-ticks svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
html.dl .sv-ticks line{stroke:var(--cobalt);stroke-width:.85}
html.dl .sv-ticks .minor{stroke:var(--cobalt-200);stroke-width:.7}
html.dl .sv-ticks text{font-family:"IBM Plex Mono",monospace;font-size:7px;fill:var(--cobalt-400);letter-spacing:.06em}

/* the title block: a ruled box, never a decorated one */
html.dl .sv-title{
  border:var(--hair) solid var(--cobalt);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin-block:0 clamp(1.2rem,3vw,2rem)
}
html.dl .sv-title>div{
  padding:.44rem .65rem;border-inline-start:var(--hair) solid var(--cobalt-200);display:grid;gap:.12rem;align-content:start
}
html.dl .sv-title>div:first-child{border-inline-start:0}
html.dl .sv-title .k{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt-400)
}
html.dl .sv-title .v{font-family:var(--font-mono);font-size:.78rem;color:var(--ink);line-height:1.35;margin:0}
html.dl .sv-title .v--stamp{
  color:var(--cobalt);border:var(--hair) solid var(--cobalt);padding:.02rem .34rem;justify-self:start;
  letter-spacing:.2em;font-size:.66rem
}
html.dl .sv-title .v--unknown{color:var(--unknown);border-color:var(--unknown)}

/* the scale bar — drawn, small, structural */
html.dl .sv-north{inline-size:2.2rem;block-size:2.8rem;display:block;flex:0 0 auto}
html.dl .sv-north path,html.dl .sv-north line,html.dl .sv-north circle{stroke:var(--cobalt);fill:none;stroke-width:1}
html.dl .sv-north .n-fill{fill:var(--cobalt);stroke:none}
html.dl .sv-north text{font-family:"IBM Plex Mono",monospace;font-size:7px;fill:var(--cobalt);letter-spacing:.06em}
html.dl .sv-scale{display:grid;gap:.24rem;justify-items:start;inline-size:min(15rem,42vw)}
html.dl .sv-scale svg{inline-size:100%;block-size:.85rem;display:block}
html.dl .sv-scale rect{stroke:var(--cobalt);stroke-width:.8;fill:none}
html.dl .sv-scale .on{fill:var(--cobalt);stroke:none}
html.dl .sv-scale__ends{
  display:flex;justify-content:space-between;inline-size:100%;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;color:var(--cobalt-400);text-transform:uppercase
}

html.dl .sv-rule{
  border:0;block-size:0;border-block-start:var(--hair) solid var(--cobalt);
  margin-block:clamp(1rem,2.4vw,1.8rem);filter:url(#dl-wobble)
}
html.dl .sv-rule--heavy{border-block-start-width:2px}
html.dl hr{border:0;border-block-start:var(--hair) solid var(--rule);filter:url(#dl-wobble)}

/* ============================================================
   4. PLOTS — the panel, re-cut as a bounded plot on the sheet.
      Bordered and hatched for tone; never floated, never filled flat.
   ============================================================ */
html.dl .plot,html.dl .panel,html.dl .tile,html.dl .callout,html.dl .banner,
html.dl .pairbox,html.dl .places,html.dl .tiebreak{
  position:relative;background-color:transparent;border:var(--hair) solid var(--cobalt);
  padding:clamp(.9rem,2.2vw,1.4rem)
}
html.dl .panel--quiet,html.dl .plot--quiet{border-color:var(--cobalt-200)}
html.dl .plot::after,html.dl .panel::after,html.dl .tile::after{
  content:"";position:absolute;inset:4px;pointer-events:none;
  background-image:var(--tick-tl),var(--tick-tr),var(--tick-bl),var(--tick-br);
  background-repeat:no-repeat;background-size:11px 11px;
  background-position:0 0,100% 0,0 100%,100% 100%
}
html.dl .plot__head,html.dl .panel__head{
  display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;
  border-block-end:var(--hair) solid var(--cobalt-200);padding-block-end:.45rem;margin-block-end:.75rem
}
html.dl .plot__head h2,html.dl .plot__head h3,html.dl .panel__head h2,html.dl .panel__head h3{margin:0}
/* the tonal ladder, applied to a plot's ground */
html.dl .t1{background-image:var(--hatch-1)}
html.dl .t2{background-image:var(--hatch-2)}
html.dl .t3{background-image:var(--hatch-3)}
html.dl .tx{background-image:var(--hatch-x)}

/* ============================================================
   5. EPISTEMIC STATE — the second pigment, and nothing else
   ============================================================ */
html.dl .u-unknown,html.dl .callout--absence,html.dl .banner--absence{
  background-color:var(--unknown-ground);background-image:var(--hatch-u);
  border:var(--hair) solid var(--unknown);padding:clamp(.85rem,2.1vw,1.25rem);position:relative
}
/* Everything inside an unknown region is written in the second pigment
   EXCEPT a control: the pigment states an epistemic fact and a button is
   an action. The exception is in the selector, so there is one rule and
   no pull-back after it. */
html.dl .u-unknown,html.dl .callout--absence,html.dl .banner--absence,html.dl .absence-inline,
html.dl .u-unknown *:not(button):not(.btn):not(button *):not(.btn *),
html.dl .callout--absence *:not(button):not(.btn):not(button *):not(.btn *),
html.dl .banner--absence *:not(button):not(.btn):not(button *):not(.btn *),
html.dl .absence-inline *:not(button):not(.btn):not(button *):not(.btn *){color:var(--unknown)}
html.dl .u-unknown::after,html.dl .callout--absence::after{display:none}
html.dl .absence-inline{
  border-inline-start:2px solid var(--unknown);padding-inline-start:.85rem;background:transparent
}
html.dl .u-mark{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--unknown);border:var(--hair) solid var(--unknown);padding:.04rem .34rem;white-space:nowrap
}
html.dl .u-line{color:var(--unknown)}

/* ============================================================
   6. CONTROLS — ruled boxes. Pressed = hatched, never filled flat.
   ============================================================ */
html.dl .btn,html.dl .choice,html.dl button.band,html.dl .btn-undo,html.dl .togglebtn,
html.dl .lk__seg,html.dl .crit,html.dl .viewtoggle .seg button,html.dl .chips button,
html.dl .btn-keep,html.dl .btn-out,html.dl .reasons__skip,html.dl .btn-revoke,html.dl .langbtn{
  background-color:transparent;background-image:none;color:var(--cobalt);
  border:var(--hair) solid var(--cobalt);font-family:var(--font-body);
  transition:background-image var(--t-fast) var(--settle),color var(--t-fast) var(--settle),
             border-color var(--t-fast) var(--settle)
}
html.dl[lang="ar"] .btn,html.dl[lang="ar"] .choice,html.dl[lang="ar"] button.band,
html.dl[lang="ar"] .crit,html.dl[lang="ar"] .chips button,
html.dl[lang="ar"] .btn-keep,html.dl[lang="ar"] .btn-out{font-family:var(--font-ar)}
html.dl .btn{
  font-weight:600;font-size:.92rem;letter-spacing:.01em;padding:.62rem 1.15rem;
  background-image:var(--hatch-1)
}
html.dl .btn:hover,html.dl .choice:hover,html.dl button.band:hover,html.dl .crit:hover,
html.dl .lk__seg:hover,html.dl .btn-undo:not([disabled]):hover,
html.dl .btn-keep:hover,html.dl .btn-out:hover{background-image:var(--hatch-2)}
html.dl .btn--ghost{background-image:none}
html.dl .btn--ghost:hover{background-image:var(--hatch-1)}
html.dl .btn--lg{font-size:1.02rem;padding:.8rem 1.5rem}
html.dl .btn[aria-disabled="true"],html.dl .btn:disabled,html.dl .btn-undo[disabled],
html.dl .viewtoggle .seg button[disabled],html.dl .combo input[disabled]{
  opacity:1;color:var(--muted);border-color:var(--rule);background-image:none;cursor:not-allowed
}
html.dl .choice,html.dl button.band{padding:.82rem .92rem;text-align:start;display:grid;gap:.16rem}
html.dl .choice b,html.dl button.band b{font-size:1rem;color:var(--cobalt);font-weight:600}
html.dl .choice span,html.dl button.band span{font-size:.8rem;color:var(--muted)}
html.dl .choice[aria-pressed="true"],html.dl button.band[aria-pressed="true"],
html.dl .chips button[aria-pressed="true"]{background-image:var(--hatch-2);border-inline-start-width:5px}
html.dl .lk__seg[aria-pressed="true"],html.dl .viewtoggle .seg button[aria-pressed="true"]{
  background-image:var(--hatch-x);color:var(--cobalt-700);font-weight:700
}
html.dl .chip,html.dl .badge,html.dl .pchip,html.dl .chip-link,html.dl .forktag,html.dl .docid{
  background-color:transparent;border:var(--hair) solid var(--cobalt-200);color:var(--ink);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;padding:.16rem .5rem
}
html.dl .chip--solid{background-image:var(--hatch-2);border-color:var(--cobalt);color:var(--cobalt-700)}
html.dl input,html.dl select,html.dl textarea{
  background-color:transparent;border:0;border-block-end:var(--hair) solid var(--cobalt);
  color:var(--ink);font-family:var(--font-mono)
}
html.dl .combo input,html.dl .custom input{padding:.55rem .15rem;font-size:1rem}
/* a validation error is a status of the input, not ignorance about the
   world, so it is cobalt like everything else we know — and is marked by
   weight rather than by a hue the language does not have. */
html.dl input[aria-invalid="true"]{border-block-end-width:2px}
html.dl .custom__err{color:var(--ink);font-weight:600}
html.dl .custom__echo{font-family:var(--font-mono);color:var(--ink)}
html.dl ::placeholder{color:var(--muted);opacity:1}

/* ============================================================
   7. PAGE CHROME — the sheet header and the status line.
      No cobalt slab: the whole page is one drawn sheet.
   ============================================================ */
html.dl .topbar{
  background:transparent;color:var(--ink);border-block-end:2px solid var(--cobalt);
  position:sticky;inset-block-start:0;z-index:40
}
html.dl .topbar::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-5px;block-size:1px;background:var(--cobalt-200)
}
html.dl .topbar__in{
  background-color:var(--porcelain);background-image:var(--ground-paper);padding-block:.5rem;gap:1rem
}
html.dl .topbar a,html.dl .topbar button{color:var(--cobalt)}
html.dl .mark__ar{font-family:var(--font-ar-display);font-size:1.72rem;color:var(--cobalt);line-height:1}
html.dl .mark__en{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cobalt-400);opacity:1
}
html.dl .topbar__screen{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-400);
  opacity:1;border-inline-start:var(--hair) solid var(--cobalt-200);padding-inline-start:.85rem
}
html.dl .chip-link{border-color:var(--cobalt-200);color:var(--cobalt);text-decoration:none}
html.dl .chip-link:hover{background-image:var(--hatch-1)}
html.dl .chip-link--solid{background-image:var(--hatch-2);border-color:var(--cobalt);color:var(--cobalt-700)}
html.dl .chip-link--basket b{background:transparent;color:var(--ink);font-family:var(--font-mono)}
html.dl .langbtn{color:var(--cobalt);border-color:var(--cobalt-200);font-family:var(--font-mono)}
html.dl .langbtn:hover{background-image:var(--hatch-1)}
html.dl .langbtn span{opacity:.45}
html.dl[lang="en"] .langbtn__en,html.dl[lang="ar"] .langbtn__ar{opacity:1;font-weight:700}

html.dl .demomark{
  background-color:var(--porcelain);background-image:var(--ground-paper);color:var(--ink);
  border-block-start:2px solid var(--cobalt);font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.06em;padding:.44rem clamp(.6rem,3vw,1.4rem)
}
html.dl .demomark b{color:var(--cobalt);border:var(--hair) solid var(--cobalt);padding:.02rem .36rem;letter-spacing:.2em}
html.dl .demomark span{opacity:1;color:var(--muted)}
html.dl .demomark__reset{color:var(--cobalt);border-color:var(--cobalt-200);opacity:1;background:transparent;font-family:var(--font-mono)}
html.dl .demomark__reset:hover{background-image:var(--hatch-1)}
html.dl .pagefoot{border-block-start:var(--hair) solid var(--cobalt)}
html.dl .specref{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);letter-spacing:.05em}

/* ============================================================
   8. THE FLOW BAR — an instrument panel; the stage rail redrawn
      as the sheet's graduated scale.
   ============================================================ */
html.dl .flowbar{
  background-color:var(--porcelain);background-image:var(--ground-paper);
  border:0;border-block-end:var(--hair) solid var(--cobalt);
  padding:.5rem 0 .55rem;inset-block-start:3.2rem;gap:.55rem 1.4rem
}
html.dl .flowbar__count{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-400)
}
html.dl .flowbar__count b{
  font-family:var(--font-mono);font-size:1.5rem;color:var(--ink);letter-spacing:0;transition:none
}
html.dl .flowbar__count b.is-bump{transform:none}
html.dl .flowbar__time,html.dl .budgetline{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;color:var(--muted)
}
html.dl .rail4{gap:0;align-items:end}
html.dl .rail4 li{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.11em;color:var(--cobalt-400);text-transform:uppercase;
  border-block-end:1px solid var(--cobalt);border-inline-start:1px solid var(--cobalt);padding:1rem .25rem .28rem
}
html.dl .rail4 li:last-child{border-inline-end:1px solid var(--cobalt)}
html.dl .rail4 li.is-done{background-image:var(--hatch-1);color:var(--cobalt-500)}
html.dl .rail4 li.is-now{background-image:var(--hatch-x);color:var(--cobalt-700);font-weight:700;border-block-end-width:2px}
html.dl .btn-undo{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;padding:.3rem .62rem;text-transform:uppercase
}

/* ============================================================
   9. THE SCREENER STACK — plots drawn on the sheet, never floated
   ============================================================ */
html.dl .scard{
  background-color:var(--porcelain);background-image:var(--ground-paper);
  border:var(--hair) solid var(--cobalt);
  transition:transform var(--t-mid) var(--settle),opacity var(--t-mid) var(--settle)
}
html.dl .scard[data-depth="1"]{transform:translateY(.5rem) scale(.972);opacity:1;background-image:var(--hatch-1)}
html.dl .scard[data-depth="2"]{transform:translateY(1rem) scale(.944);opacity:1;background-image:var(--hatch-2)}
html.dl .scard__plate{
  background-color:transparent;background-image:var(--hatch-1);border:var(--hair) solid var(--cobalt-200);
  color:var(--cobalt-400);font-family:var(--font-mono);letter-spacing:.16em
}
html.dl .scard__kind{color:var(--cobalt-400);letter-spacing:.18em}
html.dl .scard__name{font-family:var(--font-display);color:var(--cobalt);font-size:1.34rem;font-weight:600}
html.dl[lang="ar"] .scard__name{font-family:var(--font-ar-display);font-size:1.52rem;line-height:1.5;font-weight:400}
html.dl .scard__price{font-family:var(--font-mono);color:var(--ink);font-size:1rem}
html.dl .scard__meta{color:var(--muted);font-size:.8rem}
html.dl .swipehint,html.dl .combo__hint{font-family:var(--font-mono);font-size:.64rem;color:var(--muted);letter-spacing:.05em}

/* ============================================================
   10. THE SCHEDULE — the shortlist as a survey schedule of plots
   ============================================================ */
html.dl .flatlist{
  display:block;border-block-start:2px solid var(--cobalt);border-block-end:2px solid var(--cobalt);margin-block:.2rem 0
}
html.dl .fl{
  display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.15rem .95rem;align-items:baseline;
  background:transparent;border:0;border-block-end:var(--hair) solid var(--cobalt-200);
  padding:.75rem .2rem .8rem;transition:background-image var(--t-fast) var(--settle)
}
html.dl .fl:last-child{border-block-end:0}
html.dl .fl:hover{background-image:var(--hatch-1)}
html.dl .fl__thumb{
  display:block;block-size:auto;background:transparent;background-image:none;border:0;padding:0;
  align-self:start;text-align:start
}
html.dl .fl__rank{font-family:var(--font-mono);font-size:1.2rem;color:var(--ink);display:block;line-height:1}
html.dl .fl__fit{display:block;inline-size:2.2rem;block-size:5px;margin-block-start:.4rem;border:var(--hair) solid var(--cobalt-200)}
html.dl .fl__fit--1{background-image:var(--hatch-x)}
html.dl .fl__fit--2{background-image:var(--hatch-3)}
html.dl .fl__fit--3{background-image:var(--hatch-1)}
html.dl .fl__name{font-family:var(--font-display);font-size:1.32rem;color:var(--cobalt);line-height:1.14;margin:0;font-weight:600}
html.dl[lang="ar"] .fl__name{font-family:var(--font-ar-display);font-size:1.48rem;line-height:1.5;font-weight:400}
html.dl .fl__name a{color:inherit;text-decoration:none}
html.dl .fl__name a:hover{text-decoration:underline;text-decoration-thickness:1px}
html.dl .fl__meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;color:var(--muted);margin:.22rem 0 0}
html.dl .fl__price{font-family:var(--font-mono);font-size:1.05rem;color:var(--ink);white-space:nowrap;align-self:start;text-align:end}
html.dl .fl__why{
  grid-column:1 / -1;border:0;padding:.5rem 0 0 0;margin:0;font-size:.8rem;color:var(--ink);
  position:relative;padding-inline-start:1.15rem;max-inline-size:none
}
/* the why-line hangs off a leader stub, as an annotation does */
html.dl .fl__why::before{
  content:"";position:absolute;inset-inline-start:.2rem;inset-block-start:.85rem;
  inline-size:.62rem;block-size:1px;background:var(--cobalt)
}
html.dl .fl__why b{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cobalt-400)
}
html.dl .fl__why .tick{color:var(--cobalt);font-family:var(--font-mono)}
html.dl .badge--pool,html.dl .badge--host{border-color:var(--cobalt-200);color:var(--cobalt-500)}

/* the critiques: full sentences set in display type, on a ledger */
html.dl .critiques{display:grid;gap:0;border-block-start:var(--hair) solid var(--cobalt)}
html.dl .crit{
  display:grid;gap:.3rem;text-align:start;padding:.9rem .1rem;cursor:pointer;inline-size:100%;
  border:0;border-block-end:var(--hair) solid var(--cobalt-200)
}
html.dl .crit:last-child{border-block-end:0}
html.dl .crit b{font-family:var(--font-display);font-size:1.2rem;font-weight:400;line-height:1.28;color:var(--cobalt)}
html.dl[lang="ar"] .crit b{font-family:var(--font-ar-display);font-size:1.36rem;line-height:1.6}
html.dl .crit__effect{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.11em;color:var(--muted)}
/* a full-field hatch behind a whole sentence reads as a strike-through.
   The pressed state is a hatched strip at the reading start instead —
   still tone by density, and the sentence stays legible. */
html.dl .crit[aria-pressed="true"]{
  background-image:var(--hatch-x);background-repeat:no-repeat;background-size:.5rem 100%;
  background-position:0 0;padding-inline-start:1.1rem
}
html.dl[dir="rtl"] .crit[aria-pressed="true"]{background-position:100% 0}
html.dl .crit[aria-pressed="true"] b{font-weight:600}
html.dl[lang="ar"] .crit[aria-pressed="true"] b{font-weight:700}
html.dl .crit-log li{font-family:var(--font-display);font-size:1.04rem;color:var(--ink)}
html.dl[lang="ar"] .crit-log li{font-family:var(--font-ar-display)}
html.dl .crit-free textarea{
  border:var(--hair) solid var(--cobalt-200);padding:.65rem;font-family:var(--font-body);background:transparent
}
html.dl[lang="ar"] .crit-free textarea{font-family:var(--font-ar)}

/* ============================================================
   11. THE SHORTLIST SCENE — drawn on the sheet like everything else.
       Readings nearer the centre are sharper; readings toward the edge
       soften; every one of them is annotated on a leader line.
   ============================================================ */
html.dl .fov{
  position:relative;border:var(--hair) solid var(--cobalt);background-color:var(--porcelain);
  block-size:min(70vh,38rem);min-block-size:22rem;overflow:hidden
}
html.dl .sphere{
  position:absolute;inset:0;block-size:auto;min-block-size:0;border:0;background:transparent;
  overflow:hidden;touch-action:none;cursor:grab;
  clip-path:circle(150% at 50% 50%);transition:clip-path var(--t-slow) var(--settle-slow)
}
html.dl .fov.is-shut .sphere{clip-path:circle(0% at 50% 50%)}
html.dl .sphere.is-drag{cursor:grabbing}
html.dl .sphere canvas{display:block;inline-size:100%!important;block-size:100%!important}
html.dl .sphere__overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
html.dl .sphere__eyebrow{display:none}

/* the leader lines, drawn in one SVG across the whole field */
html.dl .fov__leaders{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none}
html.dl .fov__leaders line{fill:none;stroke:var(--cobalt);stroke-width:.9}
html.dl .fov__leaders circle{fill:none;stroke:var(--cobalt);stroke-width:1.1}
html.dl .fov__leaders [data-f="1"]{stroke:var(--cobalt-500)}
html.dl .fov__leaders [data-f="2"]{stroke:var(--cobalt-400)}
html.dl .fov__leaders [data-f="3"]{stroke:var(--cobalt-200)}

/* THERE IS NO RETICLE, AND NO OTHER CENTRE OVERLAY. Concentric rings
   plus crosshairs plus a centre dot reads as a weapon sight, which is
   the wrong register for a fourteen-million-pound purchase. The centre
   is marked by clarity instead: the graduations thin toward it and the
   readings resolve there. Do not reintroduce a ring, a plus, or a dot
   at the centre. */

/* the scene's own frame furniture: edge ticks. */
html.dl .fov__frame{position:absolute;inset:0;pointer-events:none;z-index:2}
html.dl .fov__frame svg.ticks{position:absolute;inset:0;inline-size:100%;block-size:100%}
html.dl .fov__frame line{stroke:var(--cobalt-200);stroke-width:.8}
html.dl .fov__frame .major{stroke:var(--cobalt);stroke-width:.9}
html.dl .fov__frame text{font-family:"IBM Plex Mono",monospace;font-size:7px;fill:var(--cobalt-400);letter-spacing:.08em}
html.dl .fov__corner{
  position:absolute;inset-block-start:.6rem;inset-inline-start:.8rem;display:flex;gap:.9rem;align-items:flex-start;
  pointer-events:none;z-index:3
}
html.dl .fov__cap{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-400);
  line-height:1.8;max-inline-size:15rem
}
html.dl .fov__foot{
  position:absolute;inset-block-end:.65rem;inset-inline:.8rem;display:flex;gap:1.2rem;
  justify-content:space-between;align-items:flex-end;pointer-events:none;flex-wrap:wrap;z-index:3
}
html.dl .sphere__hint{
  position:static;background:transparent;padding:0;margin:0;text-align:start;max-inline-size:22ch;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.11em;color:var(--cobalt-400);text-transform:uppercase
}

/* THE READINGS — a hairline label and a leader line back to the point
   it belongs to. Sharpness falls off toward the edge in four discrete
   steps of ink bleed and pigment. */
html.dl .sphere__tile{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;text-decoration:none;
  background-color:var(--porcelain);border:var(--hair) solid var(--cobalt);
  padding:.34rem .5rem .38rem;max-inline-size:11.5rem;inline-size:max-content;
  font-family:var(--font-mono);font-size:.64rem;line-height:1.5;color:var(--ink);text-align:start;
  transition:filter var(--t-mid) var(--settle),border-color var(--t-mid) var(--settle),color var(--t-mid) var(--settle)
}
html.dl .sphere__tile b{
  display:block;font-family:var(--font-display);font-size:.96rem;font-weight:600;color:var(--cobalt);
  line-height:1.12;margin-block-end:.14rem;letter-spacing:0
}
html.dl[lang="ar"] .sphere__tile b{font-family:var(--font-ar-display);font-size:1.1rem;line-height:1.4;font-weight:400}
html.dl .sphere__tile .num{font-family:var(--font-mono);font-size:.68rem;color:var(--ink)}
html.dl .sphere__tile .area,html.dl .sphere__tile .why{display:none}
html.dl .sphere__tile .u-mark{font-size:.54rem;padding:0 .26rem;letter-spacing:.1em}
html.dl .sphere__tile[data-focus="0"]{filter:none;border-color:var(--cobalt)}
html.dl .sphere__tile[data-focus="1"]{filter:url(#dl-bleed-1);border-color:var(--cobalt-500)}
html.dl .sphere__tile[data-focus="2"]{filter:url(#dl-bleed-2);border-color:var(--cobalt-400);color:var(--muted)}
html.dl .sphere__tile[data-focus="2"] b{color:var(--cobalt-400)}
html.dl .sphere__tile[data-focus="3"]{filter:url(#dl-bleed-3);border-color:var(--cobalt-200);color:var(--muted)}
html.dl .sphere__tile[data-focus="3"] b{color:var(--cobalt-200)}
html.dl .sphere__tile[data-focus="2"] .num,html.dl .sphere__tile[data-focus="3"] .num{color:var(--muted)}
html.dl .sphere__tile:hover,html.dl .sphere__tile:focus-visible{
  filter:none;border-color:var(--cobalt);color:var(--ink);background-image:var(--hatch-1)
}
html.dl .sphere__tile:hover b,html.dl .sphere__tile:focus-visible b{color:var(--cobalt)}

html.dl .viewtoggle{gap:.9rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.11em}
html.dl .viewtoggle .eyebrow{margin:0}
html.dl .viewtoggle .seg{border:var(--hair) solid var(--cobalt)}
html.dl .viewtoggle .seg button{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;padding:.32rem .85rem;border:0
}
html.dl .viewtoggle .seg button+button{border-inline-start:var(--hair) solid var(--cobalt)}
html.dl [data-sphere-reason]{color:var(--unknown);font-family:var(--font-mono);font-size:.66rem}

/* ============================================================
   12. MOTION — an eye settling. No overshoot, no elastic, no bounce.
   ============================================================ */
html.dl *{animation-timing-function:var(--settle)}
html.dl .stage{animation:dl-settle var(--t-slow) var(--settle-slow) both}
@keyframes dl-settle{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Reduced motion: the same information, reached in discrete steps of
   size and contrast rather than by continuous focus. */
@media (prefers-reduced-motion: reduce){
  html.dl *,html.dl *::before,html.dl *::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important
  }
  html.dl .sphere{clip-path:none!important}
  html.dl .sphere__tile{filter:none!important}
  html.dl .sphere__tile[data-focus="2"]{font-size:.6rem}
  html.dl .sphere__tile[data-focus="3"]{font-size:.56rem}
}
html.dl.reduce-motion *,html.dl.reduce-motion *::before,html.dl.reduce-motion *::after{
  animation-duration:1ms!important;transition-duration:1ms!important
}
html.dl.reduce-motion .sphere{clip-path:none!important}
html.dl.reduce-motion .sphere__tile{filter:none!important}
html.dl.reduce-motion .sphere__tile[data-focus="2"]{font-size:.6rem}
html.dl.reduce-motion .sphere__tile[data-focus="3"]{font-size:.56rem}

/* ============================================================
   13. WHAT THE SWEEP ALSO TOUCHES ON THIS SCREEN
   ============================================================ */
html.dl .toast{
  background-color:var(--porcelain);background-image:var(--ground-paper);
  border:var(--hair) solid var(--cobalt);color:var(--ink);font-family:var(--font-mono);font-size:.72rem
}
html.dl .toast button{border:var(--hair) solid var(--cobalt);color:var(--cobalt);background:transparent}
html.dl .decisions li{border-block-end:var(--hair) solid var(--cobalt-200);font-family:var(--font-mono);font-size:.74rem}
html.dl .weights li{border-block-end:var(--hair) solid var(--cobalt-200)}
html.dl .w-bar{border:var(--hair) solid var(--cobalt-200);background:transparent;block-size:.6rem}
html.dl .w-fill{background:transparent;background-image:var(--hatch-x);block-size:100%}
html.dl .w-val{font-family:var(--font-mono);color:var(--ink)}
html.dl .ladder li{background:transparent;border:var(--hair) solid var(--cobalt-200)}
html.dl .ladder li.is-on{background-image:var(--hatch-1);border-color:var(--cobalt)}
html.dl .ladder__k{font-family:var(--font-mono);color:var(--cobalt-400)}
html.dl .ladder__v{color:var(--muted)}
html.dl .legalline{border-inline-start:2px solid var(--cobalt);padding-inline-start:.85rem;color:var(--muted);font-size:.8rem}
html.dl .combo__list{
  background-color:var(--porcelain);background-image:var(--ground-paper);border:var(--hair) solid var(--cobalt)
}
html.dl .combo__opt[aria-selected="true"],html.dl .combo__opt:hover{background-image:var(--hatch-1)}
html.dl .combo__opt small{color:var(--muted);font-family:var(--font-mono)}
html.dl .pchip{border-color:var(--cobalt);color:var(--ink);font-family:var(--font-body)}
html.dl[lang="ar"] .pchip{font-family:var(--font-ar)}
html.dl .pchip button{background:transparent;color:var(--cobalt);border:var(--hair) solid var(--cobalt-200)}
html.dl .lk{background:transparent;border:0;border-block-end:var(--hair) solid var(--cobalt-200);padding:.75rem 0}
html.dl .lk__head b{font-family:var(--font-display);font-size:1.1rem;color:var(--cobalt);font-weight:600}
html.dl[lang="ar"] .lk__head b{font-family:var(--font-ar-display);font-size:1.24rem;font-weight:400}
html.dl .lk__seg{min-block-size:2.6rem;font-family:var(--font-mono)}
html.dl .lk__ends{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;color:var(--muted)}
html.dl .tiebreak{border-style:dashed;border-color:var(--cobalt-200)}
html.dl .nojs-only{max-inline-size:64ch}
html.dl .fov-note{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);letter-spacing:.06em}

/* ============================================================
   14. THE DRAWN INSTRUMENTS — the filter definitions live in the
       page markup; this only takes them out of the flow.
   ============================================================ */
html.dl .dl-defs{position:absolute;inline-size:0;block-size:0;overflow:hidden;pointer-events:none}

/* the weights list: an unrated factor is an unknown, not a low score */
html.dl .weights li.is-unrated>span:first-child{color:var(--unknown)}
html.dl .w-bar--unrated{border-color:var(--unknown)}
html.dl .w-bar--unrated .w-fill{background-image:var(--hatch-u)}

/* the schedule at phone width: the price drops under the name rather
   than squeezing the display face into two words a line. */
@media (max-width:34rem){
  html.dl .fl{grid-template-columns:2.4rem minmax(0,1fr)}
  html.dl .fl__price{grid-column:2;text-align:start;margin-block-start:.2rem}
  html.dl .fov{block-size:min(72vh,30rem)}
  html.dl .sphere__tile{max-inline-size:9rem;font-size:.6rem}
  html.dl .sphere__tile b{font-size:.82rem}
  html.dl[lang="ar"] .sphere__tile b{font-size:.94rem}
}

/* ============================================================
   15. A COLLISION INHERITED FROM PHASE 0, NEUTRALISED HERE
   `.band` is two different things in this codebase: the vertical
   rhythm utility carried by <main class="wrap band">, and the budget
   band button. `.band span{font-size:.74rem}` and `.band b{.98rem}`
   in journeys.css were therefore shrinking EVERY bilingual span and
   every <b> on the page — which is a large part of why the artifact
   read as small and generic. The fix on this screen is to stop the
   <main> carrying the colliding name: it now carries `.sv-band`,
   defined here. The rename belongs on every screen; it is done on
   this one only so that STOP 1 changes no other screen.
   ============================================================ */
html.dl button.band span{font-size:.8rem;color:var(--muted)}
html.dl button.band b{font-size:1rem;color:var(--cobalt);font-weight:600}
html.dl .muted,html.dl .small.muted,html.dl .fl__meta,html.dl .combo__opt small{color:var(--muted)}

/* the point carries its number, in the scene and in the schedule, so
   the two read as one drawing */
html.dl .sphere__tile .pid{
  display:block;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;
  color:var(--cobalt-400);margin-block-end:.1rem
}
html.dl .sphere__tile{max-inline-size:14rem;text-wrap:pretty}
html.dl .sphere__tile[data-focus="2"] .pid,html.dl .sphere__tile[data-focus="3"] .pid{color:var(--muted)}
html.dl .fl__pid{
  display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  color:var(--cobalt-400);margin-block-start:.2rem
}

/* ---------- the annotation resolves as it comes into focus ----------
   At the edge only the point number is readable; the name, then the
   reading, then what is unknown about it arrive as rotation brings the
   point toward the centre. It is what keeps twelve annotations on one
   sheet legible. */
html.dl .sphere__tile .t-read{display:block}
html.dl .sphere__tile[data-focus="2"]{max-inline-size:9rem}
html.dl .sphere__tile[data-focus="2"] b{
  font-size:.78rem;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical
}
html.dl[lang="ar"] .sphere__tile[data-focus="2"] b{font-size:.86rem}
html.dl .sphere__tile[data-focus="2"] .u-mark{display:none}
html.dl .sphere__tile[data-focus="3"]{max-inline-size:5.2rem;padding:.2rem .38rem}
html.dl .sphere__tile[data-focus="3"] b,
html.dl .sphere__tile[data-focus="3"] .t-read,
html.dl .sphere__tile[data-focus="3"] .u-mark{display:none}
html.dl .sphere__tile[data-focus="3"] .pid{margin:0;color:var(--cobalt-400)}

/* the schedule's annotation column, tuned after the first proof */
html.dl .fl__rank{font-size:1.5rem}
html.dl .fl__why{font-size:.84rem;max-inline-size:74ch;line-height:1.5}
html.dl .fl__thumb{font-size:1rem}

/* proof-round corrections */
html.dl .fl{grid-template-columns:3.9rem minmax(0,1fr) auto}
html.dl .fl__pid{font-size:.55rem;letter-spacing:.08em;white-space:nowrap}
html.dl .fov__cap{color:var(--cobalt-500)}


/* at phone width the annotation is narrower still, and the ladder
   above keeps most readings at the edge until they are turned to */
@media (max-width:34rem){
  html.dl .sphere__tile{max-inline-size:8.5rem}
  html.dl .sphere__tile[data-focus="2"]{max-inline-size:6.6rem}
  html.dl .sphere__tile[data-focus="3"]{max-inline-size:4.8rem}
  html.dl .fov__cap{max-inline-size:9rem;font-size:.52rem}
  html.dl .sv-scale{inline-size:min(9rem,38vw)}
}

/* ============================================================
   16. PHASE 0.7 PART 2 — the reordered flow
   ============================================================ */

/* F1 — stage ② carries seven fields, so it is two plots side by side
   rather than one long stack. */
html.dl .twopanel{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);margin-block:var(--gap)}
@media (min-width:62rem){html.dl .twopanel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
html.dl .twopanel .plot{padding:clamp(1rem,2.4vw,1.5rem)}
html.dl .twopanel .places{border:0;padding:0}
html.dl .choices--tight{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin-block:.6rem 0}
html.dl h4.byo__q{
  font-family:var(--font-display);font-size:1.12rem;font-weight:600;color:var(--cobalt);margin:0 0 .2rem
}
html.dl[lang="ar"] h4.byo__q{font-family:var(--font-ar-display);font-size:1.26rem;font-weight:400;line-height:1.5}

/* F7 — a screener card now stands for a group, and says so */
html.dl .scard__stands{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;color:var(--cobalt-500);
  border-block-start:var(--hair) solid var(--cobalt-200);padding-block-start:.4rem;margin:.2rem 0 0
}
html.dl .decisions li b{font-family:var(--font-mono);font-size:.7rem;color:var(--cobalt-500)}

/* F6 — the concrete test: one unit, one question, no verdict */
html.dl .flextest .fx__q{
  font-family:var(--font-display);font-size:1.24rem;color:var(--cobalt);margin:0 0 .3rem
}
html.dl[lang="ar"] .flextest .fx__q{font-family:var(--font-ar-display);font-size:1.4rem;line-height:1.5}
html.dl .flextest .fx__unit{font-size:.9rem;margin:0 0 .7rem}
html.dl .flextest [aria-pressed="true"]{background-image:var(--hatch-2);border-inline-start-width:5px}

/* F8a — the shortlist fills the viewport rather than sitting in a panel */
html.dl .fov--full{
  block-size:100vh;block-size:100dvh;max-block-size:none;
  margin-inline:calc(50% - 50vw);inline-size:100vw;border-inline:0
}
@media (max-width:34rem){html.dl .fov--full{block-size:88vh;block-size:88dvh}}
html.dl .btn--behind{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem}
html.dl .viewtoggle .spacer{flex:1 1 auto}

/* F8c — what is behind you: dimmed, countable, one control from coming back */
html.dl .sphere__tile.is-out{
  border-style:dashed;border-color:var(--cobalt-200);background-color:var(--porcelain);
  padding-block-end:.2rem
}
html.dl .sphere__tile.is-out b{color:var(--cobalt-400)}
html.dl .sphere__tile.is-out .t-read,html.dl .sphere__tile.is-out .pid{color:var(--muted)}
html.dl .tile-restore{
  display:block;inline-size:100%;margin-block-start:.3rem;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--cobalt);
  border:var(--hair) solid var(--cobalt);padding:.16rem .3rem;cursor:pointer
}
html.dl .tile-restore:hover{background-image:var(--hatch-2)}
html.dl .fov__leaders g[data-out] line{stroke:var(--cobalt-200);stroke-dasharray:3 3}

/* F9 — the notice sits on the tile and the row, where the buyer meets it */
html.dl .t-nojourney{
  display:block;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;
  color:var(--muted);margin-block-start:.2rem
}
html.dl .sphere__tile[data-focus="2"] .t-nojourney,
html.dl .sphere__tile[data-focus="3"] .t-nojourney{display:none}
html.dl .fl__nojourney{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);margin:.25rem 0 0}
html.dl .fl__nojourney a{color:var(--cobalt)}

/* ============================================================
   18. F13 — THE REMAINING THIRTEEN SCREENS
   Same tokens, same prohibitions, same conventions. The only new
   problem these screens raise is that Phase 0 used HUE to carry
   several categorical distinctions — for and against, four
   presenter seats, eight provenances, three ledger shares — and
   this language has one pigment. Every one of them is re-carried
   by line pattern, density or weight, and by the words that were
   already there. Nothing is distinguished by colour that is not
   an epistemic state.
   ============================================================ */

/* ---------- 18.1 the sheet header on every screen ---------- */
html.dl .tourhero{
  background:transparent;color:var(--ink);padding-block:clamp(1.2rem,3vw,2.2rem) clamp(1rem,2.4vw,1.6rem);
  border-block-end:2px solid var(--cobalt)
}
html.dl .tourhero h1,html.dl .tourhero h2{color:var(--cobalt)}
html.dl .tourhero .lede{color:var(--ink)}
html.dl .tourhero .eyebrow{color:var(--cobalt-500)}
html.dl .lane__head{border-block-end:2px solid var(--cobalt);padding-block-end:.5rem}
html.dl .democtl{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em}

/* ---------- 18.2 the tour's stops ---------- */
html.dl .stop{
  position:relative;background:transparent;border:var(--hair) solid var(--cobalt);
  padding:clamp(1rem,2.4vw,1.5rem)
}
html.dl .stop::after{
  content:"";position:absolute;inset:4px;pointer-events:none;
  background-image:var(--tick-tl),var(--tick-tr),var(--tick-bl),var(--tick-br);
  background-repeat:no-repeat;background-size:11px 11px;
  background-position:0 0,100% 0,0 100%,100% 100%
}
html.dl .stop__no{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--cobalt-400)}
html.dl .stop__title{font-family:var(--font-display);font-size:1.5rem;color:var(--cobalt);font-weight:600}
html.dl[lang="ar"] .stop__title{font-family:var(--font-ar-display);font-size:1.7rem;line-height:1.5;font-weight:400}
html.dl .stop__what{font-size:.92rem;color:var(--ink);max-inline-size:none}
html.dl .stop__glyph{
  background-color:transparent;background-image:var(--hatch-1);border:var(--hair) solid var(--cobalt-200);
  color:var(--cobalt-400);font-family:var(--font-mono);letter-spacing:.16em
}
/* FOUR SEATS, ONE PIGMENT. Phase 0 gave each presenter seat a hue.
   The seat is already named in the heading above the note, so the
   name carries it and every rule is the same cobalt hairline. */
html.dl .note{background:transparent;border:0;border-inline-start:2px solid var(--cobalt);padding:.55rem .85rem}
html.dl .note--sales,html.dl .note--pricing,html.dl .note--legal,html.dl .note--tech{border-inline-start-color:var(--cobalt)}
html.dl .note h4{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-400)
}
html.dl .note p{font-size:.88rem;max-inline-size:none}

/* ---------- 18.3 the unit journey ---------- */
html.dl .journey{gap:clamp(1.2rem,4vh,2.4rem)}
html.dl .jcard{
  position:relative;background-color:transparent;background-image:var(--ground-paper);
  border:var(--hair) solid var(--cobalt-200);padding-inline-start:clamp(1.4rem,3.4vw,2rem)
}
/* FOR AND AGAINST, IN ONE PIGMENT: a strip at the reading start,
   its density saying which. The card names its kind in words too. */
html.dl .jcard::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:6px;background-color:var(--cobalt)
}
html.dl .jcard--bad::before{background-color:transparent;background-image:var(--hatch-x)}
html.dl .jcard--evidence::before{background-color:transparent;background-image:var(--hatch-3)}
html.dl .jcard--context::before{background-color:transparent;background-image:var(--hatch-1)}
html.dl .jcard--good,html.dl .jcard--bad,html.dl .jcard--context,html.dl .jcard--evidence{border-inline-start:var(--hair) solid var(--cobalt-200)}
html.dl .jcard--context{background-image:var(--ground-paper)}
html.dl .jcard__no{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--cobalt-400)}
html.dl .jcard__kind,html.dl .jcard--good .jcard__kind,html.dl .jcard--bad .jcard__kind,
html.dl .jcard--context .jcard__kind,html.dl .jcard--evidence .jcard__kind{
  color:var(--cobalt);border:var(--hair) solid var(--cobalt);font-family:var(--font-mono);letter-spacing:.14em
}
html.dl .jcard h2{
  font-family:var(--font-display);font-size:clamp(1.4rem,2.8vw,1.9rem);color:var(--cobalt);font-weight:600;line-height:1.14
}
html.dl[lang="ar"] .jcard h2{font-family:var(--font-ar-display);font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.45;font-weight:400}
html.dl .jcard__claim{font-size:1.02rem;color:var(--ink);max-inline-size:52ch}
html.dl .jcard__claim b{color:var(--cobalt)}
html.dl .jcard details{border-block-start:var(--hair) solid var(--cobalt-200)}
html.dl .jcard summary::before{border:var(--hair) solid var(--cobalt-200);font-family:var(--font-mono)}
html.dl .ptag{
  background-color:transparent;border:var(--hair) solid var(--cobalt);color:var(--cobalt);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em
}
html.dl .ptag--least{border-color:var(--cobalt-200);background:transparent;color:var(--muted)}
html.dl .askbtn{
  background-color:transparent;background-image:none;color:var(--cobalt);border:var(--hair) solid var(--cobalt);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase
}
html.dl .askbtn:hover{background-image:var(--hatch-1)}
/* EIGHT PROVENANCES, ONE PIGMENT — each already carries its own word.
   The one exception is the provisional flag: "a source we do not fully
   trust" is an epistemic state, so it, and only it, takes the second
   pigment. */
html.dl .src{
  background-color:transparent;border:var(--hair) solid var(--cobalt-200);color:var(--cobalt-500);
  font-family:var(--font-mono);letter-spacing:.1em
}
html.dl .src--firm{border-color:var(--cobalt);color:var(--cobalt)}
html.dl .src--buyer{border-style:dotted}
html.dl .src--prov{border-color:var(--unknown);color:var(--unknown);border-style:dashed}
html.dl .fig{border-block-end:1px dotted var(--cobalt);color:var(--ink)}
html.dl .fig:hover{background-color:transparent;background-image:var(--hatch-1)}
/* the rail: one pigment, filled where you are, open where you are not */
html.dl .jrail{
  background-color:var(--porcelain);background-image:var(--ground-paper);
  border:var(--hair) solid var(--cobalt-200);padding:.45rem .35rem
}
html.dl .jrail button,html.dl .jrail button.k-good,html.dl .jrail button.k-bad{
  border:var(--hair) solid var(--cobalt-400);background-color:transparent
}
html.dl .jrail button.is-now,html.dl .jrail button.k-good.is-now,html.dl .jrail button.k-bad.is-now{
  background-color:var(--cobalt);border-color:var(--cobalt)
}
html.dl .jrail button.is-done{background-color:var(--cobalt-200);border-color:var(--cobalt-200)}
html.dl .jrail__label{
  background-color:var(--porcelain);background-image:var(--ground-paper);
  border:var(--hair) solid var(--cobalt-200);color:var(--ink);font-family:var(--font-mono)
}
/* the firm's own words, quoted and framed as quoted */
html.dl .script{
  background-color:transparent;background-image:var(--hatch-1);
  border:var(--hair) solid var(--cobalt);border-inline-start-width:5px;padding:1rem 1.1rem
}
html.dl .script li:target{background-color:transparent;background-image:var(--hatch-3);outline:2px solid var(--cobalt)}
html.dl .script__from{font-family:var(--font-mono);font-size:.68rem;color:var(--cobalt-500)}
html.dl .quote,html.dl .solemn{
  background-color:transparent;border:var(--hair) solid var(--cobalt);border-inline-start-width:5px
}
html.dl .solemn__gloss{color:var(--muted);font-family:var(--font-mono);font-size:.72rem}
/* the range bar and the comparables table */
html.dl .rangebar__track{background-color:transparent;border:var(--hair) solid var(--cobalt-200);block-size:.85rem}
html.dl .rangebar__fill{background-color:transparent;background-image:var(--hatch-2)}
html.dl .rangebar__med{background-color:var(--cobalt);inline-size:2px}
html.dl .rangebar__unit{background-color:transparent;border:2px dashed var(--cobalt);inline-size:1rem}
html.dl .rangebar__ticks{font-family:var(--font-mono);color:var(--muted)}
html.dl .comps th{font-family:var(--font-mono);color:var(--cobalt-400);border-block-end:var(--hair) solid var(--cobalt)}
html.dl .comps td{border-block-end:var(--hair) dotted var(--cobalt-200)}
html.dl .comps tr.is-subject td{background-color:transparent;background-image:var(--hatch-1);font-weight:600}
html.dl .comps tr.is-other td{color:var(--muted)}
html.dl .legendline i{border-radius:0;border:var(--hair) solid var(--cobalt-200)}
/* the answered thread */
html.dl .thread{
  background-color:transparent;border:var(--hair) solid var(--cobalt-200);padding:.8rem .9rem
}
html.dl .thread__a{border-inline-start:3px solid var(--cobalt)}
html.dl .thread--seeded .thread__q{border-inline-start:3px dotted var(--cobalt-400)}
html.dl .thread__pub{color:var(--cobalt-500);font-family:var(--font-mono);font-size:.7rem}
html.dl .thread__who{font-family:var(--font-mono);color:var(--muted)}
html.dl .qa-pub .thread{background-color:transparent}

/* the figures inside the visual pane: one pigment, tone by step */
html.dl .jvis figcaption{
  background-color:var(--porcelain);border-block-start:var(--hair) solid var(--cobalt-200);
  color:var(--cobalt-500);font-family:var(--font-mono)
}
html.dl .jvis .green{fill:var(--cobalt-050);stroke:var(--cobalt-200)}
html.dl .jvis .site{fill:var(--porcelain-3);stroke:var(--cobalt-200)}
html.dl .jvis .block{fill:var(--porcelain-2);stroke:var(--cobalt-200)}
html.dl .jvis .rangeband{fill:var(--cobalt-200);opacity:1}
html.dl .jvis .band2{fill:var(--porcelain-3)}
html.dl .jvis .bar{fill:var(--cobalt)}
html.dl .jvis .bar2{fill:var(--cobalt-200)}
html.dl .jvis .bar3{fill:var(--cobalt-400)}
html.dl .jvis .bar4{fill:var(--cobalt-500)}
html.dl .jvis .gauge{stroke:var(--porcelain-3)}
html.dl .jvis .gauge-on{stroke:var(--cobalt)}
html.dl .jvis .qbox{fill:none;stroke:var(--cobalt);stroke-dasharray:4 3}
html.dl .jvis .mark,html.dl .jvis .unit{fill:none;stroke:var(--cobalt);stroke-width:2;stroke-dasharray:3 2}
html.dl .jvis .poi{fill:none;stroke:var(--cobalt-400);stroke-width:1.4}
html.dl .jvis .place{fill:var(--cobalt);stroke:none}
html.dl .jvis .t-bad,html.dl .jvis .t-good{fill:var(--ink)}
html.dl .jvis .ax{stroke:var(--cobalt-200)}
html.dl .jvis .grid{stroke:var(--porcelain-3)}
html.dl .jvis .med{stroke:var(--cobalt)}
html.dl .jvis .road{stroke:var(--cobalt-200)}
html.dl .jvis .arterial{stroke:var(--cobalt);stroke-width:4}
html.dl .jvis .route{stroke:var(--cobalt);stroke-dasharray:4 3}
html.dl .jvis .ring{stroke:var(--cobalt-400)}
html.dl .jvis .t-big{fill:var(--cobalt)}
html.dl .jvis .t-cap,html.dl .jvis .t-mono{fill:var(--muted)}
/* the ground receding under the plate, now that the filters are on the page */
html.dl .jvisual__frame[data-scene="plate"] .jmap{filter:url(#dl-bleed-2)}
html.dl .jmap__attrib{color:var(--muted);border-block-start:var(--hair) solid var(--cobalt-200)}
html.dl .scenario__frame{
  background-color:transparent;background-image:var(--hatch-1);border:var(--hair) solid var(--cobalt);color:var(--cobalt)
}
html.dl .scenario__out div{background-color:transparent;border:var(--hair) solid var(--cobalt-200)}
html.dl .costlist li{border-block-end:var(--hair) dotted var(--cobalt-200)}
html.dl .costlist li.total{border-block-start:2px solid var(--cobalt)}
html.dl .costlist .sw{border-radius:0;border:var(--hair) solid var(--cobalt-200)}
/* the question sheet */
html.dl .sheet__backdrop{background:rgba(22,21,15,.42)}
html.dl .sheet__in{
  background-color:var(--porcelain);background-image:var(--ground-paper);border:2px solid var(--cobalt)
}
html.dl .sheet__grip{background:var(--cobalt-200)}
html.dl .sheet__row{border-block-start:var(--hair) solid var(--cobalt-200)}
html.dl .sheet__hint{color:var(--muted);font-family:var(--font-mono);font-size:.7rem}

/* ---------- 18.4 the Buyer Card ---------- */
html.dl .bcard{
  position:relative;background-color:transparent;background-image:var(--ground-paper);
  border:2px solid var(--cobalt);padding:clamp(1.2rem,3vw,1.9rem)
}
html.dl .bcard::after{
  content:"";position:absolute;inset:5px;pointer-events:none;
  background-image:var(--tick-tl),var(--tick-tr),var(--tick-bl),var(--tick-br);
  background-repeat:no-repeat;background-size:11px 11px;
  background-position:0 0,100% 0,0 100%,100% 100%
}
html.dl .bcard__name{font-family:var(--font-ar-display);font-size:2rem;color:var(--cobalt);line-height:1.35}
html.dl[lang="en"] .bcard__name{font-family:var(--font-display);font-size:1.9rem;line-height:1.1}
html.dl .bcard__id,html.dl .bcard__side{font-family:var(--font-mono);color:var(--cobalt-400);letter-spacing:.14em}
html.dl .qr{background-color:transparent;border:var(--hair) solid var(--cobalt)}
html.dl .qr__cap{font-family:var(--font-mono);color:var(--muted)}
html.dl .promise{border-block-start:var(--hair) solid var(--cobalt-200)}
html.dl .promise li::before{color:var(--cobalt)}
html.dl .ledger li{background-color:transparent;border:var(--hair) solid var(--cobalt-200);padding:.7rem .8rem}
html.dl .ledger li.is-revoked{background-color:transparent;background-image:var(--hatch-1);border-color:var(--cobalt)}
html.dl .ledger__who{font-family:var(--font-display);font-size:1rem;color:var(--cobalt);font-weight:600}
html.dl[lang="ar"] .ledger__who{font-family:var(--font-ar-display);font-size:1.1rem;font-weight:400}
html.dl .ledger__what{color:var(--muted);font-family:var(--font-mono);font-size:.72rem}
html.dl .btn-revoke{
  background-color:transparent;color:var(--cobalt);border:var(--hair) solid var(--cobalt);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase
}
html.dl .btn-revoke:hover{background-image:var(--hatch-2)}
html.dl .btn-revoke[disabled]{color:var(--muted);border-color:var(--rule)}
/* the KYC groups: consented, deferred, undecided — the middle one is
   the only epistemic state and keeps the second pigment (D7.35). */
html.dl .kgroup{background-color:transparent;border:var(--hair) solid var(--cobalt-200);padding:.9rem 1rem}
html.dl .kgroup[data-state="consented"]{border-color:var(--cobalt);background-image:var(--hatch-1)}
html.dl .kgroup[data-state="consented"] .kstate{color:var(--cobalt)}
html.dl .kgroup[data-state="deferred"]{border-color:var(--unknown);background-color:var(--unknown-ground);background-image:var(--hatch-u)}
html.dl .kgroup[data-state="deferred"] .kstate{color:var(--unknown)}
html.dl .kstate{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:var(--hair) solid currentColor;padding:.06rem .4rem}
html.dl .kgroup__head h3,html.dl .tierhead{font-family:var(--font-display);color:var(--cobalt)}
html.dl[lang="ar"] .kgroup__head h3,html.dl[lang="ar"] .tierhead{font-family:var(--font-ar-display)}
html.dl .benefit{
  background-color:transparent;border:var(--hair) solid var(--cobalt-200);color:var(--cobalt-500);
  font-family:var(--font-mono);font-size:.68rem
}
html.dl .path{
  background-color:transparent;border:var(--hair) solid var(--cobalt);color:var(--cobalt);text-align:start
}
html.dl .path:hover,html.dl .path--consent:hover,html.dl .path--defer:hover{
  background-image:var(--hatch-1);border-color:var(--cobalt)
}
html.dl .path[aria-pressed="true"],html.dl .path[aria-pressed="true"].path--consent,
html.dl .path[aria-pressed="true"].path--defer{
  background-image:var(--hatch-2);background-color:transparent;border-color:var(--cobalt);border-inline-start-width:5px
}
html.dl .path span{color:var(--muted)}
html.dl .switch{background-color:transparent;border:var(--hair) solid var(--cobalt-200)}
html.dl .switch[aria-checked="true"]{background-color:transparent;background-image:var(--hatch-x);border-color:var(--cobalt)}
html.dl .switch::after,html.dl .switch i{background:var(--cobalt)}
html.dl .switch__na{color:var(--unknown);font-family:var(--font-mono);font-size:.66rem}
html.dl .sharegrid th,html.dl .sharegrid td{border-block-end:var(--hair) solid var(--cobalt-200)}
html.dl .krecord{background-color:transparent;background-image:var(--hatch-1);border:var(--hair) solid var(--cobalt-200)}
html.dl .banner--legal{
  background-color:transparent;border:var(--hair) solid var(--cobalt);border-inline-start-width:5px;color:var(--ink)
}
html.dl .fixedline{font-family:var(--font-mono);font-size:.76rem;color:var(--ink)}

/* ---------- 18.5 the firm's documents ---------- */
html.dl .wmpage{
  background-color:transparent;background-image:var(--ground-paper);
  border:var(--hair) solid var(--cobalt);padding:clamp(1.3rem,3.5vw,2.6rem)
}
html.dl .wmpage__mark span{color:var(--cobalt-200);font-family:var(--font-mono)}
html.dl .wmbar{
  background-color:transparent;color:var(--ink);border-block:2px solid var(--cobalt);
  font-family:var(--font-mono);font-size:.68rem
}
html.dl .docid{border:var(--hair) dashed var(--cobalt);color:var(--cobalt);font-family:var(--font-mono)}
html.dl .kv dt{color:var(--cobalt);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
html.dl .kv dd{color:var(--ink)}
html.dl .tablewrap{background-color:transparent;border:var(--hair) solid var(--cobalt)}
html.dl table.data{font-size:.86rem}
html.dl table.data caption{color:var(--muted);border-block-end:var(--hair) solid var(--cobalt-200);font-family:var(--font-mono);font-size:.72rem}
/* a ruled head, not a hatched one: a dense hatch behind fifteen column
   names is the same mistake as a hatch behind a whole sentence. */
html.dl table.data thead th{
  background-color:transparent;background-image:none;color:var(--cobalt);
  border-block-end:2px solid var(--cobalt);font-family:var(--font-mono);letter-spacing:.1em
}
html.dl table.data th,html.dl table.data td{border-block-end:var(--hair) solid var(--cobalt-200)}
html.dl table.data tbody tr:nth-child(even){background-color:transparent;background-image:var(--hatch-1)}
html.dl table.data .sub{color:var(--muted)}
html.dl .scrollhint{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
/* THREE SHARES, ONE PIGMENT: the split reads by density, not by hue */
html.dl .splitviz{border:var(--hair) solid var(--cobalt);block-size:2.8rem;font-family:var(--font-mono)}
html.dl .splitviz div{color:var(--ink)}
html.dl .split--rail{background-color:transparent;background-image:var(--hatch-1)}
html.dl .split--referrer{background-color:transparent;background-image:var(--hatch-2)}
html.dl .split--closer{background-color:transparent;background-image:var(--hatch-x)}
html.dl .calc li{border-block-end:var(--hair) dotted var(--cobalt-200)}
html.dl .calc li.total{border-block-start:2px solid var(--cobalt);border-block-end:0}
html.dl .calc .neg{color:var(--cobalt)}
html.dl .firmview{background-color:transparent;border:var(--hair) solid var(--cobalt-200)}
html.dl .firmview__head{
  background-color:transparent;background-image:var(--hatch-1);border-block-end:var(--hair) solid var(--cobalt-200);
  font-family:var(--font-mono);letter-spacing:.12em;color:var(--cobalt-500)
}

/* ---------- 18.6 the rep console ---------- */
html.dl .console{
  background-color:transparent;background-image:none;min-block-size:0;padding-block:clamp(1rem,3vw,2rem) 3rem
}
html.dl .console .phone{
  position:relative;background-color:transparent;background-image:var(--ground-paper);
  border:2px solid var(--cobalt);padding:1.1rem 1.1rem 1.5rem
}
html.dl .console .phone::after{
  content:"";position:absolute;inset:5px;pointer-events:none;
  background-image:var(--tick-tl),var(--tick-tr),var(--tick-bl),var(--tick-br);
  background-repeat:no-repeat;background-size:11px 11px;
  background-position:0 0,100% 0,0 100%,100% 100%
}
html.dl .console__bar{font-family:var(--font-mono);color:var(--cobalt-400);letter-spacing:.1em;border-block-end:var(--hair) solid var(--cobalt-200);padding-block-end:.4rem}
html.dl .timerchip{background-color:transparent;background-image:var(--hatch-1);color:var(--cobalt-700);border:var(--hair) solid var(--cobalt);font-family:var(--font-mono)}
html.dl .statuslist li,html.dl .slot{background-color:transparent;border:var(--hair) solid var(--cobalt-200);padding:.6rem .7rem}
html.dl .slot--priority{border-color:var(--cobalt);background-image:var(--hatch-1)}
html.dl .field>span{color:var(--cobalt);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
html.dl .field input,html.dl .field select,html.dl .field textarea{
  background-color:transparent;border:0;border-block-end:var(--hair) solid var(--cobalt);font-family:var(--font-mono)
}
html.dl .tickgrid label{font-size:.84rem;color:var(--ink)}

/* ---------- 18.7 the basket ---------- */
html.dl .bgroup{background-color:transparent;border:var(--hair) solid var(--cobalt-200)}
html.dl .bgroup__head{
  background-color:transparent;background-image:var(--hatch-1);border-block-end:var(--hair) solid var(--cobalt-200)
}
html.dl .bq{background-color:transparent;border-block-end:var(--hair) solid var(--cobalt-200)}
html.dl .bq__q{font-family:var(--font-display);font-size:1.05rem;color:var(--ink)}
html.dl[lang="ar"] .bq__q{font-family:var(--font-ar-display);font-size:1.16rem;line-height:1.6}
html.dl .bq__quote{border-inline-start:2px solid var(--cobalt-200);color:var(--muted);font-style:normal}
html.dl .bq__meta{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
html.dl .bq__ans{border-inline-start:3px solid var(--cobalt)}
html.dl .bq__rm{color:var(--cobalt);font-family:var(--font-mono);font-size:.68rem}
html.dl .submitchoice{background-color:transparent;border:var(--hair) solid var(--cobalt-200)}
html.dl .checklist li{border-block-end:var(--hair) dotted var(--cobalt-200)}
html.dl .silent{color:var(--muted);font-family:var(--font-mono);font-size:.72rem}

/* ---------- 18.8 the dossier, home and the fork chooser ---------- */
html.dl .unit{background-color:transparent;border:var(--hair) solid var(--cobalt);overflow:visible}
html.dl .unit__plate{
  background-color:transparent;background-image:var(--hatch-1);border-block-end:var(--hair) solid var(--cobalt-200);
  color:var(--cobalt-400);font-family:var(--font-mono);letter-spacing:.14em
}
html.dl .unit__name{font-family:var(--font-display);font-size:1.24rem;color:var(--cobalt);font-weight:600}
html.dl[lang="ar"] .unit__name{font-family:var(--font-ar-display);font-size:1.38rem;line-height:1.5;font-weight:400}
html.dl .unit__meta{color:var(--muted);font-family:var(--font-mono);font-size:.72rem}
html.dl .unit__price{font-family:var(--font-mono);color:var(--ink);font-size:1rem}
html.dl .unit__foot{border-block-start:var(--hair) dotted var(--cobalt-200)}
html.dl .poolrule{border-block-start:2px solid var(--cobalt)}
html.dl .poolrule__tag{
  background-color:var(--porcelain);color:var(--cobalt);font-family:var(--font-mono);letter-spacing:.14em
}
html.dl .poolrule__why{color:var(--muted)}
html.dl .dualbrand{background-color:transparent;background-image:var(--hatch-1);border:var(--hair) solid var(--cobalt-200)}
html.dl .placelist li{border-block-end:var(--hair) dotted var(--cobalt-200)}
html.dl .forktag{border-color:var(--cobalt);color:var(--cobalt);background-color:transparent}

/* ---------- 18.9 odds the sweep still owes ---------- */
html.dl .badge--ok{color:var(--cobalt);border-color:var(--cobalt)}
html.dl .chip--demo{border-style:dashed;color:var(--muted)}
html.dl .meter{background-color:transparent;border:var(--hair) solid var(--cobalt-200)}
html.dl .meter__fill{background-color:transparent;background-image:var(--hatch-x)}
html.dl .ticks .t{color:var(--cobalt)}
html.dl .ticks .u{color:var(--unknown)}
html.dl .hintline b{color:var(--cobalt)}
html.dl .lede{max-inline-size:60ch}
html.dl .stop__what,html.dl .note p,html.dl .jcard__claim{text-wrap:pretty}
html.dl .sheet__backdrop{backdrop-filter:none}

/* ---------- 18.10 what the first proof of the thirteen turned up ---------- */
/* the browser's own accent is the one colour the language never chose */
html.dl{accent-color:var(--cobalt)}
html.dl input[type="checkbox"],html.dl input[type="radio"]{accent-color:var(--cobalt)}
/* there is no pure white in this language, including inside an inline SVG */
html.dl .qr rect[fill="#fff"],html.dl svg rect[fill="#fff"],html.dl svg rect[fill="#FFFFFF"]{fill:var(--porcelain)}
html.dl svg [stroke="#fff"],html.dl svg [stroke="#FFFFFF"]{stroke:var(--porcelain)}
/* the sticky pane sits under the page chrome, not against it */
html.dl .jvisual{background-color:var(--porcelain);background-image:var(--ground-paper)}
html.dl .jvisual__frame{background-color:var(--porcelain)}

/* ============================================================
   18.11 ONE RULE THE FIRST PROOF FORCED, APPLIED EVERYWHERE
   Hatching is a quantity or a state, and it may sit behind a label,
   a digit or a button's few words. It may NEVER sit behind running
   text: a paragraph over a hatch reads as struck through. Where a
   hatched field has to carry a label, the label gets its own clear
   plate; where a hatched field carried a paragraph, the hatch goes
   and the frame does the work instead.
   ============================================================ */
/* a label on a hatched quantity sits on its own plate */
html.dl .splitviz div>span{
  background-color:var(--porcelain);padding:.12rem .4rem;display:inline-block;line-height:1.4;
  border:var(--hair) solid var(--cobalt-200)
}
/* a ruled table needs no zebra; the rules already separate the rows */
html.dl table.data tbody tr:nth-child(even){background-image:none}
/* these carried paragraphs. The frame carries them now. */
html.dl .script{background-image:none}
html.dl .kgroup[data-state="consented"]{background-image:none;border-inline-start-width:5px}
html.dl .ledger li.is-revoked{background-image:none;border-inline-start:5px solid var(--cobalt)}
html.dl .krecord{background-image:none;border-inline-start:3px solid var(--cobalt-200)}

/* a display scale is proportionate or it is just loud: on a narrow sheet
   the same clamp eats the whole first screen, so it is re-set to the
   measure it actually sits on. */
html.dl .wrap--narrow h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
html.dl[lang="ar"] .wrap--narrow h1{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.32}
html.dl .wrap--narrow h2{font-size:clamp(1.6rem,2.9vw,2.15rem)}
html.dl[lang="ar"] .wrap--narrow h2{font-size:clamp(1.7rem,3.1vw,2.35rem);line-height:1.42}
/* a group heading is not a label: it does not sit on a hatch either */
html.dl .bgroup__head{background-image:none;border-block-end:2px solid var(--cobalt)}

/* a chip is a hairline box here, not a pill, so it may wrap: a long
   Arabic label must never push the page sideways on a phone. */
html.dl .chip,html.dl .badge,html.dl .pchip,html.dl .forktag{white-space:normal}

/* A LABEL MAY WRAP. Phase 0 set `white-space:nowrap` on several chips so
   they would not break mid-pill; this language has no pills, and the
   English string is routinely longer than the Arabic, so on a phone the
   nowrap was pushing the page sideways. Only the genuinely short ones —
   a provenance word, a figure, a price — keep it. */
html.dl .benefit,html.dl .kstate,html.dl .askbtn,html.dl .btn-undo,
html.dl .flowbar__count,html.dl .flowbar__time{white-space:normal}
/* SVG figures carry a fixed viewBox, and the English label is longer than
   the Arabic; the outermost svg clips it. Say so rather than let a
   sentence run under the frame edge. */
html.dl .jvis svg{overflow:hidden}

/* the comparables table keeps its columns; at phone width it scrolls
   inside its own card rather than widening the page — the same rule the
   fifteen-column register already follows. */
@media (max-width:34rem){
  html.dl .comps{display:block;overflow-x:auto;max-inline-size:100%}
}

/* grid and flex items default to min-width:auto, so one wide child — a
   comparables table, a long English label — pushes its card past the
   page. Every track in the journey is told it may shrink. */
html.dl .jlayout,html.dl .journey,html.dl .jcard,html.dl .jcard>*{min-inline-size:0}
html.dl .jcard details,html.dl .jcard details>*{min-inline-size:0;max-inline-size:100%}

/* ============================================================
   PHASE 0.8 — the investor prototype (v0.3 model).
   One appended block; nothing above this line was touched.
   New surfaces: the Unit Guide entry (paste + chat form), the
   guide modules with epistemic marks, the consent gate, the
   accountability sheet, the developer view, and the walkthrough
   overlay. Same grammar: one pigment, hairlines, tone by density,
   aubergine for nothing but what is not known.
   ============================================================ */

/* ---- a guide module: one evidence block of the Unit Guide ---- */
.gmod{border:1px solid var(--rule);border-inline-start:4px solid var(--cobalt);background:var(--porcelain-2);padding:clamp(.9rem,2.6vw,1.4rem);margin-block-end:var(--gap)}
.gmod__top{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-block-end:.35rem}
.gmod__no{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--muted)}
.gmod h2{margin:.1rem 0 .3rem;font-size:clamp(1.2rem,2.4vw,1.55rem)}
.gmod>p{max-inline-size:46rem}
.gmod--unknown{border-inline-start-color:var(--unknown)}

/* ---- the epistemic mark: known · inferred · assumed · unknown ----
   The mark is a hairline chip in the mono voice. Three known-ish
   states stay in the one pigment and differ by line pattern; the
   fourth is the second pigment, because it alone means "we do not
   know", and it may never be anything else. */
.epi{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--cobalt);color:var(--cobalt-700);background:var(--porcelain-2);padding:.1rem .4rem;display:inline-block;white-space:nowrap}
.epi--inferred{border-style:dashed}
.epi--assumed{border-style:dotted}
.epi--unknown{border-style:dashed;border-color:var(--unknown);color:var(--unknown);background:var(--unknown-ground)}
.epi-line{font-size:.8rem;margin:.5rem 0 0;display:flex;gap:.45rem;flex-wrap:wrap;align-items:baseline}
.epi-line>span:not(.epi){color:var(--muted)}
.u-unk{color:var(--unknown)}

/* ---- a static evidence figure: the jvis grammar outside the pane ---- */
figure.jvis.gfig{position:static;inset:auto;opacity:1;visibility:visible;transform:none;border:1px solid var(--rule);background:var(--porcelain-2);margin:.6rem 0 0;max-inline-size:34rem}
figure.jvis.gfig svg{block-size:auto}

/* ---- the listing-history strip: ruled cells, the title-block grammar ---- */
.gstrip{display:flex;flex-wrap:wrap;border:1px solid var(--cobalt);margin:.6rem 0 0;max-inline-size:46rem}
.gstrip>div{flex:1 1 10rem;min-inline-size:0;padding:.5rem .7rem;border-inline-end:1px solid var(--cobalt-200)}
.gstrip>div:last-child{border-inline-end:0}
.gstrip .k{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-500)}
.gstrip .v{display:block;font-size:.95rem;margin-block-start:.15rem}

/* ---- the entry screen: paste row + the chat form ---- */
.paste{display:flex;gap:.5rem;flex-wrap:wrap;margin-block-start:.6rem}
.paste input{flex:1 1 16rem;min-inline-size:0;font:inherit;font-size:.95rem;font-family:var(--font-mono);padding:.6rem .7rem;border:1px solid var(--cobalt);background:var(--porcelain-2);color:var(--ink)}
.paste input:focus{outline:2px solid var(--cobalt);outline-offset:1px}
.samples{display:flex;gap:.45rem;flex-wrap:wrap;margin-block-start:.6rem}
.chat{border:1px solid var(--cobalt);background:var(--porcelain-2);padding:.9rem;display:grid;gap:.55rem;max-inline-size:26rem}
.chat__hd{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-500);border-block-end:1px solid var(--cobalt-200);padding-block-end:.4rem}
.chat__b{border:1px solid var(--cobalt-200);padding:.5rem .65rem;font-size:.85rem;max-inline-size:88%}
.chat__b--me{margin-inline-start:auto;border-color:var(--cobalt);background:var(--cobalt-050)}
.chat__b--bsr{margin-inline-end:auto;background:var(--porcelain)}
.chat__b .mono{font-size:.72rem;word-break:break-all}
.chat__meta{font-family:var(--font-mono);font-size:.58rem;color:var(--muted);display:block;margin-block-start:.25rem}

/* ---- the consent gate ---- */
.gatelist{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem;max-inline-size:36rem}
.gatelist label{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--cobalt-200);background:var(--porcelain-2);padding:.65rem .75rem;cursor:pointer}
.gatelist label:has(input:checked){border-color:var(--cobalt);border-inline-start-width:4px}
.gatelist input{margin-block-start:.25rem}
.gate-count{font-family:var(--font-mono);font-size:.78rem;color:var(--cobalt-700);margin-block-start:.5rem}

/* ---- outcome buttons on the leads inbox ---- */
.outbtns{display:flex;gap:.4rem;flex-wrap:wrap;margin-block-start:.45rem}
.outbtns button{font:inherit;font-size:.76rem;font-weight:600;background:var(--porcelain-2);color:var(--cobalt-700);border:1px solid var(--cobalt-200);padding:.28rem .6rem;cursor:pointer}
.outbtns button:hover{border-color:var(--cobalt)}
.outbtns button[aria-pressed="true"]{background:var(--cobalt);color:var(--porcelain-2);border-color:var(--cobalt)}
.outlog{font-size:.78rem;color:var(--cobalt-700);border-inline-start:3px solid var(--cobalt-200);padding-inline-start:.55rem;margin:.4rem 0 0}

/* ---- the developer fence line ---- */
.fence{border:2px solid var(--cobalt);padding:.8rem 1rem;font-weight:600;background:var(--porcelain-2);max-inline-size:46rem}

/* ---- the walkthrough overlay: the investor's captions ----
   A drawn plate pinned over every walk screen: a numbered cell in
   the mono voice, the caption, and the walk controls. No shadow,
   no rounding, one pigment. It sits above the DEMO bar and never
   covers the top bar. */
.wkt{position:fixed;z-index:80;inset-block-end:3.1rem;inset-inline-end:clamp(.6rem,2vw,1.6rem);inline-size:min(92vw,30rem);background:var(--porcelain);border:1px solid var(--cobalt);display:grid;grid-template-columns:auto minmax(0,1fr);outline:1px solid var(--cobalt);outline-offset:3px}
.wkt__no{font-family:var(--font-mono);font-weight:700;font-size:.95rem;color:var(--porcelain-2);background:var(--cobalt);padding:.55rem .6rem;display:flex;align-items:flex-start;justify-content:center;min-inline-size:3.2rem}
.wkt__body{padding:.65rem .8rem .6rem}
.wkt__cap{font-size:.88rem;margin:0}
.wkt__cap b{color:var(--cobalt-700)}
.wkt__row{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin-block-start:.55rem;border-block-start:1px solid var(--cobalt-200);padding-block-start:.5rem}
.wkt__row .spacer{flex:1}
.wkt__btn{font:inherit;font-size:.78rem;font-weight:600;background:var(--porcelain-2);color:var(--cobalt-700);border:1px solid var(--cobalt);padding:.3rem .7rem;cursor:pointer;text-decoration:none;display:inline-block}
.wkt__btn--solid{background:var(--cobalt);color:var(--porcelain-2)}
.wkt__btn--quiet{border-color:var(--cobalt-200);color:var(--muted)}
.wkt__where{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt-500);display:block;margin-block-end:.3rem}
@media (max-width:40rem){.wkt{inset-inline-start:.6rem;inset-inline-end:.6rem;inline-size:auto}}
html.reduce-motion .wkt{transition:none}