/* Calculation Machine — UI refresh (clean & modern). Loaded on every page by the edge worker. */
:root{
  --radius:.875rem;
  --background:oklch(99.2% .003 255);
  --surface:oklch(97.4% .008 255);
  --muted:oklch(96.6% .008 255);
  --border:oklch(91.5% .012 258);
  --input:oklch(87% .018 258);
  --primary:oklch(52% .2 262);
  --ring:oklch(52% .2 262);
  --secondary:oklch(95.5% .02 262);
  --highlight:oklch(96.5% .03 262);
  --result:oklch(50% .14 155);
  --result-soft:oklch(97% .035 155);
  --ink:oklch(23% .045 265);
  --cmx-shadow:0 1px 2px oklch(25% .05 265/.05),0 8px 24px -12px oklch(25% .05 265/.18);
  --cmx-shadow-lg:0 2px 6px oklch(25% .05 265/.06),0 22px 48px -20px oklch(25% .08 265/.28);
}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
[aria-live]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--background);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:color-mix(in oklab,var(--primary) 22%,transparent)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* Header: glassy, sticky, cleaner nav */
body header.sticky,body>div>header:first-child{background:color-mix(in oklab,var(--background) 82%,transparent)!important;backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in oklab,var(--border) 70%,transparent)!important;transition:box-shadow .2s}
html.cmx-scrolled body header.sticky,html.cmx-scrolled body>div>header:first-child{box-shadow:0 6px 24px -14px oklch(25% .05 265/.35)}
header nav a{border-radius:999px!important;font-weight:550}
header nav a.bg-primary{box-shadow:0 6px 16px -8px color-mix(in oklab,var(--primary) 70%,transparent);padding-left:1rem!important;padding-right:1rem!important}
header img{border-radius:10px!important}
/* duplicated site header (404 page) */
body>div>header~header:not(article header),main~header{display:none!important}

/* Hero */
main>section.bg-surface:first-child{background:radial-gradient(1200px 420px at 50% -120px,color-mix(in oklab,var(--primary) 14%,transparent),transparent 70%),linear-gradient(var(--surface),var(--background))!important;border-bottom:0!important}
main>section:first-child h1{letter-spacing:-.035em!important;line-height:1.05!important}
@media (min-width:640px){main>section:first-child h1{font-size:3.4rem!important}}
main>section:first-child h1+p{font-size:1.125rem;max-width:40rem;margin-left:auto;margin-right:auto}

/* Headings */
h1,h2,h3{letter-spacing:-.02em}
article header h1{letter-spacing:-.035em!important}
main h2.text-2xl{font-size:1.65rem;letter-spacing:-.025em}

/* Cards */
.card-base{border-radius:1rem!important;border-color:color-mix(in oklab,var(--border) 85%,transparent)!important;box-shadow:var(--cmx-shadow)!important;background:var(--card)}
a.card-base{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
a.card-base:hover{transform:translateY(-2px);box-shadow:var(--cmx-shadow-lg)!important;border-color:color-mix(in oklab,var(--primary) 35%,var(--border))!important}
a.card-base h3,a.card-base .font-semibold,a.card-base .font-bold{color:var(--foreground)}
a.card-base:hover h3,a.card-base:hover .font-semibold{color:var(--primary)}

/* Form fields */
.field-base{min-height:3rem;border-radius:.75rem!important;font-size:1rem!important;padding:.75rem .9rem!important;background:var(--card);border-color:var(--input)!important;box-shadow:inset 0 1px 2px oklch(25% .05 265/.04)}
.field-base:hover{border-color:color-mix(in oklab,var(--primary) 40%,var(--input))!important}
.field-base:focus{border-color:var(--primary)!important;box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 16%,transparent)!important}
main input.field-base.pl-11{min-height:3.5rem;border-radius:999px!important;padding-left:3rem!important;box-shadow:var(--cmx-shadow-lg)!important;font-size:1.05rem!important}
select.field-base{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.4rem!important}
label.text-sm.font-semibold{font-size:.86rem;letter-spacing:.01em}

/* Calculator layout */
article .grid>.card-base.p-5{padding:1.5rem!important}
@media (min-width:640px){article .grid>.card-base.p-5{padding:1.75rem!important}}
[aria-live] .card-base{overflow:hidden;border:0!important;box-shadow:var(--cmx-shadow-lg)!important}
[aria-live] .bg-ink{background:linear-gradient(120deg,var(--ink),color-mix(in oklab,var(--ink) 75%,var(--primary)))!important;padding-top:.85rem!important;padding-bottom:.85rem!important}
[aria-live] .bg-result-soft{background:linear-gradient(180deg,var(--result-soft),color-mix(in oklab,var(--result-soft) 40%,var(--card)))!important;padding-top:1.1rem!important;padding-bottom:1.1rem!important}
[aria-live] .text-result{font-size:clamp(1.9rem,4vw,2.4rem)!important;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
[aria-live] dl>div{transition:background .15s}
[aria-live] dl>div:hover{background:color-mix(in oklab,var(--muted) 60%,transparent)}
[aria-live] dd{font-variant-numeric:tabular-nums}
.cmx-flash{animation:cmxFlash .5s ease}
@keyframes cmxFlash{from{background:color-mix(in oklab,var(--result) 18%,var(--result-soft))}}

/* Content sections */
section#answer,section.bg-highlight{border-radius:1rem!important;border:0!important;background:linear-gradient(135deg,var(--highlight),color-mix(in oklab,var(--highlight) 40%,var(--card)))!important;box-shadow:inset 4px 0 0 var(--primary)}
.prose-cm{font-size:1.02rem;line-height:1.75}
.prose-cm ol{margin-top:.75rem;padding-left:1.35rem;list-style:decimal outside}
.prose-cm ol li+li{margin-top:.4rem}
.prose-cm li::marker{color:var(--primary);font-weight:700}
.prose-cm strong{color:var(--foreground)}
details.card-base{box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
details.card-base[open]{box-shadow:var(--cmx-shadow)!important;border-color:color-mix(in oklab,var(--primary) 30%,var(--border))!important}
details summary{list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-weight:700;font-size:1.25rem;line-height:1;color:var(--primary);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}

/* Sidebar (on this page / related) */
aside nav a,aside a{transition:color .15s}
aside nav ul a{display:block;padding:.15rem 0 .15rem .75rem;border-left:2px solid var(--border)}
aside nav ul a:hover{border-left-color:var(--primary)}

/* Footer */
footer.bg-ink{background:linear-gradient(180deg,var(--ink),oklch(18% .04 265))!important}

/* Mobile result bar */
.cmx-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:16px;background:var(--ink);color:var(--ink-foreground);box-shadow:0 18px 40px -16px oklch(20% .05 265/.6);transform:translateY(140%);transition:transform .25s ease;font:inherit;border:0;text-align:left;cursor:pointer}
.cmx-bar.on{transform:none}
.cmx-bar small{display:block;font-size:.72rem;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.cmx-bar b{font-size:1.15rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cmx-bar span:last-child{font-size:.8rem;font-weight:600;opacity:.85;white-space:nowrap}
@media (min-width:1024px){.cmx-bar{display:none}}

/* Back to top */
.cmx-top{position:fixed;right:16px;bottom:16px;z-index:55;width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:var(--card);box-shadow:var(--cmx-shadow);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s;cursor:pointer;color:var(--foreground)}
.cmx-top.on{opacity:1;pointer-events:auto}
@media (max-width:1023px){.cmx-top{display:none}}

/* Breakdown bars */
.cmx-bars i{transition:width .4s ease}
@media (max-width:420px){.cmx-b{grid-template-columns:5.5rem 1fr auto!important}}
/* Print: just the calculator and results */
@media print{
  header.sticky,body>div>header:first-child,footer,aside,.cmx-bar,.cmx-top,#cm-share,#cm-copy,#cm-print,[data-shuffle],section#faq,section#how-to,nav[aria-label="Breadcrumb"]{display:none!important}
  body{background:#fff!important}
  .card-base{box-shadow:none!important;border:1px solid #ddd!important}
  article .grid{grid-template-columns:1fr 1fr!important}
  a{color:inherit!important;text-decoration:none!important}
}