/* ============================================================
   MATE User Guide + User Manual · shared stylesheet.

   Design language: the Dossier of the main page. Taken over from
   src/styles/dossier.css and preview-page/css/main.css:

     · Young Serif 400 for every heading, Fragment Mono for the
       brand and for labels, Archivo for running text.
     · The Dossier colour tokens (--page-bg, --surface, --brand,
       --text-strong, --text-body, --text-soft), bright climate by
       default, dark climate through prefers-color-scheme.
     · Hairlines instead of shadows, quiet surfaces, wide margins.
     · Mono labels in capitals with wide letter-spacing for chapter
       numbers and small print.

   Both pages load this file, the manual through ../userguide/.
   Every url() below therefore resolves against THIS file, not
   against the document, so the manual gets the same fonts and the
   same logo mask without a second copy.

   Font paths, all inside userguide/fonts/ and verified on disk:
     archivo-var-latin.woff2      (preloaded by both pages)
     fragmentmono-latin.woff2     (preloaded by both pages)
     youngserif-latin.woff2       (copied in from preview-page/fonts/)

   Young Serif is a COPY on purpose. ../fonts/ resolves inside this repo,
   but the image ships preview-page/userguide/ to /userguide/ and
   preview-page/manual/ to /manual/, and the site root carries no /fonts/
   at all: the main page hashes its faces into /assets/. A ../fonts/ url
   would therefore 404 in production and fall back to Georgia without a
   word of warning. 18 KB buys a folder that works at any mount point.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
/* Young Serif ships exactly one master. Never ask for a weight above 400:
   anything heavier is synthesised and smears the stems. */
@font-face {
  font-family: 'Young Serif';
  src: url('fonts/youngserif-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('fonts/fragmentmono-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- tokens · bright climate ---------- */
:root {
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display-tracking: -.012em;

  --maxw: 900px;
  --measure: 44em;          /* reading measure, roughly 70 characters */
  --topbar-h: 58px;
  --ease: cubic-bezier(.22,.9,.28,1);
  --swiss-red: #DA291C;     /* the cross stays red in both climates */

  color-scheme: light;
  --page-bg: #F2F3EE;
  --surface: #FBFBF8;
  --surface-soft: #EDEEE7;
  --surface-glass: rgba(242, 243, 238, .84);
  --surface-border: rgba(23, 26, 28, .18);
  --surface-border-strong: rgba(23, 26, 28, .28);
  --texture-line: rgba(23, 26, 28, .08);

  --text-strong: #171A1C;   /* 15.68:1 on --page-bg */
  --text-body:   #575F63;   /*  5.84:1 on --page-bg */
  --text-soft:   #636B66;   /*  4.70:1 on --page-bg, still AA at label sizes */

  --brand: #0B6B4A;         /*  5.85:1 on --page-bg */
  --brand-strong: #095C3F;
  --brand-ink: #F1FBF5;
  --brand-soft: rgba(11, 107, 74, .09);
  --warn: #7A5A18;          /*  5.28:1 on --page-bg */
}

/* ---------- tokens · dark climate ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page-bg: #070B11;
    --surface: #0F1620;
    --surface-soft: #131C28;
    --surface-glass: rgba(7, 11, 17, .82);
    --surface-border: rgba(233, 237, 241, .15);
    --surface-border-strong: rgba(233, 237, 241, .26);
    --texture-line: rgba(233, 237, 241, .07);

    --text-strong: #E9EDF1; /* 16.76:1 on --page-bg */
    --text-body:   #97A3AF; /*  7.67:1 on --page-bg */
    --text-soft:   #8593A0; /*  6.27:1 on --page-bg, 5.78:1 on --surface */

    --brand: #29C78F;       /*  9.07:1 on --page-bg */
    --brand-strong: #33D999;
    --brand-ink: #05271B;
    --brand-soft: rgba(41, 199, 143, .12);
    --warn: #DBA838;        /*  9.90:1 on --page-bg */
  }
}

/* ---------- legacy names ----------
   The earlier stylesheet used the preview's own vocabulary (--bg, --ink,
   --line, --accent...). Rules elsewhere in the manual still reach for those
   names, and an undefined var() fails silently to an inherited colour, which
   is exactly the kind of miss nobody sees until it ships. The old names stay
   alive here as aliases, so they follow the climate automatically. */
:root {
  --bg: var(--page-bg);
  --bg2: var(--surface-soft);
  --surface2: var(--surface-soft);
  --ink: var(--text-strong);
  --ink-dim: var(--text-body);
  --ink-faint: var(--text-soft);
  --line: var(--surface-border);
  --line-soft: var(--texture-line);
  --accent: var(--brand);
  --accent-strong: var(--brand-strong);
  --accent-text: var(--brand);
  --accent-contrast: var(--brand-ink);
  --accent-soft: var(--brand-soft);
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--text-body);
  line-height: 1.62;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand); color: var(--brand-ink); }
a { color: var(--brand); }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.mono {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .04em; line-height: 1.35;
}

.logo-mark {
  display: inline-block; width: 46px; height: 22px; background: currentColor;
  -webkit-mask: url('assets/mate-mark.svg') no-repeat center / contain;
  mask: url('assets/mate-mark.svg') no-repeat center / contain;
}

/* ---------- topbar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 22px;
  padding: 0 max(22px, 3vw); height: var(--topbar-h);
  border-bottom: 1px solid var(--surface-border);
  background: var(--page-bg);
  background: var(--surface-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.wordmark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text-strong); flex-shrink: 0;
}
/* The brand is set in mono, like every mark and label on the main page. */
.wordmark-text {
  font-family: var(--font-mono); font-weight: 400;
  letter-spacing: .3em; font-size: .82rem; text-transform: uppercase;
}
.topbar .doc-tag {
  color: var(--text-soft); text-transform: uppercase;
  letter-spacing: .18em; font-size: .62rem; flex-shrink: 0;
}
/* Eleven chapter links do not fit next to the wordmark on a 1280px screen.
   They scroll sideways rather than being clipped by the page. */
.topbar-links {
  margin-left: auto; display: flex; gap: 18px; min-width: 0;
  overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: var(--text-soft) transparent;
  padding: 4px 0 5px;
}
.topbar-links::-webkit-scrollbar { height: 3px; }
.topbar-links::-webkit-scrollbar-track { background: transparent; }
.topbar-links::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--text-soft);
}
.topbar-links a {
  color: var(--text-body); text-decoration: none; text-transform: uppercase;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  padding: 8px 0; white-space: nowrap;
}
.topbar-links a:hover, .topbar-links a:focus-visible { color: var(--brand); }

main {
  max-width: var(--maxw); margin: 0 auto;
  padding: calc(var(--topbar-h) + 96px) 6vw 24px;
  position: relative; z-index: 1;
}

/* ---------- document head ---------- */
.guide-head h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 3.5rem); line-height: 1.06;
  letter-spacing: var(--display-tracking); text-transform: none;
  color: var(--text-strong);
}
.guide-head h1 .accent { color: var(--brand); }
.guide-eyebrow {
  color: var(--text-body); text-transform: uppercase;
  letter-spacing: .16em; margin-bottom: 26px;
}
.guide-eyebrow em { font-style: normal; color: var(--brand); }
.guide-lede {
  color: var(--text-body); margin-top: 26px; max-width: 34em;
  font-size: clamp(1.1rem, 1.6vw, 1.2rem); line-height: 1.55;
}
.guide-lede b, .guide-lede strong { color: var(--text-strong); font-weight: 700; }
.ch-cross {
  display: inline-block; width: 10px; height: 10px; vertical-align: -1px;
  background: var(--swiss-red);
  clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);
}

/* ---------- contents ---------- */
.toc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 46px 0 42px; }
.toc a {
  display: block; text-decoration: none;
  border: 1px solid var(--surface-border); border-radius: 12px;
  background: var(--surface); padding: 15px 16px;
  color: var(--text-strong); font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .2s, background .2s;
}
.toc a small {
  display: block; color: var(--text-soft); margin-top: 5px;
  font-size: .62rem; text-transform: none; letter-spacing: .03em;
}
.toc a:hover, .toc a:focus-visible { border-color: var(--brand); background: var(--brand-soft); }

/* ---------- full-document search ----------
   The guide and manual share a small, local-only index. Its visual language is
   a dossier register rather than a floating search pill: strong rules, mono
   labels and one irregular highlighter stroke. */
.document-search {
  position: relative;
  margin: 16px 0 20px;
  padding: 38px 0 34px;
  border-top: 2px solid var(--text-strong);
  border-bottom: 1px solid var(--surface-border);
  scroll-margin-top: calc(var(--topbar-h) + 14px);
}
.document-search-kicker {
  display: inline-block;
  position: relative;
  z-index: 0;
  margin-bottom: 16px;
  padding: 5px 12px 4px;
  color: var(--brand-ink);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.document-search-kicker::before {
  content: '';
  position: absolute;
  inset: 0 -3px -1px;
  z-index: -1;
  background: var(--brand);
  clip-path: polygon(1% 18%, 99% 0, 96% 91%, 3% 100%);
  transform: rotate(-.4deg);
}
.document-search h2 { margin-bottom: 8px; }
.document-search-intro { max-width: 38em; margin-bottom: 22px; }
.document-search-form { max-width: var(--measure); }
.document-search-form > label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.document-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: stretch;
}
.document-search-controls input {
  min-width: 0;
  min-height: 48px;
  width: 100%;
  border: 1px solid var(--surface-border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-strong);
  padding: 11px 14px;
  font: inherit;
  line-height: 1.35;
  appearance: none;
  -webkit-appearance: none;
}
.document-search-controls input::placeholder { color: var(--text-soft); opacity: 1; }
.document-search-controls input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
  outline: none;
}
.document-search-controls button {
  min-height: 48px;
  border: 1px solid var(--surface-border-strong);
  border-radius: 7px;
  padding: 0 18px;
  color: var(--text-strong);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.document-search-controls .document-search-submit {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}
.document-search-controls button:hover,
.document-search-controls button:focus-visible { border-color: var(--brand); }
.document-search-controls .document-search-submit:hover,
.document-search-controls .document-search-submit:focus-visible { background: var(--brand-strong); }
.document-search-help {
  margin: 9px 0 0;
  color: var(--text-soft);
  font-size: .61rem;
  letter-spacing: .12em;
}
.document-search-status {
  min-height: 1.65em;
  margin: 23px 0 0;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
}
.document-search-status[data-has-results="true"] { color: var(--brand); }
.document-search-results {
  max-width: none;
  margin: 7px 0 0;
  border-top: 1px solid var(--surface-border);
  list-style: none;
}
.document-search-results li {
  padding: 0;
  border-bottom: 1px solid var(--texture-line);
}
.document-search-results li::before { content: none; }
.document-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 24px;
  min-height: 54px;
  padding: 15px 2px;
  color: var(--text-body);
  text-decoration: none;
}
.document-search-result:hover,
.document-search-result:focus-visible {
  color: var(--text-body);
  background: linear-gradient(90deg, var(--brand-soft), transparent 78%);
}
.document-search-result-title {
  color: var(--text-strong);
  font-weight: 700;
  line-height: 1.35;
}
.document-search-result-path {
  align-self: start;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.document-search-result-excerpt {
  grid-column: 1 / -1;
  max-width: 54em;
  color: var(--text-body);
  font-size: .9rem;
  line-height: 1.48;
}
.document-search-target {
  animation: document-search-target 1.8s var(--ease) both;
}
@keyframes document-search-target {
  0%, 32% { background: var(--brand-soft); }
  100% { background: transparent; }
}

/* ---------- sections ---------- */
section { padding-top: 88px; scroll-margin-top: calc(var(--topbar-h) + 14px); }
.sec-no {
  color: var(--brand); text-transform: uppercase;
  letter-spacing: .18em; margin-bottom: 16px;
}
.sec-no::after {
  content: ''; display: block; width: 64px; height: 1px;
  background: var(--brand); margin-top: 10px;
}
h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem); line-height: 1.12;
  letter-spacing: var(--display-tracking); text-transform: none;
  color: var(--text-strong); margin-bottom: 14px;
}
.sec-sub {
  color: var(--text-body); max-width: 36.5em;
  margin-bottom: 8px; font-size: 1.08rem; line-height: 1.6;
}
h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.3rem; line-height: 1.25; letter-spacing: var(--display-tracking);
  text-transform: none; color: var(--text-strong);
  margin: 42px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--texture-line);
}
h3 .mono { color: var(--text-soft); margin-left: 8px; letter-spacing: .12em; }
h4 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.06rem;
  letter-spacing: var(--display-tracking); color: var(--text-strong); margin: 26px 0 8px;
}
p { color: var(--text-body); max-width: var(--measure); margin-bottom: 12px; }
p b, li b, td b { color: var(--text-strong); font-weight: 700; }
em, i { font-style: italic; }

/* ---------- lists ----------
   The manual writes bare <ul>, the guide writes <ul class="plain">.
   Both get the same hairline register. */
ol.steps { counter-reset: step; list-style: none; max-width: var(--measure); margin: 14px 0 20px; }
ol.steps li {
  position: relative; padding: 9px 0 9px 44px; color: var(--text-body);
  border-bottom: 1px solid var(--texture-line); counter-increment: step;
}
ol.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 11px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; color: var(--brand);
}
ul, ul.plain { list-style: none; max-width: var(--measure); margin: 14px 0 20px; }
ul li, ul.plain li {
  position: relative; padding: 8px 0 8px 22px; color: var(--text-body);
  border-bottom: 1px solid var(--texture-line);
}
ul li::before, ul.plain li::before { content: '·'; position: absolute; left: 2px; color: var(--brand); }

/* ---------- inline pieces ---------- */
kbd {
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-strong);
  background: var(--surface-soft); border: 1px solid var(--surface-border);
  border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}

.note {
  border: 1px solid var(--surface-border); border-left: 2px solid var(--brand);
  border-radius: 0 12px 12px 0; background: var(--surface);
  padding: 16px 18px; margin: 20px 0; max-width: var(--measure);
  font-size: .95rem; color: var(--text-body);
}
.note.honest { border-left-color: var(--warn); }
.note .mono {
  color: var(--brand); display: block; margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: .16em;
}
.note.honest .mono { color: var(--warn); }

/* ---------- the guide's model list ---------- */
.model-list {
  width: 100%; max-width: var(--measure); border-collapse: collapse;
  margin: 14px 0 20px; font-size: .9rem;
}
.model-list th,
.model-list td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--texture-line);
  color: var(--text-body); text-align: left; vertical-align: top;
}
.model-list thead th {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.model-list tbody th { color: var(--text-strong); font-weight: 700; white-space: nowrap; }
.model-list .mono { color: var(--text-soft); letter-spacing: .08em; }

/* ---------- buttons and back link ---------- */
.backlink {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 44px;
  text-decoration: none; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--surface-border); border-radius: 100px;
  padding: 12px 22px; color: var(--text-strong);
  transition: border-color .2s, color .2s, background .2s;
}
.backlink:hover, .backlink:focus-visible { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.dl-btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 10px 12px 10px 0;
  text-decoration: none; font-weight: 700; font-size: .92rem;
  padding: 13px 24px; border-radius: 11px;
  background: var(--brand); color: var(--brand-ink);
  transition: background .2s;
}
.dl-btn:hover, .dl-btn:focus-visible { background: var(--brand-strong); color: var(--brand-ink); }
.dl-sub {
  display: inline-block; font-family: var(--font-mono); font-size: .64rem;
  color: var(--text-soft); letter-spacing: .1em;
}/* ---------- foot ---------- */
/* Both pages put <footer> OUTSIDE <main>, so it needs main's measure spelled
   out again. The width term reproduces main's content box exactly, hairline
   included, at every viewport: min(100% - 12vw, --maxw - 12vw). */
footer {
  width: min(100% - 12vw, calc(var(--maxw) - 12vw));
  margin: 96px auto 0; padding: 26px 0 70px;
  border-top: 1px solid var(--surface-border);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--text-soft);
}
footer a { color: var(--text-body); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--brand); }

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .toc { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .topbar { gap: 14px; padding: 0 18px; }
  .topbar .doc-tag {
    display: block;
    margin-left: auto;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-links { display: none; }
  main { padding-top: calc(var(--topbar-h) + 60px); }
  section { padding-top: 68px; }
  h3 { margin-top: 34px; }
}
@media (max-width: 480px) {
  .toc { grid-template-columns: 1fr; }
  .document-search { padding-top: 30px; }
  .document-search-controls { grid-template-columns: 1fr 1fr; }
  .document-search-controls input { grid-column: 1 / -1; }
  .document-search-controls button { padding: 0 12px; }
  .document-search-result { grid-template-columns: 1fr; gap: 5px; }
  .document-search-result-path { grid-row: 1; }
  .document-search-result-title { grid-row: 2; }
  .document-search-result-excerpt { grid-column: 1; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; }
}
/* Keyboard users can bypass the persistent guide navigation. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 60;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: .72rem;
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform .16s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.model-list caption {
  padding: 0 0 .75rem;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip-link { transition: none; }
}