/* ==========================================================
   DIY Audio Lab — Design System
   Palette, type and components for DIY Audio Lab pages & apps.
   True-gray neutrals, signal blue as the interactive accent;
   lab green is the brand mark and the success state only.
   ========================================================== */

:root {
    /* --- Primitives: Primary, Signal Blue --- */
    --dal-blue-50:  #eaf1fc;
    --dal-blue-200: #b9d2f5;
    --dal-blue-500: #1769cd;
    --dal-blue-600: #1259b0;
    --dal-blue-800: #0d3f7d;

    /* --- Primitives: Brand & Success, Lab Green --- */
    /* Green is a mark/fill colour. 500 never carries text (1.9:1 on white). */
    --dal-green-50:  #edf9ea;
    --dal-green-200: #bfe9b3;
    --dal-green-500: #70d258;   /* logo green */
    --dal-green-700: #237d30;   /* success text on white */
    --dal-green-800: #1b5f26;   /* success text on green-200 */

    /* --- Primitives: Accent, Amber --- */
    /* 600 is the saturation ceiling for 4.5:1 text; anything brighter is
       ink-only, so the bright amber lives at 500 and never carries text. */
    --dal-amber-50:  #fef4e6;
    --dal-amber-200: #fdedd2;
    --dal-amber-500: #d97706;   /* ink: note borders, chart series, diagram marks */
    --dal-amber-600: #a35a00;   /* warning text */

    /* --- Primitives: Error --- */
    --dal-red-50:  #fdecec;
    --dal-red-600: #c62828;

    /* --- Primitives: Neutrals, true gray --- */
    --dal-surface:   #fbfbfc;
    --dal-panel:     #f4f4f6;
    --dal-border:    #e3e3e7;
    --dal-muted:     #8f8f99;
    --dal-text-2:    #6e6e78;
    --dal-text:      #26262b;

    /* --- Primitives: Semantic --- */
    --dal-warning: var(--dal-amber-600);
    --dal-error:   var(--dal-red-600);
    --dal-success: var(--dal-green-700);

    /* --- Semantic aliases: surfaces --- */
    --surface: var(--dal-surface);
    --card: #fff;
    --panel: var(--dal-panel);
    --highlight: var(--dal-blue-50);
    --info-bg: var(--dal-blue-50);
    --success-bg: var(--dal-green-50);
    --warning-bg: var(--dal-amber-50);
    --error-bg: var(--dal-red-50);
    --border: var(--dal-border);

    /* --- Semantic aliases: text --- */
    --text: var(--dal-text);
    --text-secondary: var(--dal-text-2);
    --text-muted: var(--dal-muted);

    /* --- Semantic aliases: action, all signal blue --- */
    --accent: var(--dal-blue-600);
    --accent-hover: var(--dal-blue-800);
    --accent-strong: var(--dal-blue-800);
    --accent-tint: var(--dal-blue-200);
    --link: var(--dal-blue-500);
    --link-hover: var(--dal-blue-600);
    --link-active: var(--dal-blue-800);
    --link-tint: var(--dal-blue-200);

    --disabled-bg: #eeeef1;
    --disabled-text: #a8a8b0;

    /* --- Semantic aliases: status --- */
    --warning: var(--dal-warning);
    --error: var(--dal-error);
    --success: var(--dal-success);

    /* --- Code surfaces: the one sanctioned dark ground, neutral charcoal --- */
    --code-surface:   #1c1c20;
    --code-raised:    #26262b;
    --code-text:      #e8e8ec;
    --code-selection: rgba(23, 105, 205, 0.40);
    --code-caret:     #7fb3f0;

    /* Syntax roles — system hues lifted to hold 4.5:1 on the dark ground */
    --code-comment: #8e8e99;
    --code-keyword: #7fb3f0;
    --code-param:   #d9a35c;
    --code-enum:    #e59a90;
    --code-unit:    #c9b273;
    --code-string:  #b8d178;

    /* --- Type --- */
    --font-sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    --font-math: "STIX Two Text", "Cambria Math", Cambria, Georgia, serif;

    /* --- Shape: keep radius 8–10px across buttons and cards --- */
    --radius: 10px;
    --radius-control: 8px;
}

/* ==========================================================
   Base
   ========================================================== */

* { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    max-width: 900px;
    margin: 48px auto;
    padding: 24px;
    background: var(--surface);
    color: var(--text);
}

h1, h2, h3, h4 {
    color: var(--text);
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.25;
}

h1 { font-size: 40px; letter-spacing: -0.01em; }
h2 { font-size: 24px; }
h3 { font-size: 17px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }

p { margin: 0 0 12px; }

.subtitle {
    color: var(--text-secondary);
    font-size: 16px;
    margin: -4px 0 32px;
}

a {
    color: var(--link);
    text-decoration: none;
}
a:hover { text-decoration: underline; }
a:active { color: var(--link-active); }

/* Keyboard focus ring — one treatment for every interactive element */
a:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.btn-icon:focus-visible,
.segmented button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

code, pre, .mono {
    font-family: var(--font-mono);
    font-size: 13px;
}

code {
    background: var(--panel);
    border-radius: 4px;
    padding: 1px 5px;
}

/* Math: formulas set as plain HTML text, not a rendering library.
   Roman for operators, digits and units; italic for variables. */
.math {
    font-family: var(--font-math);
    font-style: normal;
}
.math i, .math var {
    font-style: italic;
}

/* Block listings are code areas — dark ground. Inline code stays light. */
pre {
    background: var(--code-surface);
    color: var(--code-text);
    border-radius: var(--radius-control);
    padding: 12px 14px;
    overflow-x: auto;
    margin: 8px 0;
    line-height: 1.5;
}
pre code { background: none; padding: 0; color: inherit; }

/* Scrollbars inside a code area follow its ground, not the page's */
pre::-webkit-scrollbar-track,
.code-surface ::-webkit-scrollbar-track,
.code-surface::-webkit-scrollbar-track { background: var(--code-surface); }
pre::-webkit-scrollbar-thumb,
.code-surface ::-webkit-scrollbar-thumb,
.code-surface::-webkit-scrollbar-thumb { background: var(--code-raised); }
pre::-webkit-scrollbar-thumb:hover,
.code-surface ::-webkit-scrollbar-thumb:hover,
.code-surface::-webkit-scrollbar-thumb:hover { background: var(--code-comment); }

/* Syntax roles, for any code area in the system */
.hl-comment   { color: var(--code-comment); font-style: italic; }
.hl-keyword   { color: var(--code-keyword); }
.hl-param     { color: var(--code-param); }
.hl-direction { color: var(--code-enum); }
.hl-unit      { color: var(--code-unit); }
.hl-string    { color: var(--code-string); }
.hl-number    { color: var(--code-text); }

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 32px 0;
}

/* ==========================================================
   Buttons — one primary per view
   ========================================================== */

.btn {
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 18px;
    border-radius: var(--radius-control);
    border: 1.5px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    color: var(--text);
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-strong); border-color: var(--accent-strong); }

.btn-secondary {
    background: transparent;
    border-color: var(--link-hover);
    color: var(--link-hover);
}
.btn-secondary:hover { background: var(--dal-blue-50); }
.btn-secondary:active { border-color: var(--link-active); color: var(--link-active); }

.btn-tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--text);
}
.btn-tertiary:hover { background: var(--panel); }

.btn:disabled,
.btn[disabled] {
    background: var(--disabled-bg);
    border-color: transparent;
    color: var(--disabled-text);
    cursor: default;
}

/* ==========================================================
   Forms
   ========================================================== */

label {
    display: block;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.label-detail,
.input-hint {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
}
.input-hint { margin-top: 4px; }

input, select, textarea {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    padding: 10px 12px;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

input[type="checkbox"], input[type="radio"] {
    width: auto;
    accent-color: var(--accent);
    margin-right: 8px;
}

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

.input-group { margin-bottom: 24px; }

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.checkbox-group label {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

/* ==========================================================
   Controls — selection, toggles, ranges, progress
   ========================================================== */

/* Toolbar: a row of actions above a working surface */
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.toolbar-gap { flex: 1; }

/* Icon button — square, glyph only, for dense toolbars */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn-icon:hover { background: var(--panel); color: var(--text); }
.btn-icon[aria-pressed="true"] {
    background: var(--dal-blue-50);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-icon:disabled { background: var(--disabled-bg); color: var(--disabled-text); cursor: default; }

/* Tabs — switching between views of the same surface */
.tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.tab {
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 8px 0;
    cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Segmented control — 2–4 mutually exclusive modes */
.segmented {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--panel);
    border-radius: var(--radius-control);
}
.segmented button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-selected="true"] { background: var(--accent); color: #fff; }

/* Toggle switch — an immediate on/off, no Apply step */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer;
}
.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.switch-track {
    position: relative;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 11px;
    /* Off state reads as mid-gray: the border tint is invisible on a panel ground */
    background: var(--dal-muted);
    transition: background-color 0.12s ease;
}
.switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.12s ease;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .switch-track { background: var(--disabled-bg); }
.switch input:disabled ~ .switch-text { color: var(--disabled-text); }

/* Range */
input[type="range"] {
    width: 100%;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--dal-border);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
}
input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--dal-border);
}
input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
}
input[type="range"]:disabled::-webkit-slider-thumb { background: var(--text-muted); }
input[type="range"]:disabled::-moz-range-thumb { background: var(--text-muted); }

/* Progress — determinate only; use status text for unknown durations */
.progress {
    height: 6px;
    border-radius: 3px;
    background: var(--panel);
    overflow: hidden;
}
.progress-bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.2s ease;
}
.progress-bar.is-success { background: var(--dal-green-500); }
.progress-bar.is-warning { background: var(--dal-amber-500); }
.progress-bar.is-error   { background: var(--error); }

/* Invalid field — pair the colour with a message; colour alone isn't a state */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--error); }
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus { outline-color: var(--error); border-color: var(--error); }

.input-error {
    font-size: 13px;
    color: var(--error);
    margin-top: 4px;
}

/* Keyboard key */
kbd {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--panel);
    color: var(--text-secondary);
}

/* ==========================================================
   Dialog — the backdrop does the separating, not a shadow
   ========================================================== */

dialog {
    max-width: 440px;
    width: calc(100% - 48px);
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
}
dialog::backdrop { background: rgba(38, 38, 43, 0.35); }
dialog h3 { margin-bottom: 8px; }
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

/* ==========================================================
   Boxes & Cards
   ========================================================== */

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

.panel,
.section {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 20px;
}

.panel-highlight {
    background: var(--highlight);
    border-radius: var(--radius);
    padding: 20px;
}

.section-header {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 32px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* ==========================================================
   Status notes — semantic colour, actual states only
   ========================================================== */

.note {
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-control);
    padding: 14px 16px;
    font-size: 16px;
    margin: 16px 0;
}
.note-info    { border-left-color: var(--link); background: var(--info-bg); }
.note-success { border-left-color: var(--dal-green-500); background: var(--success-bg); }
.note-warning { border-left-color: var(--dal-amber-500); background: var(--warning-bg); }
.note-error   { border-left-color: var(--error); background: var(--error-bg); }

/* ==========================================================
   Badges
   ========================================================== */

.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--panel);
    color: var(--text-secondary);
}
.badge-accent  { background: var(--accent-tint); color: var(--dal-blue-800); }
.badge-success { background: var(--dal-green-200); color: var(--dal-green-800); }
.badge-warning { background: var(--dal-amber-200); color: var(--dal-amber-600); }
.badge-info    { background: var(--link-tint); color: var(--link-active); }

/* ==========================================================
   Tables
   ========================================================== */

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 16px;
}
th, td {
    text-align: left;
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--border);
}
th { font-weight: 600; color: var(--text-secondary); }

/* ==========================================================
   Metrics — key numbers carry the primary accent (signal blue)
   ========================================================== */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.metric-label {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
}
.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
}

/* ==========================================================
   Icons — thin line glyphs, currentColor only
   ========================================================== */

.icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Logo mark — the artwork is a circle, so no radius is applied here.
   The default is 48px because that is the floor for the full-detail marks, which
   are what an app header uses. Drop to .brand-mark-sm only with a simplified
   mark; a full-detail mark below 48px blurs into a smudge. */
.brand-mark {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: block;
}

/* Toolbar scale — pair with a simplified mark, never a full-detail one */
.brand-mark-sm {
    width: 32px;
    height: 32px;
}

/* App header lockup: the mark beside the page title, nothing between them */
.brand-lockup {
    display: flex;
    align-items: center;
    gap: 16px;              /* ≥ 1/4 of a 48px mark, so clear space holds */
    margin-bottom: 20px;
}

.brand-lockup h1 { margin: 0; }

/* ==========================================================
   Utility
   ========================================================== */

.hidden { display: none; }
.color-success { color: var(--success); }
.color-warning { color: var(--warning); }
.color-error   { color: var(--error); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

/* ==========================================================
   Scrollbars
   ========================================================== */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panel); }
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 600px) {
    body { margin: 24px auto; padding: 16px; }
    h1 { font-size: 30px; }
    h2 { font-size: 21px; }
    .input-row { grid-template-columns: 1fr; }
}