/* ============================================================
   EMoto Gearing Planner — site.css
   Palette: warm bone ground, graphite ink, burnt-orange accent,
   deep-pine secondary. Committed to this site only.

   Measured contrast ratios (WCAG 2.1, sRGB):
     ink   #1c1a17 on bone  #f4f1ea .... 15.4:1  (body text, AAA)
     ink   #1c1a17 on card  #ffffff .... 17.4:1  (body text, AAA)
     muted #5a5346 on bone  #f4f1ea ....  6.8:1  (secondary text, AA)
     rust  #8c3a12 on bone  #f4f1ea ....  6.8:1  (links/accent, AA)
     pine  #2f4f4a on bone  #f4f1ea ....  8.0:1  (headings, AAA)
     alarm #9a1b1b on bone  #f4f1ea ....  7.3:1  (error text, AA)
     caut  #6b4405 on bone  #f4f1ea ....  7.6:1  (warning text, AA)
     rule  #8a8172 on bone  #f4f1ea ....  3.4:1  (UI borders, AA non-text)
   ============================================================ */

:root{
  --bone:#f4f1ea; --card:#fff; --ink:#1c1a17; --muted:#5a5346;
  --rust:#8c3a12; --pine:#2f4f4a; --alarm:#9a1b1b; --caut:#6b4405;
  --rule:#8a8172; --hair:#ded7c9; --tintw:#fdf4e0; --tinte:#fbeceb;
  --stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--stack);
  font-size:1rem;line-height:1.6;overflow-x:hidden}
img,svg,table{max-width:100%}
h1,h2,h3{font-family:var(--stack);line-height:1.22;color:var(--pine);margin:1.8rem 0 .6rem}
h1{font-size:1.6rem;letter-spacing:-.015em}
h2{font-size:1.25rem;border-top:2px solid var(--pine);padding-top:.7rem}
h3{font-size:1.05rem;color:var(--ink)}
p,li{max-width:68ch}
a{color:var(--rust);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- shell ---------------------------------------------- */
.deck{background:var(--pine);color:var(--bone);padding:.55rem 1rem}
.deck__mark{display:inline-block;color:var(--bone);font-weight:700;letter-spacing:.01em;
  text-decoration:none;padding:.45rem 0;min-height:44px;line-height:1.9}
.deck__nav{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem}
.deck__nav a{color:#f0dcb4;display:inline-flex;align-items:center;min-height:44px;font-size:.94rem}
.deck__nav a[aria-current="page"]{color:var(--bone);text-decoration:none;border-bottom:3px solid #e8a33d}
.deck :focus-visible{outline-color:#e8a33d}

.trail{padding:.5rem 1rem 0;font-size:.85rem;color:var(--muted)}
.trail ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.trail li+li::before{content:"›";padding-right:.4rem;color:var(--rule);line-height:44px}
.trail a{display:inline-flex;align-items:center;min-height:44px}

.hold{padding:0 1rem 3rem;margin:0 auto;max-width:78rem}
.prose{max-width:44rem}

.base{background:var(--pine);color:var(--bone);padding:1.4rem 1rem 2rem;margin-top:2.5rem}
.base a{color:#f0dcb4}
.base ul{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.base li a{display:inline-flex;align-items:center;min-height:44px}
.base p{font-size:.85rem;color:#cfd8d3;max-width:60ch;margin:0}
.base :focus-visible{outline-color:#e8a33d}

/* ---- rig (input cards) ----------------------------------- */
.bench{display:block}
.rig{border:2px solid var(--rule);background:var(--card);border-radius:4px;
  padding:.9rem 1rem 1.1rem;margin:0 0 1.1rem;min-width:0}
.rig legend{font-weight:700;font-size:1.05rem;color:var(--pine);padding:0 .35rem}
.rig--b legend{color:var(--rust)}

.fld{margin:0 0 .95rem}
.fld label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.2rem}
.fld input[type=text],.fld select{width:100%;min-height:44px;padding:.5rem .6rem;
  font:inherit;font-size:1rem;color:var(--ink);background:var(--card);
  border:2px solid var(--rule);border-radius:3px}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--pine) 50%),linear-gradient(135deg,var(--pine) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.4rem}
.fld input[aria-invalid="true"]{border-color:var(--alarm);background:var(--tinte)}
.cite{display:block;font-size:.78rem;color:var(--muted);margin-top:.25rem}
.snag{display:block;font-size:.85rem;color:var(--alarm);font-weight:600;margin-top:.3rem}
.snag:empty{display:none}
.flag{display:block;font-size:.85rem;color:var(--caut);background:var(--tintw);
  border-left:4px solid var(--caut);padding:.4rem .55rem;margin-top:.3rem}
.flag:empty{display:none}
.unverified{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--card);background:var(--caut);
  padding:.1rem .4rem;border-radius:2px;margin-right:.35rem}

.units{border:2px solid var(--rule);padding:.6rem .8rem;margin:0 0 .95rem}
.units legend{font-weight:600;font-size:.92rem;padding:0 .3rem}
.units label{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  margin-right:1.2rem;font-weight:600}
.units input{width:20px;height:20px}

/* ---- tally (results) ------------------------------------- */
.tally{background:var(--card);border:2px solid var(--pine);border-radius:4px;padding:.9rem 1rem}
.tally h2{margin-top:0;border-top:0;padding-top:0}
.tally dl{margin:0}
.tally .row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.42rem 0;border-bottom:1px solid var(--hair)}
.tally dt{color:var(--muted);font-size:.9rem}
.tally dd{margin:0;font-family:var(--mono);font-size:1.02rem;font-weight:700;text-align:right}
.tally .big dd{font-size:1.45rem;color:var(--rust)}
.delta{margin-top:.9rem;padding:.7rem .8rem;background:var(--bone);border-left:4px solid var(--rust)}
.delta p{margin:.25rem 0;font-size:.93rem;max-width:none}
.verdict{background:var(--pine);color:var(--bone);padding:.75rem .85rem;margin:.9rem 0 0;
  font-size:1.02rem;font-weight:700;border-radius:3px}
.verdict--none{background:var(--tinte);color:var(--alarm)}
.standing{margin:.9rem 0 0;padding:.75rem .85rem;border:2px solid var(--caut);
  background:var(--tintw);color:var(--caut);font-weight:700;font-size:.95rem}
.stack-out{list-style:none;margin:.6rem 0 0;padding:0;font-family:var(--mono);font-size:.92rem}
.stack-out li{padding:.3rem 0;border-bottom:1px solid var(--hair);max-width:none}

/* ---- spool (calibration disclosure) ---------------------- */
.spool{margin:1.2rem 0 0;border:2px dashed var(--rule);background:var(--card)}
.spool__tab{display:block;width:100%;min-height:44px;text-align:left;font:inherit;
  font-weight:700;color:var(--pine);background:none;border:0;padding:.7rem .9rem;cursor:pointer}
.spool__tab::before{content:"+";display:inline-block;width:1.2em;font-family:var(--mono)}
.spool__tab[aria-expanded="true"]::before{content:"\2212"}
.spool__body{padding:0 .9rem 1rem}
.spool__body[hidden]{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.55rem 1rem;font:inherit;font-weight:700;color:var(--card);background:var(--rust);
  border:2px solid var(--rust);border-radius:3px;cursor:pointer}
.btn--quiet{color:var(--pine);background:transparent;border-color:var(--pine)}

/* ---- tables ---------------------------------------------- */
.chart-hold{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hair);background:
    linear-gradient(to right,var(--card) 30%,rgba(255,255,255,0)),
    linear-gradient(to left,var(--card) 30%,rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(28,26,23,.22),transparent),
    radial-gradient(farthest-side at 100% 50%,rgba(28,26,23,.22),transparent) 100% 0;
  background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
table{border-collapse:collapse;background:var(--card);font-size:.95rem;min-width:30rem}
caption{text-align:left;font-size:.88rem;color:var(--muted);padding:.5rem .6rem;max-width:68ch}
th,td{padding:.45rem .7rem;border:1px solid var(--hair);text-align:left;white-space:nowrap}
thead th{background:var(--pine);color:var(--bone);border-color:var(--pine)}
tbody th{background:var(--bone);font-family:var(--mono)}
td{font-family:var(--mono)}

/* ---- source lists ---------------------------------------- */
.sources{font-size:.88rem;color:var(--muted)}
.sources li{margin-bottom:.35rem;word-break:break-word}
.pull{border-left:4px solid var(--pine);padding:.5rem 0 .5rem .9rem;margin:1.1rem 0;
  font-style:italic;color:var(--ink)}
.pull cite{display:block;font-style:normal;font-size:.85rem;color:var(--muted);margin-top:.3rem}

/* ---- ad slots: fixed box from first paint, CLS 0 --------- */
.ad-slot{display:block;margin:1.6rem auto;overflow:hidden;max-width:100%}
.ad-slot--leaderboard{width:320px;height:100px}
.ad-slot--inline{width:300px;height:250px}
.ad-slot--footer{width:320px;height:100px}

.needs-js{display:none;border:2px solid var(--caut);background:var(--tintw);
  color:var(--caut);padding:.8rem .9rem;font-weight:600}

/* ---- 760px and up ---------------------------------------- */
@media (min-width:760px){
  body{font-size:1.02rem}
  h1{font-size:2.1rem}
  h2{font-size:1.5rem}
  .deck{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.55rem 2rem}
  .trail,.hold{padding-left:2rem;padding-right:2rem}
  .base{padding:1.6rem 2rem 2.2rem}
  .bench{display:grid;grid-template-columns:1fr 1fr minmax(17rem,20rem);gap:1.2rem;align-items:start}
  .rig{margin:0}
  .tally{position:sticky;top:1rem}
  table{min-width:0;width:100%}
  .chart-hold{overflow-x:visible;border:0;background:none}
  .ad-slot--leaderboard,.ad-slot--footer{width:728px;height:90px}
  .ad-slot--inline{width:336px;height:280px}
}

/* ---- below 760px: results dock to the viewport floor ----- */
@media (max-width:759.98px){
  .tally{position:sticky;bottom:0;max-height:30vh;overflow-y:auto;
    box-shadow:0 -6px 14px rgba(28,26,23,.16);margin-top:1.1rem}
  .tally--shut .tally__body{display:none}
  .tally--shut{max-height:none;overflow:visible}
  .tally__dismiss{float:right;min-height:44px;min-width:44px;font:inherit;font-weight:700;
    color:var(--pine);background:none;border:2px solid var(--pine);border-radius:3px;
    padding:.2rem .6rem;cursor:pointer}
}
@media (min-width:760px){.tally__dismiss{display:none}}