/* Help Center — the public docs surface behind layouts/help_center
   (/help/:locale). A lean full page without Tabler: the prose vocabulary
   comes from markdown.css (.markdown-body), this file carries the chrome
   (header, hero, sidebar, TOC, footer) and pins the tokens markdown.css
   consumes — theme.css is not loaded here.

   Visual language derived from the traqx.io website (not the app shell):
   Inter Tight, ink/paper palette, electric→cyan accent flow, pill
   buttons, hairlines, mono micro-labels. Effective values are pinned as
   literals because the website palette is intentionally NOT the app's
   --gxp-* palette.

   Scoped to .help-center on purpose (FE-18): this file is auto-linked
   app-wide via stylesheet_link_tag :app, a :root block would clobber
   theme.css. */

/* Self-hosted Inter Tight (OFL, latin subset, variable weight axis).
   The family is used nowhere else in the app, so these declarations
   cannot shadow other surfaces (FE-18 collision check). */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-tight-0a534b34.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-tight-italic-37f167fa.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.help-center {
  /* token pins for markdown.css + shared vocabulary */
  --tblr-font-sans-serif: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tblr-body-color: #0A0F1C;            /* website --ink-900 */
  --tblr-secondary: #5B6577;             /* website --ink-500 */
  --tblr-border-color: #DCE2EC;          /* website --hairline-soft */
  --tblr-bg-surface: #fff;
  --tblr-bg-surface-secondary: #EDF1F8;  /* website --paper-100 */
  --tblr-border-radius: 8px;
  --tblr-border-radius-sm: 6px;
  --tblr-border-radius-lg: 12px;
  --tblr-border-radius-pill: 100px;

  /* website-derived accents */
  --help-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --help-ink-strong: #050810;
  --help-ink-soft: #8B92A4;
  --help-ink-prose: #2A3142;          /* website --ink-700 */
  --help-ink-inverse: #F2F4F8;        /* website --ink, on navy */
  --help-ink-inverse-soft: #C8CDD8;   /* website --ink-2, on navy */
  --help-navy: #0A0F1C;
  --help-paper: #FAFBFD;
  --help-caution-bg: #FFF1E3;         /* Shopify caution pastel; matches website --ghost hue */
  --help-shadow-xs: 0 1px 4px rgba(10, 15, 28, 0.16);
  --help-z-header: 10;                /* sticky header; mirrors theme.css --z-popover */
  --help-accent: #1252F5;                /* website --electric */
  --help-cyan: #7CD0E8;
  --help-tip: #EAF1FB;
  --help-cta-fill: linear-gradient(105deg, #1252F5 0%, #2F7DF9 48%, #5BA3E0 74%, #7CD0E8 100%);
  --help-elev-1: 0 1px 2px rgba(10, 15, 28, 0.06), 0 8px 24px rgba(10, 15, 28, 0.04);
  --help-max-width: 1240px;

  margin: 0;
  background: var(--tblr-bg-surface);
  font: 400 15.5px/1.7 var(--tblr-font-sans-serif);
  color: var(--tblr-body-color);
  overflow-wrap: break-word;

  /* Sticky footer: the shell grows, so on short pages the footer still
     sits at the viewport bottom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.help-center :is(h1, h2, h3, h4) {
  letter-spacing: -0.02em;
}

.help-center a {
  color: var(--help-accent);
  text-decoration: none;
}

.help-center :is(.markdown-body, .help-breadcrumb) a:hover {
  text-decoration: underline;
}

.help-center a:focus-visible {
  outline: 2px solid var(--help-accent);
  outline-offset: 2px;
  border-radius: var(--tblr-border-radius-sm);
}

/* Mono micro-label — the website's uppercase JetBrains-Mono captions. */
.help-center .help-eyebrow,
.help-center .help-section-card h2,
.help-center .help-sidebar h2,
.help-center .help-toc h2 {
  font-family: var(--help-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--help-ink-soft);
}

/* --- Header ------------------------------------------------------- */

.help-center .help-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--help-z-header);
  background: color-mix(in srgb, var(--tblr-bg-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(4px); /* Safari <18 (Baseline 16.4) kennt nur das Prefix */
  backdrop-filter: blur(4px);
  border-block-end: 1px solid var(--tblr-border-color);
}

.help-center .help-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--help-max-width);
  margin-inline: auto;
  padding: 12px 24px;
}

.help-center .help-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--tblr-body-color);
}


.help-center .help-brand span {
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--tblr-border-color);
  color: var(--tblr-secondary);
  font-weight: 450;
}

.help-center .help-header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Segmented language switcher: both locales visible, the active one is
   a raised segment. Pure CSS — this surface ships no JS. */
.help-center .help-locale-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-pill);
  background: var(--tblr-bg-surface-secondary);
}

.help-center .help-locale-globe {
  margin-inline: 5px 4px;
  color: var(--tblr-secondary);
  flex-shrink: 0;
}

.help-center .help-locale-option {
  padding: 2px 9px;
  border-radius: var(--tblr-border-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tblr-secondary);
}

.help-center a.help-locale-option:hover {
  color: var(--help-accent);
}

.help-center .help-locale-option[aria-current="true"] {
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  box-shadow: var(--help-shadow-xs);
}

/* Quiet ghost button into the app — present, never in the foreground:
   hairline pill, muted text, accent only on hover. */
.help-center .help-app-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 6px;
  padding: 5px 14px;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tblr-secondary);
  white-space: nowrap;
}

.help-center .help-app-link:hover {
  color: var(--help-accent);
  border-color: color-mix(in srgb, var(--help-accent) 30%, var(--tblr-bg-surface));
  background: var(--help-tip);
}

/* --- Shell -------------------------------------------------------- */

.help-center .help-shell {
  flex: 1 0 auto;
  box-sizing: border-box; /* no global reset on this surface — width: 100% + padding must not overflow */
  width: 100%;
  max-width: var(--help-max-width);
  margin-inline: auto;
  padding: 40px 24px 72px;
}

/* --- Index (dark hero band + section cards) ------------------------ */

/* Full-bleed navy band with the website hero's faint grid backdrop. */
.help-center .help-hero {
  background-color: var(--help-navy);
  background-image:
    linear-gradient(color-mix(in srgb, var(--help-ink-inverse) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--help-ink-inverse) 3.5%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  border-block-end: 1px solid var(--tblr-border-color);
}

.help-center .help-hero-inner {
  max-width: var(--help-max-width);
  margin-inline: auto;
  padding: 64px 24px 60px;
}

.help-center .help-eyebrow {
  margin: 0 0 14px;
}

.help-center .help-hero h1 {
  margin: 0 0 12px;
  max-width: 640px;
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--help-ink-inverse);
  text-wrap: balance;
}

.help-center .help-hero-intro {
  margin: 0;
  max-width: 560px;
  color: var(--help-ink-inverse-soft);
  font-size: 1.05rem;
}

.help-center .help-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.help-center .help-section-card {
  padding: 22px 24px;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: var(--tblr-bg-surface);
  box-shadow: var(--help-elev-1);
}

.help-center .help-section-card h2 {
  margin: 0 0 14px;
}

.help-center .help-section-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-center .help-section-card li + li {
  margin-block-start: 4px;
}

.help-center .help-section-card a {
  display: block;
  padding: 8px 10px;
  margin-inline: -10px;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
}

.help-center .help-section-card a:hover {
  background: var(--help-paper);
}

.help-center .help-article-title {
  display: block;
  font-weight: 550;
}

.help-center .help-article-description {
  display: block;
  margin-block-start: 2px;
  font-size: 13px;
  color: var(--tblr-secondary);
}

/* --- Article page (sidebar | article | TOC) ------------------------ */

.help-center .help-shell--article {
  --help-shell-columns: 240px minmax(0, 1fr) 200px;

  display: grid;
  grid-template-columns: var(--help-shell-columns);
  gap: 48px;
  align-items: start;
}

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

.help-center .help-article > h1 {
  margin: 0 0 10px;
  font-size: 2.1rem;
  font-weight: 550;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

/* One-sentence dek under the title (Stripe pattern) — reuses the
   frontmatter description that also feeds index cards and the meta
   description. */
.help-center .help-article-dek {
  margin: 0 0 24px;
  font-size: 1.05rem;
  color: var(--tblr-secondary);
}

/* Prose reads muted, headings near-black — the Stripe/Shopify contrast
   hierarchy. Headings keep the pinned body color (#0A0F1C). */
.help-center .help-article .markdown-body {
  color: var(--help-ink-prose);
}

.help-center .help-article .markdown-body :is(h2, h3, h4, h5, h6) {
  color: var(--tblr-body-color);
}

/* Typed callouts the renderer emits for `> **Hinweis:** …` blockquotes:
   flat pastel panels with a bold text label, no icon (Shopify pattern). */
.help-center .markdown-body .help-note {
  --help-note-bg: var(--help-tip);

  margin-block: 16px;
  background: var(--help-note-bg);
  padding: 12px 16px;
  border-radius: var(--tblr-border-radius);
  font-size: 14px;
}

.help-center .markdown-body .help-note p {
  margin: 0;
}

.help-center .markdown-body .help-note p + p {
  margin-block-start: 8px;
}

.help-center .markdown-body .help-note--note {
  --help-note-bg: var(--help-tip);
}

.help-center .markdown-body .help-note--tip {
  --help-note-bg: color-mix(in srgb, var(--help-cyan) 16%, var(--tblr-bg-surface));
}

.help-center .markdown-body .help-note--caution {
  --help-note-bg: var(--help-caution-bg);
}

.help-center .help-breadcrumb {
  display: flex;
  gap: 8px;
  margin-block-end: 16px;
  font-size: 13px;
  color: var(--tblr-secondary);
}

.help-center .help-fallback-notice {
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--help-accent) 22%, var(--tblr-bg-surface));
  border-radius: var(--tblr-border-radius-lg);
  background: var(--help-tip);
  font-size: 13.5px;
  color: var(--tblr-body-color);
}

/* --- Sidebar ------------------------------------------------------- */

.help-center .help-sidebar {
  --help-sidebar-position: sticky;

  position: var(--help-sidebar-position);
  inset-block-start: 76px;
  font-size: 14px;
}

.help-center .help-sidebar-section + .help-sidebar-section {
  margin-block-start: 24px;
}

.help-center .help-sidebar h2 {
  margin: 0 0 8px;
}

.help-center .help-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-center .help-sidebar a {
  display: block;
  padding: 5px 10px;
  margin-inline-start: -10px;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
}

.help-center .help-sidebar a:hover {
  background: var(--tblr-bg-surface-secondary);
}

.help-center .help-sidebar a[aria-current="page"] {
  background: color-mix(in srgb, var(--help-accent) 7%, var(--tblr-bg-surface));
  color: var(--help-accent);
  font-weight: 600;
}

.help-center .help-locale-chip {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 0 5px;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-sm);
  font-family: var(--help-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tblr-secondary);
  vertical-align: 1px;
}

/* --- "On this page" ------------------------------------------------ */

.help-center .help-toc {
  position: sticky;
  inset-block-start: 76px;
  font-size: 13px;
}

.help-center .help-toc h2 {
  margin: 0 0 8px;
}

.help-center .help-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-inline-start: 1px solid var(--tblr-border-color);
}

.help-center .help-toc-entry {
  --help-toc-indent: 12px;
}

.help-center .help-toc-entry a {
  display: block;
  padding-block: 3px;
  padding-inline: var(--help-toc-indent) 12px;
  color: var(--tblr-secondary);
}

.help-center .help-toc-entry a:hover {
  color: var(--help-accent);
}

.help-center .help-toc-entry--level-3 {
  --help-toc-indent: 24px;
}

/* Anchor targets must not vanish under the sticky header. */
.help-center .markdown-body :is(h2, h3, h4, h5, h6) {
  scroll-margin-block-start: 76px;
}

/* Article media: first-party images (Propshaft assets) and the
   youtube-nocookie embed the renderer emits for video syntax. */
.help-center .markdown-body img {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--help-elev-1);
}

.help-center .markdown-body iframe.help-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--tblr-border-radius-lg);
  background: var(--help-navy);
}

/* --- Mobile navigation --------------------------------------------- */

.help-center .help-nav-toggle {
  display: none;
  margin-block-end: 20px;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  padding: 10px 14px;
}

.help-center .help-nav-toggle summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--tblr-secondary);
}

.help-center .help-nav-toggle .help-sidebar {
  --help-sidebar-position: static;

  margin-block-start: 12px;
}

@media (max-width: 1080px) {
  .help-center .help-shell--article {
    --help-shell-columns: 240px minmax(0, 1fr);
  }

  .help-center .help-toc-column {
    display: none;
  }
}

@media (max-width: 800px) {
  .help-center .help-shell--article {
    display: block;
  }

  .help-center .help-sidebar-column {
    display: none;
  }

  .help-center .help-nav-toggle {
    display: block;
  }

  .help-center .help-hero h1 {
    font-size: 2rem;
  }
}

/* Narrow phones: the full header row (brand label + switcher + app link)
   is wider than the viewport — drop the wordy brand label (hero eyebrow
   and breadcrumb still name the surface) and tighten the paddings. */
@media (max-width: 380px) {
  .help-center .help-app-link-label {
    display: none;
  }
}

@media (max-width: 520px) {
  .help-center .help-brand span {
    display: none;
  }

  .help-center .help-header-inner {
    padding-inline: 16px;
    gap: 8px;
  }

  .help-center .help-app-link {
    margin-inline-start: 0;
  }
}

/* --- Not found ----------------------------------------------------- */

.help-center .help-not-found {
  max-width: 480px;
  margin-block: 64px;
  text-align: center;
  margin-inline: auto;
}

.help-center .help-not-found h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.help-center .help-not-found p {
  margin: 0 0 20px;
  color: var(--tblr-secondary);
}

/* Website CTA: gradient pill, near-black label. */
.help-center .help-cta {
  display: inline-block;
  padding: 9px 22px;
  border-radius: var(--tblr-border-radius-pill);
  background: var(--help-cta-fill);
  color: var(--help-ink-strong);
  font-weight: 600;
  font-size: 14px;
}

.help-center .help-cta:hover {
  filter: brightness(1.06);
}

/* --- Footer -------------------------------------------------------- */

.help-center .help-footer {
  background: var(--help-navy);
  color: var(--help-ink-soft);
}

.help-center .help-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--help-max-width);
  margin-inline: auto;
  padding: 18px 24px;
  font-size: 13px;
}

.help-center .help-footer-inner span {
  font-family: var(--help-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}