/* =============================================================================
   support/support.css — the one stylesheet for /support.html and every
   /support/ article (P635). Theme tokens ONLY (theme.css owns the palette;
   Linen light / Midnight Oak dark both flip through these tokens). Page-local
   GEOMETRY tokens live on each page's own :root (--r, --maxw, --prose-max).
   ============================================================================= */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 24px; }
/* The UA's [hidden]{display:none} is a USER-AGENT declaration; any author
   `display` beats it regardless of specificity (CSS Cascade 4 §6.1). Anything
   these pages toggle with .hidden must therefore opt back out explicitly -
   this global inoculates every component here (design authority P0,
   2026-08-13; first bitten by .art-card{display:flex}). */
[hidden] { display: none !important; }
.prose { max-width: var(--prose-max); line-height: 1.6; }
.muted { color: var(--text-muted); }
a { color: var(--accent-text); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px;
}

/* ---------- support index ---------- */
.sup-hero { padding: 34px 0 6px; }
.sup-hero h1 { margin: 0 0 8px; font-size: 2.1rem; letter-spacing: -0.02em; }
.sup-hero .lede { font-size: 1.05rem; margin: 0 0 20px; }

.sup-search { max-width: var(--prose-max); }
.sup-search label { display: block; font-weight: 700; margin-bottom: 6px; }
.sup-search input {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 12px 20px; min-height: 48px;
}
.sup-search input::placeholder { color: var(--text-muted); }
.sup-count { margin: 8px 2px 0; font-size: 0.9rem; }

.sup-cat { margin-top: 34px; }
.sup-cat > h2 { margin: 0 0 4px; font-size: 1.25rem; letter-spacing: -0.01em; }
.sup-cat > .cat-note { margin: 0 0 14px; color: var(--text-muted); }

.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.art-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--shadow); min-height: 44px;
}
/* The search JS hides non-matching cards with the native hidden attribute. An
   author-origin display:flex silently outranks the UA's [hidden]{display:none}
   at equal specificity, so without this line every card in a partially-matching
   category stayed visible while the counter said otherwise (staff-jr P1,
   2026-08-13, verified live). */
.art-card[hidden] { display: none; }
.art-card:hover { border-color: var(--accent-text); }
.art-card .t { font-weight: 700; line-height: 1.35; }
.art-card .d { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }

.sup-empty {
  margin-top: 26px; max-width: var(--prose-max); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px;
}
.sup-empty p { margin: 0 0 6px; }
.sup-empty p:last-child { margin: 0; }

.sup-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 38px; align-items: start; }
@media (max-width: 900px) { .sup-panels { grid-template-columns: 1fr; } }
.sup-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px; box-shadow: var(--shadow);
}
.sup-panel h2 { margin: 0 0 6px; font-size: 1.2rem; }
.sup-panel p { margin: 0 0 10px; line-height: 1.6; }

/* ---------- contact form ---------- */
.cform { display: grid; gap: 14px; }
.cform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .cform .frow { grid-template-columns: 1fr; } }
.cform label { display: block; font-weight: 600; margin-bottom: 5px; }
.cform input, .cform select, .cform textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-height: 44px;
}
.cform textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.cform .btn-send {
  font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px;
  padding: 12px 22px; min-height: 48px; justify-self: start;
  background: var(--on-accent-fill); color: var(--on-accent); border: 1px solid var(--on-accent-fill);
}
.cform .btn-send[disabled] { opacity: 0.6; cursor: default; }

/* Honeypot: removed from sight and from the tab order, still in the DOM for bots.
   aria-hidden keeps screen readers out; humans never meet it. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-note { border-radius: 10px; padding: 12px 14px; line-height: 1.55; }
/* Success and failure speak the theme's own semantic tokens (design authority
   P2, 2026-08-13): a blue border is this page's LINK vocabulary, not "wrong".
   The *-soft fills stay light in BOTH themes, so links inside use the fixed
   --accent-ink - the theme-flipping --accent-text reads 1.54:1 on danger-soft
   in Midnight Oak. */
.form-note.ok  { background: var(--ok-soft);     border: 1px solid var(--ok);     color: var(--ok-ink); }
.form-note.err { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger-ink); }
.form-note a { color: var(--accent-ink); }
.form-note:empty { display: none; }
.cform [aria-invalid="true"] { border-color: var(--danger); }

/* ---------- article pages ---------- */
.crumbs { margin: 26px 0 4px; font-size: 0.92rem; color: var(--text-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li { display: flex; gap: 6px; align-items: baseline; line-height: 1.6; }
.crumbs li + li::before { content: "\203A"; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

.art { margin-top: 6px; }
.art h1 { margin: 6px 0 10px; font-size: 1.85rem; letter-spacing: -0.02em; line-height: 1.25; }
.art .lede { font-size: 1.05rem; color: var(--text-muted); margin: 0 0 22px; }
.art h2 { margin: 30px 0 8px; font-size: 1.25rem; letter-spacing: -0.01em; }
.art p { margin: 0 0 14px; }
.art ul, .art ol { margin: 0 0 14px; padding-left: 24px; }
.art li { margin-bottom: 8px; line-height: 1.6; }
.art li::marker { color: var(--accent-text); font-weight: 700; }

/* Numbered walkthrough steps: one calm card per step. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.steps > li {
  counter-increment: step; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px 16px 58px; box-shadow: var(--shadow); margin: 0;
}
.steps > li::before {
  content: counter(step); position: absolute; left: 16px; top: 15px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--on-accent-fill); color: var(--on-accent); font-weight: 800; font-size: 0.95rem;
}
.steps > li > strong { display: block; margin-bottom: 4px; }
.steps p { margin: 0 0 8px; }
.steps p:last-child { margin: 0; }

/* Callout for the one plain-words caveat an article needs. */
.note-box {
  background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--accent-text);
  border-radius: 10px; padding: 12px 16px; margin: 0 0 14px;
}
.note-box p { margin: 0; }

.related { margin-top: 34px; }
.related h2 { margin: 0 0 8px; font-size: 1.1rem; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.related li { margin: 0; }
.related a {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; min-height: 44px; text-decoration: none;
  color: var(--text); font-weight: 600;
}
.related a:hover { border-color: var(--accent-text); }

.sup-foot {
  margin: 34px 0 10px; padding: 16px 18px; max-width: var(--prose-max);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.sup-foot p { margin: 0; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
}