.docs-layout {
  display: flex;
  min-height: calc(100vh - 140px);
}

.docs-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-border);
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.docs-sidebar h3 {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  padding: 0 1.5rem;
  margin: 1.5rem 0 0.5rem;
}

.docs-sidebar h3:first-child {
  margin-top: 0;
}

.docs-sidebar a {
  display: block;
  padding: 0.5rem 1.5rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}

.docs-sidebar a:hover {
  background: var(--color-surface);
}

.docs-sidebar a.active {
  border-left-color: var(--color-accent);
  background: var(--color-surface);
  font-weight: 500;
}

.docs-content {
  flex: 1;
  padding: 2rem 3rem;
  max-width: 900px;
}

.docs-content h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.docs-content .subtitle {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.docs-content h2 {
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}

.docs-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.docs-content h3 {
  font-size: 1.2rem;
  margin: 1.5rem 0 0.75rem;
  color: var(--color-text);
}

.docs-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.docs-content ul, .docs-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.docs-content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.docs-content code {
  background: var(--color-surface);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

.docs-content pre {
  background: var(--color-surface);
  padding: 1rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: 1rem;
}

.docs-content pre code {
  background: none;
  padding: 0;
}

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.docs-content th, .docs-content td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.docs-content th {
  background: var(--color-surface);
  font-weight: 600;
}

.tip-box {
  background: var(--color-success-subtle);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-radius: var(--radius-lg);
}

.tip-box strong {
  color: var(--color-success);
}

.warning-box {
  background: var(--color-warning-subtle);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-radius: var(--radius-lg);
}

.warning-box strong {
  color: var(--color-warning);
}

.step-list {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

.step-list li {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1rem;
}

.step-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.role-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: 0.5rem;
}

.role-badge.admin {
  background: var(--color-primary-light, rgba(30, 58, 95, 0.15));
  color: var(--color-primary, #1e3a5f);
}

.role-badge.coach {
  background: var(--color-success-subtle, rgba(16, 185, 129, 0.15));
  color: var(--color-success, #059669);
}

[data-theme="dark"] .role-badge.admin {
  background: rgba(107, 155, 209, 0.2);
  color: var(--color-primary-light, #6b9bd1);
}

[data-theme="dark"] .role-badge.coach {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-success, #34d399);
}

.csv-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.csv-download:hover {
  background: var(--color-accent-hover);
  color: var(--color-bg);
}

@media (max-width: 768px) {
  .docs-layout {
    flex-direction: column;
  }

  .docs-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .docs-content {
    padding: 1.5rem;
  }
}

/* ---------------------------------------------------------------
   Product videos in the help (TEA-758), and the Videos page.
   A vertical film is a phone flow, so it is held to a phone's width
   rather than stretched to the column: a 1080x1920 video in a 900px
   content area is a wall of phone.
   --------------------------------------------------------------- */
.docs-video {
  margin: var(--space-5) 0;
}

.docs-video-player {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.docs-video-portrait .docs-video-player {
  max-width: 320px;
}

.docs-video-landscape .docs-video-player {
  max-width: 720px;
}

.docs-video-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.docs-video-title {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.docs-video-link {
  color: var(--color-accent);
}

.docs-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0;
}

.docs-video-grid > .docs-video {
  min-width: 0;
  margin: 0;
}

/* ============================================================
   The family help landing page (TEA-761)

   The first screen of the help for a parent, a coach and a
   signed-out visitor. It renders in three frames -- the sidebar,
   layouts/main and the app shell -- so every rule here is
   container-relative: auto-fit tracks rather than viewport media
   queries, because the sidebar eats ~240px and a 768px breakpoint
   would stack the grid about 250px too late.

   Tokens only. --color-accent for the accents; --color-primary is
   structural navy and disappears in dark mode.
   ============================================================ */

.help-home {
  max-width: 1100px;
}

.help-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-8);
  margin-bottom: var(--space-6);
}

/* The headline and the lead, as one block, so the welcome film is the hero's
   SECOND item rather than a slab under it. 26rem is the words' floor: below
   it the film wraps to its own line and centres, which is the phone and the
   tablet. Above it the two sit side by side and the hero stops being a tall
   portrait video pinned to the left of an empty half-page (TEA-810). */
.help-hero-words {
  flex: 1 1 26rem;
  min-width: 0;
}

.help-hero-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
}

.help-hero-lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 46ch;
}

/* The film is 1080x1920 and .docs-video-portrait already holds it to a
   phone's 320px. What this adds is the centring: on its own line it sits in
   the middle of the hero rather than against the left edge. */
.help-hero-video {
  flex: 0 1 320px;
  min-width: 0;
  margin: 0 auto;
}

.help-hero-video .docs-video {
  margin: 0;
}


/* The grid (TEA-790). Three cards per row where there is room, two on a
   tablet, one on a phone -- and it is auto-fit that decides, not a viewport
   media query, because this page renders in three frames and the sidebar eats
   ~240px of the window in one of them. --help-card-min is the grid's one
   tuned number: at the page's 1100px cap four tracks of it will not fit and
   three will, which is the placement of three Matt asked for. */
.help-cards {
  --help-card-min: 280px;
  list-style: none;
  margin: 0 0 var(--space-8) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--help-card-min), 1fr));
  /* Stretch is the default and it is written down because it is the rule the
     row depends on: a card that sized to its own content would leave the
     short ones floating in a row of three. */
  align-items: stretch;
  /* And 1fr rows carry that across rows too. In an auto-height grid every
     1fr row resolves to the tallest row's content, so the eight cards are one
     size at every width -- which is the ask (Matt, TEA-810: "the cards all
     need to be the same size on all screens"), not just level within a row. */
  grid-auto-rows: 1fr;
  gap: var(--space-4);
}

/* A card is a grid item that stretches, so every card in a row is the same
   height whatever its title does. The alternating bands of v1.2 are gone: the
   grid gives the page its rhythm now, and two surfaces in a three-up grid
   read as a checkerboard rather than as a beat. */
.help-card {
  display: flex;
  min-width: 0;
}

/* The one labelled card would otherwise start its title a line lower than
   every other card in its row, and the poster with it. The reserve is an
   empty first line on the cards that have no label, sized off the label's own
   font metrics so the two match exactly. */
.help-card-inner::before {
  content: "";
  display: block;
  min-height: calc(1.3 * var(--text-xs));
}

.help-card-labelled .help-card-inner::before {
  display: none;
}

.help-card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* The title is the card's header and the way into the guide. It reserves two
   lines so the posters in a row start at the same height whether the title
   wraps or not. --color-primary is structural navy and vanishes in dark mode,
   so the hover colour is --color-accent everywhere. */
.help-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
  min-height: calc(2 * 1.35em);
}

.help-card-title-link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.help-card-title-link:hover,
.help-card-title-link:focus-visible {
  color: var(--color-focus);
  text-decoration: underline;
}

/* The one line, under the poster. It is the card's answer, so it takes the
   body colour rather than the muted one, and it stays at --text-md: a second
   large line is how eight cards became a page you scroll for a minute. */
.help-card-outcome {
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-text);
  /* Bottom of the card, not straight under the poster. Every card in a row is
     the same height now, so without this the one-line outcomes float and the
     three-line ones sit low, and the row reads ragged. */
  margin: auto 0 0 0;
}

/* The poster area. Every card fills it -- with a still, with the assistant
   card's questions, or with the seat kept for a film -- and every one of
   those is 16:9, so a row lines up and stays lined up the day a film lands. */
.help-card-media {
  width: 100%;
  min-width: 0;
  /* The SLOT is 16:9, not only the frame inside it. A single poster fills it
     exactly; the install card's pair is centred in it. That is what makes one
     card's footprint the same as the next one's whatever it holds. */
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

/* The install card, which has two films: iPhone and Android, side by side,
   because a parent knows which phone she is holding and making her choose
   inside the dialog adds a step to the one card where confidence is lowest.

   Side by side at EVERY width now (TEA-810). The 520px query that stacked
   them on a phone made this card roughly twice the height of every other one
   there, which is the thing Matt asked to be rid of; and the case for it was
   already contradicted three cards to the right, where a 1024px desktop gives
   the pair a 275px slot -- narrower than the 324px a 390px phone gives it.
   The pair is centred in the 16:9 slot rather than stretched to fill it: the
   posters are 1280x720 and cropping them to a taller box would eat the phone
   the still exists to show. */
.help-card-media-split {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* The poster itself: a real button, because it opens a dialog. 16:9 with the
   still cover-fitted, a play badge in the middle and the running time bottom
   right -- NN/g's rule that the duration is legible BEFORE play, never only
   in the scrub bar. */
.help-card-play {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.help-card-play-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.help-card-play:hover .help-card-play-frame,
.help-card-play:focus-visible .help-card-play-frame {
  border-color: var(--color-focus);
}

.help-card-poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Over the PHONE, not over the middle of the poster.

   The poster is composed in two halves -- the film's title set on the navy on
   the left, the phone frame on the right -- and a centred badge lands squarely
   on the title, so the card read "Install Team Ca(play)ain on your iPhone".
   72%/66% puts it on the lower-left of the phone image at every card width,
   where the picture behind it is dark bezel rather than words. The percentages
   track the composition in make-wide-poster.js: the phone occupies roughly
   68-93% of the canvas, so moving one without the other is what would break
   this. */
.help-card-play-badge {
  position: absolute;
  top: 66%;
  left: 72%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.help-card-play-badge svg {
  width: 18px;
  height: 18px;
  /* The triangle's own mass sits left of centre in the circle. */
  margin-left: 3px;
}

.help-card-play:hover .help-card-play-badge {
  background: var(--color-accent-hover);
}

/* The scrim under the chip and the label is rgba, not a token, for the same
   reason .modal's backdrop is: it is a veil over an arbitrary photograph, and
   a surface token would be opaque and hide the picture it exists to sit on. */
/* Bottom LEFT, which is the navy half of the poster and the corner the badge
   just vacated. On the install card's two side-by-side posters -- 155px wide
   at 1280 -- a bottom-right chip and a badge over the phone are the same few
   pixels. */
.help-card-play-chip {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Under the still, not on it: two posters in one card are ~155px wide and a
   burned-in "Install on iPhone" is an ellipsis at that size. */
.help-card-play-label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-text);
}

.help-card-play:hover .help-card-play-label,
.help-card-play:focus-visible .help-card-play-label {
  color: var(--color-focus);
}

/* The assistant card's representative image: the questions themselves, in the
   box every other card gives a still. It is the only card whose subject is
   words, and a parent who reads "ask the park anything" does not know what
   that covers until she sees a question she has actually had. */
.help-card-questions {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.help-card-question {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The seat kept for a film that is not made yet, at the size the poster will
   be, so the grid does not re-flow the day it is filmed. Quiet enough not to
   compete with the words, solid enough not to read as a player that failed to
   load. */
.help-card-coming {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.help-card-coming-icon {
  display: inline-flex;
}

.help-card-coming-icon svg {
  width: 24px;
  height: 24px;
}

.help-card-coming-note {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* The coach card: last, labelled, and visibly its own door. The accent edge
   is the only place on the page a card's border is not the structural one.

   It is a 1px border recoloured plus a 2px inset shadow rather than a 3px
   border, because a 3px border takes 2px out of the card's CONTENT box and
   this card's poster came out 2px narrower and 1px shorter than every other
   card's (TEA-810). A shadow paints, it does not take up room. */
.help-card-labelled .help-card-inner {
  border-left-color: var(--color-accent);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.help-card-label {
  font-size: var(--text-xs);
  line-height: 1.3;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

/* ------------------------------------------------------------------------
   The film modal (TEA-790).

   A <dialog>, so the top layer, the inert background, the Tab trap and
   Escape are the browser's rather than ours. What is left here is the look:
   a dimmed backdrop, a panel that fits a 1080x1920 film inside the viewport
   without the page scrolling, and a close control that is a real button.
   ------------------------------------------------------------------------ */
.help-film-modal {
  /* inset + margin auto is what centres a modal <dialog> once an explicit
     width is set; without them Chromium leaves the panel in the top-left. */
  inset: 0;
  margin: auto;
  width: min(92vw, 420px);
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  color: var(--color-text);
  overflow: hidden;
}

.help-film-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.help-film-modal-inner {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.help-film-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.help-film-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
  min-width: 0;
}

.help-film-modal-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}

.help-film-modal-body {
  padding: var(--space-4);
  overflow-y: auto;
}

/* The film, in the dialog. It is the only thing on the screen now, so it gets
   the height rather than the 200px cap a card gave it, and the partial's own
   caption is welcome back: on a card it repeated the label above it. */
.help-film-modal-body .docs-video {
  margin: 0;
}

.help-film-modal-body .docs-video-player {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}

/* The open transition, and the one place reduced motion has anything to say
   on this page. */
@media (prefers-reduced-motion: no-preference) {
  .help-film-modal[open] {
    animation: help-film-modal-in 140ms ease-out;
  }
}

/* The background scroll lock. A modal <dialog> makes the page inert but does
   not stop it scrolling under the backdrop, which on a phone is the film
   sliding away while you watch it. */
.help-modal-open {
  overflow: hidden;
}

@keyframes help-film-modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Search, below the cards. */
.help-find {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

/* The list of guide pages, folded under one line (TEA-789). It is the reader
   who can already name the thing, and eight 44px rows of it was the last
   third of the page for everybody else. Search sits above it and opens it,
   so a query is never filtering a list nobody can see. */
.help-more-pages {
  margin-top: var(--space-4);
}

/* The fold's one control. It was the card disclosure's class until TEA-790
   took the disclosures off the cards; it is its own now so that deleting one
   never silently restyles the other. */
.help-pages-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  cursor: pointer;
  list-style: none;
}

.help-pages-toggle::-webkit-details-marker {
  display: none;
}

.help-pages-toggle:hover,
.help-pages-toggle:focus-visible {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.help-pages-close,
.help-more-pages[open] .help-pages-open {
  display: none;
}

.help-more-pages[open] .help-pages-close {
  display: inline;
}

.help-links {
  list-style: none;
  margin: var(--space-4) 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-5);
}

.help-links-item {
  min-width: 0;
}

.help-links-item a {
  display: block;
  min-height: 44px;
  padding: var(--space-3) 0;
  /* 16px, the floor the frontend rules put on body text, and underlined at
     rest rather than on hover: --color-accent on --color-bg measures 4.07:1
     in light mode, which is the app's own link colour everywhere and under
     4.5:1, so the link must not be identified by colour alone. */
  font-size: var(--text-lg);
  color: var(--color-accent);
  text-decoration: underline;
}

.help-links-item a:hover,
.help-links-item a:focus-visible {
  color: var(--color-accent-hover);
}

.help-find-empty {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

/* The two install films, side by side, on /help/install. */
.install-guide-films {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

.install-guide-film {
  min-width: 0;
}

.install-guide-film > .docs-video {
  margin: 0 0 var(--space-3) 0;
}

.install-guide-film-platform {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.install-guide-film-steps {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
}

.install-guide-free {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}