/* Help & SOP — styled from the APP'S OWN design tokens (app.css is loaded first, so
   --bg/--panel/--border/--accent/--text/--muted/--warn all come from the product itself).
   Nothing here hardcodes a brand colour: restyle the app and this follows automatically.
   --warn (the app's amber) is reused for the numbered callouts so the page speaks the same
   language as the orange annotation badges baked into the screenshots. */

.helpdoc { --doc: 1180px; --rail: 260px; }

/* app.css styles the PRODUCT's <header> (sticky flex bar) and <main> (max-width 1500 + auto
   margins). Both leak onto this page's elements, so neutralise them before laying out. */
.helpdoc .masthead {
  position: static; display: block; z-index: auto; gap: 0; flex-wrap: nowrap;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.helpdoc .helpbody { max-width: none; margin: 0; padding: 0; }

/* ---------- masthead: the app header, given room to breathe ---------- */
.masthead {
  position: relative;
  padding: 30px 26px 22px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.masthead::before { /* the accent spine — same gesture as an active tab */
  content: ''; position: absolute; left: 0; top: 0; bottom: -1px; width: 3px; background: var(--accent);
}
.masthead .kbd { max-width: var(--doc); margin: 0 auto; }
.masthead h1 { margin: 0 0 4px; font-size: 25px; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.masthead .sub { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.masthead .meta { margin: 0; font-size: 12px; color: var(--muted); }
.sopline { max-width: var(--doc); margin: 14px auto 0; font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; }
.sopline a {
  color: var(--text); text-decoration: none; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 11px; transition: border-color .12s, color .12s;
}
.sopline a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- layout ---------- */
.wrap {
  max-width: var(--doc); margin: 0 auto; padding: 26px 26px 96px;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 38px; align-items: start;
}

/* ---------- contents rail: a panel card, like the app's side panes ---------- */
.toc { position: sticky; top: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px; }
.toc-toggle { display: none; width: 100%; }
.toc-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 0 8px 9px; }
.toc-list, .toc-sub { list-style: none; margin: 0; padding: 0; }
.toc-list > li > a {
  display: block; padding: 6px 9px; border-radius: 7px; font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none; border-left: 2px solid transparent; transition: background .12s, color .12s;
}
.toc-sub { margin: 1px 0 5px 9px; border-left: 1px solid var(--border); }
.toc-sub a {
  display: block; padding: 5px 10px; font-size: 12.3px; font-weight: 500;
  color: var(--muted); text-decoration: none; border-radius: 0 7px 7px 0; transition: background .12s, color .12s;
}
.toc a:hover { background: var(--panel2); color: var(--text); }
.toc a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.toc-list > li > a.active { border-left-color: var(--accent); }

/* ---------- document body ---------- */
.helpbody { font-size: 15px; line-height: 1.68; color: var(--text); min-width: 0; }
.helpbody > p:first-of-type { font-size: 15.5px; color: var(--text); }
.helpbody p { margin: 0 0 15px; }
.helpbody strong { color: #fff; font-weight: 650; }
.helpbody a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.helpbody a:hover { border-bottom-color: var(--accent); }

.helpbody h2 {
  margin: 42px 0 14px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--text); scroll-margin-top: 20px;
}
.helpbody h2:first-child { margin-top: 8px; border-top: 0; padding-top: 0; }
.helpbody h3 {
  margin: 30px 0 10px; font-size: 15.5px; font-weight: 650; color: var(--accent);
  scroll-margin-top: 20px; display: flex; align-items: center; gap: 9px;
}
.helpbody h3::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.helpbody ol, .helpbody ul { margin: 0 0 15px; padding-left: 20px; }
.helpbody li { margin: 0 0 7px; }
.helpbody li::marker { color: var(--muted); }

/* ---------- screenshots: framed like the app's cards ----------
   .fig is the <figure> WRAPPER; the <img> inside carries no class, so it must be constrained
   explicitly or a wide shot blows the page out (badly on phones). */
.fig { display: block; margin: 4px 0 20px; }
.fig img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--border); background: #000;
}
.fig figcaption { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.helpbody img { max-width: 100%; height: auto; }   /* belt and braces for any unwrapped image */

/* ---------- annotated screenshot ----------
   .shot wraps the <picture> and the badge layers. The <picture>'s own <source media> does the
   desktop/mobile swap natively — no JS, and a browser without <picture> still gets the desktop
   <img>. The badge LAYERS have to follow that swap, so both are in the DOM and one is hidden:
   .bd (desktop) / .bm (mobile), switched at the SAME 640px the app itself breaks at (app.css). */
.shot {
  position: relative; border-radius: 12px; overflow: hidden;   /* clips badges to the frame */
  box-shadow: 0 6px 26px rgba(0,0,0,.5);                        /* moved off the img: overflow would clip it */
  container-type: inline-size;                                  /* badge text scales with the FIGURE, not the viewport */
}
.shot picture { display: block; }

/* ---------- numbered badges ----------
   The old JPGs had these burned in as pixels. They are HTML now: the app's own --warn amber
   (never a hardcoded orange), real selectable label text, and geometry in PERCENT of the shot
   so one set of coordinates is correct at every display width. */
.bd, .bm { position: absolute; inset: 0; pointer-events: none; font-size: clamp(9px, 2.15cqw, 13px); }
.bm { display: none; }
@media (max-width: 640px) { .bd { display: none; } .bm { display: block; } }

.hb {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border: 2px solid var(--warn); border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6);   /* a dark hairline so the amber holds on light UI too */
}
/* the label rides the box's top-left corner by default; --lx slides it along that edge.
   Anchored by BOTTOM-edge-of-label-to-top-of-box (calc(100% + gap)), not a fixed top:-Nem —
   a fixed em offset assumed a label height that a short box didn't have, so the label's own
   body ate into the box it was pointing at (measured up to 100% of a 12px-tall box hidden). */
.hb > p, .offs > p {
  position: absolute; left: calc(var(--lx, 0) * 1% - .4em); bottom: calc(100% + .35em); margin: 0;
  display: flex; align-items: center; gap: .4em; white-space: nowrap;
  font-weight: 700; line-height: 1; color: var(--ink); background: var(--warn);
  border-radius: 999px; padding: .32em .75em .32em .3em;
  z-index: 2;   /* a label always wins over the off-frame strip's backdrop */
}
.hb > p > b, .offs > p > b {
  flex: none; width: 1.65em; height: 1.65em; border-radius: 50%;
  background: var(--ink); color: var(--warn); font-size: .95em;
  display: flex; align-items: center; justify-content: center;
}
.hb.b > p  { bottom: auto; top: calc(100% + .35em); }              /* hang it under the box instead */
.hb.in > p { bottom: auto; top: .3em; }                             /* box is flush with the top edge */
.hb.r > p  { left: auto; right: -.4em; flex-direction: row-reverse; padding: .32em .3em .32em .75em; }

/* Some targets are genuinely below the fold of a single screen (a call sheet is ~5 phone
   screens tall). Cropping the number out would break the (1)…(4) references in the prose, so
   the marker is pinned to the bottom of the frame and says where the thing actually is.
   --ob lifts the strip clear of a badge that already owns the bottom edge (the pipeline footer). */
.offs {
  position: absolute; left: 0; right: 0; bottom: calc(var(--ob, 0) * 1%); z-index: 1;
  padding: 2.2em .7em .7em; display: flex; flex-wrap: wrap; gap: .45em;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.92) 60%);
}
.offs > p { position: static; }

/* ---------- callouts: the app's chip/rulebar language ---------- */
.callout {
  margin: 0 0 18px; padding: 12px 15px; background: var(--panel);
  border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 9px;
  font-size: 14px; color: var(--text);
}
.callout p { margin: 0; }
.callout-label {
  display: inline-block; margin-right: 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: 1px;
}
.callout-note { border-left-color: var(--accent); }
.callout-note .callout-label { color: var(--accent); }
.callout-tip { border-left-color: var(--ok); }
.callout-tip .callout-label { color: var(--ok); }
/* mobile notes wear the app's amber — the same colour as the numbered badges on the shots */
.callout-mobile { border-left-color: var(--warn); }
.callout-mobile .callout-label { color: var(--warn); }

/* ---------- shortcuts table: the planner table, scaled down ---------- */
/* app.css sets table{min-width:1050px} for the planner's wide ticket grid — that would
   force this narrow shortcuts table to overflow the column. */
.helpdoc .shortcut-table { min-width: 0; table-layout: fixed; }
.helpdoc .shortcut-table th, .helpdoc .shortcut-table td { overflow-wrap: anywhere; }
.helpdoc .shortcut-table code { white-space: normal; }
.shortcut-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 13.5px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.shortcut-table th {
  text-align: left; padding: 9px 13px; background: var(--panel2); color: var(--muted);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--border);
}
.shortcut-table td { padding: 9px 13px; border-bottom: 1px solid var(--border); }
.shortcut-table tr:last-child td { border-bottom: 0; }
.shortcut-table tr.odd td { background: var(--panel); }
.shortcut-table tr.even td { background: transparent; }
.shortcut-table code, .helpbody code {
  font: 12.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 6px; color: var(--text); white-space: nowrap;
}

::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); }

/* ---------- phones: rail collapses, single column (matches the apps' 640px break) ---------- */
@media (max-width: 860px) {
  .wrap { grid-template-columns: 1fr; gap: 16px; padding: 16px 15px 80px; }
  .masthead { padding: 22px 15px 18px; }
  .masthead h1 { font-size: 21px; }
  .toc { position: static; padding: 10px; }
  .toc-toggle {
    display: block; text-align: left; font-weight: 650; font-size: 13.5px;
    background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; color: var(--text);
  }
  .toc-toggle::after { content: ' ▾'; color: var(--muted); }
  .toc.open .toc-toggle::after { content: ' ▴'; }
  .toc-label, .toc nav { display: none; }
  .toc.open nav { display: block; margin-top: 8px; }
  .toc.open .toc-label { display: block; }
  .helpbody { font-size: 15px; }
  .helpbody h2 { font-size: 19px; margin-top: 32px; }
}

/* ---------- motion ----------
   The glide is driven in help.js (clamped duration). scroll-behavior stays AUTO so the two
   don't fight — a native smooth scroll layered on the JS animation causes visible stutter. */
html.helpdoc { scroll-behavior: auto; }
.helpbody h2:focus, .helpbody h3:focus { outline: none; }   /* focus is for a11y landing, not a ring */
.helpbody h2[tabindex]:focus-visible, .helpbody h3[tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { html.helpdoc { scroll-behavior: auto; } }

/* ---------- back to top ---------- */
.backtotop-wrap { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--border); }
.backtotop {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color .12s, color .12s, transform .12s;
}
.backtotop:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.backtotop:active { transform: translateY(0); }
.helpbody .backtotop { border-bottom: 1px solid var(--border); }  /* beat the generic link underline */
.helpbody .backtotop:hover { border-color: var(--accent); }