/* ===== UX v1: easier reading & navigation (shared by The Pantry Math and The Yarn Math) ===== */
:root{--ux-gap:clamp(88px,11vw,136px);--ux-ic:var(--soft,#eee);--ux-ink:var(--accent,#0f8a6c)}
html{scroll-padding-top:84px}
body{line-height:1.7;-webkit-text-size-adjust:100%}
p{max-width:68ch}
.ux-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sticky header (sub pages) ---------- */
header.top,.bar.ux-stick{position:sticky;top:0;z-index:30;background:var(--bg);backdrop-filter:saturate(1.4) blur(8px)}
.bar.ux-stick{background:var(--hero-bg)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
header.top{padding:12px 0}

/* ---------- menu button ---------- */
.ux-menu{display:inline-flex;align-items:center;gap:8px;font:800 .95rem var(--body,"Nunito Sans",system-ui,sans-serif);color:var(--accent-ink,#fff);background:var(--accent);border:0;border-radius:999px;padding:10px 18px;min-height:44px;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.ux-menu .ux-i{width:20px;height:20px}
@media (prefers-color-scheme:dark){header.top .ux-menu{color:#06261d}}

/* ---------- homepage jump bar (replaces the scrolling rail) ---------- */
nav.ux-jump{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);margin-top:36px}
nav.ux-jump .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;min-height:64px}
.ux-here{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font:var(--dw,800) 1.05rem/1.2 var(--display);color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ux-here .ux-b{width:38px;height:38px;border-radius:12px;background:var(--ux-ic);color:var(--ux-ink);display:grid;place-items:center;flex:none}
.ux-here .ux-b svg{width:24px;height:24px}
.ux-here small{display:block;font:700 .72rem/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ux-chips{display:none;gap:6px;flex:1;min-width:0}
.ux-chips a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:700;font-size:.92rem;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.ux-chips a svg{width:18px;height:18px;color:var(--accent)}
.ux-chips a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ux-chips a.on svg{color:inherit}
@media (min-width:1080px){.ux-chips{display:flex}.ux-here{display:none}}

/* ---------- drawer ---------- */
.ux-drawer{position:fixed;inset:0;z-index:100;display:none}
.ux-drawer.open{display:block}
.ux-drawer .ux-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.ux-drawer .ux-sheet{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg);color:var(--ink);overflow-y:auto;padding:18px 20px 40px;box-shadow:-20px 0 50px -20px rgba(0,0,0,.5);overscroll-behavior:contain}
@media (prefers-reduced-motion:no-preference){.ux-drawer.open .ux-sheet{animation:uxin .22s ease-out}@keyframes uxin{from{transform:translateX(40px);opacity:.4}}}
.ux-dh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ux-dh b{font:var(--dw,800) 1.4rem var(--display,"Baloo 2",system-ui)}
.ux-close{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ux-close svg{width:22px;height:22px}
.ux-g{margin-top:22px}
.ux-g h4{margin:0 0 8px;font:700 .75rem/1 var(--body,"Nunito Sans",system-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ux-g a{display:flex;align-items:center;gap:14px;padding:10px 12px;margin:0 -12px;border-radius:14px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.02rem;min-height:52px}
.ux-g a:hover,.ux-g a:focus-visible{background:var(--soft)}
.ux-g a .ux-b{width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--accent);display:grid;place-items:center;flex:none}
.ux-g a .ux-b svg{width:22px;height:22px}
.ux-g a span.d{display:block;font-weight:600;font-size:.86rem;color:var(--muted);line-height:1.3}
body.ux-lock{overflow:hidden}

/* ---------- back to top ---------- */
.ux-top{position:fixed;right:16px;bottom:18px;z-index:40;width:50px;height:50px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink,#fff);display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.55);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.ux-top.on{opacity:1;pointer-events:auto}
.ux-top svg{width:24px;height:24px}
@media (prefers-color-scheme:dark){.ux-top{color:#06261d}}

/* ---------- homepage: tool tiles breathe more ---------- */
.tiles{gap:14px!important}
.tile{padding:18px!important}

/* ---------- homepage: one tool = one clearly separated chapter ---------- */
main.wrap:has(> section.tool){display:block;padding-top:40px}
main.wrap > section{margin-bottom:var(--ux-gap)}
main.wrap > section.tool ~ section::before{content:"";display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);position:relative;top:calc(var(--ux-gap) * -.5);margin-bottom:-2px}
section.tool .th{gap:16px;margin-bottom:10px}
section.tool .th .ic{width:64px;height:64px;border-radius:20px;box-shadow:0 0 0 6px color-mix(in srgb,var(--soft) 45%,transparent)}
.ux-num{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--accent-ink,#fff);font-size:.72rem;letter-spacing:.06em;vertical-align:1px}
section.tool .lede{margin:12px 0 26px;font-size:1.08rem;line-height:1.7}
.panel{border-radius:24px}
.inputs{padding:clamp(20px,4vw,30px)!important;gap:20px!important}
.out{padding:clamp(20px,4vw,30px)!important}
.row{gap:14px!important}
label{gap:8px;font-size:.95rem}
input,select,textarea{min-height:50px;font-size:1.05rem}
textarea{min-height:200px}
input[type=range]{min-height:0}
.chips{gap:10px!important}
.chips button{min-height:42px;padding:8px 15px!important;font-size:.95rem!important}
.btn{min-height:46px}
.olist li{padding:11px 0!important}

/* ---------- FAQ: tidy accordions instead of a wall of text ---------- */
.ux-faqh{display:flex;align-items:center;gap:10px;margin:40px 0 12px;font:var(--dw,800) 1.15rem/1.2 var(--display,"Baloo 2",system-ui);color:var(--ink)}
.ux-faqh .ux-b{width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--accent);display:grid;place-items:center}
.ux-faqh .ux-b svg{width:20px;height:20px}
.faq{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:0!important}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0!important;font-size:1.02rem!important;line-height:1.35!important}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details > :not(summary){margin:0!important;padding:0 18px 16px!important;color:var(--muted);line-height:1.7}
@media (min-width:900px){.faq{grid-template-columns:1fr 1fr!important;align-items:start}}

/* ---------- "read the guide" links become clear buttons ---------- */
p.guide{display:flex;align-items:flex-start;gap:12px;margin-top:22px!important;padding:16px 18px;border-radius:16px;background:var(--soft);color:var(--ink)!important;max-width:none}
p.guide .ux-i{width:22px;height:22px;color:var(--accent);margin-top:2px}

/* ---------- content pages: headings with an icon, more air ---------- */
main h2.ux-h{display:flex;align-items:center;gap:12px;margin-top:clamp(48px,7vw,64px)!important;margin-bottom:12px!important}
main h2.ux-h .ux-b{width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--accent);display:grid;place-items:center;flex:none}
main h2.ux-h .ux-b svg{width:22px;height:22px}
main h1{margin-bottom:14px!important}
main .lead{margin-bottom:28px}
article p,main > p{margin-block:0 1.05em}
ol.steps li{padding-bottom:24px!important}
.tw{margin-block:8px 16px;border-radius:14px}
.cta{margin-top:40px!important;padding:20px 22px!important}
.crumbs{margin-bottom:18px!important}
.related,.cards{margin-top:28px}
footer{padding-block:40px 90px!important}
footer nav,footer .fnav{display:flex!important;flex-wrap:wrap;gap:12px 22px!important;margin-bottom:18px!important}
footer nav a,footer .fnav a{margin:0!important;padding:6px 0}

@media (max-width:640px){
  .wrap{padding-inline:18px}
  section.tool h2{font-size:1.75rem!important}
  .ux-menu{padding:10px 14px}
  .bar small{display:none}
}
.ux-chips{overflow-x:auto;scrollbar-width:none}
.ux-chips::-webkit-scrollbar{display:none}
.ux-chips a{font-size:.88rem;padding:7px 12px}
.ux-here > span:last-child{min-width:0;overflow:hidden}
.ux-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.tw table{min-width:560px}.tw{-webkit-overflow-scrolling:touch}}
main.wrap:has(> section.tool) > :not(section){margin-bottom:64px}