/* The guide template (HELP-GUIDES-1, picked 2026-09-22 as drawn in design/help/guide.html): one page for every
   Knowledgebase article and help guide, on the product-home frame (ll-home.css) and the 4.1 shared reading set
   (ll-v5.css). This sheet holds only what the template adds: the band, the rail, the section header, the
   table, code and key/value rows, and the payment-rail matrix. Tokens only. */

.guide-page .guide-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--t-ui);color:var(--muted);}
.guide-page .guide-crumbs a{color:var(--muted);}
.guide-page .guide-crumbs a:hover{color:var(--ink);}
.guide-page .guide-crumbs [aria-current]{color:var(--ink);font-weight:700;}

/* SHIP #536's stock band: the block on --sunk with the 6% accent wash as its one move, the --border-2 hairline
   beneath, and the eyebrow's accent rule extended across the copy. */
.guide-band{background:color-mix(in srgb,var(--ac,var(--ledger)) 6%,var(--sunk));border-bottom:1px solid var(--border-2);}
.guide-band-body{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:stretch;}
.guide-band-copy{display:grid;gap:.85rem;align-content:start;min-width:0;}
.guide-band-copy .kicker{margin:0;display:flex;align-items:center;gap:.75rem;color:var(--ac,var(--ledger));}
.guide-band-copy .kicker::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--ac,var(--ledger)) 45%,transparent);}
.guide-title{margin:0;font-size:var(--t-1,1.9rem);font-weight:800;letter-spacing:var(--tr-heading,-.02em);line-height:1.15;color:var(--ink);}
.guide-lede{margin:0;max-width:60ch;font-size:var(--t-2,1.05rem);line-height:var(--lh-body,1.6);color:var(--muted);}
.guide-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0;font-family:var(--mono);font-size:var(--t-small);color:var(--muted);}
.guide-meta span[data-ll-icon]{display:inline-flex;height:1.2em;color:var(--muted);}
.guide-doors{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.35rem;}

.guide-layout{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:1.5rem;align-items:start;}
.guide-aside,.guide-main{display:grid;gap:1.5rem;min-width:0;align-content:start;}
.guide-aside{position:sticky;top:calc(var(--topbar-h) + 4rem);}
.guide-page [data-boxed-section]{min-width:0;align-self:start;}
.guide-page .sech .c{font-size:var(--t-label);}
.guide-page .card-h .sech{width:100%;margin:0;align-items:center;flex-wrap:wrap;gap:.7rem;}
.guide-page .card-h .sp{min-width:0;}
.guide-page .home-lane-meta{font-size:var(--t-small);color:var(--muted);line-height:var(--lh-body);margin:0;}

/* A section's header: the icon badge, the title and, where the guide gives one, a door (no index: PICK headers B). The glyph
   box sizes to its 18 px drawing; a 1rem box left it hanging a pixel low. */
.sec-ic{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card-2);color:var(--ac,var(--ledger));}
.sec-ic span[data-ll-icon]{display:grid;}
/* A header door's arrow centres on its label: inline, the 18 px glyph sat on the 12 px label's baseline, 5 px high. */
.guide-page .sech a.c{display:inline-flex;align-items:center;gap:.35rem;}
.guide-page .sech a.c [data-ll-icon]{display:inline-flex;}
.guide-page .sech a.c svg{width:1.15em;height:1.15em;}

.guide-nav{display:grid;gap:0;min-width:0;border-bottom:0;}
.guide-nav a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.75rem;min-height:2.5rem;padding:.7rem .25rem;font-size:var(--t-ui);line-height:var(--lh-body);white-space:normal;}
.guide-nav a>span[data-ll-icon]{height:calc(var(--t-ui) * var(--lh-body));color:var(--muted);}
.guide-related{display:grid;gap:.9rem;}
.guide-related a{display:grid;gap:.15rem;font-size:var(--t-ui);}
.guide-related a strong{color:var(--ink);}
.guide-related a .home-lane-meta{font-weight:400;}

.guide-table-scroll{overflow-x:auto;}
.guide-table{width:100%;border-collapse:collapse;font-size:var(--t-ui);}
.guide-table th,.guide-table td{padding:.65rem .9rem;text-align:left;vertical-align:top;border-top:1px solid var(--border-2);}
.guide-table thead th{font-family:var(--mono);font-size:var(--t-small);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);border-top:0;}
.guide-table tbody th{font-weight:700;color:var(--ink);}

/* Matt's PICK on design/help/guide-options.html (2026-09-22). Rows with glyphs, in no order (05 C): the glyph larger, in the
   product colour, centred on its row. */
.guide-page .ll-read-list .ll-read-step{grid-template-columns:1.5rem minmax(0,1fr);gap:1.1rem;align-items:center;}
.guide-page .ll-read-list .ll-read-step>[data-ll-icon]{display:grid;place-items:center;height:auto;color:var(--ac,var(--ledger));}
.guide-page .ll-read-list .ll-read-step>[data-ll-icon] svg{width:22px;height:22px;}
/* Steps in order that carry glyphs (03 C): the glyph on a soft tint, the number as "Step N" above the lead. */
.guide-page .ll-read-steps.guide-steps{list-style:none;padding:0;}
.guide-page .ll-read-steps.guide-steps>li{padding:1.1rem 1.25rem;}
.guide-page .guide-steps .ll-read-step{grid-template-columns:2.25rem minmax(0,1fr);gap:1rem;align-items:start;}
.guide-page .guide-steps .ll-read-step>[data-ll-icon]{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--r-sm);background:color-mix(in srgb,var(--ac,var(--ledger)) 14%,transparent);color:var(--ac,var(--ledger));}
.guide-step-k{display:block;margin-bottom:-.35rem;font-family:var(--mono);font-size:var(--t-small);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);}
/* Links inside the reading text (links C): the link blue with a soft underline; doors and buttons keep their own look. */
.guide-main .ll-reading a:not(.btn):not(.c){color:var(--blueHi);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--blueHi) 40%,transparent);text-underline-offset:3px;}
.guide-main .ll-reading a:not(.btn):not(.c):hover{text-decoration-color:var(--blueHi);}
/* Yes/no columns (02 B): the family's check in green, a faded dash, centred. */
.guide-table .guide-mark{text-align:center;}
.guide-mark-yes{display:inline-flex;align-items:center;justify-content:center;color:var(--green);}
.guide-mark-yes [data-ll-icon]{display:inline-flex;}
.guide-mark-no{color:var(--dim);}
.guide-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Labelled rows (06 B): the terms in one column, each centred on its row; the cells stretch so the row lines stay whole. */
.guide-terms dt{display:flex;align-items:center;}

.guide-main :where(p,li,td,dd) code{font-family:var(--mono);font-size:.92em;padding:.05em .35em;border-radius:var(--r-sm);background:var(--sunk);border:1px solid var(--border-2);}
.guide-code{margin:0;padding:1rem 1.25rem;overflow-x:auto;background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-md);font-family:var(--mono);font-size:var(--t-small);line-height:var(--lh-body);color:var(--ink);}
.guide-code code{font:inherit;white-space:pre;}

/* Key/value rows: a run of paragraphs that open with a bold "Label:" (the payment-rail sections). */
.guide-attrs{display:grid;grid-template-columns:minmax(8rem,auto) minmax(0,1fr);margin:0;border:1px solid var(--border-2);border-radius:var(--r-md);background:var(--card);overflow:hidden;}
.guide-attrs dt,.guide-attrs dd{margin:0;padding:.8rem 1rem;border-top:1px solid var(--border-2);}
.guide-attrs dt{font-family:var(--mono);font-size:var(--t-small);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);}
.guide-attrs :is(dt,dd):nth-child(-n+2){border-top:0;}

/* The payment-rail comparison: a rating is three dots and a word; the colour repeats what the dots and word say. */
.guide-rating{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--ink);}
.guide-dots{display:inline-flex;gap:.2rem;}
.guide-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--border);}
.guide-rating[data-tier="strong"] .guide-dot[data-on]{background:var(--oc-green);}
.guide-rating[data-tier="moderate"] .guide-dot[data-on]{background:var(--oc-gold);}
.guide-rating[data-tier="weak"] .guide-dot[data-on]{background:var(--oc-red);}
.guide-cell-note{display:block;margin-top:.3rem;font-size:var(--t-small);color:var(--muted);line-height:var(--lh-body);}
.guide-col-hint{display:block;margin-top:.25rem;font-family:var(--font);font-size:var(--t-small);font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted);}
.guide-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:var(--t-small);color:var(--muted);}

.guide-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;}
.guide-footer nav{display:flex;flex-wrap:wrap;gap:.6rem;}

@container home (max-width:65rem){
  .guide-layout{grid-template-columns:minmax(0,1fr);}
  .guide-aside{position:static;grid-template-columns:minmax(0,1fr) 16rem;}
}
@container home (max-width:42rem){
  .guide-band-copy .kicker{font-size:.6875rem;}
  .guide-aside{grid-template-columns:minmax(0,1fr);}
  .guide-attrs{grid-template-columns:minmax(0,1fr);}
  .guide-attrs dd{border-top:0;padding-top:0;}
}