/*
 * Massiv — shared calculator page styles.
 *
 * Used by /one-rep-max-calculator/, /training-max-calculator/ and their Spanish
 * twins. Extracted from the inline CSS in /plate-calculator/index.html so new
 * tools don't duplicate ~300 lines each; the plate calculator keeps its own
 * inline copy (it ships plate-specific components and is already live).
 *
 * Follows the same external-stylesheet pattern as assets/programs.css and
 * blog/blog.css.
 */

@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Variable-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;}

:root{
  --paper:#fbfbf8; --ink:#17181a; --ink-soft:#f3f4f6; --muted:#63686f;
  --line:#d9dde3; --accent:#e0651a; --accent-strong:#b8500f; --accent-strong-hover:#c95c11; --accent-soft:#f08b4a;
  --green:#2b8b63; --gold:#d4a54c; --red:#c94b35; --card:#fbfbf8;
  --xs:0.82rem; --sm:0.95rem; --md:1.08rem; --lg:1.4rem; --xl:2.2rem;
  --content:760px; --wide:1180px; --gap:1.2rem;
  --section-y:72px; --section-y-sm:56px;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
html[data-theme="dark"]{
  --accent-strong:#e0651a; --accent-strong-hover:#f08b4a;
  --paper:#0e0f11; --ink:#f3f4f6; --ink-soft:#17181a; --muted:#9aa0a8;
  --line:#262830; --card:#17181a;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--md); line-height:1.6;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.006em;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;
}
.tnum{font-variant-numeric:tabular-nums;}
h1,h2,h3{font-weight:700; letter-spacing:-0.03em; line-height:1.04; margin:0;}
p{margin:0; text-wrap:pretty;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; height:auto;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

.wrap{max-width:var(--wide); margin:0 auto; padding:0 28px;}
.narrow{max-width:var(--content); margin:0 auto; padding:0 28px;}
.kicker{font-family:var(--mono); font-size:var(--xs); letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent-strong); margin:0 0 14px;}
section{padding:var(--section-y) 0;}
@media(max-width:760px){ section{padding:var(--section-y-sm) 0;} }

.btn{display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  font-weight:700; font-size:var(--sm); padding:14px 24px; border:1px solid transparent;
  cursor:pointer; font-family:var(--sans); transition:transform .12s ease, background-color .2s ease, opacity .2s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent-strong); color:#fff;}
.btn-primary:hover{background:var(--accent-strong-hover);}
.btn-secondary{background:var(--ink-soft); color:var(--ink); border-color:var(--line);}
.btn-secondary:hover{border-color:var(--muted);}

/* ---- header ---- */
header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);}
.bar{display:flex; align-items:center; justify-content:space-between; height:64px;}
.wordmark{display:inline-flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-0.02em; font-size:1.18rem; text-transform:uppercase;}
.wordmark img{width:40px; height:40px; border-radius:9px; display:block;}
nav.main{display:flex; gap:30px;}
nav.main a{font-size:var(--sm); color:var(--muted); font-weight:500;}
nav.main a:hover, nav.main a[aria-current]{color:var(--ink);}
.head-right{display:flex; align-items:center; gap:14px;}
.lang-link{font-size:var(--xs);font-weight:750;letter-spacing:.04em;color:var(--muted);padding:8px 4px;}
.lang-link:hover{color:var(--ink);}
.toggle{width:38px; height:38px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer;}
.toggle:hover{border-color:var(--muted);}
.toggle svg{width:18px; height:18px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;}
.toggle:hover svg{transform: scale(1.1) rotate(12deg);}
html[data-theme="light"] .ic-moon{display:none;}
html[data-theme="dark"] .ic-sun{display:none;}
.accent-index{height:4px; background:var(--accent);}
@media(max-width:860px){ nav.main{display:none;} }

/* ---- calculator layout ---- */
.calc-hero{padding-top:48px; padding-bottom:0;}
.calc-hero h1{font-size:clamp(2.4rem,5vw,3.8rem); letter-spacing:-0.04em; margin:12px 0 10px;}
.calc-hero .lead{font-size:1.08rem; color:var(--muted); max-width:620px; line-height:1.55;}

.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:40px; align-items:start;}
@media(max-width:860px){ .calc-grid{grid-template-columns:1fr; gap:28px;} }

.calc-input{border:1px solid var(--line); border-radius:18px; padding:28px; background:var(--card);}
.calc-input label{display:block; font-size:var(--xs); font-family:var(--mono); text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); font-weight:600; margin-bottom:8px;}

.unit-toggle{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin-bottom:24px;}
.unit-toggle button{padding:8px 18px; border:none; background:transparent; font-family:var(--sans); font-weight:700; font-size:var(--sm); cursor:pointer; color:var(--muted); transition:all .15s ease;}
.unit-toggle button.active{background:var(--accent); color:#fff;}
.unit-toggle button:active{transform:scale(0.92);}

.calc-field{position:relative; margin-bottom:20px;}
.calc-field input{width:100%; padding:16px 60px 16px 18px; border:1.5px solid var(--line); border-radius:12px; font-size:1.5rem; font-weight:800; font-family:var(--sans); color:var(--ink); background:var(--paper); letter-spacing:-0.02em; font-variant-numeric:tabular-nums;}
.calc-field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);}
.calc-field .suffix{position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:var(--sm); font-weight:700; color:var(--muted);}

.calc-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;}
.calc-chip{padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--paper); font-family:var(--mono); font-size:0.78rem; font-weight:700; cursor:pointer; color:var(--ink); transition:all .12s ease; white-space:nowrap;}
.calc-chip:hover{border-color:var(--accent); color:var(--accent);}
.calc-chip:active{transform:scale(0.95);}
.calc-chip.active{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--paper)); color:var(--accent-strong);}

.calc-select{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-family:var(--sans); font-size:var(--sm); font-weight:600; background:var(--paper); color:var(--ink); cursor:pointer; margin-bottom:24px;}

/* ---- result panel ---- */
.calc-result{border:1px solid var(--line); border-radius:18px; padding:28px; background:var(--card); position:sticky; top:88px;}

.calc-headline{background:var(--ink-soft); border-radius:14px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px;}
.calc-headline-label{font-family:var(--mono); font-size:var(--xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.calc-headline-num{display:flex; align-items:baseline; gap:6px;}
.calc-headline-num .val{font-size:2.2rem; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.calc-headline-num .unit{font-size:var(--sm); font-weight:700; color:var(--muted);}

.calc-pill{display:inline-flex; padding:5px 12px; border-radius:999px; font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; line-height:1; margin-bottom:20px;}
.calc-pill-success{background:color-mix(in srgb, var(--green) 12%, var(--card)); color:var(--green); border:1px solid color-mix(in srgb, var(--green) 35%, var(--line));}
.calc-pill-muted{background:var(--ink-soft); color:var(--muted); border:1px solid var(--line);}

.calc-row{display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--ink-soft); border-radius:10px; margin-bottom:8px;}
.calc-row-name{flex:1; font-weight:600; font-size:var(--sm);}
.calc-row-sub{display:block; font-size:var(--xs); color:var(--muted); font-weight:500; margin-top:2px;}
.calc-row-val{font-weight:800; font-size:1.08rem; color:var(--accent); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.calc-row-val small{display:block; font-size:var(--xs); font-weight:600; color:var(--muted);}

.calc-note{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:12px; margin-top:16px;
  background:var(--ink-soft); border:1px solid var(--line);}
.calc-note p{font-size:var(--xs); color:var(--muted); margin:0; line-height:1.5;}
.calc-note strong{color:var(--ink); font-weight:700;}

.calc-empty{text-align:center; padding:40px 20px; color:var(--muted); font-size:var(--sm);}

/* Wave / schedule table inside the result panel */
.calc-wave{width:100%; border-collapse:collapse; font-size:var(--sm); margin-bottom:8px;}
.calc-wave th,.calc-wave td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line);}
.calc-wave th{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.calc-wave td{font-variant-numeric:tabular-nums;}
.calc-wave td:last-child,.calc-wave th:last-child{text-align:right; font-weight:700;}
.calc-wave tr:last-child td{border-bottom:none;}
.calc-wave tr[data-deload] td{color:var(--muted);}

/* ---- CTA band ---- */
.cta-band{background:var(--ink); color:var(--paper); border-top:4px solid var(--accent);}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.cta-band .kicker{color:var(--accent-soft);}
.cta-band h2{font-size:clamp(2rem,4vw,3rem); line-height:1.04; letter-spacing:-.04em; margin:12px 0 16px;}
.cta-band p{color:color-mix(in srgb,var(--paper) 72%,transparent); max-width:520px; line-height:1.55;}
.cta-badges{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px;}
.cta-badges a{display:inline-flex; align-items:center;}
.cta-badges img{height:48px; width:auto;}
@media(max-width:820px){.cta-grid{grid-template-columns:1fr; gap:28px;}}

/* ---- SEO content ---- */
.seo-section{max-width:var(--content);}
.seo-section h2{font-size:1.5rem; letter-spacing:-0.02em; margin:40px 0 14px;}
.seo-section h3{font-size:1.12rem; letter-spacing:-0.02em; margin:26px 0 10px;}
.seo-section p{color:var(--muted); font-size:var(--sm); line-height:1.65; margin:0 0 18px; max-width:640px;}
.seo-section ul{color:var(--muted); font-size:var(--sm); line-height:1.65; max-width:640px; margin:0 0 18px; padding-left:20px;}
.seo-section li{margin-bottom:7px;}
.seo-section a{color:var(--accent-strong); font-weight:600; text-decoration:underline; text-underline-offset:2px;}

.ref-table{width:100%; border-collapse:collapse; margin:0 0 28px; font-size:var(--sm);}
.ref-table th,.ref-table td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);}
.ref-table th{font-family:var(--mono); font-size:var(--xs); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}
.ref-table td{font-variant-numeric:tabular-nums;}
.ref-table tr:last-child td{border-bottom:none;}

/* ---- related tools ---- */
.tool-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:8px;}
.tool-card{border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--card); transition:border-color .15s ease, transform .12s ease;}
.tool-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.tool-card h3{font-size:var(--md); margin-bottom:6px;}
.tool-card p{font-size:var(--xs); color:var(--muted); line-height:1.5;}

/* ---- FAQ ---- */
.faq{max-width:var(--content);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; font-weight:600; font-size:var(--md);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{flex:none; width:20px; height:20px; position:relative; color:var(--muted);}
.faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; background:currentColor; top:9px; left:2px; width:16px; height:2px; transition:transform .2s ease;}
.faq summary .pm::after{transform:rotate(90deg);}
.faq details[open] summary .pm::after{transform:rotate(0);}
.faq details[open] summary{color:var(--accent);}
.faq .ans{padding:0 0 24px; color:var(--muted); font-size:var(--sm); line-height:1.65; max-width:640px;}

/* ---- footer ---- */
footer.site{border-top:1px solid var(--line); padding:64px 0 48px;}
.foot-top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;}
@media(max-width:760px){ .foot-top{grid-template-columns:1fr 1fr;} }
.foot-top .desc{color:var(--muted); font-size:var(--sm); margin-top:12px; max-width:240px;}
.fcol h3{font-size:var(--xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-family:var(--mono); margin-bottom:14px; font-weight:600;}
.fcol a{display:block; font-size:var(--sm); color:var(--ink); margin-bottom:9px;}
.fcol a:hover{color:var(--accent-strong);}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:var(--xs); display:flex; gap:10px; flex-wrap:wrap;}

/* ---- reveal ---- */
.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .4s ease-out, transform .4s ease-out;}
.js .reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1; transform:none; transition:none;}
}

/* ---- mobile & tablet ---- */
@media(max-width:860px){
  .calc-grid{grid-template-columns:1fr; gap:28px;}
  .calc-result{position:relative; top:auto;}
}
@media(max-width:480px){
  .wrap,.narrow{padding-left:18px; padding-right:18px;}
  .bar{height:60px;}
  .wordmark{gap:7px; font-size:1.02rem;}
  .wordmark img{width:34px; height:34px; border-radius:8px;}
  .head-right{gap:8px; flex-shrink:0;}
  .toggle{width:34px; height:34px;}
  header.site .btn{padding:10px 14px; font-size:0.82rem; white-space:nowrap;}
  .calc-hero h1{font-size:2.2rem;}
  .calc-hero .lead{font-size:0.98rem;}
  .calc-input,.calc-result{padding:20px; border-radius:16px;}
  .calc-headline-num .val{font-size:1.9rem;}
  .calc-wave th,.calc-wave td{padding:8px 6px;}
  .foot-top{grid-template-columns:1fr; gap:28px;}
}
@media(max-width:360px){
  .wrap,.narrow{padding-left:14px; padding-right:14px;}
  .calc-hero h1{font-size:1.95rem;}
  .calc-chip{padding:6px 10px; font-size:0.7rem;}
  .calc-headline{padding:14px 16px;}
  .calc-headline-num .val{font-size:1.7rem;}
  .calc-wave{font-size:0.82rem;}
}