/* Knitting Gauge Calculator: wool and oatmeal, one rust accent, square corners */

/* Fonts (self-hosted, latin subset, SIL OFL 1.1: see fonts/) */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-weight: 600; font-display: swap;
  src: url("fonts/bitter-latin-600-normal.woff2") format("woff2"); }

/* Fallbacks matched to each font's measured metrics: no shift on swap */
@font-face { font-family: "Plex Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT");
  size-adjust: 101.5%; ascent-override: 101.5%; descent-override: 27.6%; line-gap-override: 0%; }
@font-face { font-family: "Plex Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 98%; ascent-override: 105.1%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Bitter Fallback"; font-weight: 600; src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 90.3%; ascent-override: 104.1%; descent-override: 29.9%; line-gap-override: 0%; }

:root {
  /* Colour */
  --bg: #f3eee5;          /* oatmeal */
  --surface: #fbf8f2;     /* paper */
  --field: #fffdf9;
  --ink: #2a241e;
  --muted: #5f564b;
  --line: #d6cbba;
  --border: #8d8273;
  --accent: #9a4226;      /* rust: actions, results, focus */
  --accent-ink: #ffffff;
  --error: #a3122a;       /* crimson, kept apart from the rust accent */
  --wool: #e3d8c5;        /* swatch fabric */
  --wool-stitch: #806d55;  /* 3.5:1 on --wool */
  --ad-border: #c9bfae;

  /* Type */
  --serif: "Bitter", "Bitter Fallback", Georgia, serif;
  --sans: "IBM Plex Sans", "Plex Fallback", Arial, sans-serif;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-lg: 1.125rem; --text-xl: 1.5rem;
  --text-h2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-display: 3.75rem; --leading: 1.6; --leading-tight: 1.15;

  /* Space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  /* Vertical rhythm: large space BEFORE a section, small space INSIDE it. Each gap comes from one rule. */
  --section-gap: clamp(var(--space-7), 5vw, calc(var(--space-8) + var(--space-4)));  /* end of content -> next divider: 48px phones, 64-80px desktop */
  --divider-gap: clamp(var(--space-5), 2.5vw, var(--space-6));    /* divider -> section heading: 24-32px */
  --heading-gap: clamp(var(--space-3), 1vw, var(--space-4));      /* section heading -> its first content: 12-16px */
  --subheading-gap: var(--space-5);                               /* space above a subheading (table caption): 24px */
  --block-gap: var(--space-4);                                    /* lists, tables, diagrams: 16px above and below */
  --para-gap: 0.75em;                                             /* between paragraphs */
  --tap: 2.75rem;         /* 44px */

  /* Lines */
  --bw: 1px; --bw-strong: 2px; --ring: 3px;

  /* Page width: a 1280px column with the gutters inside it */
  --content-max: 1280px;
  --gutter: 32px;
  color-scheme: light dark;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1915;
    --surface: #26211c;
    --field: #1d1915;
    --ink: #efe6d8;
    --muted: #b8ab98;
    --line: #463e35;
    --border: #8a7e6e;
    --accent: #e39572;
    --accent-ink: #1d1915;
    --error: #ff8f9e;
    --wool: #3a322a;
    --wool-stitch: #9c8a72;  /* 3.8:1 on --wool */
    --ad-border: #4a4239;
  }
}

@media (max-width: 700px) {
  :root { --gutter: 18px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--text-base); line-height: var(--leading); overflow-wrap: break-word; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.005em; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: var(--bw-strong); }

:focus-visible { outline: var(--ring) solid var(--accent); outline-offset: var(--bw-strong); }

/* Square scrollbars where the browser lets the page style them */
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border: var(--ring) solid var(--bg); }
::-webkit-scrollbar-corner { background: var(--bg); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Page column */
main, .site-footer { max-width: var(--content-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

main { padding-top: var(--space-5); }

.intro-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); }

.mark { flex: none; width: var(--text-xl); height: var(--text-xl); fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: square; }

.intro h1 { margin: 0; font-size: var(--text-h1); line-height: var(--leading-tight); }
.intro p { margin: 0 0 var(--space-5); color: var(--muted); }

/* Calculator */
.tool { display: grid; gap: var(--space-6); align-items: start; }

@media (min-width: 900px) {
  .tool { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); gap: var(--space-6); }
  .tool .results { position: sticky; top: var(--space-4); }
}

.calc { container-type: inline-size; padding: var(--space-5); background: var(--surface); border: var(--bw) solid var(--line); border-top: var(--bw-strong) solid var(--ink); }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

legend { margin-bottom: var(--space-3); padding: 0; font-family: var(--serif); font-weight: 600; }

.unit-toggle { margin-bottom: var(--space-5); }
.unit-toggle legend { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: var(--muted); }

/* Three groups side by side when the card is wide, stacked when narrow */
.grid { display: grid; gap: var(--space-5) var(--space-6); }

.grid fieldset, .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-4); align-content: start; }

@container (min-width: 620px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid fieldset { grid-template-columns: minmax(0, 1fr); }
}

.field { min-width: 0; }
.field label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--muted); }

/* Native controls: no browser styling, so nothing gets rounded */
input, button { -webkit-appearance: none; appearance: none; border-radius: 0; }

input[type="text"] {
  width: 100%;
  min-height: var(--tap);
  margin: 0;
  /* 1px extra padding: an error swaps it for a 2px border, so the field keeps its size */
  padding: calc(var(--space-2) + var(--bw)) calc(var(--space-3) + var(--bw));
  font: inherit;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--field);
  border: var(--bw) solid var(--border);
}

input[type="text"]::placeholder { color: var(--muted); opacity: 1; }
input[type="text"]:hover { border-color: var(--ink); }
input[aria-invalid="true"] { padding: var(--space-2) var(--space-3); border: var(--bw-strong) solid var(--error); }

.error { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--error); }
.error:empty { display: none; }

/* Unit toggle: square radio buttons drawn as a two-part switch */
.segmented { display: inline-flex; max-width: 100%; }
.segmented input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }

.segmented label { display: flex; align-items: center; min-height: var(--tap); padding: var(--space-2) var(--space-4); background: var(--field); border: var(--bw) solid var(--border); cursor: pointer; }

.segmented label:last-of-type { margin-left: calc(-1 * var(--bw)); }
.segmented label:hover { position: relative; z-index: 1; border-color: var(--ink); }

.segmented input:checked + label { position: relative; z-index: 1; font-weight: 600; color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.segmented input:focus-visible + label { position: relative; z-index: 2; outline: var(--ring) solid var(--accent); outline-offset: var(--bw-strong); }

/* Multiple + reset row */
.calc-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--bw) solid var(--line); }

.multiple { flex: 1 1 16rem; }
.multiple > summary { font-weight: 600; }
.multiple fieldset { margin: var(--space-2) 0 var(--space-3); }

/* Disclosure rows: the whole row toggles; + / − sits on the right */
summary { display: flex; align-items: center; gap: var(--space-4); min-height: var(--tap); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

summary::after { content: "+"; content: "+" / ""; flex: none; display: grid; place-items: center; width: var(--text-xl); height: var(--text-xl); margin-left: auto; font-family: var(--sans); font-size: var(--text-lg); font-weight: 600; line-height: 1; color: var(--accent); border: var(--bw) solid var(--border); }

details[open] > summary::after { content: "−"; content: "−" / ""; }
summary:hover::after { border-color: var(--ink); }

.reset { min-height: var(--tap); margin: 0; padding: var(--space-2) var(--space-4); font: inherit; font-weight: 600; color: var(--accent); background: transparent; border: var(--bw-strong) solid var(--accent); cursor: pointer; }

.reset:hover { color: var(--accent-ink); background: var(--accent); }

/* Pressed state, shared by every control */
.reset:active, .result-bar:active, .segmented label:active, summary:active::after { color: var(--accent-ink); background: var(--ink); border-color: var(--ink); }

/* Results: the focus of the page */
.results { position: relative; padding: var(--space-6); background: var(--surface); border: var(--bw-strong) solid var(--ink); }
/* A running stitch just inside the edge, kept apart from focus styles */
.results::before { content: ""; position: absolute; inset: var(--space-1); border: var(--bw-strong) dashed var(--line); pointer-events: none; }
.results:focus { outline: none; }
.results:focus-visible { outline: var(--ring) solid var(--accent); outline-offset: var(--bw-strong); }

.results p { margin: 0; }

.axis { display: grid; grid-template-columns: minmax(0, 1fr); }
.axis + .axis { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--bw) solid var(--line); }

.axis-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Placeholder and error overlay the lead + number: no shift */
.placeholder, .axis-error { grid-row: 2 / span 2; grid-column: 1; align-self: start; padding-top: var(--space-1); color: var(--muted); }
.axis-error { font-weight: 600; color: var(--error); }

.lead { grid-row: 2; grid-column: 1; min-height: 1.6rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.headline { grid-row: 3; grid-column: 1; min-height: 4.25rem; font-family: var(--serif); font-size: var(--text-xl); line-height: 1.1; }

.headline strong { font-size: clamp(2.5rem, 12vw, var(--text-display)); font-weight: 600; line-height: 1.1; white-space: nowrap; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; }

.exact { font-family: var(--sans); font-size: var(--text-sm); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Size comparison: label and value over a square bar, the pattern's in grey, yours in the accent */
.results .size { margin-top: var(--space-3); font-variant-numeric: tabular-nums; }
.results .cmp-head { font-size: var(--text-sm); color: var(--muted); }
.results .cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); margin-top: var(--space-3); }
.cmp-val { font-weight: 600; text-align: right; }
.cmp-bar { grid-column: 1 / -1; display: block; height: var(--space-2); margin-top: var(--space-1); background: var(--border); }
.is-you .cmp-bar { background: var(--accent); }
.match { font-weight: 600; }
.results .note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--muted); }

/* Ad placeholders: full content width, fixed height so nothing shifts */
.ad-slot { position: relative; width: 100%; height: 280px; margin: var(--section-gap) 0 0; overflow: hidden; border: var(--bw) dashed var(--ad-border); }
.ad-label { position: absolute; top: var(--space-1); left: var(--space-2); margin: 0; font-size: var(--text-xs); color: var(--muted); }

/* Content sections: always the full content width */
.content { margin: var(--section-gap) 0 0; padding-top: var(--divider-gap); border-top: var(--bw-strong) solid var(--ink); }
.content h2 { margin: 0 0 var(--heading-gap); font-size: var(--text-h2); line-height: 1.2; }
.content p { margin: 0 0 var(--para-gap); }
/* No trailing margin at the end of a section: the next section's gap is the only space before its divider */
.content > :last-child, .content > :last-child > :last-child { margin-bottom: 0; }

/* How to use: a numbered list, then a full-width table */
.howto-body { display: grid; gap: var(--block-gap) var(--space-8); align-items: start; }

@media (min-width: 900px) {
  .howto-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: var(--space-6); counter-increment: step; }
.steps li + li { margin-top: var(--space-3); }

.steps li::before { content: counter(step); position: absolute; top: -0.15rem; left: 0; font-family: var(--serif); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { padding-bottom: var(--space-2); font-family: var(--serif); font-weight: 600; text-align: left; }
th, td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-bottom: var(--bw) solid var(--line); }
/* First column flush with the text edge, like everything else in the section */
tr > :first-child { padding-left: 0; }
thead th { font-size: var(--text-sm); font-weight: 600; color: var(--muted); border-bottom: var(--bw-strong) solid var(--ink); }
tbody th { font-weight: 400; color: var(--muted); }
.example td { font-weight: 600; }
.drift { margin-top: var(--subheading-gap); }
.drift .is-pattern td { font-weight: 600; }

/* Options when gauge doesn't match: a full-width table; rows stack on phones */
.options tbody th { font-family: var(--serif); font-weight: 600; color: var(--ink); }
@media (min-width: 700px) {
  .options th:first-child { width: 22%; }
  .options td:last-child { width: 33%; }
}
@media (max-width: 699px) {
  .options thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .options tr, .options th, .options td { display: block; }
  .options tr { padding: var(--space-3) 0; border-bottom: var(--bw) solid var(--line); }
  .options tr:first-child { border-top: var(--bw-strong) solid var(--ink); }
  .options th, .options td { padding: 0; border: 0; }
  .options td { margin-top: var(--space-2); }
  .options td::before { content: attr(data-label); display: block; font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
}

/* What gauge is: heading left, content right */
@media (min-width: 900px) {
  .gauge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); gap: 0 var(--space-8); align-items: start; }
  .gauge h2 { margin: 0; }
}

/* Swatch: the diagram on the left, a ruled checklist on the right */
.swatch-body { display: grid; gap: var(--block-gap) var(--space-8); align-items: start; }
.swatch-figure { width: 100%; max-width: 22rem; margin: 0; justify-self: start; }
.swatch-figure svg { display: block; width: 100%; height: auto; }
.swatch-figure figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }

.checks { margin: 0; padding: 0; list-style: none; }
.checks li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-bottom: var(--bw) solid var(--line); }
.checks li:first-child { padding-top: 0; }
/* A square marker, like a stitch marker on the needle */
.checks li::before { content: ""; position: absolute; top: calc(var(--space-3) + 0.45em); left: 0; width: 0.55em; height: 0.55em; border: var(--bw-strong) solid var(--accent); }
.checks li:first-child::before { top: 0.45em; }

@media (min-width: 900px) {
  .swatch-body { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
  .swatch-figure { order: -1; }
}

.sw-fabric { fill: var(--wool); }
/* The stitches keep round ends: they are drawn yarn, not UI */
.sw-stitch { fill: none; stroke: var(--wool-stitch); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sw-square { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.sw-measure { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.sw-label { fill: var(--ink); font-family: var(--sans); font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* FAQ: full-width ruled rows */
/* FAQ: compact rows, a 1px divider between rows only */
.faq details + details { border-top: var(--bw) solid var(--line); }
.faq summary { padding: var(--space-3) 0; }
.faq details[open] > summary { padding-bottom: var(--space-2); }
.faq h3 { margin: 0; font-size: var(--text-lg); line-height: 1.35; }
.faq details p { margin: 0 var(--space-7) var(--space-4) 0; }
/* Focus ring drawn inside the row, flush with the dividers */
summary:focus-visible { outline-offset: calc(-1 * var(--ring)); }

/* Privacy page: one full-width column. The policy is a single section (one divider after the title area);
   its topics are subsections: no lines between them, 32px above each topic heading, 8px below it. */
.back { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.policy { margin-top: var(--section-gap); padding-top: var(--divider-gap); border-top: var(--bw-strong) solid var(--ink); }
.policy section + section { margin-top: var(--space-6); }
.policy h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.35; }
.policy p { margin: 0 0 var(--para-gap); }
.policy ul { margin: var(--space-2) 0; padding-left: var(--space-5); }
.policy p:has(+ ul) { margin-bottom: 0; }  /* the list's 8px is the only gap above it */
.policy li + li { margin-top: var(--space-1); }
.policy section > :last-child { margin-bottom: 0; }

/* Footer */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-5); margin-top: var(--section-gap); padding-top: 0; padding-bottom: var(--space-7); font-size: var(--text-sm); color: var(--muted); }

.site-footer::before { content: ""; flex: 1 0 100%; margin-bottom: var(--space-3); border-top: var(--bw-strong) solid var(--ink); }
.site-footer p { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap); margin-left: var(--space-5); }
.site-footer a:first-of-type { margin-left: 0; }

/* Result bar: fixed, below 900px only (shown by script.js) */
.result-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--tap); margin: 0; padding: var(--space-2) var(--gutter); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface); border: 0; border-top: var(--bw) solid var(--ink); cursor: pointer; }

.result-bar span { margin: 0 var(--space-1); color: var(--accent); }
.result-bar:hover { border-top-width: var(--bw-strong); }
.result-bar[hidden] { display: none; }
.result-bar:focus-visible { outline-offset: calc(-1 * var(--space-1)); }

@media (max-width: 899px) {
  html { scroll-padding-bottom: calc(var(--tap) + var(--space-4)); }
  main { padding-top: var(--space-3); }
  .intro p { margin-bottom: var(--space-4); }
  .calc { padding: var(--space-4); }
  .unit-toggle { margin-bottom: var(--space-4); }
  .grid { gap: var(--space-4); }
  .calc-foot { margin-top: var(--space-4); padding-top: var(--space-2); }
  .multiple { flex-basis: 10rem; }
  .results { padding: var(--space-5); }
}

/* Windows High Contrast and other forced-colour modes */
@media (forced-colors: active) {
  .segmented input:checked + label { forced-color-adjust: none; color: HighlightText; background: Highlight; border-color: Highlight; }
  svg { forced-color-adjust: none; }
  .sw-fabric { fill: Canvas; }
  .sw-stitch, .sw-measure, .mark { stroke: CanvasText; }
  .sw-square { stroke: Highlight; }
  .sw-label { fill: CanvasText; }
  .cmp-bar { forced-color-adjust: none; background: CanvasText; }
  .is-you .cmp-bar { background: Highlight; }
}

/* Print: light colours (the dark tokens are screen-only), no ads, no result bar */
@media print {
  :root { color-scheme: light; }
  .ad-slot, .result-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}