/* ==========================================================
   DeltaVisor help centre.

   Loaded after core.css, which brings the tokens, the chrome (header, nav,
   footer), the button and `.prose` primitives, and the `--eg-*` signal
   swatches. Nothing here declares a colour or a font; every value comes from
   universal.css through core.css.

   TWO LAYOUTS AND ONE COMPONENT SET:

   THE HUB (index.html) leads with the product's own sequence, find, activate,
   watch, get told, because that is the order these questions get asked in and
   an alphabetical grid of categories hides it. The spine is `.help-flow`.

   AN ARTICLE (every other page) is a persistent topic rail plus one prose
   column. The rail is the minisite's spine and stays put, so a reader who
   landed on one deep link from the app can see everything else without going
   back to the hub first.

   DEEP LINKS ARE THE POINT. Every `h2` in an article carries an id, a
   `scroll-margin-top` clear of the sticky header, and a permalink control that
   help.js attaches. `/help/watchers/#digest` is meant to be a URL somebody
   sends to a colleague.
========================================================== */

/* ==========================================================
   SHELL
========================================================== */

.help-shell {
  max-width: var(--home-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(2rem, 4vw, 3.5rem) var(--rhythm-section);
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* One column below the width where a 15rem rail stops leaving a readable
   measure beside it. The rail moves above the article and becomes a disclosure,
   so it costs one line rather than a screen. */
@media (max-width: 62rem) {
  .help-shell { grid-template-columns: minmax(0, 1fr); gap: var(--rhythm-block); }
}

/* ==========================================================
   THE TOPIC RAIL
========================================================== */

.help-rail {
  position: sticky;
  /* Clear of the sticky site header, with a little air. */
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  font-size: var(--t-sm);
}

@media (max-width: 62rem) {
  .help-rail { position: static; }
}

/* THE PANEL CARRIES THE SPACING, AT EVERY WIDTH.
   The groups are children of `.help-rail__panel`, not of `.help-rail`, so the
   gap declared on the rail never reached them: the panel was only made a flex
   column inside the narrow-width rule below, and above that breakpoint it was a
   plain block with zero space between groups. Every group heading sat hard
   against the last link of the group before it. */
.help-rail__panel { display: flex; flex-direction: column; gap: var(--s-5); }

.help-rail__group { display: flex; flex-direction: column; gap: var(--s-2); }

.help-rail__h {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

.help-rail a {
  color: var(--ink-mid);
  text-decoration: none;
  line-height: 1.35;
  padding-block: 0.1875rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.help-rail a:hover { color: var(--ink); }

/* The current page. The signal is weight and ink, never a coloured edge on the
   row: a single-side colour border is banned across this product. */
.help-rail a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- the rail as a disclosure, narrow only ---------- */

.help-rail__toggle { display: none; }

@media (max-width: 62rem) {
  .help-rail__toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--paper-1);
    border: var(--rule-w) solid var(--rule);
    border-radius: var(--radius-md);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-sm);
    padding: 0.6875rem var(--s-4);
    cursor: pointer;
  }
  .help-rail__toggle::after {
    content: "▾";
    float: right;
    color: var(--ink-ghost);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .help-rail[data-open="true"] .help-rail__toggle::after { transform: rotate(180deg); display: inline-block; }
  .help-rail__panel { display: none; }
  .help-rail[data-open="true"] .help-rail__panel { display: flex; }
}

/* ==========================================================
   SEARCH
   One component, two sizes. `--lg` is the hub's; the plain one sits at the top
   of the rail on every article.
========================================================== */

.help-search { position: relative; }

.help-search__input {
  width: 100%;
  background: var(--field-bg);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  padding: 0.5625rem var(--s-4);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.help-search__input::placeholder { color: var(--ink-ghost); }
.help-search__input:hover { background: var(--field-bg-hover); }
.help-search__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--field-bg-hover);
}

.help-search--lg .help-search__input {
  font-size: var(--t-md);
  padding: 0.875rem var(--s-5);
  border-radius: var(--radius-lg);
}

/* Results are a plain list under the box rather than a floating popover. The
   hub has room, and a popover on the rail would be clipped by the sticky
   column's own scroll context. */
.help-search__out {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.help-search__out:empty { display: none; }

.help-search__hit {
  display: block;
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.help-search__hit:hover { background: var(--paper-2); }
.help-search__hit b {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 1.35;
}
.help-search__hit span {
  display: block;
  color: var(--ink-ghost);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.04em;
  margin-top: 0.125rem;
}

.help-search__none {
  padding: var(--s-3);
  color: var(--ink-ghost);
  font-size: var(--t-sm);
}

/* ==========================================================
   ARTICLE
========================================================== */

.help-crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin-bottom: var(--s-4);
}
.help-crumb a { color: var(--ink-ghost); text-decoration: none; }
.help-crumb a:hover { color: var(--ink-mid); }

.help-head { margin-bottom: var(--rhythm-block); }
.help-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, var(--t-3xl));
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  max-width: 24ch;
}
.help-head__lede {
  color: var(--ink-mid);
  font-size: clamp(1rem, 1.2vw, var(--t-md));
  line-height: 1.6;
  max-width: var(--measure-lede);
  margin: 0;
}

/* ---------- on this page ---------- */

/* Built by help.js from the article's own h2s, so it cannot fall out of step
   with the headings. Absent with JS off, which costs nothing: the headings and
   their anchors are in the HTML either way. */
.help-onpage {
  margin-bottom: var(--rhythm-block);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-1);
  border: var(--rule-w) solid var(--rule-soft);
  border-radius: var(--radius-md);
}
.help-onpage__h {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin-bottom: var(--s-3);
}
.help-onpage ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.help-onpage a {
  color: var(--ink-mid);
  text-decoration: none;
  font-size: var(--t-sm);
}
.help-onpage a:hover { color: var(--ink); }

/* ---------- prose ---------- */

.help-body h2 {
  /* Clear of the sticky site header when reached by anchor. */
  scroll-margin-top: 5rem;
  position: relative;
}

/* The permalink. Attached by help.js, hidden until the heading is hovered or
   the control itself is focused, so it never competes with the heading. */
.help-anchor {
  margin-left: 0.4em;
  color: var(--ink-ghost);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.help-body h2:hover .help-anchor,
.help-anchor:focus-visible { opacity: 1; }
.help-anchor:hover { color: var(--accent); }

/* A definition run: a short term and what it means. Used where a page has to
   name several things in a row and full paragraphs would bury them. */
.help-defs { margin: 0 0 var(--s-5); }
.help-defs > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
  border-top: var(--rule-w) solid var(--rule-soft);
}
.help-defs > div:last-child { border-bottom: var(--rule-w) solid var(--rule-soft); }
.help-defs dt { color: var(--ink); font-weight: 500; font-size: var(--t-sm); line-height: 1.45; }
.help-defs dd { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.6; }
@media (max-width: 40rem) {
  .help-defs > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

/* A callout. One tone, used where a paragraph would be read past and should
   not be. Deliberately not a colour-coded family of four. */
.help-note {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-2);
  border: var(--rule-w) solid var(--rule-soft);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: var(--measure);
}
.help-note strong { color: var(--ink); font-weight: 600; }
.help-note :last-child { margin-bottom: 0; }

/* Numbered steps, where the order genuinely is the instruction. */
.help-steps { counter-reset: step; list-style: none; margin: 0 0 var(--s-5); padding: 0; max-width: var(--measure); }
.help-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: var(--s-4);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.help-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--paper-3);
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
}
.help-steps strong { color: var(--ink); font-weight: 600; }

/* ---------- where to next ---------- */

.help-next {
  margin-top: var(--rhythm-section);
  padding-top: var(--rhythm-block);
  border-top: var(--rule-w) solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap-grid);
}
.help-next__card {
  display: block;
  padding: var(--pad-card);
  background: var(--paper-1);
  border: var(--rule-w) solid var(--rule-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.help-next__card:hover { border-color: var(--rule); background: var(--paper-2); }
.help-next__card b { display: block; color: var(--ink); font-weight: 600; margin-bottom: var(--s-2); }
.help-next__card span { display: block; color: var(--ink-mid); font-size: var(--t-sm); line-height: 1.55; }

/* ==========================================================
   HUB
========================================================== */

.help-hero {
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--rhythm-block);
  padding-inline: var(--gutter);
}
.help-hero__inner { max-width: var(--home-max); margin-inline: auto; }
.help-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, var(--t-4xl));
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: var(--s-3) 0 var(--s-4);
  max-width: 20ch;
}
.help-hero__lede {
  color: var(--ink-mid);
  font-size: clamp(1rem, 1.3vw, var(--t-lg));
  line-height: 1.55;
  max-width: var(--measure-lede);
  margin: 0 0 var(--rhythm-block);
}
.help-hero .help-search { max-width: 34rem; }

/* ---------- THE FLOW SPINE ----------
   The signature of this page, and it encodes something true rather than
   decorating: these four are the order the product is used in, and each is the
   thing the next one depends on. Numbering is honest here for the same reason
   it would be dishonest on a grid of unrelated categories.

   The connecting line is drawn on the track rather than per card, so it cannot
   fall out of alignment when a card wraps to a different height. */

.help-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid);
  position: relative;
}
@media (max-width: 64rem) { .help-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .help-flow { grid-template-columns: minmax(0, 1fr); } }

.help-step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--pad-card);
  background: var(--paper-1);
  border: var(--rule-w) solid var(--rule-soft);
  border-radius: var(--radius-md);
}

.help-step__n {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}
/* The track between one step and the next. A rule that runs out of the number
   to the card's edge, which is what reads as a sequence rather than four tiles.
   Dropped on the last step, and at narrow widths where the cards stack. */
.help-step__n::after {
  content: "";
  flex: 1;
  height: var(--rule-w);
  background: var(--rule);
}
.help-step:last-child .help-step__n::after { display: none; }
@media (max-width: 64rem) { .help-step__n::after { display: none; } }

.help-step h2 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
/* The DESCRIPTION, and only the description.
   `.help-step__n` is also a `<p>`, and `.help-step p` (0,1,1) outranks the
   single class that styles it (0,1,0), so an unscoped rule here handed the
   eyebrow `flex: 1` as well. In a column flex container that means "absorb the
   leftover height", so on the two cards with shorter copy the eyebrow measured
   40px against the others' 20px and pushed their headings a line down. Four
   cards in a row, two of them a line lower, and nothing in the markup to
   explain it. */
.help-step > p:not(.help-step__n):not(.help-step__links) {
  color: var(--ink-mid);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
/* Never the grower: `flex: 1` belongs on the description so every card's links
   sit on the same baseline as its neighbours'. */
.help-step__links { display: flex; flex-direction: column; gap: var(--s-2); flex: 0 0 auto; }
.help-step__links a {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--t-sm);
}
.help-step__links a:hover { text-decoration: underline; }

/* ---------- the secondary bands ---------- */

.help-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--gap-grid);
}
.help-card {
  display: block;
  padding: var(--pad-card);
  background: var(--paper-1);
  border: var(--rule-w) solid var(--rule-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.help-card:hover { border-color: var(--rule); background: var(--paper-2); }
.help-card b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.help-card p { margin: 0 0 var(--s-3); color: var(--ink-mid); font-size: var(--t-sm); line-height: 1.55; }
.help-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.help-card li { color: var(--ink-ghost); font-size: var(--t-xs); }

/* ==========================================================
   THE SIGNALS TABLE
   Its own component because it is the one page whose content is a matrix:
   a swatch, a name, what it means, and what fires it.
========================================================== */

.help-signals { display: flex; flex-direction: column; margin: 0 0 var(--s-6); }

.help-signal {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-4);
  border-top: var(--rule-w) solid var(--rule-soft);
}
.help-signal:last-child { border-bottom: var(--rule-w) solid var(--rule-soft); }

.help-signal__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 1.4;
}
.help-signal__body { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.6; }
.help-signal__body p { margin: 0; }
.help-signal__fires {
  display: block;
  margin-top: var(--s-2);
  color: var(--ink-ghost);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media (max-width: 40rem) {
  .help-signal { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* ==========================================================
   PLAN TABLE (billing)
   Hydrated by help.js from /public/plans so no limit is ever typed here. The
   markup ships a row that says where to look instead of a number that decays.
========================================================== */

.help-table-wrap { overflow-x: auto; margin: 0 0 var(--s-5); }
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 30rem;
}
.help-table th, .help-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: var(--rule-w) solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.5;
}
.help-table thead th {
  color: var(--ink-ghost);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
}
.help-table td { color: var(--ink-soft); }
.help-table tbody th { color: var(--ink); font-weight: 500; }
.help-table strong { color: var(--ink); font-weight: 600; }