/* Imaginarium Codex — Field Dossier components. Pure CSS: classes prefixed cx-. */

.cx-glyph { font-family: "Noto Sans Symbols", var(--font-mono); font-style: normal; font-weight: 400; }

.cx-page { background: var(--paper); color: var(--ink); font-family: var(--font-serif); }

/* ---------- shared atoms ---------- */
.cx-label { font-family: var(--font-mono); font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.cx-meta { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.cx-mark { background: var(--field-tint); color: var(--ink); padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cx-under { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cx-ref { font-family: var(--font-mono); font-size: .72em; color: var(--eye); vertical-align: super; }

/* ---------- Prose (chapter body text) ---------- */
/* Justified, last line flush left, automatic hyphenation (needs lang="en" on the page). */
.cx-prose p { text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3; }

/* ---------- LayerTag ---------- */
.cx-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border: 1px solid currentColor; border-radius: var(--radius-pill); color: var(--ink); }
.cx-tag::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.cx-tag--field { color: var(--field); }
.cx-tag--eye { color: var(--eye); }
.cx-tag--hand { color: var(--signal); }
.cx-tag--box { border-radius: var(--radius-0); }
.cx-tag--box::before { display: none; }

/* ---------- RunningHead / Folio ---------- */
.cx-runhead { display: grid; grid-template-columns: auto 1fr auto auto; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10px; line-height: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.cx-runhead > span { padding: 6px var(--space-2); border-left: 1px solid var(--rule); }
.cx-runhead > span:first-child { border-left: 0; padding-left: 0; }
.cx-runhead .cx-runhead__num { font-family: var(--font-grotesk); font-weight: 700; font-size: 18px; line-height: 13px; letter-spacing: 0; }
.cx-crop { position: relative; }
.cx-crop::before, .cx-crop::after { content: ""; position: absolute; width: 14px; height: 1px; background: var(--rule); }
.cx-crop::before { left: -22px; top: 0; }
.cx-crop::after { right: -22px; top: 0; }

/* ---------- FileHeader (dossier form grid) ---------- */
.cx-file { border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); }
.cx-file__row { display: grid; grid-template-columns: repeat(var(--cx-cols, 3), 1fr); }
.cx-file__row + .cx-file__row { border-top: 1px solid var(--rule); }
.cx-file__cell { padding: var(--space-2); min-height: 44px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); }
.cx-file__cell + .cx-file__cell { border-left: 1px solid var(--rule); }
.cx-file__value { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .02em; text-transform: uppercase; text-align: right; }
.cx-file__value--prose { font-style: italic; text-transform: none; font-family: var(--font-serif); font-size: 13px; line-height: 18px; text-align: left; letter-spacing: 0; }

/* ---------- ChapterOpener ---------- */
.cx-opener { position: relative; color: var(--ink); }
.cx-opener__bar { height: var(--stroke-bar); background: var(--ink); }
.cx-opener__numeral { font-family: var(--font-grotesk); font-weight: 800; font-size: 180px; line-height: .82; letter-spacing: -.03em; margin: var(--space-4) 0 0 -6px; }
.cx-opener__title { font-family: var(--font-grotesk); font-weight: 800; font-size: 50px; line-height: .96; letter-spacing: -.01em; text-transform: uppercase; margin: var(--space-2) 0 0; max-width: 11ch; }
.cx-opener__lede { font-family: var(--font-serif); font-size: 21px; line-height: 29px; margin: var(--space-6) 0 0; max-width: 30ch; }
.cx-kraft { position: absolute; background: var(--kraft); color: var(--ink-fixed); width: 240px; transform: rotate(-1.2deg); }
.cx-kraft .cx-label { color: var(--ink-fixed); }
.cx-kraft__row { display: grid; grid-template-columns: 72px 1fr; border-top: 1px solid var(--ink-fixed); }
.cx-kraft__row:first-child { border-top: 0; }
.cx-kraft__row > * { padding: 6px var(--space-2); }
.cx-kraft__row > * + * { border-left: 1px solid var(--ink-fixed); font-family: var(--font-grotesk); font-weight: 700; font-size: 13px; line-height: 16px; }

/* ---------- Briefing (In 30 seconds) ---------- */
.cx-brief { border: 1px solid var(--rule); background: var(--sheet); }
.cx-brief__head { display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--on-bar); padding: 5px var(--space-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.cx-brief__body { padding: var(--space-3); font-family: var(--font-serif); font-size: 16px; line-height: 25px; }
.cx-brief__foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.cx-brief__foot > div { padding: 6px var(--space-2); display: flex; justify-content: space-between; }
.cx-brief__foot > div + div { border-left: 1px solid var(--rule); }

/* ---------- BarHeading ---------- */
.cx-bar { display: flex; gap: var(--space-2); align-items: baseline; background: var(--ink); color: var(--on-bar); padding: 6px var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.cx-bar__lead { flex: 1; overflow: hidden; }
.cx-bar__lead::after { content: "........................................................................................................................"; letter-spacing: .1em; }
.cx-bar--outline { background: transparent; color: var(--ink); border: 1px solid var(--rule); }

/* ---------- Ledger (dot leaders) ---------- */
.cx-ledger { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 13px; line-height: 19px; color: var(--ink); }
.cx-ledger li { display: flex; gap: 6px; align-items: baseline; text-transform: uppercase; }
.cx-ledger li::after { content: none; }
.cx-ledger .cx-ledger__dots { flex: 1; overflow: hidden; white-space: nowrap; color: var(--ink-muted); }
.cx-ledger .cx-ledger__dots::before { content: "................................................................................................................................"; }
.cx-ledger .cx-ledger__v { white-space: nowrap; }
.cx-ledger--active .cx-ledger__v { color: var(--signal); }

/* ---------- Marginalia ---------- */
.cx-annotated { display: grid; grid-template-columns: var(--margin-note) 1fr; column-gap: var(--space-6); }
.cx-note { font-family: var(--font-mono); font-size: 11px; line-height: 15px; font-weight: 500; color: var(--signal); }
.cx-note--eye { color: var(--eye); }
.cx-note__ref { display: inline-block; border: 1px solid currentColor; padding: 0 4px; margin-bottom: 4px; }
.cx-gloss { font-family: var(--font-mono); font-size: .75em; color: var(--eye); }
.cx-lines { counter-reset: cx-line; }
.cx-lines p { position: relative; }

/* ---------- PracticeCard (index card) ---------- */
.cx-card { background: var(--index-card); color: var(--ink-fixed); border: 1px solid var(--ink-fixed); --cx-code-accent: var(--eye); }
.cx-card--field { --cx-code-accent: var(--field); }
.cx-card--eye { --cx-code-accent: var(--eye); }
.cx-card--hand { --cx-code-accent: var(--card-hand); }
.cx-card .cx-label { color: var(--ink-fixed); }
.cx-card__top { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 6px var(--space-2); border-bottom: 1px solid var(--ink-fixed); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; }
.cx-card__no { background: var(--ink-fixed); color: var(--index-card); padding: 0 6px; }
.cx-card__title { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--ink-fixed); }
.cx-card__title h4 { margin: 4px 0 0; font-family: var(--font-mono); font-weight: 600; font-size: 21px; line-height: 26px; letter-spacing: -.01em; }
.cx-card__meta { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--ink-fixed); }
.cx-card__meta > div { padding: 6px var(--space-2); }
.cx-card__meta > div + div { border-left: 1px solid var(--ink-fixed); }
.cx-card__meta b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; margin-top: 2px; }
.cx-card__steps { margin: 0; padding: var(--space-3) var(--space-3) var(--space-3) 36px; font-family: var(--font-serif); font-size: 15px; line-height: 23px; }
.cx-card__steps li::marker { font-family: var(--font-mono); font-size: 11px; }
/* Practice body as terminal code: prompt, comments, numbered lines, layer-ink syntax colour */
.cx-code { padding: var(--space-3); font-family: var(--font-mono); font-size: 12.5px; line-height: 19px; color: var(--ink-fixed); }
.cx-code__cmd { font-weight: 500; }
.cx-code__cmd::before { content: "$ "; color: var(--card-muted); }
.cx-code__flag { color: var(--cx-code-accent); }
.cx-code__c { color: var(--card-muted); }
.cx-code__c::before { content: "// "; }
.cx-code__gap { height: 10px; }
.cx-code__line { display: grid; grid-template-columns: 28px minmax(0, 1fr); margin-top: 6px; }
.cx-code__ln { color: var(--card-muted); }
.cx-code__fn { color: var(--cx-code-accent); font-weight: 600; }
.cx-code__fn::after { content: "()"; color: var(--card-muted); font-weight: 400; }
.cx-code__const { color: var(--cx-code-accent); font-weight: 500; }
.cx-code__map { display: grid; grid-template-columns: max-content 1fr max-content; column-gap: 6px; margin-top: 2px; }
.cx-code__map .cx-code__dots { overflow: hidden; white-space: nowrap; color: var(--card-muted); }
.cx-code__map .cx-code__dots::before { content: "................................................................"; }
.cx-code__out { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ink-fixed); }
.cx-code__out::before { content: "> "; color: var(--card-muted); }

/* ---------- PracticeWindow (retro OS window, dark code area) ---------- */
.cx-win { background: var(--win-face); color: var(--ink-fixed); border: 1px solid; border-color: var(--win-light) var(--ink-fixed) var(--ink-fixed) var(--win-light); box-shadow: inset -1px -1px 0 var(--win-shadow); padding: 3px; --cx-code-accent: var(--code-eye); }
.cx-win--field { --cx-code-accent: var(--code-field); }
.cx-win--eye { --cx-code-accent: var(--code-eye); }
.cx-win--hand { --cx-code-accent: var(--code-hand); }
.cx-win__title { display: flex; align-items: center; gap: 3px; background: var(--index-card); color: var(--ink-fixed); padding: 3px 3px 3px 6px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .02em; }
.cx-win__title > span:first-child { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-win__btn { width: 16px; height: 14px; display: grid; place-items: center; background: var(--win-face); color: var(--ink-fixed); border: 1px solid; border-color: var(--win-light) var(--ink-fixed) var(--ink-fixed) var(--win-light); font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1; }
.cx-win__menu { display: flex; gap: 14px; padding: 4px 6px 3px; font-family: var(--font-mono); font-size: 11px; line-height: 14px; }
.cx-win__menu span::first-letter { text-decoration: underline; }
.cx-win__body { margin-top: 2px; background: var(--code-bg); border: 1px solid; border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow); }
.cx-win__status { display: flex; gap: 2px; margin-top: 2px; font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: .04em; text-transform: uppercase; }
.cx-win__status > span { flex: 1; padding: 2px 6px; border: 1px solid; border-color: var(--win-shadow) var(--win-light) var(--win-light) var(--win-shadow); white-space: nowrap; }
.cx-win .cx-code { color: var(--code-ink); padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.cx-win .cx-code > .cx-code__cmd, .cx-win .cx-code > .cx-code__c, .cx-win .cx-code > .cx-code__gap, .cx-win .cx-code > .cx-code__out { margin-left: 40px; }
.cx-win .cx-code__line { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
.cx-win .cx-code__ln { text-align: right; }
.cx-win .cx-code__cmd::before, .cx-win .cx-code__ln, .cx-win .cx-code__c, .cx-win .cx-code__fn::after, .cx-win .cx-code__map .cx-code__dots, .cx-win .cx-code__out::before { color: var(--code-muted); }
.cx-win .cx-code__const { color: var(--code-const); }
.cx-win .cx-code__out { border-top-color: var(--code-muted); }
.cx-code__cursor { display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -3px; background: currentColor; }

/* ---------- Transmission (bracketed quote) ---------- */
.cx-tx { position: relative; padding: var(--space-8) var(--space-8) var(--space-6); color: var(--ink); }
.cx-tx__c { position: absolute; width: 18px; height: 18px; border-color: var(--rule); border-style: solid; border-width: 0; }
.cx-tx__c--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.cx-tx__c--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.cx-tx__c--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.cx-tx__c--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.cx-tx__q { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 28px; line-height: 35px; }
.cx-tx__sig { margin-top: var(--space-6); display: flex; justify-content: space-between; }

/* ---------- Stamp ---------- */
.cx-stamp { display: inline-grid; place-items: center; text-align: center; color: var(--signal); border: 2px solid currentColor; font-family: var(--font-grotesk); font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; transform: rotate(-4deg); }
.cx-stamp--seal { width: 96px; height: 96px; border-radius: var(--radius-pill); padding: 0; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px currentColor; }
.cx-stamp small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .08em; margin-top: 4px; }
.cx-stamp--ink { color: var(--ink); }

/* ---------- FolderTabs (table of contents) ---------- */
.cx-tabs { display: flex; flex-direction: column; }
.cx-tabs__tab { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; width: 62%; padding: 8px var(--space-3); margin-top: -1px; border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--radius-tab) var(--radius-tab) 0 0; background: var(--sheet); color: var(--ink); font-family: var(--font-mono); font-size: 13px; line-height: 16px; }
.cx-tabs__tab:nth-child(even) { margin-left: auto; }
.cx-tabs__tab span:last-child { font-size: 10px; letter-spacing: .08em; color: var(--ink-muted); }
.cx-tabs__tab--active { background: var(--ink); color: var(--on-bar); }
.cx-tabs__tab--active span:last-child { color: var(--on-bar); }
.cx-tabs__sheet { border: 1px solid var(--rule); background: var(--sheet); padding: var(--space-4) var(--space-3); min-height: 60px; }

/* ---------- SpecGrid ---------- */
.cx-spec { display: grid; grid-template-columns: repeat(var(--cx-cols, 4), 1fr); border: 1px solid var(--rule); }
.cx-spec > div { padding: var(--space-2); display: flex; flex-direction: column; gap: 6px; }
.cx-spec > div + div { border-left: 1px solid var(--rule); }
.cx-spec b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--ink); }

/* ---------- Terminal (machine panel) ---------- */
.cx-term { background: var(--term-bg); color: var(--term-ink); font-family: var(--font-mono); font-size: 12.5px; line-height: 19px; padding: var(--space-3); border: 1px solid var(--rule); }
.cx-term__row { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; }
.cx-term__dots { flex: 1; overflow: hidden; color: var(--term-muted); }
.cx-term__dots::before { content: "................................................................................................"; }
.cx-term__ok { color: var(--term-ok); }
.cx-term__warn { color: var(--term-alert); }
.cx-term__rule { border-top: 1px dashed var(--term-muted); margin: var(--space-2) 0; }

/* ---------- FigureInset ---------- */
.cx-fig { position: relative; }
.cx-fig__frame { border: 1px solid var(--rule); background: var(--sheet); }
.cx-fig__inset { position: absolute; width: 168px; background: var(--paper); border: 1px solid var(--rule); padding: var(--space-2); }
.cx-fig__inset h5 { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); font-family: var(--font-grotesk); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.cx-fig__inset p { margin: 0; font-family: var(--font-serif); font-size: 12.5px; line-height: 17px; }
.cx-fig__lead { position: absolute; height: 1px; background: var(--rule); transform-origin: left center; }
.cx-fig__lead::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--rule); }
.cx-fig__cap { display: flex; justify-content: space-between; margin-top: 6px; }

/* ---------- Plate (the author's drawings: photocopy / risograph) ---------- */
/* Each ink layer = a div filled with the ink, the drawing laid over it in "lighten"
   (white stays white, black strokes take the ink), then the layer multiplies onto plate-paper. */
.cx-plate { position: relative; overflow: hidden; isolation: isolate; background: var(--plate-paper); color: var(--ink-fixed); border: 1px solid var(--rule); --cx-ink: var(--riso-black); --cx-contrast: 1.6; --cx-pad: 24px; --cx-grain: .16; }
.cx-plate__ink { position: absolute; inset: var(--cx-pad); background: var(--cx-ink); mix-blend-mode: multiply; }
.cx-plate__ink img { display: block; width: 100%; height: 100%; object-fit: contain; background: #ffffff; filter: grayscale(1) contrast(var(--cx-contrast)) brightness(1.04); mix-blend-mode: lighten; }
.cx-plate__ink--second { --cx-ink: var(--riso-black); transform: translate(3px, -2px); }
.cx-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--cx-grain); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cx-plate--photocopy { --cx-ink: var(--riso-black); --cx-contrast: 2.4; --cx-grain: 0; background: #ffffff; }
/* Photocopy plates stay on pure white paper, as delivered: they pop out of the coloured section papers. */
.cx-plate--field { --cx-ink: var(--riso-green); }
.cx-plate--eye { --cx-ink: var(--riso-blue); }
.cx-plate--hand { --cx-ink: var(--riso-red); }
.cx-plate--bleed { border: 0; --cx-pad: 0px; }
/* Riso couleur: the file is already a finished print (inks, paper, grain) and is shown as is. */
.cx-plate--color { --cx-grain: 0; --cx-pad: 0px; }
.cx-plate--color .cx-plate__ink { background: none; mix-blend-mode: normal; }
.cx-plate--color .cx-plate__ink img { filter: none; mix-blend-mode: normal; background: none; object-fit: var(--cx-fit, cover); }
.cx-plate__reg { position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink-fixed); border-radius: var(--radius-pill); z-index: 2; }
.cx-plate__reg::before, .cx-plate__reg::after { content: ""; position: absolute; background: var(--ink-fixed); }
.cx-plate__reg::before { left: -5px; right: -5px; top: 6px; height: 1px; }
.cx-plate__reg::after { top: -5px; bottom: -5px; left: 6px; width: 1px; }
.cx-plate__reg--tl { top: 8px; left: 8px; }
.cx-plate__reg--br { bottom: 8px; right: 8px; }
.cx-plate__empty { position: absolute; inset: var(--cx-pad); display: grid; place-items: center; text-align: center; border: 1px dashed var(--ink-fixed); font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-fixed); }
.cx-plate__cap { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: 6px; }

/* ---------- Punch holes (page furniture) ---------- */
.cx-holes { display: flex; flex-direction: column; gap: 120px; }
.cx-holes i { width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--ink); display: block; }

/* Photocopy plates: the drawing sits on its own pure white sheet, no frame, no ink tint — it pops out of any paper. */
.cx-plate--photocopy { --cx-grain: 0; background: #ffffff; border: 0; }
.cx-plate--photocopy .cx-plate__ink { background: none; mix-blend-mode: normal; }
.cx-plate--photocopy .cx-plate__ink img { background: #ffffff; filter: grayscale(1) contrast(var(--cx-contrast)) brightness(1.06); mix-blend-mode: normal; }
.cx-plate--photocopy .cx-plate__empty { border-color: var(--rule-soft); color: var(--ink-muted); }

/* Section papers: light coloured paper for the parts outside the chapters (Paper theme only). */
[data-theme="paper"].cx-section--origin { --paper: var(--paper-origin); }
[data-theme="paper"].cx-section--preface { --paper: var(--paper-preface); }
[data-theme="paper"].cx-section--epilogue { --paper: var(--paper-epilogue); }
[data-theme="paper"].cx-section--bonus { --paper: var(--paper-bonus); }
[data-theme="paper"].cx-section--appendix { --paper: var(--paper-appendix); }
/* Cover: kraft paper. Muted ink darkened to keep 4.5:1 on kraft; the provenance label becomes a white sheet so it still reads as an object laid on top. */
[data-theme="paper"].cx-section--cover { --paper: var(--kraft); --ink-muted: #4a463f; }
[data-theme="paper"].cx-section--cover .cx-kraft { background: var(--sheet); }