/* All styles for the page. Layout ported from the v1.0 prototype; colours and type follow brand/BRANDBOOK.md. */

:root{
  color-scheme:light;
  /* Brand palette (brand book §2). On cream, only ink and deep red are text colours. */
  --brand-ink:#2A1210; --brand-cream:#F6F0DA; --brand-deep-red:#9E2A18; --brand-vermilion:#DD5A22;
  --brand-orange:#EE9440; --brand-amber:#F2C263; --brand-teal:#3D8A64; --brand-light-teal:#49A67C;
  /* UI roles. Surfaces and lines are ink mixed into cream; muted text keeps 5.4:1 on cream. */
  --bg:var(--brand-cream); --surface:#FAF8EC; --surface-2:#EDE6CF; --ink:var(--brand-ink); --muted:#6F5D55;
  --line:#D0CAC0; --line-strong:#BCB3AA;
  --accent:var(--brand-deep-red); --accent-ink:var(--brand-cream);
  --hot:var(--brand-vermilion);      /* playhead */
  --live:var(--brand-teal);          /* playing, lane on */
  --click:var(--brand-teal);         /* metronome row */
  --stroke:var(--brand-ink);         /* pattern row */
  --display:"Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Montserrat", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:var(--brand-ink); --surface:#361F1C; --surface-2:#402A26; --ink:var(--brand-cream); --muted:#B5A999;
    --line:#59453E; --line-strong:#68554D;
    --accent:var(--brand-orange); --accent-ink:var(--brand-ink);
    --live:var(--brand-light-teal); --click:var(--brand-light-teal); --stroke:var(--brand-cream);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Side gutter of 16px, widened where the iPhone notch or home bar needs it (viewport-fit=cover) */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;
  padding:env(safe-area-inset-top,0px) max(16px, env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.wrap{max-width:1180px;margin:0 auto}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-block:12px 16px}
.brand{display:flex;align-items:center;gap:20px}
/* The logo file is 1045 units wide around a 933-unit mark, so a 180px image draws the mark at 161px
   (brand book: 160px for full detail). Its built-in margin plus the gap covers the 7% clear space. */
/* Dark mode shows the white knockout straight on the ink-brown ground (brand book §6); see the <picture> in index.html. */
.brand picture{flex:none}
.logo{display:block;width:180px;height:180px}
h1{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(26px,3.2vw,36px);line-height:1.1;letter-spacing:-.01em}
h1 span{display:block}
.keys{font-size:12.5px;color:var(--muted);display:flex;gap:6px 14px;flex-wrap:wrap}
kbd{font-family:var(--body);font-size:12px;font-weight:500;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--surface);color:var(--ink)}
.grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:880px){.grid{grid-template-columns:1fr}}
.stack{display:grid;gap:16px}
@media (min-width:881px){.grid .transport{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}}
.transport{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;overflow:hidden;display:grid;gap:18px}
.tempo-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.nudge{width:54px;height:54px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);font-size:26px;cursor:pointer;line-height:1}
.nudge:hover{border-color:var(--accent)}
.bpm-wrap{text-align:center}
#bpmOut{font-family:var(--display);font-weight:600;font-size:clamp(76px,19vw,132px);line-height:.95;font-variant-numeric:tabular-nums;display:block;letter-spacing:-.02em}
.bpm-meta{display:flex;justify-content:center;gap:10px;align-items:baseline;margin-top:4px}
.unit{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
#marking{color:var(--muted);font-size:16px}
input[type=range]{width:100%;accent-color:var(--accent);height:22px;margin:0}
.ctrls{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:10px}
.btn{font:600 16px var(--body);border-radius:10px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);padding:12px 14px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-size:18px;letter-spacing:.02em}
.btn.primary.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn:focus-visible,.chip:focus-visible,.cell:focus-visible,.nudge:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#tap.hit{background:var(--brand-amber);border-color:var(--brand-orange);color:var(--brand-ink)}
.hint{font-size:14px;color:var(--muted)}
p.hint{margin:0}
.status{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.status b{color:var(--ink);font-weight:600}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong)}
.pill.live{color:var(--ink);border-color:var(--live);background:color-mix(in srgb,var(--live) 16%,transparent)}
.pill.silent{color:var(--brand-ink);border-color:var(--brand-amber);background:var(--brand-amber)}
.patview{border-top:1px dashed var(--line-strong);padding-top:16px;display:grid;gap:8px}
.patview h3{margin:0;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.patview h3 span{font-weight:400;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
#patName{font-family:var(--display);color:var(--ink);font-size:15px;font-weight:600}
.cells{display:grid;gap:6px}
.cell{height:34px;border-radius:6px;border:1px solid var(--line-strong);background:transparent;cursor:pointer;padding:0;position:relative}
.cell.hit{background:var(--stroke);border-color:var(--stroke)}
.cell.gs::before,.cell.half::before{content:"";position:absolute;left:-4.5px;top:2px;bottom:2px;width:1px;background:var(--line-strong)}
.cell.half::before{width:2px;left:-5px;top:-3px;bottom:-3px;background:var(--muted)}
.cell.now{outline:2px solid var(--hot);outline-offset:1px}
.meter-sum{display:flex;align-items:center;gap:14px}
.sig{font-family:var(--display);font-weight:600;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
#sigNote{font-weight:600}
#freeMeter{display:grid;gap:14px}
#freeMeter[hidden]{display:none!important}
.cell.hit.now{background:var(--hot);border-color:var(--hot)}
.lane{display:grid;gap:6px}
.lane-head{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap}
.lane-tools{display:flex;flex-wrap:wrap;gap:2px}
.mute{font:600 13.5px var(--body);border:1px solid var(--line-strong);background:transparent;color:var(--muted);border-radius:99px;padding:4px 12px 4px 10px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.mute::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.mute.on{color:var(--ink);border-color:var(--ink)}
.mute.on::before{background:var(--live)}
.mini{font:600 13px var(--body);border:0;background:transparent;color:var(--accent);cursor:pointer;padding:3px 6px;border-radius:6px}
.mini:hover{background:var(--surface-2)}
.lane.off .cells{opacity:.35}
.lane.silent .cells{opacity:.2}
.lane.silent .mute{border-style:dashed}
#metCells .cell{height:28px}
.cell.m1{background:color-mix(in srgb,var(--click) 24%,transparent);border-color:var(--click)}
.cell.m2{background:var(--click);border-color:var(--click)}
.cell.m2.now,.cell.m1.now{outline-color:var(--hot)}
.key{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--line-strong);vertical-align:-1px;margin-left:4px}
.key.k1{background:color-mix(in srgb,var(--click) 24%,transparent);border-color:var(--click)}
.key.k2{background:var(--click);border-color:var(--click);margin-left:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:14px}
.panel h2{margin:0;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.sentence{display:block;line-height:2.6}
.lbl{font-size:14px;color:var(--muted);min-width:100px}
.chip{font:500 14px var(--body);border:1px solid var(--line-strong);background:transparent;color:var(--ink);border-radius:99px;padding:6px 12px;cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.slider{display:grid;grid-template-columns:88px 1fr 48px;gap:10px;align-items:center}
.slider span:first-child{font-size:14px;color:var(--muted)}
.slider output{font-size:13px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
/* 16px keeps iPhone Safari from zooming in when a field gets focus */
select,input[type=text],input[type=number]{font:500 16px var(--body);color:var(--ink);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px}
input[type=number]{width:76px;font-variant-numeric:tabular-nums}
#bpmNum{width:100%}
.sw{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.sw input{accent-color:var(--accent);width:16px;height:16px}
.sub{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px}
.sub .row{font-size:15px}
.presets{display:grid;gap:6px}
.preset{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.preset .meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.preset button{font:600 14px var(--body);border:0;background:transparent;color:var(--accent);cursor:pointer;padding:4px 6px}
#presetName{flex:1;min-width:0}
#savePreset{padding:8px 14px}
.empty{font-size:14px;color:var(--muted)}
/* Copyright line, in the owner's full formal wording (same as the README). */
.foot{margin-top:32px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
/* Touch screens: every control is at least 40px tall, and each grid cell's tap area takes in the gap
   around it (34px cell + 6px gap = 40px). The metronome row's 28px cells reach 6px up and down,
   so its wrapped rows sit 12px apart to keep those tap areas from overlapping.
   The insets count from inside the cell's 1px border, hence one extra pixel. */
@media (pointer: coarse){
  .cell::after{content:"";position:absolute;inset:-4px}
  #metCells .cell::after{inset:-7px -4px}
  #metCells{row-gap:12px}
  .mute,.mini,.chip,.sw,.btn,select,input[type=text],input[type=number],.preset button{min-height:40px}
  .mini{padding-inline:8px}
  .preset button{min-width:40px}
  input[type=range]{height:40px}
  .keys{display:none}   /* the keyboard shortcuts legend: phones and tablets have no keyboard to use it with */
}
/* 144px draws the mark at 129px: the brand book's "acceptable" screen size.
   Narrower side padding in the panels gives the grid room for two rows of eight 40px cells, down to 375px screens. */
@media (max-width:480px){.logo{width:144px;height:144px}.brand{gap:16px}h1{font-size:clamp(20px,6.2vw,24px)}
  .transport,.panel{padding-inline:12px}
  .ctrls{grid-template-columns:1fr 1fr}.ctrls .primary{grid-column:1/-1;order:-1}.slider{grid-template-columns:70px 1fr 42px}.lbl{min-width:0;width:100%}
  .sw:has(.hint){flex-wrap:wrap;row-gap:0}.sw .hint{flex-basis:100%;padding-left:24px}}