/* field-sheet.css — the Hewn field sheet, the card behind "Learn more" on a bench
   tool card and the page at /field-sheets/NN (2026-10-02). Shared by the app
   (web/static/index.html) and the standalone page (tool_pages.render_sheet_page),
   so the card looks the same wherever it opens. Expects the theme variables
   --ember, --ink-3 and --line-strong from the page that loads it. */
/* The field sheet — Cal's bench-sheet format (CX-239), cut down to a card
   (2026-10-02, Jonathan: the first one was "way too big"): paper in any
   theme, the wordmark, a two-line headline, Know the tool, At the bench,
   the constant, How not to use it, the close-up folded, When done, sources
   and limits. One column, a narrower frame, smaller type: a card, not a
   poster. */
.field-sheet { --fs-paper:#FFFAF0; --fs-ink:#292824; --fs-muted:#665F54; --fs-rule:#D9CFBD; --fs-rust:#A84715;
  --fs-hero:#F4EDDF; --fs-callout:#FBF3E7; --fs-detail:#FFFDF8;
  position:relative; width:min(640px, 94vw); max-height:90vh; overflow:auto; background:var(--fs-paper); color:var(--fs-ink);
  border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.45); padding:0 22px 18px; font-family:'IBM Plex Serif', Georgia, serif; }
.field-sheet .fs-rule { position:sticky; top:0; height:5px; background:var(--ember); margin:0 -22px 10px; z-index:1; }
.fs-top { display:flex; align-items:flex-start; gap:12px; }
.fs-wordmark { font-weight:700; font-size:21px; letter-spacing:-.02em; line-height:1; color:var(--fs-ink); }
.fs-wordmark .dot { color:var(--ember); }
.fs-series { margin-left:auto; text-align:right; font:700 9.5px/1.45 'IBM Plex Mono', monospace; letter-spacing:.17em; text-transform:uppercase; color:var(--fs-muted); }
.fs-close { width:28px; height:28px; border-radius:8px; border:1px solid var(--fs-rule); background:none; color:var(--fs-muted);
  font-size:19px; line-height:1; cursor:pointer; box-shadow:none; padding:0; flex:none; }
.fs-close:hover { color:var(--fs-ink); border-color:var(--fs-ink); background:none; }
.fs-h1 { font-size:clamp(22px, 3.4vw, 28px); line-height:1.05; letter-spacing:-.02em; margin:8px 0 6px; font-weight:700; color:var(--fs-ink); }
.fs-h1 em { font-style:normal; color:var(--fs-rust); }
.fs-dek { font-size:14px; line-height:1.45; color:var(--fs-muted); margin:0 0 10px; }
/* The plain line: what the corpus says about this tool's danger, said once,
   not softened, before the schematic. */
.fs-plain { font-size:13.5px; line-height:1.45; margin:0 0 12px; padding:7px 10px; border-left:3px solid var(--fs-rust);
  background:var(--fs-callout); border-radius:0 8px 8px 0; }
.fs-hero { background:var(--fs-hero); border:1px solid var(--fs-rule); border-radius:12px; padding:9px 12px 6px; }
.fs-eyebrow { font:700 9.5px/1.1 'IBM Plex Mono', monospace; letter-spacing:.17em; text-transform:uppercase; color:#98501E; }
.fs-hero svg { width:100%; height:auto; max-height:190px; display:block; margin:4px auto; }
.fs-detail svg { width:100%; height:auto; max-height:170px; display:block; margin:4px auto; }
/* The schematics carry Cal's own class names (hair, label, small, highlight);
   these are his sheet's rules for them, scoped to ours. Without them a
   leader line is a filled black wedge. */
.field-sheet svg text { font-family:'IBM Plex Serif', Georgia, serif; fill:#454038; }
.field-sheet svg .label { font-size:13px; font-weight:700; }
.field-sheet svg .small { font-size:13px; fill:#756B5D; }
.field-sheet .fs-detail svg .label { font-size:20px; }
.field-sheet .fs-detail svg .small { font-size:18px; }
.field-sheet svg .hair { stroke:#938779; stroke-width:1.4; fill:none; }
.field-sheet svg .dark { stroke:#393831; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.field-sheet svg .highlight { stroke:#FFF8E9; stroke-width:2; opacity:.85; fill:none; }
/* The parts list stands where the schematic will go, until one is drawn. */
.fs-parts { list-style:none; margin:6px 0 8px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; font-size:13px; line-height:1.4; }
.fs-parts li { padding:3px 0; border-bottom:1px dotted var(--fs-rule); }
.fs-parts strong { color:var(--fs-ink); }
.fs-parts span { color:var(--fs-muted); }
@media (max-width: 520px) { .fs-parts { grid-template-columns:1fr; } }
.fs-caption { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid var(--fs-rule); padding-top:6px;
  font-size:12.5px; color:var(--fs-muted); }
.fs-caption strong { color:var(--fs-ink); }
/* Two folds keep the card short: "not all X are built the same" under the
   schematic, and the close-up. A tap opens either; the summary line always
   shows, so neither fact is hidden, only its length. */
.fs-differ { margin:6px 0 0; font-size:13px; }
.fs-differ summary, .fs-more summary { cursor:pointer; font:600 11px/1.4 'IBM Plex Mono', monospace; letter-spacing:.06em; color:var(--fs-rust); list-style:none; }
.fs-differ summary::-webkit-details-marker, .fs-more summary::-webkit-details-marker { display:none; }
.fs-differ summary::before, .fs-more summary::before { content:"\25B8  "; }
.fs-differ[open] summary::before, .fs-more[open] summary::before { content:"\25BE  "; }
.fs-differ p { margin:6px 0 2px; line-height:1.45; color:var(--fs-ink); }
.fs-steps h2, .fs-donts h2 { font-size:16px; margin:14px 0 8px; letter-spacing:-.01em; color:var(--fs-ink); }
.fs-step { display:grid; grid-template-columns:24px 1fr; gap:8px; margin:0 0 8px; font-size:13.5px; line-height:1.42; }
.fs-step .fs-no { font:700 13px/1 'IBM Plex Mono', monospace; color:var(--fs-rust); border-top:2px solid var(--ember); padding-top:4px; }
.fs-constant { border-left:3px solid var(--ember); background:var(--fs-callout); padding:7px 10px; border-radius:0 8px 8px 0;
  font-size:13.5px; line-height:1.4; margin-top:8px; }
/* How not to use it: the scar-tissue lines, in rust, never ember. A "stop"
   lesson does not wear the "go" colour (the June mock's rule). */
.fs-dont { display:grid; grid-template-columns:18px 1fr; gap:6px; margin:0 0 7px; font-size:13.5px; line-height:1.42; }
.fs-dont .fs-x { font:700 15px/1.25 'IBM Plex Mono', monospace; color:var(--fs-rust); }
.fs-more { border:1px solid var(--fs-rule); border-radius:10px; padding:8px 12px; background:var(--fs-detail); margin-top:12px; }
.fs-more summary { font-size:12px; }
.fs-more small { display:block; color:var(--fs-muted); font-size:12px; margin:4px 0 0; }
.fs-key { font-size:13.5px; line-height:1.42; margin:6px 0 0; }
.fs-figure { font-size:12.5px; color:var(--fs-muted); margin:6px 0 0; line-height:1.4; }
.fs-done { display:flex; gap:12px; align-items:baseline; border-top:1px solid var(--fs-rule); border-bottom:1px solid var(--fs-rule);
  padding:9px 0; margin-top:14px; font-size:13.5px; line-height:1.4; }
.fs-foot { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:9px; font-size:11.5px; color:var(--fs-muted); line-height:1.5; }
.fs-foot a { color:var(--fs-ink); text-decoration:underline; text-underline-offset:2px; font-weight:400; }
.fs-credit { text-align:right; }
.fs-review { color:var(--fs-rust); }
.fs-absent .fs-h1 { font-size:clamp(20px, 3vw, 26px); }
.fs-sample { margin-top:14px; font:600 12px/1 'IBM Plex Mono', monospace; letter-spacing:.06em; color:var(--ember); background:none;
  border:1px solid color-mix(in srgb, var(--ember) 40%, transparent); border-radius:20px; padding:9px 14px; cursor:pointer; box-shadow:none; }
.fs-sample:hover { background:color-mix(in srgb, var(--ember) 10%, transparent); }
.fs-entry { display:inline-block; margin:14px 0 0 12px; font:500 12px/1 'IBM Plex Mono', monospace; letter-spacing:.06em; color:var(--fs-muted); }
@media (max-width: 680px) { .field-sheet { padding:0 14px 16px; } .field-sheet .fs-rule { margin:0 -14px 10px; } }