/* ═══════════════════════════════════════════
   TrainControl — Base Styles
   ═══════════════════════════════════════════ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-app);
    color: var(--text-primary);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Typography ── */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; }

p { line-height: 1.5; }

/* ── Focus rings ── */
:focus-visible {
    outline: 2px solid var(--tc-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.20); }

/* ── Inputs ── */
input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.93rem;
    font-family: var(--font-sans);
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
input:focus {
    border-color: var(--tc-blue);
    box-shadow: 0 0 0 3px rgba(67,89,144,0.12);
    outline: none;
}

/* ── Utility ── */
[hidden] { display: none !important; }

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