/* LearnColorpuncture — the stylesheet.
*
* ⭐ THE INTENT: clear, calm, luminous, precise, grounded. A serious practitioner learning
* environment, not a wellness brochure and not Sacred Altar (which is deep violet, ornamented,
* and belongs to a different practice — nothing here borrows from it).
*
* ⚠️ COLOUR IS THE SUBJECT MATTER, so it is used as LIGHT: a warm near-white ground, deep
* ink text, and a narrow spectrum accent used sparingly for state — never a rainbow, and
* never carrying meaning that the words do not also carry (colour alone must not be the only
* signal for a locked state, which is why every tag has a word in it).
*
* Dark mode is honoured because people study at night.
*/
:root {
color-scheme: light;
--ink: #17202a;
--ink-soft: #4a5764;
--ink-faint: #64717d;
--ground: #fbfaf7;
--panel: #ffffff;
--line: #e4e2dc;
--accent: #2f6f7e; /* teal-slate: calm, clinical, not corporate blue */
--accent-ink: #1d4a55;
--warm: #c8783a; /* used only for "awaiting", never for danger */
--ok: #3f7d58;
--lock: #8a6a3d;
/* ── R8: the SPECTRAL REGISTER — the 5% of any screen where colour IS the meaning.
⛔ Never for semantics (ok/warn/lock stay separate above), never twice on one screen for
two different meanings, and always beside a word. */
--spec-1: #a63d2f; /* deep red */
--spec-2: #c8783a; /* warm orange */
--spec-3: #b9962e; /* gold */
--spec-4: #4d7d4f; /* green */
--spec-5: #2f6f7e; /* teal (the working accent's home) */
--spec-6: #45589e; /* indigo */
--spec-7: #6d4f8c; /* violet */
/* typography: the public voice is a humanist serif; the working voice stays sans */
--serif: 'Source Serif 4', 'Source Serif Pro', Charter, Georgia, 'Times New Roman', serif;
--radius: 10px;
--shadow: 0 1px 2px rgba(23,32,42,.05), 0 8px 24px rgba(23,32,42,.06);
}
/* LC_MARK_THEME_TOGGLE: light is the default everywhere; dark only when chosen, or when
the person chose Auto and the device is dark (lc-theme.js sets data-theme). */
:root[data-theme="dark"] {
color-scheme: dark;
--ink: #e9edf1; --ink-soft: #b3bec9; --ink-faint: #8593a0;
--ground: #12171c; --panel: #182028; --line: #263039;
--accent: #6fb3c4; --accent-ink: #a8d5e0;
--warm: #d9975c; --ok: #6fb98a; --lock: #c3a171;
--spec-1: #d06a5b; --spec-2: #d9975c; --spec-3: #cfb35a; --spec-4: #79ad7b;
--spec-5: #6fb3c4; --spec-6: #8b9dd9; --spec-7: #a58ac2;
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
color-scheme: dark;
--ink: #e9edf1; --ink-soft: #b3bec9; --ink-faint: #8593a0;
--ground: #12171c; --panel: #182028; --line: #263039;
--accent: #6fb3c4; --accent-ink: #a8d5e0;
--warm: #d9975c; --ok: #6fb98a; --lock: #c3a171;
--spec-1: #d06a5b; --spec-2: #d9975c; --spec-3: #cfb35a; --spec-4: #79ad7b;
--spec-5: #6fb3c4; --spec-6: #8b9dd9; --spec-7: #a58ac2;
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
}
/* Source Serif 4 — SIL OFL 1.1, self-hosted (licence: /static/fonts/OFL-source-serif-4.txt) */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400;
font-display: swap; src: url('/static/fonts/source-serif-4-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400;
font-display: swap; src: url('/static/fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600;
font-display: swap; src: url('/static/fonts/source-serif-4-latin-600.woff2') format('woff2'); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--ground); color: var(--ink);
font: 16px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-feature-settings: "kern" 1;
}
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
/* ⭐ A VISIBLE FOCUS RING EVERYWHERE. Keyboard navigation is not an afterthought — several of the
people who will use this are studying with one hand on a manual. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* ── header ─────────────────────────────────────────────────────────────── */
.top {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 14px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 650; letter-spacing: -.01em; text-decoration: none; color: var(--ink);
display: inline-flex; align-items: center; gap: 10px; }
.mark {
width: 18px; height: 18px; border-radius: 50%;
background: conic-gradient(from 210deg, #d4574e, #d99a3f, #cbbf4a, #5aa46a, #3f7f9e, #6a5aa0, #d4574e);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.nav { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.nav a { color: var(--ink-soft); text-decoration: none; padding: 6px 8px; border-radius: 6px; font-size: 15px; }
.nav a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.nav .cta { background: var(--accent); color: #fff; padding: 7px 14px; }
.nav .cta:hover { background: var(--accent-ink); color: #fff; }
.nav .quiet { color: var(--ink-faint); }
.nav-action-form { display: inline; margin: 0; }
/* LC_MARK_THEME_TOGGLE — one small button in the header, hidden until lc-theme.js binds it */
.theme-btn { appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
font: inherit; font-size: 13px; line-height: 1; padding: 8px 10px; border-radius: 999px; cursor: pointer;
order: 2; white-space: nowrap; min-height: 36px; }
.theme-btn:hover { color: var(--ink); border-color: var(--accent); }
.nav .nav-action { appearance: none; border: 0; background: transparent; font: inherit;
color: var(--ink-soft); padding: 6px 8px; border-radius: 6px; font-size: 15px; cursor: pointer; }
.nav .nav-action:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.navsec { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
width: 100%; padding: 8px 8px 0; border-top: 1px solid var(--line); margin-top: 6px; }
.navtoggle, .navtoggle-input { display: none; }
/* ⭐ RESPONSIVE NAV WITHOUT JAVASCRIPT — a checkbox and a label. The CSP forbids inline script,
and a menu that needs a script to open is a menu that fails when the script does. */
@media (max-width: 900px) {
.navtoggle-input { display: block; position: absolute; top: 14px; right: 20px; z-index: 2;
width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.navtoggle { display: flex; width: 44px; height: 44px; flex-direction: column; align-items: center;
justify-content: center; gap: 4px; margin-left: auto; padding: 10px; cursor: pointer; border-radius: 8px; }
.navtoggle-input:focus-visible + .navtoggle { outline: 3px solid var(--accent); outline-offset: 2px; }
.navtoggle span { display: block; width: 22px; height: 2px; background: var(--ink); }
.nav { display: none; width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; }
.navtoggle-input:checked ~ .nav { display: flex; }
.theme-btn { order: 0; margin-left: auto; }
.navtoggle { margin-left: 8px; }
.nav a { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.nav-action-form { display: block; }
.nav .nav-action { width: 100%; padding: 10px 8px; border-bottom: 1px solid var(--line);
border-radius: 0; text-align: left; }
.navsec { margin-top: 10px; }
}
/* ── preview banner ─────────────────────────────────────────────────────── */
/* ⭐ IMPOSSIBLE TO MISS, AND THE EXIT IS ALWAYS IN IT. */
.preview-banner {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 20px; background: #2c2116; color: #f4e6d2;
border-bottom: 2px solid var(--warm); font-size: 14px; letter-spacing: .02em;
}
.preview-banner strong { letter-spacing: .06em; }
.pb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warm); flex: none; }
.pb-persona { color: #c8b49a; }
.pb-exit-form { margin: 0 0 0 auto; }
.pb-exit { appearance: none; border: 0; color: #f4e6d2; background: rgba(255,255,255,.12);
padding: 5px 12px; border-radius: 6px; text-decoration: none; font: inherit; font-weight: 600;
cursor: pointer; }
.pb-exit:hover { background: rgba(255,255,255,.22); color: #fff; }
.is-previewing .top { top: 41px; }
/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1040px; margin: 0 auto; padding: 32px 20px 64px; }
/* LC_MARK_EEA_WIDE — the bench takes the whole window: plates are photographed LANDSCAPE, and a
1040px column gave a landscape plate a portrait window with dead margins either side. */
.wrap.wrap-wide { max-width: none; padding: 16px 20px 40px; }
.narrow { max-width: 460px; margin: 0 auto; padding: 24px 0; }
h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; }
h2 { font-size: 19px; letter-spacing: -.01em; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 6px; }
h4 { font-size: 14px; margin: 0 0 4px; }
.lede { color: var(--ink-soft); font-size: 18px; margin: 0 0 28px; max-width: 62ch; }
.fine { color: var(--ink-faint); font-size: 13.5px; line-height: 1.55; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small { font-size: 13px; }
.big { font-size: 30px; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.crumb { margin: 0 0 8px; font-size: 14px; }
/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 40px 0 28px; }
.hero-glow {
position: absolute; inset: -60px -10% auto; height: 320px; pointer-events: none; z-index: -1;
background: radial-gradient(60% 70% at 30% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
radial-gradient(50% 60% at 78% 10%, color-mix(in srgb, var(--warm) 14%, transparent), transparent 70%);
filter: blur(8px);
}
/* ⚠️ 18ch broke the intended two-line hero into four at desktop width — the explicit
plus a narrow measure fought each other. Wide enough for the break to land where it was
written, still narrow enough to stay a headline rather than a paragraph. */
.hero h1 { max-width: 34ch; } /* R6: wide enough for the second written line to stay one line */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 16px; }
/* ── cards and grids ────────────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 22px; margin: 0 0 18px; box-shadow: var(--shadow); }
.card p:last-child { margin-bottom: 0; }
.quiet-card { background: transparent; box-shadow: none; }
.physio-photo { max-width: 100%; border-radius: var(--radius); } /* LC_MARK_PHYSIOGNOMY_STUDIO */
/* LC_MARK_EEA_INTAKE_JS — style-src has no unsafe-inline, so the intake queue's per-photo
preview cannot set element.style.* from JS (that is a style-src violation exactly like an
inline style="" attribute); found live 09-16 alongside the CSP fix for blob: thumbnails.
Sized by class, rotated by a data attribute the CSS below reads instead. */
.eea-intake-thumb, .eea-intake-thumb-loading { width: 90px; height: 90px; }
.eea-intake-thumb { object-fit: cover; border-radius: var(--radius); }
.eea-intake-thumb[data-rotation="90"] { transform: rotate(90deg); }
.eea-intake-thumb[data-rotation="180"] { transform: rotate(180deg); }
.eea-intake-thumb[data-rotation="270"] { transform: rotate(270deg); }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid .card { margin: 0; }
.mini { border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-left: 12px; }
/* ── library shelf view (2026-09-19) — an alternative to the flat "My sources" list;
the top-border color is the source's KIND (SPINE_HUE in views-library.js), a fixed
meaningful accent standing in for a cover we don't have, never a hash-of-title rainbow */
.lib-view-toggle a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.lib-shelf { margin-top: 4px; }
/* style-src 'self' refuses an inline style="" attribute (same rule as JS element.style.*=,
hit twice before this file) — the per-kind spine color lives here, keyed off data-kind,
never in the HTML the server sends */
.lib-spine { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s;
border-top: 5px solid var(--ink-faint); }
.lib-spine[data-kind="original-manual"] { border-top-color: #2f6f7e; }
.lib-spine[data-kind="teaching-transcript"] { border-top-color: #7e6f2f; }
.lib-spine[data-kind="research"] { border-top-color: #5a4a8f; }
.lib-spine[data-kind="practitioner-notes"] { border-top-color: #3f7d4a; }
.lib-spine[data-kind="case-material"] { border-top-color: #8f4a4a; }
.lib-spine[data-kind="ai-generated-summary"] { border-top-color: #4a6b8f; }
.lib-spine:hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 12%, transparent); }
.lib-spine h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.lib-spine-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px !important; }
/* ── empty states ───────────────────────────────────────────────────────── */
/* ⭐ Distinct from a card, so "nothing here yet" never reads as "something broke". */
.empty {
border: 1px dashed var(--line); border-radius: var(--radius);
padding: 20px 22px; background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.empty h3 { color: var(--ink); }
.empty p { color: var(--ink-soft); margin: 0; font-size: 14.5px; max-width: 70ch; }
/* ── lists and tables ───────────────────────────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
padding: 13px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row p { margin: 2px 0 0; }
.list-row.locked { opacity: .72; }
.plain { margin: 0; padding-left: 20px; }
.plain li { margin-bottom: 8px; }
.steps { margin: 0; padding-left: 20px; }
.steps li { margin-bottom: 10px; }
.table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
vertical-align: top; white-space: nowrap; }
.table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
/* ── tags, notices ──────────────────────────────────────────────────────── */
/* ⚠️ EVERY TAG CARRIES A WORD. Colour is reinforcement, never the only signal. */
.tag { display: inline-block; font-size: 12px; letter-spacing: .03em; padding: 3px 9px;
border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent);
color: var(--ink-soft); white-space: nowrap; }
.tag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.tag.lock { background: color-mix(in srgb, var(--lock) 16%, transparent); color: var(--lock); }
.tag.needs-review { background: color-mix(in srgb, var(--warm) 16%, transparent); color: var(--warm); }
.provenance { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.notice { border-radius: var(--radius); padding: 14px 18px; margin: 0 0 18px;
border: 1px solid var(--line); background: var(--panel); }
.notice.lock { border-left: 4px solid var(--lock);
background: color-mix(in srgb, var(--lock) 7%, var(--panel)); }
.error { color: #a3352c; background: color-mix(in srgb, #a3352c 8%, transparent);
border-radius: 8px; padding: 10px 14px; }
/* ── buttons and forms ──────────────────────────────────────────────────── */
.btn { display: inline-block; background: var(--accent); color: #fff; border: 1px solid var(--accent);
padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 15px;
cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn.ghost { background: transparent; color: var(--accent-ink); border-color: var(--line); }
.btn.ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent-ink); }
.btn.small { padding: 6px 13px; font-size: 13.5px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.inline { display: inline; }
.form { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.form input { font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px;
background: var(--panel); color: var(--ink); }
.form input:focus { border-color: var(--accent); }
/* the intake field wrapper (122 rewrite) — matches the astra prototype's own .field: a label
row, then a control that fills the width, sized the same whether it's an input or a select */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { display: block; font-weight: 550; font-size: 15px; color: var(--ink-soft); }
.field input, .field textarea, .field select { width: 100%; font: inherit; padding: 11px 13px;
border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
/* ── progress and video ─────────────────────────────────────────────────── */
.progress { height: 7px; background: color-mix(in srgb, var(--ink) 8%, transparent);
border-radius: 999px; overflow: hidden; margin: 6px 0 10px; }
/* 🔴 THE FULL-BAR-AT-ZERO BUG WAS THE CSP. `style="width:0%"` is an inline style attribute, and
`style-src 'self'` (no unsafe-inline) makes the browser IGNORE it — so the bar defaulted to
full width and an untouched dashboard read as "complete". Width lives in CLASSES now; there is
no inline-style path in this codebase that can work, ever. */
.progress-bar { height: 100%; background: var(--accent); width: 0; }
.progress-bar.p0 { width: 0; } .progress-bar.p25 { width: 25%; } .progress-bar.p50 { width: 50%; }
.progress-bar.p75 { width: 75%; } .progress-bar.p100 { width: 100%; }
.progress-state { margin: 0 0 6px; }
.video { margin-bottom: 18px; }
/* ⚠️ A FULL-WIDTH 16:9 PLACEHOLDER SWALLOWED THE LESSON PAGE — 1,100px of hatching above
the resources and the notes. A player that is not playing anything should not be the
largest thing on the screen. */
.video-frame { max-width: 620px; aspect-ratio: 16 / 9; border-radius: var(--radius); display: grid; place-items: center;
background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line);
color: var(--ink-faint); margin-bottom: 10px; }
.video.pending .video-frame { border-style: dashed;
background: repeating-linear-gradient(45deg, transparent, transparent 10px,
color-mix(in srgb, var(--lock) 5%, transparent) 10px, color-mix(in srgb, var(--lock) 5%, transparent) 20px); }
.video-state { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lock); }
/* ── gate and footer ────────────────────────────────────────────────────── */
.gate { position: relative; text-align: center; padding-top: 12vh; }
.gate .form { text-align: left; }
.foot { border-top: 1px solid var(--line); padding: 26px 20px 44px; margin-top: 40px; }
.foot p { max-width: 1000px; margin: 0 auto 8px; font-size: 13.5px; color: var(--ink-faint); }
.foot strong { color: var(--ink-soft); }
/* ── the public orientation layer (Round 6) ─────────────────────────────── */
.kicker { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--accent-ink); margin: 0 0 10px; font-weight: 650; }
/* the numbered stage ladder — pathways and the Stakeholder Tour share it */
.stages { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: stage; }
.stage { display: flex; gap: 16px; align-items: flex-start; background: var(--panel);
border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 18px 20px; margin: 0 0 14px; }
.stage h2 { margin-bottom: 6px; }
.stage p { margin: 0 0 8px; }
.stage .btnrow { margin: 10px 0 0; }
.stage-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid;
place-items: center; font-weight: 650; font-size: 15px; color: var(--accent-ink);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
/* ⭐ an external link is visibly external and never silently leaves the site */
a.ext { font-weight: 600; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0; }
/* keyboard users get a way past the navigation; invisible until focused */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--panel);
color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; }
.skip:focus-visible { left: 0; }
/* ══ R8 · THE ATLAS LAYER — the public voice ═══════════════════════════════
"A luminous teaching atlas meeting a carefully prepared practitioner workspace."
Serif display, fine rules with spectral ticks, numbered figures, editorial rhythm. */
.display, .hero h1, .doorway h2 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
h2.display { font-size: clamp(24px, 3vw, 30px); margin-bottom: 14px; }
.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; }
.hero .lede { font-size: clamp(17px, 2vw, 20px); }
/* a fine rule with a small spectral tick — the section divider that is not a card */
.rule { border: 0; border-top: 1px solid var(--line); margin: 34px 0 26px; position: relative; }
.rule::before { content: ''; position: absolute; top: -2px; left: 0; width: 34px; height: 3px;
background: var(--tick, var(--accent)); border-radius: 2px; }
.rule.s1 { --tick: var(--spec-1); } .rule.s2 { --tick: var(--spec-2); }
.rule.s3 { --tick: var(--spec-3); } .rule.s4 { --tick: var(--spec-4); }
.rule.s5 { --tick: var(--spec-5); } .rule.s6 { --tick: var(--spec-6); }
.rule.s7 { --tick: var(--spec-7); }
/* numbered figures — the atlas voice */
.figure { margin: 0; }
.figure svg { display: block; width: 100%; height: auto; }
.figcap { font-size: 13px; color: var(--ink-faint); margin-top: 8px; }
.figcap .figno { font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--ink-soft);
margin-right: 8px; }
/* the hero composition: text beside an authored figure */
.hero-split { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(260px, 4fr);
gap: 40px; align-items: center; }
@media (max-width: 880px) { .hero-split { grid-template-columns: 1fr; } }
/* audience doorways — an editorial ledger, not six identical cards */
.doorways { list-style: none; margin: 0; padding: 0; }
.doorway { display: grid; grid-template-columns: 72px minmax(200px, 30ch) 1fr auto;
gap: 8px 22px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line);
position: relative; }
.doorway::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px;
border-radius: 2px; background: var(--tick, var(--line)); }
.doorway.s1 { --tick: var(--spec-1); } .doorway.s2 { --tick: var(--spec-2); }
.doorway.s3 { --tick: var(--spec-3); } .doorway.s4 { --tick: var(--spec-4); }
.doorway.s5 { --tick: var(--spec-5); } .doorway.s6 { --tick: var(--spec-6); }
.doorway .figno { padding-left: 16px; font-variant-caps: all-small-caps; letter-spacing: .08em;
color: var(--ink-faint); font-size: 14px; }
.doorway h2 { margin: 0; font-size: 21px; }
.doorway p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 58ch; }
.doorway .go { white-space: nowrap; font-weight: 600; }
@media (max-width: 880px) {
.doorway { grid-template-columns: 48px 1fr; }
.doorway p { grid-column: 2; } .doorway .go { grid-column: 2; }
}
/* the platform-flow strip (learning → … → stewardship) */
.flow { display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; }
.flow-step { flex: 1 1 150px; padding: 14px 16px 12px; border-left: 1px solid var(--line);
position: relative; min-width: 140px; }
.flow-step::before { content: ''; position: absolute; left: -2px; top: 14px; width: 3px;
height: 22px; border-radius: 2px; background: var(--tick, var(--accent)); }
.flow-step h3 { font-size: 14.5px; margin: 0 0 4px; }
.flow-step p { font-size: 13px; color: var(--ink-faint); margin: 0; }
.flow-step.s1 { --tick: var(--spec-1); } .flow-step.s2 { --tick: var(--spec-2); }
.flow-step.s3 { --tick: var(--spec-3); } .flow-step.s4 { --tick: var(--spec-4); }
.flow-step.s5 { --tick: var(--spec-5); } .flow-step.s6 { --tick: var(--spec-6); }
/* the boundary strip — present, subordinate */
.boundary { font-size: 13px; color: var(--ink-faint); border-top: 1px solid var(--line);
padding-top: 16px; display: flex; gap: 6px 22px; flex-wrap: wrap; }
/* draft-review marking for orientation pages awaiting factual review */
.draft-note { border-left: 4px solid var(--warm); background: color-mix(in srgb, var(--warm) 7%, var(--panel));
border-radius: var(--radius); padding: 12px 16px; font-size: 14px; margin: 0 0 20px; }
/* the hero figure's line language */
.hf-beam { stroke: var(--ink-soft); stroke-width: 2.4; }
.hf-lens { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.hf-ray { stroke-width: 2.2; opacity: .85; }
.hf-s1 { stroke: var(--spec-1); } .hf-s2 { stroke: var(--spec-2); } .hf-s3 { stroke: var(--spec-3); }
.hf-s4 { stroke: var(--spec-4); } .hf-s5 { stroke: var(--spec-5); } .hf-s6 { stroke: var(--spec-6); }
.hf-s7 { stroke: var(--spec-7); }
.hf-form circle, .hf-form path, .hf-form ellipse { fill: none; stroke: var(--ink-soft);
stroke-width: 1.7; stroke-linecap: round; }
.hf-form .hf-dot { fill: var(--ink-faint); stroke: none; }
/* ── grouped, keyboard-first navigation (details/summary — no JS to fail) ── */
.navgroup { position: relative; }
.navgroup > summary { list-style: none; cursor: pointer; color: var(--ink-soft);
padding: 6px 8px; border-radius: 6px; font-size: 15px; user-select: none; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: ' ▾'; font-size: 10px; color: var(--ink-faint); }
.navgroup > summary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.navgroup[open] > summary { color: var(--accent-ink);
background: color-mix(in srgb, var(--accent) 12%, transparent); }
.navgroup .navmenu { position: absolute; top: calc(100% + 6px); left: auto; right: 0; min-width: 230px;
max-width: min(24rem, calc(100vw - 2rem)); max-height: calc(100vh - 6rem); overflow: auto;
background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
box-shadow: var(--shadow); padding: 6px; z-index: 30; display: flex; flex-direction: column; }
.navgroup .navmenu a { display: block; padding: 9px 12px; border-radius: 7px; border-bottom: 0; }
@media (max-width: 900px) {
.navgroup .navmenu { position: static; max-width: none; max-height: none; overflow: visible;
border: 0; box-shadow: none; padding: 0 0 0 14px; }
.navgroup > summary { padding: 10px 8px; border-bottom: 1px solid var(--line); display: block; }
}
/* ── the pathway-stage ribbon (dashboards) ─────────────────────────────────*/
.ribbon { display: flex; gap: 6px; margin: 6px 0 10px; flex-wrap: wrap; }
.ribbon-stage { flex: 1 1 120px; min-width: 110px; padding: 10px 12px 8px; border-radius: 8px;
border: 1px solid var(--line); position: relative; font-size: 13px; color: var(--ink-faint);
background: var(--panel); }
.ribbon-stage::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
border-radius: 8px 8px 0 0; background: var(--tick, var(--line)); opacity: .35; }
.ribbon-stage.s1 { --tick: var(--spec-1); } .ribbon-stage.s2 { --tick: var(--spec-2); }
.ribbon-stage.s3 { --tick: var(--spec-3); } .ribbon-stage.s4 { --tick: var(--spec-4); }
.ribbon-stage.s5 { --tick: var(--spec-7); }
.ribbon-stage strong { display: block; color: var(--ink-soft); font-size: 13.5px; }
.ribbon-stage.is-here { border-color: var(--tick, var(--accent));
background: color-mix(in srgb, var(--tick, var(--accent)) 7%, var(--panel)); color: var(--ink-soft); }
.ribbon-stage.is-here::before { opacity: 1; }
.ribbon-stage.is-here strong { color: var(--ink); }
.ribbon-note { font-size: 12px; }
/* the one dominant next action */
.next-dominant { border-left: 4px solid var(--accent); }
.next-dominant p strong { font-size: 17px; }
/* the practitioner's doorway into the Studio demonstration */
.studio-door { display: block; border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px 20px; text-decoration: none; background:
linear-gradient(120deg, color-mix(in srgb, var(--spec-5) 7%, var(--panel)),
color-mix(in srgb, var(--spec-7) 7%, var(--panel)));
box-shadow: var(--shadow); }
.studio-door:hover { border-color: var(--accent); }
.studio-door h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.studio-door p { margin: 0; color: var(--ink-soft); font-size: 14px; }
/* ── intake (R12) ──────────────────────────────────────────────────────── */
.consent-line { display: flex; gap: 8px; align-items: flex-start; font-size: 14px;
color: var(--ink-soft); }
.consent-line.small { font-size: 12.5px; align-items: center; }
.consent-line input { margin-top: 3px; }
.inline-select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line);
border-radius: 7px; background: var(--panel); color: var(--ink); max-width: 190px; }
.app-act { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 8px 4px 0; }
.token-once { font-size: 15px; background: color-mix(in srgb, var(--warm) 10%, transparent);
padding: 10px 12px; border-radius: 8px; word-break: break-all; user-select: all; }
/* ── the persistent Studio (R11) ───────────────────────────────────────── */
.train-notice { border-left: 4px solid var(--warm); }
.studio-head { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
flex-wrap: wrap; margin: 0 0 14px; }
.studio-head h1 { margin: 2px 0 6px; font-size: clamp(24px, 3vw, 32px); }
.studio-status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.save-state { font-size: 13px; font-weight: 650; padding: 4px 11px; border-radius: 999px; }
.save-state[data-state="saved"] { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.save-state[data-state="saving"] { background: color-mix(in srgb, var(--warm) 16%, transparent); color: var(--warm); }
.save-state[data-state="failed"], .save-state[data-state="offline"] {
background: color-mix(in srgb, #a3352c 14%, transparent); color: #a3352c; }
.ees-strategy-block + .ees-strategy-block { margin-top: 8px; }
/* ── the atlas reader (R9) ─────────────────────────────────────────────── */
.atlas { display: grid; grid-template-columns: 200px minmax(0, 68ch) minmax(220px, 300px);
gap: 30px; align-items: start; }
.atlas-left { position: sticky; top: 76px; }
.atlas-left h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-faint); }
.atlas-toc { list-style: none; margin: 0; padding: 0; }
.atlas-toc li { padding: 4px 0 4px 10px; border-left: 2px solid var(--line); }
.atlas-toc li.is-here { border-left-color: var(--accent); }
.atlas-toc li.is-here a { color: var(--accent-ink); font-weight: 600; }
.atlas-center { font-size: 17px; line-height: 1.75; }
.atlas-pagehead { font-size: 22px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
/* 2026-09-19 — found live building the highlight toggle: header.top is position:sticky
(z-index 20), and a passage scrolled to align at the very top of the viewport — an anchor
jump from a citation's #p- fragment, or Playwright's own scroll-into-view —
sits PARTLY UNDER it. Not just the new highlight button: any citation deep-link into this
page had the same latent problem, silently cropping the cited passage's own top edge.
scroll-margin-top covers the tallest real header (this operator account's own full nav,
measured 241px) plus room to spare, same fix either way. */
.atlas-passage { position: relative; margin: 0 0 1.1em; scroll-margin-top: 270px; }
.atlas-passage .anchor { opacity: 0; margin-left: 6px; text-decoration: none; font-size: 14px; }
.atlas-passage:hover .anchor, .atlas-passage .anchor:focus-visible { opacity: .7; }
.atlas-passage:target { background: color-mix(in srgb, var(--spec-3) 12%, transparent);
border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
/* personal reading highlights (2026-09-19) — one mark per passage, private to the reader */
.atlas-passage.rd-marked { background: color-mix(in srgb, #e8c84a 22%, transparent);
border-radius: 4px; padding: 2px 8px 2px 28px; margin-left: -8px; }
.rd-mark-tool { display: inline; }
.rd-mark-btn { position: absolute; left: -2px; top: .1em; width: 20px; height: 20px; line-height: 20px;
border: none; background: transparent; cursor: pointer; font-size: 13px; opacity: .28;
border-radius: 4px; padding: 0; }
.atlas-passage:hover .rd-mark-btn, .rd-mark-btn:focus-visible { opacity: .75; }
.rd-mark-btn.rd-mark-on { opacity: .85; }
.rd-mark-btn.rd-mark-on:hover, .rd-mark-btn.rd-mark-on:focus-visible { opacity: 1; }
.atlas-right .figure { padding: 14px; }
.lib-search input { font: inherit; padding: 11px 13px; border: 1px solid var(--line);
border-radius: 8px; background: var(--panel); color: var(--ink); }
.snippet mark { background: color-mix(in srgb, var(--spec-3) 30%, transparent);
color: inherit; border-radius: 3px; padding: 0 2px; }
@media (max-width: 980px) {
.atlas { grid-template-columns: 1fr; }
.atlas-left { position: static; order: 3; } /* contents reads as a drawer after content */
.atlas-center { order: 1; } .atlas-right { order: 2; }
}
/* ── the Embodied Evaluation feasibility lab (R7) ───────────────────────── */
.ees-wrap { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 18px; }
@media (max-width: 880px) { .ees-wrap { grid-template-columns: 1fr; } }
.ees-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ees-sep { width: 1px; height: 22px; background: var(--line); }
.ees-surface.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent);
border-color: var(--accent); color: var(--accent-ink); }
.ees-canvas { background: color-mix(in srgb, var(--accent) 3%, var(--panel));
border: 1px solid var(--line); border-radius: var(--radius); touch-action: manipulation; }
.ees-svg { display: block; width: 100%; height: auto; }
/* 🔴 the author's display:block BEATS the UA's [hidden] rule — all three surfaces rendered
stacked until this line. The test graded the DOM property; the screenshot told the truth. */
.ees-svg[hidden] { display: none; }
.ees-outline { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }
/* ⛔ decoration never intercepts a click — a real Playwright click proved the tongue's midline
was swallowing the tip zone's center, exactly what a fingertip would have hit */
.ees-detail { fill: var(--ink-faint); pointer-events: none; }
.ees-detail-line { stroke: var(--line); stroke-width: 1; pointer-events: none; }
.ees-zone, .ees-hit { cursor: pointer; }
.ees-zone { fill: color-mix(in srgb, var(--accent) 10%, transparent);
stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; }
.ees-zone:hover { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.ees-zone.is-picked, .ees-hit.is-picked { fill: color-mix(in srgb, var(--warm) 32%, transparent);
stroke: var(--warm); stroke-width: 1.6; }
.ees-door { stroke-dasharray: 4 3; } /* a door looks like a door */
.ees-json { background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 8px;
padding: 10px 12px; overflow-x: auto; max-height: 260px; white-space: pre-wrap; }
/* ── R8 · the demonstration Studio ─────────────────────────────────────────*/
.ees-full { min-height: 74vh; align-items: start; }
.ees-hitpad { fill: transparent; stroke: none; cursor: pointer; } /* inflated touch targets */
/* purposeful motion: 200ms descent, 120ms pick — globally killed by prefers-reduced-motion */
.ees-view { transition: opacity .2s ease, transform .2s ease; transform-origin: 50% 40%; }
.ees-view.is-entering { opacity: 0; transform: scale(1.04); }
.ees-zone { transition: fill .12s ease, stroke .12s ease; }
/* breadcrumb of descent */
.ees-crumb { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; min-height: 30px;
font-family: var(--serif); font-size: 16px; }
.ees-crumb-item { color: var(--ink-faint); background: none; border: 0; padding: 2px 4px;
font: inherit; }
.ees-crumb-up { cursor: pointer; color: var(--accent-ink); text-decoration: underline;
text-underline-offset: 3px; border-radius: 4px; }
.ees-crumb-item.is-here { color: var(--ink); font-weight: 600; }
.ees-crumb-sep { color: var(--ink-faint); }
/* modes */
.ees-modes { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.ees-mode { font: inherit; font-size: 13px; padding: 6px 13px; border-radius: 999px;
border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); cursor: pointer; }
.ees-mode.is-active { border-color: var(--accent); color: var(--accent-ink);
background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
.ees-prompt { border-left: 3px solid var(--accent); padding-left: 10px; }
/* marks: solid = this demonstration (severity deepens the ink), hollow = the fixed previous */
.ees-marks circle, .ees-marks text, .ees-marks rect { pointer-events: none; }
.ees-mark { fill: var(--warm); stroke: #fff; stroke-width: 1.4; opacity: .92; }
.ees-mark.sev1, .ees-mark.sev2 { fill: color-mix(in srgb, var(--warm) 55%, var(--panel)); }
.ees-mark.sev4, .ees-mark.sev5 { fill: var(--spec-1); }
.ees-mark-n { fill: #fff; font-size: 8px; font-weight: 700; text-anchor: middle; }
.ees-mark-prev { fill: none; stroke: var(--ink-faint); stroke-width: 1.8; stroke-dasharray: 3 2; }
/* the four-layer rail */
.ees-rail { position: sticky; top: 76px; }
.ees-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
margin: 0 0 14px; }
.ees-tab { font: inherit; font-size: 13.5px; padding: 8px 12px; background: none; border: 0;
border-bottom: 2px solid transparent; color: var(--ink-soft); cursor: pointer; }
.ees-tab.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
.ees-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px;
background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 11.5px; text-align: center; }
.ees-placeholder { color: var(--ink-faint); font-size: 14px; }
.ees-source h3 { font-family: var(--serif); }
.ees-strategy-label { display: flex; flex-direction: column; gap: 6px; font-size: 14px;
color: var(--ink-soft); margin: 10px 0; }
.ees-strategy-block { border: 1px solid var(--line); border-left: 4px solid var(--lock);
border-radius: 8px; padding: 12px 14px; margin-top: 10px; }
@media (max-width: 880px) { .ees-rail { position: static; } }
/* ── feedback (Round 5) ─────────────────────────────────────────────────── */
/* the operator's flag — present on every page for the administrator, fixed so it never
collides with content, and printed out of existence with the rest of the chrome */
.fb-report { position: fixed; right: 16px; bottom: 16px; z-index: 40;
background: var(--panel); color: var(--accent-ink); border: 1px solid var(--line);
border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600;
text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.fb-report:hover { border-color: var(--accent); }
/* On phones the feedback control becomes ordinary flow content after the footer, so it cannot
cover the canvas mode switch, rail, warnings, or treatment sequence. */
@media (max-width: 560px) {
.fb-report { position: static; display: inline-block; margin: 0 16px 20px; box-shadow: none; }
}
.fb-context { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.fb-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.fb-row label { flex: 1 1 150px; }
.fb-row .grow { flex: 3 1 260px; }
.form select, .form textarea { font: inherit; padding: 11px 13px; border: 1px solid var(--line);
border-radius: 8px; background: var(--panel); color: var(--ink); width: 100%; }
.form select:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.fb-item h2 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fb-update { margin: 10px 0 0; gap: 8px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { .top, .foot, .preview-banner, .fb-report, .practitioner-case-shell { display: none; } }
/* ── R13: the EEA image surface + controlled sharing ── LC_MARK_R13_CSS ── */
.ees-mark-region { fill: none; stroke: var(--warm); stroke-width: 3; opacity: .9; }
.ees-mark-region.sev4, .ees-mark-region.sev5 { stroke: var(--spec-1); }
.eea-drag { fill: none; stroke: var(--warm); stroke-width: 2.5; stroke-dasharray: 8 5; }
.eea-hotspots [data-region]:hover { stroke: var(--ink-faint); stroke-width: 2; }
#ees-eea { background: #06060f; border-radius: 8px; touch-action: none; }
.eea-tools { display: inline-flex; gap: .35rem; }
.share-bundle { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.25rem; margin: 1rem 0; background: var(--panel); }
.share-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.share-figure img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.share-pick { display: flex; gap: .6rem; align-items: start; padding: .5rem 0; }
.share-pick input { margin-top: .3rem; }
@media (prefers-reduced-motion: reduce) { #ees-eea { transition: none; } }
/* ── R14: tour + control center ── LC_MARK_R14_CSS ── */
.tour-nav { justify-content: space-between; margin-top: 1.5rem; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
/* ── R15: visual evidence engine ── LC_MARK_R15_CSS ── */
/* CASE-02 follow-up (the practitioner: "why is this frame so compact, not like the EEA
workbench") — the annotation workspace gets the bench treatment: a wide page, the canvas
dominating with a fixed side rail, the plate as tall as the viewport allows, and a
full-page mode that hides the rail (Esc leaves). */
.vis-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .vis-wrap { grid-template-columns: 1fr; } }
.vis-canvas svg { background: #06060f; border-radius: 8px; touch-action: none; display: block;
width: auto; height: auto; max-width: 100%; max-height: 76vh; margin: 0 auto; }
.vis-wrap.vis-fullpage { grid-template-columns: 1fr; }
.vis-wrap.vis-fullpage .vis-side { display: none; }
.vis-wrap.vis-fullpage .vis-canvas svg { max-height: 88vh; }
/* LC_MARK_EEA_PHEN_DIM — the practitioner: "when you hover over a marking it needs to dim so
you can see the photo behind it, and we need a setting to dim all phenomena". Hovering any
one shape fades it to a whisper; the Dim toggle fades the whole layer (still interactive). */
#eea-phen-layer g.eea-phen-g { transition: opacity .12s ease; }
#eea-phen-layer g.eea-phen-g:hover { opacity: 0.15; }
#eea-phen-layer.eea-phen-dim g.eea-phen-g { opacity: 0.25; }
#eea-phen-layer.eea-phen-dim g.eea-phen-g:hover { opacity: 0.15; }
.vis-head-row { display: flex; justify-content: space-between; align-items: center; }
.vis-active { fill: none; stroke: var(--warm); stroke-width: 3; }
.vis-verified { fill: none; stroke: #7ee08a; stroke-width: 3.5; }
.vis-rejected { fill: none; stroke: var(--ink-faint); stroke-width: 2.5; stroke-dasharray: 4 4; }
.vis-uncertain { fill: none; stroke: #d9b84a; stroke-width: 3; stroke-dasharray: 8 4; }
.vis-key { stroke-dasharray: 10 6; opacity: .95; }
.vis-point { fill: none; }
.vis-draft-shape { fill: none; stroke: var(--warm); stroke-width: 2.5; stroke-dasharray: 8 5; }
.vis-label { fill: #fff; font-size: 26px; font-weight: 700; paint-order: stroke; stroke: #06060f; stroke-width: 5px; pointer-events: none; }
#vis-marks *, #cmp-marks-a *, #cmp-marks-b *, #ex-marks *, #ex-key * { pointer-events: none; }
.cmp-panes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cmp-panes.is-overlay { display: block; position: relative; }
.cmp-panes.is-overlay .cmp-pane { position: relative; }
.cmp-panes.is-overlay #cmp-pane-b { position: absolute; inset: 0; }
.cmp-panes.is-overlay #cmp-pane-b figcaption { display: none; }
@media (max-width: 700px) { .cmp-panes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vis-canvas svg, .cmp-pane { transition: none; } }
/* 🔴 the R7 [hidden] trap, ended globally: author display rules must never resurrect a
hidden element (the comparison flicker button was the third strike) */
[hidden] { display: none !important; }
/* ── R16: pilot + private rehearsal ── LC_MARK_R16_CSS ── */
.pr-root { min-height: 100vh; display: flex; flex-direction: column; background: var(--panel); }
.pr-banner { display: flex; gap: 1rem; align-items: center; justify-content: space-between;
padding: .6rem 1.2rem; background: #3a2b12; color: #ffd691; font-weight: 700; font-size: .95rem; }
.pr-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.pr-step { max-width: 60rem; width: 100%; }
.pr-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--ink-faint); }
.pr-step h2 { font-size: 2.2rem; margin: .4rem 0 1rem; }
.pr-body { font-size: 1.35rem; line-height: 1.6; }
.pr-fields dt { font-weight: 700; margin-top: .5rem; }
.pr-fields dd { margin: 0; font-size: 1.15rem; }
.pr-figure img { max-width: 100%; max-height: 62vh; border-radius: 10px; display: block; margin: 0 auto; cursor: zoom-in; }
.pr-fine { color: var(--ink-faint); font-size: .95rem; }
.pr-nav { display: flex; gap: 1rem; align-items: center; justify-content: center; padding: .8rem; border-top: 1px solid var(--line); }
.pr-progress { min-width: 5rem; text-align: center; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .pr-step { transition: none; } }
/* ── R17: presentation player additions ─────────────── LC_MARK_R17_PLAYER_CSS */
.pr-pair { display: flex; gap: 1rem; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.pr-pair .pr-figure { flex: 1 1 18rem; min-width: 0; margin: 0; }
.pr-pair .pr-figure img { max-height: 56vh; }
.pr-break { text-align: center; padding: 3rem 0; }
.pr-break h2 { font-size: 2.8rem; }
.pr-timeline { list-style: none; padding: 0; margin: 1rem 0; }
.pr-timeline li { padding: .55rem .2rem; border-bottom: 1px solid var(--line); font-size: 1.25rem; }
.pr-timeline li:last-child { border-bottom: 0; }
.pr-banner a { margin-left: auto; }
.pr-nav button:focus-visible { outline: 3px solid var(--accent, #7c5cff); outline-offset: 2px; }
.pr-banner { flex-wrap: wrap; }
.pr-nav { flex-wrap: wrap; }
.pr-step { min-width: 0; }
.pr-fields dd, .pr-body, .pr-fine { overflow-wrap: anywhere; }
/* ── R18: the grouped member shell ─────────────────────── LC_MARK_R18_SHELL_CSS */
.navgroup.here > summary { color: var(--accent-ink); font-weight: 600;
box-shadow: inset 0 -2px 0 var(--accent); }
.navsec-group > summary { color: var(--ink-faint); text-transform: uppercase;
font-size: 12.5px; letter-spacing: .04em; }
.nav a, .navgroup > summary { min-height: 44px; display: inline-flex; align-items: center; }
.navmenu a { min-height: 44px; display: flex; align-items: center; }
.nav a:focus-visible, .navgroup > summary:focus-visible {
outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
.navgroup { width: 100%; }
.navgroup .navmenu { position: static; box-shadow: none; border: 0; padding-left: 14px; }
}
/* ── R19: treatment canvas ────────────────────────────── LC_MARK_R19_CSS ── */
.tr-work { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 1.2rem; align-items: start; }
@media (max-width: 880px) { .tr-work { grid-template-columns: 1fr; } }
.tr-canvas { border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
overflow: hidden; touch-action: none; }
.tr-canvas svg { width: 100%; height: auto; display: block; max-height: 70vh; }
.tr-mark { cursor: pointer; }
.tr-mark:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tr-mark.is-selected { filter: drop-shadow(0 0 4px var(--accent)); }
.tr-adjusted { stroke-dasharray: 4 3; }
circle.tr-point.tr-adjusted { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 2; }
/* LC_MARK_F26_DOT_NUMBER — the step number lives on the dot itself, always on; readable on any
fill color via a dark halo behind white ink (paint-order flips the usual stroke-under-fill). */
.tr-dotno { font-size: 9px; font-weight: 700; fill: #fff; paint-order: stroke fill;
stroke: rgba(0,0,0,.55); stroke-width: 2.2px; stroke-linejoin: round; font-family: inherit; }
/* LC_MARK_F26_LABEL_DECLUTTER — always-on labels turned into an unreadable pile the moment
several marks sat close together (a real cluster, not a bug in the placement); show the
label only for the mark you're actually looking at — hover, keyboard focus, or selected. */
.tr-stepno { font-size: 11px; font-weight: 700; fill: var(--ink); pointer-events: none;
opacity: 0; transition: opacity .1s; }
.tr-mark:hover + .tr-stepno, .tr-mark:focus + .tr-stepno, .tr-mark.is-selected + .tr-stepno { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tr-stepno { transition: none; } }
.tr-code-input { text-transform: uppercase; } /* LC_MARK_084_REGISTRY_MARKS */
.tr-attach { margin-top: .5rem; }
.tr-facsimile { margin-top: .5rem; } /* LC_MARK_089B_TREATMENT_FACSIMILE */
.tr-facsimile-img { display: block; max-width: 100%; margin-top: .4rem; border: 1px solid var(--border, #ccc); border-radius: 4px; }
/* LC_MARK_RELAY_MAP — the manual's own plate beside a treatment tree's steps. The plates are
large scans, so the img is sized by the stylesheet (never a style="" attribute: this CSP is
style-src 'self', and the attribute is refused as style-src-attr) and the intrinsic
width/height attributes on the tag keep the page from jumping while it loads. */
.tr-map-fig { margin: 0 0 1.1rem; }
.tr-map-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line);
border-radius: 4px; background: #fff; }
.tr-map-open { display: block; }
.tr-map-cap { margin-top: .4rem; }
.tr-map-cap p { margin: .2rem 0; }
.tr-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px;
border: 1px solid var(--line); vertical-align: -2px; margin-right: 4px; }
.tr-steppick { background: none; border: 0; cursor: pointer; color: var(--ink);
padding: 6px 4px; text-align: left; min-height: 44px; }
.tr-steppick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tr-panel { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel); }
/* LC_MARK_F26_MARK_POPOVER — the detail for whichever mark you just tapped, right beside it */
.tr-popover { position: fixed; z-index: 60; max-width: 280px; background: var(--panel);
border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 14px 16px; }
.tr-popover[hidden] { display: none; }
.tr-popover-close { position: absolute; top: 6px; right: 8px; background: none; border: 0;
font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-soft, inherit); padding: 4px; }
.tr-popover-body h3 { margin: 0 .4rem .5rem 0; font-size: .95rem; padding-right: 1.2rem; }
.tr-popover-body dl { margin: 0; font-size: .88rem; }
.tr-detail dl { margin: .6rem 0; }
.is-editing .tr-canvas { outline: 2px dashed var(--accent); outline-offset: -2px; }
#tr-edit-toggle.is-active, #tr-add-point.is-active { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) { .tr-mark.is-selected { filter: none; } }
/* ── R20: Finger Testing instrument ──────────────────────── LC_MARK_R20_FINGER_CSS ── */
/* found live (Chris, 09-16): "not a wider card when it opens... when its open with both hands
I think it fits most the screen" — the hands use the FULL card width by default; the
recording drawer (the "Record a finding" column) only exists while a zone is actually
selected, via .panel-open below, added/removed by openPanelFor/closePanel — never a
permanent second column that just narrows. Same "flip one class, CSS adds/removes a grid
column" mechanic already proven on the anatomy Studio's rail-minimize, inverted (default:
no column). */
.ft-wrap { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
.ft-wrap.panel-open { grid-template-columns: minmax(0, 1.7fr) minmax(230px, .9fr); }
@media (max-width: 880px) { .ft-wrap.panel-open { grid-template-columns: 1fr; } }
.ft-canvas svg { width: 100%; height: auto; display: block; max-height: 62vh; }
.ft-hand-toggle { margin-bottom: .6rem; }
/* every state gets its OWN shape/pattern, never color alone */
.ft-zone { cursor: pointer; fill: color-mix(in srgb, var(--ink-faint) 14%, transparent);
stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 2; transition: fill .12s ease, stroke .12s ease; }
.ft-zone.ft-tested-normal { fill: color-mix(in srgb, var(--ok, #2f9e5b) 20%, transparent);
stroke: var(--ok, #2f9e5b); stroke-dasharray: none; }
.ft-zone.ft-uncertain { fill: color-mix(in srgb, var(--warm) 22%, transparent);
stroke: var(--warm); stroke-dasharray: 2 2; }
.ft-zone.ft-sensitive { fill: color-mix(in srgb, var(--spec-1, #c0392b) 30%, transparent);
stroke: var(--spec-1, #c0392b); stroke-width: 2; stroke-dasharray: none; }
.ft-zone:hover { filter: brightness(1.08); }
.ft-zone:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ft-zone.ft-selected { stroke-width: 3; outline: 2px dashed var(--accent); outline-offset: 2px; }
.ft-badge { pointer-events: none; font-size: 9px; font-weight: 700; fill: var(--ink); }
/* found live (Chris, 09-16): the numbers read backwards on whichever hand handSvg(side)
mirrors with an SVG scale(-1,1) (views-lab.js) — that transform flips every glyph inside it
too, not just the geometry. CSS transform-box:fill-box on SVG turned out unreliable
here (Chromium computed its transform-origin relative to (0,0) instead of the glyph's own
x/y, so the counter-flip un-mirrored around the wrong point) — the counter-flip is applied
as a real SVG transform attribute instead, computed server-side (interactiveHand) and
client-side (lc-fingertest.js's updateZoneVisual), both using the same
translate(2×x,0) scale(-1,1) identity, which is exact regardless of browser bbox quirks. */
/* LC_MARK_FT_ATLAS (2026-09-16) — the planet-symbol overlay: its own corner, hidden until the
toggle is on, so it never fights the sensitivity badge for space or attention. */
.ft-symbol { pointer-events: none; font-size: 6.5px; font-weight: 600; fill: var(--ink-soft); display: none; }
#ft-wrap.ft-symbols-on .ft-symbol { display: block; }
.ft-progress .tag { margin-right: 4px; }
.ft-panel { position: sticky; top: 76px; }
.ft-panel[hidden] { display: none; }
.ft-hands { min-width: 0; }
/* Left / Right / Both is one explicit control at every width now (found live, 09-16: "still no
left hand right hand — show both hands buttons and not a wider card") — no breakpoint here
any more; lc-fingertest.js sets [hidden] on whichever canvas the control says to hide, at
any screen size, and Both (the default) leaves neither hidden. */
/* found live (Chris, 09-16): "they should be side by side" — 260px each plus the gap didn't
reliably fit the actual (narrower) column this sits in, so they wrapped to a stacked column
instead. Never wrap: shrink each hand's own width before giving up the row — the SVG itself
is width:100% of its box, so a narrower box just draws it smaller, never crops it. */
.ft-canvases { display: flex; gap: .6rem; flex-wrap: nowrap; }
.ft-canvases .ft-canvas { flex: 1 1 0; min-width: 0; }
.ft-hands-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
/* LC_MARK_FT_ATLAS — click a finger, see what it means (config/finger-protocol-rules.v1.json's
own data, cited). Without JS every card just reads in place, plainly; ft-js (added on
mount, mirrors the fingertip explorer's fx-js) narrows to the one selected. */
/* found live (Chris, 09-16): "the finger info opening below the hand(s) card" — this now
lives INSIDE .ft-hands (was a stray sibling of it inside .ft-wrap's own 2-column grid,
which is what pushed Record a finding onto a second row and put the info card beside the
hands instead of below them). */
.ft-legend { margin-top: .5rem; }
.ft-legend summary { display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
color: var(--ink-soft); font-size: .8rem; list-style: none; }
.ft-legend summary::-webkit-details-marker { display: none; }
.ft-legend[open] summary { color: var(--ink); border-color: var(--accent); }
.ft-legend p { margin: .5rem 0 0; }
.ft-info { margin-top: .9rem; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ft-info-card { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ft-info-card h3 { margin: 0 0 .35rem; font-size: .95rem; }
.ft-info-levels { margin: 0; }
.ft-info-levels dt { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: .4rem; }
.ft-info-levels dd { margin: 0 0 .1rem; font-size: .82rem; }
#ft-wrap.ft-js .ft-info-card { display: none; }
#ft-wrap.ft-js .ft-info-card.is-sel { display: block; grid-column: 1 / -1; }
/* tablet-landscape: keep the hand + panel side by side down to a real device width,
never letting the panel's controls overlap the canvas — only while the drawer is open */
@media (max-width: 1024px) and (orientation: landscape) {
.ft-wrap.panel-open { grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr); gap: .8rem; }
.ft-canvas svg { max-height: 46vh; }
}
@media (max-width: 700px) {
.ft-hand-toggle { flex-wrap: wrap; }
}
/* P0-B — EEA Image-Analysis Workbench. LC_MARK_EEA_WORKBENCH_CSS
Canvas zoom is RESIZE-THE-STAGE (the image's own width%), never transform:scale — the
real Snap2Quote V2 workspace measured that transform breaks scrollable overflow. */
.eea-topbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.eea-savestate { color: var(--ink-faint); }
.eea-nav-group h3 { font-size: .85rem; margin: .3rem 0 .2rem; color: var(--ink-faint); }
.eea-nav-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.eea-site-btn { border: 1px solid var(--border, #ccc); border-radius: 6px; padding: .25rem .5rem;
font-size: .78rem; background: var(--bg-2, #fff); cursor: pointer; display: flex; align-items: center; gap: .25rem; }
.eea-site-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.eea-glyph { font-weight: 700; }
.eea-not-registered { opacity: .5; }
.eea-registered, .eea-proposed { border-color: var(--ink-faint); }
.eea-confirmed { background: color-mix(in srgb, var(--ok, #2f9e5b) 18%, transparent); border-color: var(--ok, #2f9e5b); }
.eea-uncertain { background: color-mix(in srgb, var(--warm) 20%, transparent); }
.eea-excluded-quality { opacity: .55; text-decoration: line-through; }
.eea-rejected { opacity: .4; }
.eea-site-btn.eea-selected { outline: 2px dashed var(--accent); outline-offset: 2px; }
/* ══ THE WORKSPACE (EEA-WORKBENCH-R2.1) — canvas dominant, right rail; the Takeoff shape ══ */
.eea-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: .8rem;
align-items: start; }
/* ⚠️ overflow VISIBLE — the toolbar's add-photograph popup hangs below the toolbar, and
overflow:hidden clipped half of it (including its own submit button) when the toolbar
wrapped to a second row; found by SCREENSHOT after a body-intercepts click timeout. The
canvas clips itself (.eea-canvas-scroll), so nothing else needs the card to clip. */
.eea-main { padding: 0; overflow: visible; }
.eea-rail { display: flex; flex-direction: column; gap: .8rem;
position: sticky; top: 66px; max-height: calc(100vh - 80px); overflow-y: auto; }
.eea-rail-card { margin: 0; }
.eea-rail-h { margin: 0 0 .5rem; font-size: 1rem; }
.eea-notice { margin-bottom: .6rem; }
/* THE MIRROR (LC_MARK_EEA_MIRROR) */
.eea-mirror-blocked { color: var(--lock); }
/* THE KEY (LC_MARK_EEA_MIRROR_KEY) — the check of a mirror record against what was drawn */
.eea-key { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; margin: .5rem 0 .75rem; background: var(--panel); }
.eea-key .eea-rail-h { margin-top: 0; }
.eea-key-summary { margin: .35rem 0; }
.eea-key-sites { list-style: none; padding: 0; margin: .4rem 0; font-size: .85rem; }
.eea-key-site { padding: .2rem 0; border-top: 1px solid var(--line); }
.eea-key-findings { list-style: none; padding-left: 1.1rem; margin: .1rem 0 .2rem; color: var(--ink-soft); }
.eea-key-mark { display: inline-block; min-width: 1.1em; text-align: center; font-weight: 700; }
.eea-key-hit .eea-key-mark, .eea-key-t-hit > .eea-key-mark { color: var(--ok); }
.eea-key-near .eea-key-mark { color: var(--warm); }
.eea-key-missed .eea-key-mark, .eea-key-extra .eea-key-mark, .eea-key-off .eea-key-mark, .eea-key-t-off > .eea-key-mark, .eea-key-t-unplaced > .eea-key-mark, .eea-key-undesignated .eea-key-mark { color: var(--lock); }
.eea-key-note { font-style: italic; }
.eea-key-quiet .eea-key-mark { color: var(--ok); margin-right: .2em; }
.eea-key-form { margin-top: .4rem; }
.eea-mirror-form select { max-width: 100%; }
/* MIRROR EXERCISES (LC_MARK_EEA_MIRROR_EXERCISE): the publish form folds under the mirror form; an exercise row lists the learner's attempts */
.eea-exercise { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.eea-exercise summary { cursor: pointer; }
.eea-exercise-form { margin: .6rem 0 0; gap: 8px; }
.eea-exercise-form input, .eea-exercise-form select, .eea-exercise-form textarea { max-width: 100%; }
.eea-exercise-row .btnrow { margin: 0; align-self: center; }
.eea-attempts { margin: .3rem 0 0; padding-left: 1.2em; }
.eea-tool-sep { flex: 0 0 1px; align-self: stretch; background: var(--border, #ccc);
margin: 0 .35rem; }
/* ⚠️ minmax(0, 1fr) in BOTH layouts — a bare 1fr track's minimum is the item's min-content,
and the plate's intrinsic width (1200px) blew the single column past a 1024px viewport
(wrap measured 1534px at fit; the zoom buttons landed off-screen). Found by the 1024 QA pass. */
@media (max-width: 1100px) {
.eea-workspace { grid-template-columns: minmax(0, 1fr); }
.eea-rail { position: static; max-height: none; }
}
.eea-main, .eea-canvas-scroll { min-width: 0; max-width: 100%; }
.eea-canvas-toolbar { padding: .4rem .6rem; border-bottom: 1px solid var(--border, #ccc);
flex-wrap: wrap; align-items: center; position: relative; z-index: 5; }
.eea-canvas-toolbar .btn[disabled] { opacity: .4; cursor: default; }
.eea-canvas-toolbar .eea-savestate { margin-left: auto; }
.eea-canvas-scroll { overflow: auto; height: calc(100vh - 230px); min-height: 480px;
position: relative; }
/* ══ FULL PAGE (LC_MARK_EEA_FULL_PAGE) — the practitioner: "this needs to be a full page render,
not just a little window … I can't extend it or move the page around". The workspace pins to
the viewport, the canvas takes every pixel the toolbar leaves, the rail becomes a collapsible
side panel; Esc leaves. The canvas is RESIZED (fit / setZoom), never redrawn — Takeoff's rule. */
body.eea-full { overflow: hidden; }
body.eea-full .eea-workspace { position: fixed; inset: 0; z-index: 60; gap: 0;
grid-template-columns: minmax(0, 1fr) 340px; background: var(--bg-2, #fff); }
body.eea-full.eea-rail-hidden .eea-workspace { grid-template-columns: minmax(0, 1fr); }
body.eea-full.eea-rail-hidden .eea-rail { display: none; }
body.eea-full .eea-main { border-radius: 0; border: 0; height: 100vh; display: flex; flex-direction: column; min-height: 0; }
body.eea-full .eea-canvas-scroll { flex: 1 1 auto; height: auto; min-height: 0; }
body.eea-full .eea-canvas-hint { margin: 0; padding: .2rem .6rem; font-size: .72rem; }
body.eea-full .eea-rail { position: static; height: 100vh; max-height: 100vh; overflow-y: auto;
padding: .6rem; border-left: 1px solid var(--border, #ccc); background: var(--bg-2, #fff); }
#eea-full-toggle.is-active, #eea-rail-toggle.is-active { outline: 2px solid var(--accent); }
@media (max-width: 1100px) { body.eea-full .eea-workspace { grid-template-columns: minmax(0, 1fr); }
body.eea-full .eea-rail { display: none; } }
/* the in-toolbar photograph input (pilot door) */
.eea-upload { position: relative; }
.eea-upload > summary { list-style: none; cursor: pointer; }
.eea-upload > summary::-webkit-details-marker { display: none; }
.eea-upload-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
width: 330px; padding: .8rem; box-shadow: 0 8px 26px -8px rgba(0,0,0,.35); }
.eea-canvas-stage { position: relative; display: inline-block; min-width: 100%; }
.eea-canvas-stage img { display: block; width: 100%; height: auto; max-width: none; }
.eea-marker { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px;
border-radius: 50%; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent);
font-size: 0; cursor: pointer; padding: 0; }
.eea-marker:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.eea-marker::after { content: attr(data-site); position: absolute; left: 26px; top: -4px;
font-size: 9px; background: var(--bg-2, #fff); padding: 0 3px; border-radius: 3px; white-space: nowrap; }
.eea-panel { position: sticky; top: 76px; }
.eea-panel[hidden] { display: none; }
/* ── the interactive canvas (LC_MARK_EEA_CANVAS, lc-eea-canvas.js) ─────────────────────────
Markers scale with --eea-pcz (clamped sqrt of zoom, set by the canvas) so a pin neither
swamps a digit at 40% nor vanishes to a speck at 300% — the stage is RESIZED, not
transform-scaled, so without this a fixed-px pin keeps its screen size while the photo
under it grows. */
.eea-canvas-scroll.panning { cursor: grabbing; }
.eea-canvas-scroll.panning * { cursor: grabbing; }
.eea-pc-marker { position: absolute; transform: translate(-50%, -50%) scale(var(--eea-pcz, 1));
width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent);
background: color-mix(in srgb, var(--accent) 18%, transparent); cursor: pointer;
touch-action: none; }
.eea-pc-marker.selected { outline: 2px dashed var(--accent); outline-offset: 2px; }
.eea-pc-marker.eea-marker-template { border-style: dashed; opacity: .75;
background: color-mix(in srgb, var(--warm, #b98a2f) 14%, transparent);
border-color: var(--warm, #b98a2f); }
.eea-pc-label { position: absolute; left: 26px; top: -4px; font-size: 9px;
background: var(--bg-2, #fff); padding: 0 3px; border-radius: 3px; white-space: nowrap;
pointer-events: none; }
.eea-canvas-hint { margin: .35rem .6rem .5rem; }
.eea-rail .eea-nav-row { gap: .25rem; }
.eea-rail .eea-site-btn { padding: .15rem .4rem; font-size: .78rem; }
.eea-rail .eea-nav-group h3 { margin: .35rem 0 .2rem; font-size: .8rem; }
/* phase 5: the sector orientation guide — presentation-only, pointer-inert */
.eea-zone-guide { position: absolute; width: 18%; aspect-ratio: 1;
transform: translate(-50%, -50%); pointer-events: none;
color: color-mix(in srgb, var(--accent) 75%, transparent); }
#eea-zone-guide-toggle.is-active { outline: 2px solid var(--accent); }
/* the terminal's AXIS (LC_MARK_EEA_AXIS): the guide turns with the finger; the handle at its
12 o'clock is the one thing on the guide that takes the pointer */
.eea-zone-guide .eea-guide-handle { pointer-events: all; cursor: grab; fill: var(--bg-2, #fff); stroke: currentColor; stroke-width: 2; }
.eea-zone-guide.rotating .eea-guide-handle { cursor: grabbing; }
.eea-axis { align-items: center; gap: .3rem; margin: .3rem 0 .5rem; }
.eea-axis .btn { padding: .1rem .45rem; font-size: .78rem; }
/* ── PRE/POST comparison (phase 3): two view-only canvases, stacking under 1024px ── */
.eea-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: .8rem; }
.eea-cmp-col h3 { margin: 0 0 .4rem; }
.eea-cmp-scroll { max-height: 48vh; border: 1px solid var(--border, #ccc); }
@media (max-width: 1024px) { .eea-cmp-grid { grid-template-columns: 1fr; } }
@media (max-width: 1024px) and (orientation: landscape) {
.eea-canvas-scroll { max-height: 46vh; }
}
@media (max-width: 600px) {
.eea-nav-row { gap: .2rem; }
}
.eea-x-0{left:0%}
.eea-x-1{left:1%}
.eea-x-2{left:2%}
.eea-x-3{left:3%}
.eea-x-4{left:4%}
.eea-x-5{left:5%}
.eea-x-6{left:6%}
.eea-x-7{left:7%}
.eea-x-8{left:8%}
.eea-x-9{left:9%}
.eea-x-10{left:10%}
.eea-x-11{left:11%}
.eea-x-12{left:12%}
.eea-x-13{left:13%}
.eea-x-14{left:14%}
.eea-x-15{left:15%}
.eea-x-16{left:16%}
.eea-x-17{left:17%}
.eea-x-18{left:18%}
.eea-x-19{left:19%}
.eea-x-20{left:20%}
.eea-x-21{left:21%}
.eea-x-22{left:22%}
.eea-x-23{left:23%}
.eea-x-24{left:24%}
.eea-x-25{left:25%}
.eea-x-26{left:26%}
.eea-x-27{left:27%}
.eea-x-28{left:28%}
.eea-x-29{left:29%}
.eea-x-30{left:30%}
.eea-x-31{left:31%}
.eea-x-32{left:32%}
.eea-x-33{left:33%}
.eea-x-34{left:34%}
.eea-x-35{left:35%}
.eea-x-36{left:36%}
.eea-x-37{left:37%}
.eea-x-38{left:38%}
.eea-x-39{left:39%}
.eea-x-40{left:40%}
.eea-x-41{left:41%}
.eea-x-42{left:42%}
.eea-x-43{left:43%}
.eea-x-44{left:44%}
.eea-x-45{left:45%}
.eea-x-46{left:46%}
.eea-x-47{left:47%}
.eea-x-48{left:48%}
.eea-x-49{left:49%}
.eea-x-50{left:50%}
.eea-x-51{left:51%}
.eea-x-52{left:52%}
.eea-x-53{left:53%}
.eea-x-54{left:54%}
.eea-x-55{left:55%}
.eea-x-56{left:56%}
.eea-x-57{left:57%}
.eea-x-58{left:58%}
.eea-x-59{left:59%}
.eea-x-60{left:60%}
.eea-x-61{left:61%}
.eea-x-62{left:62%}
.eea-x-63{left:63%}
.eea-x-64{left:64%}
.eea-x-65{left:65%}
.eea-x-66{left:66%}
.eea-x-67{left:67%}
.eea-x-68{left:68%}
.eea-x-69{left:69%}
.eea-x-70{left:70%}
.eea-x-71{left:71%}
.eea-x-72{left:72%}
.eea-x-73{left:73%}
.eea-x-74{left:74%}
.eea-x-75{left:75%}
.eea-x-76{left:76%}
.eea-x-77{left:77%}
.eea-x-78{left:78%}
.eea-x-79{left:79%}
.eea-x-80{left:80%}
.eea-x-81{left:81%}
.eea-x-82{left:82%}
.eea-x-83{left:83%}
.eea-x-84{left:84%}
.eea-x-85{left:85%}
.eea-x-86{left:86%}
.eea-x-87{left:87%}
.eea-x-88{left:88%}
.eea-x-89{left:89%}
.eea-x-90{left:90%}
.eea-x-91{left:91%}
.eea-x-92{left:92%}
.eea-x-93{left:93%}
.eea-x-94{left:94%}
.eea-x-95{left:95%}
.eea-x-96{left:96%}
.eea-x-97{left:97%}
.eea-x-98{left:98%}
.eea-x-99{left:99%}
.eea-x-100{left:100%}
.eea-y-0{top:0%}
.eea-y-1{top:1%}
.eea-y-2{top:2%}
.eea-y-3{top:3%}
.eea-y-4{top:4%}
.eea-y-5{top:5%}
.eea-y-6{top:6%}
.eea-y-7{top:7%}
.eea-y-8{top:8%}
.eea-y-9{top:9%}
.eea-y-10{top:10%}
.eea-y-11{top:11%}
.eea-y-12{top:12%}
.eea-y-13{top:13%}
.eea-y-14{top:14%}
.eea-y-15{top:15%}
.eea-y-16{top:16%}
.eea-y-17{top:17%}
.eea-y-18{top:18%}
.eea-y-19{top:19%}
.eea-y-20{top:20%}
.eea-y-21{top:21%}
.eea-y-22{top:22%}
.eea-y-23{top:23%}
.eea-y-24{top:24%}
.eea-y-25{top:25%}
.eea-y-26{top:26%}
.eea-y-27{top:27%}
.eea-y-28{top:28%}
.eea-y-29{top:29%}
.eea-y-30{top:30%}
.eea-y-31{top:31%}
.eea-y-32{top:32%}
.eea-y-33{top:33%}
.eea-y-34{top:34%}
.eea-y-35{top:35%}
.eea-y-36{top:36%}
.eea-y-37{top:37%}
.eea-y-38{top:38%}
.eea-y-39{top:39%}
.eea-y-40{top:40%}
.eea-y-41{top:41%}
.eea-y-42{top:42%}
.eea-y-43{top:43%}
.eea-y-44{top:44%}
.eea-y-45{top:45%}
.eea-y-46{top:46%}
.eea-y-47{top:47%}
.eea-y-48{top:48%}
.eea-y-49{top:49%}
.eea-y-50{top:50%}
.eea-y-51{top:51%}
.eea-y-52{top:52%}
.eea-y-53{top:53%}
.eea-y-54{top:54%}
.eea-y-55{top:55%}
.eea-y-56{top:56%}
.eea-y-57{top:57%}
.eea-y-58{top:58%}
.eea-y-59{top:59%}
.eea-y-60{top:60%}
.eea-y-61{top:61%}
.eea-y-62{top:62%}
.eea-y-63{top:63%}
.eea-y-64{top:64%}
.eea-y-65{top:65%}
.eea-y-66{top:66%}
.eea-y-67{top:67%}
.eea-y-68{top:68%}
.eea-y-69{top:69%}
.eea-y-70{top:70%}
.eea-y-71{top:71%}
.eea-y-72{top:72%}
.eea-y-73{top:73%}
.eea-y-74{top:74%}
.eea-y-75{top:75%}
.eea-y-76{top:76%}
.eea-y-77{top:77%}
.eea-y-78{top:78%}
.eea-y-79{top:79%}
.eea-y-80{top:80%}
.eea-y-81{top:81%}
.eea-y-82{top:82%}
.eea-y-83{top:83%}
.eea-y-84{top:84%}
.eea-y-85{top:85%}
.eea-y-86{top:86%}
.eea-y-87{top:87%}
.eea-y-88{top:88%}
.eea-y-89{top:89%}
.eea-y-90{top:90%}
.eea-y-91{top:91%}
.eea-y-92{top:92%}
.eea-y-93{top:93%}
.eea-y-94{top:94%}
.eea-y-95{top:95%}
.eea-y-96{top:96%}
.eea-y-97{top:97%}
.eea-y-98{top:98%}
.eea-y-99{top:99%}
.eea-y-100{top:100%}
/* ── EEA Studio (layer 1) — LC_MARK_EEA_STUDIO_CSS ─────────────────────── */
.eea-studio-actions { flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.eea-studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: .8rem; align-items: start; }
@media (max-width: 1100px) { .eea-studio-grid { grid-template-columns: minmax(0, 1fr); } }
.eea-plate-strip { display: flex; flex-wrap: wrap; gap: .8rem; }
.eea-plate-card { margin: 0; width: 220px; }
.eea-plate-card img { width: 220px; height: 160px; object-fit: contain; background: #fff; border: 1px solid var(--line, #ddd); border-radius: 6px; display: block; }
.eea-plate-card figcaption { font-size: .8rem; opacity: .8; margin-top: .25rem; }
.eea-plate-withheld { width: 220px; height: 160px; display: grid; place-items: center; font-size: .8rem; opacity: .7; border: 1px dashed var(--line, #ccc); border-radius: 6px; padding: .5rem; text-align: center; }
.eea-timeline { list-style: none; margin: 0; padding: 0 0 0 .2rem; border-left: 2px solid var(--line, #ddd); }
.eea-timeline li { position: relative; padding: .35rem 0 .35rem 1rem; }
.eea-timeline li::before { content: ''; position: absolute; left: -7px; top: .75rem; width: 10px; height: 10px; border-radius: 50%; background: var(--line, #bbb); }
.eea-timeline li.eea-tl-capture::before { background: #2f6f9f; }
.eea-timeline li.eea-tl-round::before { background: #8a5a1f; }
.eea-timeline li.eea-tl-treatment::before { background: #3c7a3c; }
.eea-timeline li.eea-tl-visit::before { background: #555; }
.eea-timeline li.eea-tl-gap { padding: .1rem 0 .1rem 1rem; font-size: .78rem; opacity: .65; }
.eea-timeline li.eea-tl-gap::before { display: none; }
.eea-timeline time { display: block; font-size: .75rem; opacity: .7; }
.eea-home-cases { margin-top: .4rem; }
/* ── the session flow rail — LC_MARK_SESSION_FLOW ─────────────────────────── */
.eea-flow { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr)); gap: .35rem; counter-reset: flow; }
.eea-flow-stage a { display: block; min-height: 44px; height: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px;
background: var(--panel); text-decoration: none; color: inherit; counter-increment: flow; }
.eea-flow-stage a:hover, .eea-flow-stage a:focus-visible { border-color: var(--accent); }
.eea-flow-stage.have a { border-left: 4px solid var(--accent); }
.eea-flow-stage .eea-flow-label { display: block; font-weight: 600; font-size: .85rem; }
.eea-flow-stage .eea-flow-label::before { content: counter(flow) ' · '; opacity: .55; font-weight: 400; }
.eea-flow-stage .fine { display: block; font-size: .74rem; line-height: 1.25; }
.eea-flow-stage .eea-flow-act { margin-top: .25rem; opacity: .7; }
.eea-note-more { margin: .3rem 0 .5rem; } /* the note form's provenance controls, folded (journey trace F4) */
.eea-note-more > summary { cursor: pointer; }
.eea-note-more > .fb-row { margin-top: .4rem; }
.eea-home-fold { display: block; } /* LC_MARK_DESK_FOLD: day-old QA fixtures under one line */
.eea-home-fold > details > summary { cursor: pointer; }
.eea-home-fold > details > .list { margin-top: .6rem; }
.eea-intake-row select { max-width: 14rem; }
.case-nav { flex-wrap: wrap; gap: .3rem; margin: .35rem 0 0; }
/* ── Practitioner Studio shell — five workspaces over the existing case journey ──
LC_MARK_PRACTITIONER_WORKSPACES. This is navigation only; record completeness remains
derived by the existing case/session views. */
.practitioner-case-shell { max-width: 100%; margin: 0 0 1rem;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); }
.practitioner-case-context { display: flex; align-items: stretch; justify-content: space-between;
gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.practitioner-case-identity { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.practitioner-case-identity .kicker { margin: 0 0 .1rem; }
.practitioner-case-identity > strong { font-family: var(--serif); font-size: 1.08rem; line-height: 1.25; }
.practitioner-case-identity .fine { overflow-wrap: anywhere; }
.practitioner-case-links { flex: 0 1 27rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.practitioner-case-links a { min-height: 44px; padding: .35rem .65rem; border-left: 1px solid var(--line);
color: var(--ink-soft); text-decoration: none; display: flex; flex-direction: column; justify-content: center; }
.practitioner-case-links a:hover, .practitioner-case-links a:focus-visible {
background: color-mix(in srgb, var(--accent) 7%, transparent); }
.practitioner-case-links span { color: var(--ink-faint); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.practitioner-case-links strong { color: var(--ink); font-size: .78rem; }
.practitioner-workspaces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
background: color-mix(in srgb, var(--accent) 4%, var(--panel)); border-bottom: 1px solid var(--line); }
.practitioner-workspace { min-width: 0; min-height: 58px; padding: .55rem .75rem; border-right: 1px solid var(--line);
color: var(--ink-soft); text-decoration: none; display: flex; flex-direction: column; justify-content: center; }
.practitioner-workspace:last-child { border-right: 0; }
.practitioner-workspace strong { color: inherit; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; }
.practitioner-workspace span { overflow: hidden; color: var(--ink-faint); font-size: .7rem; line-height: 1.25;
text-overflow: ellipsis; white-space: nowrap; }
.practitioner-workspace:hover, .practitioner-workspace:focus-visible {
background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.practitioner-workspace.is-current { background: var(--panel); color: var(--accent-ink);
box-shadow: inset 0 -3px 0 var(--accent); }
.practitioner-stages { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); padding: .45rem .55rem;
background: var(--panel); border-bottom: 1px solid var(--line); }
.practitioner-stage { min-width: 0; min-height: 44px; padding: .3rem .45rem; border-right: 1px solid var(--line);
color: var(--ink-faint); text-decoration: none; display: flex; flex-direction: column; justify-content: center; }
.practitioner-stage:last-child { border-right: 0; }
.practitioner-stage:hover, .practitioner-stage:focus-visible {
color: var(--ink); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.practitioner-stage-number { font-size: .62rem; letter-spacing: .08em; line-height: 1.1; }
.practitioner-stage > span:last-child { overflow: hidden; font-size: .72rem; line-height: 1.2; text-overflow: ellipsis; }
.practitioner-stage.is-current { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 9%, transparent);
font-weight: 650; }
/* Instruments remain instruments, and the record remains the record: neither competes with the
five primary workspaces. */
.case-nav-more { position: relative; padding: 0 1rem; }
.case-nav-more > summary { min-height: 44px; padding: .55rem 0; color: var(--accent-ink); cursor: pointer;
font-size: .78rem; font-weight: 650; letter-spacing: .04em; list-style-position: inside; }
.practitioner-case-shell .btn.small { min-height: 44px; display: inline-flex; align-items: center; }
.case-nav-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
padding: 0 0 1rem; background: var(--panel); }
.case-nav-panel > div { min-width: 0; }
.case-nav-panel > div > strong { color: var(--ink-faint); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) {
.practitioner-case-context { align-items: stretch; flex-direction: column; gap: .55rem; padding: .75rem; }
.practitioner-case-links { flex: none; width: 100%; }
.practitioner-case-links a:first-child { border-left: 0; }
.practitioner-workspaces { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 100%; }
.practitioner-workspace { min-height: 48px; padding: .4rem .3rem; text-align: center; }
.practitioner-workspace span { display: none; }
.practitioner-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; padding: .4rem; }
.practitioner-stage { padding: .3rem .4rem; }
.practitioner-stage:nth-child(3n) { border-right: 0; }
.case-nav-more { padding: 0 .75rem; }
.case-nav-panel { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
}
@media (max-width: 520px) {
.practitioner-case-links a { padding: .3rem; }
.practitioner-workspace { min-height: 44px; padding-inline: .15rem; }
.practitioner-workspace strong { font-size: .65rem; letter-spacing: .04em; }
.practitioner-stage { min-height: 44px; }
}
/* ── Shared Anatomy & Lightbody Canvas ─────────────────────────────────────
A case-bound instrument inside Practitioner Studio — never a second "studio". The warm
stage lets colour remain meaningful while the controls and provenance rails stay quiet.
LC_MARK_ANATOMY_CANVAS */
.anatomy-canvas-page { --anatomy-gold: #bd8c2f; --anatomy-coral: #a9584c; --anatomy-control: #153d44;
margin: 1rem 0 1.5rem; overflow: clip; background: var(--panel); border: 1px solid var(--line);
border-radius: 14px; box-shadow: var(--shadow); }
.anatomy-canvas-head { display: grid; grid-template-columns: minmax(16rem, 1fr) auto auto;
align-items: center; gap: 1rem; min-height: 84px; padding: .9rem 1.1rem;
border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, var(--accent)); }
.anatomy-canvas-head h2, .anatomy-timeline h2 { margin: .12rem 0; font-family: var(--serif);
font-weight: 400; line-height: 1.15; letter-spacing: -.015em; }
.anatomy-canvas-head h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.anatomy-canvas-head p { max-width: 70ch; margin: .25rem 0 0; color: var(--ink-soft);
font-size: .78rem; line-height: 1.45; }
.anatomy-eyebrow { display: block; color: var(--anatomy-gold); font-size: .64rem; font-weight: 700;
line-height: 1.3; letter-spacing: .13em; text-transform: uppercase; }
.anatomy-mode-switch { display: inline-grid; grid-template-columns: repeat(3, minmax(4rem, auto));
padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--ground); }
.anatomy-mode-switch a { min-height: 36px; padding: .45rem .8rem; border-radius: 999px;
color: var(--ink-faint); font-size: .72rem; font-weight: 650; text-align: center;
text-decoration: none; }
.anatomy-mode-switch a:hover, .anatomy-mode-switch a:focus-visible { color: var(--ink); }
.anatomy-mode-switch a.is-current { color: var(--panel); background: var(--accent-ink);
box-shadow: 0 2px 8px rgba(23, 32, 42, .14); }
.anatomy-runtime-state { display: inline-flex; align-items: center; gap: .45rem; justify-self: end;
max-width: 15rem; color: var(--ink-soft); font-size: .7rem; line-height: 1.3; }
.anatomy-runtime-dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%;
background: var(--warm); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm) 13%, transparent); }
.anatomy-runtime-state.is-cleared .anatomy-runtime-dot { background: var(--ok); }
.anatomy-runtime-state.is-held .anatomy-runtime-dot { background: var(--anatomy-gold); }
.anatomy-error { margin: .8rem 1rem 0; padding: .65rem .8rem; border-left: 4px solid var(--lock);
background: color-mix(in srgb, var(--lock) 9%, var(--panel)); color: var(--ink); font-size: .8rem; }
.anatomy-workbench { display: grid;
grid-template-columns: minmax(10rem, 12.5rem) minmax(27rem, 1fr) minmax(19rem, 23rem);
grid-template-areas: "controls stage rail"; min-width: 0; min-height: clamp(36rem, 65vh, 49rem); }
/* LC_MARK_STUDIO_UNIFIED (2026-09-16): minimize the rail without leaving the page — the 3D
model keeps the width the rail column gave up. Same idea as the EEA bench's Panel toggle,
scoped to this page instead of a body-level class. */
[data-rail-hidden="1"] .anatomy-workbench { grid-template-columns: minmax(10rem, 12.5rem) minmax(27rem, 1fr); grid-template-areas: "controls stage"; }
[data-rail-hidden="1"] .anatomy-rail { display: none; }
/* LC_MARK_VISIT_PLAN — Read: the panel (Brief, treatment/manual pages) takes the main area;
the 3D stage and its controls step aside rather than sharing a cramped column with them. */
[data-anatomy-layout="read"] .anatomy-workbench { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail"; min-height: 0; }
[data-anatomy-layout="read"] .anatomy-controls, [data-anatomy-layout="read"] .anatomy-stage { display: none; }
[data-anatomy-layout="read"] .anatomy-rail-body { max-height: none; }
.anatomy-layout-switch { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.anatomy-layout-switch button { min-width: 3.6rem; padding: .35rem .6rem; border: 0; border-left: 1px solid var(--line);
background: var(--panel); color: var(--ink-faint); font: inherit; font-size: .78rem; cursor: pointer; }
.anatomy-layout-switch button:first-child { border-left: 0; }
.anatomy-layout-switch button:hover, .anatomy-layout-switch button:focus-visible { color: var(--ink); }
.anatomy-layout-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }
/* LC_MARK_VISIT_PLAN — Split: the SAME resizable-panel grip every other studio already has
(LC_MARK_STUDIO_GRIP), scoped to the anatomy workbench's own controls/stage/rail columns.
The grip element is created once and left in the DOM across mode switches (ensureGrip() is
idempotent). CORRECTED (Astra's review): the first version tried to cancel the 4-column
template below 1100px with a SECOND, narrower-max-width rule of the same [layout="split"]
.anatomy-workbench.has-grip specificity — CSS resolves equal specificity by source order, and
at widths under 820px there is a THIRD, unrelated single-column stacking rule
(.anatomy-workbench with no attribute selector, specificity 0,1,0) that would have lost to
BOTH of those unconditionally, silently keeping a cramped 2-column layout on a phone instead
of the intended stacked one. Gating the grip's own rules with `min-width` instead removes them
from the cascade entirely below that width — nothing is left to conflict with, at any narrower
breakpoint, present or future. */
@media (min-width: 1101px) {
[data-anatomy-layout="split"] .anatomy-workbench.has-grip { grid-template-columns: minmax(10rem, 12.5rem) minmax(27rem, 1fr) 10px minmax(19rem, var(--anatomy-rail, 23rem)); grid-template-areas: "controls stage grip rail"; }
[data-anatomy-layout="split"] .anatomy-grip { display: block; }
}
.anatomy-grip { grid-area: grip; position: sticky; top: 0; align-self: stretch; min-height: 20rem; width: 10px;
border-radius: 5px; cursor: col-resize; touch-action: none; background: transparent; display: none; }
.anatomy-grip:hover, .anatomy-grip:active, .anatomy-grip:focus-visible { background: var(--line); }
.anatomy-controls { grid-area: controls; min-width: 0; padding: 1rem .85rem;
border-right: 1px solid var(--line); background: var(--anatomy-control); color: #f4f6f4; }
.anatomy-control-group { min-width: 0; margin: 0; padding: 0 0 .9rem; border: 0;
border-bottom: 1px solid rgba(255,255,255,.15); }
.anatomy-control-group + .anatomy-control-group { margin-top: .85rem; }
.anatomy-control-group > label:first-child, .anatomy-control-group legend { display: block; width: 100%;
margin: 0 0 .45rem; padding: 0; color: rgba(255,255,255,.66); font-size: .62rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; }
.anatomy-control-group select { display: block; width: 100%; min-height: 42px; margin-top: .3rem;
padding: .5rem 1.7rem .5rem .55rem; border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
background: #fff; color: #17202a; font: inherit; font-size: .76rem; }
.anatomy-layer-controls { display: contents; }
.anatomy-toggle { position: relative; display: flex; align-items: center; gap: .55rem; min-height: 48px;
margin: 0; padding: .35rem 0; color: #fff; cursor: pointer; }
.anatomy-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.anatomy-toggle-mark { position: relative; flex: none; width: 2rem; height: 1.1rem;
border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(255,255,255,.12); }
.anatomy-toggle-mark::after { content: ''; position: absolute; top: 2px; left: 2px; width: .72rem;
height: .72rem; border-radius: 50%; background: rgba(255,255,255,.78); transition: transform .16s ease; }
.anatomy-toggle input:checked + .anatomy-toggle-mark { border-color: #8fd1dd;
background: color-mix(in srgb, #55a4b5 72%, transparent); }
.anatomy-toggle input:checked + .anatomy-toggle-mark::after { transform: translateX(.88rem); background: #fff; }
.anatomy-toggle input:focus-visible + .anatomy-toggle-mark { outline: 3px solid #9fd4de; outline-offset: 2px; }
.anatomy-toggle strong, .anatomy-toggle small { display: block; line-height: 1.2; }
.anatomy-toggle strong { font-size: .76rem; font-weight: 550; }
.anatomy-toggle small { margin-top: .18rem; color: rgba(255,255,255,.53); font-size: .62rem; }
.anatomy-control-empty { color: rgba(255,255,255,.58); }
.anatomy-range { display: block !important; margin-top: .55rem !important; color: rgba(255,255,255,.72) !important;
font-size: .68rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
.anatomy-range > span { display: flex; justify-content: space-between; gap: .5rem; }
.anatomy-range output { color: #fff; }
.anatomy-range input { width: 100%; margin: .55rem 0 0; accent-color: #8bc1cc; cursor: pointer; }
.anatomy-view-controls > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
.anatomy-view-controls button { min-width: 0; min-height: 40px; padding: .35rem .25rem;
border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: transparent;
color: rgba(255,255,255,.68); font: inherit; font-size: .68rem; cursor: pointer; }
.anatomy-view-controls button:hover, .anatomy-view-controls button:focus-visible,
.anatomy-view-controls button.is-current { color: #fff; border-color: #8bc1cc; background: rgba(139,193,204,.14); }
.anatomy-view-controls .fine { margin: .4rem 0 0; color: rgba(255,255,255,.47); font-size: .62rem; }
.anatomy-view-controls .anatomy-view-reset { grid-column: 1 / -1; }
.anatomy-range .fine { display: block; margin: .3rem 0 0; color: rgba(255,255,255,.47); font-size: .62rem; font-weight: 400; }
/* LC_MARK_DISPLAY_PANEL — the cun rows: a caption on its own line, the field full width beneath (the inline
fields wrapped into a heap in the narrow column, 2026-09-14) */
.anatomy-cun .anatomy-cun-field > span { display: block; margin-bottom: .25rem; }
.anatomy-cun .anatomy-cun-field .cun-num, .anatomy-cun .anatomy-cun-field select { display: block; width: 100%; min-height: 38px; box-sizing: border-box; margin: 0; }
.anatomy-cun .anatomy-cun-field + .anatomy-cun-field { margin-top: .55rem; }
/* LC_MARK_DRAFT_SUMMARY — the draft run's meaning first */
#draft-log .draft-summary { list-style: none; margin: 0 0 .6rem; padding: .6rem .8rem; border-left: 4px solid #0798c4; background: var(--card-2, #f4f8fa); font-size: 1rem; }
#draft-log .draft-summary strong { display: block; margin-bottom: .2rem; }
#draft-log .draft-summary p { margin: 0; }
/* LC_MARK_CORPUS_STUDIO — the point page's three regions: rail · stage · panel (the design's shell) */
.wb-studio { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(340px, 36%); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .wb-studio { grid-template-columns: 1fr; } .wb-panel { position: static; } }
.wb-rail { position: sticky; top: .75rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-2, #faf8f3); font-size: .9rem; }
.wb-rail-title { margin: 0 0 .5rem; }
.wb-rail .btnrow { flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.wb-rail kbd { font: inherit; font-size: .8em; padding: 0 .3em; border: 1px solid var(--line, #cfcac0); border-radius: 4px; }
.wb-stops { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 58vh; overflow: auto; border-top: 1px solid var(--line); }
.wb-stops li { padding: .15rem .3rem; border-bottom: 1px dotted var(--line); }
.wb-stops li.is-current { background: rgba(7,152,196,.12); font-weight: 600; }
.wb-stops li.is-done a { color: var(--ok, #2a7a3f); }
.wb-stage { min-width: 0; }
.wb-stage .pt-bench { margin-top: 0; }
.wb-panel { position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow: auto; min-width: 0; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-2, #faf8f3); }
.wb-tabs { display: flex; gap: .25rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.wb-tabs button { flex: 1 1 auto; padding: .45rem .3rem; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: 600; cursor: pointer; color: inherit; }
.wb-tabs button[aria-selected="true"] { border-bottom-color: #0798c4; }
.wb-panel .wb-page-img { max-width: 100%; }
/* the Page tab scrolls on its own, capped, so the Review beneath the tabs stays in view (§7: the form never below the fold) */
.wb-panel [data-wb-panel] { max-height: 58vh; overflow: auto; }
.wb-studio { grid-template-columns: 220px minmax(0, 1fr) minmax(360px, 30%); }
/* LC_MARK_REVIEW_RESUME — the rail's progress list */
.wb-walks { list-style: none; padding: 0; margin: .2rem 0 .5rem; }
.wb-walks li { padding: .1rem 0; }
.wb-walks li.is-current { font-weight: 600; }
.wb-walks li.is-done { opacity: .65; }
/* LC_MARK_STUDIO_GRIP — with the grip in place the panel column follows --wb-panel (set by dragging) */
.wb-studio.has-grip { grid-template-columns: 220px minmax(0, 1fr) 10px minmax(340px, var(--wb-panel, 30%)); }
.wb-grip { position: sticky; top: .75rem; align-self: stretch; min-height: 50vh; max-height: calc(100vh - 1.5rem); width: 10px; border-radius: 5px; cursor: col-resize; touch-action: none; background: transparent; }
.wb-grip:hover, .wb-grip:active { background: var(--line); }
@media (max-width: 1100px) { .wb-studio.has-grip { grid-template-columns: 1fr; } .wb-grip { display: none; } }
/* LC_MARK_CHART_OVERLAY — a 2D picture over a 3D box; the pointer passes through unless Adjust is on */
.fx3d-wrap { position: relative; }
.lc-ov-layer { position: absolute; left: 0; right: 0; top: 12px; bottom: 12px; overflow: hidden; pointer-events: none; border-radius: var(--radius); }
.lc-ov-layer.is-adjust { pointer-events: auto; cursor: move; outline: 2px dashed var(--accent); outline-offset: -2px; }
.lc-ov-img { position: absolute; left: 50%; top: 50%; transform-origin: center; max-width: none; pointer-events: none; }
.lc-ov-row select { max-width: 22rem; }
.lc-ov-row input[type=range] { width: 7rem; vertical-align: middle; }
.wb-review { margin-top: .8rem; padding-top: .6rem; border-top: 2px solid var(--line); }
.wb-review h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.wb-review .card { padding: .6rem .7rem; }
.trs-stage-canvas { margin-bottom: .8rem; }
.trs-stage-canvas svg { max-height: 60vh; }
.wb-record-approve { display: inline; }
/* LC_MARK_REVIEW_WALK */
.wb-walk { border-left: 4px solid #0798c4; }
.wb-walk .btnrow { align-items: center; flex-wrap: wrap; gap: .4rem; }
.wb-walk kbd { font: inherit; font-size: .8em; padding: 0 .3em; border: 1px solid var(--line, #cfcac0); border-radius: 4px; }
.wb-rule-page summary { cursor: pointer; }
.wb-rules-fold > summary { cursor: pointer; padding: .4rem 0; font-weight: 600; }
.anatomy-display-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .6rem; }
.anatomy-display-presets button { flex: 1 1 auto; min-height: 36px; padding: .3rem .5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-size: .72rem; cursor: pointer; }
.anatomy-display-presets button:hover { background: rgba(255,255,255,.16); }
.anatomy-display select { display: block; width: 100%; min-height: 38px; margin-top: .25rem; }
.anatomy-stage-dark .anatomy-stage { background: #1d2429; }
.anatomy-howto { margin: .5rem 0 .9rem; padding: .45rem .7rem; border: 1px solid var(--line, #d9d4c9); border-radius: 10px; background: var(--card-2, #faf8f3); font-size: .82rem; }
.anatomy-howto summary { cursor: pointer; font-weight: 600; }
.anatomy-howto ol { margin: .5rem 0 .2rem 1.1rem; padding: 0; }
.anatomy-howto li { margin: .3rem 0; line-height: 1.4; }
.anatomy-point-why { display: inline-block; margin-top: .15rem; color: var(--ink-2, #5a5850); line-height: 1.35; }
.anatomy-orientation-key { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1rem;
padding: .65rem; border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
background: rgba(255,255,255,.055); }
.anatomy-orientation-key > span { color: #d3aa50; }
.anatomy-orientation-key p { margin: 0; color: rgba(255,255,255,.58); font-size: .62rem; line-height: 1.4; }
.anatomy-orientation-key strong { display: block; margin-bottom: .1rem; color: #fff; font-size: .68rem; }
.anatomy-stage { position: relative; grid-area: stage; min-width: 0; min-height: inherit; overflow: hidden;
background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.98) 0 25%, rgba(243,241,235,.95) 50%, #e7e4dc 100%); }
.anatomy-stage::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 47%;
width: min(74%, 42rem); aspect-ratio: 1; border: 1px solid rgba(47,111,126,.08); border-radius: 50%;
transform: translate(-50%, -50%); box-shadow: 0 0 0 4rem rgba(47,111,126,.025),
0 0 0 9rem rgba(47,111,126,.018); pointer-events: none; }
.anatomy-canvas-page { --anatomy-caption-reserve: 5.25rem; }
/* Reserve the caption below the model rather than covering its feet. */
.anatomy-viewport { position: absolute; z-index: 1; inset: 0 0 var(--anatomy-caption-reserve); min-width: 0; min-height: 0; touch-action: none; }
.anatomy-viewport canvas { display: block; width: 100% !important; height: 100% !important; }
.anatomy-stage-badge { position: absolute; z-index: 3; top: 1rem; left: 1rem; display: flex;
flex-direction: column; max-width: calc(100% - 2rem); padding: .45rem .65rem;
border: 1px solid rgba(255,255,255,.72); border-radius: 6px;
background: rgba(251,250,247,.78); backdrop-filter: blur(8px); pointer-events: none; }
.anatomy-stage-badge span { color: #17202a; font-family: var(--serif); font-size: .92rem; }
.anatomy-stage-badge small { overflow: hidden; color: #64717d; font-size: .56rem; letter-spacing: .08em;
text-overflow: ellipsis; white-space: nowrap; }
.anatomy-stage-caption { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; left: 1rem;
display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: end; gap: .55rem;
padding: .65rem .75rem; border: 1px solid rgba(255,255,255,.75); border-radius: 8px;
background: rgba(251,250,247,.78); color: #17202a; backdrop-filter: blur(9px); pointer-events: none; }
.anatomy-caption-rule { align-self: start; width: 1.75rem; margin-top: .35rem; border-top: 2px solid var(--anatomy-gold); }
.anatomy-stage-caption strong, .anatomy-stage-caption small { display: block; }
.anatomy-stage-caption strong { font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.anatomy-stage-caption small { color: #64717d; font-size: .6rem; }
.anatomy-stage-count { color: #4a5764; font-size: .7rem; text-align: right; }
.anatomy-stage-count small { font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; }
.anatomy-rail { grid-area: rail; min-width: 0; border-left: 1px solid var(--line); background: var(--panel); }
.anatomy-rail-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
border-bottom: 1px solid var(--line); }
.anatomy-rail-tabs button { min-width: 0; min-height: 49px; padding: .45rem .25rem;
border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-faint);
font: inherit; font-family: var(--serif); font-size: .77rem; cursor: pointer; }
.anatomy-rail-tabs button:hover, .anatomy-rail-tabs button:focus-visible { color: var(--ink); }
.anatomy-rail-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.anatomy-rail-body { max-height: calc(clamp(36rem, 65vh, 49rem) - 50px); overflow: auto; overscroll-behavior: contain; }
.anatomy-rail-body > section { padding: 1.15rem 1.1rem 1.5rem; }
.anatomy-rail-body h2 { margin: .35rem 0 1rem; font-family: var(--serif); font-size: 1.45rem;
font-weight: 400; line-height: 1.2; }
.anatomy-rail-item { margin: 0 0 .85rem; padding: .85rem; border: 1px solid var(--line);
border-radius: 7px; background: color-mix(in srgb, var(--ground) 78%, var(--panel)); }
.anatomy-rail-item h3 { margin: .25rem 0 .35rem; font-family: var(--serif); font-size: 1.08rem; }
.anatomy-rail-item p { margin: .35rem 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.5; }
.anatomy-point-focus-context button { min-height: 36px; margin-top: .35rem; padding: .42rem .55rem;
border: 1px solid var(--accent); border-radius: 6px; background: #f5fafb; color: var(--accent-ink);
font: inherit; font-size: .68rem; font-weight: 750; cursor: pointer; }
.anatomy-point-focus-context button:hover, .anatomy-point-focus-context button:focus-visible {
background: var(--accent-ink); color: #fff; }
.anatomy-point-boundary { margin: -.35rem 0 .75rem; color: var(--ink-soft); font-size: .7rem;
line-height: 1.48; }
.anatomy-point-summary { display: flex; align-items: center; justify-content: space-between; gap: .65rem;
margin-bottom: .65rem; padding: .65rem .7rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
border-radius: 7px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.anatomy-point-summary strong { color: var(--ink); font-family: var(--serif); font-size: .95rem; font-weight: 500; }
.anatomy-point-summary > span { color: var(--ink-soft); font-size: .6rem; text-align: right; }
.anatomy-point-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem;
margin-bottom: .75rem; }
.anatomy-point-presets button { min-width: 0; min-height: 38px; padding: .35rem .42rem;
border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink-soft);
font: inherit; font-size: .62rem; font-weight: 700; cursor: pointer; }
.anatomy-point-presets button:first-child { border-color: var(--accent); color: var(--accent-ink); }
.anatomy-point-presets button:last-child { grid-column: 1 / -1; min-height: 34px; }
.anatomy-point-presets button:hover, .anatomy-point-presets button:focus-visible {
border-color: var(--accent); background: #f5fafb; color: var(--ink); }
.anatomy-point-search, .anatomy-point-filters label { display: block; min-width: 0; }
.anatomy-point-search > span, .anatomy-point-filters label > span { display: block; margin-bottom: .22rem;
color: var(--ink-soft); font-size: .59rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.anatomy-point-search input, .anatomy-point-filters select { display: block; width: 100%; min-width: 0;
min-height: 40px; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px;
background: var(--panel); color: var(--ink); font: inherit; font-size: .68rem; }
.anatomy-point-search input:focus, .anatomy-point-filters select:focus { outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-color: var(--accent); }
.anatomy-point-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem;
margin: .65rem 0; }
.anatomy-point-results-status { margin: .65rem 0 .35rem; color: var(--ink-faint); font-size: .61rem; }
.anatomy-point-list { margin: 0; padding: 0; list-style: none; }
.anatomy-point-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: .34rem .5rem; margin: 0 0 .4rem; padding: .58rem; border: 1px solid var(--line);
border-left: 3px solid transparent; border-radius: 7px; background: var(--panel); }
.anatomy-point-item.is-selected { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.anatomy-point-item[data-marker-state="displayable"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 28%, transparent); }
.anatomy-point-pick { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .48rem; cursor: pointer; }
.anatomy-point-pick input { flex: none; width: 1rem; height: 1rem; margin: .1rem 0 0; accent-color: var(--accent-ink); }
.anatomy-point-identity { min-width: 0; }
.anatomy-point-identity strong, .anatomy-point-identity span { display: block; }
.anatomy-point-identity strong { color: var(--ink); font-size: .72rem; letter-spacing: .025em; }
.anatomy-point-identity span { overflow: hidden; color: var(--ink-soft); font-family: var(--serif);
font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.anatomy-point-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .22rem; }
.anatomy-point-tags span { padding: .15rem .32rem; border-radius: 999px; background: #f0f1f1;
color: var(--ink-soft); font-size: .52rem; font-weight: 650; }
.anatomy-point-tags [data-point-tag="treatment"] { background: color-mix(in srgb, var(--accent) 12%, #fff);
color: var(--accent-ink); }
.anatomy-point-tags [data-point-tag="approved"] { background: color-mix(in srgb, var(--ok) 12%, #fff); color: var(--ok); }
.anatomy-point-tags [data-point-tag="evidence"] { border: 1px solid color-mix(in srgb, var(--anatomy-gold) 45%, var(--line));
background: color-mix(in srgb, var(--anatomy-gold) 7%, #fff); color: var(--lock); }
.anatomy-point-item > small { align-self: center; color: var(--ink-faint); font-size: .56rem; }
.anatomy-point-surface { align-self: end; min-height: 30px; padding: .24rem .38rem; border: 1px solid var(--line);
border-radius: 5px; background: #fff; color: var(--accent-ink); font: inherit; font-size: .55rem;
text-transform: capitalize; cursor: pointer; }
.anatomy-point-surface:hover, .anatomy-point-surface:focus-visible { border-color: var(--accent); }
.anatomy-point-evidence-note { margin: .8rem 0 0; padding: .65rem; border-left: 3px solid var(--anatomy-gold);
background: color-mix(in srgb, var(--anatomy-gold) 6%, var(--panel)); color: var(--ink-soft);
font-size: .62rem; line-height: 1.45; }
.anatomy-point-evidence-note strong { color: var(--ink); }
.anatomy-review-state { display: inline-block; margin-top: .35rem; padding: .18rem .42rem;
border: 1px solid color-mix(in srgb, var(--anatomy-gold) 60%, var(--line)); border-radius: 999px;
color: var(--lock); font-size: .61rem; font-weight: 650; letter-spacing: .04em; }
.anatomy-review-queue-head { display: flex; align-items: end; justify-content: space-between; gap: .75rem;
margin: 1.2rem 0 .55rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.anatomy-review-queue-head strong { color: var(--ink-soft); font-size: .7rem; font-weight: 650; }
.anatomy-placement-review { margin: 0 0 .7rem; padding: .8rem; border: 1px solid var(--line);
border-left: 3px solid var(--anatomy-gold); border-radius: 7px; background: var(--panel); }
.anatomy-placement-review[data-placement-review-state="approved"] { border-left-color: var(--ok); }
.anatomy-placement-review > header { display: flex; align-items: start; justify-content: space-between; gap: .6rem; }
.anatomy-placement-review > header > strong { padding: .18rem .4rem; border-radius: 999px;
background: color-mix(in srgb, var(--anatomy-gold) 10%, var(--panel)); color: var(--lock);
font-size: .58rem; letter-spacing: .04em; }
.anatomy-placement-review[data-placement-review-state="approved"] > header > strong {
background: color-mix(in srgb, var(--ok) 10%, var(--panel)); color: var(--ok); }
.anatomy-placement-review h3 { margin: .35rem 0 .45rem; font-family: var(--serif); font-size: 1rem; }
.anatomy-placement-review dl { margin: 0; }
.anatomy-placement-review dl > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .4rem;
padding: .22rem 0; border-top: 1px solid var(--line); font-size: .65rem; }
.anatomy-placement-review dt { color: var(--ink-faint); }
.anatomy-placement-review dd { margin: 0; color: var(--ink); font-weight: 600; }
.anatomy-placement-review ul { margin: .55rem 0 0; padding: 0; list-style: none; }
.anatomy-placement-review li { display: flex; flex-direction: column; padding: .35rem 0;
border-top: 1px solid var(--line); font-size: .62rem; }
.anatomy-placement-review li span, .anatomy-placement-review li small { color: var(--ink-faint); }
.anatomy-placement-review p { margin: .5rem 0 0; color: var(--ink-soft); font-size: .67rem; }
.anatomy-discovery-evidence { margin-top: .7rem; padding: .6rem;
border: 1px solid color-mix(in srgb, var(--anatomy-gold) 55%, var(--line));
border-radius: 6px; background: color-mix(in srgb, var(--anatomy-gold) 6%, var(--panel)); }
.anatomy-discovery-evidence > header { display: flex; align-items: baseline; justify-content: space-between;
gap: .5rem; }
.anatomy-discovery-evidence > header strong { color: var(--ink); font-size: .65rem; }
.anatomy-discovery-evidence > header span { color: var(--lock); font-size: .56rem; font-weight: 700;
letter-spacing: .03em; text-align: right; }
.anatomy-discovery-evidence > p { margin-top: .3rem; }
.anatomy-discovery-evidence details { margin-top: .45rem; }
.anatomy-discovery-evidence summary { color: var(--accent-ink); cursor: pointer; font-size: .62rem;
font-weight: 700; }
.anatomy-discovery-evidence li:first-child { border-top: 0; }
.anatomy-discovery-link { align-self: flex-start; margin-top: .28rem; color: var(--accent-ink);
font-size: .62rem; font-weight: 750; text-underline-offset: .14em; }
.anatomy-discovery-empty { font-style: italic; }
.anatomy-placement-digest { display: block; margin-top: .55rem; overflow-wrap: anywhere;
color: var(--ink-faint); font-size: .56rem; letter-spacing: .03em; }
.anatomy-rail-empty { padding: .9rem; border-left: 3px solid var(--anatomy-gold);
background: color-mix(in srgb, var(--anatomy-gold) 7%, var(--panel)); }
.anatomy-rail-empty strong { font-family: var(--serif); font-size: 1rem; }
.anatomy-rail-empty p { margin: .25rem 0 0; color: var(--ink-soft); font-size: .76rem; }
.anatomy-facts { margin: 1rem 0 0; }
.anatomy-facts > div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .5rem;
padding: .38rem 0; border-bottom: 1px solid var(--line); }
.anatomy-facts dt { color: var(--ink-faint); font-size: .69rem; }
.anatomy-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: .72rem; font-weight: 550; }
.anatomy-blockers, .anatomy-source-list { margin: 0; padding: 0; list-style: none; }
.anatomy-blockers li { display: grid; grid-template-columns: 1.45rem minmax(0, 1fr); gap: .55rem;
padding: .65rem 0; border-bottom: 1px solid var(--line); }
.anatomy-blockers li > span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem;
border: 1px solid var(--anatomy-gold); border-radius: 50%; color: var(--lock); font-size: .7rem; font-weight: 800; }
.anatomy-blockers li.is-cleared > span { border-color: var(--ok); color: var(--ok); }
.anatomy-blockers strong { display: block; font-size: .68rem; letter-spacing: .03em; }
.anatomy-blockers p { margin: .15rem 0 0; color: var(--ink-soft); font-size: .68rem; line-height: 1.4; }
.anatomy-boundary-note { margin: 1rem 0 0; padding: .75rem; border-radius: 6px;
background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--ink-soft); font-size: .7rem; }
.anatomy-decision-form { margin: 0 0 1rem; padding: .8rem; border: 1px solid var(--line);
border-radius: 7px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.anatomy-decision-form label { display: block; margin-bottom: .35rem; color: var(--ink);
font-size: .68rem; font-weight: 700; letter-spacing: .03em; }
.anatomy-decision-form textarea { display: block; width: 100%; min-height: 5.5rem; resize: vertical;
padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
color: var(--ink); font: inherit; font-size: .72rem; line-height: 1.45; }
.anatomy-decision-form textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-color: var(--accent); }
.anatomy-decision-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem;
margin-top: .55rem; }
.anatomy-decision-actions button { min-width: 0; min-height: 40px; padding: .42rem .35rem;
border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink-soft);
font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; }
.anatomy-decision-actions button:hover, .anatomy-decision-actions button:focus-visible {
border-color: var(--accent); color: var(--ink); }
.anatomy-decision-actions .is-accept { border-color: var(--accent-ink); background: var(--accent-ink); color: #fff; }
.anatomy-decision-actions .is-reject { color: var(--lock); }
.anatomy-decision-form > p { margin: .55rem 0 0; color: var(--ink-faint); font-size: .61rem; line-height: 1.4; }
.anatomy-source-list li { display: flex; flex-direction: column; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.anatomy-source-list strong { font-family: var(--serif); font-size: .9rem; }
.anatomy-source-list span { color: var(--ink-soft); font-size: .7rem; }
.anatomy-source-list small { color: var(--ink-faint); font-size: .6rem; overflow-wrap: anywhere; }
.anatomy-treatment-map { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
min-width: 0; border-top: 1px solid var(--line); background: #f8f8f5; }
.anatomy-treatment-map > header { padding: 1rem; border-right: 1px solid var(--line); }
.anatomy-treatment-map h2 { margin: .12rem 0; font-family: var(--serif); font-size: 1.1rem; }
.anatomy-treatment-map > header p { margin: .35rem 0 0; color: var(--ink-faint); font-size: .65rem; line-height: 1.4; }
.anatomy-treatment-map ol { display: grid; grid-auto-columns: minmax(14rem, 1fr); grid-auto-flow: column;
min-width: 0; margin: 0; padding: 0; overflow: auto hidden; list-style: none; }
.anatomy-treatment-block { display: flex; flex-direction: column; min-width: 0;
border-right: 1px solid var(--line); background: var(--panel); }
.anatomy-treatment-block-head { display: flex; align-items: baseline; justify-content: space-between;
gap: .5rem; padding: .55rem .85rem; border-bottom: 1px solid var(--line); background: #f2f2ee; }
.anatomy-treatment-block-head h3 { margin: 0; font-family: var(--serif); font-size: .85rem; }
.anatomy-treatment-block-head .fine { color: var(--ink-faint); font-size: .6rem; white-space: nowrap; }
.anatomy-treatment-block-steps { display: flex; flex-direction: column; min-width: 0; margin: 0;
padding: 0; list-style: none; }
.anatomy-treatment-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem;
align-content: start; padding: .85rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.anatomy-treatment-block-steps > li:last-child { border-bottom: 0; }
/* LC_MARK_VISIT_PLAN ("treatment blocks", the confirmed Plan tab): the same visit → treatment
occurrence → ordered steps hierarchy as the Brief's proposal view above, in the vertical
.list-row idiom the Plan tab already uses rather than the horizontal-scroll strip. */
.plan-block { flex-direction: column; align-items: stretch; border-left: 3px solid var(--accent, #3bb9b2);
padding-left: .75rem; }
.plan-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
margin-bottom: .35rem; }
.plan-block-head h3 { margin: 0; font-family: var(--serif); font-size: .92rem; }
.plan-block-steps > li:last-child { border-bottom: 0; }
.plan-rest-hint { color: var(--ink-faint); font-style: italic; }
/* LC_MARK_VISIT_PLAN ("polarity assignments"): each physical target of a bilateral step gets its
own labelled card — "never distinguish the pair by colour alone" applies to this UI too, so the
distinguishing element is the target's own heading text, not a background tint. */
.plan-targets { margin: .5rem 0; }
.plan-target { flex-direction: column; align-items: stretch; background: #f7f7f4;
border-radius: 6px; padding: .6rem .75rem; margin-bottom: .4rem; }
.plan-target:last-child { margin-bottom: 0; }
.plan-target h4 { margin: 0 0 .25rem; font-family: var(--serif); font-size: .82rem; }
.plan-target form { margin-top: .35rem; }
.anatomy-step-surfaces { display: flex; flex-direction: column; gap: .3rem; }
.anatomy-step-surface { display: flex; flex-direction: column; align-items: center; gap: .22rem; min-width: 3.4rem;
min-height: 3.4rem; padding: .35rem; border: 1px solid var(--line); border-radius: 7px;
background: #fff; color: var(--accent-ink); font-size: .58rem; cursor: pointer; }
.anatomy-step-surface:hover, .anatomy-step-surface:focus-visible { border-color: var(--accent); background: #f5fafb; }
.anatomy-step-order { display: grid; place-items: center; width: 1.55rem; height: 1.55rem;
border-radius: 50%; background: var(--accent-ink); color: #fff; font-size: .72rem; font-weight: 750; }
.anatomy-step-kicker { display: flex; align-items: center; gap: .3rem; color: var(--ink-soft);
font-size: .6rem; font-weight: 650; letter-spacing: .02em; }
.anatomy-step-swatch { width: .58rem; height: .58rem; border: 1px solid rgb(18 32 43 / 22%); border-radius: 50%; }
.anatomy-step-color--dark-gray { background: #5f6265; }
.anatomy-step-color--crimson { background: #a92143; }
.anatomy-step-color--light-green { background: #93c96f; }
.anatomy-step-color--turquoise { background: #3bb9b2; }
.anatomy-step-color--rose { background: #d9819c; }
.anatomy-step-copy h3 { margin: .25rem 0; font-family: var(--serif); font-size: .98rem; }
.anatomy-step-copy p, .anatomy-step-copy small { display: block; margin: .22rem 0; color: var(--ink-soft);
font-size: .65rem; line-height: 1.45; }
.anatomy-step-copy small { color: var(--ink-faint); }
.anatomy-step-state { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem; padding-top: .45rem;
border-top: 1px solid var(--line); }
.anatomy-step-state span, .anatomy-step-state strong { padding: .2rem .38rem; border-radius: 999px;
background: #f0f1f1; color: var(--ink-soft); font-size: .55rem; font-weight: 600; }
.anatomy-step-state strong { background: #f7eee4; color: var(--lock); }
/* LC_MARK_TREATMENT_STEP_CLARIFICATION (migration 130) */
.anatomy-step-clarification { grid-column: 1 / -1; }
.anatomy-step-clarification:empty { display: none; }
.anatomy-step-clarification .fine { margin: .4rem 0 .2rem; }
.anatomy-step-flag-toggle summary { cursor: pointer; font-size: .65rem; color: var(--ink-soft); padding: .3rem 0; }
.anatomy-treatment-map-empty { padding: 1rem; color: var(--ink-soft); }
.anatomy-treatment-map-empty strong, .anatomy-treatment-map-empty span { display: block; }
.anatomy-treatment-map-empty span { margin-top: .25rem; font-size: .7rem; }
.anatomy-timeline { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
min-width: 0; border-top: 1px solid var(--line); background: var(--panel); }
.anatomy-timeline > header { padding: .9rem 1rem; border-right: 1px solid var(--line); }
.anatomy-timeline h2 { font-size: 1.1rem; }
.anatomy-timeline > header p { margin: .35rem 0 0; color: var(--ink-faint); font-size: .65rem; line-height: 1.4; }
.anatomy-timeline ol { position: relative; display: flex; min-width: 0; margin: 0; padding: .85rem 1rem;
overflow: auto hidden; list-style: none; }
.anatomy-timeline ol::before { content: ''; position: absolute; top: 1.25rem; right: 1rem; left: 1rem;
border-top: 1px solid var(--line); }
.anatomy-timeline-item { position: relative; z-index: 1; flex: 1 0 8rem; min-width: 0; padding: 1.15rem .55rem 0 0; }
.anatomy-timeline-dot { position: absolute; top: .15rem; left: 0; width: .8rem; height: .8rem;
border: 2px solid var(--panel); border-radius: 50%; background: var(--ink-faint);
box-shadow: 0 0 0 1px var(--ink-faint); }
.anatomy-timeline-item.is-complete .anatomy-timeline-dot { background: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.anatomy-timeline-item strong, .anatomy-timeline-item small, .anatomy-timeline-item > span:last-child { display: block; }
.anatomy-timeline-item strong { color: var(--ink); font-size: .68rem; }
.anatomy-timeline-item small { color: var(--ink-faint); font-size: .58rem; }
.anatomy-timeline-item > span:last-child { margin-top: .12rem; color: var(--ink-soft); font-size: .6rem; }
.anatomy-timeline-empty { padding: .45rem 0; color: var(--ink-soft); }
.anatomy-timeline-empty strong, .anatomy-timeline-empty span { display: block; }
.anatomy-timeline-empty span { font-size: .7rem; }
@media (max-width: 1180px) {
.anatomy-canvas-head { grid-template-columns: minmax(15rem, 1fr) auto; }
.anatomy-runtime-state { grid-column: 1 / -1; justify-self: start; }
.anatomy-workbench { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem);
grid-template-areas: "controls controls" "stage rail"; }
.anatomy-controls { display: grid; grid-template-columns: minmax(11rem, .7fr) minmax(21rem, 1.4fr) minmax(13rem, .9fr);
align-items: start; gap: 1rem; padding: .7rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
.anatomy-control-group, .anatomy-control-group + .anatomy-control-group { margin: 0; padding: 0; border: 0; }
.anatomy-control-group:nth-child(2) { display: grid; grid-template-columns: repeat(3, minmax(8rem, 1fr)); gap: .25rem .8rem; }
.anatomy-control-group:nth-child(2) legend { grid-column: 1 / -1; }
.anatomy-layer-controls { display: contents; }
.anatomy-range { grid-column: 1 / -1; }
.anatomy-orientation-key { display: none; }
.anatomy-stage { min-height: clamp(34rem, 65vh, 46rem); }
.anatomy-rail-body { max-height: calc(clamp(34rem, 65vh, 46rem) - 50px); }
}
@media (max-width: 820px) {
.anatomy-canvas-page { overflow: hidden; }
.anatomy-canvas-head { grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: .8rem; }
.anatomy-mode-switch { justify-self: start; width: min(100%, 19rem); }
.anatomy-runtime-state { grid-column: auto; }
.anatomy-workbench { display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-areas: "controls" "stage" "rail"; min-height: 0; }
.anatomy-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.anatomy-control-group:nth-child(2) { grid-template-columns: repeat(2, minmax(8rem, 1fr)); }
.anatomy-view-controls { grid-column: 1 / -1; }
.anatomy-stage { min-height: min(42rem, 72svh); }
.anatomy-rail { border-top: 1px solid var(--line); border-left: 0; }
.anatomy-rail-body { max-height: none; overflow: visible; }
.anatomy-treatment-map { grid-template-columns: minmax(0, 1fr); }
.anatomy-treatment-map > header { border-right: 0; border-bottom: 1px solid var(--line); }
.anatomy-timeline { grid-template-columns: minmax(0, 1fr); }
.anatomy-timeline > header { border-right: 0; border-bottom: 1px solid var(--line); }
.anatomy-timeline ol { min-height: 7rem; }
}
@media (max-width: 560px) {
.wrap.wrap-wide:has(.anatomy-canvas-page) { padding-inline: .55rem; }
.anatomy-canvas-page { margin-top: .65rem; border-radius: 10px; }
.anatomy-canvas-head h2 { font-size: 1.2rem; }
.anatomy-mode-switch { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anatomy-mode-switch a { min-height: 42px; padding-inline: .25rem; }
.anatomy-controls { grid-template-columns: minmax(0, 1fr); gap: .85rem; padding: .8rem; }
.anatomy-control-group:nth-child(2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.anatomy-control-group:nth-child(2) legend, .anatomy-range { grid-column: 1 / -1; }
.anatomy-view-controls { grid-column: auto; }
.anatomy-stage { min-height: max(31rem, 66svh); }
.anatomy-stage-badge { top: .6rem; left: .6rem; max-width: calc(100% - 1.2rem); }
.anatomy-stage-caption { right: .6rem; bottom: .6rem; left: .6rem;
grid-template-columns: 1.2rem minmax(0, 1fr); }
.anatomy-canvas-page { --anatomy-caption-reserve: 6.25rem; }
.anatomy-caption-rule { width: 1.2rem; }
.anatomy-stage-count { display: none; }
.anatomy-rail-tabs { overflow: visible; }
.anatomy-rail-tabs button { min-width: 0; font-size: .7rem; }
.anatomy-rail-body > section { padding: 1rem .85rem 1.25rem; }
.anatomy-decision-actions button { min-height: 44px; }
.anatomy-point-focus-context button, .anatomy-point-presets button,
.anatomy-point-search input, .anatomy-point-filters select { min-height: 44px; }
.anatomy-point-filters { grid-template-columns: minmax(0, 1fr); }
.anatomy-treatment-map ol { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
.anatomy-treatment-block { border-right: 0; border-bottom: 1px solid var(--line); }
.anatomy-treatment-step { grid-template-columns: 3.5rem minmax(0, 1fr); }
.anatomy-timeline ol { padding-inline: .8rem; }
.anatomy-timeline-item { flex-basis: 7.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.anatomy-toggle-mark::after { transition: none; }
}
@media print {
.anatomy-controls, .anatomy-mode-switch, .anatomy-runtime-state { display: none !important; }
.anatomy-workbench { display: block; }
.anatomy-stage { min-height: 520px; border: 1px solid var(--line); }
.anatomy-rail { border: 1px solid var(--line); }
.anatomy-rail-body { max-height: none; overflow: visible; }
}
/* the Treatment Library, grouped by manual — LC_MARK_PRACTICE_SPINE */
.tl-group > summary { cursor: pointer; padding: .4rem 0; }
.tl-group > summary strong { font-size: 1.02rem; }
.tl-row-cite { white-space: nowrap; }
/* ── slice B: frame, invert, detected proposals — LC_MARK_EEA_FRAME ─────────── */
.eea-canvas-stage { overflow: hidden; }
.eea-canvas-stage img.eea-inverted { filter: invert(1); }
.eea-canvas-scroll.framing { cursor: crosshair; }
.eea-frame-rect { position: absolute; border: 2px dashed #2f6f9f; background: rgba(47,111,159,.08); pointer-events: none; }
.eea-pc-marker.eea-marker-detected { border-style: dotted; border-color: #2f6f9f; }
.eea-pc-marker.multi { outline: 3px solid #b26b2f; outline-offset: 2px; } /* LC_MARK_EEA_MULTI */
/* ══ THE MAP OVER THE PLATE (LC_MARK_EEA_BENCH_OVERLAY) — a reference figure laid over the capture.
It lives INSIDE .eea-canvas-stage and is sized and placed in PERCENTAGES of that stage, so the
bench's resize-the-stage zoom carries it along with the photograph (the sector guide's mechanic).
No z-index: DOM order puts it above the plate and below every marker, finding and annotation.
The pointer passes straight through unless Align is on — a click always reaches its terminal. */
.eea-ov-img { position: absolute; left: 50%; top: 50%; height: auto; max-width: none;
transform: translate(-50%, -50%); transform-origin: center; pointer-events: none; }
.eea-ov-img.is-align { pointer-events: auto; cursor: move; outline: 2px dashed var(--accent); outline-offset: -2px; }
.eea-ov-panel { margin: .4rem 0 .6rem; padding: .5rem .6rem; }
.eea-ov-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .35rem; font-size: .92rem; }
.eea-ov-row select { max-width: 26rem; }
.eea-ov-row input[type=range] { width: 8rem; vertical-align: middle; }
.eea-ov-row input[type=number] { width: 5rem; }
#eea-overlay-toggle.is-active, #eea-ov-align.is-active, #eea-ov-flip.is-active { outline: 2px solid var(--accent); }
/* ══ ANNOTATIONS (LC_MARK_EEA_ANNOTATE) — regions and arrows drawn ON the plate, anchored in
full-image coordinates so they track the photograph at every zoom; the Takeoff region model. */
.eea-draw-line { position: absolute; height: 0; border-top: 2px dashed #b26b2f; transform-origin: 0 0; pointer-events: none; }
.eea-ann-layer { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
.eea-ann-layer .eea-ann-shape { pointer-events: all; cursor: grab; }
/* a region's interior must not SWALLOW what sits under it (a proposal shape, a pin) — its hit
area is the border; move it by its edge, its handles, or its rail row (found live via QA) */
.eea-ann-layer .eea-ann-shape rect.eea-ann-region { pointer-events: visibleStroke; }
/* quiet by default, transparent under the pointer (the practitioner: "see the thing but still
know the box is there"); the LABEL hides until hover or selection */
.eea-ann-layer .eea-ann-region { fill: rgba(178, 107, 47, .05); stroke: #b26b2f; stroke-width: 2; }
.eea-ann-layer g.eea-ann-shape:hover rect.eea-ann-region { fill: transparent; stroke-opacity: .3; }
.eea-ann-layer .eea-ann-label { display: none; }
.eea-ann-layer g.eea-ann-shape:hover .eea-ann-label, .eea-ann-layer g.eea-ann-shape.selected .eea-ann-label { display: block; }
.eea-ann-layer .eea-ann-arrow { stroke: #b26b2f; stroke-width: 2.5; fill: none; }
.eea-ann-layer .eea-ann-head { fill: #b26b2f; stroke: none; pointer-events: none; }
.eea-ann-layer .eea-ann-label { font-size: 12px; fill: #7a4a1f; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; pointer-events: none; }
.eea-ann-layer .selected .eea-ann-region, .eea-ann-layer .selected .eea-ann-arrow { stroke: var(--accent); stroke-dasharray: 6 3; }
.eea-ann-layer .eea-ann-handle { fill: var(--bg-2, #fff); stroke: var(--accent); stroke-width: 2; pointer-events: all; cursor: nwse-resize; }
.eea-ann-layer .eea-ann-rotate { cursor: grab; }
.eea-ann-layer .eea-ann-end { cursor: move; }
.eea-canvas-scroll.drawing { cursor: crosshair; }
/* while a draw mode is armed, existing shapes must not swallow the gesture — the new region or
arrow may start on top of one */
.eea-canvas-scroll.drawing .eea-ann-layer .eea-ann-shape,
.eea-canvas-scroll.drawing .eea-ann-layer .eea-ann-handle { pointer-events: none; }
#eea-ann-region-mode.is-active, #eea-ann-arrow-mode.is-active { outline: 2px solid var(--accent); }
.eea-ann-list .list-row { align-items: flex-start; }
.eea-ann-list .eea-ann-row-tools { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.eea-ann-list input[type="text"] { width: 100%; max-width: 220px; }
.eea-ann-list .is-selected { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 6px; }
/* the popover AT the shape (LC_MARK_EEA_ANN_POPOVER) — controls live on the plate, not the rail */
.eea-ann-pop { position: absolute; z-index: 7; width: 260px; padding: .5rem .6rem; margin: 0;
transform: translateY(calc(-100% - 10px)); box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.eea-ann-pop.below { transform: translateY(14px); } /* flipped under a top-edge anchor (found live: it slid beneath the toolbar) */
.eea-ann-pop.beside { transform: translateY(-50%); cursor: grab; } /* opens BESIDE the phenomenon; drag it by any non-control part */
.eea-ann-pop.beside.left-of { transform: translate(-100%, -50%); }
/* 🔴 !important — .beside.left-of is more specific than .dragged, so the placement transform kept
re-applying mid-drag and the popover moved DISJOINTED from the pointer (found live) */
.eea-ann-pop.dragged { transform: none !important; }
.eea-phen-evidence { margin-top: .35rem; }
.eea-evidence-thumb { height: 54px; width: auto; border: 1px solid var(--border, #ccc); background: #fff; vertical-align: middle; }
.eea-ann-pop .eea-ann-pop-h { margin: 0 0 .3rem; }
.eea-ann-pop input[type="text"], .eea-ann-pop select { width: 100%; box-sizing: border-box; margin-bottom: .35rem; font-size: .85rem; }
.eea-ann-pop .btnrow { gap: .3rem; flex-wrap: wrap; }
/* designations (LC_MARK_EEA_DESIGNATION): the base pot + per-finger calls; axes drawn on the guide */
.eea-designation select { width: 100%; box-sizing: border-box; }
.eea-desig-row { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin: .3rem 0 .5rem; }
.eea-desig-row .btn.is-active { outline: 2px solid var(--accent); }
.eea-zone-guide .eea-guide-axis { stroke-width: 3.5; opacity: .85; }
/* the analyser's proposals ON the plate (LC_MARK_EEA_PHEN_OVERLAY): colour per phenomenon,
dotted = undecided; click to decide in place */
.eea-phen-layer { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
.eea-phen-layer .eea-phen-g path, .eea-phen-layer .eea-phen-g line, .eea-phen-layer .eea-phen-g circle {
pointer-events: visibleStroke; cursor: pointer; fill: none; }
.eea-leg { cursor: pointer; }
.eea-leg::before { content: '■ '; }
.eea-leg.is-hidden { opacity: .35; text-decoration: line-through; }
.eea-phen-layer .eea-phen-done path, .eea-phen-layer .eea-phen-done line, .eea-phen-layer .eea-phen-done circle { cursor: grab; }
/* resize handles (LC_MARK_EEA_PHEN_RESIZE): filled, fat-targeted, grabbable by their whole disc */
.eea-phen-layer .eea-phen-g circle.eea-phen-handle { pointer-events: all; cursor: grab; }
.eea-phen-layer .eea-phen-g circle.eea-phen-handle:active { cursor: grabbing; }
/* designations drawn on the plate (LC_MARK_EEA_DESIG_STAMP) — visible, titled, never in the way of a click */
/* the axis runs straight through the pin — it must never take the pin's click; only the S/D badge holds a hover title */
.eea-phen-layer .eea-desig-g line, .eea-phen-layer .eea-desig-g text { pointer-events: none; user-select: none; }
.eea-phen-layer .eea-desig-g circle[r="10"] { pointer-events: visibleFill; cursor: help; }
.eea-phen-add-kind optgroup { font-style: normal; color: var(--ink-soft, #666); }
.eea-leg[data-c="gap"] { color: #2f6f9f; } .eea-leg[data-c="flattening"] { color: #c0392b; }
.eea-leg[data-c="ray-protrusion"] { color: #b26b2f; } .eea-leg[data-c="thin-region"] { color: #7f8c8d; }
.eea-leg[data-c="broken-contour"] { color: #8e44ad; }
#eea-phen-toggle.is-active { outline: 2px solid var(--accent); }
.eea-phen-group { margin: .3rem 0; }
.eea-phen-group > summary { cursor: pointer; padding: .2rem 0; }
.eea-zone-d { margin: .2rem 0; border-bottom: 1px solid var(--border, #eee); }
.eea-zone-d > summary { cursor: pointer; padding: .25rem 0; }
.eea-zone-d > div { padding: .2rem 0 .5rem; }
.eea-second-pass { margin: .5rem 0; }
/* the reference library (LC_MARK_EEA_REFERENCE): the manuals' plates in a landscape grid */
.eea-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .8rem; }
.eea-ref-fig { margin: 0; padding: .6rem; }
.eea-ref-fig img { width: 100%; height: auto; background: #fff; border: 1px solid var(--border, #ccc); }
.eea-ref-fig figcaption { margin-top: .4rem; }
.eea-ref-filters { flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.eea-ref-filters .is-active { outline: 2px solid var(--accent); }
/* the phenomenon catalogue (LC_MARK_EEA_CATALOGUE) */
.eea-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.eea-cat-entry { margin: 0; }
.eea-cat-figs { display: flex; gap: .4rem; flex-wrap: wrap; }
.eea-cat-figs img { height: 90px; width: auto; border: 1px solid var(--border, #ccc); background: #fff; }
/* the reading (LC_MARK_EEA_READING): rule sections, edited in place */
.eea-reading-sec { margin: 0 0 .8rem; }
.eea-reading-sec textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .5rem; }
.eea-reading-finding { margin: .5rem 0 .5rem .8rem; border-left: 3px solid var(--border, #ccc); padding-left: .6rem; }
.eea-reading-finding blockquote, .eea-reading-passages blockquote { margin: .3rem 0; }
.eea-proposal-list { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.eea-proposal-row { display: inline-flex; align-items: center; gap: .15rem; font-size: .8rem; }
.eea-proposal-row form.inline { display: inline; }
.eea-proposal-row .btn.small { padding: 0 .35rem; min-width: 0; }
/* ── PUBLIC REDESIGN (2026-08-31) ───────────────── LC_MARK_PUBLIC_REDESIGN ──
The public front door: welcome-video placeholder, the fingertip explorer,
the course catalogue, the instrument catalogue, and the practice-studio
stepper. Everything below keeps the same visual law as the rest of the
platform: light as meaning, colour beside a word, tokens only. */
.price { font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
/* welcome-video placeholder — an honest "coming soon", styled like a player */
.video-ph {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; min-height: 220px; border-radius: var(--radius);
background: linear-gradient(135deg, var(--panel), var(--ground));
border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; padding: 20px;
}
.video-ph-play {
width: 56px; height: 56px; border-radius: 50%;
border: 2px solid var(--accent); position: relative; opacity: .85;
}
.video-ph-play::after {
content: ''; position: absolute; left: 22px; top: 17px;
border-left: 16px solid var(--accent); border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
}
.video-ph-label { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-soft); }
/* ── the fingertip explorer ─────────────────────────────────────────────── */
.explore { margin: 8px 0 24px; }
.fx-scene { border: 1px solid var(--line); border-radius: var(--radius);
background: var(--panel); box-shadow: var(--shadow); padding: 10px; }
.fx-svg { display: block; width: 100%; height: auto; max-height: 420px; }
.fx-palm { fill: none; stroke: var(--ink-faint); stroke-width: 2; }
.fx-figure * { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
.fx-figure circle { fill: none; }
.fx-hitpad { fill: transparent; }
.fx-seg { fill: var(--ground); stroke: var(--ink-faint); stroke-width: 2; }
.fx-tip { fill: var(--ink-faint); opacity: .5; }
.fx-finger { cursor: pointer; }
.fx-finger:hover .fx-seg, .fx-finger:focus-visible .fx-seg { stroke: var(--accent); stroke-width: 3; }
.fx-finger.is-sel .fx-seg { stroke: var(--accent); stroke-width: 3; fill: var(--panel); }
.fx-finger.is-sel .fx-tip { fill: var(--accent); opacity: 1; }
/* the meridian courses — hidden until their finger is chosen */
.mx-line { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0;
transition: opacity .25s ease; }
.explore[data-sel="thumb"] .mx-thumb { opacity: 1; }
.explore[data-sel="index"] .mx-index { opacity: 1; }
.explore[data-sel="middle"] .mx-middle { opacity: 1; }
.explore[data-sel="ring"] .mx-ring { opacity: 1; }
.explore[data-sel="little"] .mx-little { opacity: 1; }
.mx-thumb { stroke: var(--spec-1); }
.mx-index { stroke: var(--spec-2); }
.mx-middle { stroke: var(--spec-4); }
.mx-ring { stroke: var(--spec-6); }
.mx-little { stroke: var(--spec-7); }
.fx-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.fx-btn.is-sel { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.fx-cards { display: grid; gap: 12px; margin: 12px 0; }
.fx-card { border: 1px solid var(--line); border-left: 4px solid var(--line);
border-radius: var(--radius); background: var(--panel); padding: 12px 16px; }
.fx-card h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.fx-card p { margin: 0; color: var(--ink-soft); }
.fx-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.fx-card.s1 { border-left-color: var(--spec-1); } .fx-card.s1 .fx-swatch { background: var(--spec-1); }
.fx-card.s2 { border-left-color: var(--spec-2); } .fx-card.s2 .fx-swatch { background: var(--spec-2); }
.fx-card.s4 { border-left-color: var(--spec-4); } .fx-card.s4 .fx-swatch { background: var(--spec-4); }
.fx-card.s6 { border-left-color: var(--spec-6); } .fx-card.s6 .fx-swatch { background: var(--spec-6); }
.fx-card.s7 { border-left-color: var(--spec-7); } .fx-card.s7 .fx-swatch { background: var(--spec-7); }
/* with JS present the cards become a selector: only the chosen one shows */
.explore.fx-js .fx-card { display: none; }
.explore.fx-js .fx-card.is-sel { display: block; }
.fx-hook { margin-top: 14px; }
/* ── courses ────────────────────────────────────────────────────────────── */
.course-block { margin: 26px 0; }
.course-block > h2 { font-family: var(--serif); font-size: 1.5rem; }
.course-sec { border: 1px solid var(--line); border-radius: var(--radius);
background: var(--panel); margin: 10px 0; padding: 0; }
.course-sec > summary { cursor: pointer; padding: 12px 16px; list-style-position: outside; }
.course-sec > summary h3 { display: inline; margin: 0; font-size: 1.02rem; }
.course-sec[open] > summary { border-bottom: 1px solid var(--line); }
.course-sec > p, .course-sec > ul { padding: 4px 18px 12px; margin: 6px 0; }
.course-topics li { margin: 8px 0; }
/* ── products ───────────────────────────────────────────────────────────── */
.prod-card p { margin: 6px 0; }
.prod-featured { border-left: 4px solid var(--accent); }
.prod-cat { margin: 22px 0; }
.prod-cat-h { border-left: 4px solid var(--line); padding-left: 12px; font-family: var(--serif); }
.prod-cat-h.s1 { border-left-color: var(--spec-1); } .prod-cat-h.s2 { border-left-color: var(--spec-2); }
.prod-cat-h.s3 { border-left-color: var(--spec-3); } .prod-cat-h.s4 { border-left-color: var(--spec-4); }
.prod-cat-h.s5 { border-left-color: var(--spec-5); } .prod-cat-h.s6 { border-left-color: var(--spec-6); }
.prod-cat-h.s7 { border-left-color: var(--spec-7); }
.prod-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.prod-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 8px 12px; border-bottom: 1px solid var(--line); }
.prod-name { color: var(--ink-soft); }
/* ── the practice-studio stepper ────────────────────────────────────────── */
.ps-step { border: 1px solid var(--line); border-radius: var(--radius);
background: var(--panel); box-shadow: var(--shadow); padding: 16px 20px; margin: 14px 0; }
.ps-step h2 { display: flex; align-items: center; gap: 12px; margin-top: 0; }
.ps-shell.ps-js .ps-step { display: none; }
.ps-shell.ps-js .ps-step.is-here { display: block; }
.ps-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 14px 0; }
.ps-count { color: var(--ink-faint); font-size: .9rem; }
/* ── THE PRISM PASS (2026-08-31) ─────────────────── LC_MARK_PRISM_PASS ──
The operator asked for more contrast and vibrance that carries the rainbow
nature of the work. The answer is LIGHT, not paint: a vivid spectral register
(--v1..--v7, tuned per scheme) that appears where light would — the prism
ribbon under the header, the hero's chromatic glow and gradient word, the
lit fingertips of the explorer, and the colour ticks on rules, paths, steps
and category headings. Cards, type and whitespace stay calm around it. */
:root {
--v1: #e03a26; /* red */
--v2: #f07f16; /* orange */
--v3: #dfae06; /* gold */
--v4: #1ba55c; /* green */
--v5: #0798c4; /* turquoise */
--v6: #4d5fe3; /* indigo */
--v7: #8b46d6; /* violet */
--prism: linear-gradient(90deg, var(--v1), var(--v2), var(--v3), var(--v4), var(--v5), var(--v6), var(--v7));
}
/* LC_MARK_THEME_TOGGLE: light is the default everywhere; dark only when chosen, or when
the person chose Auto and the device is dark (lc-theme.js sets data-theme). */
:root[data-theme="dark"] {
--v1: #ff6a55; --v2: #ffa04d; --v3: #f2cd4d; --v4: #4bd08a;
--v5: #3fc6e0; --v6: #8b9bff; --v7: #bb8bf2;
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--v1: #ff6a55; --v2: #ffa04d; --v3: #f2cd4d; --v4: #4bd08a;
--v5: #3fc6e0; --v6: #8b9bff; --v7: #bb8bf2;
}
}
/* the prism ribbon — a line of divided light under the header, on every page */
.top { border-bottom: 0; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: var(--prism); }
/* the hero: one gradient word, and a glow that is actually chromatic */
.prism-word { background: var(--prism); -webkit-background-clip: text; background-clip: text;
color: transparent; }
.hero-glow {
background: radial-gradient(55% 75% at 18% 15%, color-mix(in srgb, var(--v5) 26%, transparent), transparent 70%),
radial-gradient(45% 65% at 52% 0%, color-mix(in srgb, var(--v3) 20%, transparent), transparent 70%),
radial-gradient(50% 70% at 84% 12%, color-mix(in srgb, var(--v7) 24%, transparent), transparent 70%);
filter: blur(10px);
}
.video-ph-play { border-color: var(--v5); }
.video-ph-play::after { border-left-color: var(--v5); }
/* section rules pick up the vivid register, with a longer tick */
.rule::before { width: 64px; }
.rule.s1 { --tick: var(--v1); } .rule.s2 { --tick: var(--v2); }
.rule.s3 { --tick: var(--v3); } .rule.s4 { --tick: var(--v4); }
.rule.s5 { --tick: var(--v5); } .rule.s6 { --tick: var(--v6); }
.rule.s7 { --tick: var(--v7); }
/* ── "Three ways in" — proper path cards (replaces the broken doorway reuse) ── */
.paths { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.path-card { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--tick, var(--accent));
border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px;
display: flex; flex-direction: column; gap: 8px; }
.path-card.s2 { --tick: var(--v2); } .path-card.s5 { --tick: var(--v5); } .path-card.s7 { --tick: var(--v7); }
.path-eyebrow { margin: 0; font-variant-caps: all-small-caps; letter-spacing: .08em;
font-size: 14px; color: var(--tick, var(--ink-soft)); font-weight: 600; }
.path-card h2 { margin: 0; font-family: var(--serif); font-size: 22px; }
.path-card p { margin: 0; color: var(--ink-soft); }
.path-card .go { margin-top: auto; font-weight: 600; }
/* ── instrument teaser cards are links now ──────────────────────────────── */
.prod-link { display: block; color: inherit; text-decoration: none;
border-top: 4px solid var(--tick, var(--line));
transition: transform .15s ease, box-shadow .15s ease; }
.prod-link.s1 { --tick: var(--v1); } .prod-link.s5 { --tick: var(--v5); } .prod-link.s7 { --tick: var(--v7); }
.prod-link:hover { transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(23,32,42,.06), 0 12px 28px rgba(23,32,42,.12); color: inherit; }
.prod-link h3 { margin-top: 0; }
.prod-link .fine { color: var(--accent-ink); font-weight: 600; }
/* the catalogue rows link out; give them room so text and rules stop touching */
.prod-list li { padding: 10px 14px; gap: 16px; }
.prod-list .prod-name { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.prod-list .prod-name:hover { color: var(--accent-ink); }
.prod-cat { margin: 30px 0; }
.prod-cat-h { padding: 2px 0 2px 14px; margin-bottom: 10px; }
.prod-cat-h.s1 { border-left-color: var(--v1); } .prod-cat-h.s2 { border-left-color: var(--v2); }
.prod-cat-h.s3 { border-left-color: var(--v3); } .prod-cat-h.s4 { border-left-color: var(--v4); }
.prod-cat-h.s5 { border-left-color: var(--v5); } .prod-cat-h.s6 { border-left-color: var(--v6); }
.prod-cat-h.s7 { border-left-color: var(--v7); }
/* ── the explorer wears its own subject: fingertips lit in meridian colour ── */
.fx-finger[data-finger="thumb"] .fx-tip { fill: var(--v1); opacity: 1; }
.fx-finger[data-finger="index"] .fx-tip { fill: var(--v2); opacity: 1; }
.fx-finger[data-finger="middle"] .fx-tip { fill: var(--v4); opacity: 1; }
.fx-finger[data-finger="ring"] .fx-tip { fill: var(--v6); opacity: 1; }
.fx-finger[data-finger="little"] .fx-tip { fill: var(--v7); opacity: 1; }
.mx-thumb { stroke: var(--v1); } .mx-index { stroke: var(--v2); }
.mx-middle { stroke: var(--v4); } .mx-ring { stroke: var(--v6); }
.mx-little { stroke: var(--v7); }
.mx-line { stroke-width: 3.5; }
.fx-card.s1 { border-left-color: var(--v1); } .fx-card.s1 .fx-swatch { background: var(--v1); }
.fx-card.s2 { border-left-color: var(--v2); } .fx-card.s2 .fx-swatch { background: var(--v2); }
.fx-card.s4 { border-left-color: var(--v4); } .fx-card.s4 .fx-swatch { background: var(--v4); }
.fx-card.s6 { border-left-color: var(--v6); } .fx-card.s6 .fx-swatch { background: var(--v6); }
.fx-card.s7 { border-left-color: var(--v7); } .fx-card.s7 .fx-swatch { background: var(--v7); }
.fx-btn.is-sel { border-color: currentColor; }
.fx-btn[data-finger="thumb"].is-sel { color: var(--v1); }
.fx-btn[data-finger="index"].is-sel { color: var(--v2); }
.fx-btn[data-finger="middle"].is-sel { color: var(--v4); }
.fx-btn[data-finger="ring"].is-sel { color: var(--v6); }
.fx-btn[data-finger="little"].is-sel { color: var(--v7); }
/* the training path steps take the vivid register too */
.flow-step.s1 { --tick: var(--v1); } .flow-step.s2 { --tick: var(--v2); }
.flow-step.s3 { --tick: var(--v3); } .flow-step.s4 { --tick: var(--v4); }
.flow-step.s5 { --tick: var(--v5); } .flow-step.s6 { --tick: var(--v6); }
.flow-step.s7 { --tick: var(--v7); }
.flow-step::before { width: 4px; }
.flow-step p { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
.prod-link { transition: none; }
.mx-line { transition: none; }
}
/* a selected finger lights in its own meridian colour, not the generic accent */
.fx-finger[data-finger="thumb"].is-sel .fx-seg { stroke: var(--v1); }
.fx-finger[data-finger="index"].is-sel .fx-seg { stroke: var(--v2); }
.fx-finger[data-finger="middle"].is-sel .fx-seg { stroke: var(--v4); }
.fx-finger[data-finger="ring"].is-sel .fx-seg { stroke: var(--v6); }
.fx-finger[data-finger="little"].is-sel .fx-seg { stroke: var(--v7); }
/* ── EXPLORER DEPTH PASS ────────────────────────── LC_MARK_EXPLORER_DEPTH ──
The figure stands inside three faint fields — body, soul, spirit — the
meridian draws itself when chosen, and the chosen fingertip breathes. */
.fx-fields ellipse { fill: none; stroke: var(--ink-faint); stroke-width: 1; opacity: .28; }
.fx-fields ellipse:nth-child(2) { stroke-dasharray: 5 5; opacity: .22; }
.fx-fields ellipse:nth-child(3) { stroke-dasharray: 2 6; opacity: .18; }
.fx-field-label { fill: var(--ink-faint); font-size: 12px; font-style: italic;
font-family: var(--serif); }
.fx-halo { fill: none; opacity: 0; }
.fx-finger.is-sel .fx-halo { opacity: .35; }
.fx-finger[data-finger="thumb"].is-sel .fx-halo { fill: var(--v1); }
.fx-finger[data-finger="index"].is-sel .fx-halo { fill: var(--v2); }
.fx-finger[data-finger="middle"].is-sel .fx-halo { fill: var(--v4); }
.fx-finger[data-finger="ring"].is-sel .fx-halo { fill: var(--v6); }
.fx-finger[data-finger="little"].is-sel .fx-halo { fill: var(--v7); }
@keyframes fx-breathe { 0%, 100% { opacity: .2; } 50% { opacity: .45; } }
.fx-finger.is-sel .fx-halo { animation: fx-breathe 2.6s ease-in-out infinite; }
/* the chosen meridian draws itself along its course */
.mx-line { stroke-dasharray: 620; stroke-dashoffset: 620; }
.explore[data-sel="thumb"] .mx-thumb, .explore[data-sel="index"] .mx-index,
.explore[data-sel="middle"] .mx-middle, .explore[data-sel="ring"] .mx-ring,
.explore[data-sel="little"] .mx-little {
stroke-dashoffset: 0;
transition: stroke-dashoffset .9s ease-out, opacity .2s ease;
}
/* the card teaches three levels */
.fx-levels { margin: 0; display: grid; gap: 8px; }
.fx-level { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.fx-level dt { font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 600;
color: var(--ink-soft); }
.fx-level dd { margin: 0; color: var(--ink-soft); }
.fx-level:first-child dd { color: var(--ink); }
@media (max-width: 560px) { .fx-level { grid-template-columns: 1fr; gap: 2px; } }
/* ── LC_MARK_LUMINOUS_ATLAS: the cited Esogetic finger-testing notes, set apart from the
classical body/soul/spirit reading above them ── */
.fx-atlas-label { margin: 14px 0 6px; padding-top: 12px; border-top: 1px dashed var(--line);
font-size: 13px; color: var(--ink-soft); font-style: italic; }
.fx-atlas .fx-level { grid-template-columns: 108px 1fr; }
@media (max-width: 560px) { .fx-atlas .fx-level { grid-template-columns: 1fr; gap: 2px; } }
/* the body–soul–spirit section reuses the path cards; serif titles a touch larger */
.level-card h2 { font-size: 20px; }
@media (prefers-reduced-motion: reduce) {
.fx-finger.is-sel .fx-halo { animation: none; opacity: .35; }
.mx-line { stroke-dasharray: none; stroke-dashoffset: 0; transition: opacity .2s ease !important; }
}
.fx-field-label { text-anchor: end; }
/* ── GENERATED SITE ART ─────────────────────────── LC_MARK_PUBLIC_ART ──
Self-hosted stills from the studio's own ComfyUI (CSP img-src stays 'self').
The video panel wears its poster until the real recording exists. */
.video-ph.has-bg { position: relative; overflow: hidden; min-height: 260px;
justify-content: flex-end; padding: 0; border: 0; }
.video-ph-bg { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; }
.video-ph.has-bg::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10, 14, 18, .82) 0%, rgba(10, 14, 18, .25) 38%, transparent 60%); }
.video-ph.has-bg .video-ph-play, .video-ph.has-bg .video-ph-label, .video-ph.has-bg .fine {
position: relative; z-index: 1; }
.video-ph.has-bg .video-ph-play { border-color: #fff; opacity: .95; margin-bottom: 4px; }
.video-ph.has-bg .video-ph-play::after { border-left-color: #fff; }
.video-ph.has-bg .video-ph-label { color: #fff; }
.video-ph.has-bg .fine { color: rgba(255, 255, 255, .75); margin-bottom: 16px; }
.art-fig { margin: 0 0 20px; }
.art-fig img { display: block; width: 100%; height: auto; max-height: 420px;
object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
/* ── THE HAND IN 3D ─────────────────────────────── LC_MARK_HAND3D ── */
.fx3d { margin: 12px 0; }
.fx3d-canvas { display: block; width: 100%; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--panel); cursor: grab; }
.fx3d-canvas:active { cursor: grabbing; }
.fx3d-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
/* the 3D call-to-action earns its visibility; the loop is the no-WebGL stand-in */
.fx3d-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 16px;
padding: 12px 22px; }
.fx3d-badge { display: inline-grid; place-items: center; width: 30px; height: 30px;
border-radius: 7px; background: var(--prism); color: #fff; font-size: 12px;
font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.fx3d-loop { display: block; width: 100%; max-width: 560px; height: auto;
border-radius: var(--radius); border: 1px solid var(--line); }
.art-fig-loop img { max-width: 480px; max-height: none; object-fit: contain;
margin: 0 auto; background: var(--panel); }
.fx3d-canvas.fx3d-dark { background: #10161c; border-color: #263039; }
/* ── THE SESSION ROOM ───────────────────────────── LC_MARK_SESSION_ROOM ── */
.sr-stage { margin: 30px 0; }
.sr-case { position: relative; max-width: 540px; }
.sr-case-img { display: block; width: 100%; height: auto; }
.sr-spots { position: absolute; inset: 0; }
/* CASE-01 (LC_MARK_SR_ITEM_SELECT): precise per-item selection — a thin outline that stays
INVISIBLE until hover/focus/selection (the tools stay visible), with a fat transparent
hit stroke for touch. Mirrors the EEA bench's calmed-region pattern the practitioner asked
for ("labels hidden until hover … almost fully transparent so you can see the thing"). */
.sr-item-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-item { cursor: pointer; outline: none; }
.sr-item-hit { fill: rgba(0,0,0,0.001); stroke: transparent; stroke-width: 30; pointer-events: all; }
.sr-item-line { fill: transparent; stroke: transparent; stroke-width: 5; pointer-events: none;
transition: stroke .15s ease; }
.sr-item:hover .sr-item-line, .sr-item:focus-visible .sr-item-line { stroke: rgba(255,255,255,.85); }
.sr-item.is-sel .sr-item-line { stroke: var(--accent); stroke-width: 6; }
.sr-meet { display: grid; grid-template-columns: minmax(190px, 250px) 1fr; gap: 12px;
margin-top: 10px; align-items: start; }
.sr-item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
gap: 2px; max-height: 380px; overflow: auto; }
.sr-item-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px;
cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); }
.sr-item-btn:hover { border-color: var(--line); }
.sr-item-btn.is-sel { border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sr-caption-photo { max-width: 100%; max-height: 110px; object-fit: contain; display: block;
margin-top: 8px; }
@media (max-width: 760px) { .sr-meet { grid-template-columns: 1fr; } }
.sr-caption { margin-top: 0; }
.sr-caption h3 { margin: 0 0 6px; }
.sr-caption p { margin: 0; color: var(--ink-soft); }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
cursor: pointer; font: inherit; color: var(--ink); }
.sr-chip-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block;
box-shadow: inset 0 0 3px rgba(0,0,0,.25); }
.sr-chip.is-sel { border-color: var(--ink-soft); font-weight: 600;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.sr-pen { position: relative; max-width: 560px; margin: 14px 0 6px; }
.sr-pen img { display: block; width: 100%; height: auto; }
.sr-pen-glow { position: absolute; left: 1%; top: 50%; width: 30%; aspect-ratio: 1;
transform: translate(-30%, -50%); border-radius: 50%; opacity: 0;
transition: opacity .3s ease; pointer-events: none; }
.sr-pen-glow.is-on { opacity: 1; }
.sr-colour-line { color: var(--ink-soft); min-height: 1.5em; }
.sr-guide { padding-left: 22px; }
.sr-guide li { margin: 8px 0; }
.sr-guide li.done { color: var(--ok); }
.sr-guide li.done::marker { content: '✓ '; }
.sr-live { position: relative; }
.sr-tool-apply .fx3d-canvas { cursor: none; }
.sr-tool-erase .fx3d-canvas { cursor: crosshair; }
.sr-dock { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0 auto;
width: fit-content; z-index: 5; display: flex; align-items: center;
justify-content: center; flex-wrap: wrap;
gap: 10px; padding: 8px 14px; border-radius: 999px; max-width: calc(100% - 20px);
background: color-mix(in srgb, var(--panel) 84%, transparent);
border: 1px solid var(--line); backdrop-filter: blur(6px);
box-shadow: 0 6px 24px rgba(20, 24, 40, 0.14); }
.sr-dock-sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--line); }
.sr-toolbar, .sr-instrs { display: flex; gap: 5px; }
.sr-instr { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
cursor: pointer; }
.sr-instr[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink);
background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.sr-tool[disabled] { opacity: 0.35; cursor: default; }
.sr-dot-btn.is-off { opacity: 0.3; filter: saturate(0.4); }
.sr-read { position: absolute; top: 10px; left: 10px; z-index: 5; margin: 0;
max-width: min(420px, calc(100% - 130px)); font-size: 13px; line-height: 1.45;
padding: 8px 13px; border-radius: 12px; color: var(--ink);
background: color-mix(in srgb, var(--panel) 88%, transparent);
border: 1px solid var(--line); backdrop-filter: blur(6px); }
.sr-palette { display: flex; gap: 9px; align-items: center; }
.sr-dot-btn { width: 21px; height: 21px; border-radius: 50%; border: 0; padding: 0;
cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.sr-dot-btn:hover { transform: scale(1.3); }
.sr-dot-btn.is-sel { transform: scale(1.22); outline: 2px solid var(--panel);
outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .sr-dot-btn { transition: none; } }
.sr-tool { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
cursor: pointer; }
.sr-tool[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink);
background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.sr-follow { position: absolute; left: 0; top: 0; width: 190px; height: auto;
transform-origin: 0 0; pointer-events: none; opacity: 0; z-index: 3; }
.sr-follow-glow { position: absolute; left: 0; top: 0; width: 30px; height: 30px;
border-radius: 50%; pointer-events: none; opacity: 0; z-index: 2; filter: blur(1px);
mix-blend-mode: screen; }
.sr-follow.is-on, .sr-follow-glow.is-on { opacity: 1; }
.sr-strip { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sr-strip img { display: block; width: 100%; max-width: 560px; height: auto; }
.fx3d { position: relative; }
.fx3d-nav { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
z-index: 5; display: grid; grid-template-columns: repeat(2, 30px); gap: 6px; justify-items: center; }
.fx3d-nav button { width: 30px; height: 30px; border-radius: 50%; font: inherit;
font-size: 16px; line-height: 1; padding: 0; border: 1px solid var(--line);
background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--ink-soft);
cursor: pointer; backdrop-filter: blur(6px); }
.fx3d-nav button:hover { border-color: var(--accent); color: var(--accent-ink); }
.fx3d-spin { position: absolute; top: 10px; right: 10px; z-index: 4; font: inherit;
font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
background: var(--panel); color: var(--ink-soft); cursor: pointer; }
.fx3d-spin[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
/* ── THE TREATMENT STUDIO ───────────────────────── LC_MARK_DEMO_STUDIO ── */
.demo-list .demo-row { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.demo-row .fine { display: block; }
.demo-row.is-locked { color: var(--ink-faint); }
.demo-shell { display: grid; grid-template-columns: minmax(320px, 3fr) minmax(260px, 2fr);
gap: 20px; align-items: start; }
@media (max-width: 860px) { .demo-shell { grid-template-columns: 1fr; } }
.demo-steps { list-style: none; margin: 0; padding: 0; }
.demo-step { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
border-radius: var(--radius); margin-bottom: 8px; background: var(--panel); cursor: pointer; }
.demo-step p { margin: 4px 0 0; }
.demo-step-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px;
box-shadow: inset 0 0 3px rgba(0,0,0,.3); }
.demo-step.is-here { border-color: var(--accent); box-shadow: 0 0 0 2px
color-mix(in srgb, var(--accent) 25%, transparent); }
.demo-step.is-done { opacity: .75; }
.demo-step.is-done strong::after { content: ' ✓'; color: var(--ok); }
.da-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
font: inherit; font-size: 14px; padding: 7px 10px; margin: 4px 0; cursor: pointer;
border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.da-row.is-sel { border-color: var(--accent); box-shadow: 0 0 0 2px
color-mix(in srgb, var(--accent) 25%, transparent); }
.demo-author select, .demo-author input[type="text"], .demo-author input:not([type]) {
font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
background: var(--panel); color: var(--ink); }
/* ── the point registry ─────────────────────────── LC_MARK_POINT_REGISTRY ── */
.tablewrap { overflow-x: auto; }
.pt-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.pt-table th, .pt-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pt-row.is-sel td, .zn-row.is-sel td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pt-filter input[type="search"] { font: inherit; font-size: 14px; padding: 6px 12px;
border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
color: var(--ink); min-width: 230px; }
.pt-group td { padding: 0; border-bottom: 1px solid var(--line); }
.pt-group-btn { display: block; width: 100%; text-align: left; font: inherit;
font-weight: 600; padding: 8px 12px; border: 0; background:
color-mix(in srgb, var(--accent) 5%, transparent); color: var(--ink); cursor: pointer; }
.pt-group-btn::before { content: '▸ '; color: var(--ink-soft); }
.pt-group-btn[aria-expanded="true"]::before { content: '▾ '; }
#zn-actions { display: inline-flex; gap: 5px; align-items: center; }
.pt-table form.inline { display: inline; margin-left: 6px; }
.tag.ok { color: var(--ok); border-color: var(--ok); }
.da-hit { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; background: var(--panel); }
.da-hit p { margin: 4px 0 0; }
.da-hit mark { background: color-mix(in srgb, var(--v3) 35%, transparent); color: inherit; border-radius: 3px; }
#da-q { min-width: 220px; }
.fx3d-layer[aria-pressed="true"] { border-color: var(--v1); color: var(--v1); }
/* ── EEA: the manual findings lane ─────────────── LC_MARK_EEA_PHEN_MANUAL ── */
.eea-phen-add-kind { font: inherit; font-size: 13px; padding: 4px 8px; max-width: 220px;
border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
#eea-phen-add-mode[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink);
background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.eea-phen-g:not(.eea-phen-done) { cursor: grab; }
/* while the stamp is armed the icon-cursor rules the whole plate — pins included */
.eea-stamp-armed .eea-pc-marker, .eea-stamp-armed .eea-phen-layer,
.eea-stamp-armed img, .eea-stamp-armed canvas { cursor: inherit !important; }
.eea-phen-overlap { color: #8a5a00; background: color-mix(in srgb, #e08a00 12%, transparent);
padding: 4px 8px; border-radius: 8px; }
/* ── library source workspace — LC_MARK_LIBRARY_SOURCES ─────────────────── */
.lib-inspect { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
@media (max-width: 900px) { .lib-inspect { grid-template-columns: 1fr; } }
.lib-inspect-orig img { max-width: 100%; border: 1px solid var(--line, #ccc); border-radius: 4px; }
.lib-inspect-text { max-height: 640px; overflow-y: auto; padding-right: .4rem; }
.inline-form { display: inline; }
/* ── finger instrument: the finding panel's choice group ────────────────── */
.ft-choice { display: flex; flex-direction: column; gap: .4rem; margin: .55rem 0 .7rem; }
.ft-choice .ft-opt { display: flex; flex-direction: row; align-items: center; gap: .6rem;
padding: .5rem .65rem; border: 1px solid #d8d4cc; border-radius: 8px; cursor: pointer;
font-weight: 500; }
.ft-choice .ft-opt input[type="radio"] { margin: 0; flex: none; width: 1rem; height: 1rem; }
.ft-choice .ft-opt:hover { border-color: #9db4b7; }
.ft-choice .ft-opt:has(input:checked) { border-color: #1b4f56; background: rgba(27, 79, 86, .07); }
/* ── Learn the manuals — LC_MARK_LEARN_SURFACE ──────────────────────────── */
.learn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .learn-grid { grid-template-columns: 1fr; } }
.learn-bookbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.learn-find { display: flex; gap: .3rem; margin-left: auto; }
.learn-find input { max-width: 190px; }
/* 2026-09-19 (Chris: "it only shows half the page") — .learn-page and .learn-words each had a
second rule below capping them at 78vh with overflow-y:auto, REGARDLESS of mode. In "the
page" alone or "the words" alone (no sibling to keep in view beside it), that just hides
the rest of a normal-length page inside a scroll area nothing signals exists. The height
cap is only for .learn-spread ("both" mode, image and text side by side, where matching
heights keeps them both on screen) — it already has its own rule below and stays. */
.learn-page { margin: 0 0 1rem; }
.learn-page-img { width: 100%; border: 1px solid #d8d4cc; border-radius: 6px; background: #fff; }
.learn-words { max-width: 68ch; padding-right: .5rem; }
.learn-right .card { margin-bottom: 1rem; }
.learn-pages { max-height: 300px; overflow-y: auto; }
.ask-turn { border-left: 3px solid #d8d4cc; padding-left: .7rem; margin-bottom: .9rem; }
.ask-q { margin: .2rem 0 .3rem; }
/* ── the case consult deck — LC_MARK_CONSULT_DECK ───────────────────────── */
.consult-doc { max-width: 880px; margin: 0 auto; background: #fff; padding: 2.2rem 2.6rem;
border: 1px solid #e2ded6; border-radius: 10px; }
.consult-head { border-bottom: 3px solid #1b4f56; padding-bottom: 1rem; margin-bottom: 1.4rem; }
.consult-head h1 { margin: .2rem 0; }
.consult-section { margin: 1.6rem 0; }
.consult-section h2 { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid #e2ded6;
padding-bottom: .3rem; }
.consult-n { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem;
height: 1.7rem; border-radius: 50%; background: #1b4f56; color: #fff; font-size: .95rem; flex: none; }
.consult-table { width: 100%; border-collapse: collapse; margin: .6rem 0; }
.consult-table th, .consult-table td { border: 1px solid #e2ded6; padding: .45rem .6rem;
text-align: left; vertical-align: top; font-size: .95rem; }
.consult-table th { background: #f4f1ea; }
.consult-list { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.consult-list li { margin: .3rem 0; }
.consult-photos { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.consult-photos figure { margin: 0; max-width: 240px; }
.consult-photos img { width: 100%; border-radius: 6px; border: 1px solid #e2ded6; }
.consult-hands { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.consult-hand { flex: 1 1 280px; max-width: 380px; }
.consult-hand svg { width: 100%; height: auto; }
.consult-treatment { border-left: 3px solid #1b4f56; padding: .2rem 0 .2rem .9rem; margin: 1rem 0; }
.consult-foot { border-top: 1px solid #e2ded6; margin-top: 2rem; padding-top: .8rem; }
@media print {
.top, .foot, .consult-noprint, .fb-report { display: none !important; }
.consult-doc { border: none; padding: 0; max-width: none; }
.consult-section { break-inside: avoid; }
.consult-treatment { break-inside: avoid; }
body { background: #fff; }
}
.consult-assist { background: #f4f1ea; border-radius: 8px; padding: 1rem 1.2rem; }
/* LC_MARK_DEV_POSTURE_HOME — governance panels folded under the development posture */
.pilot-governance > summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); padding: .2rem 0; }
.pilot-governance[open] > summary { margin-bottom: .6rem; }
/* LC_MARK_LANDMARKS — the case canvas's cun ruler (sidebar) */
.anatomy-cun > summary { cursor: pointer; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.anatomy-cun select, .anatomy-cun input { font: inherit; font-size: .72rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: .2rem .3rem; max-width: 100%; }
.anatomy-cun select { width: 100%; }
.anatomy-cun .cun-num { width: 4.2em; }
.anatomy-cun button { min-height: 34px; padding: .3rem .6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: transparent; color: rgba(255,255,255,.8); font: inherit; font-size: .68rem; cursor: pointer; margin-top: .4rem; }
.anatomy-cun button:disabled { opacity: .45; cursor: default; }
/* LC_MARK_LANDMARKS — the bench's cun ruler */
#pt-cun .cun-num { width: 4.5em; }
#pt-cun .fx3d-row label.fine { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
/* LC_MARK_ORBIT_AXES — rotation-axis lock inside the 3D nav box */
.fx3d-orbit-modes { display: flex; gap: 2px; margin-top: 6px; }
.fx3d-nav .fx3d-orbit-modes { flex-direction: column; grid-column: 1 / -1; justify-self: stretch; }
.fx3d-nav .fx3d-orbit-modes button { width: 100%; }
.fx3d-nav .fx3d-orbit-modes button { width: auto; height: auto; min-width: 2.9rem; border-radius: 999px; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; padding: .28rem .45rem; line-height: 1; }
.fx3d-orbit-modes button[aria-pressed="true"] { background: var(--accent-ink); color: var(--panel); border-color: var(--accent-ink); }
/* ── LC_MARK_SESSION_AUDIO (095): recording controls and transcripts ─────────────────────── */
.audio-rec { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0 12px; }
.audio-rec .fb-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.audio-rec label { font-size: 14px; color: var(--ink-soft); display: inline-flex; flex-direction: column; gap: 4px; }
.audio-rec select, .audio-rec input[type="date"] { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.audio-rec #audio-timer { font-variant-numeric: tabular-nums; min-width: 3.5em; }
.audio-item audio { width: 100%; max-width: 520px; }
.transcript summary { cursor: pointer; }
.transcript-segments { margin: 8px 0; padding-left: 0; list-style: none; }
.transcript-segments li { padding: 3px 0; border-bottom: 1px dotted var(--line); }
.tx-t { display: inline-block; min-width: 3.6em; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
@media (max-width: 560px) { .audio-rec .fb-row { flex-direction: column; align-items: stretch; } }
.tx-file { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.tx-file textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.tx-file .fb-row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0; }
.tx-file label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.tx-file select, .tx-file input[name=source_note] { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.transcript-segments label { display: flex; gap: 6px; align-items: baseline; cursor: pointer; }
.tx-sort-out { margin: 6px 0; }
.tx-sort-list { margin: 4px 0 0; padding-left: 18px; }
/* Source-study controls share the anatomy rail at desktop and phone widths. */
[data-anatomy-study] label { display: block; margin-bottom: .75rem; }
[data-anatomy-study] select { display: block; width: 100%; max-width: 100%; min-width: 0; }
[data-anatomy-study] p, [data-study-reader] { overflow-wrap: anywhere; }
/* ── LC_MARK_REVIEW_WORKBENCH: the placement review workbench ─────────────────────────────── */
.wb-passage { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 4px; font-size: 15px; }
.wb-support { margin-top: 6px; padding-top: 6px; border-top: 1px dotted var(--line); }
.wb-support .fb-row, .form .fb-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; }
.wb-support label, .wb-support textarea { font-size: 14px; }
.wb-support textarea, .wb-support input[name=rationale] { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.table-wrap { overflow-x: auto; }
/* ── LC_MARK_TREATMENT_REVIEW_STUDIO: sections rail · the record · the page ───────────────── */
.trs-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: .9rem; align-items: start; }
/* .trs-record is a .wb-studio (rail · stage · panel, and the grip) since the corpus studio's step 4; its old two-column rule went with the grip (09-14) */
.trs-rail, .trs-source { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
.trs-rail-block { margin-bottom: .6rem; }
.trs-rail-block > summary { cursor: pointer; padding: 4px 0; }
.trs-tree { list-style: none; margin: 0; padding-left: 0; }
.trs-tree ul { list-style: none; margin: 2px 0 6px 12px; padding: 0; border-left: 2px solid var(--line); }
.trs-rail-link { display: block; padding: 5px 8px; border-radius: 6px; color: var(--ink-soft); text-decoration: none; }
.trs-rail-link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.trs-rail-link.is-current { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); font-weight: 600; }
.trs-row h3 { margin: 0 0 2px; font-size: 1rem; }
.trs-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--sw, transparent); border: 1px solid var(--line); vertical-align: middle; }
.trs-facsimile { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; margin: 6px 0; }
.trs-source-panel > summary { cursor: pointer; }
@media (max-width: 960px) {
.trs-workspace { grid-template-columns: minmax(0, 1fr); }
.trs-rail, .trs-source { position: static; max-height: none; }
.trs-record .trs-source { order: -1; }
.trs-source-panel { position: relative; }
}
.trs-attach { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.trs-attach input { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.trs-code { width: 6.5em; text-transform: uppercase; } .trs-name { width: 11em; }
#draft-stage { max-width: 520px; margin: 8px 0; }
.draft-ok { color: var(--ok); } .draft-miss { color: var(--spec-1); } .draft-sum { font-weight: 600; }
/* ── THE PLACEMENT EXERCISE ───────────────────────── LC_MARK_STUDENT_PATH ── */
.pl-shell { display: grid; grid-template-columns: minmax(320px, 3fr) minmax(280px, 2fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .pl-shell { grid-template-columns: 1fr; } }
.pl-instruction h2 { margin: 2px 0 4px; }
.pl-3d { min-height: 360px; }
.pl-steps .pl-step { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); margin: 6px 0; }
.pl-steps .pl-step.is-here { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.pl-steps .pl-step.is-done { opacity: 0.72; }
.pl-step-state:not(:empty)::before { content: '✓ '; }
.pl-summary { padding: 6px 0 10px; }
.pl-result .pl-cun { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-result.pl-on-point .tag:first-of-type { border-color: #2e7d54; }
.pl-result.pl-missed .tag:first-of-type, .pl-result.pl-off-side .tag:first-of-type { border-color: #b3432b; }
.pl-reflect textarea { width: 100%; }
/* ── THE TEST CASE ─────────────────────────────────── LC_MARK_STUDENT_PATH ── */
.tc-shell { display: grid; grid-template-columns: minmax(320px, 3fr) minmax(300px, 2fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .tc-shell { grid-template-columns: 1fr; } }
.tc-3d { min-height: 320px; }
.tc-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.tc-hands svg { width: 100%; height: auto; }
.tc-hand { margin: 0; }
.tc-plate img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); background: #06060f; }
.tc-candidates { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 10px 0; }
.tc-candidate { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.tc-form textarea, .tc-form input[type="text"], .tc-form input:not([type]) { width: 100%; }
.tc-feedback-text p { margin: 0 0 10px; }
.tc-finding p { margin: 2px 0 0; }
/* ── THE PAGE, INLINE ON THE WORKBENCH ────────────── LC_MARK_INLINE_PAGE ── */
.wb-page { margin: 6px 0 10px; }
.wb-page summary { cursor: pointer; color: var(--accent-ink); font-size: 14px; }
.wb-page[open] summary { margin-bottom: 8px; }
.wb-page-img { display: block; width: 100%; max-width: 760px; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
/* ── A REVIEW FOLD: open until approved, then a one-line summary ── LC_MARK_REVIEW_COLLAPSE ── */
.wb-review-fold { margin: 10px 0; }
.wb-review-fold summary { cursor: pointer; color: var(--accent-ink); font-size: 14px; font-weight: 600; list-style: none; }
.wb-review-fold summary::-webkit-details-marker { display: none; }
.wb-review-fold summary::before { content: '▸ '; }
.wb-review-fold[open] summary::before { content: '▾ '; }
.wb-review-fold form { margin-top: 8px; }
/* ── THE POINT'S EVIDENCE, SUMMARISED ─────────────── LC_MARK_POINT_ASSIST ── */
.pa-card .pa-main { margin: 8px 0 12px; }
.pa-card .pa-main img { max-width: 640px; }
.pa-summary .answer-body p { margin: 0 0 10px; }
.pa-thread { margin: 10px 0; }
.pa-form { margin-top: 10px; }
/* the learn reader's "both": the page beside its words, each its own full-height scroll (2026-09-14, the practitioner) */
.learn-spread { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.learn-spread .learn-page { max-height: 82vh; }
.learn-spread .learn-words { max-width: none; max-height: 82vh; }
@media (max-width: 1200px) { .learn-spread { grid-template-columns: 1fr; } }
/* the cited page as a locus — the claim form under its fold (LC_MARK_PAGE_LOCUS) */
.wb-page-review { margin: 6px 0 14px; padding: 8px 12px; border-left: 3px solid var(--line); }
/* ── THE PAGE IN THE STUDIO (corpus studio step 5) ────────── LC_MARK_CORPUS_STUDIO ── */
.ps-pages { max-height: 46vh; overflow-y: auto; }
.ps-pages li.is-here a { font-weight: 700; }
.ps-stage-page { max-height: none; }
.ps-stage-page img { width: 100%; }
.ps-stage-words { max-width: none; max-height: none; margin-top: .6rem; }
.ps-form label { display: block; margin: .4rem 0; }
.ps-form textarea, .ps-form input[type="text"], .ps-form input:not([type]) { width: 100%; }
.ps-remap { margin-top: .8rem; }
/* ── THE CLIENT STUDIO — a left rail, not the shared .top bar. LC_MARK_CLIENT_IDENTITY
Built to match astra/client-portal-foundation-2026-09-17's design reference (Chris:
"use that and make it looks and feel the same"), using this site's OWN existing tokens
(--ink/--ground/--accent/--line/--radius/--serif) — no new colours, no new font, so it
inherits dark mode for free, which the static prototype never had. */
.client-rail {
position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 20;
background: var(--ground); border-right: 1px solid var(--line);
padding: 28px 16px; display: flex; flex-direction: column; gap: 22px;
overflow-y: auto;
}
.client-rail-brand { text-decoration: none; color: var(--ink); display: block; }
.client-rail-brand strong { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.client-rail-brand span { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
.client-rail-nav { display: flex; flex-direction: column; gap: 2px; }
.client-rail-nav a, .client-rail-nav button {
display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px;
color: var(--ink-soft); text-decoration: none; font: inherit; font-size: 15px;
border: 0; background: none; width: 100%; text-align: left; cursor: pointer;
}
.client-rail-nav svg { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.client-rail-nav a:hover, .client-rail-nav button:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.client-rail-nav a[aria-current="page"] {
background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); font-weight: 600; }
.client-rail-signout-form { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.client-rail-practitioner { margin: 10px 0 0; padding: 14px 10px 0; border-top: 1px solid var(--line);
display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.client-rail-practitioner svg { flex: none; width: 20px; height: 20px; stroke: currentColor; fill: none;
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.client-rail-practitioner strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
body.client-shell main.wrap { margin-left: 260px; max-width: 780px; padding: 48px 32px 64px; }
body.client-shell .foot { margin-left: 260px; }
@media (max-width: 880px) {
.client-rail { position: static; width: 100%; flex-direction: row; flex-wrap: wrap;
align-items: center; padding: 16px; gap: 8px 4px; border-right: 0; border-bottom: 1px solid var(--line); }
.client-rail-brand { width: 100%; margin-bottom: 4px; }
.client-rail-nav { flex-direction: row; flex-wrap: wrap; width: 100%; gap: 0; }
.client-rail-nav a, .client-rail-nav button { width: auto; padding: 8px 10px; font-size: 14px; }
.client-rail-nav svg { display: none; }
.client-rail-signout-form { border-top: 0; padding-top: 0; margin: 0; }
.client-rail-practitioner { border-top: 0; padding: 6px 10px; margin: 0; }
body.client-shell main.wrap { margin-left: 0; max-width: 100%; padding: 28px 20px 48px; }
body.client-shell .foot { margin-left: 0; }
.client-utility { margin-bottom: 20px; gap: 12px; }
.client-utility > span { font-size: 15px; }
}
/* 🔴 found live 2026-09-17 (Chris, screenshot comparison against the astra prototype): every
card title here rendered in the site's plain working-voice sans, never the serif this
stylesheet's own header says is "the public voice" — the prototype sets h1,h2,h3 to serif
GLOBALLY, and the client portal never opted in. This was the single biggest visible tell
that it wasn't matching the reference. Scoped to .client-shell only — practitioner/admin
pages keep their working sans on purpose. */
body.client-shell h1, body.client-shell h2, body.client-shell h3 {
font-family: var(--serif); font-weight: 500; }
/* matches the prototype's own .text-button exactly — an always-available "go there anyway"
link under an empty-state card, not gated on there being anything to show yet */
.text-button { background: none; border: 0; padding: 5px 0; color: var(--accent-ink);
text-decoration: underline; text-underline-offset: 4px; font: inherit; font-size: 14px; cursor: pointer; }
.text-button:hover { color: var(--accent); }
/* the primary-action card: a left accent border, exactly like the design reference's
"Your first visit" card */
.client-hero-card { border-left: 3px solid var(--accent); }
.client-card-muted { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.client-kicker { color: var(--ink-faint); font-size: 14px; margin: 0 0 6px; }
/* LC_MARK_CLIENT_IDENTITY (125) — the astra reference's own .home-grid is an uneven 1.63fr/1fr
(the "Shared with you" panel reads wider than "Home practice"), not an even split. */
.client-two-col { display: grid; grid-template-columns: 1.63fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 700px) { .client-two-col { grid-template-columns: 1fr; } }
/* a persistent header on every client page — matches the reference's static , present outside its #screen and identical on every view */
.client-utility { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 24px; }
.client-utility > span { font-family: var(--serif); font-size: 18px; color: var(--ink-faint); }
.hero-cta-row .btn svg, .btnrow .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 6px; }
.client-empty { text-align: center; padding: 24px 12px; color: var(--ink-faint); }
.client-empty svg { width: 30px; height: 30px; stroke: var(--ink-faint); fill: none;
stroke-width: 1.4; margin-bottom: 10px; }
.hero-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hero-cta-row > p:first-child { flex: 1; min-width: 220px; margin: 0; }
.hero-cta-row > div, .hero-cta-row > a.btn { text-align: right; flex: none; }
.hero-cta-row .fine { margin: 6px 0 0; text-align: center; }
/* ── the step-by-step intake wizard — matches the design reference's step-list + progress-bar
layout (docs/client-portal-2026-09-17). The step list is ALWAYS all eight, always clickable —
"you can return to any section" is a build-spec requirement, not a progressive-disclosure UI. */
.intake-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
@media (max-width: 700px) { .intake-layout { grid-template-columns: 1fr; } }
.intake-steps { display: flex; flex-direction: column; gap: 2px; background: var(--panel);
border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; position: sticky; top: 16px; }
@media (max-width: 700px) { .intake-steps { position: static; flex-direction: row; flex-wrap: wrap; } }
.intake-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
text-decoration: none; color: var(--ink); font-size: 14px; }
.intake-step:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.intake-step.is-current { background: var(--accent); color: #fff; }
.intake-step-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
background: color-mix(in srgb, var(--ink) 8%, transparent); }
.intake-step.is-current .intake-step-num { background: rgba(255,255,255,.25); color: #fff; }
.intake-step.is-done .intake-step-num { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); }
.intake-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.intake-progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin: 0 0 18px; }
.intake-progress > span { display: block; height: 100%; background: var(--accent); }
/* 🔴 found live (122): style="width:N%" is an inline style attribute — style-src 'self' makes
the browser silently ignore it, so the bar always read empty. Width lives in a class per step
position here, same fix this stylesheet already applied once for .progress-bar. */
.intake-progress-step-1 { width: 0%; }
.intake-progress-step-2 { width: 14.29%; }
.intake-progress-step-3 { width: 28.57%; }
.intake-progress-step-4 { width: 42.86%; }
.intake-progress-step-5 { width: 57.14%; }
.intake-progress-step-6 { width: 71.43%; }
.intake-progress-step-7 { width: 85.71%; }
.intake-progress-step-8 { width: 100%; }
.intake-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px;
flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.intake-footer .fine { margin: 0; flex: 1; text-align: center; min-width: 140px; }
.intake-review-section { margin: 0 0 20px; }
.intake-review-section h3 { font-family: var(--serif); font-size: 16px; margin: 0 0 8px; }
.intake-review-section dl { margin: 0; display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 6px 16px; }
.intake-review-section dt { color: var(--ink-faint); font-size: 13px; }
.intake-review-section dd { margin: 0; }
@media (max-width: 560px) { .intake-review-section dl { grid-template-columns: 1fr; } .intake-review-section dt { margin-top: 6px; } }
/* ── AI-assisted intake (122): what the assistant filled in stays visibly provisional until
the client sees the step it's on — never a silent, confident-looking answer. --warm is this
stylesheet's own "awaiting" token, never used for danger; a word ("needs a look") always
carries the meaning too, colour is reinforcement only. */
.intake-step.is-flagged { background: color-mix(in srgb, var(--warm) 10%, transparent); }
.intake-step.is-flagged .intake-step-num { background: color-mix(in srgb, var(--warm) 22%, transparent); color: var(--warm); font-weight: 700; }
.intake-step-label .fine { display: block; color: var(--warm); margin-top: 1px; }
.notice.needs-review-notice { border-left: 4px solid var(--warm); background: color-mix(in srgb, var(--warm) 7%, var(--panel)); }
.field-review { border-left: 3px solid var(--warm); padding-left: 12px; margin-left: -15px; }
.review-note { margin: -2px 0 6px; color: var(--warm); }
/* ── field grid + per-field head row (matches the astra prototype's own .fields/.field-head/
.input-tools structure exactly) — a two-column grid, a textarea field spans both columns,
the label and a "🎤 Speak" trigger share one row instead of the trigger sitting in its own
full-width block below. */
.intake-card .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 20px; }
.intake-card .field { min-width: 0; }
.intake-card .field.wide { grid-column: 1 / -1; }
.intake-card .field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intake-card .field-head label { margin: 0; }
.intake-card .input-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 700px) { .intake-card .fields { grid-template-columns: 1fr; } }
.voice-trigger { white-space: nowrap; flex: none; }
.hint { font-size: 13px; color: var(--ink-faint); margin: 5px 0 0; }
/* ── consent purposes (matches the astra prototype's own .choice/.choices structure) — the
client-grantable ones get the existing Agree/Withdraw form; the practitioner-attested ones
(122: PRACTITIONER_SCOPES) render identically but with no button at all — a fake button that
would 409 on press is worse than an honest status line. */
.choice { border-bottom: 1px solid var(--line); padding: 20px 0; }
.choice:first-child { padding-top: 0; }
.choice:last-child { border-bottom: 0; }
.choice h3 { font-size: 17px; margin: 0 0 6px; }
.choice p { margin: 0 0 8px; }
.intake-choices-step .intake-footer { margin-top: 22px; }
/* LC_MARK_TREATMENT_SCENE — the record on the shared 3D model (views-treat-review.js canvas3d) */
.trs-3d { margin-bottom: .8rem; }
/* the viewport IS the box: the adapter appends its 'Save reference still' bar right after it, so it must not sit inside a clipping parent */
.anatomy-viewport.trs-3d-stage { position: relative; inset: auto; height: min(64vh, 540px); min-height: 320px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.trs-3d-side { align-items: center; }
.trs-3d-side .btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft, transparent); }
.trs-3d-layers { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .4rem 0; }
/* LC_MARK_EEA_MOVE_ON / LC_MARK_CASE_BENCH_LINK — the bench's way onward, and the case navigation's way back to it */
.practitioner-case-links .practitioner-case-link-bench strong { color: var(--accent); }
.practitioner-case-links .practitioner-case-link-bench[aria-current="page"] { background: var(--panel); }
.eea-moveon-plates { margin: 0 0 .5rem; padding-left: 1.1rem; }
.eea-moveon-plates .is-here { font-weight: 600; }
.eea-moveon .btnrow { margin: .5rem 0; }
/* LC_MARK_PLAN_BASIS — the Sources chooser on the Plan tab (views-visit-plan.js sourcesCard) */
.plan-sources-form { display: grid; gap: .6rem; }
.plan-sources-group { border: 1px solid var(--line); border-radius: 10px; padding: .3rem .8rem .5rem; margin: 0; min-width: 0; }
.plan-sources-group legend { padding: 0 .35rem; font-size: .8rem; font-weight: 600; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }
.plan-source { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; cursor: pointer; }
.plan-source input { margin-top: .3rem; flex: none; }
.plan-sources-note { display: grid; gap: .25rem; }
.plan-sources-note input { width: 100%; }
.plan-sources-form .btn { justify-self: start; }
/* LC_MARK_EEA_FINGER_VIEW — the EEA plate and fingertip testing side by side (views-visit-plan.js sideBySideCard); stacked blocks, not a table: it lives in a narrow rail */
.plan-digits { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.plan-digit { border-top: 1px solid var(--line); padding: .55rem 0; }
.plan-digit-head { font-size: .95rem; }
.plan-digit-no { display: inline-block; min-width: 1.6rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.plan-digit-line { margin: .12rem 0 0 1.6rem; font-size: .84rem; color: var(--ink-soft, var(--ink)); }
.plan-digit-src { color: var(--ink-faint); font-size: .75rem; letter-spacing: .02em; margin-right: .3rem; }
.plan-digit-status { margin: .2rem 0 0 1.6rem; }
.plan-digit-notes { margin: .2rem 0 0 1.6rem; }
.plan-digit-notes summary { cursor: pointer; }
.plan-digit-quotes { margin: .2rem 0 0 1rem; padding-left: .6rem; }
/* LC_MARK_REACTION_TEST — a role per chosen plate on the plan basis, and the control-picture line on a reaction test */
.plan-source-main { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; }
.plan-source-main input { margin-top: .3rem; flex: none; }
.plan-source-roles { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin: .1rem 0 .2rem 1.55rem; }
.plan-source-roles label { display: inline-flex; gap: .3rem; align-items: center; cursor: pointer; }
.control-picture { margin: .35rem 0 0; padding: .5rem .7rem; border-left: 3px solid var(--line); }
.plan-source { display: block; cursor: auto; }
.plan-source-roles { margin-left: 1.55rem; }
/* LC_MARK_PLATE_UNDERSTANDING — the digit table must fit the card: fixed layout, the digit column a third, findings wrap (a clipped POST column was found live) */
.plate-digits { table-layout: fixed; width: 100%; }
.plate-digits th:first-child { width: 32%; }
.plate-digits td, .plate-digits th { vertical-align: top; overflow-wrap: anywhere; }
.plate-digit-teaching { margin-top: .15rem; }
.plate-event.is-here { border-left: 3px solid var(--accent, currentColor); padding-left: .5rem; }
.plate-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.plate-pic { margin: 0; }
.plate-pic img { width: 100%; height: auto; max-height: 560px; object-fit: contain; background: var(--line); border-radius: 6px; display: block; }
.plate-pic figcaption { margin-top: .3rem; }
/* LC_MARK_CLAIMS — the cited-claims review area. Colour only ever carries a word beside it (state, tier); ok / warm / lock / red stay the app's own tokens. */
.claims-list { list-style: none; padding: 0; margin: 0; }
.claim-line { border-top: 1px solid var(--line); padding: .8rem 0; }
.claim-line p { margin: .35rem 0; }
.claim-line .fine { color: var(--ink-faint); }
.badge, .flag, .chip, .site { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; border: 1px solid var(--line); text-decoration: none; line-height: 1.6; }
.badge.ok, .chip.ok { border-color: var(--ok); color: var(--ok); }
.badge.mid, .chip.mid { border-color: var(--lock); color: var(--lock); }
.badge.warn, .chip.warn { border-color: var(--warm); color: var(--warm); }
.badge.bad { border-color: var(--spec-1); color: var(--spec-1); }
.badge.kind { border-color: var(--accent); color: var(--accent-ink); }
.badge.tier-printed-manual { border-color: var(--ok); }
.badge.tier-commentary { border-color: var(--accent); }
.badge.tier-handout { border-color: var(--warm); }
.badge.tier-class-transcript { border-color: var(--lock); }
.flag { color: var(--ink-faint); }
.site { font-family: ui-monospace, monospace; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0; }
.claim-quote { margin: .4rem 0; padding: .3rem 1rem; border-left: 3px solid var(--accent); color: var(--ink-soft); font-family: var(--serif); }
.claim-statement { font-size: 1.05rem; }
.claim-facts { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1rem; margin: .5rem 0; }
.claim-facts dt { color: var(--ink-faint); font-size: .88rem; }
.claim-facts dd { margin: 0; }
.claim-review fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; }
.claim-review fieldset label { display: block; margin: .25rem 0; }
.audit { border-left: 4px solid var(--accent); padding: .35rem .7rem; margin: .6rem 0; font-size: .9rem; }
.cite { margin: .4rem 0; }
.cite blockquote { margin: .3rem 0; padding: .2rem .8rem; border-left: 3px solid var(--line); color: var(--ink-soft); font-size: .9rem; }
.claims-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 640px) { .claim-facts { grid-template-columns: 1fr; } }
/* the analysis options: a label carries its checkbox on the same line (the generic form-label layout stacked them) */
.analysis-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.analysis-form > input[type=hidden] { display: none; }
.analysis-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; margin: 0; }
.analysis-form label.analysis-opt { display: flex; flex-direction: row; align-items: center; gap: .5rem; margin: .25rem 0; font-weight: normal; }
.analysis-form label.analysis-opt input { width: auto; margin: 0; }
.analysis-form .btnrow { grid-column: 1 / -1; }
.analysis-proposal { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.analysis-proposal li { margin: .5rem 0; }
.analysis-digit h3 { margin-top: 1rem; font-size: 1rem; }
/* LC_MARK_PROTOCOL_COMPOSER */
.composer-stage h2 { font-size: 1.15rem; margin-top: 1.4rem; }
.composer-item { border-top: 1px solid var(--line); padding: .7rem 0; list-style: none; }
.composer-item p { margin: .3rem 0; }
.composer-why { border-left: 3px solid var(--accent); padding-left: .6rem; }
.composer-system { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; margin: .8rem 0; }
.composer-system h3 { margin: .2rem 0 .4rem; font-size: 1.02rem; }
.composer-steps { margin: .3rem 0 .6rem 1.2rem; }
/* LC_MARK_PHYSIO_ANALYSIS */
.physio-photo-small { max-width: 320px; height: auto; border-radius: 8px; display: block; margin: .4rem 0; }
.physio-picker { grid-column: 1 / -1; }
.physio-feature { border-top: 1px solid var(--line); padding: .5rem 0; }
.physio-feature summary { cursor: pointer; }
.physio-feature label.analysis-opt { margin-left: 1rem; }