/* Copyright (c) Edward James Harrison (composer of the Neotokyo OST). All rights reserved. */
/*
  THE MODAL STANDARD — docs/plans/DESIGN-2026-10-26-modal-standard.md (approved on its prototype,
  _prototypes/modal-standard/). One family of modals: the night panel, a 3 px accent line in the thing's own colour,
  18 px corners, a quiet round ✕, a plain dim backdrop (never a blur), no drop shadow, no reduced opacity (a dimmer
  colour instead).

  Built: the ENTITY modal (components/kp-roulette/modal.js renderModal — every content-model modal), the READING (the
  lens modal: core/lens-view/slot-chart.js openLensModal) and ‹ Back (core/modal-stack.js).

  Type: the approved sizes are the modal's own scale (an exception to the panel's flat --fs-standard, as approved on
  the prototype), each multiplied by the "Info Panel Text" setting (--mi-font-scale) so that setting still applies.
  Faces: the app's own stacks (--font-body / --font-display: Outfit / Cinzel, with the astro glyphs kept monochrome in
  'Noto Sans Symbols').
  Accent as text: a dark accent is lifted toward white for legibility (--modal-accent-text, set by core/modal-stack.js
  when the accent is under 4.5:1 on the panel); the accent line and the medallion's ring keep the accent itself.
*/

:root {
  --modal-bg: #0e0d24; --modal-raised: #151236; --modal-raised2: #1a1640; --modal-line: #2a2556;
  --modal-ink: #ece9ff; --modal-text: #d9d5f0; --modal-dim: #a29cd0; --modal-faint: #736da3;
  --modal-accent-default: #b9a6ff;
  --modal-scale: var(--mi-font-scale, 1);
}

/* ═══════════════ shared: the backdrop, the shell, ✕ and ‹ Back ═══════════════ */

/* a plain dim, never a blur */
.kpr-modal-backdrop, .lm-backdrop {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 4, 16, 0.74);
}
.kpr-modal-backdrop { z-index: 9999; }
.lm-backdrop { z-index: 9000; padding: 16px; }

.kpr-modal, .lm-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--modal-bg); color: var(--modal-text);
  border: 1px solid var(--modal-line); border-radius: 18px;
  font-family: var(--font-body);
}
.kpr-modal::before, .lm-card::before {   /* the accent line */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4;
  background: var(--modal-accent, var(--modal-accent-default));
}

/* the close: quiet, round, always in reach (pinned to the card, not the scroll) */
.kpr-modal-close, .lm-close {
  position: absolute; top: 14px; right: 14px; z-index: 5; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; font-family: var(--font-body);
  background: var(--modal-raised2); border: 1px solid var(--modal-line); color: var(--modal-dim); font-size: 15px;
}
.kpr-modal-close:hover, .lm-close:hover { color: var(--modal-ink); border-color: var(--modal-accent, var(--modal-accent-default)); }

/* ‹ Back — beside ✕ when this modal was opened from another (core/modal-stack.js) */
.modal-back {
  position: absolute; top: 14px; right: 56px; z-index: 5;
  height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--modal-raised2); border: 1px solid var(--modal-line); color: var(--modal-ink);
  font: 500 13px var(--font-body);
}
.modal-back:hover { border-color: var(--modal-accent, var(--modal-accent-default)); }

/* ═══════════════ the ENTITY modal ═══════════════ */

.kpr-modal { width: calc(100% - 32px); max-width: 640px; max-height: 86vh; }
.kpr-modal-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }

/* the header: eyebrow · medallion · title · subtitle */
.kpr-modal-hero {
  padding: 34px 32px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.kpr-modal-name {   /* what kind of thing */
  margin: 0; font-size: calc(11px * var(--modal-scale)); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--modal-accent-text, var(--modal-accent, var(--modal-accent-default)));
}
.kpr-modal-medal {   /* the glyph or hero character in its circle */
  width: 76px; height: 76px; margin: 6px 0 4px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 40px;
  color: var(--modal-accent-text, var(--modal-accent, var(--modal-accent-default)));
  background: color-mix(in srgb, var(--modal-accent, var(--modal-accent-default)) 15%, var(--modal-bg));
  border: 1px solid color-mix(in srgb, var(--modal-accent, var(--modal-accent-default)) 45%, var(--modal-bg));
}
.kpr-modal-hero-img {
  display: block; width: 170px; max-width: 60%; height: auto; margin: 6px auto 4px;
  border-radius: 12px; border: 1px solid var(--modal-line);
}
.kpr-modal-hero-html { display: flex; justify-content: center; margin: 6px 0 4px; }
.kpr-modal-value {   /* the title */
  margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; line-height: 1.2;
  font-size: calc(28px * var(--modal-scale)); color: var(--modal-ink); overflow-wrap: anywhere;
}
.kpr-modal-subtitle { margin: 0; font-size: calc(13px * var(--modal-scale)); letter-spacing: 0.02em; color: var(--modal-dim); }

/* the body: a centred reading column */
.kpr-modal-body { padding: 6px 32px 30px; }
.kpr-modal-body > * { max-width: 62ch; margin-left: auto; margin-right: auto; }
.kpr-modal-l2-section { margin-top: 22px; }
.kpr-modal-l2-section:first-child { margin-top: 14px; }
.kpr-modal-l2-eyebrow {   /* a section: accent eyebrow + a hairline */
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: calc(11.5px * var(--modal-scale)); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--modal-accent-text, var(--modal-accent, var(--modal-accent-default)));
}
.kpr-modal-l2-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--modal-line); }
.kpr-modal-l2-eyebrow:empty { display: none; }
.kpr-modal-l2-eyebrow--sub { margin-top: 14px; }   /* a heading inside a section */
.kpr-modal-l2-prose, .kpr-modal-essence, .kpr-modal-l2-meaning {
  font-size: calc(15.5px * var(--modal-scale)); line-height: 1.7; color: var(--modal-text);
}
.kpr-modal-l2-prose { white-space: pre-wrap; }
.kpr-modal-l2-prose + .kpr-modal-l2-prose { margin-top: 8px; }
.kpr-modal-essence, .kpr-modal-l2-meaning { margin-top: 14px; }
.kpr-modal-derivation { margin-top: 16px; text-align: center; font-size: calc(12px * var(--modal-scale)); color: var(--modal-faint); }

/* facts as tiles */
.kpr-modal-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kpr-modal-fact { min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--modal-raised); border: 1px solid var(--modal-line); }
.kpr-modal-fact-k { display: block; margin-bottom: 3px; font-size: calc(10.5px * var(--modal-scale)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--modal-faint); }
.kpr-modal-fact-v { display: block; font-size: calc(14.5px * var(--modal-scale)); color: var(--modal-ink); overflow-wrap: anywhere; }

/* see also: pills after a hairline */
.kpr-modal-see-also {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--modal-line); font-size: calc(12px * var(--modal-scale)); color: var(--modal-faint);
}
.kpr-modal-see-link {
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: calc(13px * var(--modal-scale));
  background: var(--modal-raised); border: 1px solid var(--modal-line); color: var(--modal-ink);
}
.kpr-modal-see-link:hover { border-color: var(--modal-accent, var(--modal-accent-default)); }

/* the way on to the whole reading (a thing tapped on a ring — core/lens-view/slot-chart openElement) */
.kpr-modal .whole-reading {
  display: block; width: 100%; margin-top: 22px; padding: 11px 14px; border-radius: 12px; cursor: pointer; text-align: center;
  background: var(--modal-raised2); border: 1px solid var(--modal-line); color: var(--modal-ink);
  font: 500 calc(14px * var(--modal-scale)) var(--font-body);
}
.kpr-modal .whole-reading:hover { border-color: var(--modal-accent, var(--modal-accent-default)); }

/* "In your charts" (core/entity-modal.js) */
.kpr-inchart-head { margin-top: 26px; }
.kpr-inchart-line { font-size: calc(15px * var(--modal-scale)); line-height: 1.5; color: var(--modal-ink); }
.kpr-inchart-themes { margin: 2px 0 6px; font-size: calc(13.5px * var(--modal-scale)); color: var(--modal-dim); }
.kpr-inchart-note { font-size: calc(13.5px * var(--modal-scale)); color: var(--modal-faint); }
.kpr-inchart-list { display: flex; flex-direction: column; gap: 9px; }
.kpr-inchart-row { line-height: 1.4; }
.kpr-inchart-id { font-size: calc(12.5px * var(--modal-scale)); color: var(--modal-dim); }
.kpr-inchart-place { font-size: calc(14.5px * var(--modal-scale)); color: var(--modal-accent-text, var(--modal-accent, var(--modal-accent-default))); }
.kpr-inchart-row--dup .kpr-inchart-id, .kpr-inchart-row--dup .kpr-inchart-place { color: var(--modal-faint); }
.kpr-inchart-tap { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.kpr-inchart-facts { font-size: calc(14px * var(--modal-scale)); line-height: 1.75; color: var(--modal-text); }
.kpr-inchart-fact-note { color: var(--modal-dim); }
.kpr-inchart-transit { margin-top: 8px; font-size: calc(14px * var(--modal-scale)); line-height: 1.6; color: var(--modal-ink); }
.kpr-inchart-transit-prose { margin-top: 4px; }
.kpr-inchart-older { margin-top: 12px; }
.kpr-inchart-older > summary { cursor: pointer; font-size: calc(13px * var(--modal-scale)); color: var(--modal-accent-text, var(--modal-accent, var(--modal-accent-default))); }
.kpr-inchart-older-list { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }

/* a thing's "In this chart" (its lens's own HTML) — a card under the type system below */
.kpr-modal-l2-html {
  padding: 14px 16px; border-radius: 12px; background: var(--modal-raised); border: 1px solid var(--modal-line);
  font-size: calc(14.5px * var(--modal-scale)); line-height: 1.6; color: var(--modal-text);
}
/* the lens's HTML carries inline sizes from the side panel: the modal's type wins */
.kpr-modal-l2-html [style*="font-size"] { font-size: inherit !important; }

/* a named thing in a thing's text: it opens its modal; its colour is the oracle's (set per link — entity-link.js) */
.kpr-modal .mi-entity-link {
  cursor: pointer; color: var(--modal-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* a phone: the header starts below ✕ and ‹ Back, so a long eyebrow never runs under them */
@media (max-width: 520px) { .kpr-modal-hero { padding: 58px 20px 14px; } .kpr-modal-body { padding: 6px 20px 26px; } }

/* ═══════════════ the READING (the lens modal) ═══════════════ */

.lm-card { width: min(880px, calc(100% - 32px)); max-height: min(88vh, 100%); }

/* the header: medallion · title · other-language name · the chart and how the reading is cast */
.lm-head { display: flex; align-items: center; gap: 16px; padding: 22px 64px 10px 30px; }
.lm-head:has(> .modal-back) { padding-right: 150px; }
.lm-medal {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  background: color-mix(in srgb, var(--modal-accent, var(--modal-accent-default)) 16%, var(--modal-bg));
  border: 1px solid color-mix(in srgb, var(--modal-accent, var(--modal-accent-default)) 50%, var(--modal-bg));
}
.lm-head-text { flex: 1; min-width: 0; }
.lm-head-eyebrow {   /* what governs the lens's colour (data/lens-panel-colours.js by) */
  margin-bottom: 3px; font-size: calc(11px * var(--modal-scale)); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--modal-accent-text, var(--modal-accent, var(--modal-accent-default)));
}
.lm-title { font-family: var(--font-display); font-size: calc(23px * var(--modal-scale)); font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; color: var(--modal-ink); }
.lm-subhead { margin-top: 2px; font-size: calc(13.5px * var(--modal-scale)); letter-spacing: 0.02em; color: var(--modal-dim); }
.lm-subhead[hidden] { display: none; }
.lm-sub { margin-top: 3px; font-size: calc(13px * var(--modal-scale)); color: var(--modal-dim); }

/* the index: a chip per section */
.lm-index {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 30px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--modal-accent, var(--modal-accent-default)) 22%, var(--modal-line));
}
.lm-index:empty { display: none; }
.lm-chip {
  min-height: 28px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--modal-raised); border: 1px solid var(--modal-line); color: var(--modal-dim);
  font: 500 calc(12px * var(--modal-scale)) var(--font-body);
}
.lm-chip:hover { color: var(--modal-ink); border-color: var(--modal-accent, var(--modal-accent-default)); }

/* the body: the document in a centred column */
.lm-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 30px 34px; }
.lm-doc { max-width: 700px; margin: 0 auto; font-family: var(--font-body); }
/* ONE scroller: the reading FLOWS into .lm-body. The doc is the info panel's markup (.text-content > .mi-info-scroll),
   whose two-panel rules (reading-v3.css) make those boxes scrollers with overscroll-behavior: contain — full height
   here, so they never scroll, but they swallow the wheel and the swipe over the text (it only scrolled from .lm-body's own
   scrollbar: "the recurring can't-wheel-scroll bug", Edward 2026-10-27). In a modal they are plain blocks. */
.lm-body .lm-doc.text-content,
.lm-body .lm-doc.text-content.shim-has-info-scroll { display: block; overflow: visible; overscroll-behavior: auto; flex: none; }
.lm-body .lm-doc.text-content > .mi-info-scroll { overflow: visible; overscroll-behavior: auto; min-height: 0; }
.lm-doc .entry-text, .lm-doc .cel-prose { max-width: none; }   /* the column sets the measure */
.lm-doc .reading-desc { margin: 2px 0 14px; font-size: calc(16px * var(--modal-scale)); line-height: 1.6; font-style: italic; color: var(--modal-dim); }
.lm-doc .mi-chart-role {   /* which chart, which moment — a note */
  margin: 0 0 18px; padding: 10px 14px; border-radius: 12px;
  background: var(--modal-raised); border: 1px solid var(--modal-line);
  font-size: calc(13.5px * var(--modal-scale)); color: var(--modal-dim);
}
.lm-doc .mi-section { margin: 26px 0 0; }
.lm-doc .mi-section:first-child { margin-top: 0; }
.lm-doc .section-label {   /* a section: accent eyebrow + a hairline */
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; border: 0; background: none;
  font-size: calc(11.5px * var(--modal-scale)); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--modal-accent-text, var(--modal-accent, var(--modal-accent-default)));
}
.lm-doc .section-label::after { content: ''; flex: 1; height: 1px; background: var(--modal-line); }
.lm-doc .mi-bordered {
  padding: 12px 14px; border-radius: 12px;
  background: var(--modal-raised); border: 1px solid var(--modal-line); border-left: 3px solid var(--c, var(--modal-line));
}
.lm-doc .mi-grid { gap: 10px; }
/* the disclosures at the foot — "Additional information", "Show symbol key": a full-width button */
.lm-doc .mi-more, .lm-doc .ring-key-details { margin-top: 24px; padding-top: 0; border-top: 0; }
.lm-doc .mi-more-summary, .lm-doc .ring-key-summary {
  justify-content: center; padding: 10px 14px; border-radius: 12px; text-align: center;
  background: var(--modal-raised2); border: 1px solid var(--modal-line); color: var(--modal-ink);
  font-size: calc(14px * var(--modal-scale)); font-weight: 500; letter-spacing: 0; text-transform: none;
}
.lm-doc .mi-more-summary::before, .lm-doc .ring-key-summary::before { opacity: 1; color: var(--modal-dim); }
.lm-doc .mi-more-summary:hover, .lm-doc .ring-key-summary:hover { border-color: var(--modal-accent, var(--modal-accent-default)); }
.lm-doc .ring-key { margin-top: 12px; }
.lm-doc .ring-key .ring-key-row { padding: 3px 0; font-size: calc(14px * var(--modal-scale)); color: var(--modal-text); }
.lm-doc .ring-key .ring-key-glyph { font-size: 16px; }
.lm-doc .ring-key .ring-key-label { color: var(--modal-ink); }
.lm-doc .ring-key .ring-key-meaning { font-size: calc(13px * var(--modal-scale)); color: var(--modal-dim); }
/* "What you tapped" — the segment's own reading on top */
.lm-selected {
  max-width: 700px; margin: 0 auto 18px; padding: 14px 16px; border-radius: 14px;
  background: var(--modal-raised); border: 1px solid var(--modal-line);
}
.lm-eyebrow {
  margin-bottom: 6px; font-size: calc(11px * var(--modal-scale)); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--modal-accent-text, var(--modal-accent, var(--modal-accent-default)));
}
.lm-err { color: #ff8a8a; }
/* a named thing in a reading: the ink, a quiet underline (it opens its modal) */
.lm-doc .mi-entity-link:not(.mi-accent) {
  cursor: pointer; color: var(--modal-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--modal-ink) 30%, transparent);
}
/* Synastry's own prose blocks (drawn with inline styles): the standard's size and colour */
.lm-doc .syn { font-size: calc(15px * var(--modal-scale)); }
.lm-doc .syn [style*="color:var(--mi-text"] { color: var(--modal-text) !important; }
.lm-doc .syn-subhead { font-size: calc(12px * var(--modal-scale)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--modal-dim); opacity: 1; }

/* the lens overview (ui/oracle-first/lens-overview.js): one row per lens, centre outward */
.lo-list { display: flex; flex-direction: column; gap: 8px; }
.lo-row {
  --lo-row: var(--modal-accent-default);
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer; padding: 10px 14px 10px 10px;
  border-radius: 14px; background: var(--modal-raised); border: 1px solid var(--modal-line); border-left: 4px solid var(--lo-row);
  color: var(--modal-text); font: inherit;
}
.lo-row:hover { border-color: var(--lo-row); }
.lo-ring {   /* the lens's ring as a circle, on the chart's own night */
  flex: 0 0 auto; width: var(--lo-size, 72px); height: var(--lo-size, 72px); border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #08071a;
  border: 1px solid color-mix(in srgb, var(--lo-row) 45%, var(--modal-bg));
}
.lo-ring canvas { display: block; }
.lo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-place { font-size: calc(10.5px * var(--modal-scale)); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--modal-faint); }
.lo-name { font-size: calc(16px * var(--modal-scale)); font-weight: 600; color: var(--lo-row); }
.lo-desc { font-size: calc(14px * var(--modal-scale)); line-height: 1.5; color: var(--modal-text); }
.lo-go { flex: 0 0 auto; font-size: 22px; color: var(--modal-dim); }
.lo-row:hover .lo-go { color: var(--lo-row); }

/* a phone: the reading rises as a sheet; its header starts below ✕ and ‹ Back */
@media (max-width: 640px) {
  .lm-backdrop { align-items: flex-end; padding: 0; }
  .lm-card { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .lm-index { padding: 4px 18px 10px; }
  .lm-body { padding: 14px 18px 26px; }
}
@media (max-width: 520px) { .lm-head, .lm-head:has(> .modal-back) { padding: 58px 18px 10px; } }

/* ═══════════════ the journal entry form (reading-v3 / day-summary openJournalEntryModal) ═══════════════
   The shell and its heading; its fields keep their own look until the utility modals (build step 7). The accent line is
   a background band, so it stays put while the card scrolls. */
.journal-form-modal { background: rgba(5, 4, 16, 0.74); }
.journal-form-card {
  position: relative; padding: 28px 28px 24px; overflow-x: hidden;
  background: linear-gradient(var(--modal-accent-default), var(--modal-accent-default)) top / 100% 3px no-repeat, var(--modal-bg);
  color: var(--modal-text); border: 1px solid var(--modal-line); border-radius: 18px; box-shadow: none; font-family: var(--font-body);
}
.journal-form-card > .reading-title {
  font-family: var(--font-display); font-size: calc(23px * var(--modal-scale)); font-weight: 500; letter-spacing: 0.02em; color: var(--modal-ink);
}
.journal-form-card > .reading-desc { font-size: calc(13px * var(--modal-scale)); font-style: normal; color: var(--modal-dim); }

/* ═══════════════ inside a reading or a thing's "In this chart": one type system (DESIGN §5) ═══════════════
   Edward 2026-10-26: "things inside cards (like in transits) look messily formatted". One size, one weight and a
   full-opacity colour per part. */
:is(.lm-doc, .kpr-modal-l2-html) { --mi-text: var(--modal-text); }
:is(.lm-doc, .kpr-modal-l2-html) .entry-text, .kpr-modal-l2-html p { max-width: none; }
:is(.lm-doc, .kpr-modal-l2-html) .entry { margin: 0 0 9px; padding: 0; border: 0; background: none; }
:is(.lm-doc, .kpr-modal-l2-html) .entry:last-child { margin-bottom: 0; }
:is(.lm-doc, .kpr-modal-l2-html) .entry-text { font-size: calc(15px * var(--modal-scale)); line-height: 1.66; color: var(--modal-text); opacity: 1; }
.lm-doc .mi-bordered .entry-text { font-size: calc(14.5px * var(--modal-scale)); }
:is(.lm-doc, .kpr-modal-l2-html) .mi-accent { font-weight: 600; }
.lm-doc .mi-card-head { margin: 0 0 9px; }
.lm-doc .mi-card-head .mi-accent { font-size: calc(15.5px * var(--modal-scale)); letter-spacing: 0.01em; }
:is(.lm-doc, .kpr-modal-l2-html) .mi-prose-label {   /* a fact line: sentence case, each named thing a soft pill */
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; line-height: 1.4;
  text-transform: none; letter-spacing: 0; opacity: 1; font-size: calc(13px * var(--modal-scale)); color: var(--modal-dim);
}
:is(.lm-doc, .kpr-modal-l2-html) .mi-prose-label .mi-accent {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: calc(13px * var(--modal-scale)); font-weight: 500;
  background: color-mix(in srgb, var(--c, #8f88c8) 14%, var(--modal-raised));
  border: 1px solid color-mix(in srgb, var(--c, #8f88c8) 38%, var(--modal-raised));
  color: color-mix(in srgb, var(--c, #8f88c8) 70%, #ffffff);
}
:is(.lm-doc, .kpr-modal-l2-html) :is(.mi-prose-caption, .mi-muted, .mi-prose-muted) {   /* a dimmer colour — never a reduced opacity */
  opacity: 1; color: var(--modal-dim); font-size: calc(13.5px * var(--modal-scale)); line-height: 1.55;
}
:is(.lm-doc, .kpr-modal-l2-html) :is(.mi-muted, .mi-prose-muted) { color: var(--modal-faint); }
:is(.lm-doc, .kpr-modal-l2-html) .mi-small { font-size: calc(12.5px * var(--modal-scale)); }
:is(.lm-doc, .kpr-modal-l2-html) .mi-bold { font-weight: 600; }
:is(.lm-doc, .kpr-modal-l2-html) .entry-condition { margin-bottom: 4px; font-size: calc(14px * var(--modal-scale)); font-weight: 600; color: var(--modal-ink); opacity: 1; }
:is(.lm-doc, .kpr-modal-l2-html) .mi-pct-header { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: calc(13.5px * var(--modal-scale)); color: var(--modal-dim); opacity: 1; }
:is(.lm-doc, .kpr-modal-l2-html) .mi-bar-track { height: 6px; border-radius: 999px; background: var(--modal-raised2); overflow: hidden; }
/* the fill's look is the panel's (its colour at 70 % over the track) baked in, not a reduced opacity */
:is(.lm-doc, .kpr-modal-l2-html) .mi-bar-fill { border-radius: 999px; opacity: 1; background: color-mix(in srgb, var(--c) 70%, var(--modal-raised2)); }
.lm-doc .mi-chart-role-icon { opacity: 1; }
:is(.lm-doc, .kpr-modal-l2-html) .mi-chip {
  padding: 3px 11px; border-radius: 999px; font-size: calc(13px * var(--modal-scale)); opacity: 1;
  background: var(--modal-raised2); border: 1px solid var(--modal-line); color: var(--modal-text);
}
:is(.lm-doc, .kpr-modal-l2-html) .mi-corr-strip:empty { display: none; }   /* an empty correspondence strip takes no room */
:is(.lm-doc, .kpr-modal-l2-html) .mi-corpus-retry { font-size: calc(13px * var(--modal-scale)); color: var(--modal-faint); }

/* a lens's live figure in its reading (core/lens-view/lens-figure.js): its own ring on the chart's night, its caption
   UNDER it (Edward 2026-10-27: the name "should sit below it") */
.lm-doc .lm-figure { display: flex; flex-direction: column; align-items: center; margin: 4px 0 16px; }
.lm-doc .lm-figure-disc { border-radius: 50%; background: #08071a; border: 1px solid var(--modal-line); line-height: 0; }
.lm-doc .lm-figure-caption {
  margin-top: 8px; text-align: center; font-family: var(--font-display); font-weight: 500;
  font-size: calc(15px * var(--modal-scale)); letter-spacing: 0.02em; color: var(--modal-ink);
}
.lm-doc .lm-figure-caption[hidden] { display: none; }

/* ═══════════════ UTILITY modals (step 7) — the shell + title only ═══════════════
   As approved on the prototype's Chart Manager (DESIGN-2026-10-26-modal-standard §1, §11 step 7): a utility modal (the
   Chart Manager, Chart Modes, prompts, confirms, forms) ADDS these classes to its own backdrop / card / title / ✕. Its
   own stylesheet no longer sets the shell (background, border, corners, shadow, face, the title's face) — removed from
   each, so nothing fights these. Its buttons and fields keep their own look; text it dimmed by opacity takes the dim /
   faint colours instead. Its own width, padding and layout stay. */
.modal-util-backdrop { background: rgba(5, 4, 16, 0.74); }   /* a plain dim, never a blur */
.modal-util {
  /* the accent line drawn as a background layer, so it stays at the top edge while the card's content scrolls */
  background: linear-gradient(var(--modal-accent, var(--modal-accent-default)), var(--modal-accent, var(--modal-accent-default))) top / 100% 3px no-repeat, var(--modal-bg);
  color: var(--modal-text); border: 1px solid var(--modal-line); border-radius: 18px; box-shadow: none;
  font-family: var(--font-body);
}
.modal-util-title {
  font-family: var(--font-display); font-weight: 500; font-size: calc(21px * var(--modal-scale)); line-height: 1.25;
  letter-spacing: 0.02em; text-transform: none; color: var(--modal-ink);
}
.modal-util-close {   /* the standard ✕'s look; each modal keeps its own placement */
  width: 34px; height: 34px; padding: 0; border-radius: 50%; flex: 0 0 auto; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--modal-raised2); border: 1px solid var(--modal-line); color: var(--modal-dim); font: 15px var(--font-body);
}
.modal-util-close:hover { color: var(--modal-ink); background: var(--modal-raised2); border-color: var(--modal-accent, var(--modal-accent-default)); }