/* Estate Slate: Loom Estate's app theme.
   Kosli's app structure (cool white, white panels, IBM Plex, solid status pills)
   with MiddleLeap's accent (ink rail, pivot mark, ember for selection only).
   Load after the MiddleLeap Product tokens and bundle; it only re-points tokens
   and restyles a few recipes. */
:root, [data-theme="light"] {
  --surface-page: #f6f7f9;  --surface-card: #ffffff;  --surface-tile: #f1f3f5;
  --surface-field: #ffffff; --surface-hover: #eef0f3; --surface-pressed: #c9ced4;
  --surface-inverse: #16181c;
  --text-strong: #0b0d10; --text-body: #22262b; --text-secondary: #454a50; --text-muted: #5c636b;
  --text-disabled: #9aa0a6; --text-placeholder: #5c636b; --text-on-inverse: #edebe6;
  --border-hairline: #e1e4e8; --border-card: #e1e4e8; --border-strong: #c9ced4;
  --border-control: #aab0b6; --border-interactive: #aab0b6; --field-border: #aab0b6;
  --bone-0: #0b0d10; --bone-1: #22262b; --bone-2: #454a50; --bone-3: #5c636b; --bone-4: #9aa0a6;
  --ink-0: #ffffff; --ink-1: #f6f7f9; --ink-2: #f1f3f5; --ink-3: #eef0f3; --ink-4: #c9ced4; --ink-border: #e1e4e8;
  /* Links are Kosli blue; ember stays for selection, focus and the mark */
  --ember-text: #1e55cd; --ember-hover: #123c99; --accent-text: #1e55cd; --accent-text-hover: #123c99;
  --focus-ring: #ce451b; --accent-mark: #ce451b; --data-focus: #ce451b;
  --app-canvas: #f6f7f9; --app-card: #ffffff; --app-card-border: #e1e4e8; --app-tile: #f1f3f5;
  --rail-bg: #16181c; --rail-mark: #dedbd4; --rail-item-active: rgba(255,255,255,.12);
  --rail-text: rgba(255,255,255,.66); --rail-text-active: #ffffff; --rail-heading: #8a9097; --rail-divider: #2e3238;
  --inverse-bg: #16181c; --inverse-text: #edebe6; --raised-bg: #16181c; --mark-solid: #16181c;
  /* Status: Kosli-style solid fills */
  --positive: #2b8458; --positive-text: #1f6b45; --positive-dim: #e3f2ea;
  --caution: #f7c22e;  --caution-text: #7a5500; --caution-dim: #fdf3d3;
  --critical: #c8463a; --critical-text: #a3352b; --critical-dim: #f9e3e0;
  --info: #1e55cd; --info-text: #1e55cd; --info-dim: rgba(30,85,205,.08);
  --data-context-1: #0b0d10; --data-context-2: #5c636b; --data-context-3: #8a9097;
  --data-done: #2b8458; --data-wait: #f7c22e; --data-wait-edge: #9a6c00; --data-back: #c8463a; --data-track: #c9ced4;
  --shadow-1: none; --shadow-2: 0 8px 24px rgba(11,13,16,.10);
}
:root {
  --font-display: "IBM Plex Sans", Arial, sans-serif;
  --font-body: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --fs-hero: 28px; --fs-h1: 22px; --fs-h2: 18px; --fs-h3: 16px;
  --fs-verdict: 14px; --fs-stat: 26px; --fs-card-title: 15px;
  --fs-body: 13px; --fs-small: 13px; --fs-small-ui: 12.5px; --fs-caption: 12px;
  --fs-ui: 12px; --fs-ui-small: 11px; --fs-ui-micro: 10px;
  --lh-body: 1.55; --r-ui: 4px; --r-chip: 999px;
}
body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }

/* Headings: Plex 600, app-sized, never the serif display */
.mlp-title, .mlp-h1, .ml-display { font: 600 var(--fs-h1)/1.25 var(--font-body); letter-spacing: -.2px; }
.mlp-h2, .ml-h2 { font: 600 var(--fs-h3)/1.3 var(--font-body); }
.mlp-product-name, .mlp-rail-logo span { font: 600 15px/1 var(--font-body); letter-spacing: 0; }

/* Panels: white on cool white, hairline, 8px corners */
.mlp-card, .mlp-option { background: #fff; border-color: var(--app-card-border); border-radius: 8px; padding: var(--s-4); }
.mlp-card--ink { border-radius: 8px; }
.mlp-note { border-radius: 4px; }
.mlp-tile { background: var(--app-tile); border: 1px solid #c9ced4; border-radius: 4px; padding: var(--s-3) var(--s-4); }
.mlp-tile-value { font-weight: 500; }
.mlp-tile--positive, .mlp-tile--caution, .mlp-tile--critical { background: var(--app-tile); }
.mlp-tile--positive { box-shadow: inset 0 -3px 0 var(--positive); }
.mlp-tile--caution { box-shadow: inset 0 -3px 0 var(--caution); }
.mlp-tile--critical { box-shadow: inset 0 -3px 0 var(--critical); }
.mlp-tile--owed { border: 1px dashed #8a9097; }
.mlp-option:has(> input:checked) { box-shadow: inset 3px 0 0 #ce451b, inset 0 0 0 1px var(--bone-0); }

/* Top bar and rail */
.mlp-topbar { background: #fff; }
.mlp-search { border-radius: 32px; background: #fff; }
.mlp-rail-item { border-radius: 6px; }
.mlp-rail-item[aria-current="page"]::before { background: #ce451b; left: -6px; }
.mlp-rail-heading { font-size: 10.5px; }
.mlp-count { border-radius: 9px; background: var(--app-tile); color: var(--bone-1); }
.mlp-rail .mlp-count { background: #ce451b; color: #fff; }

/* Tabs: ember underline marks where you are */
.mlp-tab { font-size: 13px; }
.mlp-tab[aria-current="page"], .mlp-tab[aria-selected="true"] { border-bottom-color: #ce451b; }

/* Status: solid pills with a word, Kosli style. Unknown is dashed grey, never green. */
.mlp-status { height: 22px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 var(--font-body); }
.mlp-status--positive { background: #2b8458; color: #fff; }
.mlp-status--caution { background: #f7c22e; color: #1f1400; }
.mlp-status--critical { background: #c8463a; color: #fff; }
.mlp-status--info { background: rgba(30,85,205,.10); color: #123c99; }
.mlp-status--neutral { background: var(--app-tile); color: #454a50; border: 1px dashed #8a9097; }

/* Availability badges: Kosli tag shape */
.mlp-avail { border-radius: 4px; font-family: var(--font-body); font-size: 11.5px; text-transform: none; letter-spacing: 0; }

/* Buttons: black primary, outline secondary, square-ish */
.ml-btn { min-height: 40px; border-radius: 4px; font: 500 13px/1 var(--font-body); text-transform: none; letter-spacing: 0; }
.ml-btn--primary { background: #0b0d10; color: #fff; }
.ml-btn--primary:hover:not([disabled]) { background: #2a2e33; }
.ml-btn--primary:active:not([disabled]) { background: #0b0d10; box-shadow: none; }
.ml-btn--secondary { color: #0b0d10; border-color: #0b0d10; }

/* Priority: how urgent a finding is (P1 to P4). Ink, not a status colour, so it never reads as severity. */
.le-prio { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 6px; margin-right: 6px; border: 1px solid #0b0d10; border-radius: 4px; background: #fff; color: #0b0d10; font: 600 11px/1 "IBM Plex Mono", monospace; white-space: nowrap; vertical-align: 1px; }
.le-prio--p1 { background: #0b0d10; color: #fff; }
.le-prio--p3, .le-prio--p4 { border-color: #8a9097; color: #454a50; }

/* Tables: Kosli list rows */
.mlp-table th { border-top: 0; background: #fafbfc; padding-left: var(--s-3); color: var(--bone-3); }
.mlp-table td { padding-left: var(--s-3); }
.ml-chip { border-radius: 4px; }

/* ---- Review fixes, 30 Oct ---- */
/* Remaining ember tokens point at the one ember; on dark panels, labels are grey and links light blue */
:root, [data-theme="light"] {
  --ember-500: #ce451b; --ember-400: #ce451b; --accent-fill: #ce451b; --accent-fill-hover: #b83c16;
  --accent-wash: rgba(206,69,27,.12); --ember-dim: rgba(206,69,27,.12);
  --ember-on-inverse: #a8c1ff; --accent-on-inverse: #a8c1ff;
  /* Info is neutral in this theme: blue is for links only */
  --info: #5c636b; --info-text: #22262b; --info-dim: #f1f3f5;
}
/* Title accents are plain words, never link-blue */
.mlp-title em, .mlp-h1 em, .ml-display em { font-style: normal; color: inherit; }
/* "Now" and agent labels: ink, weight 600 */
.mlp-event--now .mlp-event-when, .mlp-phase-labels .is-now, .le-now { color: var(--bone-0); font-weight: 600; }
.mlp-actor--machine, .mlp-turn--agent .mlp-turn-who { color: var(--bone-0); border-color: #ce451b; }
.mlp-note--inverse .mlp-note-label { color: #b8bec6; }
/* Labels: Kosli-style sans, not mono capitals */
.ml-eyebrow, .mlp-note-label, .mlp-option-kicker, .mlp-rail-heading, .mlp-table th, .mlp-prov, .mlp-prov b, .ml-label {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* Timeline: room for "Today, Thu 5 Nov · 09:00" */
.mlp-event { grid-template-columns: 160px minmax(0, 1fr); }
.mlp-event-when { white-space: normal; }
/* One look for "selected": the ember inset bar */
.mlp-sys[aria-pressed="true"] { border-color: var(--bone-0); box-shadow: inset 3px 0 0 #ce451b, inset 0 0 0 1px var(--bone-0); }
/* Top bar: one row for the product and search; the "what this reads" badges get their own quiet row */
.mlp-topbar .le-avail { order: 3; flex: 1 1 100%; font-size: 11.5px; }

/* The priority chip inside the bank's own app takes the bank's type */
.rf .le-prio { font-family: Inter, Arial, sans-serif; background: #052540; border-color: #052540; }

/* Control and id chips: no capitals */
.ml-chip { text-transform: none; letter-spacing: 0; }

/* Severity chips: sans, no capitals */
.mlp-sev { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---- Help patterns, 30 Oct: explanation on demand, not on the page ---- */
/* 1. Toggletip: an (i) beside a title opens a short "about this" card. Pure <details>, no script. */
.le-titlerow { display: flex; align-items: center; gap: var(--s-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(--bone-3); }
.le-tip > summary:hover, .le-tip[open] > summary { color: var(--bone-0); background: var(--app-tile); }
.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 #ce451b; 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: #fff; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-2); font: 400 13px/1.5 var(--font-body); color: var(--bone-1); text-align: left; white-space: normal; letter-spacing: 0; text-transform: none; }
.le-tip-body b { font-weight: 600; color: var(--bone-0); }
.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(--bone-0); }
.le-tip--end .le-tip-body, .le-src--end .le-tip-body, .le-term--end .le-tip-body { left: auto; right: -8px; }
/* 2. Glossary term: dotted underline, definition on click */
.le-term > summary { display: inline; text-decoration: underline dotted var(--bone-3); text-underline-offset: 3px; cursor: help; }
.le-term > summary:hover { text-decoration-color: var(--bone-0); }
/* 3. Source chip: where a figure comes from, one click away */
.le-src > summary { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; font: 500 11.5px/1 var(--font-body); color: var(--bone-2); white-space: nowrap; }
.le-src > summary:hover, .le-src[open] > summary { border-color: var(--bone-2); color: var(--bone-0); }
.le-src-ids { display: block; margin-top: 4px; font: 400 11.5px/1.5 var(--font-mono); color: var(--bone-2); }
/* 4. Expandable row: one line of status, the story on demand */
.le-xrow { border-top: 1px solid var(--app-card-border); }
.le-xrow > summary { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto 16px; gap: var(--s-3); align-items: center; padding: 10px 8px; margin: 0 -8px; border-radius: 4px; }
.le-xrow > summary:hover { background: var(--app-tile); }
.le-xrow-name { font: 600 var(--fs-small)/1.3 var(--font-body); color: var(--bone-0); }
.le-xrow-id { display: block; margin-top: 2px; font: 400 var(--fs-ui-small)/1.4 var(--font-mono); color: var(--bone-3); }
.le-xrow-gist { font: 400 var(--fs-small-ui)/1.4 var(--font-body); color: var(--bone-2); }
.le-chev { width: 16px; height: 16px; color: var(--bone-3); transition: transform .15s ease; }
.le-xrow[open] .le-chev { transform: rotate(180deg); }
.le-xrow-body { display: flex; flex-direction: column; gap: var(--s-2); padding: 2px 0 var(--s-3); font: 400 var(--fs-small-ui)/1.5 var(--font-body); color: var(--bone-1); }
.le-xrow-body .le-xrow-act { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-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; } }
/* 5. Demo notes: presenter content, off by default, never part of the product */
.le-notes-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; font: 500 12px/1 var(--font-body); color: var(--bone-2); cursor: pointer; white-space: nowrap; }
.le-notes-btn:hover { border-color: var(--bone-2); color: var(--bone-0); }
.le-notes-btn[aria-pressed="true"] { background: #16181c; border-color: #16181c; color: #fff; }
.le-notes-btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--bone-4); }
.le-notes-btn[aria-pressed="true"] i { background: #ce451b; }
.le-demo, .le-demo--bar { display: none !important; }
.le-notes-on .le-demo { display: flex !important; gap: var(--s-3); align-items: flex-start; padding: 12px 16px; background: #16181c; color: #e4e2dc; border-radius: 8px; box-shadow: inset 3px 0 0 #ce451b; font: 400 13px/1.5 var(--font-body); }
.le-notes-on .le-demo--bar { display: flex !important; }
.le-demo b { color: #fff; font-weight: 600; }
.le-demo a { color: #a8c1ff; }
.le-demo-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #ce451b; color: #fff; font: 600 11.5px/1 var(--font-body); }
.le-demo-k { display: block; margin-bottom: 2px; font: 600 11.5px/1.4 var(--font-body); color: #b8bec6; }
.le-demo .mlp-avail { flex: none; }