/*
 * Teskitty - landscape layout for the Tesla centre screen.
 * Large touch targets, no scrolling on the stage, no small text.
 */

:root {
  --led-off: #300707;
  --led-red: #ff1414;
  --led-orange: #ffa100;
  --bg: #050505;
  --panel: #0c0c0c;
  --line: #242424;
  --text: #cccccc;
  --muted: #777777;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Courier New", Courier, monospace;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.wrap {
  display: flex;
  height: 100%;
  gap: 0;
}

/* ── Left stage: the logo ─────────────────────────────────────── */

.stage {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 2vh 2vw;
  min-width: 0;
  border-right: 1px solid var(--line);
}

.logo-box {
  width: 100%;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tesla-mark {
  width: 100%;
  height: auto;
  max-height: 72vh;
  overflow: visible;
}

/* LED segments */
.led {
  fill: var(--led-off);
  transition: fill 40ms linear, opacity 40ms linear;
}

.led.dim {
  fill: #5a0a0a;
}

.led.on {
  fill: var(--led-red);
  filter: drop-shadow(0 0 2px var(--led-red)) drop-shadow(0 0 5px var(--led-red));
}

/* Listening: the model hears you, so the mark turns amber. */
.logo-box[data-state="listening"] .led.on {
  fill: var(--led-orange);
  filter: drop-shadow(0 0 2px var(--led-orange)) drop-shadow(0 0 5px var(--led-orange));
}

.logo-box[data-state="listening"] .led.dim {
  fill: #5a3800;
}

.logo-box[data-state="error"] .led.on,
.logo-box[data-state="error"] .led.dim {
  fill: #2a2a2a;
  filter: none;
}

.status {
  font-size: 2.1vh;
  letter-spacing: 0.28em;
  color: #b01010;
  text-transform: uppercase;
  text-align: center;
  min-height: 3vh;
}

/* ── Right panel: diagnostics ─────────────────────────────────── */

.panel {
  flex: 1 1 54%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  padding: 2.2vh 2vw;
  gap: 1.6vh;
  min-width: 0;
}

.panel-head {
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
}

.panel-head .title {
  font-size: 2.5vh;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: #e0e0e0;
}

.panel-head .sub {
  font-size: 1.7vh;
  color: var(--muted);
}

.phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.phases li {
  display: flex;
  align-items: center;
  gap: 1.4vw;
  padding: 1.1vh 1.2vw;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 4px;
  background: #101010;
}

.phases .num {
  font-size: 2.4vh;
  font-weight: bold;
  width: 1.4em;
  text-align: center;
  color: var(--muted);
  flex: 0 0 auto;
}

.phases .body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.phases .name {
  font-size: 2vh;
  color: #dddddd;
}

.phases .detail {
  font-size: 1.65vh;
  color: var(--muted);
  word-break: break-word;
}

/* Per-phase status colour, readable from the driver's seat. */
li[data-status="idle"] {
  border-left-color: #333333;
}

li[data-status="running"] {
  border-left-color: #cc9900;
}

li[data-status="running"] .num {
  color: #ffcc33;
}

li[data-status="ok"] {
  border-left-color: #17a417;
}

li[data-status="ok"] .num {
  color: #35d435;
}

li[data-status="warn"] {
  border-left-color: #cc7000;
}

li[data-status="warn"] .num {
  color: #ffa733;
}

li[data-status="fail"] {
  border-left-color: #c01414;
}

li[data-status="fail"] .num {
  color: #ff4040;
}

li[data-status="skip"] {
  border-left-color: #444444;
  opacity: 0.6;
}

/* ── Buttons: big enough to hit while seated ─────────────────── */

.controls {
  display: flex;
  gap: 1.2vw;
  flex-wrap: wrap;
}

button {
  flex: 1 1 auto;
  min-height: 7.5vh;
  min-width: 12vw;
  padding: 0 1.4vw;
  font-family: inherit;
  font-size: 2vh;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: #1e1e1e;
  border: 1px solid #444444;
  border-radius: 5px;
  cursor: pointer;
}

button.primary {
  background: #8c0000;
  border-color: #ff2020;
  box-shadow: 0 0 14px rgba(255, 20, 20, 0.28);
}

button:active {
  filter: brightness(1.35);
}

button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Log: newest first, the only scrollable area ─────────────── */

.log {
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 1.55vh;
  line-height: 1.5;
  color: #8a8a8a;
  background: #080808;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1vh 1vw;
  min-height: 8vh;
  word-break: break-word;
}

#echo-audio {
  display: none;
}

/* ── Login page ───────────────────────────────────────────────── */

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2vh 2vw;
}

.login-box {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  width: min(90vw, 460px);
  padding: 4vh 4vw;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(255, 20, 20, 0.12);
}

.login-head {
  display: flex;
  flex-direction: column;
  gap: 0.6vh;
  text-align: center;
}

.login-head .title {
  font-size: 4vh;
  font-weight: bold;
  letter-spacing: 0.3em;
  color: #ff1414;
}

.login-head .sub {
  font-size: 1.9vh;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

.login-box form {
  display: flex;
  flex-direction: column;
  gap: 1.6vh;
}

.login-box input {
  min-height: 7vh;
  padding: 0 1.4vw;
  font-family: inherit;
  font-size: 2.2vh;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: #1a1a1a;
  border: 1px solid #444444;
  border-radius: 5px;
}

.login-box input:focus {
  outline: none;
  border-color: #ff2020;
}

.login-note {
  display: none;
  font-size: 1.8vh;
  text-align: center;
  color: #ff4040;
}

.login-note.visible {
  display: block;
}

.login-hint {
  font-size: 1.6vh;
  text-align: center;
  color: var(--muted);
}

/* Portrait or narrow: stack instead of side by side. */
@media (max-aspect-ratio: 1/1) {
  .wrap {
    flex-direction: column;
  }

  .stage {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .tesla-mark {
    max-height: 30vh;
  }

  .logo-box {
    max-width: 34vh;
  }

  button {
    min-width: 26vw;
  }
}