/* SynapticSci Design System — figure patterns (v3.13). The markup the figure generators in figures.mjs write, one block per
   pattern of guidelines/figures.md §5. Restrained is the base drawn here (ink, Ultramarine, Patina); Wash and Feature come from
   the fig-* classes in components.css, set by data-figure on the <figure>. Imported by styles.css, so a page, a template and a
   slide draw a pattern the same way. Text in a figure never drops below --figure-text-min.

   The base rules of five patterns the 3.10 templates already drew (.tp-ledger, .tp-stats, .tp-fig-strata, .tp-gate, .tp-sched)
   moved here from templates/templates.css unchanged, so the templates and the generators share one rule set; the generators
   write the ss-fg- names, and the tp- names stay as aliases. */

.ss-fg svg{display:block;width:100%;height:auto;overflow:visible}
.ss-fg .ss-matte{position:relative}
/* SVG text and lines */
.ss-fg .fg-txt{font-family:var(--font-body);font-size:12px;fill:var(--ink)}
.ss-fg .fg-txt-b{font-family:var(--font-body);font-size:12px;font-weight:600;fill:var(--ink)}
.ss-fg .fg-lab{font-family:var(--font-label);font-size:var(--figure-text-min,12px);letter-spacing:.06em;text-transform:uppercase;fill:var(--fig-label-soft)}
.ss-fg .fg-head{font-family:var(--font-label);font-size:var(--figure-text-min,12px);letter-spacing:.08em;text-transform:uppercase;fill:var(--fig-label)}
.ss-fg .fg-num{font-family:var(--font-mono);font-size:var(--figure-text-min,12px);fill:var(--fig-label-soft)}
.ss-fg .fg-num-ink{font-family:var(--font-mono);font-size:12px;fill:var(--ink)}
.ss-fg .fg-hand{font-family:var(--font-hand);font-size:17px;fill:var(--pen)}
.ss-fg .fg-rule{stroke:var(--rule);stroke-width:1;fill:none}
.ss-fg .fg-axis{stroke:var(--ink);stroke-width:1;fill:none}
.ss-fg .fg-lead{stroke:var(--ink-soft);stroke-width:1.2;fill:none}
.ss-fg .fg-arrow{stroke:var(--ink-soft);stroke-width:1.2;fill:none;stroke-linejoin:round}
.ss-fg .fg-held{stroke:var(--status-withheld);stroke-width:1.5;stroke-dasharray:4 3;fill:none}
/* marks, at Restrained: Ultramarine structure, a soft fill for a span, Patina for the moving part */
.ss-fg .fg-mark{fill:var(--primary)}
.ss-fg .fg-span{fill:var(--primary-wash);stroke:var(--primary);stroke-width:1}
.ss-fg .fg-open{fill:var(--surface);stroke:var(--primary);stroke-width:1.2}
.ss-fg .fg-move{fill:var(--patina)}
.ss-fg .fg-card{fill:var(--surface);stroke:var(--ink);stroke-width:1}
.ss-fg .fg-lane{fill:transparent}
.ss-fg .fg-band{fill:var(--held-bg)}
.ss-fg .fg-marker{fill:var(--surface);stroke:var(--ink);stroke-width:1.2}

/* 01 Journal plate: lettered panels */
.ss-fg-plate{display:grid;grid-template-columns:repeat(var(--fg-cols,2),minmax(0,1fr));gap:var(--sp-3)}
.ss-fg-plate .fg-panel{position:relative;border:1px solid var(--ink);background:var(--surface);padding:var(--sp-2)}
.ss-fg-plate{align-items:start}
.ss-fg-plate .fg-panel img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ss-fg-plate .fg-panel b{position:absolute;left:var(--sp-2);top:var(--sp-2);font-family:var(--font-label);font-size:var(--fs-label);font-weight:600;background:var(--surface);color:var(--fig-label);padding:0 4px}
/* 02 Specimen callouts: the numbered key under the picture */
.ss-fg-callouts{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14em,1fr));gap:var(--sp-1) var(--sp-4);font-size:var(--fs-caption);color:var(--ink)}
.ss-fg-callouts li{display:grid;grid-template-columns:1.6em minmax(0,1fr);align-items:baseline}
.ss-fg-callouts li>span:first-child{font-family:var(--font-mono);color:var(--fig-label)}
/* 03 Ledger comparison */
.ss-fg-ledger,.tp-ledger{width:100%;border-collapse:collapse;font-size:var(--fs-caption);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ss-fg-ledger th,.tp-ledger th{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label-soft);font-weight:600;text-align:left;padding:var(--sp-2) var(--sp-3);vertical-align:bottom}
.ss-fg-ledger th.h,.tp-ledger th.h{font-family:var(--font-display);font-size:var(--fs-h3);text-transform:none;letter-spacing:0;color:var(--ink);border-top:3px solid var(--ink)}
.ss-fg-ledger td,.tp-ledger td{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--rule);vertical-align:top}
.ss-fg-ledger td:first-child,.ss-fg-ledger th:first-child,.tp-ledger td:first-child,.tp-ledger th:first-child{padding-left:0;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label-soft);width:1.3in}
/* 04 Stat plate */
.ss-fg-stats,.tp-stats{display:grid;grid-template-columns:repeat(var(--fg-cols,3),minmax(0,1fr));gap:var(--sp-5);margin:var(--sp-3) 0}
.ss-fg-stat,.tp-stat{border-top:3px solid var(--ink);padding-top:var(--sp-3)}
.ss-fg-stat .v,.tp-stat .v{font-family:var(--font-display);font-size:var(--fs-display);line-height:1;font-weight:600;margin:0}
.ss-fg-stat .u,.tp-stat .u{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label);margin:var(--sp-1) 0 0}
.ss-fg-stat .s,.tp-stat .s{font-size:var(--fs-caption);color:var(--fig-label-soft);margin:var(--sp-2) 0 0;max-width:none}
.ss-fg-stat .r{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--fig-label-soft);margin:var(--sp-1) 0 0}
/* 06 Coverage matrix */
.ss-fg-cover{width:100%;border-collapse:collapse;font-size:var(--fs-caption);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ss-fg-cover th{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label-soft);font-weight:600;padding:var(--sp-2) var(--sp-2);text-align:center;vertical-align:bottom}
.ss-fg-cover th:first-child{text-align:left;padding-left:0}
.ss-fg-cover td{padding:var(--sp-1) var(--sp-2);border-top:1px solid var(--rule);text-align:center;vertical-align:middle}
.ss-fg-cover td:first-child{text-align:left;padding-left:0}
.ss-fg-cover td:first-child i{font-style:normal;font-family:var(--font-mono);color:var(--fig-label);margin-right:var(--sp-2)}
.ss-fg-cover .fg-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--primary);vertical-align:middle}
.ss-fg-cover .fg-dot--part{position:relative;background:transparent;box-shadow:inset 0 0 0 1.2px var(--primary)}
.ss-fg-cover .fg-dot--part::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--primary)}
.ss-fg-cover .fg-dot--none{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
/* 09 Strata section */
.ss-fg-strata,.tp-fig-strata{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ss-fg-strata>div,.tp-fig-strata>div{display:grid;grid-template-columns:minmax(0,1fr) 1.4in;align-items:center;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--rule)}
.ss-fg-strata>div:last-child,.tp-fig-strata>div:last-child{border-bottom:0}
.ss-fg-strata .t,.tp-fig-strata .t{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-tight)}
.ss-fg-strata .c,.tp-fig-strata .c{font-size:var(--fs-caption);color:var(--fig-label-soft);margin:2px 0 0;max-width:none}
.ss-fg-strata .o,.tp-fig-strata .o{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label);text-align:right}
/* 11 Dichotomous key: couplets */
.ss-fg-key2{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-size:var(--fs-caption)}
.ss-fg-key2 li{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;gap:var(--sp-3);align-items:baseline;padding:var(--sp-1) 0;border-top:1px solid var(--rule)}
.ss-fg-key2 li:first-child{border-top:0}
.ss-fg-key2 li.fg-b{border-top-style:dotted}
.ss-fg-key2 .n{font-family:var(--font-mono);color:var(--fig-label)}
.ss-fg-key2 .to{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label-soft);white-space:nowrap}
.ss-fg-key2 .to b{color:var(--ink);font-weight:700}
/* 14 Gate */
.ss-fg-gate,.tp-gate{width:100%;border-collapse:collapse;font-size:var(--fs-body);border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.ss-fg-gate td,.tp-gate td{padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.ss-fg-gate td:last-child,.tp-gate td:last-child{text-align:right;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:700;padding-right:0}
.ss-fg-gate .met,.tp-gate .met{color:var(--status-ready)}.ss-fg-gate .open,.tp-gate .open{color:var(--status-withheld)}
.ss-fg-gate tr.held td,.tp-gate tr.held td{background:var(--held-bg)}
.ss-fg-gate .fg-note{display:block;font-family:var(--font-body);font-size:var(--fs-caption);font-weight:400;color:var(--fig-label-soft);text-transform:none;letter-spacing:0}
/* 15 Definition plate */
.ss-fg-def{border-top:3px solid var(--ink);padding-top:var(--sp-3);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--sp-5);align-items:start}
.ss-fg-def .hw{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:600;line-height:1.05;margin:0}
.ss-fg-def .pos{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label);margin:var(--sp-1) 0 var(--sp-3)}
.ss-fg-def .d{margin:0 0 var(--sp-3);max-width:none}
.ss-fg-def ol{margin:0;padding:0;list-style:none;font-size:var(--fs-caption)}
.ss-fg-def ol li{display:grid;grid-template-columns:1.6em minmax(0,1fr);padding:var(--sp-1) 0;border-top:1px solid var(--rule)}
.ss-fg-def ol li>span{font-family:var(--font-mono);color:var(--fig-label)}
.ss-fg-gloss{display:grid;grid-template-columns:repeat(var(--fg-cols,3),minmax(0,1fr));gap:var(--sp-3)}
.ss-fg-gloss>div{border-top:3px solid var(--ink);padding:var(--sp-3)}
.ss-fg-gloss .hw{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-tight);margin:0}
.ss-fg-gloss .pos{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label);margin:2px 0 var(--sp-2)}
.ss-fg-gloss .d{font-size:var(--fs-caption);margin:0;max-width:none}
/* 16 Schedule band */
.ss-fg-sched,.tp-sched{display:block;width:100%;height:auto}
/* 17 Tree, as an indented outline */
.ss-fg-tree{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);font-size:var(--fs-caption)}
.ss-fg-tree ul{list-style:none;margin:0;padding:0 0 0 var(--sp-5)}
.ss-fg-tree li>div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-1) 0;border-top:1px solid var(--rule)}
.ss-fg-tree>li:first-child>div{border-top:0}
.ss-fg-tree .t{color:var(--ink)}
.ss-fg-tree>li>div .t{font-weight:600}
.ss-fg-tree .o{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fig-label-soft);white-space:nowrap}
.ss-fg-tree .fg-held{color:var(--status-withheld)}