/* ===========================================================================
   Hatchure — the help pages (/help/, /de/help/)
   ---------------------------------------------------------------------------
   Built by scripts/build-help-pages.mjs from content/help/<lang>/*.html,
   one page per topic, on the loop pages' layout (css/loop-pages.css) and the
   site header. The topic styles came from the homepage's Docs section,
   which the help pages replace; the page is the topic, so a topic's own
   heading is the h1 and its subheadings are h2.
   =========================================================================== */

/* ---------- The layout: contents beside the topic ---------- */
.docsLayout{ display:grid; grid-template-columns: 220px 1fr; gap:44px; align-items:start; }
/* minmax(0,1fr), not 1fr: a bare `1fr` is `minmax(auto,1fr)`, whose auto
   minimum is the column's max-content size — so the non-shrinking nav chips
   below forced this single column to 460px inside a 390px viewport and gave
   the whole document a horizontal scrollbar. minmax(0,1fr) lets the column
   be narrower than its content and the chips wrap instead. */
@media (max-width:880px){ .docsLayout{ grid-template-columns:minmax(0,1fr); gap:28px; } }
.docsNav{ position:sticky; top:84px; }
@media (max-width:880px){ .docsNav{ position:static; } }
/* Styled as a small label, but it is a heading level below the section's
   own h2 — a visual size that implied h4 would skip a level for anyone
   navigating by headings. */
.docsNav .docsNavTitle{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--sepia); margin:0 0 12px;
}
.docsNav ul{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.docsNav li{ margin:0; }
.docsNav a{
  display:block; padding:6px 12px; margin-left:-1px; border-left:2px solid transparent;
  color:var(--ink-soft); text-decoration:none; font-size:14.5px;
}
.docsNav a:hover{ color:var(--ink); border-left-color:var(--amber); }
@media (max-width:880px){
  /* min-width:0 on the flex items is load-bearing: without it a flex child
     refuses to shrink below its content width, so these chips forced the
     nav to ~460px inside a 390px viewport and gave the whole PAGE a
     horizontal scrollbar. The wrapping row looked fine, which is why this
     went unnoticed — the symptom was the document scrolling sideways, not
     the nav itself overflowing visibly. */
  .docsNav ul{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; border-left:none; }
  .docsNav li{ margin:0; min-width:0; }
  .docsNav a{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); margin:0; color:var(--ink); }
}

/* scroll-margin-top for the same reason section[id] has it: these articles
   are link targets too, and the sticky header would otherwise cover the
   heading of whichever one you jumped to. */
.doc{ border-top:1px solid var(--line); padding:30px 0 4px; scroll-margin-top:84px; }
.doc:first-of-type{ border-top:none; padding-top:0; }
.doc h3{ font-size:21px; margin:0 0 4px; }
.doc .lede{ color:var(--ink-soft); font-size:15px; margin:0 0 18px; }
.doc h4{
  font-family:'IBM Plex Sans',sans-serif; font-size:15.5px; font-weight:600;
  margin:22px 0 6px; letter-spacing:0;
}
.doc p{ margin:0 0 14px; max-width:68ch; }
.doc ul{ margin:0 0 14px; padding-left:22px; max-width:68ch; }
.doc li{ margin:0 0 7px; }
.doc strong{ font-weight:600; }
.doc code{ font-family:var(--mono); font-size:0.92em; background:var(--paper-dim); padding:1px 5px; border-radius:3px; }

/* A fact worth pulling out of prose — a limit, a caveat, a gotcha. Sepia
   for a plain note; amber only when it is something to act on. */
.callout{
  border-left:3px solid var(--sepia); background:var(--white);
  border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin:0 0 16px;
  font-size:15px; max-width:68ch;
}
.callout.warn{ border-left-color:var(--amber); }
.callout p:last-child{ margin-bottom:0; }

table.limits{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:15px; }
table.limits th, table.limits td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
}
table.limits th{ font-weight:600; font-size:13px; color:var(--ink-soft); }
table.limits thead th{ font-family:var(--mono); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; }
table.limits td{ font-family:var(--mono); font-size:14px; }
table.limits td:not(:first-child), table.limits th:not(:first-child){ text-align:center; }
table.limits tbody tr:last-child td{ border-bottom:none; }
/* Tables are the one thing that genuinely cannot reflow on a phone; let it
   scroll sideways rather than crushing four columns into 320px. */
.tableScroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tableScroll table{ min-width:460px; }


/* On a topic page: the topic is the page. */
.helpMain{ padding:24px 0 64px; }
.helpMain .doc{ border-top:none; padding-top:0; }
.helpMain .doc h1{ font-size:clamp(30px, 4.4vw, 44px); line-height:1.05; margin:6px 0 8px; font-weight:800; }
.helpMain .doc .lede{ font-size:18px; margin:0 0 24px; }
.helpMain .doc h2{
  font-family:'IBM Plex Sans',sans-serif; font-size:17px; font-weight:600;
  margin:26px 0 8px; letter-spacing:0;
}
.docsNav a[aria-current="page"]{ color:var(--ink); font-weight:600; border-left-color:var(--amber); }
@media (max-width:880px){ .docsNav a[aria-current="page"]{ border-color:var(--ink); } }
.helpPager{ display:flex; justify-content:space-between; gap:16px; margin:36px 0 0; padding-top:18px; border-top:1px solid var(--line); max-width:68ch; }
.helpPager a{ display:flex; flex-direction:column; gap:2px; color:var(--ink); text-decoration:none; font-weight:600; }
.helpPager a span{ font-family:var(--mono); font-size:12px; font-weight:400; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em; }
.helpPager a:hover{ color:var(--amber-text); }
.helpPager .isNext{ text-align:right; margin-left:auto; }

/* The index: every topic, its title and what it answers. */
.helpTopics{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.helpTopics a{ display:flex; flex-direction:column; gap:6px; height:100%; padding:18px 20px; background:var(--white); border:1px solid var(--line); border-radius:10px; color:var(--ink); text-decoration:none; }
.helpTopics a:hover{ border-color:var(--ink); text-decoration:none; }
.helpTopics strong{ font-family:var(--display); font-weight:800; font-size:20px; line-height:1.15; }
.helpTopics span{ color:var(--ink-soft); font-size:15px; }
.helpAppNote{ margin:28px 0 0; color:var(--ink-soft); font-size:15px; max-width:68ch; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }