/* Brake Release Precision Trainer Styles */

#brake-trainer-app {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.trainer-intro, .trainer-calibration, .trainer-exercise, .trainer-results {
    text-align: center;
}

button {
    background-color: #007cba;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #005a87;
}

#brake-graph {
    border: 1px solid #ccc;
    margin: 20px auto;
    display: block;
}

#countdown {
    font-size: 48px;
    font-weight: bold;
    margin: 20px;
}

#score-display {
    font-size: 24px;
    margin: 20px;
}

/* Detection bar */
#detection-area {
    margin: 10px auto;
    max-width: 600px;
}
#detection-bar {
    width: 100%;
    height: 18px;
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 0;
}
#detection-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,#4caf50,#8bc34a);
}

.cal-buttons button { margin: 6px; }

#detection-confirm { text-align: center; margin-top: 8px; }
#detection-confirm button { margin: 6px; }

#calibration-controls { border-top: 1px solid #ddd; margin-top: 12px; padding-top: 12px; }
#calibration-controls input[type="number"] { width: 80px; margin-left: 8px; }

/* Audio mode controls */
.audio-modes { display:none; }

/* Results email area */
.email-result { margin-top: 12px; text-align: left; }
.email-result input[type="email"] { width: 260px; }

/* Device list styles */
#device-list { background:#fafafa; border-radius:4px; }
.device-row { padding:8px; display:flex; gap:12px; align-items:center; }
.device-row .icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; background:#fff; border:1px solid #eee; margin-right:8px; }
.device-row .icon.hid { background:linear-gradient(180deg,#e3f2fd,#bbdefb); }
.device-row .icon.gamepad { background:linear-gradient(180deg,#f1f8e9,#dcedc8); }
.device-row button { flex: 0 0 auto; }
.device-row:focus { outline: 2px solid #80d8ff; }

.device-meta { font-size:12px; color:#666; }
.device-hint { font-size:12px; color:#444; margin-top:6px; }

.tooltip { position:relative; }
.tooltip:hover::after { content: attr(data-tip); position:absolute; left:0; top:100%; background:#222; color:#fff; padding:6px 8px; border-radius:4px; white-space:nowrap; margin-top:6px; font-size:12px; }

/* Debug log */
#debug-area h5 { margin:6px 0 4px 0; font-size:14px; }
#debug-log { background:#0b0b0b; color:#dcdcdc; padding:8px; border-radius:4px; font-family: monospace; font-size:12px; }
.log-entry { margin-bottom:6px; }
.log-entry .ts { color:#999; margin-right:8px; }
.log-entry.info { color:#bde0fe; }
.log-entry.warn { color:#ffd580; }
.log-entry.error { color:#ff9b9b; }