/* Hjelpesenteret (/help, /help/:slug) — node.
   Consumes the shared tokens; declares no gold or brown of its own
   (docs/node-flutter/design-consistency-plan.md). */

.help-page {
  padding-top: var(--nav-clearance);
  box-sizing: border-box;
  font-family: var(--font-family);
  /* Narrower than --container-content (900px). Help is a page you read, not a
     page you scan: at 900 the answers ran past a hundred characters a line.
     Capping the TEXT inside a 900px card was the first attempt, and it just
     left a dead strip down the right — the column has to be narrow, not its
     contents. 780 rather than 720 because the answers now carry 30px of side
     padding, which does part of the same job. */
  max-width: 780px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 64px;
  color: var(--text-default);
  line-height: 1.6;
}
.help-page *, .help-page *::before, .help-page *::after { box-sizing: border-box; }

.help-page a { color: var(--accent-text); }
.help-page a:hover { color: var(--accent-deep); }

/* ------------------------------------------------------------------ search */

.help-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  margin: 18px 0 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.help-search:focus-within {
  border-color: var(--accent-deep);
  box-shadow: 0 2px 14px rgba(212, 160, 23, .18);
}
.help-search i { color: var(--text-soft); }
.help-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;      /* 16px: anything smaller makes iOS zoom on focus */
  color: var(--text-default);
  min-width: 0;
}
.help-search-clear {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px;
  font-size: 15px;
}
/* Empty until you search — and taking no vertical space until then, so it
   never opens a gap between the search box and what follows. */
.help-search-count {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-soft);
  padding-left: 6px;
}
.help-search-count:not(:empty) { margin: 8px 0 10px; }

/* ------------------------------------------------------------- topic chips */

/* Jump links to the sections below. Deliberately quiet — flat tint, no card,
   no shadow — so the eye reads them as navigation and not as a second list of
   answers stacked under the first one. */
.help-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 22px 0 26px;
}
.help-chips-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-right: 4px;
}
.help-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted) !important;
  text-decoration: none;
}
.help-chip:hover {
  border-color: var(--accent-deep);
  background: var(--accent-soft);
  color: var(--text-strong) !important;
}
.help-chip i { color: var(--accent-deep); font-size: 12px; }

/* ---------------------------------------------------------------- featured */

.help-featured {
  background: var(--accent-soft);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-bottom: 26px;
}
.help-featured h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: .01em;
}
.help-featured h2 i { color: var(--accent-deep); margin-right: 4px; }
.help-featured ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 28px;
}
.help-featured li { font-size: 15px; }
/* Underlining ten links at once turns the box into a hedge. The arrow carries
   "this is a link"; the underline arrives on hover. */
.help-featured a {
  display: block;
  padding: 5px 0 5px 18px;
  text-indent: -18px;
  text-decoration: none;
  color: var(--text-default) !important;
}
.help-featured a::before {
  content: '\203A';
  display: inline-block;
  width: 18px;
  text-indent: 0;
  color: var(--accent-deep);
  font-weight: 700;
}
.help-featured a:hover {
  color: var(--text-strong) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------------------------------------------------- categories */

.help-cat { margin: 0 0 30px; }

.help-cat-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
  /* Scroll-margin so a #help-… jump clears the fixed nav. */
  scroll-margin-top: var(--nav-clearance);
}
.help-cat { scroll-margin-top: var(--nav-clearance); }
.help-cat-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 18px;
}
.help-cat-head h2 {
  margin: 2px 0 2px;
  font-size: 21px;
  font-weight: 600;
  color: var(--text-strong);
}
.help-cat-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-soft);
}

/* ------------------------------------------------------------------- items */

.help-items {
  background: var(--color-bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.help-item { border-bottom: 1px solid var(--border-soft); }
.help-item:last-child { border-bottom: 0; }
.help-item[hidden] { display: none; }

.help-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 30px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-strong);
}
.help-item > summary::-webkit-details-marker { display: none; }
.help-item > summary:hover { background: var(--color-primary-soft); }
.help-item > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.help-q { min-width: 0; }
.help-caret {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 13px;
  transition: transform .18s ease;
}
/* The open question is the one being read, so it has to win against the rows
   around it — but it is still a row in that list, not a card that landed on
   top of it. Tinting only the summary left the answer on the same white as
   every closed neighbour; floating it out on a margin and a drop shadow read
   as bolted on. So: tint the whole item edge to edge, and mark it with a gold
   rail and hairlines above and below. All three are inset shadows, so nothing
   moves when an item opens — the band simply lights up in place. */
.help-item[open] {
  background: var(--accent-soft);
  box-shadow:
    inset 4px 0 0 var(--accent-deep),
    inset 0 1px 0 var(--border-warm),
    inset 0 -1px 0 var(--border-warm);
}
.help-item[open] > summary { background: transparent; color: var(--accent-text); }
.help-item[open] > summary:hover { background: transparent; }
.help-item[open] .help-caret { color: var(--accent-deep); transform: rotate(180deg); }

/* Side padding rather than a narrower column: the text needs room from the
   gold rail and the card edge, and taking it as padding keeps the block
   looking deliberate instead of merely shrunken. Matches the summary's
   padding so question and answer share one left edge. */
.help-answer { padding: 6px 30px 26px; }
/* The one-line answer, and on a guide the opening paragraph. It has to sit
   above the body rather than in it, so it gets a step of size and room to
   breathe underneath. */
.help-lead {
  margin: 0 0 20px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-muted);
}

.help-item-foot { margin: 14px 0 0; }
.help-permalink { font-size: 14px; font-weight: 600; text-decoration: none; }
.help-permalink i { font-size: 11px; }

.help-loading { color: var(--text-soft); font-style: italic; }
.help-loading--error { color: var(--color-error); font-style: normal; }

.help-empty {
  text-align: center;
  color: var(--text-soft);
  padding: 26px 0 10px;
  font-size: 15px;
}

/* ------------------------------------------------------------ answer body */

/* No max-width here: the column above is already the measure.
   16.5px, not 15.5: help is read, not scanned, and the guides run to several
   screens. The looser leading is part of the same decision — long prose at
   1.6 packs the lines tighter than the eye wants on a full-width column. */
.help-body { font-size: 16.5px; line-height: 1.7; }
.help-body p { margin: 0 0 17px; }
.help-body ul, .help-body ol { margin: 12px 0 20px; padding-left: 24px; }
.help-body li { margin-bottom: 10px; }
/* The section headings ("### " in the source) were 15.5px — the same size as
   the paragraphs under them, separated by weight alone. With font-synthesis
   off that is barely a signal, so every guide read as one undifferentiated
   block. Size does the work now; the space above does the rest, and matters
   more than the size: it is what groups a heading with its own section
   instead of leaving it floating between two. */
/* A section heading has to win on size alone, because weight is not available
   to it: with only a 100-weight face in the kit, 700 and 400 render the same.
   20px against 16.5px body is a step you can see at a glance; the hairline
   above turns each "### " into a visible seam in a long guide, which is the
   job the bold was supposed to do. */
.help-body h4 {
  margin: 34px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
/* No seam directly under the lead — the first section starts the body. */
.help-body > h4:first-child { border-top: 0; padding-top: 0; margin-top: 4px; }
.help-body > :first-child { margin-top: 0; }
.help-body > :last-child { margin-bottom: 0; }
/* Dark, not gold. Gold was an attempt to route around the missing bold face,
   and it backfired: a guide paragraph can carry eight or nine interface names,
   and colouring every one turned whole sections into confetti — when
   everything is marked, nothing is. It also sat low-contrast on the cream of
   an open item.
   So: the ordinary treatment, waiting on the real fix. The proxima-nova kit
   ships a single face at weight 100, so no bold exists anywhere in Språki
   until the kit is republished with 400/600/700 (see docs/help-center). */
.help-body strong {
  font-weight: 700;
  font-synthesis-weight: auto;
  color: var(--text-strong);
}

/* -------------------------------------------------------------------- vote */

.help-vote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-warm);
}
.help-vote-q { font-size: 14px; color: var(--text-soft); }
.help-vote.is-voted .help-vote-btn { display: none; }
.help-vote-thanks { font-size: 14px; font-weight: 600; color: var(--color-success-deep); }

.help-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-warm);
  background: var(--color-bg-card);
  color: var(--text-muted) !important;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.help-btn:hover { border-color: var(--accent-deep); background: var(--accent-soft); }
.help-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink) !important;
}
.help-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ----------------------------------------------------------- article page */

.help-page--article { max-width: 760px; }

.help-crumb { margin: 0 0 14px; font-size: 14px; }
.help-crumb a { text-decoration: none; font-weight: 600; }
.help-crumb-sep { color: var(--text-soft); margin: 0 6px; }

.help-article {
  background: var(--color-bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.help-article h1 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--text-strong);
}

.help-mt {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-soft);
}
.help-mt i { margin-right: 5px; }

.help-siblings {
  margin-top: 26px;
  padding: 18px 22px;
  background: var(--color-bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
}
.help-siblings h2 { margin: 0 0 8px; font-size: 16px; color: var(--text-strong); }
.help-siblings ul { margin: 0; padding-left: 20px; }
.help-siblings li { margin-bottom: 5px; font-size: 15px; }

/* ----------------------------------------------------------------- contact */

.help-contact {
  margin-top: 34px;
  padding: 22px 24px;
  background: var(--accent-soft);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-card);
  text-align: center;
}
.help-contact h2 { margin: 0 0 6px; font-size: 19px; color: var(--text-strong); font-weight: 600; }
.help-contact > p { margin: 0 0 14px; font-size: 15px; color: var(--text-muted); }
.help-contact-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.help-contact-links {
  margin: 16px 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .help-page { padding-left: 14px; padding-right: 14px; }
  .help-article { padding: 20px 18px; }
  .help-item > summary { padding: 14px 16px; font-size: 15.5px; }
  .help-answer { padding: 4px 16px 20px; }
  .help-cat-head h2 { font-size: 19px; }
  /* The gap before a heading buys less on a narrow column, where the line
     breaks already do some of the separating. */
  .help-body h4 { margin-top: 26px; padding-top: 14px; font-size: 18px; }
  .help-body { font-size: 16px; }
  .help-lead { font-size: 16px; }
}