/* ---------------------------------------------------------------------------
   The documentation system: the help panel, and the guide page.

   One stylesheet for both, and loaded alongside whichever of the app's two
   stylesheets the page already has -- styles.css on the family pages, admin.css
   in the console, drive.css on the driver's. The panel appears over all three,
   so it cannot belong to any of them.

   That is why everything below is written against the tokens those stylesheets
   already agree on: --bg, --surface, --line, --text, --muted, --accent and the
   status colours are defined, with the same meanings, in each. Where they
   differ -- the console calls its radius --r and its accent text --on-accent,
   the family pages call them --radius and --accent-text -- the fallback chain
   below picks whichever is present, and ends in a literal so the panel still
   looks like itself on a page that has neither.

   Nothing here styles a bare element selector. A stylesheet that restyled `p`
   would restyle the page underneath it the moment it was linked.
   --------------------------------------------------------------------------- */

.docs-body,
.docs-panel,
.docs-page {
  --docs-radius: var(--r, var(--radius, 10px));
  --docs-radius-lg: var(--r-lg, 16px);
  --docs-line: var(--line, rgba(15, 23, 42, 0.09));
  --docs-surface: var(--surface, #fff);
  --docs-surface-2: var(--surface-2, #f5f7fb);
  --docs-text: var(--text, #1b1f24);
  --docs-muted: var(--muted, #5c6672);
  --docs-accent: var(--accent, #1d4ed8);
  --docs-on-accent: var(--on-accent, var(--accent-text, #fff));
  --docs-warn: var(--warn, #b54708);
  --docs-shadow: var(--sh-3, var(--shadow, 0 8px 32px rgba(16, 24, 40, 0.18)));
}

/* --- The panel ------------------------------------------------------------
   Nothing here styles the button that opens it: each bar supplies its own, in
   its own vocabulary, for the reason set out at the head of docs.js. */

/* A right-hand sheet on a desk screen and a bottom sheet on a phone, which is
   the same decision the console's dialogs and the driver's stop sheet already
   make. The screen it is about stays visible beside or above it on purpose:
   half of what it explains is a colour or a badge on that screen, and a reader
   who cannot see both at once has to remember what they were asking. */
.docs-panel {
  padding: 0;
  border: none;
  color: var(--docs-text);
  background: var(--docs-surface);
  box-shadow: var(--docs-shadow);
  max-height: 100dvh;
  max-width: 100vw;
}

.docs-panel::backdrop {
  background: rgba(8, 11, 18, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.docs-panel[open] {
  display: flex;
  flex-direction: column;
}

@media (min-width: 46rem) {
  .docs-panel {
    /* Pinned to the right edge, full height. `inset` rather than a transform so
       the dialog's own top-layer centring is overridden outright -- a partly
       overridden centring is how a sheet ends up half off the screen. */
    inset: 0 0 0 auto;
    width: min(28rem, 100vw);
    height: 100dvh;
    border-left: 1px solid var(--docs-line);
    animation: docs-slide-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (max-width: 45.999rem) {
  .docs-panel {
    inset: auto 0 0 0;
    width: 100vw;
    height: min(85dvh, 44rem);
    border-radius: var(--docs-radius-lg) var(--docs-radius-lg) 0 0;
    padding-bottom: var(--safe-bottom, 0px);
    animation: docs-slide-up 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes docs-slide-in {
  from { transform: translateX(1.5rem); opacity: 0; }
}

@keyframes docs-slide-up {
  from { transform: translateY(1.5rem); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-panel { animation: none; }
}

.docs-panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--docs-line);
}

.docs-panel__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  /* The screen's name can be long and the close button must not be pushed off
     the edge by it. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-panel__close {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--docs-muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: var(--docs-radius);
  cursor: pointer;
}

.docs-panel__close:hover { background: var(--docs-surface-2); color: var(--docs-text); }
.docs-panel__close:focus-visible { outline: 2px solid var(--docs-accent); outline-offset: 2px; }

.docs-panel__tools { padding: 0.75rem 1rem 0; }

.docs-panel__search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border, var(--docs-line));
  border-radius: var(--docs-radius);
  background: var(--docs-surface-2);
  color: inherit;
  font: inherit;
  /* 16px or larger, or iOS zooms the whole page on focus and the sheet ends up
     wider than the screen it is pinned to. */
  font-size: max(1rem, 16px);
}

.docs-panel__search:focus-visible { outline: 2px solid var(--docs-accent); outline-offset: 1px; }

.docs-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 1rem 1.25rem;
}

.docs-panel__foot {
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--docs-line);
  font-size: 0.9rem;
}

/* --- A row in any list of topics ------------------------------------------ */

.docs-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--docs-radius);
  background: none;
  color: inherit;
  font: inherit;
  padding: 0.6rem 0.65rem;
  cursor: pointer;
}

.docs-row + .docs-row { margin-top: 0.15rem; }
.docs-row:hover { background: var(--docs-surface-2); }
.docs-row:focus-visible { outline: 2px solid var(--docs-accent); outline-offset: 1px; }

.docs-row__title { display: block; font-weight: 600; }

.docs-row__summary {
  display: block;
  margin-top: 0.15rem;
  color: var(--docs-muted);
  font-size: 0.87rem;
  line-height: 1.45;
}

/* Why a topic is at the top: a signal from the screen put it there. Said out
   loud rather than left as a silent reordering, which reads as the panel
   guessing wrong rather than as the panel answering. */
.docs-row__why {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--docs-accent);
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: none;
}

.docs-back {
  border: none;
  background: none;
  color: var(--docs-accent);
  font: inherit;
  font-size: 0.87rem;
  padding: 0.2rem 0;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.docs-back:focus-visible { outline: 2px solid var(--docs-accent); outline-offset: 2px; }

.docs-panel__areas { margin-top: 1.25rem; padding-top: 0.9rem; border-top: 1px solid var(--docs-line); }
.docs-panel__areas h3 { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--docs-muted); font-weight: 650; }
.docs-panel__areas ul { margin: 0; padding: 0; list-style: none; }
.docs-panel__areas li { margin-bottom: 0.45rem; font-size: 0.87rem; line-height: 1.45; }
.docs-panel__areablurb { color: var(--docs-muted); }

.docs-lead { margin: 0 0 0.6rem; color: var(--docs-muted); font-size: 0.85rem; }
.docs-empty { margin: 0.5rem 0; font-weight: 600; }

/* --- A topic, wherever it is rendered ------------------------------------- */

.docs-topic { margin: 0 0 2rem; }
.docs-topic:last-child { margin-bottom: 0.5rem; }

.docs-topic__title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
  /* Anchored sections land under a sticky bar on the guide page without this. */
  scroll-margin-top: 1.5rem;
}

.docs-topic__summary {
  margin: 0 0 0.8rem;
  color: var(--docs-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.docs-topic p { margin: 0 0 0.75rem; line-height: 1.6; }
.docs-topic code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.88em;
  background: var(--docs-surface-2);
  border-radius: 4px;
  padding: 0.1em 0.3em;
}

.docs-list,
.docs-steps { margin: 0 0 0.85rem; padding-left: 1.25rem; }
.docs-list li,
.docs-steps li { margin-bottom: 0.35rem; line-height: 1.55; }

.docs-defs { margin: 0 0 0.9rem; }
.docs-defs dt { font-weight: 650; margin-top: 0.7rem; }
.docs-defs dt:first-child { margin-top: 0; }
.docs-defs dd { margin: 0.2rem 0 0; color: var(--docs-text); line-height: 1.55; }

/* An aside: true, and not the main point. */
.docs-note {
  color: var(--docs-muted);
  font-size: 0.9rem;
  border-left: 2px solid var(--docs-line);
  padding-left: 0.7rem;
}

/* Something that costs you if you read past it. Carries a visually-hidden
   "Important:" from the renderer, because the colour is the whole of the signal
   otherwise and a colour is not available to every reader. */
.docs-warn {
  color: var(--docs-warn);
  border-left: 3px solid var(--docs-warn);
  padding-left: 0.7rem;
  font-weight: 500;
}

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

.docs-see {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--docs-line);
}

.docs-see h3 { margin: 0 0 0.35rem; font-size: 0.8rem; color: var(--docs-muted); font-weight: 650; }
.docs-see__list { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.docs-see__list li { margin-bottom: 0.25rem; }

/* --- The guide page ------------------------------------------------------- */

.docs-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem 4rem;
  color: var(--docs-text);
}

.docs-page__head { padding: 1rem 0 1.5rem; }
.docs-page__head h1 { margin: 0 0 0.4rem; font-size: 1.6rem; }

.docs-page__lede {
  margin: 0 0 1.1rem;
  max-width: 44rem;
  color: var(--docs-muted);
  line-height: 1.6;
}

.docs-page__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.docs-page__search {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border, var(--docs-line));
  border-radius: var(--docs-radius);
  background: var(--docs-surface);
  color: inherit;
  font: inherit;
  font-size: max(1rem, 16px);
}

.docs-page__audience { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.docs-chip {
  border: 1px solid var(--border, var(--docs-line));
  border-radius: 999px;
  background: var(--docs-surface);
  color: var(--docs-muted);
  font: inherit;
  font-size: 0.83rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

.docs-chip--on {
  background: var(--docs-accent);
  border-color: var(--docs-accent);
  color: var(--docs-on-accent);
}

.docs-chip--all { border-style: dashed; }
.docs-chip:focus-visible { outline: 2px solid var(--docs-accent); outline-offset: 2px; }

.docs-page__count { margin: 0.7rem 0 0; color: var(--docs-muted); font-size: 0.85rem; }

.docs-page__main { display: block; }

@media (min-width: 60rem) {
  .docs-page__main {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }

  .docs-page__nav {
    position: sticky;
    top: 1rem;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
  }
}

/* On a phone the rail is a contents page above the guide rather than beside it:
   a sticky sidebar on a 400px screen is a sidebar covering the thing it indexes. */
@media (max-width: 59.999rem) {
  .docs-page__nav {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--docs-line);
  }
}

.docs-nav__area { margin-bottom: 1rem; }

.docs-nav__head {
  display: block;
  font-weight: 650;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  color: var(--docs-text);
  text-decoration: none;
}

.docs-nav__head:hover { text-decoration: underline; }
.docs-page__nav ul { margin: 0; padding: 0 0 0 0.1rem; list-style: none; }
.docs-page__nav li { margin-bottom: 0.2rem; }

.docs-nav__topic {
  display: block;
  color: var(--docs-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  text-decoration: none;
  padding: 0.1rem 0;
}

.docs-nav__topic:hover { color: var(--docs-accent); text-decoration: underline; }

.docs-area { margin-bottom: 2.5rem; }

.docs-area__title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  scroll-margin-top: 1rem;
}

.docs-area__blurb {
  margin: 0 0 1.5rem;
  color: var(--docs-muted);
  line-height: 1.55;
}

.docs-page__content .docs-topic {
  padding: 1.1rem 1.25rem;
  background: var(--docs-surface);
  border: 1px solid var(--docs-line);
  border-radius: var(--docs-radius);
  margin-bottom: 1rem;
}

.docs-page__content .docs-topic__title { font-size: 1.05rem; scroll-margin-top: 1rem; }

/* Where a link landed. A tint rather than a focus ring: the reader asked to be
   brought here, so the job is to say "this one" without also claiming the
   keyboard. */
.docs-topic--linked { border-color: var(--docs-accent); box-shadow: 0 0 0 3px var(--docs-accent-soft, rgba(29, 78, 216, 0.12)); }

.docs-empty-page { padding: 2rem 0; max-width: 40rem; }
.docs-empty-page h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.docs-empty-page p { margin: 0; color: var(--docs-muted); line-height: 1.6; }

@media print {
  /* A manual gets printed. The rail, the filters and the search are all
     controls, and a sheet of paper has none. */
  .docs-page__nav,
  .docs-page__tools,
  .docs-page__count,
  .site-footer,
  .docs-panel { display: none !important; }

  .docs-page__main { display: block; }
  .docs-page__content .docs-topic { border: none; padding: 0; break-inside: avoid; }
}