/* Trails design system — shared by index.html (notes), cooking.html and swapfile.html.
   Sage paper + forest ink, F37 Stout display, Centra Mono UI, Literata reading. Light only.

   Type roles:
     --stout  display headlines and page titles (uppercase, compressed)
     --mono   labels, eyebrows, meta, buttons, tags, counts, single-line data inputs
     --serif  anything you read or type: recipe steps, ingredients, note bodies, snippets
*/

/* Literata is a variable font: one file covers the 400–600 weight range. */
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "F37 Stout";
  src: url("/fonts/F37stout-black-compressed-webfont.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "F37 Stout";
  src: url("/fonts/F37stout-bold-compressed-webfont.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Centra Mono";
  src: url("/fonts/centramono-book-webfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Centra Mono";
  src: url("/fonts/centramono-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #dce1e0;
  --ink: #2b3129;
  --ink-soft: #4a5249;
  --muted: #6a736b;
  --rule: #b8c0bd;
  --danger: #8f2c24;
  --ok: #2c6e3f;
  --cover: #c9d0ce;
  --mono: "Centra Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --stout: "F37 Stout", "Arial Narrow", Impact, sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --read: 16px;
  --read-lh: 1.6;
}

* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100dvh; }
body {
  background: var(--paper);
  color: var(--ink);
  font: var(--read)/var(--read-lh) var(--serif);
  position: relative;
}
/* Paper grain: synthesized turbulence, no external asset. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.19 0 0 0 0 0.16 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

/* ---------- shared primitives ---------- */

/* Display headline / titles */
.stout {
  font-family: var(--stout);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

/* Small letterspaced mono label (wordmark, section labels) */
.overline {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Legend-style nav link: mono sentence case, thick underline when active */
.legend-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  padding: 3px 0;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
}
.legend-link.on {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.legend-link .icon { width: 19px; height: 19px; flex: 0 0 19px; }
.legend-link .icon path, .legend-link .icon circle, .legend-link .icon line {
  fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.legend-link.on .icon path, .legend-link.on .icon circle, .legend-link.on .icon line {
  stroke: var(--ink);
}

/* Text-y action link (Edit, Reset, back) */
.action-link {
  border: none;
  background: none;
  padding: 2px 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.action-link.quiet { color: var(--muted); }

/* Inputs — single-line fields hold data (mono), textareas hold prose (serif) */
.field-input, .field-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
.field-input { font: 15px/1.5 var(--mono); }
.field-textarea { font: var(--read)/var(--read-lh) var(--serif); resize: vertical; min-height: 90px; }
.field-input:focus, .field-textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
::placeholder { color: var(--muted); opacity: 0.9; }

/* Small uppercase field label */
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Solid + outline buttons */
.btn {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: none;
  color: var(--ink);
  min-height: 46px;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.4; }
.btn.recording { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Status line */
.status {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
  min-height: 1.5em;
}
.status.error { color: var(--danger); }
.status.success { color: var(--ok); }

/* Bordered card */
.card-box {
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
}

/* Vertical side text */
.side-text {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  z-index: 0;
}
/* Only when there's free margin beside the content column. */
@media (max-width: 899px) { .side-text { display: none; } }