/* manual.css - the three manuals in Resources (the product manual, the field tech guide, the Cx provider guide), on top of
   site.css. Rules it keeps:
   - every color comes from site.css tokens, so light and dark follow the site (the screenshots are of the light app, and
     sit in a frame that reads on both);
   - nothing is wider than the screen from 320 to 1440, with 16 px side gutters on phones;
   - the page reads fine with no script: manual.js only adds the find box, the current-section mark and the Print button;
   - print gives a clean light page whatever the screen theme: no header, footer or closing band, figures never split,
     and the field guide prints as a pocket guide (A6). */

/* ---------- the head of a manual ---------- */
.man-hero { padding: 64px 0 32px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.man-hero h1 { font-size: clamp(38px, 4.6vw, 58px); margin: 0 0 16px; }
.man-hero .lead { max-width: 720px; }
.man-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--mute); font-size: 14.5px; }
.man-meta li + li::before { content: "·"; margin-right: 18px; color: var(--faint); }
.man-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.man-acts .btn .i { margin-right: 2px; }
.man-for { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.man-for a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 550; text-decoration: none; }
.man-for a:hover { border-color: var(--brand-line); color: var(--ink); }
.man-for a[aria-current] { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); }

/* ---------- the body: contents at the side on a desk, on top on a phone ---------- */
.man { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; padding: 48px 0 24px; align-items: start; }
.man-toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; padding: 4px 6px 16px 0; font-size: 14.5px; overscroll-behavior: contain; }
.man-toc h2 { font: 600 13px/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; }
.man-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: toc; }
.man-toc li { counter-increment: toc; }
.man-toc a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.man-toc a::before { content: counter(toc); flex: none; width: 18px; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.man-toc a:hover { background: var(--surface-2); color: var(--ink); }
.man-toc a[aria-current] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.man-toc a[aria-current]::before { color: var(--brand-strong); }
.man-toc .soon-dot { margin-left: auto; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.man-find { display: block; margin: 0 0 14px; }
.man-find input { width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
.man-find input:focus { outline: 2px solid var(--brand-strong); outline-offset: 1px; border-color: transparent; }
.man-find-n { display: block; margin-top: 6px; color: var(--mute); font-size: 13px; min-height: 1.2em; }
.man-toc li.hit-none { display: none; }

.man-body { min-width: 0; max-width: 820px; }
.man-sec { padding: 8px 0 40px; border-bottom: 1px solid var(--line-2); margin-bottom: 40px; scroll-margin-top: 84px; }
.man-sec:last-child { border-bottom: 0; }
.man-sec > h2 { font-size: clamp(28px, 3vw, 38px); margin: 0 0 14px; scroll-margin-top: 84px; }
.man-sec h3 { font-size: 21px; margin: 34px 0 10px; scroll-margin-top: 84px; }
.man-sec h4 { font: 650 16px/1.4 var(--font); margin: 24px 0 8px; color: var(--ink); }
.man-sec p, .man-sec li { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.man-sec p { margin: 0 0 16px; }
.man-sec ul, .man-sec ol { margin: 0 0 18px; padding-left: 1.3em; }
.man-sec li { margin: 0 0 6px; }
.man-sec li::marker { color: var(--faint); }
.man-sec strong, .man-sec b { color: var(--ink); font-weight: 650; }
.man-sec a { color: var(--link); }
.man-sec .intro { font-size: 18.5px; line-height: 1.6; color: var(--ink); }
.man-sec .k { display: inline-block; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: .92em; font-weight: 600; white-space: nowrap; }
.anchor { margin-left: 10px; color: var(--faint); text-decoration: none; font-weight: 500; opacity: 0; transition: opacity .15s; }
h2:hover > .anchor, h3:hover > .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--link); }

/* numbered steps: one thing per line */
.steps { list-style: none; counter-reset: st; padding: 0 !important; margin: 0 0 22px !important; display: grid; gap: 10px; }
.steps > li { counter-increment: st; position: relative; padding: 2px 0 0 46px; margin: 0; min-height: 32px; }
.steps > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-strong); font: 700 15px/1 var(--font); }

/* the pictures */
.shot { margin: 24px 0 28px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--paper); }
.shot.tall { max-width: 330px; }
.shot.tall img { border-radius: 26px; border: 6px solid var(--bezel); box-shadow: var(--shadow); }
.shot.part { max-width: 560px; }
.shot.part.narrow { max-width: 380px; }
.shot figcaption { margin-top: 10px; color: var(--mute); font-size: 14px; line-height: 1.5; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 20px; margin: 24px 0 28px; }
.shots .shot { margin: 0; }
.shots.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* "Being finished": a part of the product still being built; the section says only what is sure */
.soon-box { margin: 20px 0 24px; padding: 16px 20px; border-radius: var(--r); border: 1px dashed var(--warn); background: var(--warn-soft); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.soon-box p { margin: 0; font-size: inherit; }
.soon-box p + p { margin-top: 8px; }
.soon-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 0 0; padding: 2px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--warn); color: var(--warn); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
h2 .soon-pill, h3 .soon-pill { margin-left: 10px; font-family: var(--font); }

/* tables of choices, roles and meanings */
.man-sec .dtable { font-size: 15px; }
.man-sec .dtable td, .man-sec .dtable th { font-size: 15px; line-height: 1.5; }
.tw { overflow-x: auto; margin: 0 0 20px; }
.tw .dtable { margin: 8px 0 8px; min-width: 520px; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- the field guide: one step per card, big pictures ---------- */
.pocket .man-body { max-width: 900px; }
.fg-step { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px 40px; align-items: start; }
.fg-step > .fg-text { min-width: 0; }
.fg-step > .shot { margin: 0; grid-column: 2; grid-row: 1 / span 4; }
.fg-step.flip > .shot { grid-row: auto; }
.fg-step + .fg-step { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.fg-do { list-style: none; padding: 0 !important; margin: 0 0 16px !important; display: grid; gap: 8px; counter-reset: fd; }
.fg-do > li { counter-increment: fd; position: relative; padding: 10px 14px 10px 54px; margin: 0; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 18px !important; line-height: 1.45 !important; color: var(--ink) !important; min-height: 48px; }
.fg-do > li::before { content: counter(fd); position: absolute; left: 12px; top: 9px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--bg); font: 700 15px/1 var(--font); }
.fg-tip { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.fg-tip b { color: var(--ink); }
.fg-grid { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fg-grid li { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 15.5px !important; line-height: 1.45 !important; }
.fg-grid li b { display: block; margin-bottom: 2px; }

/* ---------- phones and tablets ---------- */
@media (max-width: 1099px) {
  .man { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 28px; }
  .man-toc { position: static; max-height: none; overflow: visible; padding: 18px 18px 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 32px; }
  .man-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .man-body { max-width: none; }
}
@media (max-width: 819px) {
  .fg-step { grid-template-columns: minmax(0, 1fr); }
  .fg-step > .shot, .fg-step.flip > .shot { grid-column: 1; grid-row: auto; margin: 8px auto 4px; width: 100%; max-width: 330px; }
}
@media (max-width: 640px) {
  .man-hero { padding: 40px 0 24px; }
  .wrap.man, .man-hero .wrap { width: calc(100% - 32px); }
  .man-toc ol { grid-template-columns: minmax(0, 1fr); }
  .man-sec { padding-bottom: 28px; margin-bottom: 28px; }
  .man-sec p, .man-sec li { font-size: 16px; }
  .shots, .shots.three { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .shots .shot { width: 100%; max-width: 330px; }
  .shot.tall { margin-inline: auto; }
  .fg-do > li { font-size: 17px !important; }
  .anchor { display: none; }
  .man-meta { gap: 4px 14px; }
  .man-meta li + li::before { content: none; }
  .tw .dtable { min-width: 0; }
  .man-sec .dtable th, .man-sec .dtable td { padding: 10px 8px; font-size: 14.5px; }
  .man-sec .dtable thead th { font-size: 12px; }
  .fg-step + .fg-step { margin-top: 24px; padding-top: 24px; }
}

/* ---------- print: a clean light manual ---------- */
@media print {
  :root, :root:not([data-theme=light]), :root[data-theme=dark] {
    --bg: #ffffff; --bg-alt: #ffffff; --surface: #ffffff; --surface-2: #f4f6f9; --ink: #0f1a27; --ink-2: #26313f; --mute: #4f5b6b; --faint: #8a95a5;
    --line: #d5dbe3; --line-2: #e6eaef; --brand: #0e2238; --brand-strong: #1b4a7a; --brand-soft: rgba(31,95,168,.07); --brand-line: rgba(31,95,168,.3); --link: #1f5fa8;
    --accent: #f26b1f; --accent-soft: rgba(242,107,31,.1); --warn: #8a5a0b; --warn-soft: rgba(229,161,23,.12); --bezel: #1b1e24; --paper: #ffffff;
    --logo-l: block; --logo-d: none; --shadow: none; color-scheme: light;
  }
  @page { size: letter; margin: 15mm 15mm 17mm; @bottom-right { content: counter(page) " / " counter(pages); font: 9pt "Inter Var", sans-serif; color: #6b7583; } @bottom-left { content: "StartupSend · startupsend.com/resources"; font: 9pt "Inter Var", sans-serif; color: #6b7583; } }
  html { scroll-behavior: auto; }
  body { background: #fff; color: var(--ink); font-size: 10.5pt; }
  .skip, header.nav, footer.foot, .band, .sec:has(.band), .man-acts, .man-find, .man-for, .anchor, .crumbs { display: none !important; }
  .man-hero { padding: 0 0 8mm; border: 0; background: none; }
  .man-hero .wrap, .wrap.man { width: auto; }
  .man-hero::before { content: ""; display: block; width: 157px; height: 46px; margin-bottom: 8mm; background: url("/brand/startupsend-logo.svg") no-repeat left center / contain; }
  .man-hero h1 { font-size: 30pt; }
  .man { display: block; padding: 0; }
  .man-toc { position: static; max-height: none; overflow: visible; border: 1px solid var(--line); border-radius: 8px; padding: 5mm 6mm; margin: 0 0 6mm; background: none; break-after: page; }
  .man-toc ol { display: block; columns: 2; column-gap: 8mm; }
  .man-toc a { padding: 1.2mm 0; }
  .man-body { max-width: none; }
  .man-sec { border: 0; padding: 0; margin: 0 0 8mm; }
  .man-sec > h2 { font-size: 20pt; break-after: avoid; margin-top: 2mm; }
  .man-sec h3, .man-sec h4 { break-after: avoid; }
  .man-sec h3 { font-size: 13.5pt; margin-top: 6mm; }
  .man-sec p, .man-sec li, .man-sec .intro { font-size: 10.5pt; line-height: 1.5; }
  .shot, .shots, .steps > li, .fg-do > li, .soon-box, .callout, .dtable tr, .fg-tip { break-inside: avoid; }
  .shot { margin: 4mm 0 5mm; }
  .shot img { box-shadow: none; }
  .shot.tall { max-width: 62mm; }
  .shot.tall img { border-width: 2.5mm; border-radius: 6mm; }
  .shot.part { max-width: 120mm; }
  .shot:not(.phone):not(.part) img { max-height: 118mm; width: auto; max-width: 100%; }
  .shots { grid-template-columns: repeat(3, minmax(0, 58mm)); gap: 5mm; }
  .tw { overflow: visible; }
  .tw .dtable { min-width: 0; }
  a { color: var(--ink-2); text-decoration: none; }

  /* the field guide: a pocket guide, A6, one step to a page where it fits */
  .pocket { page: pocket; }
  .pocket .man-hero h1 { font-size: 20pt; }
  .pocket .man-hero .lead { font-size: 10pt; }
  .pocket .man-hero::before { width: 110px; height: 32px; margin-bottom: 4mm; }
  .pocket .man-toc ol { columns: 1; font-size: 9pt; }
  .pocket .man-toc a { padding: .6mm 0; }
  .pocket .man-sec { break-before: page; margin: 0; }
  .pocket .man-sec > h2 { font-size: 15pt; margin: 0 0 2mm; }
  .pocket .man-sec p, .pocket .man-sec li { font-size: 9pt; line-height: 1.4; }
  .pocket .fg-step + .fg-step { border: 0; padding-top: 0; margin-top: 0; }
  .pocket .fg-step { display: grid; grid-template-columns: minmax(0, 1fr) 34mm; gap: 2mm 3mm; align-items: start; margin-bottom: 3mm; break-inside: avoid; }
  .pocket .fg-step > .shot, .pocket .fg-step.flip > .shot { grid-column: 2; grid-row: 1 / span 4; margin: 0; width: 34mm; }
  .pocket .fg-step > .shot img { width: 100%; max-height: none; }
  .pocket .fg-step > .fg-text:only-child { grid-column: 1 / -1; }
  .pocket .fg-do { gap: 1.5mm; margin-bottom: 2mm !important; }
  .pocket .fg-do > li { font-size: 9.5pt !important; padding: 1.4mm 2mm 1.4mm 8mm; min-height: 0; border-radius: 2mm; }
  .pocket .fg-do > li::before { left: 1.6mm; top: 1.5mm; width: 4.6mm; height: 4.6mm; font-size: 7.5pt; }
  .pocket .fg-tip { font-size: 8.5pt; padding: 1.5mm 2.5mm; margin-bottom: 2mm; }
  .pocket .shot { margin: 2mm auto 0; max-width: none; text-align: center; }
  .pocket .shot img, .pocket .shot.tall img { display: inline-block; width: auto; max-width: 100%; max-height: 78mm; border-width: 1.2mm; border-radius: 3mm; }
  .pocket .shot figcaption { font-size: 7.5pt; margin-top: 1mm; }
  .pocket .shots { display: flex; gap: 2mm; justify-content: center; }
  .pocket .shots .shot img { max-height: 62mm; }
  .pocket .soon-box { font-size: 8.5pt; padding: 2mm 3mm; margin: 2mm 0; }
  .pocket .fg-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5mm; }
  .pocket .fg-grid li { font-size: 8.5pt !important; padding: 1.5mm 2.5mm; }
}
@page pocket { size: 105mm 148mm; margin: 7mm 7mm 9mm; @bottom-right { content: counter(page); font: 7pt "Inter Var", sans-serif; color: #6b7583; } @bottom-left { content: "StartupSend field guide"; font: 7pt "Inter Var", sans-serif; color: #6b7583; } }

/* ---------- the Resources page: the Manuals row above the field notes ---------- */
.res-h { font-size: clamp(24px, 2.4vw, 30px); margin: 0 0 8px; }
.res-sub { margin: 0 0 22px; color: var(--mute); font-size: 16px; max-width: 640px; }
.res-sec + .res-sec { padding-top: 8px; }