/* SPDX-License-Identifier: GPL-3.0-only
 * Copyright (C) 2026 weavejam
 * The plugin page's frame (tutti.js layout): the bar, the device's stage, the companion panel (panel.js), the footer;
 * colours after the workbench's (sdk/Update.html.in). Never a page scrollbar: the panel scrolls on its own, unseen. */
:root { color-scheme: dark; --accent: #a9efd7; --muted: #93a1a7; --line: #303e45; background: #10171c; color: #e5ebee;
        font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #10171c; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
main { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
button, input, select { font: inherit; }
button { border: 1px solid #3b4b54; border-radius: 6px; padding: 4px 10px; margin: 0; cursor: pointer; background: #223039; color: #d6e3e6; }
button:hover { background: #2d414a; border-color: #708f97; }
button.primary { background: var(--accent); color: #15372b; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: #d0fbe9; }
button:disabled { opacity: .4; cursor: default; }
button[aria-pressed=true] { border-color: #86c6ac; color: #c7f9e4; background: #294a3c; }
select, input[type=text], input:not([type]) { background: #101b22; border: 1px solid #3d545e; border-radius: 6px; color: #d9e7eb; padding: 3px 6px; min-width: 0; }
a { color: #9ec9b6; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the bar */
.tt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.tt-name { font-size: 15px; letter-spacing: .02em; color: #eef5f1; }
.tt-bar label { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); white-space: nowrap; }
.tt-vol input { width: 90px; accent-color: var(--accent); }
.tt-check input { accent-color: var(--accent); }
.tt-bar progress { width: 90px; height: 8px; accent-color: var(--accent); }
.tt-note { flex: 1 1 160px; min-width: 0; color: #adc9bf; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-note:empty { display: none; }

/* the stage and the panel */
.tt-body { display: flex; min-height: 0; min-width: 0; padding: 14px; gap: 14px; }
html.tt-tall .tt-body { flex-direction: column; }
.tt-stage { flex: 1 1 auto; display: grid; place-items: center; min-width: 0; min-height: 0; }
html.tt-tall .tt-stage { flex: none; }
.sim-device { min-width: 0 !important; flex: none; }
.tt-side { flex: none; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
           display: flex; flex-direction: column; gap: 10px; }
.tt-side::-webkit-scrollbar { display: none; }
html.tt-tall .tt-side { flex: 1 1 auto; }
html.tt-compact .tt-side { display: none; }
@media (max-width: 599px) { .tt-body { padding: 8px; gap: 8px; } .tt-bar { padding: 4px 8px; gap: 4px 6px; } .tt-vol input { width: 64px; } }

.tt-side section, .tt-more { border: 1px solid var(--line); border-radius: 8px; background: #192329; padding: 8px 10px; }
.tt-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 4px 0; }
.tt-row label { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; }
.tt-row select { max-width: 100%; }
.tt-project small { color: #8ea99e; font-size: 11px; }
.tt-project strong { font-size: 16px; color: #edf5f0; letter-spacing: .04em; }
.tt-project span { color: #8daba1; font-size: 11px; }
#tt-factory { flex: 1 1 160px; }
.tt-lanes { display: grid; grid-template-rows: repeat(8, auto); gap: 3px; }
.tt-lane { display: grid; grid-template-columns: 26px 62px 34px minmax(30px, 54px) minmax(0, 1fr); gap: 8px; align-items: center;
           padding: 3px 6px; text-align: left; background: #1c2821; border-color: #2f4136; border-radius: 6px; font-size: 12px; }
.tt-lane.sel { border-color: #9bc9a7; background: #314b3a; }
.tt-num { color: #80958a; font-size: 11px; }
.tt-eng { font-weight: 600; white-space: nowrap; overflow: hidden; }
.tt-flags { display: flex; gap: 2px; }
.tt-flags i { font-style: normal; font-size: 10px; padding: 0 3px; border-radius: 3px; background: #2a3a31; color: #5f7468; }
.tt-lane.muted .m { background: #b5523f; color: #fff; }
.tt-lane.solo .s { background: #c9b14a; color: #1d1d1f; }
.tt-lane.muted .tt-steps { opacity: .4; }
.tt-meter { height: 5px; border-radius: 3px; background: #2a3a31; overflow: hidden; }
.tt-meter i { display: block; height: 100%; width: 0; background: #81ba8f; }
.tt-steps { display: grid; grid-template-columns: repeat(64, minmax(0, 1fr)); gap: 1px; min-width: 0; }
.tt-steps i { height: 10px; background: #2c3f33; border-radius: 1px; }
.tt-steps i:nth-child(16n+1) { margin-left: 2px; }
.tt-steps i.on { background: #81ba8f; }
.tt-steps i.play { background: #eced9a; }
.tt-steps i.outside { visibility: hidden; }
.tt-pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.tt-pages button { font-size: 11px; padding: 5px 3px; white-space: normal; line-height: 1.25; }
.tt-more summary { cursor: pointer; color: #b6ced0; font-size: 12px; }
.tt-help { font-size: 11px; color: #92a69a; margin: 4px 0; }
.tt-file input { max-width: 220px; font-size: 11px; }

.tt-foot { padding: 3px 12px 5px; font-size: 11px; line-height: 1.45; color: #7f979f; border-top: 1px solid var(--line); }
@media (max-width: 599px) { .tt-foot { font-size: 10px; padding: 2px 8px 3px; } }

/* headless (mode render): only a note */
html.tt-headless .tt-body, html.tt-headless #tt-play, html.tt-headless #tt-tap, html.tt-headless #tt-panic,
html.tt-headless .tt-vol, html.tt-headless #tt-audio { display: none !important; }