/* ============================================================
   Tresna bakunak — osagai partekatuak
   app.css-en gainean kargatzen da (Marrazketa Lantegiaren diseinua:
   paper beroa, tinta beltza, DM Serif Display + Lato, ertz zuzenak).
   ============================================================ */

.hidden{display:none !important}

/* ---------- orri arrunta ---------- */
.page{padding-block:34px 0}
.head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 30px; margin-bottom:24px}
.head h1{font-size:clamp(34px, 5vw, 48px); line-height:1.1}
.lede{font-size:18px; color:var(--ink2); margin:8px 0 0; max-width:38em}
.seg{flex-wrap:wrap}
.seg button.active{background:var(--ink); color:var(--sheet)}

/* ---------- pantaila osoko tresnak (3D) ----------
   Nabigazio-barraren azpian gainerako altuera guztia hartzen dute. */
body.fill{display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden}
body.fill > .app{flex:1 1 auto; min-height:0}
@media (max-width:860px){
  body.fill{height:auto; min-height:100vh; overflow:visible}
}

/* ---------- graduatzaileak ---------- */
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:24px; margin:0; background:transparent; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--ink3)}
input[type=range]::-moz-range-track{height:2px; background:var(--ink3)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; box-sizing:border-box; width:16px; height:16px; margin-top:-7px;
  background:var(--sheet); border:2px solid var(--ink); box-shadow:1px 1px 0 var(--ink);
}
input[type=range]::-moz-range-thumb{box-sizing:border-box; width:16px; height:16px; border-radius:0; background:var(--sheet); border:2px solid var(--ink); box-shadow:1px 1px 0 var(--ink)}
input[type=range]:active::-webkit-slider-thumb{background:var(--ink)}
input[type=range]:active::-moz-range-thumb{background:var(--ink)}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible{outline:2px solid var(--s1); outline-offset:2px}

/* ---------- irakurketak eta emaitzak ---------- */
.readout{
  display:block; padding:4px 10px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--chip); border:1px solid var(--rule); color:var(--ink);
}
.result{margin-top:20px; padding:16px 20px; background:var(--sheet); border:1px solid var(--ink); box-shadow:var(--edge)}
.result span{display:block; font-size:15px; color:var(--ink2)}
.result b{display:block; font-size:34px; line-height:1.25; font-variant-numeric:tabular-nums}

.panel{background:var(--sheet); border:1px solid var(--rule); padding:20px 22px}

.foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px;
  margin-top:44px; padding-block:22px 34px; border-top:1px solid var(--rule); font-size:15px; color:var(--ink3);
}
.foot p{margin:0}
.foot a{color:inherit}