:root {
    /* ── EJ WebMIDI Palette (Dark) — DEFAULT ── */
    /* Black / white / purple — that's the brand */

    /* Backgrounds */
    --bg: #111111;
    --surface: #1b1b1b;
    --surface-alt: #222222;
    --input-bg: #1a1a1a;

    /* Text — max contrast */
    --text-primary: #e2e2e2;
    --text-secondary: #919191;
    --text-on-accent: #FFFFFF;
    --text-on-accent-dim: rgba(255, 255, 255, 0.7);
    --shadow-inset: rgba(0, 0, 0, 0.3);

    /* Purple family — the brand */
    --accent: #7F00FF;
    --accent-hover: #9933FF;
    --accent-dim: rgba(127, 0, 255, 0.15);
    --accent-glow: rgba(127, 0, 255, 0.4);
    --accent-line: #5E00C1;
    /* Accessible brand text on dark bg — 6.3:1 on #111 (WCAG AA passes).
       Use this for text that must read as brand purple. */
    --accent-text: #BB55FF;
    --bar-fill: #FFFFFF;

    /* Semantic — only when meaning matters */
    --success: #00CC66;
    --error: #CC3333;
    --muted: rgba(204, 51, 51, 0.35);
    --muted-text: #ff6666;

    /* Structure */
    --border: #303030;

    /* Grid spacing tokens — adjust per breakpoint */
    --grid-gap: 3px;
    --grid-cell-pad: 0.25rem;
    --grid-font: 0.7rem;
    --grid-label-font: 0.65rem;
    --status-font: 2rem;
    --status-pad: 0.5rem;
    --section-pad: 0.75rem 1rem;
    --tab-pad: 0.5rem 1rem;
    --tab-font: 0.9rem;

    /* Font — Consolas is the brand, with fallbacks for other platforms */
    --mono: 'Consolas', 'Menlo', 'Monaco', monospace;

    /* Fluent design token — forces all Fluent components to use our font */
    --body-font: 'Consolas', 'Menlo', 'Monaco', monospace;
}

/* Language-specific font stacks — Consolas first, then native script fallbacks */
[lang="ja"] { --mono: 'Consolas', 'MS Gothic', 'Noto Sans Mono CJK JP', monospace; }
[lang="ko"] { --mono: 'Consolas', 'Malgun Gothic', 'Noto Sans Mono CJK KR', monospace; }
[lang="zh-CN"], [lang="zh"] { --mono: 'Consolas', 'Microsoft YaHei', 'Noto Sans Mono CJK SC', monospace; }
[lang="zh-TW"] { --mono: 'Consolas', 'Microsoft JhengHei', 'Noto Sans Mono CJK TC', monospace; }
[lang="ar"], [lang="he"], [lang="fa"], [lang="ur"], [lang="ps"] {
    --mono: 'Consolas', 'Cascadia Code', 'Noto Sans Arabic', monospace;
}
[lang="hi"], [lang="mr"], [lang="ne"] { --mono: 'Consolas', 'Nirmala UI', 'Noto Sans Devanagari', monospace; }
[lang="th"] { --mono: 'Consolas', 'Leelawadee UI', 'Noto Sans Thai', monospace; }
[lang="km"] { --mono: 'Consolas', 'Khmer UI', 'Noto Sans Khmer', monospace; }

/* ── Light ── */
[data-theme="light"] {
    --bg: #F0EDF4;
    --surface: #FFFFFF;
    --surface-alt: #E8E3EE;
    --input-bg: #FFFFFF;
    --text-primary: #111111;
    --text-secondary: #555555;
    --text-on-accent: #FFFFFF;
    --text-on-accent-dim: rgba(255, 255, 255, 0.7);
    --shadow-inset: rgba(0, 0, 0, 0.3);
    --accent: #7F00FF;
    --accent-hover: #6600CC;
    --accent-dim: rgba(127, 0, 255, 0.1);
    --accent-glow: rgba(127, 0, 255, 0.25);
    --accent-line: #D5BAFF;
    /* Accessible brand text on light bg — 8:1 on #F0EDF4 (WCAG AAA passes). */
    --accent-text: #5E00C1;
    --bar-fill: #111111;
    --success: #22AA66;
    --error: #DD5555;
    --muted: rgba(204, 51, 51, 0.15);
    --muted-text: #CC3333;
    --border: #C5BCD0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--mono);
}

html {
    scrollbar-gutter: stable;
}

body {
    font-family: var(--mono);
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.5;
    padding: 1rem;
    max-width: 64rem;
    margin: 0 auto;
    overflow-x: hidden;
}

fluent-tab-panel {
    overflow: hidden;
    max-width: 100%;
}

.update-banner {
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: 4px;
    font-size: 0.9rem;
}

.update-banner:not([hidden]) {
    display: flex;
}

/* Pack copy banner — persistent across tab switches while a multi-MB
   install is running. Keeps the operator in the loop without forcing
   them back to the Language Packs tab. */
.pack-copy-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--accent-dim);
}
.pack-copy-banner-fill {
    height: 4px;
    width: 0;
    background: var(--accent);
    transition: width 0.15s linear;
    border-radius: 2px;
}

/* Drive / card status line — source of truth above the install button.
   Styled as a <button> (click re-authorizes the cached handle on browsers
   that revoke FSA permission between sessions) but visually a status strip.
   Zero out the user-agent button defaults (background/color inheritance)
   and drive hover/focus off design tokens so the hover state matches the
   rest of the UI instead of flashing bright accent. */
.drive-status {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    border-radius: 4px;
    font-size: 0.9rem;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: normal;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.drive-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Double-class specificity (0,2,0) to beat the global `button { ... }` rule
   at the bottom of this stylesheet that sets background:var(--accent) for
   every <button>. Without this, the drive-status button would inherit the
   accent-hover purple fill and the --accent-text color clashed against it. */
.drive-status.drive-status-unknown {
    background: var(--accent-dim);
    color: var(--text-secondary);
    border-color: transparent;
    font-style: italic;
    font-weight: 400;
}
.drive-status.drive-status-unknown:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.drive-status.drive-status-known {
    background: var(--accent-dim);
    color: var(--accent-text);
    border-color: transparent;
    font-weight: 500;
}
.drive-status.drive-status-known:hover {
    border-color: var(--accent);
}

/* ── Header ── */

header {
    margin-bottom: 0;
}

h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent);
}

h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--accent-line);
    padding-bottom: 0.35rem;
}

/* ── Page Settings ── */

.page-settings-group {
    margin-bottom: 1.5rem;
}

.page-settings-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.35rem;
}

.page-settings-group select {
    width: 100%;
    max-width: 20rem;
}

.font-preview {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-primary);
    max-width: 30rem;
}

/* Font family mappings */
[data-font="consolas"] { --mono: 'Consolas', 'Menlo', 'Monaco', monospace; }
[data-font="jetbrains"] { --mono: 'JetBrains Mono', monospace; }
[data-font="firacode"] { --mono: 'Fira Code', monospace; }
[data-font="sourcecodepro"] { --mono: 'Source Code Pro', monospace; }
[data-font="ibmplex"] { --mono: 'IBM Plex Mono', monospace; }
[data-font="opendyslexic"] { --mono: 'OpenDyslexic', sans-serif; }
[data-font="segoeui"] { --mono: 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif; }
[data-font="system"] { --mono: system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* Language-specific fonts — CJK */
[data-font="yugothic"] { --mono: 'Yu Gothic', 'Noto Sans JP', sans-serif; }
[data-font="msgothic"] { --mono: 'MS Gothic', 'Noto Sans JP', monospace; }
[data-font="notojp"] { --mono: 'Noto Sans JP', sans-serif; }
[data-font="malgun"] { --mono: 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
[data-font="notokr"] { --mono: 'Noto Sans KR', sans-serif; }
[data-font="msyahei"] { --mono: 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }
[data-font="notosc"] { --mono: 'Noto Sans SC', sans-serif; }
[data-font="msjheng"] { --mono: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }
[data-font="nototc"] { --mono: 'Noto Sans TC', sans-serif; }

/* Arabic & Hebrew */
[data-font="notoarabic"] { --mono: 'Noto Sans Arabic', sans-serif; }
[data-font="amiri"] { --mono: 'Amiri', serif; }
[data-font="tradarabic"] { --mono: 'Traditional Arabic', 'Noto Sans Arabic', serif; }
[data-font="notohebrew"] { --mono: 'Noto Sans Hebrew', sans-serif; }
[data-font="david"] { --mono: 'David', 'Noto Sans Hebrew', serif; }

/* Indic */
[data-font="notodevanagari"] { --mono: 'Noto Sans Devanagari', sans-serif; }
[data-font="nirmala"] { --mono: 'Nirmala UI', sans-serif; }
[data-font="notobengali"] { --mono: 'Noto Sans Bengali', sans-serif; }
[data-font="vrinda"] { --mono: 'Vrinda', 'Noto Sans Bengali', sans-serif; }
[data-font="notogurmukhi"] { --mono: 'Noto Sans Gurmukhi', sans-serif; }
[data-font="raavi"] { --mono: 'Raavi', 'Noto Sans Gurmukhi', sans-serif; }
[data-font="notogujarati"] { --mono: 'Noto Sans Gujarati', sans-serif; }
[data-font="shruti"] { --mono: 'Shruti', 'Noto Sans Gujarati', sans-serif; }
[data-font="nototamil"] { --mono: 'Noto Sans Tamil', sans-serif; }
[data-font="latha"] { --mono: 'Latha', 'Noto Sans Tamil', sans-serif; }
[data-font="nototelugu"] { --mono: 'Noto Sans Telugu', sans-serif; }
[data-font="gautami"] { --mono: 'Gautami', 'Noto Sans Telugu', sans-serif; }
[data-font="notokannada"] { --mono: 'Noto Sans Kannada', sans-serif; }
[data-font="tunga"] { --mono: 'Tunga', 'Noto Sans Kannada', sans-serif; }
[data-font="notomalayalam"] { --mono: 'Noto Sans Malayalam', sans-serif; }
[data-font="notoodia"] { --mono: 'Noto Sans Odia', sans-serif; }
[data-font="notosinhala"] { --mono: 'Noto Sans Sinhala', sans-serif; }

/* Southeast Asian */
[data-font="leelawadee"] { --mono: 'Leelawadee UI', 'Noto Sans Thai', sans-serif; }
[data-font="notothai"] { --mono: 'Noto Sans Thai', sans-serif; }
[data-font="notokhmer"] { --mono: 'Noto Sans Khmer', sans-serif; }
[data-font="dokchampa"] { --mono: 'DokChampa', 'Noto Sans Khmer', sans-serif; }
[data-font="notolao"] { --mono: 'Noto Sans Lao', sans-serif; }
[data-font="notomyanmar"] { --mono: 'Noto Sans Myanmar', sans-serif; }
[data-font="myanmartext"] { --mono: 'Myanmar Text', 'Noto Sans Myanmar', sans-serif; }

/* Cyrillic, Greek, Armenian, Georgian */
[data-font="ptsans"] { --mono: 'PT Sans', sans-serif; }
[data-font="notocyrillic"] { --mono: 'Noto Sans', sans-serif; }
[data-font="notoarmenian"] { --mono: 'Noto Sans Armenian', sans-serif; }
[data-font="notogeorgian"] { --mono: 'Noto Sans Georgian', sans-serif; }
[data-font="notogreek"] { --mono: 'Noto Sans', sans-serif; }

/* Ethiopic & Canadian Syllabics */
[data-font="notoethiopic"] { --mono: 'Noto Sans Ethiopic', sans-serif; }
[data-font="notosyllabics"] { --mono: 'Noto Sans Canadian Aboriginal', sans-serif; }

.connection-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.connection-row fluent-select {
    flex: 1;
    max-width: 20rem;
}

.status-line {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-disconnected::before {
    content: "\25CF ";
    color: var(--text-secondary);
}

.status-connected::before {
    content: "\25CF ";
    /* Brand-compatible green: readable on dark + light, reads as "connected" */
    color: #00CC66;
}

/* Global brand-purple accent on native checkboxes (overrides browser default red
   check on macOS/iOS and system-accent tints elsewhere). Per-component rules
   below (.preview-label input, .ad-master input) remain for sizing. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

.status-error::before {
    content: "\25CF ";
    color: var(--error);
}

select,
button {
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-primary);
}

/* Native <select> dropdowns need extra room on the right for the arrow
   glyph that browsers render on top of the text — without it, longer
   translated labels like "Oscuro" or "Mitteldunkel" get clipped.
   1.75rem gives a comfortable gap for all major browsers' arrow widths. */
select {
    flex: 1;
    min-width: 10rem;
    padding-right: 1.75rem;
}

select:focus,
button:focus {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

button {
    cursor: pointer;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
    font-weight: 600;
}

button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

button:active {
    transform: translateY(1px);
}


/* ── Status Display ── */

.status-display {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-line);
    border-radius: 6px;
    padding: var(--section-pad);
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    position: relative;
    min-height: 5rem;
}

/* ── Disconnected Overlay ── */

.disconnected-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    z-index: 2;
}

.disconnected-text {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.15em;
}

.disconnected-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-display.connected .disconnected-overlay {
    display: none;
}

.status-display:not(.connected) .status-grid {
    visibility: hidden;
}

/* Dim and disable interactive sections when disconnected */
#panel-sequencer:not(.connected) .feed-details {
    opacity: 0.25;
    pointer-events: none;
    filter: grayscale(0.6);
}

#panel-sequencer:not(.connected) .connections-panel,
#panel-sequencer:not(.connected) .seq-grid-panel {
    border-color: color-mix(in srgb, var(--accent-line) 20%, transparent);
}

.status-grid {
    gap: 0.35rem 0.15rem;
    /* Inherit the document dir so columns flip together with labels in RTL */
    direction: inherit;
}

.status-grid fluent-data-grid-cell[cell-type="columnheader"],
.status-grid th {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    padding: 0;
}

.status-grid fluent-data-grid-cell[cell-type="columnheader"].status-cell--mode {
    /* 'end' flips to left in RTL so header stays aligned over its value cell */
    text-align: end;
}

.status-grid fluent-data-grid-cell[cell-type="columnheader"]:first-child {
    text-align: start;
}

.status-value {
    font-size: var(--status-font);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    height: auto;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    background-color: var(--accent);
    padding: 0 0.5rem;
    vertical-align: middle;
    text-align: center;
}

/* ── Transport State ── */

.transport-state {
    text-align: center;
    width: 2.6rem;
}

.transport-icon {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

.status-cell--mode {
    align-items: flex-start;
}

.status-value--mode {
    width: 14ch;
    /* 'end' = right in LTR, left in RTL — keeps value under its header */
    text-align: end;
}

/* MUTE cell: fixed width so swapping icon <-> "--" doesn't reflow the row. */
.status-value--mute {
    min-width: 3rem;
    text-align: start;
}
.status-grid fluent-data-grid-cell[cell-type="columnheader"]:first-child {
    min-width: 3rem;
}

.status-value--val {
    min-width: 6ch;
    text-align: start;
}



.status-value--bpm {
    width: 4ch;
    text-align: center;
}

.status-value--all {
    width: 4ch;
    text-align: center;
}


/* ── Connection Slots ── */

.connections-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-line);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    /* Physical jack order (USB CLK A B C D E F G H AUD) is fixed on the
       hardware — always flow LTR regardless of UI language direction so the
       on-screen row mirrors the device's left-to-right jack layout. */
    direction: ltr;
}

.conn-table {
    width: 100%;
    gap: 0.25rem 0.15rem;
    text-align: center;
}

.conn-table fluent-data-grid-cell[cell-type="columnheader"],
.conn-table th {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.15rem 0.4rem;
}

.conn-slot {
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    text-align: center;
}

.conn-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 0;
    overflow: hidden;
    vertical-align: middle;
}

.conn-slot.connected .conn-indicator {
    background: var(--accent-line);
    border-color: var(--accent-line);
    box-shadow: 0 0 6px var(--accent-line);
}

/* ── Sequencer Grid ── */

.seq-grid-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-line);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    position: relative;
}

/* ── Grid View Toggle ── */


.seq-grid-panel {
    position: relative;
}



.seq-grid {
    font-size: var(--grid-font);
    min-width: 40rem;
    width: 100%;
    gap: 1px;
    /* Grid direction inherits from document — RTL locales render 16->1 to
       match their reading flow. (Prior LTR lock removed at user request.) */
}

.seq-grid:focus {
    outline: none;
}

/* ── Fluent component overrides for dark theme ── */

/* Data grid */
fluent-data-grid-row {
    background: transparent !important;
    --neutral-fill-rest: transparent;
    --neutral-fill-hover: transparent;
    --neutral-fill-active: transparent;
    border: none;
    column-gap: 0.25rem;
    row-gap: 1px;
}

fluent-data-grid-cell {
    border: none;
    padding: 0;
}

.status-grid fluent-data-grid-row {
    column-gap: 0.5rem;
}

/* Tabs — all tab sets get consistent styling */
fluent-tabs {
    --accent-fill-rest: var(--accent);
}

fluent-tabs::part(tablist) {
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

fluent-tab {
    padding: var(--tab-pad);
    font-size: var(--tab-font);
    border-radius: 4px 4px 0 0;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-bottom: none;
}

fluent-tab:hover {
    color: var(--text-primary);
    background: var(--surface-alt);
}

fluent-tab[aria-selected="true"] {
    color: var(--text-on-accent);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

fluent-tab::part(content) {
    padding: 0;
}

/* Tree views */
fluent-tree-view {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0;
}

fluent-tree-item {
    font-size: 0.85rem;
}

fluent-tree-item::part(positioning-region) {
    border-radius: 3px;
    margin: 0 0.25rem;
}

fluent-tree-item:hover::part(positioning-region) {
    background: var(--accent-dim);
}

fluent-tree-item[selected]::part(positioning-region) {
    background: var(--accent-dim);
    /* Outline lives on :focus-visible (below) — not here. [selected] can persist
       across focus changes in Fluent, and an outline tied to [selected] appears
       as a "ghost" rect on items you've already left. */
}

fluent-tree-item:focus-visible::part(positioning-region) {
    outline: 2px solid var(--text-primary);
    outline-offset: -2px;
}

/* Color target tree — constrain height without ugly scrollbar */
.color-target-tree-wrap {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

.color-target-tree-wrap::-webkit-scrollbar {
    width: 6px;
}

.color-target-tree-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.color-target-tree-wrap::-webkit-scrollbar-thumb {
    background: var(--accent-line);
    border-radius: 3px;
}

.seq-cell {
    text-align: center;
    padding: var(--grid-cell-pad);
    background: var(--surface-alt);
    border-radius: 2px;
    min-height: 1.6rem;
    color: var(--text-secondary);
    vertical-align: middle;
}

.seq-cell:focus {
    outline: 2px solid var(--text-primary);
    outline-offset: -1px;
    z-index: 1;
    position: relative;
}

.seq-cell--header {
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.6rem;
}

.seq-cell--track-label {
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.6rem;
    text-align: right;
    padding-right: 0.3rem;
    width: 3.5ch;
}

.seq-cell--corner {
    background: transparent;
}

.seq-cell--active {
    color: var(--text-primary);
}

.seq-cell--on {
    background: var(--accent);
    color: var(--text-primary);
}

.seq-cell--off {
    color: var(--text-secondary);
}

.seq-cell--beyond {
    background: transparent;
    border-color: var(--accent-dim);
}

.seq-cell--boundary {
    border-left: 2px solid var(--accent-line);
}

.seq-cell--current-track {
    background: var(--accent-dim);
    border-top: 2px solid var(--accent-line);
    border-bottom: 2px solid var(--accent-line);
}

.seq-cell--current-track-start {
    border-left: 2px solid var(--accent-line);
}

.seq-cell--current-track-end {
    border-right: 2px solid var(--accent-line);
}

.seq-cell--current-step {
    background: var(--accent-dim);
}

.seq-cell--cursor {
    background: var(--accent-dim);
    outline: 1px solid var(--text-primary);
}

/* On cells in highlighted row/column keep their accent background */
.seq-cell--current-track.seq-cell--on,
.seq-cell--current-step.seq-cell--on {
    background: var(--accent);
}

/* ── Timing Composite Indicators ── */

.seq-cell--has-nudge {
    border-bottom: 2px solid var(--accent-hover);
}

.seq-cell--has-swing {
    border-bottom: 2px solid var(--accent-line);
}

/* ── Track View Grid ── */

.track-grid .seq-cell--track-label {
    width: 5.5ch;
}

.seq-cell--param-label {
    font-size: 0.55rem;
    text-align: right;
    white-space: nowrap;
}

.seq-cell--current-param {
    color: var(--accent);
}

.seq-cell--current-param-row {
    background: var(--accent-dim);
}

.seq-cell--current-param-row.seq-cell--on {
    background: var(--accent);
}

/* ── Track Info Bar ── */

.track-info-bar[hidden] {
    display: none;
}

.track-info-bar {
    margin-top: 0.5rem;
    gap: 1px;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.track-info-bar fluent-data-grid-cell[cell-type="columnheader"],
.track-info-bar th {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 0.2rem 0.5rem;
    background: var(--surface-alt);
}

.track-info-value {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    padding: 0.2rem 0.5rem;
    background: var(--surface-alt);
}

/* ── Cell Visualizations (bar fill, glide ramp) ── */

.bar-fill {
    fill: var(--bar-fill);
    opacity: 0.7;
}

.seq-cell .bar-svg,
.seq-cell .glide-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.seq-cell .bar-label,
.seq-cell .glide-label {
    position: relative;
    z-index: 1;
    font-size: inherit;
    line-height: 1;
}

.seq-cell:has(.bar-svg),
.seq-cell:has(.glide-svg) {
    position: relative;
    overflow: hidden;
    height: 1.6rem;
}

/* ── Muted Track Indicators ── */

.seq-cell--muted {
    background: var(--muted);
    color: var(--muted-text);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.mute-icon {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
}

.seq-cell--muted-row,
.seq-cell--muted-row.seq-cell--on,
.seq-cell--muted-row.seq-cell--off {
    background: var(--muted);
    color: var(--muted-text);
}

/* ── Collapsed Feed ── */

.feed-details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-line);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.feed-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    user-select: none;
}

.feed-summary:hover {
    color: var(--text-primary);
}

.feed-summary::marker {
    color: var(--accent-line);
}

.feed-body {
    border-top: 1px solid var(--accent-line);
    padding: 0.5rem;
}

.message-feed {
    height: 12rem;
    overflow-y: auto;
    padding: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.message-feed:focus {
    outline: 2px solid var(--text-primary);
    outline-offset: -2px;
}

.message-feed p {
    padding: 0.15rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-line) 15%, transparent);
    color: var(--text-secondary);
}

.message-feed p:last-child {
    border-bottom: none;
}

.message-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Controls */
.controls-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

button[aria-pressed="true"] {
    background: var(--error);
    border-color: var(--error);
}

/* Legacy tab styles removed — now using fluent-tabs */

/* ── Settings Section ── */

.settings-section {
    max-width: 48rem;
    overflow: hidden;
}


/* ── LED Color Picker ── */

.field-group {
    margin-bottom: 1rem;
}

.field-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.25rem;
}

.field-group select {
    width: 100%;
    padding: 0.4rem;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
}

.picker-row {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.picker-panels-wrap {
    flex-shrink: 0;
    width: min(340px, 75vh);
}

.picker-panel {
    width: 100%;
}

.wheel-wrap {
    position: relative;
    width: min(340px, 75vh, 100%);
    height: auto;
    aspect-ratio: 1;
}

.wheel-wrap canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.swatch-pair {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#crossfade-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    /* Smooth blend between brightness layers — ease-out feels snappy but polished */
    transition: opacity 0.28s cubic-bezier(0.33, 0.68, 0.3, 1);
}

.wheel-wrap:focus-visible {
    outline: none;
}

.wheel-cursor {
    position: absolute;
    width: 22px;
    height: 22px;
    /* Border color is set dynamically by app.js based on swatch luminance:
       dark ring on light colors, light ring on dark colors — always visible. */
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-glow), inset 0 0 2px var(--shadow-inset);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: left 0.08s, top 0.08s, border-color 0.08s;
    z-index: 10;
}

/* Brightness controls below the wheel.
   + and − buttons pinned to the corners (space-between), brightness level centered.
   Buttons are NEVER disabled so keyboard focus is never lost at the extremes —
   instead, an .at-extreme class dims them visually and stepBrightness() announces
   "Brightest"/"Darkest" without changing state. */
.brightness-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Match the wheel's actual width so the +/− buttons line up with the wheel edges
       and can never overflow the picker column. */
    width: min(340px, 75vh, 100%);
    margin: 4px auto 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    box-sizing: border-box;
}
/* Brightness buttons — use Fluent's built-in `outline` button styling. */
.brightness-btn {
    min-width: 2.5rem;
}
/* At the extreme — dimmed but still focusable and clickable so focus is never lost.
   Click still fires; stepBrightness() announces the level label. */
.brightness-btn.at-extreme {
    opacity: 0.4;
}
.brightness-level {
    flex: 1;
    text-align: center;
    color: var(--accent-text);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}

.info-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 160px;
    flex: 1;
}

.swatch-pair {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.swatch-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-swatch {
    width: 40px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
    border: 2px solid var(--accent-line);
    transition: background-color 0.1s;
}

.swatch-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.swatch-info .swatch-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.swatch-info .color-name {
    color: var(--accent-text);
    font-weight: 600;
    font-size: 1.05rem;
}

.swatch-info .rgb-val {
    color: var(--success);
    font-size: 0.82rem;
}

.complement-row .color-name {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1.05rem;
}

.complement-row .rgb-val {
    color: var(--accent-line);
    font-size: 0.82rem;
}

.complement-row .color-swatch {
    border-color: var(--surface);
}

.info-panel .pos-info {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.info-panel .target-note {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
}

.info-panel a:hover,
.info-panel a:focus-visible {
    text-decoration: underline;
    color: var(--text-primary);
}

.preview-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    max-width: min(340px, 75vh);
}

.preview-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.preview-label input {
    accent-color: var(--accent);
}

.save-btn {
    padding: 6px 14px;
    background: var(--accent);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.save-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.revert-btn {
    padding: 6px 14px;
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.revert-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.picker-panel[hidden] {
    display: none;
}

/* Legacy picker tab styles removed — now using fluent-tabs */

.color-list {
    width: 100%;
    height: 340px;
    padding: 4px;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.6;
}

.color-list:focus {
    outline: 2px solid var(--text-primary);
    border-color: var(--accent);
}

/* ── Audio Description Settings ── */

.ad-section h2 {
    margin-top: 0.5rem;
}

.ad-master {
    margin-bottom: 1rem;
}

.ad-master-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.ad-master input[type="checkbox"] {
    accent-color: var(--accent);
    width: 1.1rem;
    height: 1.1rem;
}

/* ── Treeview ── */

.ad-tree {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.375rem 0;
    list-style: none;
    --body-font: var(--mono);
}

/* Voicing tree: give nested items a clear visual indent so a child
   sits further right than its parent's label, not flush with it.
   Indent via padding on the positioning-region (not margin on the whole
   tree-item) so there's no gap on the left for the parent's background
   or hover state to show through. */
.ad-tree fluent-tree-item fluent-tree-item::part(positioning-region) {
    padding-inline-start: 1.25rem;
}


.ad-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ad-tree [role="treeitem"] {
    outline: none;
}

.ad-tree .tv-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.625rem;
    cursor: pointer;
    user-select: none;
    border-radius: 3px;
    margin: 0 0.25rem;
}

.ad-tree [role="treeitem"]:focus > .tv-row {
    outline: 2px solid var(--text-primary);
    outline-offset: -2px;
}

.ad-tree .tv-row:hover {
    background: var(--accent-dim);
}

/* Chevron */
.ad-tree .tv-chevron {
    width: 1rem;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.ad-tree [aria-expanded="true"] > .tv-row > .tv-chevron {
    transform: rotate(90deg);
}

.ad-tree [aria-expanded] > .tv-row > .tv-chevron {
    color: var(--text-primary);
}

/* Custom checkbox (span with role="checkbox") */
.ad-tree .tv-cb {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: 2px solid var(--text-secondary);
    border-radius: 3px;
    background: var(--input-bg);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ad-tree .tv-cb[aria-checked="true"] {
    background: var(--accent);
    border-color: var(--accent);
}

/* Checkmark */
.ad-tree .tv-cb[aria-checked="true"]::after {
    content: "";
    width: 0.3rem;
    height: 0.55rem;
    border: solid var(--text-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -0.1rem;
}

/* Mixed / indeterminate state */
.ad-tree .tv-cb[aria-checked="mixed"] {
    background: var(--accent);
    border-color: var(--accent);
}

.ad-tree .tv-cb[aria-checked="mixed"]::after {
    content: "";
    width: 0.5rem;
    height: 2px;
    background: var(--text-primary);
}

/* Labels */
.ad-tree .tv-label {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.ad-tree .tv-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-left: 0.25rem;
}

/* Indent levels */
.ad-tree > [role="treeitem"] > .tv-row {
    padding-left: 0.625rem;
}

.ad-tree > [role="treeitem"] > .tv-row .tv-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.ad-tree [role="group"] > [role="treeitem"] > .tv-row {
    padding-left: 1.875rem;
}

.ad-tree [role="group"] [role="group"] > [role="treeitem"] > .tv-row {
    padding-left: 3.25rem;
}

/* Hidden children when collapsed */
.ad-tree [aria-expanded="false"] > [role="group"] {
    display: none;
}

/* Inline checkbox indicators for voice tree items */
.voice-cb {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--text-secondary);
    border-radius: 3px;
    margin-right: 0.35rem;
    vertical-align: middle;
    flex-shrink: 0;
    position: relative;
}

.voice-cb.checked {
    background: var(--accent);
    border-color: var(--accent);
}

.voice-cb.checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid var(--text-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.voice-cb.mixed {
    background: var(--accent);
    border-color: var(--accent);
}

.voice-cb.mixed::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 7px;
    height: 2px;
    background: var(--text-on-accent);
}

/* ═══════════════════════════════════════════════ */
/* Color Target Tree                               */
/* ═══════════════════════════════════════════════ */

/* Side-by-side layout: tree left, picker right */
.color-picker-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.color-target-tree-wrap {
    width: 180px;
    min-width: 180px;
    max-height: 500px;
    overflow-y: auto;
    flex-shrink: 0;
}

.color-picker-main {
    flex: 1;
    min-width: 0;
}

/* Medium screens: tree above, picker below */
@media (max-width: 900px) {
    .color-picker-layout {
        flex-direction: column;
    }
    .color-target-tree-wrap {
        width: 100%;
        min-width: unset;
        max-height: 180px;
    }
}

/* Narrow: smaller wheel, shorter tree */
@media (max-width: 640px) {
    .color-target-tree-wrap {
        max-height: 140px;
    }
    .picker-panel {
        max-width: min(100%, 280px);
    }
    .wheel-wrap {
        max-width: min(100%, 280px);
    }
}

@media (max-width: 480px) {
    .color-target-tree-wrap {
        max-height: 120px;
    }
    .picker-panel {
        max-width: min(100%, 220px);
    }
    .wheel-wrap {
        max-width: min(100%, 220px);
    }
}

.ct-tree {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.375rem 0;
    list-style: none;
    --body-font: var(--mono);
}

.ct-tree fluent-tree-item {
}
    margin: 0;
}

.ct-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ct-tree [role="treeitem"] {
    outline: none;
}

.ct-tree .ct-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.375rem;
    cursor: pointer;
    user-select: none;
    border-radius: 3px;
    margin: 0 0.125rem;
}

.ct-tree [role="treeitem"]:focus > .ct-row {
    outline: 2px solid var(--text-primary);
    outline-offset: -2px;
}

.ct-tree .ct-row:hover {
    background: var(--accent-dim);
}

.ct-tree [aria-selected="true"] > .ct-row {
    background: var(--accent-dim);
    border-left: 3px solid var(--accent-line);
}

/* Chevron */
.ct-tree .ct-chevron {
    width: 0.75rem;
    text-align: center;
    font-size: 0.6rem;
    color: var(--text-secondary);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.ct-tree [aria-expanded="true"] > .ct-row > .ct-chevron {
    transform: rotate(90deg);
}

.ct-tree [aria-expanded] > .ct-row > .ct-chevron::before {
    content: "▶";
}

/* Color swatch */
.ct-tree .ct-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.ct-tree .ct-label {
    flex: 1;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Group headers (top-level items with children) */
.ct-tree > [role="treeitem"] > .ct-row {
    font-weight: 600;
}

.ct-tree > [role="treeitem"] > .ct-row .ct-label {
    font-size: 0.82rem;
}

/* Indent levels */
.ct-tree [role="group"] > [role="treeitem"] > .ct-row {
    padding-left: 1.25rem;
}

.ct-tree [role="group"] [role="group"] > [role="treeitem"] > .ct-row {
    padding-left: 2rem;
}

/* Hide children when collapsed */
.ct-tree [aria-expanded="false"] > [role="group"] {
    display: none;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Language Packs Tab ── */

.lang-packs-intro {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.lang-packs-offline {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

/* Sampler Grid */

.sampler-grid-wrap {
    margin-top: 1rem;
}

.sampler-grid {
    margin-bottom: 0.5rem;
}

.sampler-grid fluent-data-grid-cell {
    font-size: 0.85rem;
}

.sampler-grid fluent-data-grid-cell[cell-type="columnheader"] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 0.4rem;
}

.sampler-grid fluent-data-grid-cell[cell-type="columnheader"]:first-child {
    text-align: left;
}

.sampler-voice-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.sampler-speed-cell {
    text-align: center;
    padding: 0.3rem;
    font-size: 0.85rem;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sampler-play-cell {
    cursor: pointer;
    color: var(--text-secondary);
    background: var(--surface-alt);
    border-radius: 4px;
    transition: background 0.15s;
}

.sampler-play-cell:hover {
    background: var(--accent-dim);
    color: var(--text-primary);
}

.sampler-play-cell:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: -2px;
}

.sampler-play-cell.playing {
    background: var(--accent);
    color: var(--text-primary);
}

.sampler-play-cell.selected {
    background: var(--accent);
    color: var(--text-primary);
}

.sampler-cell-new {
    font-size: 0.85rem;
    border: 1px solid var(--success);
}

.sampler-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Pack Info */

.pack-info {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-line);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.pack-select-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pack-select-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pack-select-group label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pack-select-group select {
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    min-width: 10rem;
}


.pack-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pack-install-btn {
    min-width: 10rem;
}

/* ── Fluent component token overrides ── */

fluent-button[appearance="accent"] {
    --foreground-on-accent-rest: #FFFFFF;
    --foreground-on-accent-hover: #FFFFFF;
    --foreground-on-accent-active: #FFFFFF;
    --accent-foreground-rest: #FFFFFF;
    --accent-foreground-hover: #FFFFFF;
    --accent-foreground-active: #FFFFFF;
    --accent-fill-rest: #7F00FF;
    --accent-fill-hover: #6B00D6;
    --accent-fill-active: #5A00B3;
    --accent-fill-focus: #7F00FF;
}

fluent-button[appearance="outline"] {
    --neutral-foreground-rest: var(--text-primary);
    --neutral-foreground-hover: var(--text-primary);
    --neutral-foreground-active: var(--text-primary);
    --neutral-stroke-rest: var(--border);
    --neutral-stroke-hover: var(--accent);
    --neutral-stroke-active: var(--accent);
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--accent-dim);
    --neutral-fill-stealth-active: var(--accent-glow);
}

[data-theme="light"] fluent-button[appearance="accent"] {
    --accent-fill-rest: #7F00FF;
    --accent-fill-hover: #6B00D6;
    --accent-fill-active: #5A00B3;
    --accent-fill-focus: #7F00FF;
}

[data-theme="light"] fluent-button[appearance="outline"] {
    --neutral-stroke-hover: #7F00FF;
    --neutral-stroke-active: #6B00D6;
}

fluent-select {
    --neutral-fill-input-rest: var(--input-bg);
    --neutral-fill-input-hover: var(--surface-alt);
    --neutral-foreground-rest: var(--text-primary);
    --neutral-stroke-rest: var(--border);
    --neutral-stroke-hover: var(--accent);
    --accent-fill-rest: var(--accent);
}

fluent-select::part(listbox) {
    background: var(--surface);
    border-color: var(--border);
}

/* Progress Bar */

.pack-progress {
    margin-top: 0.75rem;
}

.pack-progress-bar {
    height: 6px;
    background: var(--surface-alt);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.pack-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s;
}

.pack-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Currently installed */

/* Pack update/discovery sections */


.pack-installed-list {
    list-style: none;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pack-installed-list li {
    padding: 0.25rem 0;
}

.pack-installed-info {
    margin-top: 1.5rem;
}

.pack-installed-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Local pack store */
.sampler-cell-cached {
    border-bottom: 2px solid var(--success);
}

.local-store-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.local-store-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}

.local-store-folder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface-alt);
    border-radius: 4px;
    font-size: 0.8rem;
}

.local-store-path {
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* System versions (Page Settings) */

.system-versions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.system-version-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-alt);
    border-radius: 4px;
    font-size: 0.85rem;
}

.system-version-label {
    font-weight: 600;
    min-width: 8rem;
    color: var(--text-primary);
}

.system-version-value {
    color: var(--text-secondary);
    min-width: 4rem;
}

.system-version-status {
    font-size: 0.8rem;
}

.status-up-to-date {
    color: var(--success);
}

.status-update-available {
    color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   COMPACT SINGLE-TRACK GRID VIEW
   ══════════════════════════════════════════════════════════════ */

.compact-grid-panel {
    margin-bottom: 0.5rem;
}

.compact-disconnected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-line);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

#panel-sequencer.connected .compact-disconnected {
    display: none;
}

.compact-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--section-pad);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-line);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.compact-status-item {
    font-size: var(--status-font);
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 var(--status-pad);
}

.compact-status-mode {
    font-size: calc(var(--status-font) * 0.85);
    min-width: 4ch;
}

.compact-status-unit {
    font-size: 0.5em;
    font-weight: 400;
    color: var(--text-secondary);
}

.compact-transport-icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

.compact-track-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.compact-nav-btn {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: var(--grid-font);
    cursor: pointer;
    line-height: 1;
}

.compact-nav-btn:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
}

.compact-track-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    min-width: 5rem;
    text-align: center;
}

.compact-mode-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.compact-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--grid-gap);
    margin-bottom: 0.5rem;
}

.compact-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    border-radius: 3px;
    padding: var(--grid-cell-pad);
    min-height: 2rem;
    cursor: default;
    position: relative;
}

.compact-cell-num {
    font-size: 0.55rem;
    color: var(--text-secondary);
    line-height: 1;
}

.compact-cell-val {
    font-size: var(--grid-font);
    color: var(--text-primary);
    line-height: 1.2;
}

.compact-cell--on {
    background: var(--accent);
    color: var(--text-on-accent);
}

.compact-cell--on .compact-cell-num {
    color: var(--text-on-accent-dim);
}

.compact-cell--on .compact-cell-val {
    color: var(--text-on-accent);
}

.compact-cell--off {
    background: var(--surface-alt);
}

.compact-cell--inactive {
    background: transparent;
    opacity: 0.2;
}

.compact-cell--playhead {
    border: 2px solid var(--success);
}

.compact-track-info {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.compact-info-item {
    display: flex;
    gap: 0.25rem;
}

.compact-info-label {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE REFLOW
   Target: 360×502 minimum, smooth scaling up
   ══════════════════════════════════════════════════════════════ */

/* ── Medium: tablets and zoomed desktop (≤768px) ── */

@media (max-width: 768px) {
    :root {
        --grid-gap: 2px;
        --grid-cell-pad: 0.15rem;
        --grid-font: 0.6rem;
        --grid-label-font: 0.6rem;
        --status-font: 1.5rem;
        --status-pad: 0.35rem;
        --section-pad: 0.5rem 0.75rem;
        --tab-pad: 0.4rem 0.6rem;
        --tab-font: 0.8rem;
    }

    body {
        padding: 0.5rem;
    }

    /* Sequencer: remove hard min-width */
    .seq-grid {
        min-width: auto;
    }

    /* Banners: wrap */
    .update-banner:not([hidden]) {
        flex-wrap: wrap;
        font-size: 0.8rem;
        gap: 0.5rem;
    }
}

/* ── Small: large phones, narrow windows (≤640px) ── */

@media (max-width: 640px) {
    :root {
        --grid-gap: 1px;
        --grid-cell-pad: 0.1rem;
        --grid-font: 0.55rem;
        --grid-label-font: 0.55rem;
        --status-font: 1.2rem;
        --status-pad: 0.25rem;
        --section-pad: 0.35rem 0.5rem;
        --tab-pad: 0.35rem 0.5rem;
        --tab-font: 0.75rem;
    }

    /* Status: stack values */
    .status-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        justify-content: center;
    }

    .status-value {
        padding: var(--status-pad);
    }

    .status-value--mode {
        width: auto;
    }

    /* Connections: compact summary, hide individual slots */
    .connections-panel {
        overflow-x: auto;
    }

    .conn-table {
        font-size: 0.6rem;
    }

    .conn-slot {
        padding: 0.15rem 0.2rem;
    }

    /* Sequencer: show compact view, hide full grid + full status */
    .seq-grid-panel {
        display: none;
    }

    .status-display {
        display: none;
    }

    .compact-grid-panel {
        display: block !important;
    }

    /* Also compact the connections to a single line */
    .connections-panel {
        overflow-x: auto;
    }

    /* Color picker: wheel + swatches side by side, wheel capped by viewport */
    .picker-row {
        gap: 0.75rem;
        align-items: flex-start;
    }

    .picker-panel {
        flex-shrink: 1;
        width: auto;
    }

    .wheel-wrap canvas {
        width: 100%;
        height: 100%;
    }

    .info-panel {
        min-width: 100px;
        flex: 1;
    }

    /* Swatches: stacked vertically, compact */
    .swatch-pair {
        flex-direction: column;
        gap: 0.5rem;
    }

    .swatch-row {
        gap: 6px;
    }

    .color-swatch {
        width: 36px;
        height: 36px;
    }

    .swatch-info .swatch-label {
        font-size: 0.55rem;
    }

    .swatch-info .color-name {
        font-size: 0.8rem;
    }

    .swatch-info .rgb-val {
        font-size: 0.7rem;
    }

    .info-panel .pos-info {
        font-size: 0.7rem;
    }

    .info-panel .target-note {
        font-size: 0.65rem;
    }


    /* Pack select: stack vertically */
    .pack-select-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .pack-select-group {
        width: 100%;
    }

    .pack-select-group select {
        min-width: auto;
        width: 100%;
    }

    /* Pack buttons: full width */
    .pack-actions {
        flex-direction: column;
    }

    .pack-actions fluent-button {
        width: 100%;
    }

    /* Settings: selects full width */
    .page-settings-group select {
        max-width: none;
    }

    .connection-row {
        flex-direction: column;
        align-items: stretch;
    }

    .connection-row fluent-select {
        max-width: none;
    }

    .font-preview {
        max-width: 100%;
    }

    /* System version rows: wrap */
    .system-version-row {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .system-version-label {
        min-width: 6rem;
    }
}

/* ── Narrow: phones, 360px target (≤480px) ── */

@media (max-width: 480px) {
    :root {
        --grid-gap: 1px;
        --grid-cell-pad: 0.08rem;
        --grid-font: 0.5rem;
        --grid-label-font: 0.5rem;
        --status-font: 1rem;
        --status-pad: 0.2rem;
        --section-pad: 0.25rem 0.35rem;
        --tab-pad: 0.3rem 0.4rem;
        --tab-font: 0.7rem;
    }

    body {
        padding: 0.35rem;
    }

    fluent-tabs::part(tablist) {
        gap: 0.15rem;
    }

    /* Disconnected overlay: scale text */
    .disconnected-text {
        font-size: 1.2rem;
        letter-spacing: 0.08em;
    }

    .disconnected-hint {
        font-size: 0.7rem;
    }

    /* Status: compact */
    .status-display {
        min-height: 3rem;
    }

    /* Connections: scroll or collapse */
    .connections-panel {
        padding: 0.5rem;
    }

    .color-list {
        height: 200px;
    }

    .swatch-info .color-name {
        font-size: 0.9rem;
    }

    .swatch-info .rgb-val {
        font-size: 0.75rem;
    }

    /* Preview controls: stack */
    .preview-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Audio description tree: compact */
    .ad-tree {
        font-size: 0.8rem;
    }

    /* Sampler grid: voice label narrower */

    .sampler-voice-label {
        font-size: 0.75rem;
    }

    .sampler-speed-cell {
        font-size: 0.85rem;
        padding: 0.35rem;
    }

    .sampler-grid fluent-data-grid-cell[cell-type="columnheader"] {
        font-size: 0.6rem;
    }

    /* Lang packs intro: tighter */
    .lang-packs-intro {
        font-size: 0.8rem;
    }

    /* Sampler hint */
    .sampler-hint {
        font-size: 0.7rem;
    }

    /* Settings section: tighter margins */
    .settings-section {
        max-width: 100%;
    }

    .page-settings-group {
        margin-bottom: 1rem;
    }

    /* System rows: fully stacked */
    .system-version-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.4rem 0.5rem;
    }

    .system-version-label {
        min-width: auto;
        font-size: 0.8rem;
    }

    .system-version-value {
        font-size: 0.8rem;
    }

    /* Message feed: smaller */
    .message-feed {
        font-size: 0.7rem;
        max-height: 8rem;
    }

    /* Feed header */
    .feed-header {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* ── Ultra-narrow: 360px and below ── */

@media (max-width: 380px) {
    /* Tab bar: icon-like short labels */
    fluent-tab {
        padding: 0.25rem 0.35rem;
        font-size: 0.65rem;
    }

    /* Sampler grid: collapse to 2 speed columns if needed */

    .sampler-voice-label {
        font-size: 0.65rem;
    }

    .sampler-speed-cell {
        font-size: 0.75rem;
        padding: 0.25rem;
    }

    /* Color tree wrap: shorter */
    .color-target-tree-wrap {
        max-height: 150px;
    }
}

/* ══════════════════════════════════════════════════════════════
   HEIGHT BREAKPOINTS — for landscape phones and high zoom
   ══════════════════════════════════════════════════════════════ */

/* Short viewport: reduce vertical spacing */
@media (max-height: 600px) {
    :root {
        --status-font: 1.2rem;
        --section-pad: 0.35rem 0.5rem;
        --tab-pad: 0.3rem 0.6rem;
    }

    /* Only squish the tree when the layout has stacked it ABOVE the wheel
       (width ≤ 900). In wide+short (laptop landscape) it stays a sidebar
       and should match the wheel's vertical height. */
    @media (max-width: 900px) {
        .color-target-tree-wrap {
            max-height: 120px;
        }
    }

    .status-display {
        min-height: auto;
    }

    .message-feed {
        max-height: 6rem;
    }
}

/* Very short: landscape phone or extreme zoom */
@media (max-height: 450px) {
    :root {
        --status-font: 1rem;
        --section-pad: 0.25rem 0.35rem;
        --tab-pad: 0.25rem 0.5rem;
        --tab-font: 0.75rem;
    }

    @media (max-width: 900px) {
        .color-target-tree-wrap {
            max-height: 80px;
        }
    }

    .disconnected-text {
        font-size: 1rem;
    }

    .message-feed {
        max-height: 4rem;
    }
}

/* Combined: narrow AND short (high zoom) */
@media (max-width: 640px) and (max-height: 500px) {
    :root {
        --grid-gap: 1px;
        --grid-cell-pad: 0.06rem;
        --grid-font: 0.45rem;
        --status-font: 0.9rem;
    }

    .color-target-tree-wrap {
        max-height: 80px;
    }

    .swatch-pair {
        gap: 0.35rem;
    }

    .color-swatch {
        width: 28px;
        height: 28px;
    }
}