/*
 * ============================================================================
 * help.css — in-app help (commit 5de5a17 — not this repo's current task #101, which is
 * unrelated; see src/views/hjaelp.php's own header for the full note)
 * ============================================================================
 * WHAT: two things, loaded as its OWN <link> (after app.css), so it never
 *   touches builder-4's app.css/components.css. Loaders verified 2026-08-18:
 *   layout.php (every render()-adopted shell page) plus the standalone shells
 *   hjaelp.php, skaerm.php, tilknyt.php and onboarding_wizard.php — NOT the
 *   clock screens themselves (/display, /overblik load neither app.css nor
 *   this file; "every authed + screen surface" overstated it):
 *     1. the inline "?" affordance — .help / .help-dot / .help-pop — a small
 *        question mark next to a non-obvious control that pops a plain-language
 *        Danish explanation on click (help.js toggles [hidden] + aria-expanded).
 *     2. the manual page (.manual…) rendered by src/views/hjaelp.php at /hjaelp.
 *
 * CSP: no inline styles/scripts anywhere — all rules live here, the toggle in
 *   /js/help.js (both same-origin 'self'). Tokens come from tokens.css (loaded by
 *   app.css); every value has a literal fallback so the popover still reads if this
 *   file ever loads before the token layer.
 *
 * LAYERS: these rules are deliberately UNLAYERED (no @layer), so they sit above
 *   app.css's layered cascade — the help affordance must never be overridden by a
 *   surface pattern, and it introduces its own class names (no collisions).
 * ============================================================================
 */

/* ── 1. Inline "?" affordance ─────────────────────────────────────────────── */
.help{position:relative;display:inline-flex;vertical-align:middle;line-height:0}
.help-dot{
  inline-size:1.3rem;block-size:1.3rem;flex:none;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--edge-2,#c9d0d9);border-radius:50%;
  background:var(--surface-2,#161b22);color:var(--tx-mut,#8b949e);
  font-family:var(--font-ui,system-ui,sans-serif);font-size:.8rem;font-weight:700;
  line-height:1;cursor:pointer;text-transform:none;letter-spacing:normal;
}
.help-dot:hover,
.help-dot[aria-expanded="true"]{
  border-color:var(--accent,#2dd4bf);color:var(--accent,#2dd4bf);
  background:var(--accent-tint,rgba(45,212,191,.14));
}
.help-dot:focus-visible{outline:none;box-shadow:var(--focus-ring,0 0 0 3px rgba(45,212,191,.4))}

.help-pop{
  position:absolute;z-index:90;top:calc(100% + .45rem);left:50%;transform:translateX(-50%);
  inline-size:max-content;max-inline-size:min(18rem,80vw);
  background:var(--surface,#0d1117);color:var(--tx,#e6edf3);
  border:1px solid var(--edge,#30363d);border-radius:var(--radius-md,14px);
  padding:.6rem .8rem;
  font-family:var(--font-ui,system-ui,sans-serif);font-size:var(--text-caption,.8125rem);
  font-weight:400;line-height:1.5;text-align:left;text-transform:none;letter-spacing:normal;
  white-space:normal;box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.help-pop[hidden]{display:none}

/* A small labelled caption ("Styring ?") for a group of controls that has no single
   label to hang a ? on — matches the mono uppercase weight of .nudge-label so it reads
   as chrome, not a new visual language. */
.help-caption{display:inline-flex;align-items:center;gap:.45rem;color:var(--tx-mut,#8b949e);
  font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--text-caption,.8125rem);
  text-transform:uppercase;letter-spacing:.12em}
/* Little pointer up toward the ? */
.help-pop::before{
  content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:.4rem solid transparent;border-bottom-color:var(--edge,#30363d);
}
/* Near the right viewport edge the pop would overflow → help.js flips this on. */
.help.is-right .help-pop{left:auto;right:0;transform:none}
.help.is-right .help-pop::before{left:auto;right:.4rem;transform:none}

/* ── 2. The manual page (/hjaelp) ─────────────────────────────────────────── */
.manual{max-inline-size:60rem;margin-inline:auto;
  padding:var(--space-6,1.5rem) var(--space-5,1.25rem) var(--space-9,4rem);
  display:flex;flex-direction:column;gap:var(--space-6,1.5rem)}

.manual-toc{display:flex;flex-wrap:wrap;gap:var(--space-2,.5rem);
  background:var(--surface,#0d1117);border:1px solid var(--edge,#30363d);
  border-radius:var(--radius-lg,20px);padding:var(--space-4,.8rem) var(--space-5,1.25rem)}
.manual-toc a{color:var(--accent,#2dd4bf);text-decoration:none;font-weight:600;
  font-size:var(--text-caption,.8125rem);padding:.15rem .4rem;border-radius:var(--radius-sm,9px)}
.manual-toc a:hover{background:var(--accent-tint,rgba(45,212,191,.14))}

.manual-sec{background:var(--surface,#0d1117);border:1px solid var(--edge,#30363d);
  border-radius:var(--radius-lg,20px);padding:var(--space-6,1.5rem);
  display:flex;flex-direction:column;gap:var(--space-3,.6rem);scroll-margin-top:1rem}
.manual-sec h2{font-family:var(--font-display,'Barlow Condensed',sans-serif);font-weight:700;
  font-size:var(--text-heading,1.375rem);color:var(--tx,#e6edf3)}
.manual-sec .what{color:var(--tx-2,#c9d1d9);max-inline-size:44rem}
.manual-sec h3{font-family:var(--font-ui,system-ui,sans-serif);font-weight:700;
  font-size:var(--text-body,1rem);color:var(--tx,#e6edf3);margin-block-start:var(--space-2,.5rem)}

/* Definition-style list: term (a button name / concept) + what it does. */
.manual-def{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-2,.5rem) var(--space-4,.8rem)}
.manual-def dt{font-weight:700;color:var(--tx,#e6edf3);white-space:nowrap}
.manual-def dd{margin:0;color:var(--tx-2,#c9d1d9)}
@container (max-width: 34rem){ .manual-def{grid-template-columns:1fr;gap:var(--space-1,.25rem)}
  .manual-def dd{margin-block-end:var(--space-2,.5rem)} }

.manual-note{background:var(--warn-tint,rgba(245,197,24,.12));border:1px solid var(--warn,#f5c518);
  color:var(--warn,#f5c518);border-radius:var(--radius-md,14px);padding:var(--space-3,.6rem) var(--space-4,.8rem);
  font-size:var(--text-caption,.8125rem)}