/* Help & documentation site — Bonafide Ledger styling.
   Tokens duplicated from billing_cost_simulator.css. If those tokens
   evolve, mirror the change here intentionally. */

.csm-help {
  /* --bl-* palette folded to canonical --xt-* at tokens.css :root (Phase 3);
     inherited here. (Font token below is intentionally retained — the
     serif display-face swap is a later phase.) */
  /* Display serif token, mirrored from the global Xtrius stack (tokens.css).
     Help pages don't import tokens.css, so it's defined locally here; the
     Source Serif 4 face is self-hosted via help_fonts.css. */
  --xt-font-display: 'Source Serif 4', Georgia, serif;

  display: grid;
  grid-template-columns: 240px 1fr 220px;
  gap: 28px;
  /* App-wide canvas cap. Help pages historically don't import tokens.css
     (see header note), so keep the literal fallback so the cap holds even if
     the help layout is ever decoupled from the app shell. */
  max-width: var(--xt-canvas-max, 1320px);
  margin: 0 auto;
  padding: 22px 24px 64px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--bl-ink);
  font-size: 14px;
  line-height: 1.55;
  background: var(--bl-paper);
}

.csm-help *,
.csm-help *::before,
.csm-help *::after { box-sizing: border-box; }

.csm-help .xt-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bl-ink-mute);
  font-weight: 500;
}

/* Sidebar */
.csm-help__sidebar { position: sticky; top: 88px; align-self: start; }
.csm-help__sidebar-section + .csm-help__sidebar-section { margin-top: 22px; }
.csm-help__sidebar-section-title { display: block; margin-bottom: 8px; }
.csm-help__sidebar-list { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--bl-paper-line); }
.csm-help__sidebar-link {
  display: block;
  padding: 5px 0 5px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--bl-ink);
  text-decoration: none;
}
.csm-help__sidebar-link:hover { color: var(--bl-oxblood); }
.csm-help__sidebar-link--active {
  border-left-color: var(--bl-ink);
  font-weight: 600;
}

/* Breadcrumb */
.csm-help__crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bl-ink-mute);
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.csm-help__crumb a { color: var(--bl-ink-mute); text-decoration: none; }
.csm-help__crumb a:hover { color: var(--bl-ink); }

/* Main */
/* min-width:0 lets the grid track shrink below its content's intrinsic width
   so wide content (tables, code blocks) can clip/scroll instead of blowing the
   column — and the whole page — out to its natural width. */
.csm-help__main { min-width: 0; }
.csm-help__main h1 {
  font-family: var(--xt-font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.012em;
  margin: 0 0 10px;
  border-bottom: 2px solid var(--bl-rule);
  padding-bottom: 14px;
}
.csm-help__body h2 {
  font-family: var(--xt-font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 28px 0 10px;
}
.csm-help__body h3 {
  font-family: var(--xt-font-display);
  font-weight: 500;
  font-size: 17px;
  margin: 20px 0 8px;
}
.csm-help__body p { margin: 0 0 12px; }
.csm-help__body code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  background: var(--bl-paper-warm);
  padding: 1px 5px;
  border: 1px solid var(--bl-paper-line);
  font-size: 12.5px;
}
.csm-help__body ul, .csm-help__body ol { margin: 0 0 14px 20px; }
/* Markdown-embedded media must never overflow the content column on mobile. */
.csm-help__body img,
.csm-help__body picture,
.csm-help__body picture img { max-width: 100%; height: auto; }

/* TOC */
.csm-help__toc { position: sticky; top: 88px; align-self: start; }
.csm-help__toc-inner { border-left: 1px solid var(--bl-paper-line); padding-left: 14px; }
.csm-help__toc-list { list-style: none; padding: 0; margin: 8px 0 0; }
.csm-help__toc-item a {
  display: block;
  padding: 3px 0;
  color: var(--bl-ink-mute);
  text-decoration: none;
  font-size: 12.5px;
}
.csm-help__toc-item a:hover { color: var(--bl-ink); }
.csm-help__toc-item--lvl3 { padding-left: 12px; }

/* Screenshot placeholders (PR-2 replaces with real PNGs) */
.help-screenshot {
  margin: 16px 0;
  border: 1px solid var(--bl-paper-line);
  background: var(--bl-paper-warm);
}
.help-screenshot__placeholder {
  padding: 60px 16px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bl-ink-mute);
}

/* Role chip */
.role-chip {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--bl-ink-mute);
  color: var(--bl-ink-mute);
  margin-left: 6px;
}
.role-chip--admin { border-color: var(--bl-oxblood); color: var(--bl-oxblood); }
.role-chip--manager { border-color: var(--bl-sage); color: var(--bl-sage); }
.role-chip--staff { border-color: var(--bl-ink); color: var(--bl-ink); }
.role-chip--accountant { border-color: var(--bl-amber); color: var(--bl-amber); }

/* Ghost button (route_link) */
.help-route-link.btn--ghost {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--bl-paper-line);
  background: var(--bl-paper);
  color: var(--bl-ink-mute);
  text-decoration: none;
}
.help-route-link.btn--ghost:hover {
  color: var(--bl-ink);
  border-color: var(--bl-ink);
}

/* Hero (landing) */
.csm-help__hero { margin-bottom: 22px; }
.csm-help__hero .xt-eyebrow { display: block; margin-bottom: 6px; }
.csm-help__hero h1 {
  font-family: var(--xt-font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.012em;
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Sidebar search (PR-7) ──────────────────────────────────────────── */
.csm-help__search { margin-bottom: 22px; position: relative; }
.csm-help__search-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bl-ink-mute);
  margin-bottom: 6px;
}
.csm-help__search-input {
  width: 100%;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  color: var(--bl-ink);
  background: var(--bl-paper);
  border: 1px solid var(--bl-paper-line);
  padding: 7px 10px;
  border-radius: 2px;
}
.csm-help__search-input::placeholder { color: var(--bl-ink-mute); }
.csm-help__search-input:focus {
  outline: none;
  border-color: var(--bl-ink);
}
.csm-help__search-results {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border: 1px solid var(--bl-paper-line);
  background: var(--bl-paper);
  max-height: 60vh;
  overflow-y: auto;
}
.csm-help__search-result a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--bl-ink);
  border-bottom: 1px solid var(--bl-paper-line);
}
.csm-help__search-result:last-child a { border-bottom: none; }
.csm-help__search-result a:hover,
.csm-help__search-result[aria-selected="true"] a,
.csm-help__search-result a:focus-visible {
  background: var(--bl-paper-warm);
  outline: none;
}
.csm-help__search-result-title { display: block; font-weight: 600; }
.csm-help__search-result-section {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bl-ink-mute);
  margin-top: 1px;
}
.csm-help__search-result-snippet {
  display: block;
  font-size: 11.5px;
  color: var(--bl-ink-mute);
  margin-top: 3px;
}
.csm-help__search-result-snippet mark {
  background: var(--bl-amber);
  color: var(--bl-paper);
  padding: 0 1px;
}
.csm-help__search-empty {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--bl-ink-mute);
  border: 1px solid var(--bl-paper-line);
}
/* While a query is active, dim the section list so results read as primary. */
.csm-help__sidebar-sections[data-searching="true"] {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Mobile drawer toggle + backdrop (PR-7) ─────────────────────────── */
.csm-help__drawer-toggle { display: none; }   /* desktop: hidden */
.csm-help__drawer-backdrop { display: none; }  /* desktop: never shown */
@keyframes csm-help-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Focus-visible + reduced-motion a11y (PR-7) ─────────────────────── */
.csm-help a:focus-visible,
.csm-help button:focus-visible,
.csm-help input:focus-visible,
.csm-help summary:focus-visible {
  outline: 2px solid var(--bl-oxblood);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .csm-help *,
  .csm-help__sidebar { transition: none !important; animation: none !important; }
}

/* ── TOC as collapsible (PR-7) ──────────────────────────────────────── */
/* Desktop: behave like the old static block — open, summary hidden. */
.csm-help__toc-details > .csm-help__toc-summary { display: none; }
.csm-help__toc-inner-eyebrow { display: block; margin-bottom: 4px; }

/* Responsive */
@media (max-width: 1280px) {
  /* Right rail folds into a collapsible TOC shown ABOVE the article so
     mobile readers keep in-page nav (was display:none — content vanished). */
  .csm-help { grid-template-columns: 220px 1fr; }
  .csm-help__toc {
    grid-column: 2;        /* span the content column, not its own rail */
    grid-row: 1;
    position: static;
    margin-bottom: 16px;
  }
  .csm-help__sidebar { grid-row: 1 / span 2; }
  .csm-help__main { grid-row: 2; grid-column: 2; }
  .csm-help__toc-details {
    border: 1px solid var(--bl-paper-line);
    background: var(--bl-paper-warm);
    padding: 4px 12px;
  }
  .csm-help__toc-details > .csm-help__toc-summary {
    display: block;
    cursor: pointer;
    padding: 6px 0;
    list-style: none;
  }
  .csm-help__toc-details > .csm-help__toc-summary::-webkit-details-marker { display: none; }
  .csm-help__toc-details[open] > .csm-help__toc-summary { margin-bottom: 4px; }
  .csm-help__toc-inner { border-left: none; padding-left: 0; }
  .csm-help__toc-inner-eyebrow { display: none; }  /* summary already labels it */
}

@media (max-width: 1024px) {
  /* Sidebar becomes a button-toggled slide-in drawer (fixed, out of grid flow),
     so the single column holds just the TOC then the article. Keep the
     collapsible TOC ABOVE the content — DOM order is main-before-toc, so pin
     explicit rows rather than falling back to grid-row:auto. */
  .csm-help { grid-template-columns: 1fr; }
  .csm-help__toc { grid-column: 1; grid-row: 1; }
  .csm-help__main { grid-column: 1; grid-row: 2; }

  .csm-help__drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 8px;
    z-index: 41;
    margin-bottom: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 12px;
    border: 1px solid var(--bl-ink);
    background: var(--bl-paper);
    color: var(--bl-ink);
    cursor: pointer;
  }
  .csm-help__drawer-toggle-bars,
  .csm-help__drawer-toggle-bars::before,
  .csm-help__drawer-toggle-bars::after {
    content: '';
    display: block;
    width: 16px;
    height: 2px;
    background: var(--bl-ink);
    position: relative;
  }
  .csm-help__drawer-toggle-bars::before { position: absolute; top: -5px; }
  .csm-help__drawer-toggle-bars::after  { position: absolute; top: 5px; }

  /* The aside is a static positioning context; the NAV inside it is the
     element that slides, so the toggle button + backdrop (siblings of the
     nav, also inside the aside) stay put rather than sliding off-screen. */
  .csm-help__sidebar { position: static; }
  .csm-help__sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 84vw;
    z-index: 50;
    background: var(--bl-paper);
    border-right: 2px solid var(--bl-rule);
    padding: 20px 18px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .csm-help__sidebar-nav[data-drawer-open="true"] { transform: translateX(0); }

  .csm-help__drawer-backdrop[data-drawer-open="true"] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(26, 26, 26, 0.42);
    animation: csm-help-fade .22s ease;
  }
  /* prefers-reduced-motion is handled by the global !important block above,
     which covers these .csm-help descendants — no per-breakpoint repeat needed. */
}

/* Anon layout topbar */
.csm-help__anon-topbar {
  max-width: var(--xt-canvas-max, 1320px);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #1a1a1a;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.csm-help__anon-brand {
  font-family: var(--xt-font-display);
  font-weight: 500;
  font-size: 18px;
  color: #1a1a1a;
  text-decoration: none;
}
.csm-help__anon-signin {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #ffffff;
  text-decoration: none;
}
.csm-help__anon-signin:hover { background: #8b2635; border-color: #8b2635; }

/* Login-page help link */
.xt-auth-help-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xt-fg-3, #6b6356);
  text-decoration: none;
  margin-top: 16px;
}
.xt-auth-help-link:hover { color: var(--xt-fg-1, #1a1a1a); }

/* Callouts */
.help-note {
  border-left: 3px solid var(--bl-ink-mute);
  background: var(--bl-paper-warm);
  padding: 12px 16px;
  margin: 18px 0;
  font-size: 13px;
}
.help-note--admin { border-left-color: var(--bl-oxblood); }

/* Doc tables */
.help-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.help-table th, .help-table td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--bl-paper-line);
}
.help-table th {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bl-ink-mute);
}
.help-table__note {
  caption-side: top; text-align: left; font-size: 11px;
  color: var(--bl-ink-mute); margin-bottom: 6px;
}

/* Admin-only step gating — admin sees content, others see the note. */
.csm-help:not([data-reader-role="admin"]) .help-admin-only { display: none; }
.csm-help[data-reader-role="admin"] .help-note--admin { display: none; }

/* The two role chip colours the base set was missing. */
.role-chip--executive { border-color: var(--bl-ink-mute); color: var(--bl-ink-mute); }
.role-chip--salesperson { border-color: var(--bl-ink-mute); color: var(--bl-ink-mute); }

/* Reader's own role chip — filled "you are here" state. Per-role background
   (currentColor can't be used: co-setting color would collapse both to paper). */
.csm-help[data-reader-role="staff"] .role-chip--staff { background: var(--bl-ink); }
.csm-help[data-reader-role="manager"] .role-chip--manager { background: var(--bl-sage); }
.csm-help[data-reader-role="admin"] .role-chip--admin { background: var(--bl-oxblood); }
.csm-help[data-reader-role="accountant"] .role-chip--accountant { background: var(--bl-amber); }
.csm-help[data-reader-role="executive"] .role-chip--executive,
.csm-help[data-reader-role="salesperson"] .role-chip--salesperson { background: var(--bl-ink-mute); }
.csm-help[data-reader-role="staff"] .role-chip--staff,
.csm-help[data-reader-role="manager"] .role-chip--manager,
.csm-help[data-reader-role="admin"] .role-chip--admin,
.csm-help[data-reader-role="accountant"] .role-chip--accountant,
.csm-help[data-reader-role="executive"] .role-chip--executive,
.csm-help[data-reader-role="salesperson"] .role-chip--salesperson { color: var(--bl-paper); }