/* Guides (/guides/*). Loaded after site.css; uses its tokens. Pages are generated by scripts/site/build-guides.py.
   Design rules: no pill labels, no colored side rails or stripes; state is shown with icons, color and type. */

/* Reading progress, under the nav */
.g-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.g-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #A64DFF, #4F7BFF 60%, #3F93FF); }

.g-navlinks { margin-left: auto; display: flex; gap: 4px 20px; }
.g-navlinks a { color: var(--fg-2); font-size: 14px; text-decoration: none; border-radius: 6px; }
.g-navlinks a:hover { color: var(--fg); }

.guide { max-width: 1120px; margin: 0 auto; padding: calc(var(--nav-h) + 40px) var(--gutter) 96px; }

/* Header: crumbs, label, title, lead, meta card */
.g-head { margin-bottom: 44px; }
.g-head h1 { max-width: 860px; }
.g-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 13px var(--mono); color: var(--fg-3); margin-bottom: 18px; }
.g-crumbs a { color: #8DB4FF; text-decoration: none; }
.g-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-crumbs [aria-current] { color: var(--fg-2); }
.g-label { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--mono); letter-spacing: .03em; color: var(--fg-2); margin-bottom: 12px; }
.g-label svg { width: 15px; height: 15px; fill: none; stroke: #8DB4FF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.guide h1 { font-family: var(--font); font-size: clamp(32px, 4.2vw, 46px); font-weight: 680; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 14px; text-wrap: balance; }
.g-lead { color: var(--fg-2); font-size: 18px; line-height: 1.55; max-width: 44em; margin-bottom: 26px; text-wrap: pretty; }

/* Meta: the Ledger mark's tiles count the guide's items by safety (taller = safer), then one mono line */
.g-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.g-meta .g-facts { flex: 1 1 320px; }
.g-tiles { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.g-tiles .tile { width: 16px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; transition: transform .35s var(--ease-out), opacity .25s, filter .2s; animation: tile-in .5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 60ms + 120ms); }
.g-tiles .t-ok { height: 26px; background: var(--ok); }
.g-tiles .t-warn { height: 18px; background: var(--warn); }
.g-tiles .t-danger { height: 12px; background: var(--danger); }
.g-tiles .tile:hover { transform: translateY(-3px); filter: brightness(1.15); }
.g-tiles .tile:focus-visible { outline: 2px solid #8DB4FF; outline-offset: 2px; }
.g-meta.focus .tile:not(.on) { opacity: .22; }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px) scale(.6); } }
.g-tcount { display: flex; gap: 12px; font: 12.5px var(--mono); }
.g-tcount a { text-decoration: none; border-radius: 4px; }
.g-tcount a.s-ok { color: #5FDB8C; } .g-tcount a.s-warn { color: #F8C062; } .g-tcount a.s-danger { color: #FF8A8C; }
.g-tcount a b { font-weight: 600; }
.g-tcount a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-msep { width: 1px; height: 28px; background: var(--line-strong); }
.g-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 13px var(--mono); color: var(--fg-3); }
.g-facts b { color: var(--fg); font-weight: 500; }
.s-ok { color: #5FDB8C; } .s-warn { color: #F8C062; } .s-danger { color: #FF8A8C; }

/* Two columns: article + sticky contents */
.g-layout { display: grid; grid-template-columns: minmax(0, 720px) 220px; justify-content: space-between; gap: 56px; align-items: start; }
.g-aside { position: sticky; top: calc(var(--nav-h) + 28px); max-height: calc(100vh - var(--nav-h) - 56px); overflow-y: auto; scrollbar-width: none; padding-bottom: 8px; }
.g-aside::-webkit-scrollbar { display: none; }
.g-aside-h { font: 12px var(--mono); color: var(--fg-3); margin-bottom: 12px; }
.g-toc { display: grid; gap: 2px; }
.g-toc a { position: relative; display: block; padding: 6px 0 6px 18px; color: var(--fg-3); font-size: 14px; line-height: 1.4; text-decoration: none; border-radius: 6px; transition: color .2s; }
.g-toc a::before { content: ""; position: absolute; left: 3px; top: 13px; width: 6px; height: 6px; border-radius: 2px; background: var(--fg-dim); opacity: .5; transform: scale(.7); transition: transform .3s var(--ease-out), background .3s, opacity .3s; }
.g-toc a:hover { color: var(--fg); }
.g-toc a.on { color: var(--fg); font-weight: 560; }
.g-toc a.on::before { background: #8DB4FF; opacity: 1; transform: scale(1) rotate(45deg); }
.g-toc a.done { color: var(--fg-2); }
.g-toc a.done::before { opacity: .9; background: var(--fg-3); }
.g-top { display: inline-block; margin-top: 16px; font: 12px var(--mono); color: var(--fg-3); text-decoration: none; }
.g-top:hover { color: var(--fg); }
.g-toc-mobile { display: none; }

/* The short answer: numbered rows, key phrase highlighted */
.g-short { padding: 20px 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(59, 123, 255, .09), rgba(59, 123, 255, .03)); box-shadow: 0 0 0 1px rgba(59, 123, 255, .26); margin-bottom: 28px; }
.g-short-h { font: 600 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #8DB4FF; margin-bottom: 14px; }
.g-short ol { display: grid; gap: 4px; }
.g-short li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; }
.g-short li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.g-n { font: 600 12px var(--mono); color: #8DB4FF; opacity: .8; }
.g-short p { color: var(--fg-2); font-size: 16.5px; line-height: 1.55; }
.g-short b { color: var(--fg); font-weight: 650; background: linear-gradient(transparent 58%, rgba(79, 123, 255, .38) 58%, rgba(79, 123, 255, .38) 92%, transparent 92%); padding: 0 2px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.g-short code { font-family: var(--mono); font-size: .85em; color: var(--fg); overflow-wrap: anywhere; }
.g-short b { overflow-wrap: anywhere; }

.g-hero { margin: 0 0 36px; }

/* Article body */
.g-body { counter-reset: sec; }
.g-body h2 { counter-increment: sec; display: flex; align-items: baseline; gap: 12px; font-family: var(--font); font-size: clamp(23px, 2.4vw, 28px); font-weight: 680; letter-spacing: -0.025em; line-height: 1.2; margin: 60px 0 14px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.g-body h2::before { content: counter(sec, decimal-leading-zero); font: 600 13px var(--mono); color: var(--fg-3); flex: none; transform: translateY(-2px); }
.g-body h2#questions::before { content: "?"; }
.g-body h3 { font-family: var(--font); font-size: 18.5px; font-weight: 620; letter-spacing: -0.01em; color: var(--fg); margin: 28px 0 10px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.g-body p, .g-body li { color: var(--fg-2); font-size: 17px; line-height: 1.65; }
.g-body p + p { margin-top: 12px; }
.g-body b, .g-body strong { color: var(--fg); font-weight: 600; }
.g-body a { color: #8DB4FF; text-underline-offset: 3px; }
.g-body ul, .g-body ol { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0; }
.g-body ul { list-style: disc; }
.g-body ul li::marker { color: var(--fg-3); }
.g-body ol { list-style: none; counter-reset: step; padding-left: 0; }
.g-body ol > li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; }
.g-body ol > li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 3px; border-radius: 7px; font: 600 12px var(--mono); color: var(--fg); background: var(--elevated); box-shadow: inset 0 0 0 1px var(--line-strong); }
.g-body code { font-family: var(--mono); font-size: .86em; color: var(--fg); background: rgba(255, 255, 255, .06); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.g-body kbd { font: 600 .82em var(--mono); color: var(--fg); padding: 1px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 0 var(--line-strong); }

/* Code blocks with a copy button (added by guides.js) */
.g-code { position: relative; margin: 12px 0 16px; }
.g-body pre { margin: 12px 0 16px; padding: 14px 16px; border-radius: 14px; background: #0A0A0C; box-shadow: 0 0 0 1px var(--line-strong); overflow-x: auto; }
.g-code pre { margin: 0; padding-right: 76px; }
.g-body pre code { background: none; padding: 0; font-size: 13px; line-height: 1.65; color: #D4D4DC; white-space: pre; overflow-wrap: normal; }
.g-copy { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; border-radius: 8px; border: 0; font: 600 12px var(--mono); color: var(--fg-2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: color .2s, background .2s; }
.g-copy:hover { color: var(--fg); background: rgba(255, 255, 255, .11); }
.g-copy:focus-visible { outline: 2px solid #8DB4FF; outline-offset: 2px; }
.g-copy.ok { color: #5FDB8C; }

/* Tables and the safety filter */
.g-body .table-wrap { overflow-x: auto; margin: 14px 0 20px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.g-body table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.g-body th, .g-body td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--fg-2); vertical-align: top; line-height: 1.5; }
.g-body thead th { color: var(--fg-3); font: 600 12px var(--mono); border-top: 0; background: rgba(255, 255, 255, .02); }
.g-body td:first-child { color: var(--fg); }
.g-body tbody tr { transition: background .2s, opacity .25s; }
.g-body tbody tr:hover { background: rgba(255, 255, 255, .025); }
.g-body tbody tr.dim { opacity: .28; }
.g-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 -4px; }
.g-filter button { height: 30px; padding: 0 12px; border-radius: 8px; border: 0; cursor: pointer; font: 600 12.5px var(--mono); color: var(--fg-2); background: var(--elevated); box-shadow: inset 0 0 0 1px var(--line); display: inline-flex; align-items: center; gap: 7px; transition: color .2s, box-shadow .2s, background .2s; }
.g-filter button::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--fg-3); }
.g-filter button[data-f="ok"]::before { background: var(--ok); }
.g-filter button[data-f="warn"]::before { background: var(--warn); }
.g-filter button[data-f="danger"]::before { background: var(--danger); }
.g-filter button:hover { color: var(--fg); }
.g-filter button[aria-pressed="true"] { color: var(--fg); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--line-strong); }
.g-filter button:focus-visible { outline: 2px solid #8DB4FF; outline-offset: 2px; }

/* Safety markers: icon plus colored word, never a pill */
.g-body .pill, .g-cards .pill { display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: none; font: 600 13px var(--mono); white-space: nowrap; }
.g-body .pill::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 10px; }
.g-body .pill.ok { color: #5FDB8C; }
.g-body .pill.ok::before { background-color: rgba(34, 197, 94, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 3' fill='none' stroke='%235FDB8C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.g-body .pill.warn { color: #F8C062; }
.g-body .pill.warn::before { background-color: rgba(245, 165, 36, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2.2v3.4M5 7.6v.1' fill='none' stroke='%23F8C062' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.g-body .pill.danger { color: #FF8A8C; }
.g-body .pill.danger::before { background-color: rgba(255, 101, 104, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 3l4 4M7 3 3 7' fill='none' stroke='%23FF8A8C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Callouts: tinted background and an icon, never a side stripe */
.callout { display: grid; grid-template-columns: 22px 1fr; gap: 12px; margin: 20px 0; padding: 14px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.callout::before { content: "i"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 12px var(--mono); background: var(--accent-soft); color: #8DB4FF; }
.callout p { margin: 0; font-size: 15.5px; }
.callout.warn { background: rgba(245, 165, 36, .07); box-shadow: 0 0 0 1px rgba(245, 165, 36, .22); }
.callout.warn::before { content: "!"; background: rgba(245, 165, 36, .18); color: #F8C062; }
.callout.ok { background: rgba(34, 197, 94, .06); box-shadow: 0 0 0 1px rgba(34, 197, 94, .2); }
.callout.ok::before { content: "\2713"; background: rgba(34, 197, 94, .16); color: #5FDB8C; }

/* The one product mention */
.g-cta { position: relative; overflow: hidden; margin: 48px 0 8px; padding: 22px 22px 22px 96px; border-radius: 18px; background: radial-gradient(circle at 46px 50%, rgba(134, 86, 255, .2), transparent 120px), var(--card); box-shadow: 0 0 0 1px var(--line-strong); display: grid; gap: 10px; }
.g-cta::before { content: ""; position: absolute; left: 24px; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); background: url("/assets/img/app-icon.svg") center / contain no-repeat; }
.g-cta h3 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.g-cta p { font-size: 15.5px; }
.g-cta .btn { justify-self: start; }

.g-faq { border-top: 1px solid var(--line); }
.g-faq:last-of-type { border-bottom: 1px solid var(--line); }
.g-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: 17px; font-weight: 600; color: var(--fg); display: flex; justify-content: space-between; gap: 16px; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; color: var(--fg-3); font: 400 20px/1 var(--mono); transition: transform .25s var(--ease-out); }
.g-faq[open] summary::after { transform: rotate(45deg); }
.g-faq > div { padding: 0 0 18px; }

/* Related and the index cards */
.g-related { margin-top: 64px; }
.g-related h2 { font-family: var(--font); font-size: 20px; font-weight: 650; margin-bottom: 14px; }
.g-related ul { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.g-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.g-related a, .g-cards a { height: 100%; display: grid; align-content: start; gap: 8px; padding: 18px 20px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .25s, transform .25s var(--ease-out), background .25s; }
.g-related a:hover, .g-cards a:hover { box-shadow: 0 0 0 1px var(--line-strong), 0 18px 40px -24px rgba(79, 123, 255, .5); background: var(--elevated); transform: translateY(-3px); }
.g-related .g-label, .g-cards .g-label { margin: 0; }
.g-related b, .g-cards b { color: var(--fg); font-size: 17px; font-weight: 620; letter-spacing: -0.01em; line-height: 1.3; }
.g-related a > span:not(.g-label), .g-cards a > span:not(.g-label) { color: var(--fg-2); font-size: 14.5px; line-height: 1.5; }
.g-related small, .g-cards small { font: 12px var(--mono); color: var(--fg-3); margin-top: 4px; }
.guide-index .g-head { margin-bottom: 32px; }

/* Widgets shared frame (each widget styles its inside) */
.gw { margin: 0; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: 20px; }
.gw-cap { margin-top: 14px; font: 12.5px/1.5 var(--mono); color: var(--fg-3); }

/* Entrance for figures and cards */
.js .g-rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .g-rise.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .g-layout { grid-template-columns: minmax(0, 1fr); }
  .g-aside { display: none; }
  .g-toc-mobile { display: block; margin-bottom: 28px; padding: 14px 18px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
  .g-toc-mobile summary { cursor: pointer; font: 600 13px var(--mono); color: var(--fg-2); }
  .g-toc-mobile ol { margin-top: 10px; display: grid; gap: 4px; list-style: decimal; padding-left: 20px; }
  .g-toc-mobile a { color: var(--fg-2); text-decoration: none; font-size: 15px; }
}
@media (max-width: 640px) {
  .g-cta { padding: 20px; }
  .g-cta::before { display: none; }
  .g-navlinks a:last-child { display: none; }
  .g-body p, .g-body li { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-tiles .tile { animation: none; transition: none; }
  .g-related a, .g-cards a, .g-toc a::before, .g-body tbody tr { transition: none; }
  .js .g-rise { opacity: 1; transform: none; transition: none; }
}

/* Skim mode: headline, key line, steps, commands and tables only (all text stays in the page) */
.g-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px; }
.g-tools .g-toc-mobile { flex: 1 1 260px; margin-bottom: 0; }
.g-skim { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: 12px; cursor: pointer; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--fg); font: 600 14px var(--font); transition: box-shadow .2s, background .2s; }
.g-skim small { font: 12px var(--mono); color: var(--fg-3); }
.g-skim:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.g-skim:focus-visible { outline: 2px solid #8DB4FF; outline-offset: 2px; }
.g-sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--fill); transition: background .25s; }
.g-sw i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--fg); transition: transform .25s var(--ease-out); }
.g-skim[aria-pressed="true"] { background: rgba(59, 123, 255, .1); box-shadow: 0 0 0 1px rgba(59, 123, 255, .35); }
.g-skim[aria-pressed="true"] .g-sw { background: var(--accent); }
.g-skim[aria-pressed="true"] .g-sw i { transform: translateX(12px); }
.skim .g-body > p:not(:has(b)) { display: none; }
.skim .g-body > ul:not(:has(b)) { display: none; }
.skim .g-body > ul > li:not(:has(b)) { display: none; }
.skim .g-body .g-related, .skim .g-related { display: none; }
.skim .g-body > h3 + p { display: block; }
.skim .g-body > h3 + p:not(:has(b)) { max-height: 3.3em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.skim .g-body > h2 + p { display: block; }
.skim .g-body .g-faq { display: none; }
.skim .g-body h2#questions { display: none; }
@media (max-width: 1000px) { .g-tools { margin-bottom: 28px; } }
@media (min-width: 1001px) { .g-tools { margin: -8px 0 24px; } }
@media (prefers-reduced-motion: reduce) { .g-sw, .g-sw i { transition: none; } }
.skim .g-body ol > li:not(:has(pre)), .skim .g-body ul > li:not(:has(pre)) { max-height: 3.3em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.skim .g-body .g-hero, .skim .g-hero { display: block; }
html:not(.js) .g-skim { display: none; }
/* Long paths in plain text must wrap on phones */
.g-short p, .g-lead, .g-body p, .g-body li, .g-faq, .g-facts { overflow-wrap: anywhere; }

@media (max-width: 640px) { .g-msep { display: none; } }