/* The help centre. Its own stylesheet, not legal.css — a help page and a terms
   page want opposite things. Terms is a document you read top to bottom once.
   Help is a place you arrive at with ONE question, already annoyed, and it has
   to answer that question and nothing else. So: collapsed answers, a search
   field, and eight colour-coded sections, because colour is how CoZoo talks.

   Graphik at 400 and 500 ONLY — the two weights the licence covers. There is no
   bold on this page and there must never be one; asked for 700 the browser
   smears the 500 and it shows. */

body.help {
  height: auto;
  overflow: auto;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

:root {
  --ink: rgba(0, 0, 0, 0.9);
  --ink-soft: rgba(0, 0, 0, 0.55);
  --rule: rgba(0, 0, 0, 0.12);
  --wash: #f6f7f9;          /* CalendarPalette.unassignedHex — the app's open grey */
}

/* ─── Masthead ─────────────────────────────────────────────────────────────
   Sticky, because the search field is the whole point of the page and a
   reader four sections down should not have to scroll back up to re-ask. */

.help-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}

.help-top-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.help-home {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.help-home:hover { color: var(--ink); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.help-search {
  flex: 1;
  position: relative;
  min-width: 0;
}

.help-search input {
  width: 100%;
  box-sizing: border-box;
  font: 400 16px/1 "Graphik", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--wash);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 16px 11px 40px;
  appearance: none;
}

.help-search input::placeholder { color: var(--ink-soft); }

.help-search input:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.2);
  background: #fff;
}

/* The magnifier, drawn rather than fetched — one less request and it inherits
   the text grey. */
.help-search::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  pointer-events: none;
}

.help-search::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 1.5px;
  height: 6px;
  margin-top: 2px;
  background: var(--ink-soft);
  transform: rotate(-45deg);
  transform-origin: top;
  pointer-events: none;
}

/* ─── Page frame ──────────────────────────────────────────────────────────── */

.help-page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 24px 96px;
  display: grid;
  grid-template-columns: 13rem 1fr;
  /* Column gap only. A plain `gap` also spaces the ROWS, and since the hero, the
     quick answers and the two columns are each a row of this grid, that put 48px
     on top of every margin below — 84px of dead air under the title. */
  gap: 0 48px;
  align-items: start;
}

.help-hero {
  grid-column: 1 / -1;
  padding: 48px 0 8px;
  max-width: 34rem;
}

.help-hero h1 {
  display: block;               /* style.css hides h1 outright */
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}

.help-hero p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ─── Quick answers ────────────────────────────────────────────────────────
   The five questions people actually arrive with. Nobody browses a help page. */

.help-quick {
  grid-column: 1 / -1;
  margin: 26px 0 0;
}

/* Names a group of chips. Five unlabelled pills under a title look like
   navigation nobody finished. */
.group-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.help-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-quick a {
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  background: var(--wash);
  border-radius: 999px;
  padding: 8px 15px;
  transition: background 0.15s;
}

.help-quick a:hover { background: rgba(0, 0, 0, 0.07); }

/* ─── Section rail ─────────────────────────────────────────────────────────
   Sticky on desktop; a horizontal scroller on a phone. Each entry carries its
   section's colour, so the rail and the headings agree at a glance. */

.help-rail .group-label { display: none; }

.help-rail {
  position: sticky;
  top: 78px;
  margin-top: 44px;
  font-size: 15px;
}

.help-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.3;
}

.help-rail a:hover { color: var(--ink); }

.help-rail .dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hue);
}

/* ─── Sections ───────────────────────────────────────────────────────────── */

.help-body {
  min-width: 0;
  margin-top: 44px;   /* level with the rail beside it */
  /* PINNED to the second column. Searching hides the rail, and without this the
     grid auto-placed the answers into the 13rem gutter it left behind. */
  grid-column: 2;
}

.help-section { scroll-margin-top: 88px; }

.help-section + .help-section { margin-top: 44px; }

.help-section h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.help-section h2::before {
  content: "";
  width: 22px;
  height: 9px;
  border-radius: 999px;
  background: var(--hue);
  flex: none;
}

/* ─── One question ────────────────────────────────────────────────────────
   <details>, so it works with no JavaScript, arrives keyboard-operable and
   screen-reader-labelled for free, and find-in-page can still reach inside it.
   The script on this page adds search and deep links; it is not load-bearing. */

.qa {
  border-top: 1px solid var(--rule);
  scroll-margin-top: 88px;
}

.help-section .qa:last-of-type { border-bottom: 1px solid var(--rule); }

.qa > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 15px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

.qa > summary::-webkit-details-marker { display: none; }

/* Deliberately NOT tinted in the section colour: amber (#E0A43B) and green
   (#7FBF5B) on white fail contrast at text sizes. The colour lives in the
   section bar, the rail dot and the step numbers, where it is decoration with
   the text alongside it. */
.qa > summary:hover { color: var(--ink); }

/* The chevron: two lines from a rotated square, so there is no icon to load. */
.qa > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}

.qa[open] > summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.qa-a {
  padding: 0 0 20px;
  max-width: 34rem;
}

.qa-a > :first-child { margin-top: 0; }
.qa-a > :last-child { margin-bottom: 0; }

.qa-a p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.85em;
}

.qa-a strong,
.qa-a b { font-weight: 500; }   /* 500 is the heaviest weight we own */

/* The quiet line under an answer: a caveat, a shortcut, or what stops the
   steps working. Ruled in the section colour so the eye can skip it on the way
   past, and find it again when the steps did not work. */
.qa-a .note {
  font-size: 15px;
  color: var(--ink-soft);
  border-left: 2px solid var(--hue);
  padding-left: 13px;
  margin: 0 0 0.85em;
}

/* ─── Steps ───────────────────────────────────────────────────────────────
   Anything past two taps gets numbered, on the web as in the app. These were
   missing outright from three answers — "Invite a ZooKeeper" cited a step 3
   that was not on the page. */

.qa-a ol {
  counter-reset: step;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.qa-a ol li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0.6em;
}

.qa-a ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hue);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qa-a ul {
  margin: 0 0 1em;
  padding-left: 1.15em;
}

.qa-a ul li {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0.4em;
}

/* ─── A route through the app ─────────────────────────────────────────────
   "gear → the ZooAnimal → the ZooKeeper" appeared inline, in bold, in nine
   answers — a tap path pretending to be a sentence. It is a route: it gets to
   look like one. */

.path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.path li {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--wash);
  border-radius: 7px;
  padding: 5px 10px;
  margin: 0;
  line-height: 1.3;
}

.path li + li::before {
  content: "→";
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-weight: 400;
}

/* ─── Access levels ──────────────────────────────────────────────────────── */

.levels { margin: 0 0 1em; }

.level {
  padding: 13px 0;
  border-top: 1px solid var(--rule);
}

.level:last-child { border-bottom: 1px solid var(--rule); }

.level b {
  display: block;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 3px;
}

.level span {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ─── Search states ─────────────────────────────────────────────────────── */

[hidden] { display: none !important; }

.help-empty {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 32px 0;
  margin: 0;
}

.help-empty a { color: var(--ink); }

/* ─── Foot ──────────────────────────────────────────────────────────────── */

.help-foot {
  grid-column: 1 / -1;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-soft);
}

.help-foot a { color: var(--ink); }

/* ─── Narrow ─────────────────────────────────────────────────────────────
   The rail stops being a sidebar and becomes a scrolling row of chips. It sits
   under the sticky search rather than inside it: two sticky bars on a phone
   leaves no room for the answer. */

@media (max-width: 860px) {
  .help-page {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 72px;
  }

  .help-hero { padding-top: 32px; }
  .help-hero h1 { font-size: 28px; }

  .help-rail .group-label { display: block; margin: 0 0 10px; }

  .help-rail {
    position: static;
    margin: 26px -20px 8px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .help-rail::-webkit-scrollbar { display: none; }

  .help-rail ol {
    display: flex;
    gap: 8px;
    width: max-content;
  }

  .help-rail a {
    padding: 8px 14px;
    background: var(--wash);
    border-radius: 999px;
    white-space: nowrap;
    color: var(--ink);
  }

  .help-body {
    grid-column: 1;   /* one track down here; column 2 would invent a second */
    margin-top: 20px;
  }
}

@media (max-width: 560px) {
  .help-top-inner { padding: 12px 20px; gap: 12px; }
  .help-page { padding-left: 20px; padding-right: 20px; }
  .help-home { display: none; }        /* the search needs the whole width */
  .qa > summary { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .qa > summary::after { transition: none; }
}