/* Guides area: hub ledger, guide byline, rule blocks, worked-example receipts,
   formula, short answer, data tables. Tokens only (light + dark). */

/* Byline */
/* Separators sit on each item's left edge; the wrapper clips the one that starts a line. */
.g-byline{overflow:hidden;margin-top:1.25rem;font:400 .8125rem/1.6 var(--mono);color:var(--muted)}
.g-byline ul{display:flex;flex-wrap:wrap;gap:.25rem 0;margin:0 0 0 calc(-1.5rem - 1px);padding:0;list-style:none}
.g-byline li{margin-left:.75rem;padding-left:.75rem;border-left:1px solid var(--notch);line-height:1.2}
.g-byline a{color:inherit}
.g-byline a:hover{color:var(--ink)}
.g-byline__policy{margin-top:.375rem;font-size:.875rem}
.page-head .ph-flag{margin-top:1rem}

/* Rule sentence printed as its own block */
.g-rule{padding:.125rem 0 .125rem 1.125rem;box-shadow:inset 4px 0 0 var(--tape),inset 5.5px 0 0 var(--tape-edge);font-size:1.125rem;font-weight:500;line-height:1.55;text-wrap:pretty}
.g-rule__label{display:block;margin-bottom:.125rem;font:400 .75rem/1.5 var(--mono);color:var(--muted)}
.prose .g-rule+.g-rule{margin-top:1rem}

/* Formula */
.formula{display:grid;gap:.5rem;padding:1rem 1.25rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);font:400 .9375rem/1.55 var(--mono)}
.formula p{display:grid;grid-template-columns:minmax(0,12.5rem) auto minmax(0,1fr);gap:.25rem .75rem;margin:0}
.formula__lhs{font-weight:600}
.formula__op{color:var(--muted)}
.formula--big p{font-size:1.0625rem}
@media (max-width:599px){.formula p{grid-template-columns:auto minmax(0,1fr)}.formula__lhs{grid-column:1/-1}}

/* Worked-example receipts */
.receipts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1rem}
.prose .receipts{margin-top:1.5em}
.receipt{display:grid;align-content:start;gap:.875rem;padding:1.125rem 1.25rem 1.25rem;border:1px solid var(--rule);border-radius:6px;background:var(--surface)}
.receipt__title{margin:0;font-size:1rem;font-weight:650;line-height:1.35}
.receipt__strip{height:12px;border-radius:2px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--rule)}
.receipt__strip span{display:block;width:max(6px,calc(var(--p) * 100%));height:100%;border-radius:2px;background:repeating-linear-gradient(90deg,var(--on-tape) 0 1px,transparent 1px 8px) 0 0/100% 40% no-repeat,var(--tape);box-shadow:inset 0 0 0 1.5px var(--tape-edge)}
.receipt__rows{display:grid;gap:.375rem;margin:0}
.receipt__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.125rem 1rem}
.receipt__row dt{font-size:.9375rem;color:var(--muted)}
.receipt__row dd{margin:0 0 0 auto;font:400 .875rem/1.5 var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.receipt__row--total{margin-top:.375rem;padding-top:.625rem;border-top:1.5px dashed var(--notch)}
.receipt__row--total dt{color:var(--ink);font-weight:650}
.receipt__row--total dd{font:700 1.375rem/1.2 var(--sans);letter-spacing:-.01em}
.receipt__note{font-size:.875rem;color:var(--muted)}

/* Short answer */
.g-answer{position:relative;padding:1.375rem 1.5rem 1.5rem;border:1.5px solid var(--ink);border-radius:6px;background:var(--surface)}
.g-answer::before{content:"";position:absolute;inset:-1.5px -1.5px auto;height:8px;border:1.5px solid var(--tape-edge);border-radius:6px 6px 0 0;background:repeating-linear-gradient(90deg,var(--on-tape) 0 1px,transparent 1px 12px) 0 0/100% 50% no-repeat,var(--tape)}
.g-answer h2{margin:0;font-size:1.25rem}
.g-answer ul{margin:.875rem 0 0;padding:0;list-style:none;display:grid;gap:.625rem}
.g-answer li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start}
.g-answer li .icon{width:1.375rem;height:1.375rem;margin-top:.15rem}
.g-answer p{margin-top:.875rem;font-size:.9375rem;color:var(--muted)}

/* Data tables in a focusable scroll region */
.g-table__title{font-weight:650;font-size:.9375rem}
.prose .g-table__title{margin-top:1.75em}
/* Scroll affordance: edge shadows appear only while there is more table to scroll to.
   position:relative makes the scroller the containing block of the absolutely
   positioned .vh text in the cells, so that text scrolls and clips with the table
   instead of widening the page. */
.g-table{position:relative;overflow-x:auto;border-radius:var(--r);-webkit-overflow-scrolling:touch;background:linear-gradient(90deg,var(--bg) 40%,transparent) 0 0/2rem 100% no-repeat local,linear-gradient(270deg,var(--bg) 40%,transparent) 100% 0/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgb(15 18 21/.16),transparent) 0 0/.625rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgb(15 18 21/.16),transparent) 100% 0/.625rem 100% no-repeat scroll}
.prose .g-table{margin-top:.5rem}
.g-table:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.g-table--mid table{min-width:30rem}
.g-table--wide table{min-width:40rem}
.g-table :is(th,td){padding:.625rem .5rem}
.g-table :is(th,td):first-child{padding-left:0}
.g-table thead th{vertical-align:bottom}
.g-table th[scope=row]{font-weight:600;white-space:nowrap}
.g-table th[scope=row] .muted{display:block;font-weight:400;font-size:.8125rem}
.g-table td{white-space:nowrap}
.g-table td.wrap{white-space:normal}
.g-table td .muted{font-size:.8125rem}
.g-table .is-low{font-weight:650}
.g-table tbody tr:hover{background:var(--surface-2)}

/* Related links */
.g-related{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.g-related li{margin:0}
.g-related a{display:inline-flex;gap:.5rem;align-items:baseline}
.g-related a::before{content:"→";color:var(--muted);text-decoration:none;display:inline-block}
@media (min-width:720px){.g-related{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}}

/* Rules list inside the reading column: one column */
.guide__body .rules{grid-template-columns:minmax(0,1fr)}

/* Hub: guide ledger */
.g-hub__list{max-width:56rem}
.g-list{margin:0;padding:0;list-style:none;border-top:1.5px solid var(--ink)}
.g-list__item{margin:0;padding-block:1.5rem 1.625rem;border-bottom:1px solid var(--rule)}
.g-list__title{font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.25}
.g-list__title a{color:var(--ink);text-decoration:none}
.g-list__title a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em}
.g-list__sum{max-width:44rem;margin-top:.5rem;color:var(--muted)}
.g-list__meta{margin-top:.625rem;font:400 .8125rem/1.5 var(--mono);color:var(--muted)}

/* Hub: resource cards */
/* auto-fit: the cards share the full container width, with no empty tracks */
.g-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem;margin:0;padding:0;list-style:none}
.g-card{position:relative;display:grid;align-content:start;gap:.5rem;padding:1.25rem;border:1px solid var(--rule);border-radius:6px;background:var(--surface)}
.g-card:hover{border-color:var(--ink)}
.g-card:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.g-card .icon{width:1.75rem;height:1.75rem}
.g-card__title{font-size:1.125rem}
.g-card__title a{color:var(--ink);text-decoration:none}
.g-card__title a::after{content:"";position:absolute;inset:0}
.g-card__title a:focus-visible{outline:none}
.g-card p{font-size:.9375rem;color:var(--muted)}

/* Components placed inside the prose column: their own lists and items already win over the
   :where(.prose) element rules (prose.css); only the tape's unclassed headings, notes and spacing need help */
.guide__body .tape__notes li+li{margin-top:.375rem}
.guide__body .tape{margin-top:3rem}
.guide__body .tape__title{margin-top:0;scroll-margin-top:1rem}
.guide__body .tape :is(h2,h3,h4)+*{margin-top:0}
.guide__body .ladder{margin-top:1.75rem}