/* Workshop · Metsärinne Wood. */
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Layout: phone first, one column with a sticky tab bar; from 900px the inputs sit left and the results stick on the right.
   Metsärinne Wood's screen mode is dark only, so this page commits to that one look (design system tokens). */
:root {
  --surface: #0d0c0a; --surface-raised: #14120f; --surface-sunk: #090807;
  --ink: #ede6d8; --ink-2: #b0a695; --ink-3: #8b8273;
  --line: rgba(237, 230, 216, 0.13); --line-strong: rgba(237, 230, 216, 0.30);
  --accent: #cfa764; --accent-hi: #e8cb8f; --on-accent: #17130c; --focus-ring: #cfa764;
  --good: #a9bf8e; --risk: #e08d6d;
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 12px; --fs-s: 14px; --fs-m: 16px; --fs-lead: 18px;
  --radius: 2px; --control: 48px; --control-s: 44px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--surface); color: var(--ink); }
body { font: 400 var(--fs-m)/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.inner { max-width: 1120px; margin: 0 auto; }

/* Header */
.head { padding-top: calc(env(safe-area-inset-top, 0px) + 28px); padding-bottom: 20px; }
.head .inner { display: grid; gap: 12px; }
.eyebrow { margin: 0; font: 500 var(--fs-xs)/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow b { font-weight: 500; color: var(--accent); }
h1 { margin: 0; font: 400 clamp(2.5rem, 8vw, 3.75rem)/1 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.lead { margin: 0; max-width: 58ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }

/* Tabs */
.tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgba(13, 12, 10, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-block: 1px solid var(--line); }
.tabs .inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tab { min-height: var(--control); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-3); font-weight: 500; font-size: 15px; letter-spacing: 0.01em; cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Panels */
main { padding-block: 28px 64px; }
.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 900px) {
  .panel { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: start; }
  .results { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); }
  .panel.wide { grid-template-columns: minmax(0, 1fr); }
}
.inputs, .results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; min-width: 0; align-content: start; }
.group { display: grid; gap: 20px; }
.group > .eyebrow { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 20px; }

/* Fields */
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field > label, .field > .lbl { font: 500 var(--fs-xs)/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.control { width: 100%; min-height: var(--control-s); padding: 8px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 400 var(--fs-m)/1.5 var(--font-sans); transition: border-color 0.25s; }
.control:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.control::placeholder { color: var(--ink-3); }
.control.num { font-family: var(--font-mono); font-size: 17px; }
.unit { position: relative; }
.unit .control { padding-right: 44px; }
.unit span { position: absolute; right: 0; bottom: 11px; font: 400 var(--fs-s)/1 var(--font-mono); color: var(--ink-3); pointer-events: none; }
select.control { appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
select.control option { background: var(--surface-raised); color: var(--ink); }
.control.bad { border-bottom-color: var(--risk); }
.help { margin: 0; font-size: var(--fs-s); line-height: 1.55; color: var(--ink-3); max-width: 60ch; }

/* Segmented choice */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { flex: 1 1 0; min-width: max-content; min-height: var(--control-s); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color 0.25s, color 0.25s, background 0.25s; }
.seg button:hover { border-color: var(--accent); color: var(--accent-hi); }
.seg button[aria-pressed="true"] { border-color: var(--accent); background: rgba(207, 167, 100, 0.12); color: var(--accent-hi); }

details.more { border-top: 1px solid var(--line); }
details.more summary { min-height: var(--control-s); padding-block: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; list-style: none; font: 500 var(--fs-xs)/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
details.more summary::-webkit-details-marker { display: none; }
details.more summary svg { width: 12px; height: 12px; transition: transform 0.25s; }
details.more[open] summary svg { transform: rotate(90deg); }
details.more summary:hover { color: var(--ink-2); }
details.more .group { padding-block: 8px 4px; }

/* Readouts */
.readout { display: grid; gap: 4px; }
.big { margin: 0; font: 400 clamp(3.25rem, 13vw, 4.75rem)/0.95 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.big small { font: 400 var(--fs-lead)/1 var(--font-mono); letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }
.say { margin: 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.say b, .steps b, .note b { font-weight: 500; color: var(--ink); }
.spec { font-family: var(--font-mono); color: var(--accent); font-weight: 400; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--line); }
.fact { display: grid; gap: 2px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.fact .k { font: 500 var(--fs-xs)/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.fact .v { font: 400 20px/1.3 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.fact .v em { font-style: normal; color: var(--ink-3); font-size: var(--fs-s); }

.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; }
.card h2, .results h2 { margin: 0; font: 400 28px/1.1 var(--font-display); letter-spacing: -0.01em; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }
.chart .lab { fill: var(--ink-2); font-size: 11px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; font: 500 var(--fs-xs)/1.4 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.chip.good { color: var(--good); } .chip.usual { color: var(--ink-2); } .chip.risk { color: var(--risk); }
.note { margin: 0; font-size: var(--fs-s); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.warn { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(224, 141, 109, 0.45); border-radius: var(--radius); font-size: var(--fs-s); line-height: 1.6; color: var(--ink-2); }
.warn svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--risk); }

/* Glue-up */
.board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; padding: 20px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--radius); }
.board svg { display: block; width: 100%; max-width: 360px; max-height: 360px; height: auto; }
.board p { margin: 0; font: 400 var(--fs-s)/1.4 var(--font-mono); color: var(--ink-2); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: var(--fs-m); line-height: 1.55; color: var(--ink-2); }
.steps li::before { content: counter(s); font: 400 var(--fs-s)/1.7 var(--font-mono); color: var(--accent); }
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
th { text-align: left; font: 500 var(--fs-xs)/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td.n, th.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td .fi { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 1px; margin-right: 8px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.bar { display: block; height: 4px; margin-top: 6px; background: var(--accent); border-radius: 1px; opacity: 0.75; }

footer { padding-top: 24px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 48px); border-top: 1px solid var(--line); }
footer p { margin: 0 0 8px; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-3); max-width: 80ch; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }