/* =====================================================================
   The help center's stylesheet — /help, every page under /help/, and
   /support (which is the help center's "write to us" page).

   Until 2026-09-29 this was an inline <style> on one long page. It is a
   shared file now because ten pages carrying ten copies of it would drift,
   and the tokens below must stay identical to index.html's.

   /assets/* is served immutable for a year. Editing this file without
   bumping the ?v= on every page that links it ships the change to the CDN
   and to nobody who has already visited. scripts/check-help-css.py is what
   holds you to it: edit, bump VERSION there, paste the hash it prints.
   ===================================================================== */

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Italic-VariableFont_opsz_wght.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* =====================================================
   Bramble design tokens — mirrored from index.html
   ===================================================== */
@view-transition { navigation: auto; }

:root {
  --linen:    #F5EFE5;
  --gold:     #C49A3C;
  --ember:    #C49A3C;
  --steel:    #4A6A8E;
  --charcoal: #2E2A24;
  --bark:     #5A5248;
  --cream:    #FFF8F0;
  --amber:    #B07840;
  --stone:    #C4B8A8;
  --sage:     #4EAD74;
  --mist:     #8A7E72; --amber-text: #906234; --mist-text: #756B61; --sage-text: #377A52; /* text-safe variants — 4.5:1+ on linen; originals stay for rings, accents, dividers */

  --fg-1: var(--charcoal);
  --fg-2: var(--bark);
  --fg-3: var(--mist-text);
  --fg-accent: var(--amber-text);

  --bg-app:    var(--linen);
  --bg-card:   var(--cream);

  --border-soft:   rgba(0,0,0,0.07);

  --font-serif: 'Lora', 'Georgia', serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-1: 0 1px 2px rgba(46,42,36,0.04), 0 1px 1px rgba(46,42,36,0.03);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--fg-accent); text-decoration: none; border-bottom: 1px solid rgba(176,120,64,0.3); transition: color 240ms ease, border-color 240ms ease; }
a:hover { color: var(--fg-1); border-color: rgba(46,42,36,0.4); }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; color: var(--fg-1); margin: 0; line-height: 1.25; }
h1 { font-size: 42px; letter-spacing: -0.005em; margin-bottom: 8px; }
h2 { font-size: 26px; margin-top: 48px; margin-bottom: 12px; }
h3 { font-size: 19px; margin-top: 28px; margin-bottom: 8px; }
p { margin: 0 0 16px; color: var(--fg-2); }
ul { margin: 0 0 16px; padding-left: 24px; color: var(--fg-2); }
li { margin-bottom: 8px; }
strong { color: var(--fg-1); font-weight: 600; }
em { font-style: italic; color: var(--fg-2); }
hr { border: none; border-top: 1px solid var(--border-soft); margin: 32px 0; }

.container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 24px; }

.doc { padding: 56px 0 80px; }
.doc .eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-accent);
  margin-bottom: 12px;
}
.doc .updated {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-3);
  margin-top: 4px;
  margin-bottom: 32px;
}
.doc .section-number {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--fg-3);
  margin-right: 8px;
}
h2[id], h3[id] { scroll-margin-top: 88px; }

/* =====================================================
   Where you are. One line above the eyebrow, on every
   page below the hub, so a man who arrived from a search
   rather than from /help can see there is a help center
   and step up into it.
   ===================================================== */
.crumbs { margin: 0 0 28px; font-size: 14px; line-height: 1.5; }
.crumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; color: var(--fg-3); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "\203A"; margin: 0 8px; color: var(--fg-3); }
.crumbs a { color: var(--fg-3); border-bottom-color: rgba(117,107,97,0.3); }
.crumbs a:hover { color: var(--fg-1); }
.crumbs [aria-current="page"] { color: var(--fg-2); }

/* =====================================================
   The hub's lists. One row per page: what it is called,
   then the one line a man would use to find it. Whole
   row is the target — a 16px gutter each side is the
   difference between hitting it and missing it on a phone.
   ===================================================== */
.lede { font-size: 18px; color: var(--fg-2); margin-bottom: 8px; }

.help-section { margin-top: 48px; }
.help-section > h2 { margin-top: 0; margin-bottom: 8px; }
.help-section > p { margin-bottom: 4px; }

.help-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--border-soft); }
.help-list li { margin: 0; border-bottom: 1px solid var(--border-soft); }
.help-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: none;
  color: var(--fg-1);
  border-radius: 8px;
}
.help-list a:hover { color: var(--fg-accent); }
.help-list a:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.help-list .t { display: block; font-family: var(--font-serif); font-size: 19px; line-height: 1.3; }
.help-list .d { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--fg-3); }
.help-list .go { flex: none; width: 18px; height: 18px; color: var(--fg-3); transition: transform 240ms ease; }
.help-list a:hover .go { transform: translateX(2px); color: var(--fg-accent); }
@media (prefers-reduced-motion: reduce) {
  .help-list .go, .help-list a:hover .go { transition: none; transform: none; }
}

/* =====================================================
   Writing to us. A card, not a list: it is the one place
   on the hub that asks him to do something. The button is
   charcoal, not gold — gold is rationed to one CTA a screen
   and the header already holds it.
   ===================================================== */
.help-write {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 24px;
  margin: 20px 0 0;
}
.help-write p:last-child { margin-bottom: 0; }
.help-button {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--linen);
  background: var(--charcoal);
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  margin: 4px 0 16px;
}
.help-button:hover { color: var(--linen); opacity: 0.92; }
.help-button:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 3px; }

/* =====================================================
   Setup steps, written out under the slides.
   ===================================================== */
.help-toc {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 20px 24px 12px;
  margin: 32px 0 8px;
}
.help-toc ol { margin: 0; padding-left: 20px; color: var(--fg-3); }
.help-toc li { margin-bottom: 8px; }
.steps { margin: 0 0 16px; padding-left: 24px; color: var(--fg-2); }
.steps li { margin-bottom: 10px; padding-left: 4px; }
.steps li::marker { color: var(--fg-3); font-weight: 500; }

/* =====================================================
   The walk-through as slides, not a film: she can stay
   on a screen as long as she needs and step back one
   without scrubbing. The same stills the app pages
   through (the app repo's docs/keyholder-in-person-guide/).
   The track swipes and scrolls on its own; the Back/Next
   row appears once the script at the foot has wired it.
   ===================================================== */
.guide-slides { margin: 28px auto 28px; max-width: 320px; margin-left: auto; margin-right: auto; }
.slides-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 18px;
  background: var(--cream);
  box-shadow: var(--shadow-1);
}
.slides-track::-webkit-scrollbar { display: none; }
.slides-track:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 3px; }
.slides-track img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1280;
  scroll-snap-align: center;
  display: block;
}
.slides-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
}
.slides-nav[hidden] { display: none; }
.slides-nav button {
  font: inherit;
  font-weight: 600;
  color: var(--fg-accent);
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
}
.slides-nav button:disabled { color: var(--fg-3); opacity: 0.5; cursor: default; }
.slides-nav [data-count] { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.guide-slides figcaption {
  text-align: center;
  font-size: 14px;
  color: var(--fg-3);
  margin-top: 10px;
}

.callout {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  margin: 24px 0;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-soft);
}
.callout p:last-child { margin-bottom: 0; }

/* =====================================================
   The way on. Below a guide: back to where he came from
   and, in the getting-started run, the next screen-set.
   Two tiles side by side, one above the other on a phone.
   ===================================================== */
.guide-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 48px 0 0;
}
.guide-nav a {
  display: block;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 14px 18px;
  color: var(--fg-1);
}
.guide-nav a:hover { border-color: rgba(46,42,36,0.25); color: var(--fg-1); }
.guide-nav a:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.guide-nav .dir { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-accent); }
.guide-nav .t { display: block; font-family: var(--font-serif); font-size: 17px; line-height: 1.3; margin-top: 2px; }
.guide-nav .next { grid-column: 2; text-align: right; }
.guide-nav .prev:only-child { grid-column: 1; }

/* Still stuck. On every page below the hub, because a man who
   has read a fix that did not work should not have to look for
   the next door. */
.help-more {
  margin: 40px 0 0;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 22px 24px;
}
.help-more h2 { margin: 0 0 8px; font-size: 20px; }
.help-more p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.65; }
  h1 { font-size: 32px; }
  h2 { font-size: 22px; margin-top: 40px; }
  h3 { font-size: 17px; margin-top: 24px; }
  .doc { padding: 40px 0 64px; }
  .lede { font-size: 17px; }
  .help-section { margin-top: 40px; }
  .help-list .t { font-size: 18px; }
  .guide-nav { grid-template-columns: minmax(0, 1fr); }
  .guide-nav .next { grid-column: 1; text-align: left; }
}

.skip-link { position: absolute; top: -40px; left: 8px; z-index: 100; background: var(--charcoal); color: var(--linen, #F5EFE5); padding: 8px 14px; border-radius: 999px; font-size: 13px; text-decoration: none; border-bottom: none; }
.skip-link:focus { top: 8px; }

/* The ticket form, when a help page links straight to it (#support-form):
   land with its top clear of the sticky header. */
#support-form { scroll-margin-top: 88px; }