/* PicHaven-Hilfe: gemeinsame Optik für Website, Desktop-Fenster und Handy-WebView.
   Tokens nach docs/BRAND.md; alles unter .help, damit die Website-Styles unberührt bleiben. */

.help {
  --h-bg: #F4F6FA;
  --h-card: #ffffff;
  --h-text: #1A1E28;
  --h-muted: #5C6B7A;
  --h-accent: #0D5EAF;
  --h-accent-ink: #0A4C8F;
  --h-border: #DCE3EE;
  --h-display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --h-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  color: var(--h-text);
  font: 400 1.0625rem/1.6 var(--h-body);
  max-width: 44rem;
  margin: 0 auto;
}
/* Dark only on the website; inside the apps (.help-light) the help is light like every
   other app screen (both apps are light-only by design). */
@media (prefers-color-scheme: dark) {
  .help:not(.help-light) {
    --h-bg: #101720;
    --h-card: #19222E;
    --h-text: #E8EDF4;
    --h-muted: #93A2B5;
    --h-accent: #5AA0E8;
    --h-accent-ink: #82B8EE;
    --h-border: #2A3746;
  }
}

.help-node {
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  margin: 0 0 1rem;
}
/* The heading gets focus after each step (screen readers); no visible ring for that. */
.help-node h2:focus { outline: none; }
.help-node h2 {
  font: 700 1.35rem/1.25 var(--h-display);
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}
.help-node p, .help-node ul, .help-node ol { margin: 0 0 0.75rem; }
.help-node ul, .help-node ol { padding-left: 1.3rem; }
.help-node li { margin: 0.25rem 0; }
.help-node a { color: var(--h-accent); }
.help-node code {
  font: 0.92em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: color-mix(in srgb, var(--h-accent) 9%, transparent);
  border-radius: 5px;
  padding: 0.05em 0.3em;
  overflow-wrap: anywhere;
}

.help-options {
  list-style: none;
  padding: 0 !important;
  margin: 0.75rem 0 0.25rem !important;
  display: grid;
  gap: 0.5rem;
}
.help-options a {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--h-border);
  border-radius: 10px;
  color: var(--h-text);
  text-decoration: none;
  font-weight: 600;
  background: var(--h-bg);
}
.help-options a::after { content: " →"; color: var(--h-muted); font-weight: 400; }
.help-options a:hover, .help-options a:focus-visible {
  border-color: var(--h-accent);
  color: var(--h-accent-ink);
  outline: none;
}

/* Website: Überschrift über dem Assistenten. */
.help-intro { max-width: 44rem; margin: 0 auto 1.25rem; }
.help-intro h1 { margin: 0 0 0.25rem; }
.help-intro p { margin: 0; }

/* Assistent-Modus (mit JavaScript): nur ein Knoten sichtbar, darüber die Navigation. */
.help-nav { display: none; }
.help.is-wizard .help-nav {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  flex-wrap: wrap;
}
.help.is-wizard .help-node { display: none; }
.help.is-wizard .help-node.is-current { display: block; }
.help-nav button {
  font: 600 0.95rem/1 var(--h-body);
  color: var(--h-accent);
  background: transparent;
  border: 1px solid var(--h-border);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.help-nav button:hover { border-color: var(--h-accent); }
.help-nav button[hidden] { display: none; }

/* In den Apps (embed): eigener Seitengrund, etwas Rand, keine Website-Hülle, immer hell. */
body.help-embed {
  margin: 0;
  padding: 1rem;
  background: #F4F6FA;
  color-scheme: light;
}

/* Desktop: the same blue brand banner as the wizard, pairing and settings windows. */
.help-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 44rem;
  margin: 0 auto 1rem;
  padding: 14px 20px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(170deg, #0D5EAF, #2050B8);
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.help-brand h1 {
  font: 700 1.35rem/1.2 "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.015em;
  margin: 0;
}
.help-brand p { margin: 2px 0 0; color: rgba(255, 255, 255, 0.78); }
.help-brand-mark {
  width: 46px;
  height: 46px;
  flex: none;
  /* Brand mark (master: web/public/icon.svg), white house with the sailboat cut out. */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill-rule="evenodd" fill="%23FFFFFF" d="M17 44 L50 12 L83 44 L76.5 44 L76.5 84 L23.5 84 L23.5 44 Z M56.6 47 L56.6 69 L36.8 69 Z M35.4 73 L64.6 73 L58.6 80 L41.4 80 Z"/></svg>') center / 100% no-repeat;
}