/* Content styles of docs.html (user guide) and parameters.html (parameter reference).
   The page frame (side bar, columns) is css/docs-layout.css, shared with validation.html.
   Theme variables only. */
.doc-hero-lede { font-size: 0.95rem; font-weight: 300; color: var(--muted); line-height: 1.7; max-width: 62ch; margin-bottom: 1.2rem; }

.doc-sec { margin-top: 3.4rem; scroll-margin-top: 1.5rem; }
.doc-sec h2 {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.doc-sec h3 { font-size: 0.98rem; font-weight: 500; color: var(--text); margin: 1.7rem 0 0.6rem; }
.doc-sec p { font-size: 0.83rem; font-weight: 300; color: var(--muted); line-height: 1.8; margin-bottom: 0.85rem; max-width: 70ch; }
.doc-sec p strong { color: var(--text); font-weight: 500; }
.doc-sec ul { list-style: none; margin: 0 0 1rem; padding: 0; max-width: 70ch; }
.doc-sec li { position: relative; font-size: 0.83rem; font-weight: 300; color: var(--muted); line-height: 1.7; padding: 0.15rem 0 0.15rem 1.2rem; }
.doc-sec li::before { content: ''; position: absolute; left: 0.1rem; top: 0.75rem; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.7; }
.doc-sec li strong { color: var(--text); font-weight: 500; }
.doc-sec a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-dim); transition: border-color 0.2s; }
.doc-sec a:hover { border-color: var(--accent); }

code, .k {
  font-family: var(--mono); font-size: 0.76rem; color: var(--accent-text);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 0.03em 0.36em;
}

.doc-note {
  border-left: 2px solid var(--accent); background: var(--accent-dim);
  padding: 0.85rem 1rem; border-radius: 0 var(--r) var(--r) 0; margin: 1.2rem 0;
  font-size: 0.8rem; font-weight: 300; color: var(--text); line-height: 1.7; max-width: 70ch;
}
.doc-note strong { color: var(--accent-text); }

/* Small definition grid (operators / analyses / tools) */
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.4rem; margin: 0.6rem 0 1.2rem; max-width: 72ch; }
@media (max-width: 620px) { .doc-grid { grid-template-columns: 1fr; } }
.doc-def { padding: 0.55rem 0; border-top: 1px solid var(--border); }
.doc-def dt { font-family: var(--mono); font-size: 0.72rem; color: var(--text); margin-bottom: 0.2rem; }
.doc-def dd { font-size: 0.76rem; font-weight: 300; color: var(--muted); line-height: 1.55; }
/* entries the app's dialog help links (?) point at: scroll clear of the top, briefly marked */
.doc-def[id], .doc-panel[id] { scroll-margin-top: 1.5rem; }
.doc-def:target, .doc-panel:target { animation: doc-target 2.4s ease-out; border-radius: var(--r); }
@keyframes doc-target { 0%, 35% { background: var(--accent-dim); box-shadow: 0 0 0 0.5rem var(--accent-dim); } 100% { background: transparent; box-shadow: 0 0 0 0.5rem transparent; } }

/* Parameter chips */
.doc-params { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.4rem; }
.doc-param { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 0.12rem 0.45rem; }
.doc-param-lbl { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); margin: 0.9rem 0 0.15rem; }

.doc-steps { counter-reset: st; margin: 0.4rem 0 1rem; max-width: 70ch; }
.doc-step { position: relative; counter-increment: st; padding: 0.4rem 0 0.4rem 2.2rem; font-size: 0.83rem; font-weight: 300; color: var(--muted); line-height: 1.7; }
.doc-step::before { content: counter(st); position: absolute; left: 0; top: 0.35rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.68rem; color: var(--accent-text); border: 1px solid var(--border2); border-radius: 50%; }
.doc-step strong { color: var(--text); font-weight: 500; }

/* ── Parameter reference ── */
.param-intro { max-width: 72ch; }
.param-card {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  padding: 0.9rem 1.05rem; margin: 0.8rem 0; max-width: 72ch;
}
.param-card-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.15rem; }
.param-sym { font-family: 'DM Serif Display', serif; font-size: 1.35rem; color: var(--accent-text); line-height: 1; }
.param-sym sub { font-size: 0.6em; font-weight: 400; }
.param-name { font-size: 0.9rem; color: var(--text); font-weight: 500; }
.param-unit { font-family: var(--mono); font-size: 0.62rem; color: var(--muted2); border: 1px solid var(--border2); border-radius: 4px; padding: 0.05rem 0.4rem; margin-left: auto; }
.param-card p { font-size: 0.82rem; margin: 0.55rem 0 0; max-width: none; }
.param-card p.param-mean strong { color: var(--accent-text); }

/* Inline math */
.formula {
  font-family: 'Times New Roman', Georgia, serif; font-size: 1.02rem; color: var(--text);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 5px;
  padding: 0.5rem 0.8rem; margin: 0.55rem 0 0.2rem; overflow-x: auto; line-height: 2.1;
}
.formula i { font-style: italic; }
.frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; margin: 0 0.18em; }
.frac > span { padding: 0 0.35em; line-height: 1.15; }
.frac > span:first-child { border-bottom: 1px solid currentColor; }
.rt { white-space: nowrap; }
.rt > .rad { font-size: 1.15em; }
.rt > .rdc { border-top: 1px solid currentColor; padding: 0.05em 0.15em 0 0.1em; }
.bigint { font-size: 1.5em; vertical-align: -0.25em; font-style: normal; }
.formula sub, .formula sup { font-size: 0.62em; }

/* ── docs figures ──────────────────────────────────────────────────────────
   The seven parameter figures are GENERATED by tools/mkdocfigs.js
   (node tools/mkdocfigs.js --write) — edit the generator, not the SVG.
   They use only these classes, so they follow the light / dark theme.
   All share a 400-unit-wide viewBox, hence identical text sizes. */
.viz { margin: 1rem 0 0.3rem; max-width: 72ch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.1rem 0.8rem; }
.viz svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; color: var(--text); }
.viz-cap { font-size: 0.72rem; font-weight: 300; color: var(--muted); line-height: 1.6; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.viz-cap strong { color: var(--text); font-weight: 500; }
@media (max-width: 620px) { .viz { padding: 0.7rem 0.45rem 0.6rem; } .viz-cap { padding-left: 0.3rem; padding-right: 0.3rem; } }
/* colour roles: accent = the explained quantity, amber = peaks / material,
   teal = valleys / void, muted = context */
.viz .ca { color: var(--accent); }
.viz .cm { color: var(--amber); }
.viz .cv { color: var(--teal); }
.viz .cg { color: var(--muted); }
.viz .cx { color: var(--text); }
/* lines and areas */
.viz .fx-ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .fx-ln.thin { stroke-width: 1.4; }
.viz .fx-ref { fill: none; stroke: var(--muted); stroke-width: 1.1; stroke-dasharray: 3.5 2.5; }
.viz .fx-ax { fill: none; stroke: var(--muted); stroke-width: 1; }
.viz .fx-axh { fill: var(--muted); }
.viz .fx-frame { fill: none; stroke: var(--border2); stroke-width: 1; }
.viz .fx-sep { stroke: var(--border); stroke-width: 1; }
.viz .fx-zero { stroke: var(--muted); stroke-width: 0.9; stroke-dasharray: 5 3.5; }
.viz .fx-gd { fill: none; stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 2 2.5; }
.viz .fx-gd.cm, .viz .fx-gd.cv { stroke: currentColor; stroke-width: 0.9; }
.viz .fx-lead { stroke: var(--muted); stroke-width: 0.8; }
.viz .fx-br { fill: none; stroke: var(--muted); stroke-width: 1; }
.viz .fx-iso { fill: none; stroke: var(--accent); stroke-width: 0.8; stroke-opacity: 0.45; }
.viz .fx-eq { stroke: var(--text); stroke-width: 1.1; }
.viz .fx-tri { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.viz .fx-bar { stroke: currentColor; stroke-width: 4; }
.viz .fx-a { fill: currentColor; fill-opacity: 0.16; stroke: none; }
.viz .fx-a.strong { fill-opacity: 0.38; }
.viz .fx-a.faint { fill-opacity: 0.07; }
.viz .fx-dim line { stroke: currentColor; stroke-width: 1; }
.viz .fx-dim path { fill: currentColor; }
.viz .fx-dot { fill: currentColor; }
.viz .fx-mk { fill: currentColor; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.viz .fx-mk.open { fill: var(--surface); }
/* text: label, note, tick, math symbol (+ italic, + halo over artwork) */
.viz text { fill: currentColor; }
.viz .fx-l { font-family: var(--sans); font-size: 11px; }
.viz .fx-n { font-family: var(--sans); font-size: 10px; fill: var(--muted); }
.viz .fx-n.ca, .viz .fx-n.cm, .viz .fx-n.cv { fill: currentColor; }
.viz .fx-k { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); }
.viz .fx-s { font-family: var(--serif, serif); font-size: 13.5px; }
.viz .fx-i { font-style: italic; }
.viz .fx-h { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }


/* ── User-guide figures ─────────────────────────────────────────────────────
   Screenshots of the real app, GENERATED by tools/mkdocshots.js in both themes;
   each <figure class="shot"> holds a dark and a light <img>, one is shown. */
.shot { margin: 1rem 0 1.3rem; max-width: 72ch; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.shot-light { display: none !important; }
:root[data-theme="light"] .shot-light { display: block !important; }
:root[data-theme="light"] .shot-dark { display: none !important; }
.shot figcaption { font-size: 0.72rem; font-weight: 300; color: var(--muted); line-height: 1.6; margin-top: 0.5rem; }
.shot figcaption strong, .shot figcaption em { color: var(--text); }
.shot.wide { max-width: none; }
.shot.narrow { max-width: 260px; }

/* Two figures side by side (apply modes, grid vs free) */
.shot-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1rem 0 1.2rem; }
.shot-compare .shot { margin: 0 0 0.9rem; max-width: none; }
.shot-compare-head { margin-bottom: 0.55rem; }
.shot-compare-head .k { font-size: 0.74rem; }
@media (max-width: 760px) { .shot-compare { grid-template-columns: 1fr; } }

/* Figure beside text (work tree) */
.doc-media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6rem; align-items: start; max-width: 80ch; }
.doc-media .shot { margin: 0.3rem 0 0; width: 230px; }
.doc-media h3 { margin-top: 0.2rem; }
@media (max-width: 760px) { .doc-media { grid-template-columns: 1fr; } }

/* One-column definition list (operators, tools) */
.doc-list { display: grid; gap: 0 1.4rem; margin: 0.4rem 0 1.1rem; max-width: 72ch; }
.doc-list .doc-def dd { font-size: 0.78rem; }

/* Analysis: a description and its panel */
.doc-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.4rem; align-items: start; margin: 0.4rem 0 0.6rem; }
.doc-panel .doc-def dd { font-size: 0.78rem; }
.doc-panel .shot { margin: 0.55rem 0 0.4rem; }
@media (max-width: 760px) { .doc-panel { grid-template-columns: 1fr; gap: 0; } }

/* The app's button pictograms (icons/*.svg, injected by js/icons.js) */
.ico { display: inline-flex; width: 1.15rem; height: 1.15rem; vertical-align: -0.28em; margin-right: 0.3rem; color: var(--text); flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }
.ico.btn { width: 1.65rem; height: 1.65rem; padding: 0.2rem; box-sizing: border-box; border: 1px solid var(--border2); border-radius: 5px; background: var(--surface2); vertical-align: -0.5em; }
.doc-def dt { display: flex; align-items: center; flex-wrap: wrap; gap: 0.1rem 0; }
.doc-list .doc-def dt, .doc-panel .doc-def dt { font-size: 0.76rem; margin-bottom: 0.35rem; }
.glyph { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.2rem; margin-right: 0.35rem; border: 1px solid var(--border2); border-radius: 5px; background: var(--surface2); font-size: 0.75rem; color: var(--text); vertical-align: -0.2em; }
.doc-sec p .ico, .doc-sec p .glyph { margin: 0 0.15rem; }
.h-note { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted2); font-weight: 400; margin-left: 0.4rem; }

/* Numbered list matching the badges of the overview figure (same fixed orange as the
   badges drawn into the screenshot, so it is not a theme variable) */
.doc-callouts { list-style: none; counter-reset: co; margin: 0.4rem 0 1rem; padding: 0; max-width: 72ch; }
.doc-callouts li { counter-increment: co; position: relative; padding: 0.3rem 0 0.3rem 2.1rem; font-size: 0.8rem; font-weight: 300; color: var(--muted); line-height: 1.65; }
.doc-callouts li::before { opacity: 1; content: counter(co); position: absolute; left: 0; top: 0.38rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #e8590c; color: #fff; font-size: 0.7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.doc-callouts li strong { color: var(--text); font-weight: 500; }

/* One row per variant: the work tree beside the resulting panels (apply modes) */
.shot-row { margin: 1rem 0 1.4rem; }
.shot-row-head { margin-bottom: 0.55rem; }
.shot-row-head .k { font-size: 0.74rem; }
.shot-row-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.shot-row-body .shot { margin: 0; max-width: none; }
@media (max-width: 760px) { .shot-row-body { grid-template-columns: 1fr; } .shot-row-body .shot:first-child { max-width: 260px; } }

.doc-hero-lede a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }
.doc-hero-lede a:hover { border-color: var(--accent); }
.doc-panel.stack { grid-template-columns: 1fr; gap: 0; max-width: none; }