/* music.hariai.app — the shared layer.

   Palette, type, reset, and the controls every page uses. App-specific rules
   stay inline in each page's <style>; this file is the one place a colour or a
   control changes.

   Dark only, deliberately: the melodica trainer is an instrument panel, and a
   light page in front of it reads as a seam. */

:root{
  --ink:#0E1F26;
  --slab:#16303A;
  --slab2:#1E4150;
  --edge:#2B5768;
  --ivory:#EFE7D6;
  --ash:#89A5AF;
  --reed:#F0A92B;
  --air:#56C7C0;
  --flag:#E4586F;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono","Roboto Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:0 0 64px;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}

/* ---------- micro label ---------- */
.lbl{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ash);
  display:block;
  margin:0 0 7px;
}

/* ---------- buttons ---------- */
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--slab);border:1px solid var(--edge);color:var(--ivory);
  padding:9px 15px;border-radius:2px;transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--slab2)}
.btn.primary{background:var(--reed);border-color:var(--reed);color:#20130A;font-weight:700}
.btn.primary:hover{background:#FFBE4A}
.btn.on{background:var(--air);border-color:var(--air);color:#06231F;font-weight:700}
.btn.sm{padding:6px 10px;font-size:11px;letter-spacing:.08em}
:focus-visible{outline:2px solid var(--air);outline-offset:2px}

/* ---------- panels ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin-top:26px}
.card{background:var(--slab);border:1px solid var(--slab2);border-radius:3px;padding:15px 16px 17px}
.card h2{
  margin:0 0 13px;font-family:var(--serif);font-size:17px;font-weight:400;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px
}
.card h2 span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.row:last-child{margin-bottom:0}
.hint{font-size:12.5px;color:var(--ash);line-height:1.45;margin:9px 0 0}
.hint b{color:var(--ivory);font-weight:600}

/* ---------- segmented control ---------- */
.seg{display:flex;flex-wrap:wrap;gap:5px}
.seg button{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  background:var(--ink);border:1px solid var(--edge);color:var(--ash);
  padding:7px 10px;border-radius:2px;flex:1 1 auto
}
.seg button:hover{color:var(--ivory)}
.seg button[aria-pressed="true"]{background:var(--ivory);border-color:var(--ivory);color:var(--ink);font-weight:700}

/* ---------- form controls ---------- */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;margin:0
}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--edge);border-radius:2px}
input[type=range]::-moz-range-track{height:3px;background:var(--edge);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--reed);
  border:none;margin-top:-6px
}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--reed);border:none}

input[type=number],select{
  font-family:var(--mono);font-size:13px;background:var(--ink);color:var(--ivory);
  border:1px solid var(--edge);border-radius:2px;padding:6px 7px;width:64px
}
select{width:auto;padding-right:22px}
select.inline{
  font-family:var(--mono);font-size:12px;background:none;border:none;
  border-bottom:1px dashed var(--edge);border-radius:0;color:var(--ivory);
  padding:0 2px;margin:0 1px
}
label.chk{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ivory);cursor:pointer}
input[type=checkbox]{accent-color:var(--air);width:15px;height:15px;margin:0}

/* ---------- footer ---------- */
footer{margin-top:34px;border-top:1px solid var(--slab2);padding-top:16px;color:var(--ash);font-size:12.5px;line-height:1.6}
footer b{color:var(--ivory);font-weight:600}
footer a{color:var(--air);text-decoration:none;border-bottom:1px solid rgba(86,199,192,.35)}
footer a:hover{border-bottom-color:var(--air)}
kbd{
  font-family:var(--mono);font-size:11px;background:var(--slab);border:1px solid var(--edge);
  border-bottom-width:2px;border-radius:3px;padding:1px 5px;color:var(--ivory)
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01s!important}
}