/* Help Centre: /help and /help/<topic>. How to use the Atlas Mind app, never how it works.
 * On the site's tokens (site.css). A topic list beside one readable column; diagrams are drawn
 * here, not pictured: a schematic of the window with numbered yellow pins and a key (the topic
 * pages' pin language), a drawn flow of steps, a scale of choices and a nest of what belongs to what.
 * Yellow means "numbered, look here" and nothing else, as on the topic pages. */

:root { --pin: var(--yellow); --w-ground: #101010; --w-edge: #1d1d1d; --w-panel: #161616; --w-surface: #1f1f1f;
  --w-line: #242424; --w-text: #c9c9c9; --w-dim: #8a8a8a; }

/* ---------- Page ---------- */
.help { padding-bottom: clamp(56px, 8vw, 112px); }
.help .button { border-radius: 0; }
.help-head { display: grid; gap: 18px; padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 48px); }
.help-head .page-title { font-size: clamp(36px, 4.4vw, 60px); max-width: 18ch; }
.help-head .lede { max-width: 58ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }
.help-layout { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 80px); align-items: start; }

/* ---------- Topic list ---------- */
.help-nav { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.help-nav h2 { margin: 0 0 8px; padding: 0 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.help-nav ul { margin: 0 0 18px; padding: 0; list-style: none; }
.help-nav a { display: block; padding: 7px 12px; font-size: 14px; line-height: 1.35; color: var(--text-body); text-decoration: none; border-left: 1px solid var(--border); }
.help-nav a:hover { color: var(--text); background: var(--panel); }
.help-nav a[aria-current="page"] { color: var(--text); border-left-color: var(--pin); background: var(--panel-active); }

/* ---------- Article ---------- */
.help-doc { max-width: 760px; min-width: 0; }
.help-doc > section { padding: clamp(28px, 3.4vw, 44px) 0; border-top: 1px solid var(--border); }
.help-doc > section:first-child { border-top: 0; padding-top: 0; }
.help-doc h2 { margin: 0 0 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; scroll-margin-top: 24px; }
.help-doc h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 500; color: var(--text); scroll-margin-top: 24px; }
.help-doc p, .help-doc li { font-size: 16px; line-height: 1.65; color: var(--text-body); }
.help-doc p { margin: 0 0 14px; }
.help-doc p:last-child { margin-bottom: 0; }
.help-doc ul { margin: 0 0 14px; padding-left: 20px; }
.help-doc ul li { margin-bottom: 6px; }
.help-doc ul li::marker { color: var(--text-dim); }
.help-doc a { color: var(--text); text-underline-offset: 3px; }
.help-doc strong { color: var(--text); font-weight: 500; }

/* Numbered steps: two-digit numbers in the gutter, as the site's timeline counts. */
.steps { counter-reset: step; margin: 6px 0 18px; padding: 0; list-style: none; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 12px 44px; }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 2px; width: 28px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.steps > li:last-child { padding-bottom: 0; }

/* A control's own name, as the app prints it. */
.ui { padding: 1px 6px; border-radius: 4px; background: var(--panel-active); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); font-size: 0.92em; font-weight: 500; white-space: nowrap; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border-radius: 4px; background: var(--panel); box-shadow: inset 0 -1px 0 var(--border-strong), inset 0 0 0 1px var(--border-strong); font: 500 0.86em/1.7 var(--font); color: var(--text); text-align: center; }

/* A note set off by hairlines above and below, as the site's ruled rows are; no box, no side bar.
 * A note that asks for care leads its heading with a small amber dot. */
.note { margin: 20px 0; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.note > strong:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-dim); }
.note p { font-size: 15px; }
.note[data-kind="care"] > strong:first-child::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

/* What you see, what it means, what to do. */
.states { width: 100%; margin: 8px 0 18px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.states th, .states td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--border); color: var(--text-body); }
.states thead th { padding-top: 0; border-top: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.states tbody th { color: var(--text); font-weight: 500; width: 32%; }

/* Next and previous topic. */
.help-next { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); }
.help-next a { display: grid; gap: 2px; min-height: 44px; color: var(--text); text-decoration: none; font-size: 16px; }
.help-next a span { font-size: 12px; color: var(--text-dim); }
.help-next a:hover { text-decoration: underline; text-underline-offset: 4px; }
.help-next a[rel="next"] { margin-left: auto; text-align: right; }

/* ---------- Diagram: a schematic of the window ----------
 * Drawn with boxes, not a screenshot, so it stays true when the app's colours move. The pins keep
 * their size; in a narrow figure the drawn words turn into bars and the key carries the meaning. */
.figure { margin: 22px 0 26px; }
.figure figcaption { margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.wm { container-type: inline-size; position: relative; display: grid; grid-template-rows: 26px minmax(0, 1fr); aspect-ratio: var(--ratio, 16 / 10);
  overflow: visible; border-radius: 12px; background: var(--w-ground); box-shadow: 0 0 0 1px var(--w-edge), 0 30px 80px -30px rgb(0 0 0 / 0.9); }
.wm-bar { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid var(--w-line); }
.wm-bar i:not(.hp-pin) { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
.wm-bar i:nth-child(1) { background: #ed4640; } .wm-bar i:nth-child(2) { background: #fbac3a; } .wm-bar i:nth-child(3) { background: #29ac32; }
.wm-bar b { margin-left: auto; margin-right: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.3em; color: var(--w-dim); }
.wm-body { display: grid; grid-template-columns: var(--cols, 22% minmax(0, 1fr)); gap: 6px; min-height: 0; padding: 6px; }
.wm-col { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border-radius: 8px; background: var(--w-panel); }
.wm-col[data-flat] { background: transparent; padding: 4px; }
.wm-row { display: flex; gap: 4px; min-width: 0; }
.wm-row > * { flex: 1; }
.wm-box { position: relative; min-width: 0; padding: 6px 8px; border-radius: 6px; background: var(--w-surface); }
.wm-box[data-grow] { flex: 1; }
.wm-box[data-tall] { min-height: 30%; }
.wm-box[data-line] { background: transparent; box-shadow: inset 0 0 0 1px var(--w-line); }
.wm-box[data-on] { box-shadow: inset 0 0 0 1px var(--pin); }
.wm-t { display: block; overflow: hidden; font-size: 11px; line-height: 1.5; color: var(--w-text); white-space: nowrap; text-overflow: ellipsis; }
.wm-t[data-dim] { color: var(--w-dim); }
.wm-t[data-on] { color: var(--text); font-weight: 500; }
.wm-gap { flex: 1; }
.wm-chat { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--w-surface); box-shadow: inset 0 0 0 1px var(--w-line); }
.wm-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.wm-rail i:not(.hp-pin) { width: 14px; height: 14px; border-radius: 4px; background: var(--w-surface); box-shadow: inset 0 0 0 1px var(--w-line); }
.wm-rail i[data-on]:not(.hp-pin) { box-shadow: inset 0 0 0 1px var(--pin); }
@container (max-width: 520px) {
  .wm-t, .wm-t[data-dim], .wm-t[data-on] { height: 6px; margin: 3px 0; border-radius: 3px; background: #2a2a2a; color: transparent; }
  .wm-t[data-on] { background: #4a4a4a; }
  .wm-bar b { display: none; }
}

/* Pins: numbered yellow discs set on what they point at (--x, --y as percentages of the figure). */
.hp-pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--pin); color: #111; font: 700 11px/1 var(--font); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #0b0b0b, 0 3px 10px rgb(0 0 0 / 0.55); }
/* A pin set inside what it names, at its right end, so it stays on it at any width. */
.wm .pinned { position: relative; display: block; }
.wm .pinned > .wm-t { padding-right: 26px; }
.wm-box, .wm-chat { position: relative; }
.hp-pin[data-in] { left: auto; right: 2px; top: 50%; margin: -11px 0 0; }
.pin-key { counter-reset: key; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 28px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--border); }
.pin-key li { counter-increment: key; position: relative; padding-left: 32px; font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.pin-key li::before { content: counter(key); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pin); color: #111; font: 700 10px/1 var(--font); }
.pin-key b { color: var(--text); font-weight: 500; }

/* ---------- Diagram: a flow of steps on a drawn line ---------- */
.flow { counter-reset: flow; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; margin: 22px 0 26px; padding: 30px 0 0; list-style: none; }
.flow::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--border-strong), var(--border-strong) 85%, transparent); }
.flow > li { counter-increment: flow; position: relative; display: grid; gap: 6px; align-content: start; }
.flow > li::before { content: ""; position: absolute; top: -30px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--text-dim); }
.flow > li:last-child::before { background: var(--pin); box-shadow: none; }
.flow > li > span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.flow > li > span::before { content: counter(flow, decimal-leading-zero); }
.flow b { font-size: 15px; font-weight: 500; color: var(--text); }
.flow p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }

/* ---------- Diagram: a scale of choices, least to most ---------- */
.scale { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 22px 0 26px; border-top: 1px solid var(--border-strong); }
.scale > div { display: grid; gap: 6px; align-content: start; padding: 16px 18px 4px 0; }
.scale > div + div { padding-left: 18px; border-left: 1px solid var(--border); }
.scale b { font-size: 16px; font-weight: 500; color: var(--text); }
.scale small { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.scale p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }
.scale-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--text-dim); }

/* ---------- Diagram: what belongs to what ---------- */
.nest { margin: 22px 0 26px; padding: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-strong); }
.nest > b, .nest-in > b { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); }
.nest-in { padding: 12px; border-radius: 8px; background: var(--panel); }
.nest-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nest-row + .nest-row, .nest-in + .nest-in, .nest-row + .nest-in, .nest-in + .nest-row { margin-top: 10px; }
.nest-row > span { padding: 6px 10px; border-radius: 6px; background: var(--panel-active); font-size: 13.5px; color: var(--text-body); }
.nest-row > span[data-on] { box-shadow: inset 0 0 0 1px var(--pin); color: var(--text); }
.nest-note { margin-top: 10px; font-size: 13px; color: var(--text-dim); }

/* ---------- The Help Centre home ---------- */
.help-find { display: grid; gap: 8px; max-width: 560px; }
.help-find label { font-size: 13px; color: var(--text-dim); }
.help-find input { height: 46px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 0; background: var(--panel); font-size: 16px; }
.help-find input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgb(111 180 255 / 0.25); }
.help-find output { min-height: 20px; font-size: 13px; color: var(--text-dim); }
.topics { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.topics > li { border-bottom: 1px solid var(--border); }
.topics a { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 6px 32px; padding: 18px 0; color: inherit; text-decoration: none; }
.topics a:hover b, .topics a:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }
.topics b { font-size: 17px; font-weight: 500; color: var(--text); }
.topics span { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.topics-group { margin: 40px 0 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.topics-empty { padding: 18px 0; color: var(--text-body); }

/* ---------- Narrow ---------- */
@media (max-width: 960px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-nav { position: static; max-height: none; margin-bottom: 28px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
  .help-nav h2 { display: none; }
  .help-nav ul { display: flex; gap: 2px; margin: 0; }
  .help-nav a { white-space: nowrap; border-left: 0; border-bottom: 1px solid var(--border); }
  .help-nav a[aria-current="page"] { border-bottom-color: var(--pin); }
  .flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 22px; padding: 0 0 0 30px; }
  .flow::before { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; background: var(--border-strong); }
  .flow > li::before { top: 4px; left: -30px; }
}
@media (max-width: 760px) {
  /* A phone figure grows to hold its drawing rather than keep the window's shape. */
  .wm { aspect-ratio: auto; min-height: 260px; }
  .wm-box[data-grow] { min-height: 140px; }
  .topics a { grid-template-columns: minmax(0, 1fr); }
  .scale { grid-template-columns: minmax(0, 1fr); }
  .scale > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
  .states thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .states, .states tbody, .states tr, .states th, .states td { display: block; width: auto; }
  .states tr { padding: 12px 0; border-top: 1px solid var(--border); }
  .states th, .states td { padding: 0 0 6px; border-top: 0; }
  .states tbody th { width: auto; }
  .help-doc p, .help-doc li { font-size: 15.5px; }
}
.wm-bar, .wm-rail { position: relative; }