/* NOTE tokens — "Light, not chrome" (art direction v2).
   The product is light moving through water and glass, so the interface is made
   of that light: one point of the scene's colour marks what is chosen, on a solid
   dark casing. One typeface, five sizes, three weights, no tracked caps.
   The single source of truth: colour, type, space, motion and layout. Linked in <head>
   right after release.css; nothing else defines a token. */
:root {
  /* Colour: ink, paper, one light */
  --note-casing: #0d0d0c;          /* the instrument body */
  --note-text: #f2efe8;            /* 100% */
  --note-text-muted: #bdbab3;      /* labels and secondary text */
  --note-text-faint: #a19e98;      /* unselected options; >= 4.5:1 on the glass over a light scene */
  --note-text-disabled: #5e5c58;   /* disabled only */
  --note-rule: #f2efe81f;          /* hairline between sections */
  --note-track: #f2efe840;         /* slider track */
  --note-danger: #ff6b5e;
  --scene-accent: #7fd3c4;         /* set per scene at runtime; a point of light only */
  --scene-accent-ink: #0d0d0c;
  --note-glow: 0 0 10px 1px var(--scene-accent); /* the selection light */
  --note-legibility: 0 0 12px #0008; /* type set straight on the scene */

  /* Material: panels, popovers and the tray are the instrument casing itself — solid, the frame's
     colour (owner, 2026-09-27: no translucency, no blur, no shadow). Their only edge is this hairline. */
  --note-edge: rgb(255 255 255 / .08);
  --note-radius-panel: var(--note-radius-frame); /* panels share the frame's corner */
  --note-radius-poster: 6px;
  --note-radius-focus: 2px;
  --note-radius-frame: 28px;       /* the display glass */

  /* Type: one family, three weights, five sizes, sentence case */
  --note-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --note-numeric: tabular-nums lining-nums;
  --note-weight-light: 300;
  --note-weight-text: 400;
  --note-weight-label: 500;        /* the selected word */
  --note-text-xs: 12px;  /* labels: sentence case, muted */
  --note-text-sm: 14px;  /* controls and text in panels */
  --note-text-md: 18px;  /* item titles */
  --note-text-lg: 28px;  /* panel titles, 300 */
  --note-text-xl: 44px;  /* display numerals, 300 */
  --note-leading: 1.35;
  --note-leading-display: 1.05;

  /* Grid: 8px base, tight rows */
  --note-pad: 24px;                /* panel padding; 20px on phones */
  --note-label-gap: 4px;           /* a label sits this close to what it labels */
  --note-row-gap: 12px;
  --note-dot: 6px;
  --note-target: 44px;

  /* Motion */
  --note-ease: cubic-bezier(.22, .75, .22, 1);
  --note-dur: 240ms;               /* panels fade and rise */
  --note-dur-fade: 200ms;          /* a selection dot fades in */
  --note-dur-glide: 280ms;         /* a selection dot glides */
  --note-dur-drawer: 320ms;        /* the tray slides */
  --note-dur-frame: 400ms;
  --note-rise: 8px;
}

@media (max-width: 600px) {
  :root { --note-pad: 20px; }
}

/* Layout: the keyboard band, the frame's opening, the rail, the Tracks band and the tray. The frame
   values exist only in the instrument interface (body.instrument-frame); safe areas are 0 on desktop.
   Bottom to top: the keys (--key-space), the Tracks band while open (--tracks-space), the rail
   (--rail-h); the scene's opening ends at --visual-bottom, the sum. Hide keys, the tray and Tracks
   each change one term, so everything bound to them moves together over --note-dur-frame. */
:root {
  --kb-h: clamp(96px, 14vh, 140px);
  --tracks-h: clamp(276px, 36vh, 340px); /* the Tracks band: a ruler and two piano-roll lanes tall enough to letter their notes */
  --display-h: 52px;                     /* the Display in the rail; its height sets the dot pitch */
}
body.instrument-frame {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --frame-edge: 14px;
  --frame-t: calc(var(--frame-edge) + var(--safe-t));
  --frame-r: max(var(--frame-edge), var(--safe-r));
  --frame-l: max(var(--frame-edge), var(--safe-l));
  --rail-h: 64px;                                         /* one line of words around the Display */
  --key-space: calc(var(--kb-h) + var(--safe-b));        /* the keyboard band, or the tray while it is open */
  --tracks-space: 0px;                                    /* the Tracks band's share: --tracks-h while open */
  --visual-bottom: calc(var(--key-space) + var(--tracks-space) + var(--rail-h)); /* where the scene's opening ends */
}
body.instrument-frame.kb-min { --key-space: var(--safe-b); }
body.instrument-frame.tracks-open { --tracks-space: var(--tracks-h); }
body.field-ui { --tray-min: 116px; } /* the tray's band when the scene has looks or a subject */
@media (min-width: 701px) and (max-width: 960px) {
  /* The Display takes its own row over the line of words. */
  :root { --tracks-h: 312px; }
  body.instrument-frame { --rail-h: 112px; }
}
@media (max-width: 700px) {
  /* The Display takes its own row over one row of caps (body.rail-wrapped, set by transport-ui.js, is the fallback
     should they ever take two). */
  :root { --tracks-h: 284px; --display-h: 44px; }
  body.instrument-frame { --frame-edge: 8px; --rail-h: 100px; }
  body.instrument-frame.rail-wrapped { --rail-h: 148px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --note-dur: 0ms;
    --note-dur-fade: 0ms;
    --note-dur-glide: 0ms;
    --note-dur-drawer: 0ms;
    --note-dur-frame: 0ms;
    --note-rise: 0px;
  }
}