/* tubasync / tapper - same paper, ink and courier as the tool, with a data panel and two colors that mean L and R */
:root{
  --ink:#111; --paper:#fff; --line:#222; --muted:#666; --faint:#e9e9e6;
  --fog:#7da7c3;          /* tubasync slider blue */
  --L:#2a78ad;            /* left ear, left hand */
  --R:#c0562a;            /* right ear, right hand */
  --env:#cfdde7;          /* beat envelope fill */
  --pad:18px; --navw:180px;
  --font:"Courier New", Courier, monospace;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.35; }
a{ color:var(--ink); }

.shell{ display:flex; min-height:100vh; }
nav{ width:var(--navw); border-right:1px solid var(--line); padding:var(--pad); flex:none; }
nav .brand{ font-weight:700; margin-bottom:18px; }
nav a{ display:block; text-decoration:none; padding:6px 0; min-height:44px; width:max-content; }
nav a:hover, nav a.active{ text-decoration:underline; }
main{ flex:1; padding:var(--pad); min-width:0; }
.wrap{ max-width:1400px; margin:0 auto; }

h1{ font-size:18px; margin:0 0 6px; }
h2{ font-size:16px; margin:26px 0 8px; }
.subtitle{ margin:0 0 16px; white-space:pre-line; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

.box{ border:1px solid var(--line); padding:12px; margin:14px 0; }
.box-title{ font-weight:700; margin:0 0 10px; display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap; }
.box-title .tag{ font-weight:400; font-size:12px; color:var(--muted); }

/* two columns on wide screens: controls | data */
.grid{ display:grid; grid-template-columns:minmax(300px, 420px) minmax(0,1fr); gap:0 18px; align-items:start; }
.grid > .col{ min-width:0; }

table{ border-collapse:collapse; width:100%; font-size:13px; }
th,td{ border:1px solid var(--line); padding:5px 8px; vertical-align:top; text-align:left; }
td.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

.controls{ display:flex; flex-direction:column; gap:10px; }
.control{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; }
.control label{ white-space:nowrap; }
.control .val{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.control input[type=range]{ grid-column:1 / -1; }
input[type=range]{ width:100%; accent-color:var(--fog); height:34px; margin:0; cursor:pointer; touch-action:none; }
input[type=range]:focus-visible{ outline:1px dotted var(--ink); outline-offset:2px; }

.btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
button, select{ font-family:var(--font); font-size:15px; border:1px solid var(--line); background:#fff; color:var(--ink); padding:10px 12px; min-height:44px; cursor:pointer; }
button:disabled{ opacity:.45; cursor:not-allowed; }
button.on{ background:var(--ink); color:var(--paper); }
.seg{ display:flex; flex-wrap:wrap; }
.seg button{ margin-right:-1px; }
.seg button.on{ position:relative; z-index:1; }

/* the hands: two lamps that light on every tap */
.hands{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin:4px 0 2px; }
.lamp{ height:86px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:var(--muted); transition:background .14s ease-out, color .14s ease-out; }
.lamp.L.hit{ background:var(--L); color:#fff; transition:none; }
.lamp.R.hit{ background:var(--R); color:#fff; transition:none; }
.hands .mid{ text-align:center; font-size:12px; color:var(--muted); line-height:1.5; min-width:84px; }
.hands .mid b{ display:block; font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums; }

.presets{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.presets button{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:8px 10px; }
.presets button span{ font-size:12px; color:var(--muted); }
.presets button.on span{ color:#ddd; }
.dev-status{ font-size:13px; }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; border:1px solid var(--line); margin-right:6px; vertical-align:0; }
.dot.live{ background:#2e8b57; border-color:#2e8b57; }
.dot.sim{ background:var(--faint); }

/* data panel */
.panel canvas{ display:block; width:100%; border:1px solid var(--line); background:#fff; }
.panel .cap{ font-size:12px; color:var(--muted); margin:4px 0 12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.panel .row2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 14px; }
.legend span{ margin-right:12px; white-space:nowrap; }
.sw{ display:inline-block; width:14px; height:3px; vertical-align:middle; margin-right:5px; }

.note{ font-size:12px; color:var(--muted); margin-top:8px; }
.warn{ border:1px dashed var(--line); padding:8px 10px; font-size:13px; margin-top:10px; }

/* info page */
.info section{ max-width:860px; }
.info code, .info .eq{ font-family:var(--font); }
.info .eq{ display:block; border-left:3px solid var(--fog); padding:4px 10px; margin:8px 0; background:#f7f9fb; white-space:pre-wrap; font-size:14px; }
.info p{ max-width:860px; }
.info th{ width:200px; }

@media (max-width:1000px){ .grid{ grid-template-columns:1fr; } }
@media (max-width:720px){
  .shell{ flex-direction:column; }
  nav{ width:100%; border-right:none; border-bottom:1px solid var(--line); padding:10px 12px; position:sticky; top:0; background:var(--paper); z-index:50; }
  nav .brand{ margin-bottom:6px; }
  .navlinks{ display:flex; flex-wrap:wrap; gap:4px 14px; }
  nav a{ display:inline-flex; align-items:center; }
  main{ padding:12px; }
  .panel .row2{ grid-template-columns:1fr; }
  .lamp{ height:70px; }
}