/* Loom Estate's own rules, over the Loom design system (web/theme/). Colours, space and radius are
   Loom's tokens; a class that begins lm- is Loom's recipe and le- is Estate's. */
/* Estate's own steps, where the Loom design system has none (EST-167). The type sizes are what the
   screens' own rules were written in; a rule that takes one of Loom's type tokens needs none of these,
   and holding all of Estate's CSS to Loom's values is EST-168. The focus ring is Loom's ember, renamed
   here only so a dark panel can set its own. */
:root {
  --le-focus-ring: var(--ember);
  --le-fs-body: 14px; --le-fs-caption: 12.5px; --le-fs-card-title: 15px; --le-fs-h1: 22px; --le-fs-h3: 16px; --le-fs-small: 13.5px; --le-fs-small-ui: 13px; --le-fs-stat: 26px; --le-fs-ui: 12px; --le-fs-ui-small: 11px; --le-lh-body: 1.55; --le-lh-ui: 1.5; --le-s-8: 64px;
}
/* Stacks and rows with a chosen gap (EST-163): Estate's own, on the design system's space steps.
   Loom's lm-stack and lm-row have one gap each (16 and 12 px); these keep the gaps the screens use.
   In a layer of their own, after Loom's: any other rule of Estate's still wins over them, as it did
   when they were the old system's and loaded first. */
@layer estate-base {
  .le-stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .le-stack--1 { gap: var(--space-1); } .le-stack--2 { gap: var(--space-2); } .le-stack--3 { gap: var(--space-3); } .le-stack--5 { gap: var(--space-6); } .le-stack--6 { gap: var(--space-8); }
  .le-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
  .le-row--2 { gap: var(--space-2); } .le-row--4 { gap: var(--space-4); } .le-row--between { justify-content: space-between; } .le-row--top { align-items: flex-start; }
  /* Bars that show how many stand where, and their legend (EST-163): Estate's own. Loom's bars
     are focus and context only; these carry status, which is one of the places it may show. */
  .le-bar { display: flex; gap: 2px; height: 12px; }
  .le-bar > span, .le-legend i { display: block; box-sizing: border-box; }
  .le-bar-focus { background: var(--data-focus); }
  .le-bar-context { background: var(--data-context-2); }
  .le-bar-done { background: var(--positive); }
  .le-bar-wait { background: var(--caution); box-shadow: inset 0 0 0 1px var(--caution-edge); }
  .le-bar-back { background-color: var(--critical); background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--surface-panel) 3px 4px), repeating-linear-gradient(-45deg, transparent 0 3px, var(--surface-panel) 3px 4px); }
  .le-bar-owed { background: repeating-linear-gradient(45deg, var(--data-context-2) 0 2px, var(--surface-sunken) 2px 5px); box-shadow: inset 0 0 0 1px var(--data-context-2); }
  .le-bar-later { background: transparent; box-shadow: inset 0 0 0 1px var(--data-context-2); }
  .le-bar-track { background: var(--data-track); }
  .le-bar-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); font: var(--type-small); color: var(--text-body); }
  .le-bar-head b { font-weight: 600; color: var(--text-strong); }
  .le-bar-head span:last-child { font: var(--type-id); color: var(--text-secondary); white-space: nowrap; }
  .le-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: var(--type-caption); color: var(--text-secondary); }
  .le-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
  .le-legend i { width: 16px; height: 12px; }
  /* Tables are Loom's (lm-table, EST-163). Estate's rows hold several lines (a name, its id, what to
     do), so a cell keeps its own padding and sits at the top; Loom's row is one line at 44 px. */
  .lm-table td { height: auto; padding-block: var(--space-3); vertical-align: top; }
  .lm-table tbody tr:hover td { background: var(--surface-hover); }

  /* ---- The rest of what the screens are made of (EST-164): Estate's own, on Loom's tokens. Each was the old
     system's recipe as Estate Slate restyled it; none has an equal in Loom, or Loom's is for something else. ---- */
  /* Headings: a section heading on the page is Loom's heading; inside a panel it is the panel's title. */
  .le-h2 { margin: 0; font: var(--type-heading); letter-spacing: var(--type-heading-tracking); color: var(--text-strong); }
  .lm-panel .le-h2 { font: var(--type-panel-title); letter-spacing: 0; }
  .le-h3 { margin: 0; font: var(--type-panel-title); color: var(--text-strong); }
  .le-meta { margin: 0; font: var(--type-small); color: var(--text-muted); }
  /* A page action beside a title: a quiet link with an arrow. */
  .le-link { display: inline-flex; align-items: center; min-height: var(--hit); font: var(--type-control); color: var(--text-body); text-decoration: none; }
  .le-link::after { content: "\2192"; display: inline-block; margin-inline-start: var(--space-1); color: var(--text-muted); transition: transform var(--motion-fast) var(--ease-out); }
  .le-link:hover { color: var(--text-strong); text-decoration: none; }
  .le-link:hover::after { transform: translateX(2px); color: var(--text-strong); }
  /* The verdict: the answer to the screen's question, in a sentence. Loom's answer line is larger (18 px);
     Estate's verdicts run to two or three lines, so they keep the reading size. */
  .le-verdict { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; font: var(--type-body); color: var(--text-strong); }
  .le-verdict strong { font-weight: 600; }
  .le-verdict::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; background: var(--ember); transform: rotate(45deg); }
  /* The segmented control: Loom's look, for links as well as buttons (a view switch here changes the address). */
  .le-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border-radius: var(--radius-control); }
  .le-seg a, .le-seg button { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-inner); background: transparent; color: var(--text-secondary); font: var(--type-control); text-decoration: none; cursor: pointer; }
  .le-seg a:hover, .le-seg button:hover { color: var(--text-strong); }
  .le-seg a[aria-pressed="true"], .le-seg button[aria-pressed="true"] { background: var(--surface-panel); color: var(--text-strong); font-weight: 600; box-shadow: var(--shadow-thumb); }
  .le-seg:has(> :only-child) { background: transparent; padding: 0; }
  .le-seg:has(> :only-child) > [aria-pressed="true"] { background: var(--surface-sunken); box-shadow: none; }
  /* A grid of equal columns. */
  .le-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .le-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .le-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .le-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 760px) { .le-grid--2, .le-grid--3, .le-grid--4 { grid-template-columns: minmax(0, 1fr); } }
  /* A tag with an ink edge, beside Loom's lm-tag. */
  .lm-tag.le-tag-outline { background: transparent; border: 1px solid var(--text-strong); color: var(--text-strong); }
  /* Severity, as the advisory gives it: bars, never a status colour (EST-08R). */
  .le-sev { --sev-2: var(--data-track); --sev-3: var(--data-track); --sev-4: var(--data-track); display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-tag); background: var(--surface-sunken); color: var(--text-secondary); font: var(--type-pill); white-space: nowrap; }
  .le-sev::before { content: ""; flex: none; width: 3px; height: 9px; margin-right: 15px; background: currentColor; box-shadow: 5px 0 0 var(--sev-2), 10px 0 0 var(--sev-3), 15px 0 0 var(--sev-4); }
  .le-sev--critical { --sev-2: currentColor; --sev-3: currentColor; --sev-4: currentColor; color: var(--text-strong); }
  .le-sev--high { --sev-2: currentColor; --sev-3: currentColor; color: var(--text-strong); }
  .le-sev--medium { --sev-2: currentColor; color: var(--text-body); }
  /* The timeline. */
  .le-timeline { list-style: none; margin: 0; padding: 0; }
  .le-event { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: 0 0 var(--space-6) var(--space-8); }
  .le-event::before { content: ""; position: absolute; left: 0; top: 5px; box-sizing: border-box; width: 10px; height: 10px; background: var(--data-context-1); }
  .le-event::after { content: ""; position: absolute; left: 4px; top: 21px; bottom: var(--space-1); width: 2px; background: var(--data-track); }
  .le-event:last-child { padding-bottom: 0; } .le-event:last-child::after { display: none; }
  .le-event--now::before { background: var(--ember); transform: rotate(45deg); }
  .le-event--ahead::before { background: transparent; border: 1px solid var(--data-context-3); }
  .le-event--owed::before { background: repeating-linear-gradient(45deg, var(--data-context-2) 0 1px, transparent 1px 3px); border: 1px solid var(--data-context-2); }
  .le-event-when { font: var(--type-strip); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text-muted); }
  .le-event-what { margin: 0; font: var(--type-dense); font-weight: 600; color: var(--text-strong); }
  .le-event-detail { margin: var(--space-1) 0 0; font: var(--type-small); color: var(--text-secondary); }
  .le-event--now .le-event-when { color: var(--text-strong); font-weight: 600; }
  @media (max-width: 600px) { .le-event { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
  /* A select is Loom's (lm-select in its lm-select-wrap, which draws the arrow; EST-16G). In a field the wrap
     fills it; in a row or a table cell it is as wide as the choice. */
  .lm-select-wrap { display: block; min-width: 0; }
  .le-row > .lm-select-wrap, td > .lm-select-wrap { display: inline-block; }
  .le-row > .lm-select-wrap > .lm-select, td > .lm-select-wrap > .lm-select { width: auto; max-width: 100%; }
}
html, body { height: 100%; }
body { margin: 0; background: var(--surface-ground); color: var(--text-body); font-family: var(--font-sans); }
/* Night is <html data-theme="dark"> (web/theme-pref.js sets it from the device): native controls follow. */
[data-theme="dark"] { color-scheme: dark; }

/* ---- From Estate Slate (EST-167): what its first file still said once its tokens and its restyles of the
   old recipes were gone. The help patterns (the (i), a defined word, a source chip, an expandable row, the
   demo notes) and a few rules for the shell, written with Loom's tokens. ---- */
body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.le-sh-h1 { font: 600 var(--le-fs-h1)/1.25 var(--font-sans); letter-spacing: -.2px; }
.le-sh-product-name, .le-sh-rail-logo span { font: 600 15px/1 var(--font-sans); letter-spacing: 0; }
.le-sh-topbar { background: var(--surface-panel); }
.le-sh-rail-item { border-radius: 6px; }
.le-sh-rail-item[aria-current="page"]::before { background: var(--ember); left: -6px; }
.le-sh-rail-heading { font-size: 10.5px; }
.le-sh-count { border-radius: 9px; background: var(--surface-sunken); color: var(--text-body); }
.le-sh-rail .le-sh-count { background: var(--rail-text-current); color: var(--rail-bg); font-weight: 600; }
.le-sh-avail { border-radius: 4px; font-family: var(--font-sans); font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.le-sheet-sec .le-sheet-item { text-decoration: underline; text-decoration-color: var(--line-control); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.le-sheet-sec .le-sheet-item:hover { color: var(--text-strong); text-decoration-color: var(--text-strong); text-decoration-thickness: 2px; }
.le-sh-h1 em { font-style: normal; color: inherit; }
.le-now { color: var(--text-strong); font-weight: 600; }
.le-sh-rail-heading { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.le-sh-topbar .le-avail { order: 3; flex: 1 1 100%; font-size: 11.5px; }
.rf .lm-priority { font-family: Inter, Arial, sans-serif; background: #052540; border-color: #052540; }
.le-titlerow { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.le-tip, .le-term, .le-src { position: relative; display: inline-block; vertical-align: middle; }
.le-tip > summary, .le-term > summary, .le-src > summary { list-style: none; cursor: pointer; }
.le-tip > summary::-webkit-details-marker, .le-term > summary::-webkit-details-marker, .le-src > summary::-webkit-details-marker { display: none; }
.le-tip > summary { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text-muted); }
.le-tip > summary:hover, .le-tip[open] > summary { color: var(--text-strong); background: var(--surface-sunken); }
.le-tip > summary:focus-visible, .le-term > summary:focus-visible, .le-src > summary:focus-visible, .le-xrow > summary:focus-visible, .le-notes-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.le-tip-body { position: absolute; z-index: 30; top: calc(100% + 6px); left: -8px; width: 320px; max-width: 80vw; padding: 12px 14px; background: var(--surface-panel); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-pop); font: 400 13px/1.5 var(--font-sans); color: var(--text-body); text-align: left; white-space: normal; letter-spacing: 0; text-transform: none; }
.le-tip-body b { font-weight: 600; color: var(--text-strong); }
.le-tip-body p { margin: 0; }
.le-tip-body p + p { margin-top: 6px; }
.le-tip-body .le-tip-k { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text-strong); }
.le-tip--end .le-tip-body, .le-src--end .le-tip-body, .le-term--end .le-tip-body { left: auto; right: -8px; }
.le-term > summary { display: inline; text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; cursor: help; }
.le-term > summary:hover { text-decoration-color: var(--text-strong); }
.le-src > summary { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface-panel); font: 500 11.5px/1 var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.le-src > summary:hover, .le-src[open] > summary { border-color: var(--text-secondary); color: var(--text-strong); }
.le-src-ids { display: block; margin-top: 4px; font: 400 11.5px/1.5 var(--font-mono); color: var(--text-secondary); }
.le-xrow { border-top: 1px solid var(--line-hairline); }
.le-xrow > summary { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto 16px; gap: var(--space-3); align-items: center; padding: 10px 8px; margin: 0 -8px; border-radius: 4px; }
.le-xrow > summary:hover { background: var(--surface-sunken); }
.le-xrow-name { font: 600 var(--le-fs-small)/1.3 var(--font-sans); color: var(--text-strong); }
.le-xrow-id { display: block; margin-top: 2px; font: 400 var(--le-fs-ui-small)/1.4 var(--font-mono); color: var(--text-muted); }
.le-xrow-gist { font: 400 var(--le-fs-small-ui)/1.4 var(--font-sans); color: var(--text-secondary); }
.le-chev { width: 16px; height: 16px; color: var(--text-muted); transition: transform .15s ease; }
.le-xrow[open] .le-chev { transform: rotate(180deg); }
.le-xrow-body { display: flex; flex-direction: column; gap: var(--space-2); padding: 2px 0 var(--space-3); font: 400 var(--le-fs-small-ui)/1.5 var(--font-sans); color: var(--text-body); }
.le-xrow-body .le-xrow-act { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
@media (max-width: 700px) {
  .le-xrow > summary { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .le-xrow-gist { grid-column: 1 / -1; grid-row: 2; }
}
.le-notes-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-panel); font: 500 12px/1 var(--font-sans); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.le-notes-btn:hover { border-color: var(--text-secondary); color: var(--text-strong); }
.le-notes-btn[aria-pressed="true"] { background: var(--rail-bg); border-color: var(--rail-bg); color: var(--rail-text-current); }
.le-notes-btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-disabled); }
.le-notes-btn[aria-pressed="true"] i { background: var(--ember); }
.le-demo, .le-demo--bar { display: none !important; }
.le-notes-on .le-demo { display: flex !important; gap: var(--space-3); align-items: flex-start; padding: 12px 16px; background: var(--rail-bg); color: var(--rail-text-current); border-radius: 8px; box-shadow: inset 3px 0 0 var(--ember); font: 400 13px/1.5 var(--font-sans); }
.le-notes-on .le-demo--bar { display: flex !important; }
.le-demo b { color: var(--rail-text-current); font-weight: 600; }
.le-demo a { color: var(--rail-text-current); text-decoration-color: var(--rail-heading); }
.le-demo a:hover { text-decoration-color: var(--rail-text-current); }
.le-demo-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ember-fill); color: var(--on-ember); font: 600 11.5px/1 var(--font-sans); }
.le-demo-k { display: block; margin-bottom: 2px; font: 600 11.5px/1.4 var(--font-sans); color: var(--rail-text); }
.le-demo .le-sh-avail { flex: none; }
/* Links are styled by the Loom design system's base rule (lm-root): ink, a grey underline that
   darkens on hover. Estate writes no bare `a` rule: unlayered, it would beat every Loom recipe set
   on a link (a chip, a button). */
#main:focus { outline: none; }
:where(h2, h3) { font-weight: 600; color: var(--text-strong); }
.le-app { min-height: 100vh; }
.le-muted { color: var(--text-muted); }
.le-soft { color: var(--text-secondary); }
.le-fs13 { font-size: var(--le-fs-small-ui); }
.le-fs14 { font-size: var(--le-fs-small); }
.le-b { font-weight: 600; }
.le-mono, .le-id { font-family: var(--font-mono); }
.le-id { font-size: var(--le-fs-ui-small); color: var(--text-muted); }
.le-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.le-card-link { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; }
.le-card-link:hover { border-color: var(--line-control); }
.le-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.le-card-name { font: 600 var(--le-fs-card-title)/1.3 var(--font-sans); color: var(--text-strong); }
.le-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--le-fs-small-ui); color: var(--text-secondary); }
.le-xrow-body ul { margin: 0; padding-left: 18px; }
.le-ev { display: inline-flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.le-empty { padding: var(--space-4); border: 1px dashed var(--line-hairline); border-radius: 8px; color: var(--text-muted); font-size: var(--le-fs-small-ui); }
.le-foot { box-sizing: border-box; max-width: 1320px; margin: 0 auto; padding: 0 var(--space-6) var(--space-8); color: var(--text-muted); font-size: var(--le-fs-caption); }
.le-clock { font: 700 var(--le-fs-stat)/1.1 var(--font-sans); color: var(--text-strong); }
.le-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* A filter is a link (it changes the address), drawn as Loom's chip: no underline. */
a.lm-chip { text-decoration: none; }
.le-sync { font-size: var(--le-fs-caption); color: var(--text-muted); }
.le-sync b { color: var(--text-strong); font-weight: 600; }
.le-sync .is-stale { color: var(--caution-text); font-weight: 600; }
.le-phase { display: flex; gap: 4px; }
.le-phase span { flex: 1; height: 6px; border-radius: 3px; background: var(--data-track); }
.le-phase span.done { background: var(--text-secondary); }
.le-phase span.now { background: var(--ember); }
.le-scroll { overflow-x: auto; }
.le-sh-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2) 0; color: var(--text-secondary); text-decoration: none; font-size: var(--le-fs-ui-small); }
.le-sh-tabbar a[aria-current="page"] { color: var(--text-strong); font-weight: 600; }
.le-sh-tabbar svg { width: 22px; height: 22px; }
.le-inset { padding: var(--space-4); background: var(--surface-ground); border: 1px solid var(--line-hairline); border-radius: 8px; }
.le-kvgrid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; font: 400 var(--le-fs-small-ui)/1.45 var(--font-sans); }
@media (max-width: 560px) { .le-kvgrid { grid-template-columns: minmax(0, 1fr); } }
.le-funnel { display: grid; grid-template-columns: minmax(0, 1.3fr) 32px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
@media (max-width: 600px) { .le-funnel { grid-template-columns: minmax(0, 1fr) 32px; } .le-funnel > .le-bar { grid-column: 1 / -1; } }
.le-tag { display: inline-block; margin: 2px 0; background: var(--surface-sunken); font-size: var(--le-fs-small-ui); }
.le-sh-env.le-env--rehearsal { background: var(--caution-dim); color: var(--caution-text); }
#sync .le-seg a { min-height: 32px; padding: 0 var(--space-3); }
/* Phone (EST-007): timelines stack the time above the event. Filter chips wrap (MOB-18), so none
   hides off the edge. */
@media (max-width: 600px) {
}
/* Stale, never green (EST-019): greens turn grey while Kosli has not been read. */
:root.le-stale:not([data-theme="none"]):not(.x) { --positive: var(--text-muted); --positive-text: var(--text-secondary); --positive-dim: var(--surface-sunken); }
.le-sh-env.le-env--stale { background: var(--caution-dim); color: var(--caution-text); font-weight: 600; }
html.le-stale .lm-pill--positive { background: var(--text-muted); color: var(--surface-panel); }
/* EST-117: the screens themselves draw stale greens grey (web/ui.js), and every header says so. */
.le-stale-mark { color: var(--caution-text); font-weight: 600; }
.le-bar-stale { background: var(--text-muted); }
/* Decisions (EST-040): ask, decide, sign, assess. */
.le-dec { margin-top: var(--space-2); }
.le-dec > summary { cursor: pointer; font-size: var(--le-fs-small-ui); list-style: none; }
.le-dec > summary::-webkit-details-marker { display: none; }
.le-dec-form { margin-top: var(--space-2); padding: var(--space-3); background: var(--surface-sunken); border-radius: 8px; max-width: 520px; }
.le-dec-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--le-fs-small-ui); color: var(--text-body); }
.le-dec-form label.le-cap { flex-direction: row; align-items: center; gap: var(--space-2); }
.le-dec-form input[type="text"], .le-dec-form input[type="datetime-local"], .le-dec-form select, .le-dec-note { font: inherit; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-field); color: var(--text-strong); min-width: 0; }
.le-dec-act { margin-top: var(--space-2); flex-wrap: wrap; }
.le-dec-note { flex: 1 1 160px; }
.le-dec-state { margin-top: 4px; }
/* Decisions you can trust (EST-08A): the until day and time, the confirmation in place, the held
   outcome, the decision a link lands on, the sign-off's statements. */
.le-dec-until { margin: 0; padding: 0; border: 0; min-width: 0; }
.le-dec-until legend { padding: 0; margin-bottom: 4px; font-size: var(--le-fs-small-ui); color: var(--text-body); }
.le-dec-until .le-row { flex-wrap: wrap; align-items: flex-end; }
.le-dec-until label { flex: 0 1 auto; }
.le-dec-act[hidden] { display: none; }
.le-dec-confirm { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--line-strong); border-left: 3px solid var(--ember); border-radius: 8px; background: var(--surface-panel); max-width: 620px; }
.le-dec-confirm p { margin: 0; }
.le-dec-confirm .le-row { flex-wrap: wrap; }
.le-dec-err:empty { display: none; }
.le-dec-note[aria-invalid="true"] { border-color: var(--critical); box-shadow: 0 0 0 1px var(--critical); }
.le-hl, tr.le-hl > td { background: var(--caution-dim); }
.le-hl { box-shadow: inset 3px 0 0 var(--ember); }
tr.le-hl > td:first-child { box-shadow: inset 3px 0 0 var(--ember); }
.le-dec-done { box-shadow: inset 3px 0 0 var(--ember); }
.le-sign-form { max-width: 720px; }
.le-sign-form .le-st { gap: 4px; }
.le-sign-form textarea { box-sizing: border-box; width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-field); color: var(--text-strong); resize: vertical; }
.le-toast { position: fixed; z-index: 30; left: 50%; bottom: var(--space-6); transform: translateX(-50%); box-sizing: border-box; width: max-content; max-width: min(640px, calc(100vw - 32px)); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 8px; background: var(--text-strong); color: #fff; box-shadow: 0 6px 24px rgba(11, 13, 16, .25); font-size: var(--le-fs-small-ui); }
.le-toast[hidden] { display: none; }
.le-toast--critical { border-left: 4px solid var(--critical); }
.le-toast--positive { border-left: 4px solid var(--positive); }
.le-toast-t { min-width: 0; overflow-wrap: anywhere; }
.le-toast .le-toast-x { flex: none; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.le-me { font-size: var(--le-fs-caption); color: var(--text-secondary); white-space: nowrap; }
.le-me a { color: inherit; }
/* Glossary (EST-081): links from popovers, and the Glossary screen. */
.le-tip-more { display: block; margin-top: 6px; font-weight: 600; }
.le-gl { margin: 0; }
.le-gl-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line-hairline); scroll-margin-top: var(--space-8); }
.le-gl-row dt { display: flex; flex-direction: column; gap: 2px; color: var(--text-strong); }
.le-gl-row dd { margin: 0; }
.le-gl-row.is-focus { box-shadow: inset 3px 0 0 var(--ember); padding-left: var(--space-3); background: var(--surface-sunken); }
.le-gl-group { scroll-margin-top: var(--space-8); }
.le-gl-group > h2 { padding-bottom: var(--space-3); }
.le-gl-q { min-width: 240px; }
@media (max-width: 600px) { .le-gl-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } .le-gl-q { min-width: 0; width: 100%; } }
/* Findings (EST-009): filters by estate, exception state and kind. */
.le-fl { flex: 1 1 200px; min-width: 0; gap: var(--space-1); }

/* Accessibility (EST-082): a skip link for keyboard users, and a visible focus ring on scroll
   regions that take focus because they overflow. */
.le-skip { position: absolute; left: 8px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--surface-panel); color: inherit; border: 2px solid currentColor; border-radius: 6px; }
.le-skip:focus { top: 8px; }
.le-scroll:focus-visible, pre:focus-visible { outline: 2px solid var(--le-focus-ring); outline-offset: 2px; }

/* ---- Phone navigation and header (EST-087) ------------------------------------------------- */
.le-mode, .le-ph-mark, .le-env-short, .le-tab-more, .le-ph-only, .le-sm-only { display: none; }
/* (i): a 44 px hit area around the 24 px icon, without growing it */
.le-tip > summary { position: relative; }
.le-tip > summary::after { content: ""; position: absolute; inset: -10px; }
/* The page heading's (i) stays on the heading's last line (MOB-17): the h1 is inline and keeps
   room for the (i) after its last word; the (i) takes that room back, so it never wraps alone. */
.le-titlerow--h1 { display: block; font: 600 var(--le-fs-h1)/1.25 var(--font-sans); }
.le-titlerow--h1 > .le-sh-h1 { display: inline; padding-right: 32px; }
.le-titlerow--h1 > .le-tip { margin-left: -24px; vertical-align: top; top: -1px; }
/* Popovers open upward when there is no room below (MOB-14). */
.le-tip-body.le-tip-body--up { top: auto; bottom: calc(100% + 6px); }
.le-tip-body[style*="max-height"] { overflow-y: auto; }
/* A rail that fits the window stays in view while the page scrolls (MOB-13). */
@media (max-width: 900px) and (min-height: 900px) { .le-sh-rail { position: sticky; top: 0; align-self: flex-start; min-height: 100vh; } }

@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) {
  .le-sh-rail { display: none; }
  /* Strip: one line */
  .le-sh-env { justify-content: flex-start; padding: 3px var(--space-4); letter-spacing: .04em; }
  .le-env-long { display: none; }
  .le-env-t { justify-content: flex-start; text-align: left; }
  .le-env-short { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .le-env-reh { font-weight: 700; }
  /* One 48 px bar: the mark, the name, and a Live or Rehearsal pill that explains itself */
  .le-sh-topbar { flex-wrap: nowrap; min-height: 48px; padding: 0 var(--space-2) 0 var(--space-4); gap: var(--space-2); }
  .le-sh-topbar .le-sh-product-by, #avail, #sync, .le-dp, .le-me-top, .le-top-gap { display: none; }
  .le-sh-topbar .le-sh-product { display: inline-flex; align-items: center; }
  .le-ph-mark { display: inline-flex; color: var(--text-strong); }
  .le-mode { display: block; margin-left: auto; }
  .le-mode .le-tip > summary { width: auto; height: 44px; padding: 0 var(--space-2); border-radius: 0; background: none; }
  .le-mode .le-tip > summary::after { content: none; }
  .le-ph-only { display: revert; }
  /* Section headings keep their (i) on the last line too */
  .le-titlerow:not(.le-titlerow--h1) { display: block; }
  .le-titlerow:not(.le-titlerow--h1) > :is(h2, h3) { display: inline; padding-right: 32px; }
  .le-titlerow:not(.le-titlerow--h1) > .le-tip { margin-left: -24px; }
  .le-tip-reads { padding-top: 6px; border-top: 1px solid var(--line-hairline); }
  .le-sh-page { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-4); }
  .le-paper, .scr-b .le-paper { padding: 0; gap: var(--space-4); }
  .le-foot { padding: 0 var(--space-4) var(--space-6); }
  /* Tab bar: four tabs by role, then More; safe-area padding, not a fixed 24 px */
  .le-sh-tabbar.le-sh-tabbar--auto { display: grid; position: sticky; bottom: 0; z-index: 5; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 var(--space-1) max(8px, env(safe-area-inset-bottom)); }
  .le-sh-tabbar a, .le-tab-more { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 6px 0; color: var(--text-secondary); font: 400 var(--le-fs-ui-small)/1.1 var(--font-sans); text-align: center; text-decoration: none; }
  .le-tab-more { width: 100%; border: 0; background: none; cursor: pointer; }
  .le-tab-more svg { width: 22px; height: 22px; }
  .le-sh-tabbar a[aria-current="page"], .le-tab-more[aria-current="page"] { color: var(--text-strong); font-weight: 600; }
  .le-sh-tabbar a[aria-current="page"]::before, .le-tab-more[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: var(--ember); }
  .le-sh-tabbar .le-sh-count { background: var(--action-ink); color: var(--on-action-ink); }
  .le-tab-more:focus-visible, .le-sh-tabbar a:focus-visible { outline: 2px solid var(--le-focus-ring); outline-offset: -2px; }
  /* 44 px targets (MOB-11) */
  .lm-btn, .lm-chip, .le-seg a, .le-seg button { min-height: var(--hit); }
  /* Phone text (MOB-15): captions at least 13 px, body 15 px */
  .lm-pill { height: 24px; font-size: 13px; }
  .lm-priority { height: 22px; font-size: 13px; }
  .lm-table th, .lm-label, .le-sev, .le-sh-avail, .le-src > summary, .le-src-ids, .le-notes-btn, .le-demo-k { font-size: 13px; }
  .le-src > summary { height: 28px; }
  .le-tip-body { font-size: 14px; }
}

/* The More sheet: every screen, full height, over the page */
.le-sheet { position: fixed; inset: 0; z-index: 50; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) max(var(--space-8), env(safe-area-inset-bottom)); background: var(--surface-ground); color: var(--text-body); font: 400 15px/1.45 var(--font-sans); }
.le-sheet[hidden] { display: none; }
html.le-sheet-on, html.le-sheet-on body { overflow: hidden; }
.le-sheet-head { position: sticky; top: calc(-1 * max(var(--space-3), env(safe-area-inset-top))); z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: 0 calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4); background: var(--surface-ground); border-bottom: 1px solid var(--line-hairline); }
.le-sheet-x { min-height: var(--hit); }
.le-sheet-h { margin: var(--space-4) 0 var(--space-2); font: 600 13px/1.3 var(--font-sans); color: var(--text-muted); }
.le-sheet-list { list-style: none; margin: 0; padding: 0; background: var(--surface-panel); border: 1px solid var(--line-hairline); border-radius: 8px; }
.le-sheet-list li + li { border-top: 1px solid var(--line-hairline); }
.le-sheet-item { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3); color: var(--text-strong); font: 500 16px/1.3 var(--font-sans); text-decoration: none; }
.le-sheet-item svg { flex: none; color: var(--text-secondary); }
.le-sheet-item:hover { color: var(--text-strong); background: var(--surface-sunken); }
.le-sheet-item[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--ember); background: var(--surface-sunken); }
.le-sheet-item .le-sh-count { margin-left: auto; background: var(--action-ink); color: var(--on-action-ink); }
.le-sheet-item:focus-visible { outline: 2px solid var(--le-focus-ring); outline-offset: -2px; }
.le-sheet-sec { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--surface-panel); border: 1px solid var(--line-hairline); border-radius: 8px; }
.le-sheet-sec .le-seg { align-self: flex-start; }
.le-sheet-sec .le-seg a { min-height: var(--hit); }
.le-sheet-sec .le-sheet-item { padding: 0; color: var(--text-strong); }
.le-sheet-who { display: flex; flex-direction: column; gap: 2px; font: 600 16px/1.3 var(--font-sans); color: var(--text-strong); }
.le-mode-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-panel); color: var(--text-strong); font: 600 13px/1 var(--font-sans); white-space: nowrap; }
.le-mode-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.le-mode-pill--rehearsal, .le-mode-pill--stale { background: var(--caution-dim); border-color: var(--caution-edge); color: var(--caution-text); }
.le-mode .le-tip[open] .le-mode-pill, .le-mode .le-tip > summary:hover .le-mode-pill { border-color: var(--text-strong); }

/* ---- Phone tables and cards (EST-088), portrait and landscape --------------------------------- */
@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) {
  .le-sm-only { display: revert; }
  .le-sm-hide { display: none !important; }
  /* Rows become stacked cards: the first cell is the title, the status cell sits top right, every
     other cell is a label and its value. A bar, a form or a note takes the card's full width. */
  .le-scroll:has(> table.lm-table:not(.le-keep)) { overflow: visible; }
  table.lm-table:not(.le-keep) { display: block; min-width: 0 !important; }
  table.lm-table:not(.le-keep) > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.lm-table:not(.le-keep) > tbody { display: flex; flex-direction: column; gap: var(--space-2); }
  table.lm-table:not(.le-keep) > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); padding: var(--space-3); background: var(--surface-panel); border: 1px solid var(--line-hairline); border-radius: 8px; }
  table.lm-table:not(.le-keep) > tbody > tr > * { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(84px, 32%) minmax(0, 1fr); gap: 2px var(--space-3); min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; white-space: normal; text-align: left; }
  table.lm-table:not(.le-keep) > tbody > tr > *::before { content: attr(data-label); font: 600 13px/1.45 var(--font-sans); color: var(--text-muted); }
  table.lm-table:not(.le-keep) > tbody > tr > :not([data-label]) { display: block; }
  table.lm-table:not(.le-keep) > tbody > tr > :not([data-label])::before { content: none; }
  table.lm-table:not(.le-keep) > tbody > tr > :empty { display: none; }
  table.lm-table:not(.le-keep) > tbody > tr > :first-child { grid-column: 1; grid-row: 1; display: block; font-size: var(--le-fs-card-title); }
  table.lm-table:not(.le-keep) > tbody > tr > :first-child::before { content: none; }
  table.lm-table:not(.le-keep) > tbody > tr:not(:has(> .le-td-status)) > :first-child { grid-column: 1 / -1; }
  table.lm-table:not(.le-keep) > tbody > tr > .le-td-status { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 46vw; text-align: right; }
  table.lm-table:not(.le-keep) > tbody > tr > .le-td-status::before { content: none; }
  table.lm-table:not(.le-keep) > tbody > tr > :is(:has(.le-bar), :has(.le-dec-act), :has(.le-dec), :has(form)) { grid-template-columns: minmax(0, 1fr); }
  .le-ph-pill { float: right; margin: 0 0 var(--space-1) var(--space-2); }
  /* A table that stays a table: frozen first column, faded scroll edges */
  .le-scroll--keep { background: linear-gradient(to right, var(--surface-panel) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(to left, var(--surface-panel) 30%, transparent) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(11, 13, 16, .2), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(11, 13, 16, .2), transparent) right / 12px 100% no-repeat scroll; }
  table.le-keep > * > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-panel); box-shadow: inset -1px 0 0 var(--line-hairline); }
  /* Decision forms: phone-sized fields, full width (MOB-10) */
  .le-dec > summary { display: flex; align-items: center; min-height: var(--hit); }
  .le-dec-form { max-width: none; padding: var(--space-3); }
  .le-dec-form label { font-size: 15px; }
  .le-dec-form input[type="text"], .le-dec-form input[type="datetime-local"], .le-dec-form select, .le-dec-note { box-sizing: border-box; width: 100%; min-height: var(--hit); padding: 8px 10px; font-size: 16px; }
  .le-dec-form label.le-cap { min-height: var(--hit); padding: var(--space-1) 0; color: var(--text-body); cursor: pointer; }
  .le-dec-form input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; }
  .le-dec-act .le-dec-note { flex: 1 1 100%; }
  .le-dec-act .lm-btn { flex: 1 1 0; min-height: var(--hit); }
  table.lm-table:not(.le-keep) > tbody > tr.le-hl { background: var(--caution-dim); }
  table.lm-table:not(.le-keep) > tbody > tr.le-hl > td { background: transparent; box-shadow: none; }
  .le-dec-confirm { max-width: none; }
  .le-dec-confirm .lm-btn { flex: 1 1 auto; min-height: var(--hit); }
  .le-dec-until label { flex: 1 1 140px; }
  .le-sign-form textarea { font-size: 16px; }
  .le-toast { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); transform: none; width: auto; max-width: none; }
  .le-toast .le-toast-x { min-height: var(--hit); }
}
/* Waiting decisions as cards on the phone (MOB-02) */
.le-dcards { display: flex; flex-direction: column; gap: var(--space-2); }
.le-dcard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--surface-panel); border: 1px solid var(--line-hairline); border-radius: 8px; }
.le-dcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.le-dcard-tags { display: inline-flex; flex: none; align-items: center; }
.le-dcard-what { font: 600 var(--le-fs-card-title)/1.35 var(--font-sans); color: var(--text-strong); overflow-wrap: anywhere; }
.le-dcard dl { display: grid; grid-template-columns: minmax(84px, 32%) minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; }
.le-dcard dt { font: 600 13px/1.45 var(--font-sans); color: var(--text-muted); }
.le-dcard dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* One decision from a DEC link, and its Kosli record (EST-060) */
.le-dec-focus { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; }
.le-dec-focus dt { font: 600 13px/1.45 var(--font-sans); color: var(--text-muted); }
.le-dec-focus dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.le-dec-kosli .le-mono { overflow-wrap: anywhere; }

/* ---- Wayfinding (EST-08B) ------------------------------------------------------------------- */
/* System search in the header (IA-20); on the phone it is in the More sheet instead */
.le-find-top { display: flex; align-items: center; }
.le-find { display: flex; flex-direction: column; gap: 2px; }
.le-find .lm-input { min-width: 200px; min-height: 36px; padding: 0 var(--space-3); font: 400 var(--le-fs-small-ui)/1 var(--font-sans); }
.le-find-msg:empty { display: none; }
.le-sheet-find { margin-top: var(--space-3); }
.le-sheet-find .lm-input { width: 100%; box-sizing: border-box; min-height: var(--hit); font-size: 16px; }
/* Estate pickers in a screen's header */
.le-switch .lm-select { min-height: 36px; font: 600 var(--le-fs-small-ui)/1 var(--font-sans); }   /* the padding is Loom's: it keeps the words clear of the arrow */
/* Breadcrumb: the current screen is plain, every step above it a link */
.le-crumbs [aria-current="page"] { color: var(--text-body); }
/* A tile that links to what it counts (IA-21) */
a.le-tile-link { color: inherit; text-decoration: none; }
a.le-tile-link:hover { border-color: var(--line-control, var(--text-secondary)); }
a.le-tile-link:focus-visible { outline: 2px solid var(--le-focus-ring); outline-offset: 2px; }
/* A place a link points at (obligation, item to decide, reconciliation): marked when arrived at */
[data-focus] { scroll-margin-top: var(--space-8); }
[data-focus].is-focus:not(tr, section) { box-shadow: inset 3px 0 0 var(--ember); background: var(--surface-sunken); padding-left: var(--space-3); }
tr[data-focus].is-focus > * { background: var(--surface-sunken); }
tr[data-focus].is-focus > :first-child { box-shadow: inset 3px 0 0 var(--ember); }
section[data-focus].is-focus > .lm-panel { box-shadow: 0 0 0 2px var(--ember); }
/* "All N" and other lists that open in place */
.le-more > summary { cursor: pointer; padding: var(--space-2) 0; font-size: var(--le-fs-small-ui); list-style: none; }
.le-more > summary::-webkit-details-marker { display: none; }
.le-more > summary::before { content: "+ "; }
.le-more[open] > summary::before { content: "− "; }
.le-plain { margin: var(--space-2) 0 0; padding-left: 18px; }
.le-plain li + li { margin-top: 4px; }
@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) {
  .le-find-top { display: none; }
  .le-more > summary { display: flex; align-items: center; min-height: var(--hit); }
  .le-switch, .le-switch .lm-select { min-height: var(--hit); width: 100%; box-sizing: border-box; font-size: 16px; }
  .le-hd-act .le-find { flex: 1 1 100%; }
  .le-hd-act .le-find .lm-input { width: 100%; box-sizing: border-box; min-height: var(--hit); font-size: 16px; }
  /* The estate's status tiles in a 2 × 2 grid (MOB-08); a fifth spans the row */
  .le-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .le-tiles-4 > :nth-child(5) { grid-column: 1 / -1; }
  [data-focus].is-focus:is(tr) { box-shadow: inset 3px 0 0 var(--ember); }
}
@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) {
  .le-hd-act .le-find-wrap { flex: 1 1 100%; }
}

/* ---- Visual consistency (EST-08C) ------------------------------------------------------------- */
/* hidden means hidden, whatever display a class gives (UI-02: the glossary rows are grids) */
[hidden] { display: none !important; }
/* Focus is an ink ring, never ember (ember reads as an error, UI-30) and never blue (EST-12Y). #0b0d10
   is 19.2:1 on white and 18.1:1 on the page; on the ink rail, the radar and the toast bone (#edebe6,
   15.6:1 on #16181c). */
.le-sh-rail, .rd-scope, .le-toast, .le-notes-on .le-demo { --le-focus-ring: var(--rail-text-current); }
.le-tip > summary:focus-visible, .le-term > summary:focus-visible, .le-src > summary:focus-visible, .le-xrow > summary:focus-visible, .le-notes-btn:focus-visible { outline-color: var(--le-focus-ring); }
/* Status colours are for control status only (UI-11). Workflow states and data agreement: ink. */
.lm-pill.le-wf { background: var(--surface-panel); color: var(--text-strong); border-color: var(--text-secondary); }
.lm-pill.le-wf--strong { background: var(--action-ink); color: var(--on-action-ink); border-color: var(--action-ink); }
/* The priority chip is Loom's (lm-priority); Estate sets it before a title, so it keeps its gap. */
.lm-priority { margin-right: 6px; vertical-align: 1px; }
.le-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--text-muted); }
.le-dot--critical { background: var(--critical); }
.le-dot--caution { background: var(--caution); box-shadow: inset 0 0 0 1px var(--caution-edge); }
.le-dot--positive { background: var(--positive); }
.le-dot--neutral { background: transparent; border: 1px dashed var(--text-muted); box-sizing: border-box; }
/* A flag is a note, in ink; a thin bar at its edge says how bad (like a tile's bottom bar). */
.le-flag, .le-flag--caution, .le-flag--critical { background: var(--surface-sunken); color: var(--text-body); border-left: 3px solid var(--text-muted); }
.le-flag--caution { border-left-color: var(--caution); }
.le-flag--critical { border-left-color: var(--critical); }
/* The highlight a link lands on is the same as data-focus: a tile tint and the ember mark */
.le-hl, tr.le-hl > td { background: var(--surface-sunken); }
@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) { table.lm-table:not(.le-keep) > tbody > tr.le-hl { background: var(--surface-sunken); } }
.le-gl-row.is-focus { box-shadow: inset 3px 0 0 var(--ember); }
/* "Custom to the bank" is a kind of control, not a status: outlined, not green */
.le-tag--ev { background: var(--surface-panel); box-shadow: inset 0 0 0 1px var(--text-muted); }
/* The outcome toast: ink, no status colour */
.le-toast--critical, .le-toast--positive { border-left: 0; }
/* Severity of an advisory is not a control status: ink, its bars say how severe */
/* Where the data comes from: Live is a solid ink tag, Rehearsal a dashed one (shape, not green) */
.le-sh-avail--live { background: var(--surface-panel); color: var(--text-strong); border: 1px solid var(--text-strong); }
.le-sh-env.le-env--rehearsal { background: var(--rail-bg); color: var(--rail-text-current); }
.le-mode-pill--rehearsal { background: var(--surface-panel); border: 1px dashed var(--text-strong); color: var(--text-strong); }
.le-mode-pill--rehearsal::before { background: transparent; border: 1px dashed currentColor; box-sizing: border-box; }
/* Segmented controls: the selected segment is filled (UI-17); a link beside them is a link */
/* The rail stays in view on a long page, with its own scroll (UI-27): the rail itself stretches to
   the page (its ink runs the full height); its contents stick to the top and scroll on their own.
   Below 901 px the icon rail's hover labels sit outside it, so no scroll box there. */
.le-rail-in { display: flex; flex-direction: column; gap: var(--space-1); }
@media (min-width: 601px) {
  .le-sh-rail { position: static; align-self: stretch; min-height: 0; }
  .le-rail-in { position: sticky; top: var(--space-4); }
}
@media (min-width: 901px) { .le-rail-in { max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rail-line) transparent; margin: -4px calc(-1 * var(--space-2)) -4px -4px; padding: 4px var(--space-2) 4px 4px; } }
/* Text that is not an action looks like text (UI-26) */
.le-options { margin: 0; padding-left: 20px; }
.le-options li + li { margin-top: var(--space-2); }
/* The tags that make the join wrap instead of clipping (UI-28) */
pre.le-wrap-code { white-space: pre-wrap !important; overflow-wrap: anywhere; }
/* A chart with a real axis (UI-21): tick labels on the left, gridlines across, one colour */
.le-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); margin-top: var(--space-4); }
.le-chart-y { position: relative; min-width: 16px; height: 160px; font: 400 var(--le-fs-caption)/1 var(--font-sans); color: var(--text-muted); }
.le-chart-y span { position: absolute; right: 0; transform: translateY(50%); }
.le-chart-plot { position: relative; height: 160px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); align-items: end; border-bottom: 1px solid var(--text-secondary); }
.le-chart-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line-strong); }
.le-chart-bar { position: relative; z-index: 1; background: var(--data-context-2); border-radius: 2px 2px 0 0; min-height: 1px; }
.le-chart-bar > span { position: absolute; bottom: 100%; left: 0; right: 0; padding-bottom: 2px; text-align: center; font: 600 var(--le-fs-caption)/1.2 var(--font-sans); color: var(--text-strong); }
.le-chart-x { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); padding-top: 4px; text-align: center; font: 400 var(--le-fs-caption)/1.3 var(--font-sans); color: var(--text-muted); }
/* A shared dependency, said once above the table (UI-22) */
.le-callout { padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: 6px; font-size: var(--le-fs-small-ui); color: var(--text-body); }
/* The phone estate header: compact (EST-08B follow-up) */
@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) {
  .le-hd-act.le-est-act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); width: 100%; }
  .le-est-act .le-switch { grid-column: 1 / -1; }
  .le-est-act .le-seg { grid-column: 1 / -1; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; }
  .le-est-act .le-seg a { justify-content: center; padding: 0 var(--space-2); }
  .le-est-act .le-est-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
  .le-est-act .le-est-links a { display: inline-flex; align-items: center; min-height: var(--hit); }
}
.le-est-links { display: contents; }

/* How this is built (EST-12U): the architecture panel. */
.le-hb { box-sizing: border-box; width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: var(--space-6); border: 1px solid var(--line-hairline); border-radius: 12px; background: var(--surface-panel); color: var(--text-strong); }
.le-hb::backdrop { background: rgb(0 0 0 / 0.5); }
.le-hb-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.le-hb-fig { margin: 0; overflow-x: auto; }
.le-hb-svg { display: block; width: 100%; min-width: 720px; height: auto; font-family: inherit; }
.le-hb-group { fill: none; stroke: var(--line-hairline); stroke-dasharray: 5 4; }
.le-hb-gt { fill: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.le-hb-box { fill: var(--surface-sunken); stroke: var(--line-hairline); }
.le-hb-box--kosli { fill: var(--ember-wash); stroke: var(--ember); }
.le-hb-box--estate { stroke: var(--text-muted); }
.le-hb-box--write { stroke: var(--ember); stroke-dasharray: 4 3; }
.le-hb-bt { fill: var(--text-strong); font-size: 13px; font-weight: 600; }
.le-hb-bl { fill: var(--text-secondary); font-size: 11.5px; }
.le-hb-note { fill: var(--text-muted); font-size: 11px; font-style: italic; }
.le-hb-al { fill: var(--text-secondary); font-size: 11px; }
.le-hb-arrow { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.le-hb-arrow--write { stroke: var(--ember); }
.le-hb-head { fill: var(--text-muted); }
.le-hb-head--w { fill: var(--ember); }
.le-hb-points { margin: var(--space-4) 0 0; padding-left: var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2) var(--space-6); color: var(--text-body); font-size: var(--le-fs-ui-small, 14px); line-height: 1.45; }

/* Landscape by person (EST-08D): a system tile; another owner's on the canvas grey, never faded
   below AA (text keeps its colour); an artifact no record places, dashed (PR-1). */
.le-sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.le-sys { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-panel); border: 1px solid var(--line-hairline); border-radius: 8px; min-width: 0; }
.le-sys--other { background: var(--surface-ground); }
.le-sys--untraced, .le-sys--unseen { border-style: dashed; border-color: var(--line-control); }
/* By layer (EST-08E): a tile selects a system for its blast radius; one the failure does not reach is
   quiet (its border and fill drop back, its text stays AA); the selected one is outlined in ink. */
.le-sys-grid--sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.le-sys--pick { color: inherit; text-decoration: none; }
.le-sys--pick:hover, .le-sys--pick:focus-visible { border-color: var(--text-strong); }
.le-sys--quiet { background: var(--surface-ground); border-style: dotted; }
.le-sys--focus { border-color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--text-strong); }
.le-ext { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--surface-panel); border: 1px solid var(--line-hairline); border-radius: 8px; }
.le-ext--hit { border-color: var(--text-strong); }
.le-depmap { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: start; }
.le-depmap-focus { padding: var(--space-3) var(--space-4); border: 1px solid var(--text-strong); border-radius: 8px; }
.le-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
@media (max-width: 720px) { .le-depmap { grid-template-columns: 1fr; } }
/* By Critical Operation (EST-08F): marks are shapes in ink with their words for assistive tech, never a
   status colour (EST-08C); a group row names whose systems follow. */
.le-matrix th[scope="row"] { min-width: 200px; width: 220px; font-weight: 600; }
/* A row's status keeps its own width, so a wide matrix (six Critical Operations) never stretches it
   past the phone's edge (EST-150). */
.le-matrix th[scope="row"] .lm-pill { align-self: flex-start; }
.le-matrix-group th { background: var(--surface-ground); text-align: left; font-weight: 600; }
.le-mark { text-align: center; color: var(--text-strong); font-size: 15px; min-width: 44px; }
.le-mark--gap { font-weight: 700; }
.le-matrix thead th.le-mark-h { text-align: center; width: 96px; min-width: 72px; max-width: 112px; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.3; vertical-align: bottom; }
.le-legend span { white-space: nowrap; }
/* The matrix scrolls inside its card, never widens the page: it takes the card's width without
   lending it its own. */
.le-scroll--matrix { width: 0; min-width: 100%; position: relative; }
/* The top bar (EST-13E): the product, the find box, the demo panel's pill, who is signed in. */
.le-sh-topbar { flex-wrap: nowrap; gap: var(--space-4); }
.le-top-gap { flex: 1 1 auto; }
/* The rail carries the product's name on a wide screen; the bar repeats it only on the phone. */
:where(.le-sh-topbar) .le-sh-product { display: none; }
.le-me-top:empty { display: none; }
/* The black strip carries the demo panel's pill at its end (EST-13E); its words read from the left (Estate Slate v2). */
.le-sh-env::before { content: none; }
.le-env-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); text-align: left; }
.le-env-t::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--ember); transform: rotate(45deg); }
.le-env-t > span { min-width: 0; }
.le-sh-env .le-dp { flex: none; }
.le-dp > summary { width: auto; height: auto; min-height: 22px; border-radius: 999px; background: none; color: inherit; }
.le-dp > summary:hover, .le-dp[open] > summary { background: none; color: inherit; }
.le-dp-pill.le-mode-pill { height: 22px; padding: 0 10px; gap: 6px; background: transparent; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent); color: inherit; font: 600 11.5px/1 var(--font-sans); text-transform: none; letter-spacing: 0; }
.le-dp-pill.le-mode-pill::before { width: 6px; height: 6px; background: currentColor; border: 0; }
.le-dp > summary:hover .le-dp-pill, .le-dp[open] .le-dp-pill { border-color: currentColor; }
.le-dp > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.le-dp-sep { opacity: .6; }
.le-dp-body { top: calc(100% + 8px); }
.le-dp-body { width: 360px; display: grid; gap: var(--space-3); overflow-y: auto; }
.le-dp-body .le-tip-k { margin: 0; }
.le-dp-what { color: var(--text-secondary); }
.le-dp-body #sync:empty { display: none; }
.le-dp-sec { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line-hairline); }
.le-dp-h { font: 600 var(--le-fs-ui-small)/1.2 var(--font-sans); color: var(--text-muted); }
.le-dp-reads { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: baseline; }
.le-dp-row { display: contents; }
.le-dp-row .le-sh-avail { justify-self: start; }
.le-dp-by { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--line-hairline); font-size: var(--le-fs-ui-small); color: var(--text-muted); }
/* The presenter's Signed in as switch (EST-08H, EST-13D): a chip in the top bar and its picker; a
   fictional institution only. Ember marks a view that is not your own. */
.le-presenter { display: flex; align-items: center; min-width: 0; }
.le-as > summary { width: auto; height: auto; min-height: 36px; gap: var(--space-2); padding: 3px 8px 3px 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-panel); color: var(--text-strong); }
.le-as > summary::after { content: none; }
.le-as > summary:hover, .le-as[open] > summary { background: var(--surface-panel); border-color: var(--text-strong); }
.le-as--on > summary { border-color: var(--ember); }
.le-as-av { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunken); color: var(--text-strong); font: 600 11px/1 var(--font-sans); }
.le-as--on > summary .le-as-av { background: var(--ember-wash); }
.le-as-name { font: 600 13px/1.25 var(--font-sans); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-as > summary .le-as-name { max-width: 180px; }
.le-as-chev { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.le-as[open] .le-as-chev { transform: rotate(180deg); }
.le-as-menu { width: 300px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.le-as-menu[style*="max-height"] { overflow: hidden; }
.le-as-find { display: block; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-hairline); }
.le-as-find .lm-input { width: 100%; box-sizing: border-box; min-height: 34px; }
.le-as-list { list-style: none; margin: 0; padding: var(--space-1) 0; overflow-y: auto; max-height: min(640px, calc(100vh - 160px)); flex: 1 1 auto; min-height: 0; }
.le-as-grp { padding: var(--space-3) var(--space-3) 2px; font: 600 var(--le-fs-ui-small)/1.2 var(--font-sans); color: var(--text-muted); }
.le-as-none { padding: var(--space-3); color: var(--text-secondary); }
.le-as-row { display: flex; align-items: baseline; gap: var(--space-3); width: 100%; min-height: 34px; padding: 6px var(--space-3); border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.le-as-row:hover { background: var(--surface-hover); }
.le-as-row:focus-visible { outline: 2px solid var(--le-focus-ring); outline-offset: -2px; }
.le-as-row[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--ember); }
.le-as-row .le-as-name { font-weight: 500; flex: 0 0 auto; }
.le-as-meta { margin-left: auto; min-width: 0; font-size: var(--le-fs-ui-small); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-as-note { margin: 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line-hairline); color: var(--text-muted); }
.le-as-note a { color: var(--text-body); margin-left: var(--space-1); }
/* On a phone the switch is in the More sheet (the heading keeps its place); the chip goes. */
@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) { .le-presenter { display: none; } }
/* Your position on the group estate (EST-08J): one linked block per fact, the same counts as the
   screens they open. */
.le-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.le-pos { color: inherit; text-decoration: none; min-width: 0; }
.le-pos:hover, .le-pos:focus-visible { border-color: var(--text-strong); }
/* The bank in the demo (set the scene): the How it's built dialog's second tab. Estate tints are
   identity only, never a status colour; statuses are left for the demo. */
.le-hb-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line-hairline); }
.le-hb-tabs [role="tab"] { padding: var(--space-2) var(--space-3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; margin-bottom: -1px; }
.le-hb-tabs [role="tab"][aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--ember); }
.le-hb-tabs [role="tab"]:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.le-sc { display: grid; gap: var(--space-6); color: var(--text-body); }
.le-sc-p { margin: 0; color: var(--text-secondary); line-height: 1.45; }
.le-sc-hero { display: flex; gap: var(--space-4); align-items: center; }
.le-sc-mark { flex: 0 0 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--ember-wash); border: 1px solid var(--ember); color: var(--text-strong); font-weight: 700; font-size: 20px; }
.le-sc-name { margin: 0 0 var(--space-1); font-size: 22px; color: var(--text-strong); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.le-sc-tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-hairline); color: var(--text-secondary); }
.le-sc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2); }
.le-sc-stat { padding: var(--space-3); border-radius: 8px; background: var(--surface-sunken); border: 1px solid var(--line-hairline); display: grid; gap: 2px; }
.le-sc-stat b { font-size: 24px; color: var(--text-strong); line-height: 1.1; }
.le-sc-stat span { font-size: 12px; color: var(--text-secondary); }
.le-sc-sec { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.le-sc-h { margin: 0; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.le-sc-map { display: grid; gap: var(--space-2); }
.le-sc-lane { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-2) 0; border-top: 1px dashed var(--line-hairline); }
.le-sc-lt { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding-top: 4px; }
.le-sc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.le-sc-chip { display: inline-flex; flex-direction: column; padding: 4px 10px; border-radius: 6px; font-size: 13px; color: var(--text-strong); background: var(--surface-sunken); border: 1px solid var(--line-hairline); border-left-width: 4px; }
.le-sc-chip small { font-size: 11px; color: var(--text-secondary); }
.le-sc-ext { border-style: dashed; border-left-width: 1px; }
.le-sc-keys { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 12px; color: var(--text-secondary); }
.le-sc-key { display: inline-flex; align-items: center; gap: 6px; }
.le-sc-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
/* Eight estate tints, chosen to read as identity, not as red/amber/green. */
.le-sc-e0 { border-left-color: #7c8cf8; } i.le-sc-e0 { background: #7c8cf8; }
.le-sc-e1 { border-left-color: #4fb3c8; } i.le-sc-e1 { background: #4fb3c8; }
.le-sc-e2 { border-left-color: #c58af0; } i.le-sc-e2 { background: #c58af0; }
.le-sc-e3 { border-left-color: #e6a3c4; } i.le-sc-e3 { background: #e6a3c4; }
.le-sc-e4 { border-left-color: #9aa7b8; } i.le-sc-e4 { background: #9aa7b8; }
.le-sc-e5 { border-left-color: #3f5fa8; } i.le-sc-e5 { background: #3f5fa8; }
.le-sc-e6 { border-left-color: #b8a07a; } i.le-sc-e6 { background: #b8a07a; }
.le-sc-e7 { border-left-color: #8fd0c0; } i.le-sc-e7 { background: #8fd0c0; }
.le-sc-enone { border-left-color: var(--line-hairline); border-style: dashed; } i.le-sc-enone { background: none; border: 1px dashed var(--text-muted); }
.le-sc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); }
.le-sc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-2); }
.le-sc-person { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: 8px; background: var(--surface-sunken); border: 1px solid var(--line-hairline); min-width: 0; }
.le-sc-av { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-hover); color: var(--text-strong); font-size: 12px; font-weight: 700; }
.le-sc-pw { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.le-sc-pw b { color: var(--text-strong); }
.le-sc-pw span, .le-sc-pw small { color: var(--text-secondary); }
.le-sc-pw small { font-size: 12px; }
.le-sc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.le-sc-fact { display: grid; gap: 2px; padding: var(--space-3); border-radius: 8px; border: 1px solid var(--line-hairline); }
.le-sc-fact span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.le-sc-fact b { color: var(--text-strong); }
.le-sc-fact small { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono, monospace); }
.le-sc-note { margin: 0; font-size: 12px; color: var(--text-muted); font-style: italic; }
@media (max-width: 600px) { .le-sc-lane { grid-template-columns: 1fr; gap: var(--space-1); } .le-sc-hero { align-items: flex-start; } }
/* Technology suppliers (EST-00B): a card per supplier, tinted by estate when it serves only one. */
.le-sc-sups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-2); }
.le-sc-sup { display: grid; gap: 2px; align-content: start; padding: 6px 10px; border-radius: 6px; font-size: 13px; background: var(--surface-sunken); border: 1px solid var(--line-hairline); }
.le-sc-sup b { color: var(--text-strong); }
.le-sc-sup span { color: var(--text-body); }
.le-sc-sup small { font-size: 11.5px; color: var(--text-secondary); }
.le-sc-sup.le-sc-chip { border-left-width: 4px; display: grid; }
.le-sc-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted) !important; }

/* AI flows (E11): the three legs side by side, stacking on a phone; a rule between flows. */
.le-ai-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.le-hr { border: 0; border-top: 1px solid var(--line-hairline); margin: var(--space-2) 0; }
.le-list-plain { list-style: none; margin: 0; padding: 0; }
.lm-table .lm-tag, .le-verdict + .lm-tiles .lm-tag, dd .lm-tag { white-space: nowrap; }

/* The board pack in print (EST-08O): only the pack, on A4. Every page says it is a working copy and
   which page it is (the page margins; CSS cannot put the as-at time there), and the first says what
   it is and when it stood. App chrome, switches and buttons never print; tables wrap instead of
   scrolling; an evidence link prints its address. */
.le-print-head { display: none; }
@page { size: A4; margin: 16mm 14mm 18mm;
  @top-left { content: "WORKING COPY · from live data, not a frozen pack"; font: 600 8pt "Geist", "Segoe UI", Arial, sans-serif; color: #0b0d10; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt "Geist", "Segoe UI", Arial, sans-serif; color: #4d4942; } }
/* EST-157: the answer band, the deadline track and the appetite gauge. Ink only: where a deadline or
   a measure stands is not a control status (UI-11); the words beside each mark say it. */
.le-band { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .le-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.le-band .lm-tile { text-align: left; font: inherit; color: inherit; }
button.le-jump { cursor: pointer; }
button.le-jump:hover { border-color: var(--text-muted); }
button.le-jump:focus-visible { outline: 2px solid var(--le-focus-ring); outline-offset: 2px; }
.le-part { scroll-margin-top: 72px; }
.le-part:focus { outline: none; }
/* The track, the axis, the threshold bar, the pips and the bar under a figure are Loom's recipes
   since design system v2.0.1 (lm-deadline-track, lm-deadline-axis, lm-threshold, lm-pips,
   lm-bar--cell). What is left here is where Estate puts them, and the legend's swatches. */
.le-track { margin-bottom: 4px; }
.le-track-axis { margin-top: 2px; font-weight: 400; }
.le-meas { min-width: 120px; max-width: 220px; margin: 6px 0 4px; }
.le-track-ran { background: var(--data-context-2); }
.le-track-over { background: var(--data-context-1); }
.le-track-left { border: 1.5px solid var(--data-context-1); background: var(--surface-panel); }
.le-track-exc { border: 1.5px dashed var(--line-control); background: var(--surface-panel); }
/* EST-16D: an event's headline on What happened is 600, as names are elsewhere; a bare <b> came out heavier in Geist. */
.le-event-what > b { font-weight: 600; }
.le-track-legend i { display: inline-block; width: 18px; height: 10px; box-sizing: border-box; border-radius: 2px; }
.le-track-legend i.le-track-due { width: 9px; height: 9px; border-radius: 0; background: var(--text-strong); transform: rotate(45deg); }
.le-band--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .le-band--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .le-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .le-band--5 { display: none; } } /* on a phone the sentence says the counts: the first finding stays within the fold (EST-08V) */
.le-cells { height: 18px; gap: 3px; margin: var(--space-2) 0; }
.le-cells > span { flex: 1 1 0; max-width: 48px; border-radius: 2px; }
.le-more--rows > summary { display: flex; align-items: center; gap: var(--space-3); width: auto; padding: 10px 0; border-top: 1px solid var(--line-hairline); font-size: var(--le-fs-small-ui); color: var(--text-secondary); }
[data-closed] .le-more--rows > summary { border-top: 0; padding: 2px 0; color: inherit; }
.le-track-wrap { max-width: 520px; }
.lm-table td > .le-more { margin-top: var(--space-1); }
.le-more > summary { width: fit-content; cursor: pointer; font-size: var(--le-fs-caption); color: var(--text-muted); }
.le-more > summary:focus-visible { outline: 2px solid var(--le-focus-ring); outline-offset: 2px; }
.le-glance { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6) 40px; align-items: start; }
.le-glance-n { font: 600 32px/1.1 var(--font-sans); color: var(--text-strong); }
.le-glance-n small { font: 400 var(--le-fs-small)/1.4 var(--font-sans); color: var(--text-secondary); }
.le-glance .le-bar { height: 18px; margin: var(--space-3) 0 var(--space-2); }
.le-glance-side { display: grid; gap: var(--space-4); }
.le-glance-side > div { display: grid; gap: 4px; justify-items: start; }
.le-matter .le-xrow > summary { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 16px; }
@media (max-width: 760px) { .le-glance { grid-template-columns: minmax(0, 1fr); } }

@media print {
  .le-skip, .le-sh-rail, #envbar, #presenter, .le-sh-topbar, #tabbar, #foot, .le-sheet, .le-tip > summary, .le-print-btn,
  .le-paper .le-hd-act, .le-paper .le-crumbs { display: none !important; }
  html, body, .le-sh-app, .le-shell-main, .le-sh-page { background: #fff !important; display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
  .le-paper { padding: 0 !important; gap: 10pt !important; }
  .le-paper .lm-panel { box-shadow: none !important; border: 1px solid #c9c6bf !important; }
  .le-paper h2, .le-paper h3 { break-after: avoid; }
  .le-paper .le-matter, .le-paper tr { break-inside: avoid; }
  .le-paper .le-xrow > summary .le-chev, .le-paper .le-more > summary { display: none !important; }
  .le-paper .le-scroll { overflow: visible !important; }
  .le-paper table { min-width: 0 !important; width: 100% !important; font-size: 9pt; }
  .le-paper a { color: #0b0d10 !important; text-decoration: none !important; }
  .le-paper a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7.5pt; color: #4d4942; word-break: break-all; }
  .le-print-head { display: block; font: 600 9pt/1.4 var(--font-sans); color: #0b0d10; border: 1px solid #0b0d10; padding: 2mm 3mm; }
  .le-print-head b { font-weight: 700; letter-spacing: 0.04em; }
}

/* Phone folds and tiles (EST-08V). A fold is open on a wide screen, its summary hidden; on the phone
   the summary is a button and the content waits behind it (app.js foldPhone). Tiles two per row. */
details.le-fold > summary { display: none; }
details.le-fold > summary::-webkit-details-marker { display: none; }
@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) {
  details.le-fold > summary { display: inline-flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer; }
  details.le-fold > summary::after { content: '▾'; margin-left: var(--space-2); }
  details.le-fold[open] > summary { margin-bottom: var(--space-3); }
  details.le-fold[open] > summary::after { content: '▴'; }
  .lm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .lm-tiles > .lm-tile { padding: 10px 12px 12px; gap: 2px; }
  .lm-tiles > .lm-tile .lm-tile-value { font-size: 24px; }
  /* What the verdict just said, left out on the phone where the screen's list should come first. */
  .le-ph-skip { display: none; }
}

/* How this is built as a Help item, not a floating button (EST-08U). */
button.le-sheet-item { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }

/* Start here (EST-080): three columns that stack on a phone; the reader's own route marked. */
.le-start-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 760px) { .le-start-three { grid-template-columns: 1fr; gap: var(--space-4); } }
.le-start-route { padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: 8px; }
.le-start-route.is-mine { border-color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--text-strong); }
.le-start-links { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-1); }
.le-start-status { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.le-start-status li { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-3); align-items: center; }
@media (max-width: 600px) { .le-start-status li { grid-template-columns: 1fr; gap: var(--space-1); } }
.le-wrap { flex-wrap: wrap; gap: var(--space-3); }

/* An earlier hour (EST-015): the strip says so; nothing is decided on the past, so the forms that
   ask for or make a decision are not shown there (the decision is made on now). */
.le-sh-env.le-env--past { background: #2e3238; }
html.le-past details.le-dec:has(form[data-dec]), html.le-past .le-dec-act, html.le-past form[data-dec] { display: none !important; }
.le-hist { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.le-hist select { max-width: 100%; min-width: 0; }

/* EST-140: the owning estate as a group row in "Products that run on its systems". */
.lm-table tr.le-grp th { background: var(--surface-sunken); padding-top: 8px; padding-bottom: 8px; text-align: left; font-weight: 600; }
/* EST-142: the obligations line under the estate verdict, aligned with its text. */
.le-verdict-sub { margin: 0; padding-left: 22px; color: var(--text-secondary); }

/* EST-143: Landscape › Drill down, in columns; one column at a time on a phone. */
.le-drill { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: var(--space-4); overflow-x: auto; align-items: start; }
.le-drill-col { background: var(--surface-panel); border: 1px solid var(--line-hairline); border-radius: 12px; min-width: 0; padding-bottom: 8px; }
.le-drill-colh { padding: 12px 16px 10px; border-bottom: 1px solid var(--line-hairline); }
.le-drill-colh .le-h3 { margin: 0; }
.le-drill-head { margin: 12px 16px 4px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary); }
.le-drill-head--cat { color: var(--text-strong); }
.le-drill-list { list-style: none; margin: 0; padding: 0; }
.le-drill-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; min-height: 44px; box-sizing: border-box; border-left: 3px solid transparent; color: inherit; text-decoration: none; }
.le-drill-item:hover { background: var(--surface-hover); }
.le-drill-item.is-sel { background: var(--surface-sunken); border-left-color: var(--ember); }
.le-drill-item--other:not(.is-sel) { background: var(--surface-ground); }
.le-drill-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.le-drill-mark { align-self: flex-start; display: inline-block; font-size: 12px; line-height: 1.5; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--text-secondary); }
.le-drill-mark--derived { border-style: dashed; }
.le-drill-note { padding: 8px 16px; font-size: var(--le-fs-small-ui); color: var(--text-secondary); }
/* A node the map cannot fill in (EST-14B): dashed, and its status is can't tell. */
.le-drill-item--dashed { margin: 4px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.le-drill-note--dashed { margin: 4px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.le-drill-pad { padding: 12px 16px; }
.le-drill-trail { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
@media (max-width: 600px) {
  .le-drill { grid-template-columns: 1fr; overflow: visible; }
  .le-drill-col:not(.is-at) { display: none; }
}
@media (max-width: 600px) {
  /* The trail is the only way back on a phone: tap-sized links (review of EST-143). */
  .le-drill-trail a, .le-drill-trail [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
}
/* The landscape as cloth (EST-14E): systems are threads across, Critical Operations and products
   threads down. A thread's colour and shape are its system's status (straight, frayed, broken); the
   stitches are shapes in ink, and snap only on a system out of control. What the selection does not
   reach is quiet: its drawing fades, its name stays readable (AA). */
.le-weave { display: block; max-width: none; font-family: var(--font-sans); }
.le-weave a { text-decoration: none; cursor: pointer; outline: none; }
.le-weave text { fill: var(--text-strong); font-size: 12.5px; }
.le-weave .le-weave-grp { fill: var(--text-muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.le-weave .le-weave-act { fill: var(--text-body); font-size: 12px; text-decoration: underline; }
.le-weave .le-weave-note { fill: var(--text-muted); font-size: 11.5px; paint-order: stroke; stroke: var(--surface-panel); stroke-width: 5px; }
.le-weave-rule, .le-weave-guide { stroke: var(--line-hairline); stroke-width: 1; }
.le-weave-hit { fill: transparent; pointer-events: all; }
/* The names sit over the cloth on the card's ground, and stay at the left edge when it scrolls sideways. */
.le-weave-pin { pointer-events: none; }
.le-weave-ground { fill: var(--surface-panel); }
.le-weave a:hover .le-weave-hit { fill: var(--surface-sunken); }
.le-weave a:focus-visible .le-weave-hit { fill: var(--surface-sunken); stroke: var(--text-strong); stroke-width: 2; }
.le-weave-thr { fill: none; stroke: var(--text-disabled); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.le-weave-row.s-red .le-weave-thr { stroke: var(--critical); }
.le-weave-fray { fill: none; stroke: var(--critical); stroke-width: 1.6; stroke-linecap: round; }
.le-weave-row.s-amber .le-weave-thr { stroke: var(--caution); }
.le-weave-row.s-unknown .le-weave-thr { stroke: var(--text-muted); stroke-width: 5; stroke-dasharray: 7 6; stroke-linecap: butt; }
.le-weave-loose .le-weave-thr { stroke: var(--critical); stroke-width: 3.5; stroke-dasharray: 4 4; stroke-linecap: butt; }
.le-weave-strand { fill: none; stroke: var(--text-disabled); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.le-weave-strand.s-red { stroke: var(--critical); }
.le-weave-strand.s-amber { stroke: var(--caution); }
.le-weave-strand.s-unknown { stroke: var(--text-muted); stroke-dasharray: 7 6; stroke-linecap: butt; }
/* An AI flow with all three legs (EST-13B): a ring in ink round the status dot. A mark, never a status. */
.le-weave-ai { fill: none; stroke: var(--text-strong); stroke-width: 1.5; }
.le-weave-dot.s-red { fill: var(--critical); }
.le-weave-dot.s-amber { fill: var(--caution); }
.le-weave-dot.s-green { fill: var(--positive); }
.le-weave-dot.s-unknown { fill: var(--surface-panel); stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 2.5 2; }
.le-weave-under { fill: color-mix(in srgb, var(--text-disabled) 50%, var(--surface-panel)); }
.le-weave-over { fill: var(--text-strong); }
.le-weave-over.s-red { fill: var(--critical); }
.le-weave-over.s-amber { fill: var(--text-strong); stroke: var(--caution); stroke-width: 2; }
.le-weave-over.s-unknown { fill: var(--surface-panel); stroke: var(--text-strong); stroke-width: 1.4; stroke-dasharray: 3 2.5; }
.le-weave-gap { fill: var(--surface-panel); stroke: var(--text-strong); stroke-width: 1.5; }
.le-weave-arc path { fill: none; stroke: var(--text-strong); stroke-width: 1.5; }
.le-weave-arc circle { fill: var(--text-strong); }
.le-weave .is-sel .le-weave-lbl, .le-weave .is-sel .le-weave-name { font-weight: 600; }
.le-weave .is-other .le-weave-lbl { fill: var(--text-secondary); }
.le-weave .is-quiet .le-weave-lbl, .le-weave .is-quiet .le-weave-name { fill: var(--text-muted); }
.le-weave .is-quiet .le-weave-thr, .le-weave .is-quiet .le-weave-fray, .le-weave .is-quiet .le-weave-strand, .le-weave .is-quiet .le-weave-dot, .le-weave .le-weave-st.is-quiet { opacity: .28; }
.le-weave-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.le-weave-legend li { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.le-weave-sw { flex: none; }
.le-weave-links a { white-space: nowrap; }

/* ---- From Estate Slate v2 (EST-12Z, EST-167): the calmer shell, the reading size, the links by weight. ---- */
.le-sh-rail-item[aria-current="page"]::before { left: 0; top: 10px; height: auto; bottom: 10px; border-radius: 0 2px 2px 0; background: var(--ember); }
.le-sh-rail-item[aria-current="page"] { background: var(--rail-current-bg); }
.le-sh-env { font: 500 12.5px/1.4 var(--font-sans); text-transform: none; letter-spacing: 0; }
@media (min-width: 601px) {
  .le-sh-env { padding: 6px var(--space-6); justify-content: flex-start; }
}
.le-sh-env.le-env--stale { font-weight: 500; }
.le-env-long { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (min-width: 901px) {
  .le-sh-topbar .le-sh-product-name { display: none; }
  .le-sh-topbar .le-sh-product-by { margin-left: 0; }
}
.le-sh-topbar { border-bottom-color: var(--line-hairline); }
@media (min-width: 601px) {
  .le-sh-topbar { min-height: 52px; padding: var(--space-2) var(--space-8, 32px); }
}
.le-sh-topbar .le-avail { font-size: 12px; }
body { font-size: var(--le-fs-body); line-height: var(--le-lh-body); }
@media (min-width: 601px) {
  .le-sh-h1 { font-size: 24px; letter-spacing: -.3px; }
}
.le-sh-count { font-family: var(--font-sans); }
.le-filters { gap: 6px; }
.le-src > summary { border-color: var(--line-strong); border-radius: 6px; }
.le-xrow-name a { font-weight: 500; color: var(--text-strong); text-decoration: none; }
.le-xrow-name a:hover { text-decoration: underline; text-decoration-color: var(--text-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The data map on How the data joins (EST-16P): records by who holds them, a line for each join. */
.le-map { display: block; max-width: none; font-family: var(--font-sans); }
.le-map a { text-decoration: none; cursor: pointer; }
.le-map a:focus-visible { outline: 2px solid var(--le-focus-ring); outline-offset: 2px; }
.le-map-holder { fill: var(--text-muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.le-map-node rect { fill: var(--surface-panel); stroke: var(--text-secondary); stroke-width: 1; }
.le-map-node.h-kosli rect { fill: var(--surface-ground); }
.le-map-name { fill: var(--text-strong); font-size: 13px; font-weight: 500; }
.le-map-count { fill: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.le-map-node:hover rect { fill: var(--surface-sunken); }
.le-map-node:focus-visible rect, .le-map-node.is-sel rect { stroke: var(--text-strong); stroke-width: 2; }
.le-map-node.is-sel .le-map-name { font-weight: 600; }
.le-map-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.le-map-line { fill: none; stroke: var(--text-strong); stroke-width: 1.5; }
.le-map-key { fill: var(--text-body); font-family: var(--font-mono); font-size: 11px; paint-order: stroke; stroke: var(--surface-panel); stroke-width: 6px; stroke-linejoin: round; }
.le-map-join.is-differs .le-map-line { stroke-width: 3.5; }
.le-map-join.is-broken .le-map-line { stroke: var(--text-muted); stroke-width: 2; stroke-dasharray: 6 5; }
.le-map-join.is-idle .le-map-line { stroke: var(--text-disabled); stroke-width: 1; }
.le-map-join.is-idle .le-map-key { fill: var(--text-muted); }
.le-map-join:hover .le-map-line, .le-map-join:focus-visible .le-map-line, .le-map-join.is-sel .le-map-line { stroke: var(--text-strong); stroke-width: 3; }
.le-map-join:hover .le-map-key, .le-map-join:focus-visible .le-map-key, .le-map-join.is-sel .le-map-key { fill: var(--text-strong); font-weight: 600; text-decoration: underline; }
.le-map.has-sel .is-quiet { opacity: .3; }
.le-map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.le-map-legend li { display: flex; align-items: center; gap: var(--space-2); }
.le-map-panel { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line-hairline); }
.le-map-panel.le-ph-only { display: none; }
.le-map-ul { padding-left: 18px; }
.le-map-ul li + li { margin-top: var(--space-1); }
@media (max-width: 600px), (hover: none) and (max-width: 950px) and (max-height: 500px) { .le-map-draw { display: none; } .le-map-panel.le-ph-only { display: flex; } [data-map-index] { padding-top: 0; border-top: 0; } }