/* On-screen touch controls (static/touch_controls/). Used over the stream
   (.tc-stream) and in the settings screen's layout preview (.tc-preview). */

.tc-stream {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tc-stream [hidden],
.tc-stream[hidden],
.tc-settings [hidden] {
    display: none !important;
}

.tc-stream .tc-root {
    position: absolute;
    inset: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.tc-root {
    --tc-opacity: 0.6;
    --tc-fg: #fff;
    --tc-bg: rgba(20, 22, 28, 0.55);
    --tc-bg-pressed: rgba(255, 255, 255, 0.42);
    --tc-border: rgba(255, 255, 255, 0.55);
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.tc-root.tc-root-hidden .tc-layer {
    display: none;
}

.tc-layer {
    position: absolute;
    inset: 0;
    opacity: var(--tc-opacity);
}

.tc-module {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: none;
    color: var(--tc-fg);
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.tc-no-labels .tc-label,
.tc-no-labels .tc-rect-label,
.tc-no-labels .tc-stick-knob,
.tc-no-labels .tc-face-button,
.tc-no-labels .tc-dpad-arm {
    color: transparent !important;
}

/* ---- buttons */

.tc-button,
.tc-motion,
.tc-trigger {
    background: var(--tc-bg);
    border: 2px solid var(--tc-accent, var(--tc-border));
    font-size: calc(var(--tc-size) * 0.34 * var(--tc-label-scale, 1));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background-color 60ms, transform 60ms;
}

.tc-button .tc-label,
.tc-motion .tc-label,
.tc-trigger .tc-label {
    position: relative;
    color: var(--tc-accent, var(--tc-fg));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 92%;
    text-align: center;
}

.tc-shape-circle { border-radius: 50%; }
.tc-shape-pill { border-radius: 999px; font-size: calc(var(--tc-size) * 0.3 * var(--tc-label-scale, 1)); }
.tc-shape-square { border-radius: 18%; }
.tc-shape-pedal { border-radius: 14px; font-size: calc(var(--tc-size) * 0.15 * var(--tc-label-scale, 1)); }

.tc-module.tc-pressed,
.tc-dpad-arm.tc-pressed,
.tc-face-button.tc-pressed {
    background: var(--tc-bg-pressed);
    transform: scale(0.94);
}

.tc-button.tc-toggle.tc-pressed {
    box-shadow: 0 0 0 3px var(--tc-accent, #58a6ff), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.tc-trigger {
    overflow: hidden;
}

.tc-trigger-fill {
    position: absolute;
    inset: 0;
    background: var(--tc-accent, rgba(255, 255, 255, 0.45));
    opacity: 0.45;
    transform: scaleY(0);
    transform-origin: bottom;
}

/* ---- sticks */

.tc-stick {
    border-radius: 50%;
}

.tc-stick.tc-floating {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
}

.tc-stick-base {
    width: var(--tc-size);
    height: var(--tc-size);
    border-radius: 50%;
    background: var(--tc-bg);
    border: 2px solid var(--tc-border);
    box-shadow: inset 0 0 calc(var(--tc-size) * 0.12) rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tc-stick-knob {
    width: 46%;
    height: 46%;
    border-radius: 50%;
    background: rgba(235, 238, 245, 0.85);
    color: #1a1d24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--tc-size) * 0.14);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.tc-stick.tc-pressed {
    transform: none;
    background: transparent;
}

/* ---- d-pad */

.tc-dpad {
    border-radius: 50%;
}

.tc-dpad-arm {
    position: absolute;
    width: 34%;
    height: 34%;
    background: var(--tc-bg);
    border: 2px solid var(--tc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--tc-size) * 0.12);
    box-sizing: border-box;
}

.tc-dpad-up { top: 0; left: 33%; border-radius: 8px 8px 0 0; border-bottom: none; }
.tc-dpad-down { bottom: 0; left: 33%; border-radius: 0 0 8px 8px; border-top: none; }
.tc-dpad-left { left: 0; top: 33%; border-radius: 8px 0 0 8px; border-right: none; }
.tc-dpad-right { right: 0; top: 33%; border-radius: 0 8px 8px 0; border-left: none; }

.tc-dpad-hub {
    position: absolute;
    left: 33%;
    top: 33%;
    width: 34%;
    height: 34%;
    background: var(--tc-bg);
}

/* ---- face buttons */

.tc-face-button {
    position: absolute;
    width: 36%;
    height: 36%;
    border-radius: 50%;
    background: var(--tc-bg);
    border: 2px solid var(--tc-accent, var(--tc-border));
    color: var(--tc-accent, var(--tc-fg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--tc-size) * 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background-color 60ms, transform 60ms;
}

.tc-face-top { top: 0; left: 32%; }
.tc-face-bottom { bottom: 0; left: 32%; }
.tc-face-left { left: 0; top: 32%; }
.tc-face-right { right: 0; top: 32%; }

/* ---- pads */

.tc-rect {
    border-radius: 18px;
    border: 2px dashed rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.03);
    align-items: flex-start;
    justify-content: flex-start;
}

.tc-rect.tc-pressed {
    background: rgba(255, 255, 255, 0.07);
    transform: none;
}

.tc-rect-label {
    margin: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.tc-pointer-dot {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(88, 166, 255, 0.6);
    box-shadow: 0 0 8px rgba(88, 166, 255, 0.9);
    pointer-events: none;
}

/* ---- editing */

.tc-editing .tc-layer {
    opacity: 1;
}

.tc-editing .tc-module {
    outline: 1px dashed rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
    cursor: move;
}

.tc-editing .tc-module * {
    pointer-events: none;
}

.tc-editing .tc-module.tc-selected {
    outline: 2px solid #58a6ff;
    outline-offset: 3px;
    z-index: 5;
}

.tc-editing .tc-hidden-module {
    opacity: 0.3;
}

.tc-editing::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(88, 166, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 166, 255, 0.12) 1px, transparent 1px);
    background-size: 5% 10%;
    pointer-events: none;
}

.tc-resize-handle {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #58a6ff;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    touch-action: none;
    z-index: 10;
    cursor: nwse-resize;
}

/* ---- controls bar over the stream */

.tc-bar {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    pointer-events: auto;
    opacity: 0.75;
}

.tc-bar-btn {
    height: 28px;
    min-width: 28px;
    padding: 0 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(12, 14, 20, 0.7);
    color: #fff;
    font: 600 12px system-ui, -apple-system, "Segoe UI", sans-serif;
    white-space: nowrap;
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
}

.tc-stream-hidden .tc-bar {
    left: auto;
    right: calc(env(safe-area-inset-right, 0px) + 8px);
    transform: none;
}

.tc-menu {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 38px);
    left: 50%;
    transform: translateX(-50%);
    width: min(360px, 92vw);
    max-height: 78vh;
    overflow-y: auto;
    padding: 10px;
    border-radius: 12px;
    background: rgba(16, 18, 26, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e8ecf3;
    pointer-events: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    font: 14px system-ui, -apple-system, "Segoe UI", sans-serif;
}

.tc-menu-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
}

.tc-menu-item.tc-menu-on {
    background: rgba(88, 166, 255, 0.22);
    font-weight: 600;
}

.tc-menu-sep {
    margin: 8px 10px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8b95a7;
}

.tc-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}

.tc-menu-row span {
    width: 64px;
}

.tc-menu-row input {
    flex: 1;
}

.tc-menu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 4px 2px;
}

.tc-toast {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 40px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 18px;
    background: rgba(12, 14, 20, 0.85);
    color: #fff;
    font: 600 13px system-ui, -apple-system, "Segoe UI", sans-serif;
    white-space: nowrap;
    transition: opacity 400ms;
}

.tc-toast-out {
    opacity: 0;
}

/* ---- edit dock over the stream */

.tc-dock {
    position: absolute;
    top: env(safe-area-inset-top, 0);
    bottom: env(safe-area-inset-bottom, 0);
    right: env(safe-area-inset-right, 0);
    width: min(340px, 42vw);
    display: flex;
    flex-direction: column;
    background: rgba(16, 18, 26, 0.93);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8ecf3;
    pointer-events: auto;
    font: 13px system-ui, -apple-system, "Segoe UI", sans-serif;
    z-index: 20;
}

.tc-dock.tc-dock-left {
    right: auto;
    left: env(safe-area-inset-left, 0);
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.tc-dock.tc-dock-folded {
    bottom: auto;
}

.tc-dock.tc-dock-folded .tc-editor-panel {
    display: none;
}

.tc-dock-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tc-dock-head strong {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-dock .tc-editor-panel {
    flex: 1;
    min-height: 0;
}

@media (orientation: portrait) {
    .tc-dock,
    .tc-dock.tc-dock-left {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 48vh;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .tc-dock.tc-dock-left {
        top: 0;
        bottom: auto;
    }
    .tc-dock.tc-dock-folded {
        height: auto;
    }
}

/* ---- editor panel (dock and settings) */

.tc-editor-panel {
    display: flex;
    flex-direction: column;
}

.tc-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
}

.tc-tab-body {
    overflow-y: auto;
    padding: 4px 10px 12px;
    flex: 1;
    min-height: 0;
}

.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 7px;
    border: 1px solid rgba(127, 140, 160, 0.55);
    background: rgba(127, 140, 160, 0.16);
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.tc-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.tc-btn.tc-tab-on,
.tc-btn.tc-primary {
    background: #2f81f7;
    border-color: #2f81f7;
    color: #fff;
}

.tc-btn.tc-danger {
    border-color: rgba(248, 81, 73, 0.7);
    color: #f85149;
}

.tc-tab {
    flex: 1;
}

.tc-dock .tc-field {
    grid-template-columns: minmax(0, 1fr);
}

.tc-dock .tc-field input[type="checkbox"] {
    justify-self: start;
}

.tc-field {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    align-items: center;
    gap: 2px 10px;
    padding: 6px 0;
}

.tc-field-label {
    font-weight: 600;
}

.tc-field-hint {
    grid-column: 1 / -1;
    opacity: 0.72;
    font-size: 11.5px;
}

.tc-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-range input {
    flex: 1;
    min-width: 0;
}

.tc-range-value {
    min-width: 3.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tc-text,
.tc-select {
    min-width: 0;
    width: 100%;
    padding: 5px 6px;
    border-radius: 6px;
    font: inherit;
}

.tc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tc-chip {
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(127, 140, 160, 0.55);
    background: transparent;
    color: inherit;
    font: 600 11px system-ui, -apple-system, "Segoe UI", sans-serif;
}

.tc-chip.tc-chip-on {
    background: #2f81f7;
    border-color: #2f81f7;
    color: #fff;
}

.tc-color {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    align-items: center;
}

.tc-group {
    margin: 12px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.tc-palette {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.tc-palette-item {
    justify-content: flex-start;
    text-align: left;
}

.tc-inspector-title {
    margin: 6px 0;
}

.tc-empty,
.tc-hint {
    opacity: 0.75;
    font-size: 12px;
}

.tc-warn {
    color: #e3b341;
    font-size: 12px;
}

/* ---- settings screen */

.tc-settings {
    padding-bottom: 8px;
}

.tc-prefs,
.tc-systems,
.tc-layouts {
    padding: 0 8px;
}

.tc-subhead {
    margin: 14px 8px 4px;
}

.tc-system-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2px 18px;
    padding: 6px 0;
}

.tc-system-row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.tc-system-name {
    font-size: 0.9rem;
}

.tc-shapes .tc-field-label {
    margin-right: 4px;
}

.tc-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px;
    align-items: flex-start;
}

.tc-preview-wrap {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.tc-preview {
    position: relative;
    width: 100%;
    max-height: 70vh;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(80, 110, 160, 0.55), rgba(10, 14, 22, 0.95) 70%),
        #0b0f16;
    border: 6px solid #111;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.tc-preview.tc-preview-portrait {
    width: auto;
    height: 70vh;
}

.tc-editor .tc-editor-panel {
    flex: 1 1 300px;
    max-width: 420px;
    max-height: 72vh;
    border-radius: 10px;
    border: 1px solid rgba(127, 180, 234, 0.6);
    background: rgba(255, 255, 255, 0.55);
}

.tc-editor .tc-tab-body {
    flex: none;
    max-height: 62vh;
}

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

/* windows7.css styles every button with !important; over the stream the
   touch controls' own look wins. Each class sets these variables. */
.tc-stream button,
.tc-stream button:hover:not(:disabled) {
    background: var(--tcb-bg, rgba(127, 140, 160, 0.16)) !important;
    background-image: none !important;
    border: var(--tcb-border, 1px solid rgba(127, 140, 160, 0.55)) !important;
    border-radius: var(--tcb-radius, 7px) !important;
    box-shadow: none !important;
    color: var(--tcb-fg, #e8ecf3) !important;
    text-shadow: none !important;
    padding: var(--tcb-pad, 6px 11px) !important;
    font-weight: 600 !important;
    transform: none !important;
}

.tc-stream button:disabled {
    opacity: 0.4;
}

.tc-stream .tc-bar-btn {
    --tcb-bg: rgba(12, 14, 20, 0.7);
    --tcb-border: 1px solid rgba(255, 255, 255, 0.35);
    --tcb-radius: 14px;
    --tcb-pad: 0 10px;
    --tcb-fg: #fff;
}

.tc-stream .tc-menu-item {
    --tcb-bg: transparent;
    --tcb-border: none;
    --tcb-radius: 8px;
    --tcb-pad: 9px 10px;
}

.tc-stream .tc-menu-item.tc-menu-on {
    --tcb-bg: rgba(88, 166, 255, 0.22);
}

.tc-stream .tc-btn.tc-primary,
.tc-stream .tc-btn.tc-tab-on,
.tc-stream .tc-chip.tc-chip-on {
    --tcb-bg: #2f81f7;
    --tcb-border: 1px solid #2f81f7;
    --tcb-fg: #fff;
}

.tc-stream .tc-btn.tc-danger {
    --tcb-border: 1px solid rgba(248, 81, 73, 0.7);
    --tcb-fg: #f85149;
}

.tc-stream .tc-chip {
    --tcb-bg: transparent;
    --tcb-radius: 999px;
    --tcb-pad: 3px 7px;
}

.tc-menu,
.tc-dock .tc-tab-body {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.tc-menu-row input[type="range"] {
    min-width: 0;
}