/* Desk in Order design system: vibe C "Office manual" (LAUNCH-PLAN §2), tokens from /dev/specimen-c/.
   Global rules only. Each component in src/components/ carries its own scoped CSS. */
@font-face {
  font-family: "Archivo Black";
  src: url(/fonts/archivo-black-latin.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
/* Arial Black stretched to Archivo Black's width, so the font swap moves nothing (CLS 0). */
@font-face {
  font-family: "Head Fallback";
  src: local("Arial Black"), local("ArialBlack");
  size-adjust: 96%;
}

:root {
  --paper: #fff;
  --ink: #000;
  --muted: #555; /* lightest allowed text grey */
  --chrome: #cfcfcf;
  --desk: #e4e4e4;
  --signal: #dcff1e; /* the one color: [FREE TOOL] sticker + the one main buy button per page */
  --line: 3px;

  --head: "Archivo Black", "Head Fallback", "Arial Black", Helvetica, Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type: 6 steps, body = step 0 = 18px */
  --step--1: 1rem;
  --step-0: 1.125rem;
  --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --step-3: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  --step-4: clamp(1.9rem, 1.1rem + 3.6vw, 3.3rem);
  --label: .8rem; /* mono labels, upper case */

  /* space: 4px base */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;

  --r-panel: 16px; /* step panels */
  --r-art: 10px;   /* drawing frames */
  /* hard offset shadows only, never blur */
  --sh-4: 4px 4px 0 var(--ink);
  --sh-6: 6px 6px 0 var(--ink);
  --sh-8: 8px 8px 0 var(--ink);

  --sheet: 72rem;
  --read: 42rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: var(--step-0)/1.6 var(--body);
  /* grey desk with fine hatching (ref 04 band) */
  background: var(--desk) repeating-linear-gradient(45deg, transparent 0 5px, rgb(0 0 0 / .06) 5px 6px);
}
img, svg { max-width: 100%; }
a { color: var(--ink); text-underline-offset: .18em; text-decoration-thickness: 2px; }
/* date fields focus an inner part: only :focus-within matches the field itself in Chrome */
:focus-visible, input[type="date"]:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--signal); }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
h1 { font: var(--step-4)/1.05 var(--head); letter-spacing: -.01em; margin: 0 0 var(--s5); }
h2 { font: var(--step-2)/1.1 var(--head); margin: var(--s7) 0 var(--s4); }
h3 { font: var(--step-1)/1.2 var(--head); margin: var(--s6) 0 var(--s2); }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--paper); border: var(--line) solid var(--ink); padding: var(--s2) var(--s4); font-weight: 700; }
.skip-link:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* mono label: [BRACKET] stamps, field labels, meta rows */
.label { font: 700 var(--label)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; }

/* reading column: body text, legal pages, guide details */
.prose { max-width: var(--read); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--s4); }
.prose li + li { margin-top: var(--s1); }
.prose h2 { margin-top: var(--s6); }

/* buttons (ref 06 PUBLISH / CANCEL): square, black box, white text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .7rem 1.2rem; border: var(--line) solid var(--ink); border-radius: 0; font: 700 .95rem/1 var(--mono); text-transform: uppercase; text-decoration: none; cursor: pointer; background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--paper); color: var(--ink); }
.btn--ghost { background: var(--paper); color: var(--ink); }
.btn--ghost:hover { background: var(--chrome); }
.btn--buy { background: var(--signal); color: var(--ink); box-shadow: var(--sh-4); }
.btn--buy:hover { background: var(--signal); transform: translate(-2px, -2px); box-shadow: var(--sh-6); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* the yellow [FREE TOOL] sticker (ref 06 BETA) */
.tag { display: inline-block; font: 700 .72rem/1 var(--mono); text-transform: uppercase; border: 2px solid var(--ink); padding: .3rem .4rem; white-space: nowrap; }
.tag--free { background: var(--signal); }

/* form fields: plain, readable, never brutal type */
.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.field > label, .field > span { font: 700 var(--label)/1.3 var(--mono); text-transform: uppercase; }
.input { width: 100%; font: 1.05rem/1.4 var(--body); color: var(--ink); padding: .7rem .75rem; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); min-height: 48px; }
textarea.input { min-height: 7rem; resize: vertical; }
.note { font-size: var(--step--1); color: var(--muted); margin: var(--s2) 0 0; }

/* search box (home, search page, 404) */
.searchbox { display: flex; border: var(--line) solid var(--ink); background: var(--paper); max-width: 36rem; }
.searchbox .input { border: 0; min-width: 0; flex: 1; }
.searchbox .btn { border-width: 0 0 0 var(--line); }

/* template blocks shared by home, hubs, task and tool pages */
.lede { max-width: var(--read); margin: 0 0 var(--s5); }
.rowlist { list-style: none; margin: 0; padding: 0; }
.picks { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 52rem) { .picks { grid-template-columns: 1.4fr 1fr; } }
/* window cards: same width with 1 card or 5 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: var(--s6); list-style: none; margin: 0; padding: 0; }
[id] { scroll-margin-top: var(--s4); }

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