/* Help-page components — layered on marketing.css for the public /help/ pages.
   Uses the canonical tokens from colors_and_type.css and the marketing-surface
   aliases marketing.css already defines. No new hues or fonts. */

/* TOPIC CARDS (/help/ index) */
.help-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;}
.help-topic{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;background:white;border:1px solid rgba(26,58,42,.08);border-radius:6px;padding:1.7rem;transition:transform .2s,box-shadow .2s;}
.help-topic:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(26,58,42,.1);}
.help-topic .htag{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-800);}
.help-topic h3{font-family:'Playfair Display',serif;font-size:1.08rem;font-weight:700;color:var(--forest);margin:.15rem 0 .25rem;}
.help-topic p{font-size:.88rem;color:var(--fg-muted);font-weight:400;line-height:1.55;}
.help-topic .go{margin-top:.6rem;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.08em;color:var(--pine);text-transform:uppercase;}

/* A second topic group on the index needs air above it; .spaced is defined
   only for .note in marketing.css. */
.sec-head.spaced{margin-top:3.4rem;}

/* NUMBERED STEP TRAIL */
.trail{position:relative;padding-left:clamp(2.6rem,6vw,3.6rem);display:flex;flex-direction:column;gap:clamp(2.2rem,5vw,3.4rem);}
.trail::before{content:'';position:absolute;left:clamp(.95rem,2.2vw,1.35rem);top:.6rem;bottom:.6rem;width:1px;background:rgba(26,58,42,.16);}
.step{position:relative;}
.step-num{position:absolute;left:calc(-1 * clamp(2.6rem,6vw,3.6rem));top:-2px;width:clamp(1.9rem,4.4vw,2.7rem);height:clamp(1.9rem,4.4vw,2.7rem);border-radius:50%;background:var(--forest);color:var(--gold);border:1px solid var(--gold);display:grid;place-items:center;font-family:'DM Mono',monospace;font-size:.82rem;font-weight:500;}
.step h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.2;margin:0 0 .1rem;color:var(--forest);}
.step-body{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin-top:.85rem;}
.step p{margin:0 0 .8rem;font-size:.98rem;line-height:1.68;color:var(--fg-muted);}
.step p:last-child{margin-bottom:0;}

/* CONTROL LABELS — names of on-screen buttons and fields */
.ui{font-weight:600;color:var(--forest);border-bottom:2px solid var(--gold);white-space:nowrap;}
.path{font-family:'DM Mono',monospace;font-size:.86em;color:var(--ink-muted);background:var(--parchment);padding:.1em .38em;border-radius:2px;overflow-wrap:anywhere;}

/* SCREENSHOT FRAMES */
.shot{background:var(--parchment);border:1px solid rgba(26,58,42,.14);padding:.6rem;}
.shot img{width:100%;height:auto;display:block;}
/* Never upscale a narrow capture past its native width — the sidebar shot is
   256px and goes soft if the grid column stretches it. */
figure.shot-narrow{max-width:280px;}
.shot-row{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;margin-top:1.3rem;align-items:start;}
.shot-cap{font-family:'DM Mono',monospace;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-subtle);margin-top:.55rem;}

/* BRANCH PANEL — the password-free route, on the dark band */
.branch{background:var(--forest);color:var(--canvas);border-left:4px solid var(--gold);padding:clamp(1.8rem,4vw,2.6rem);margin:clamp(2.4rem,5vw,3.6rem) 0;}
.branch .section-label{color:var(--amber);}
.branch h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.6rem,3.8vw,2.3rem);line-height:1.1;margin:0 0 .55rem;color:var(--canvas);}
.branch h2 em{font-style:italic;color:var(--gold);}
.branch .branch-lede{color:var(--moss);margin:0 0 1.5rem;max-width:56ch;line-height:1.7;}
.branch .ui{color:var(--gold);border-bottom-color:rgba(212,168,67,.5);}
.branch .shot{background:rgba(0,0,0,.22);border-color:rgba(138,184,154,.28);}
.branch .shot-cap{color:var(--moss);}
.branch-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;}
.branch ol{margin:0;padding:0;list-style:none;counter-reset:mstep;display:flex;flex-direction:column;gap:.95rem;}
.branch ol li{counter-increment:mstep;position:relative;padding-left:2.1rem;color:var(--canvas);line-height:1.65;font-size:.98rem;}
.branch ol li::before{content:counter(mstep);position:absolute;left:0;top:.06em;font-family:'DM Mono',monospace;font-size:.72rem;color:var(--forest);background:var(--gold);width:1.45rem;height:1.45rem;border-radius:50%;display:grid;place-items:center;}
.branch-shots{display:flex;flex-direction:column;gap:1.1rem;}
.branch-rules{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid rgba(138,184,154,.25);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem 1.6rem;}
.branch-rules div{font-size:.88rem;line-height:1.5;color:var(--moss);}
.branch-rules b{display:block;font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:.25rem;}

/* ANSWER STATES — a control whose whole subject is what its faces mean, so the
   faces are shown as themselves rather than as a screenshot that goes stale.
   Colours are the canonical status tokens the app's own chip already uses. */
.states{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1rem;margin-top:1.3rem;}
.state{background:white;border:1px solid rgba(26,58,42,.1);border-radius:6px;padding:1.1rem 1.2rem;}
.state p{margin:.55rem 0 0;font-size:.88rem;line-height:1.6;color:var(--fg-muted);}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:.22rem .75rem;font-size:.82rem;font-weight:600;border:1px solid;}
.chip.ask{background:rgba(26,58,42,.06);color:var(--ink-subtle);border-color:rgba(26,58,42,.2);}
.chip.yes{background:color-mix(in srgb,var(--status-success) 10%,transparent);color:var(--status-success);border-color:color-mix(in srgb,var(--status-success) 30%,transparent);}
.chip.no{background:color-mix(in srgb,var(--status-danger) 10%,transparent);color:var(--status-danger);border-color:color-mix(in srgb,var(--status-danger) 30%,transparent);}
.chip.maybe{background:color-mix(in srgb,var(--status-warning) 10%,transparent);color:var(--status-warning);border-color:color-mix(in srgb,var(--status-warning) 30%,transparent);}
.chip.wait{background:color-mix(in srgb,var(--status-info) 10%,transparent);color:var(--status-info);border-color:color-mix(in srgb,var(--status-info) 30%,transparent);}
/* Inline in a sentence, where the surrounding line-height is the paragraph's. */
p .chip{font-size:.8em;vertical-align:baseline;}

/* TROUBLESHOOTING TABLE */
.fix-table{width:100%;border-collapse:collapse;font-size:.95rem;}
.fix-table th{text-align:left;font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-subtle);font-weight:500;padding:0 1.2rem .6rem 0;border-bottom:1px solid rgba(26,58,42,.16);}
.fix-table td{padding:.95rem 1.2rem .95rem 0;border-bottom:1px solid rgba(26,58,42,.12);vertical-align:top;line-height:1.55;color:var(--fg-muted);font-weight:400;}
.fix-table td.q{color:var(--ink);font-weight:600;width:34%;min-width:11rem;}

@media(min-width:820px){
  .step-body.split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1.9rem;align-items:start;}
  .step-body.split.narrow{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
  .branch-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:2.4rem;align-items:start;}
  .shot-row{grid-template-columns:minmax(0,1fr) 280px;gap:1.8rem;}
}

@media(max-width:640px){
  .fix-table,.fix-table tbody,.fix-table tr,.fix-table td{display:block;width:100%;}
  .fix-table thead{display:none;}
  .fix-table tr{border-bottom:1px solid rgba(26,58,42,.12);padding:.85rem 0;}
  .fix-table td{border:0;padding:0;}
  .fix-table td.q{width:auto;margin-bottom:.2rem;}
}

/* PRINT — the guide doubles as a handout troops give to new families. */
@media print{
  nav,footer,.cta-band{display:none;}
  .page-hero{padding:1.5rem 0 1rem;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  section{padding:1.2rem 0;}
  .step,.branch,.fix-table,.state{break-inside:avoid;}
  .branch,.step-num,.branch ol li::before{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}