/* base.css: design tokens and shared element styles for every page. */
:root {
    color-scheme: light dark;
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #eceef2;
    --border: #d6dae1;
    --text: #18202c;
    --muted: #5a6574;
    --accent: #1d4ed8;
    --accent-hover: #1e40af;
    --accent-text: #ffffff;
    --ok: #15803d;
    --warn: #b45309;
    --bad: #b91c1c;
    --blend: #6d28d9;
    --radius: 12px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --page-width: 1120px; /* the header and every page's content share this width and left edge */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1217;
        --surface: #161b22;
        --surface-2: #222a35;
        --border: #2f3946;
        --text: #e6eaf0;
        --muted: #9aa5b4;
        --accent: #5b8def;
        --accent-hover: #7aa3f3;
        --accent-text: #0b1220;
        --ok: #4ade80;
        --warn: #fbbf24;
        --bad: #f87171;
        --blend: #b69cfb;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 var(--font);
    font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }

select, input[type="number"] {
    font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 12px; min-height: 40px; width: 100%;
}
select:disabled, input:disabled { opacity: 0.6; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.button {
    font: inherit; font-weight: 600; border-radius: 8px; padding: 8px 24px; min-height: 48px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; text-decoration: none;
}
.button.primary { background: var(--accent); color: var(--accent-text); min-width: 200px; }
.button.primary:hover { background: var(--accent-hover); }
.button.secondary { background: transparent; color: var(--accent); border-color: var(--border); font-weight: 500; padding: 8px 16px; min-height: 40px; }
.button.secondary:hover { border-color: var(--accent); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pill {
    font-size: 0.8125rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--muted); white-space: nowrap; min-width: 128px; text-align: center;
}

/* Site header: the same markup on every page, the current page marked with aria-current. */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header-inner {
    max-width: var(--page-width); margin: 0 auto; padding: 8px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px;
}
.brand { color: var(--text); font-weight: 700; text-decoration: none; padding: 8px 0; white-space: nowrap; }
.brand:hover { color: var(--accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 0.9375rem; }
.site-nav a {
    color: var(--muted); text-decoration: none; white-space: nowrap;
    padding: 8px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* Page content: the same width and left edge as the header. Pages that read better narrower
   limit their cards inside it, so titles and the left edge still line up with the brand. */
.page { max-width: var(--page-width); margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 16px; }
.page > * { min-width: 0; }

/* Status card, the same on the Note meter and the Sound explorer: a title, the next action,
   then a pill for what the input is doing and the input level. */
.live { border-left: 4px solid var(--border); padding: 16px 24px; }
.live[data-tone="active"] { border-left-color: var(--accent); }
.live[data-tone="ok"] { border-left-color: var(--ok); }
.live[data-tone="warn"] { border-left-color: var(--warn); }
.live[data-tone="bad"] { border-left-color: var(--bad); }
.live .status-title { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.live[data-tone="active"] .status-title { color: var(--accent); }
.live[data-tone="ok"] .status-title { color: var(--ok); }
.live[data-tone="warn"] .status-title { color: var(--warn); }
.live[data-tone="bad"] .status-title { color: var(--bad); }
.live .status-text { margin: 0 0 16px; font-size: 1.125rem; font-weight: 500; line-height: 1.4; max-width: 64ch; }
.live .live-row { display: flex; align-items: center; gap: 16px; }
.live .pill[data-state="silent"] { color: var(--accent); border-color: var(--accent); background: transparent; }
.live .pill[data-state="attack"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.live .pill[data-state="sustaining"] { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.live .pill[data-state="decayed"] { color: var(--muted); background: transparent; }
.live .pill[data-state="finished"] { color: var(--text); }
.live .pill[data-muted="true"] { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.live .level { flex: 1; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.live .level-bar { height: 100%; width: 0; background: var(--ok); transition: width 80ms linear; }
.live .level-label { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }

/* Page title and its one-paragraph introduction. */
.page-header h1 { margin: 0 0 8px; font-size: 1.75rem; line-height: 1.2; }
.lead { margin: 0; color: var(--muted); max-width: 64ch; }
.lead a { color: var(--accent); }

@media (max-width: 720px) {
    .live { padding: 16px; }
    .live .level-label { display: none; }
}

@media (max-width: 600px) {
    .site-header-inner { gap: 0 20px; padding: 4px 16px; }
    .brand { padding: 6px 0 2px; flex-basis: 100%; }
    .site-nav { gap: 0 20px; font-size: 0.875rem; }
    .site-nav a { padding: 6px 0; }
}