/* Wally Guides — shared design system for the flagship Learn guides.
   Loads after main.css on bespoke guide pages only. */

:root{
  --wg-burgundy:#6B214B;
  --wg-burgundy-deep:#421230;
  --wg-ink:#1d1118;
  --wg-paper:#FBF8F4;
  --wg-tint:#F4EAEF;
  --wg-gold:#D4AF37;
  --wg-sea:#BCD9E6;
  --wg-sea-deep:#2E6E8E;
  --wg-line:rgba(29,17,24,.14);
  --wg-maxw:1680px;
  --wg-gutter:clamp(24px,6.5vw,128px);
  --wg-railw:300px;
  --wg-railgap:64px;
  --wg-proseoff:calc(max(var(--wg-gutter), (100vw - var(--wg-maxw))/2 + var(--wg-gutter)) + var(--wg-railw) + var(--wg-railgap));
  --wg-serif:'Playfair Display',Georgia,serif;
  --wg-sans:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  --wg-mono:ui-monospace,'Cascadia Mono','Roboto Mono',monospace;
}

.wg-main{background:var(--wg-paper);color:var(--wg-ink);font-family:var(--wg-sans);overflow-x:clip}
.wg-main i,.wg-main em{font-style:normal;font-weight:600}
.wg-main ::selection{background:var(--wg-gold);color:var(--wg-ink)}
.wg-main :focus-visible{outline:3px solid var(--wg-gold);outline-offset:2px;border-radius:2px}

/* ── Reading progress ─────────────────────────────── */
.wg-progress{position:fixed;top:0;left:0;right:0;height:4px;background:transparent;z-index:1200;pointer-events:none}
.wg-progress b{display:block;height:100%;width:0;background:var(--wg-gold)}

/* ── Hero ─────────────────────────────────────────── */
.wg-hero{position:relative;background:var(--wg-burgundy-deep);color:#fff;padding:clamp(96px,14vh,168px) 0 0}
.wg-hero__inner{max-width:var(--wg-maxw);margin:0 auto;padding:0 var(--wg-gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,420px);gap:48px;align-items:end}
.wg-hero__eyebrow{font-family:var(--wg-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wg-gold);margin:0 0 22px}
.wg-hero__title{font-family:var(--wg-serif);font-weight:800;font-size:clamp(2.5rem,5.6vw,5.4rem);line-height:1.04;margin:0 0 26px;text-wrap:balance}
.wg-hero__sub{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.65;max-width:56ch;color:rgba(255,255,255,.88);margin:0 0 40px}
.wg-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:22px 0 56px;border-top:1px solid rgba(255,255,255,.22)}
.wg-hero__meta a{color:#fff;text-decoration:none;border-bottom:1px solid var(--wg-gold)}
.wg-hero__meta a:hover{color:var(--wg-gold)}
.wg-hero__avatar{width:52px;height:52px;border-radius:50%;background:var(--wg-sea);border:2px solid var(--wg-gold);overflow:hidden;flex:none}
.wg-hero__meta small{display:block;font-family:var(--wg-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.wg-hero__meta strong{font-weight:600;font-size:1rem}
.wg-hero__mascot{align-self:center;justify-self:center;width:min(100%,380px)}
.wg-hero__wave{display:block;width:100%;height:64px;margin-top:-2px}
@media (prefers-reduced-motion:no-preference){
  .wg-hero__mascot{animation:wgFloat 7s ease-in-out infinite}
  @keyframes wgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
}

/* ── Article frame: contents rail + measure ───────── */
.wg-wrap{max-width:var(--wg-maxw);margin:0 auto;padding:0 var(--wg-gutter)}
.wg-layout{display:grid;grid-template-columns:var(--wg-railw) minmax(0,1fr);gap:var(--wg-railgap);padding-top:64px}
.wg-rail{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 128px);overflow:auto;padding-bottom:24px}
.wg-rail__label{font-family:var(--wg-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wg-burgundy);margin:0 0 18px}
.wg-rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--wg-line)}
.wg-rail li a{display:flex;gap:12px;padding:9px 0 9px 18px;color:var(--wg-ink);text-decoration:none;font-size:.92rem;line-height:1.4;border-left:2px solid transparent;margin-left:-1.5px}
.wg-rail li a:hover{color:var(--wg-burgundy)}
.wg-rail li a.is-current{border-left-color:var(--wg-gold);color:var(--wg-burgundy);font-weight:600}
.wg-rail li a span{font-family:var(--wg-mono);font-size:.72rem;color:var(--wg-burgundy);opacity:.75;padding-top:2px}
.wg-toc-m{display:none}

/* ── Prose ────────────────────────────────────────── */
.wg-prose{max-width:74ch;font-size:1.13rem;line-height:1.78}
.wg-prose>*+*{margin-top:1.35em}
.wg-prose a{color:var(--wg-burgundy);text-decoration:none;border-bottom:1px solid var(--wg-gold)}
.wg-prose a:hover{background:var(--wg-tint)}
.wg-prose h2{font-family:var(--wg-serif);font-weight:800;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.12;margin-top:2.2em;scroll-margin-top:110px}
.wg-prose h3{font-family:var(--wg-serif);font-weight:700;font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.2;margin-top:1.9em;scroll-margin-top:110px}
.wg-prose h2 .wg-no{display:block;font-family:var(--wg-mono);font-weight:400;font-size:.8rem;letter-spacing:.22em;color:var(--wg-burgundy);margin-bottom:14px}
.wg-prose ul,.wg-prose ol{padding-left:1.2em}
.wg-prose li+li{margin-top:.55em}
.wg-prose strong{font-weight:700}
.wg-kicker{font-size:clamp(1.18rem,1.6vw,1.42rem);line-height:1.6;color:var(--wg-ink)}
.wg-prose sup a{border-bottom:none;font-family:var(--wg-mono);font-size:.72em;padding:0 2px}
.wg-hr{border:0;height:1px;background:var(--wg-line);margin:3.2em 0}

/* ── Full-bleed band (corrects for the gutter + left rail) ── */
.wg-bleed{width:100vw;margin-left:calc(-1*var(--wg-proseoff));position:relative}
.wg-main>.wg-bleed,.wg-main>div>.wg-bleed{width:100%;margin-left:0}
.wg-wrap .wg-bleed .wg-wrap{padding-left:var(--wg-gutter);padding-right:var(--wg-gutter)}
.wg-band{background:var(--wg-burgundy-deep);color:#fff;padding:clamp(56px,8vh,104px) 0;margin:3.5em 0}
.wg-band .wg-wrap{max-width:min(1240px,calc(100vw - 2*var(--wg-gutter)))}
.wg-band h2,.wg-band h3{color:#fff}
.wg-band--sea{background:#0E2C3C}
.wg-band--tint{background:var(--wg-tint);color:var(--wg-ink)}
.wg-band--tint h2,.wg-band--tint h3{color:var(--wg-ink)}

/* ── Figures: screenshots (recreated UI) ─────────── */
.wg-shot{margin:2.6em 0}
.wg-shot--wide{max-width:none}
.wg-frame{background:#fff;border:1px solid var(--wg-line);border-radius:14px;box-shadow:0 24px 60px -36px rgba(29,17,24,.45);overflow:hidden}
.wg-frame__bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#F2EDE7;border-bottom:1px solid var(--wg-line)}
.wg-frame__bar i{width:11px;height:11px;border-radius:50%;background:#D8CFC5;display:inline-block}
.wg-frame__url{margin-left:10px;font-family:var(--wg-mono);font-size:.74rem;color:#7d7268;background:#fff;border:1px solid var(--wg-line);border-radius:99px;padding:4px 14px}
.wg-frame svg{display:block;width:100%;height:auto}
.wg-phone{width:min(380px,100%);margin:0 auto;background:#101014;border-radius:44px;padding:12px;box-shadow:0 30px 70px -40px rgba(29,17,24,.55)}
.wg-phone__screen{background:#fff;border-radius:34px;overflow:hidden;position:relative}
.wg-phone__notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:112px;height:26px;border-radius:99px;background:#101014;z-index:2}
.wg-phone svg{display:block;width:100%;height:auto}
.wg-shot figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin-top:14px;font-size:.92rem;color:#5d5049;line-height:1.5}
.wg-shot figcaption .wg-recreated{font-family:var(--wg-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wg-sea-deep);flex:none}
.wg-shots-duo{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}

/* Annotation primitives used inside recreation SVGs */
.wg-svg-note{fill:var(--wg-burgundy)}
.wg-svg-note-ring{fill:none;stroke:var(--wg-gold);stroke-width:2.5}
.wg-svg-note-txt{fill:#fff;font-family:var(--wg-sans);font-weight:700}
.wg-svg-arrow{fill:none;stroke:var(--wg-burgundy);stroke-width:3;stroke-linecap:round}
.wg-svg-label{fill:var(--wg-burgundy);font-family:var(--wg-sans);font-weight:700}
.wg-svg-dim{fill:#867a72;font-family:var(--wg-sans)}
.wg-svg-hl{fill:none;stroke:var(--wg-burgundy);stroke-width:3;rx:8}

/* Numbered steps that pair with the annotations */
.wg-steps{list-style:none;counter-reset:wgstep;margin:1.6em 0 0;padding:0;max-width:74ch}
.wg-steps li{counter-increment:wgstep;position:relative;padding:14px 0 14px 56px;border-top:1px solid var(--wg-line)}
.wg-steps li:last-child{border-bottom:1px solid var(--wg-line)}
.wg-steps li::before{content:counter(wgstep);position:absolute;left:0;top:12px;width:34px;height:34px;border-radius:50%;background:var(--wg-burgundy);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.95rem;box-shadow:0 0 0 2.5px var(--wg-gold) inset}

/* ── Charts ───────────────────────────────────────── */
.wg-chart{margin:2.6em 0;padding:clamp(20px,3vw,40px);background:#fff;border:1px solid var(--wg-line);border-radius:14px}
.wg-chart svg{display:block;width:100%;height:auto}
.wg-chart figcaption{margin-top:12px;font-size:.92rem;color:#5d5049}
.wg-chart .wg-src{display:block;margin-top:4px;font-family:var(--wg-mono);font-size:.7rem;letter-spacing:.06em;color:#8a7e75}
.wg-svg-axis{stroke:rgba(29,17,24,.28);stroke-width:1.5}
.wg-svg-grid{stroke:rgba(29,17,24,.09);stroke-width:1}
.wg-svg-bar{fill:var(--wg-burgundy)}
.wg-svg-bar2{fill:var(--wg-gold)}
.wg-svg-bar3{fill:var(--wg-sea-deep)}
.wg-svg-lineA{fill:none;stroke:var(--wg-burgundy);stroke-width:3.5;stroke-linecap:round}
.wg-svg-lineB{fill:none;stroke:var(--wg-sea-deep);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:2 7}
.wg-svg-areaA{fill:rgba(107,33,75,.12)}
.wg-svg-tick{fill:#6b5f57;font-family:var(--wg-sans);font-size:13px}
.wg-svg-val{fill:var(--wg-ink);font-family:var(--wg-sans);font-weight:700;font-size:14px}

/* ── Wally's tip ─────────────────────────────────── */
.wg-tip{display:grid;grid-template-columns:64px 1fr;gap:20px;background:var(--wg-tint);border:1px solid rgba(107,33,75,.25);border-radius:14px;padding:26px 28px;margin:2.4em 0}
.wg-tip__face{width:64px;height:64px;border-radius:50%;background:var(--wg-sea);overflow:hidden;flex:none}
.wg-tip__label{font-family:var(--wg-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wg-burgundy);margin:0 0 8px}
.wg-tip p{margin:0;font-size:1.05rem;line-height:1.7}
.wg-tip--sea{background:#EAF3F7;border-color:rgba(46,110,142,.3)}
.wg-tip--sea .wg-tip__label{color:var(--wg-sea-deep)}

/* ── Deeper dive (expand in place) ────────────────── */
.wg-dive{border:1px solid var(--wg-line);border-radius:14px;background:#fff;margin:2.2em 0;overflow:hidden}
.wg-dive summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 24px;font-weight:700;font-size:1.05rem}
.wg-dive summary::-webkit-details-marker{display:none}
.wg-dive summary .wg-dive__x{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--wg-burgundy);color:var(--wg-burgundy);display:grid;place-items:center;font-size:1.15rem;line-height:1;transition:transform .25s}
.wg-dive[open] summary .wg-dive__x{transform:rotate(45deg);background:var(--wg-burgundy);color:#fff}
.wg-dive__eyebrow{font-family:var(--wg-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wg-sea-deep);flex:none}
.wg-dive__body{padding:0 24px 26px;font-size:1.02rem;line-height:1.72}
.wg-dive__body>*+*{margin-top:1em}

/* ── Checklist ────────────────────────────────────── */
.wg-check{list-style:none;margin:1.8em 0;padding:0;max-width:74ch}
.wg-check li{position:relative;padding:12px 0 12px 46px;border-top:1px solid var(--wg-line);line-height:1.6}
.wg-check li:last-child{border-bottom:1px solid var(--wg-line)}
.wg-check li::before{content:"";position:absolute;left:2px;top:16px;width:22px;height:22px;border-radius:6px;background:var(--wg-burgundy)}
.wg-check li::after{content:"";position:absolute;left:7px;top:20px;width:12px;height:7px;border-left:2.5px solid var(--wg-gold);border-bottom:2.5px solid var(--wg-gold);transform:rotate(-45deg)}

/* ── Tables ───────────────────────────────────────── */
.wg-tablewrap{margin:2.4em 0;overflow-x:auto;border:1px solid var(--wg-line);border-radius:14px;background:#fff}
.wg-table{width:100%;border-collapse:collapse;font-size:.98rem;min-width:640px}
.wg-table th{background:var(--wg-burgundy-deep);color:#fff;text-align:left;font-weight:600;padding:14px 18px;font-size:.9rem;letter-spacing:.02em}
.wg-table td{padding:13px 18px;border-top:1px solid var(--wg-line);vertical-align:top;line-height:1.55}
.wg-table tbody tr:nth-child(even){background:var(--wg-paper)}
.wg-table td:first-child{font-weight:600}
.wg-good{color:#1c6b46;font-weight:700}
.wg-bad{color:#9c2f2f;font-weight:700}

/* ── CTA band ─────────────────────────────────────── */
.wg-cta{background:var(--wg-burgundy);color:#fff;border-radius:18px;padding:clamp(32px,4.5vw,56px);margin:3.2em 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.wg-cta h3{font-family:var(--wg-serif);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);margin:0 0 10px;color:#fff}
.wg-cta p{margin:0;color:rgba(255,255,255,.88);line-height:1.65;max-width:52ch}
.wg-cta__actions{display:flex;flex-wrap:wrap;gap:14px}
.wg-btn{display:inline-block;padding:15px 30px;border-radius:99px;font-weight:700;font-size:1rem;text-decoration:none;border:1.5px solid transparent}
.wg-btn--gold{background:var(--wg-gold);color:var(--wg-ink)}
.wg-btn--gold:hover{background:#e3c14f}
.wg-btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.wg-btn--ghost:hover{border-color:var(--wg-gold);color:var(--wg-gold)}

/* ── FAQ ─────────────────────────────────────────── */
.wg-faq{margin:2.2em 0;border-top:1px solid var(--wg-line)}
.wg-faq details{border-bottom:1px solid var(--wg-line)}
.wg-faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;font-weight:700;font-size:1.08rem;position:relative}
.wg-faq summary::-webkit-details-marker{display:none}
.wg-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--wg-burgundy);transition:transform .25s}
.wg-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.wg-faq .wg-faq__a{padding:0 0 20px;line-height:1.72;max-width:70ch}

/* ── Related guides (editorial rows, not cards) ──── */
.wg-related{margin:2.4em 0;border-top:1px solid var(--wg-line)}
.wg-related a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:22px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--wg-line);text-decoration:none;color:var(--wg-ink)}
.wg-related a span:first-child{font-family:var(--wg-mono);color:var(--wg-burgundy);font-size:.85rem}
.wg-related a strong{font-family:var(--wg-serif);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.25}
.wg-related a em{font-family:var(--wg-mono);font-style:normal;font-weight:400;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#8a7e75}
.wg-related a:hover strong{color:var(--wg-burgundy)}

/* ── Sources ─────────────────────────────────────── */
.wg-sources{margin:3em 0 0;padding:26px 28px;background:var(--wg-tint);border-radius:14px}
.wg-sources h2{font-family:var(--wg-mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;color:var(--wg-burgundy)}
.wg-sources ol{margin:0;padding-left:1.3em;font-size:.92rem;line-height:1.7;color:#4c4038}
.wg-sources a{color:var(--wg-burgundy);text-decoration:none;border-bottom:1px solid rgba(107,33,75,.35);overflow-wrap:anywhere}

/* ── Author bio footer ────────────────────────────── */
.wg-author{display:grid;grid-template-columns:96px 1fr;gap:26px;align-items:center;margin:3.2em 0;padding:30px;border:1px solid var(--wg-line);border-radius:18px;background:#fff}
.wg-author__pic{width:96px;height:96px;border-radius:50%;background:var(--wg-sea);overflow:hidden;border:3px solid var(--wg-gold)}
.wg-author p{margin:6px 0 0;line-height:1.65;font-size:1rem}
.wg-author strong a{color:var(--wg-ink);text-decoration:none;border-bottom:2px solid var(--wg-gold)}

/* ── Reveal animation (motion-safe) ───────────────── */
@media (prefers-reduced-motion:no-preference){
  .wg-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .wg-reveal.is-in{opacity:1;transform:none}
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width:1080px){
  :root{--wg-railw:0px;--wg-railgap:0px}
  .wg-layout{display:block;padding-top:40px}
  .wg-rail{display:none}
  .wg-toc-m{display:block;margin:0 0 34px;border:1px solid var(--wg-line);border-radius:14px;background:#fff;overflow:hidden}
  .wg-toc-m summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:var(--wg-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wg-burgundy)}
  .wg-toc-m summary::-webkit-details-marker{display:none}
  .wg-toc-m ol{margin:0;padding:0 20px 16px;list-style:none}
  .wg-toc-m li a{display:block;padding:9px 0;color:var(--wg-ink);text-decoration:none;border-top:1px solid var(--wg-line)}
  .wg-hero__inner{grid-template-columns:1fr}
  .wg-hero__mascot{width:min(58%,280px);justify-self:start;order:-1;margin-bottom:8px}
  .wg-shots-duo{grid-template-columns:1fr}
  .wg-cta{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wg-prose{font-size:1.05rem}
  .wg-shot--wide .wg-frame{overflow-x:auto}
  .wg-shot--wide .wg-frame svg{min-width:640px}
  .wg-tip{grid-template-columns:48px 1fr;gap:14px;padding:20px}
  .wg-tip__face{width:48px;height:48px}
  .wg-author{grid-template-columns:72px 1fr;gap:16px;padding:22px}
  .wg-author__pic{width:72px;height:72px}
  .wg-phone{border-radius:36px;padding:9px}
  .wg-phone__screen{border-radius:28px}
  .wg-related a{grid-template-columns:44px minmax(0,1fr);row-gap:4px}
  .wg-related a em{grid-column:2}
}