/* Strivli help centre.
 *
 * Uses the product's own colour tokens rather than a documentation theme, because help that looks
 * like a different website reads as somebody else's website — and a tutor arrives here mid-task,
 * from a screen they were already on.
 *
 * Read, not operated: so this is the one Strivli surface that is deliberately WIDER-spaced and
 * larger-typed than the console. Measure is held near 68 characters, which is what makes a long
 * explanation survivable on a laptop.
 */

:root{
  --navy:#14213d; --ink:#182136; --ink-soft:#414b5e;
  --paper:#fffdfa; --surface:#f7f3ea; --surface-2:#efe9dc;
  --line:#dedbd3; --muted:#636974;
  --accent:#f27f62; --accent-ink:#8f3a22;
  --cyan:#257a85;
  --focus:#b3472a; --focus-bg:#fbeae4;
  --steady:#806526; --steady-bg:#faf1d8;
  --strong:#0d7b6d; --strong-bg:#e4f4f0;
  --radius:14px;
  --shadow:0 10px 30px rgba(20,33,61,.07);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media(prefers-color-scheme:dark){
  :root{
    --navy:#0e1424; --ink:#eef1f6; --ink-soft:#c2c9d6;
    --paper:#1a2032; --surface:#131826; --surface-2:#252d43;
    --line:#333c55; --muted:#98a2b8;
    --accent:#f79a7d; --accent-ink:#f8a184;
    --cyan:#6fd6e2;
    --focus:#f08a6b; --focus-bg:#3a2018;
    --steady:#dcb75c; --steady-bg:#332a12;
    --strong:#4fd0b6; --strong-bg:#12332e;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.65 var(--font);
  -webkit-font-smoothing:antialiased}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:10px;z-index:20;background:var(--paper);padding:9px 14px;
  border-radius:9px;box-shadow:var(--shadow)}

/* ---- the bar, which carries search on EVERY page --------------------------------------------- */
.hbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;
  padding:11px 22px;background:var(--navy);color:#fff}
.hbrand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font-weight:800;font-size:16px;flex:none;letter-spacing:-.01em}
.hbrand span:last-child{font-weight:500;opacity:.72}
.hmark{color:var(--accent)}
.hsearch{position:relative;flex:1;max-width:520px;margin:0 auto}
.hsearch input{width:100%;padding:9px 14px;border:1px solid transparent;border-radius:99px;
  background:rgba(255,255,255,.13);color:#fff;font:14.5px var(--font)}
.hsearch input::placeholder{color:rgba(255,255,255,.62)}
.hsearch input:focus{outline:none;background:var(--paper);color:var(--ink);border-color:var(--cyan)}
.hback{color:rgba(255,255,255,.82);text-decoration:none;font-size:13.5px;font-weight:600;flex:none}
.hback:hover{color:#fff}
@media(max-width:640px){
  .hbar{flex-wrap:wrap;gap:10px;padding:10px 15px}
  .hsearch{order:3;flex-basis:100%;max-width:none;margin:0}
  .hback{margin-left:auto}
}

/* ---- results ---------------------------------------------------------------------------------- */
#results{position:absolute;top:calc(100% + 7px);left:0;right:0;background:var(--paper);
  border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden;
  max-height:min(70vh,460px);overflow-y:auto}
.rrow{display:block;padding:11px 15px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:0}
.rrow:hover,.rrow.is-active{background:var(--surface-2)}
.rwhere{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted)}
.rhead{display:block;font-size:14.5px;font-weight:700;margin:1px 0 3px}
.rtext{display:block;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.rtext mark{background:var(--steady-bg);color:var(--ink);border-radius:3px;padding:0 2px}
.rempty{margin:0;padding:15px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}

/* ---- layout ----------------------------------------------------------------------------------- */
/* TWO WIDTHS, BECAUSE THESE ARE TWO DIFFERENT JOBS.
   A guide is prose and wants to be narrow — .hmain is pinned to 68ch for exactly that reason. The
   home page is a DIRECTORY: its whole job is letting you see the set and pick one. It was
   inheriting the guide's 1080px cap, which on a 1900px screen left about 42% of the window empty
   and pushed eighteen guides into nine rows of two. */
.hlayout{max-width:1080px;margin:0 auto;padding:36px 22px 70px;display:grid;
  grid-template-columns:214px minmax(0,1fr);gap:44px;align-items:start}
.hlayout.is-home,.hlayout:not(:has(.toc)){grid-template-columns:minmax(0,1fr)}
.hlayout.is-home{max-width:1400px}
@media(max-width:860px){.hlayout{grid-template-columns:minmax(0,1fr);gap:26px}}
.hmain{min-width:0;max-width:68ch}
.hlayout.is-home .hmain{max-width:none}

.crumb{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.crumb a{color:var(--muted);text-decoration:none;font-weight:600}
.crumb a:hover{color:var(--cyan)}
.crumb span{margin:0 5px;opacity:.6}

h1{font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:0 0 10px}
.lede{font-size:17.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 32px}
h2{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:40px 0 12px;
  scroll-margin-top:78px}
h3{font-size:16.5px;font-weight:700;margin:26px 0 7px}
p{margin:0 0 15px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:7px}
code{font:13.5px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:5px}

/* ---- on this page ----------------------------------------------------------------------------- */
.toc{position:sticky;top:78px;font-size:13.5px}
.toc-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin:0 0 9px}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc li{margin:0}
.toc a{display:block;padding:6px 0 6px 13px;margin-left:-2px;color:var(--ink-soft);
  text-decoration:none;border-left:2px solid transparent;line-height:1.4}
.toc a:hover{color:var(--ink)}
.toc a.is-here{color:var(--accent-ink);border-left-color:var(--accent);font-weight:700}
@media(max-width:860px){
  .toc{position:static;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--radius);padding:14px 16px}
}

/* ---- home ------------------------------------------------------------------------------------- */
.hsection{margin-bottom:40px}
.hsection h2{margin-top:0}
.hsection-blurb{color:var(--ink-soft);margin:0 0 18px}
/* A fixed upper bound, not 1fr: with one guide in a section an auto-fill track would stretch a
   single card across the full width and read as an empty panel rather than as a card. */
/* auto-FIT with a 1fr maximum, not auto-fill capped at 352px.
   The cap was the reason widening the page alone would not have helped: columns could never grow,
   and three cards needed 1086px inside 1036px of usable width, so the grid stopped at two however
   much room it was given. One rule now carries every size — 1 column on a phone, 2 on a tablet,
   3 on a laptop, 4 on a wide monitor — rather than a breakpoint per device. */
.hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px}
@media(max-width:640px){.hcards{grid-template-columns:1fr}}
/* Equal heights, so a row reads as a row. The summaries differ by a line or two and the old ragged
   bottom edge made the set harder to scan than the guides themselves are to read. */
.hcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:19px 21px;text-decoration:none;color:var(--ink);
  transition:border-color .12s,box-shadow .12s,transform .12s}
.hcard:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.hcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hcard{transition:none}.hcard:hover{transform:none}}
/* The arrow is part of the heading now. The whole card is already an <a>, so the old "Read this →"
   line inside it was a link inside a link's worth of chrome — a line of height on every card
   telling you what the card already was. */
.hcard h3{margin:0 0 6px;font-size:17px}
.hcard h3::after{content:" →";color:var(--accent-ink);opacity:0;transition:opacity .12s}
.hcard:hover h3::after,.hcard:focus-visible h3::after{opacity:1}
.hcard p{font-size:14px;color:var(--ink-soft);margin:0;line-height:1.55}

/* ---- guide furniture -------------------------------------------------------------------------- */
.note{border-left:3px solid var(--cyan);background:var(--paper);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:20px 0;font-size:15px;line-height:1.6}
.note b:first-child{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--cyan);margin-bottom:5px}
.note.is-warn{border-left-color:var(--focus);background:var(--focus-bg)}
.note.is-warn b:first-child{color:var(--focus)}
.note.is-good{border-left-color:var(--strong);background:var(--strong-bg)}
.note.is-good b:first-child{color:var(--strong)}

.steps{counter-reset:step;list-style:none;padding:0;margin:0 0 20px}
.steps>li{counter-increment:step;position:relative;padding-left:44px;margin-bottom:20px}
.steps>li::before{content:counter(step);position:absolute;left:0;top:1px;width:29px;height:29px;
  border-radius:50%;background:var(--accent);color:#fff;font:800 14px/29px var(--font);
  text-align:center}
.steps h3{margin:2px 0 5px}

.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;margin:20px 0}
.stage{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stage h3{margin:0 0 5px;font-size:15px}
.stage p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5}
.stage.is-live{border-color:var(--strong);background:var(--strong-bg)}
.stage.is-paused{border-color:var(--focus);background:var(--focus-bg)}

.scroll-x{overflow-x:auto;margin:0 0 18px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

dl.faq{margin:0}
dl.faq dt{font-weight:700;margin-top:19px}
dl.faq dd{margin:5px 0 0;color:var(--ink-soft)}

.ui{display:inline-block;background:var(--surface-2);border:1px solid var(--line);
  border-radius:7px;padding:1px 7px;font-size:14px;font-weight:600;white-space:nowrap}

.hend{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
.hend a{font-weight:700;text-decoration:none}

.hfoot{border-top:1px solid var(--line);padding:22px;text-align:center;
  font-size:13px;color:var(--muted)}
.hfoot p{margin:0}
.hfoot a{color:var(--muted)}

@media print{
  .hbar,.toc,.hend,.hfoot,.skip{display:none}
  .hlayout{display:block;padding:0}
  body{background:#fff;font-size:11pt}
}

/* WCAG 2.2 2.5.8 — standalone navigation link, not an inline one. */
.hback{min-height:24px;display:inline-flex;align-items:center}