/* The Help Center on the public site. Ported from the dashboard's own rules so the two read
   as one document; the page shell (header, footer, type) comes from legal.css. */

/* --- Status colours, and why they live HERE rather than in tokens.css -------------------
   The marketing pages carry no status colours at all — see BRAND_GUIDELINES.md §2.2a — and
   the shared palette no longer defines any, so they cannot paint one by accident. But these
   articles are replicas of the product: a callout about a screen going dark, a table of what
   a Manager may open, a tag that says "Approved". Drawn in ink they would teach the wrong
   vocabulary for the page the reader is about to open.

   So the tokens exist, and only the Help Center loads this file. The values are the
   dashboard's own, kept in step with frontend/src/tokens.css. */
.help-page,
:root {
  --ok:              #16A34A;
  --ok-text:         #107536;
  --ok-hover:        #15803D;
  --ok-tint:         #E7F4EA;
  --ok-tint-line:    #B9E0C4;
  --warn:            #CA8A04;
  --warn-text:       #8A5A00;
  --warn-tint:       #FBF3DC;
  --danger:          #DC2626;
  --danger-text:     #B91C1C;
  --danger-tint:     #FCEBE9;
  --danger-tint-line:#F1C9C4;
  --info:            #3A3D45;
  --info-tint:       #EAE7E0;
}

.help-page .container { max-width: 1240px; }
.help-page main { padding-top: 28px; padding-bottom: 72px; }  /* the sides stay the container's 24px */

/* Breadcrumb */
.help-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; font: 500 var(--text-sm)/1.4 var(--font-ui); color: var(--ink-muted); }
.help-crumbs a { color: var(--ink-secondary); }
.help-crumbs .sep { color: var(--ink-faint); }
.help-crumbs [aria-current] { color: var(--ink); }

/* The crumbs and the language menu share a row. The menu is a <details>, so it opens without
   script; its list floats over the page instead of pushing the article down. */
.help-topbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin: 0 0 22px; }
.help-topbar .help-crumbs { margin: 0; }

/* Three columns on a desk: the index, the article, the page's own contents. */
.help-shell { display: flex; gap: 28px; align-items: flex-start; }
.help-article { flex: 1; min-width: 0; }
/* legal.css spaces list items for prose; the primitives space their own. */
.help-article li { margin-bottom: 0; }
.help-article figure { margin: 0; }

/* The index: chapters with a rule above, articles hanging off a guide beneath. */
.help-index { width: 240px; flex-shrink: 0; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; padding-bottom: 20px; }
.hi-group + .hi-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.hi-head { font: 700 var(--text-xs)/1.2 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); padding: 0 8px 8px; }
.hi-items { display: grid; gap: 1px; margin-inline-start: 9px; padding-inline-start: 5px; border-inline-start: 1px solid var(--line); }
.hi-item { position: relative; display: block; border-radius: var(--radius); padding: 7px 10px; font: 400 var(--text-base)/1.45 var(--font-ui); color: var(--ink-secondary); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.hi-item:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.hi-item.is-active { background: var(--brand-tint); color: var(--brand); font-weight: 650; }
.hi-item.is-active::before { content: ''; position: absolute; inset-inline-start: -6px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--brand); }

/* Per-heading anchors, shown only when wanted. */
.help-h2:hover .help-anchor, .help-anchor:focus { opacity: 1 !important; }

/* "On this page" */
.help-toc { position: sticky; top: 80px; width: 210px; flex-shrink: 0; align-self: flex-start; }
.help-toc-head { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.help-toc nav { display: grid; gap: 2px; border-inline-start: 1px solid var(--line); }
.help-toc nav a { font-size: var(--text-sm); line-height: 1.45; color: var(--ink-muted); text-decoration: none; padding: 4px 10px; border-radius: 4px; }
.help-toc nav a:hover { color: var(--ink); background: var(--surface-hover); }

/* Previous / next */
.help-nav { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.help-nav a { flex: 1 1 220px; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; text-decoration: none; color: inherit; }
.help-nav a:hover { border-color: var(--line-strong); text-decoration: none; }
.help-nav .k { display: block; font: 700 var(--text-2xs)/1 var(--font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.help-nav .t { display: block; font: 650 var(--text-base)/1.4 var(--font-ui); color: var(--ink); }
.help-nav .b { display: block; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); margin-top: 3px; }

/* Support and the way into the app */
.help-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--text-base); color: var(--ink-muted); }
.help-open { margin-inline-start: auto; font: 600 var(--text-sm)/1.4 var(--font-ui); color: var(--ink-secondary); }


/* The one thing the page asks of a reader */
.help-cta { margin-top: 36px; padding: 20px 22px; border: 1px solid var(--brand-tint-line); background: var(--brand-tint); border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.help-cta strong { display: block; color: var(--ink); font: 700 var(--text-md)/1.4 var(--font-ui); }
.help-cta span { display: block; color: var(--ink-secondary); font-size: var(--text-base); margin-top: 2px; }

/* The front page of the help centre */
.help-home { max-width: 900px; }
.help-home h1 { margin-bottom: 8px; }
.help-home .lead { font-size: var(--text-md); line-height: 1.65; color: var(--ink-secondary); max-width: 70ch; margin: 0 0 12px; }
.help-group { margin-top: 36px; }
.help-group h2 { margin: 0 0 12px; }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.help-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease); }
.help-card:hover { border-color: var(--line-strong); text-decoration: none; }
.help-card .t { display: block; font: 650 var(--text-md)/1.35 var(--font-ui); color: var(--ink); }
.help-card .b { display: block; font-size: var(--text-base); line-height: 1.55; color: var(--ink-muted); margin-top: 4px; }

/* Narrower: drop the contents column, then bring the index above the article. */
@media (max-width: 1180px) { .help-toc { display: none; } }
@media (max-width: 860px) {
  /* `align-items: flex-start` from the desktop rule survives into this column, where it
     stops the article stretching: it sat at its 74ch reading measure, wider than the
     screen, and the page scrolled sideways. The hero on the home page had the same bug. */
  .help-shell { flex-direction: column; gap: 18px; align-items: stretch; }
  .help-article > article { max-width: 100%; }
  .help-index { position: static; width: 100%; max-height: 232px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 10px; background: var(--surface); }
  .help-open { margin-inline-start: 0; }
}

/* Search. Inlined index, one input, results in the index's own shape. */
.help-search-wrap { margin: 0 0 14px; }
.help-search { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font: 400 var(--text-base)/1.4 var(--font-ui); color: var(--ink); }
.help-search:focus { outline: 2px solid var(--brand-tint-line); border-color: var(--brand); }
.help-results { margin-top: 10px; }
.help-nohit { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); margin: 4px 6px; }
.help-home .help-search-wrap { max-width: 520px; margin: 0 0 8px; }
.help-home .help-results .hi-items { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }

/* The article list, behind a summary on a phone and simply there on a desk. */
.help-browse > summary { list-style: none; cursor: pointer; display: none; font: 700 var(--text-xs)/1.2 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-sunken); }
.help-browse > summary::-webkit-details-marker { display: none; }
.help-browse > summary::after { content: ' ▾'; color: var(--ink-faint); }
.help-browse[open] > summary::after { content: ' ▴'; }
@media (max-width: 860px) {
  .help-shell .help-index { max-height: none; overflow: visible; }
  .help-browse > summary { display: block; }
  .help-browse[open] > summary { margin-bottom: 10px; }
}

/* The download cards, in the shape the dashboard draws them. */
.sr-builds { display: flex; flex-direction: column; gap: 10px; }
.sr-build { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 13px 15px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; }
.sr-build-body { min-width: 0; }
.sr-build-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sr-build-name { font: 650 var(--text-md)/1.3 var(--font-ui); color: var(--ink); }
.sr-tag { display: inline-block; font: 600 var(--text-2xs)/1.6 var(--font-figures); padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink-secondary); }
.sr-tag-brand { background: var(--brand-tint); border-color: var(--brand-tint-line); color: var(--brand); }
.sr-note { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); margin-top: 4px; }
.sr-sha { font: 400 var(--text-2xs)/1.6 var(--font-figures); color: var(--ink-faint); margin-top: 6px; word-break: break-all; }
.sr-soon { border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 13px 15px; }
.sr-none { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
@media (max-width: 520px) { .sr-build { grid-template-columns: 1fr; } .sr-build .btn { justify-self: start; } }

/* A long command or menu path in running text ("System Settings → General → Login Items") wraps on a
   phone instead of widening the page. On a wide screen it stays on one line, as a label should. */
.help-article code { overflow-wrap: anywhere; }
/* !important because the dashboard's <K> sets white-space: nowrap inline, and an inline style
   outranks every stylesheet rule that is not important. */
@media (max-width: 620px) { .help-article code { white-space: normal !important; } }