/* Control panel styling modelled on the photo of the Match Time Controller keypad. */

:root {
  --bg: #1b1d22;
  --alu: #c9cbd0;
  --alu-dark: #9fa2a8;
  --keybed: #2b2c30;
  --key: #f3f3f5;
  --key-shadow: #8e9097;
  --home: #3aa87a;
  --home-dark: #24785a;
  --visitor: #f2d21a;
  --visitor-dark: #b59b0a;
  --clr: #e8552d;
  --clr-dark: #a63614;
  --enter: #3aa87a;
  --green-disp: #0e1f14;
  --green-text: #55ff7a;
  --text: #e9e9ec;
  --muted: #9a9ca3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #24262c;
  border-bottom: 1px solid #333;
  flex-wrap: wrap;
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 600; flex: 1; }
.topbar h1 small { color: var(--muted); font-weight: 400; margin-left: 8px; }
.topbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.topbar .actions button {
  background: #3a3d45; color: var(--text); border: 1px solid #555; border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.topbar .actions button:hover { background: #4b4e57; }
.topbar .actions .download {
  background: #2f6f9f; color: #fff; border: 1px solid #3f86bb; border-radius: 6px;
  padding: 6px 12px; font-size: 13px; text-decoration: none; display: inline-block;
}
.topbar .actions .download:hover { background: #3a7fb3; }

main { padding: 16px; max-width: 1240px; margin: 0 auto; }

.mode-group { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #555; }
.mode-group button { border: 0 !important; border-radius: 0 !important; border-right: 1px solid #555 !important; }
.mode-group button:last-child { border-right: 0 !important; }
body.tutor-active .mode-group { opacity: 0.5; pointer-events: none; }

/* ---------- tutorial panel ---------- */

.tutor {
  background: #1f2a1f;
  border: 1px solid #3f6b3f;
  border-left: 6px solid #55c56f;
  border-radius: 8px;
  padding: 12px 16px 14px;
  margin-bottom: 16px;
}
.tutor-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.tutor-mode { color: #8fe3a2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.tutor-clock { font-family: Menlo, Consolas, monospace; }
.tutor-speedlabel select { margin-left: 6px; background: #2a352a; color: var(--text); border: 1px solid #4a7a4a; border-radius: 4px; padding: 2px 4px; }
.tutor-spacer { flex: 1; }
.tutor-head button { background: #2f6f3a; color: #fff; border: 1px solid #4a9a5a; border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.tutor-head button:hover { background: #3a8a48; }
.tutor-head #tutor-exit { background: #3a3d45; border-color: #555; }
.tutor-head #tutor-hint { background: #8a5a1f; border-color: #c08a3a; }
.tutor-title { margin: 10px 0 4px; font-size: 18px; }
.tutor-task { margin: 0 0 6px; font-size: 16px; line-height: 1.45; }
.tutor-guide { margin: 0 0 6px; font-size: 15px; line-height: 1.45; color: #ffd28a; }
.tutor-feedback { margin: 0; min-height: 20px; font-size: 14px; }
.tutor-feedback.ok { color: #8fe3a2; font-weight: 700; }
.tutor-feedback.todo { color: #ffb347; }
.tutor-feedback.wait { color: var(--muted); font-style: italic; }

/* highlighted keys (tutorial) */
.key.hint { box-shadow: 0 0 0 3px #ffb347, 0 3px 0 var(--key-shadow), 0 4px 6px rgba(0,0,0,.45); }
.key.hint-next { box-shadow: 0 0 0 4px #ffd28a, 0 0 18px #ffb347, 0 3px 0 var(--key-shadow); animation: pulse 0.9s ease-in-out infinite alternate; }
@keyframes pulse {
  from { box-shadow: 0 0 0 3px #ffd28a, 0 0 6px #ffb347, 0 3px 0 var(--key-shadow); }
  to { box-shadow: 0 0 0 5px #ffd28a, 0 0 22px #ffb347, 0 3px 0 var(--key-shadow); }
}
.key.pressed { transform: translateY(2px); background: #ffd28a; }
.switch.hint .switch-track { box-shadow: 0 0 0 3px #ffb347, inset 0 2px 6px rgba(0,0,0,.8); }
.switch.hint-next .switch-track { box-shadow: 0 0 0 4px #ffd28a, 0 0 18px #ffb347, inset 0 2px 6px rgba(0,0,0,.8); animation: pulse-track 0.9s ease-in-out infinite alternate; }
@keyframes pulse-track {
  from { box-shadow: 0 0 0 3px #ffd28a, 0 0 6px #ffb347, inset 0 2px 6px rgba(0,0,0,.8); }
  to { box-shadow: 0 0 0 5px #ffd28a, 0 0 22px #ffb347, inset 0 2px 6px rgba(0,0,0,.8); }
}
.topbar .actions button.hint-next { box-shadow: 0 0 0 3px #ffd28a, 0 0 14px #ffb347; }

.pult-wrap { width: 100%; overflow: clip; } /* clip, not hidden: a focused key must not scroll the scaled panel sideways */

/* ---------- the panel ---------- */

.pult {
  transform-origin: top left;
  /* as wide as its content: that leaves exactly the same grey margin
     (padding) left and right, whatever the blocks measure */
  width: max-content;
  padding: 26px 46px 32px;
  background: linear-gradient(180deg, #d9dbdf 0%, var(--alu) 45%, #b4b7bd 100%);
  border: 8px solid var(--alu-dark);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #e8e9ec;
  user-select: none;
  color: #1a1a1a;
}

.title-strip {
  background: #fff;
  border: 3px solid #222;
  border-radius: 8px;
  text-align: center;
  font: italic 700 40px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  padding: 6px 0;
  color: #111;
  margin-bottom: 14px;
}

/* the app's input line: the original keypad has no display */
.console {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  grid-template-areas: "label prompt message" "label hint hint";
  gap: 12px;
  align-items: center;
  background: #1a2a3a;
  border: 3px solid #23262c;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
  min-height: 46px;
  color: #dbe9f6;
  font: 600 15px/1.3 "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
.console-label { grid-area: label; color: #7fa3c2; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.console-prompt { grid-area: prompt; color: #8fa9bf; }
.console-prompt.active { color: #ffd76a; }
.console-message { grid-area: message; color: #7dffa0; font-size: 14px; text-align: right; }
.console-hint { grid-area: hint; color: #ff9a6a; font-size: 13px; }
.console-hint:empty { display: none; }
.console-message:empty { display: none; }

.keys {
  display: flex;
  gap: 34px;
  align-items: flex-start;
}

/* keypad: 7 columns as on the photo (PROGRAM alone in the first column) */
.keypad {
  display: grid;
  grid-template-columns: repeat(7, 86px);
  grid-template-rows: repeat(4, 66px);
  gap: 10px;
  background: var(--keybed);
  border-radius: 10px;
  /* the same distance between the black bed and the keys all around */
  padding: 26px;
}
/* the number pad sits on the grey panel, not on a black bed (as on the photo) */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 74px);
  grid-template-rows: repeat(4, 66px);
  gap: 10px;
  /* top padding as in the key bed so both top rows line up */
  padding: 26px 0;
}


/* key positions on the keypad (row-column), no inline styles because of the CSP */
.pos-1-1 { grid-area: 1 / 1; }
.pos-1-2 { grid-area: 1 / 2; }
.pos-1-3 { grid-area: 1 / 3; }
.pos-1-4 { grid-area: 1 / 4; }
.pos-1-5 { grid-area: 1 / 5; }
.pos-1-6 { grid-area: 1 / 6; }
.pos-1-7 { grid-area: 1 / 7; }
.pos-2-1 { grid-area: 2 / 1; }
.pos-2-2 { grid-area: 2 / 2; }
.pos-2-3 { grid-area: 2 / 3; }
.pos-2-4 { grid-area: 2 / 4; }
.pos-2-5 { grid-area: 2 / 5; }
.pos-2-6 { grid-area: 2 / 6; }
.pos-2-7 { grid-area: 2 / 7; }
.pos-3-1 { grid-area: 3 / 1; }
.pos-3-2 { grid-area: 3 / 2; }
.pos-3-3 { grid-area: 3 / 3; }
.pos-3-4 { grid-area: 3 / 4; }
.pos-3-5 { grid-area: 3 / 5; }
.pos-3-6 { grid-area: 3 / 6; }
.pos-3-7 { grid-area: 3 / 7; }
.pos-4-1 { grid-area: 4 / 1; }
.pos-4-2 { grid-area: 4 / 2; }
.pos-4-3 { grid-area: 4 / 3; }
.pos-4-4 { grid-area: 4 / 4; }
.pos-4-5 { grid-area: 4 / 5; }
.pos-4-6 { grid-area: 4 / 6; }
.pos-4-7 { grid-area: 4 / 7; }

/* keys */
.key {
  appearance: none;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff, var(--key));
  color: #111;
  font: 800 12px/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 var(--key-shadow), 0 4px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: transform 40ms, box-shadow 40ms;
}
.key:active, .key.armed {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--key-shadow), 0 2px 3px rgba(0, 0, 0, 0.45);
}
.key.home { background: linear-gradient(180deg, #55c393, var(--home)); color: #fff; box-shadow: 0 3px 0 var(--home-dark), 0 4px 6px rgba(0,0,0,.5); }
.key.visitor { background: linear-gradient(180deg, #fbe459, var(--visitor)); color: #1a1a1a; box-shadow: 0 3px 0 var(--visitor-dark), 0 4px 6px rgba(0,0,0,.5); }
.key.clr { background: linear-gradient(180deg, #ff7a52, var(--clr)); color: #fff; box-shadow: 0 3px 0 var(--clr-dark), 0 4px 6px rgba(0,0,0,.5); }
.key.enter { background: linear-gradient(180deg, #55c393, var(--enter)); color: #fff; box-shadow: 0 3px 0 var(--home-dark), 0 4px 6px rgba(0,0,0,.5); }
.key.home:active { box-shadow: 0 1px 0 var(--home-dark); }
.key.visitor:active { box-shadow: 0 1px 0 var(--visitor-dark); }
.key.clr:active, .key.enter:active { box-shadow: 0 1px 0 #444; }
.key.num { font-size: 22px; }
.key.num small, .key.clr small { font-size: 9px; font-weight: 800; margin-top: 2px; }
.key.clr { font-size: 15px; }
.key.enter { font-size: 13px; }
.key.timekey b { font-size: 20px; font-weight: 800; }
.key.timekey small { font-size: 10px; font-weight: 700; margin-top: 2px; }

/* ---------- TIME IN switch, readout, horn ---------- */

.switchbox {
  display: grid;
  gap: 10px;
  justify-items: center;
  background: #3a3d45;
  border: 3px solid #23262c;
  border-radius: 10px;
  padding: 12px 10px;
  color: var(--text);
  min-width: 170px;
}
.switch-title { font: 800 14px/1 system-ui, sans-serif; letter-spacing: 0.15em; color: #ddd; text-align: center; }
.switch-title small { display: block; font-size: 10px; letter-spacing: 0.05em; color: #aaa; margin-top: 4px; font-weight: 600; }
.lamps { display: flex; gap: 14px; }
.lamp {
  width: 16px; height: 16px; border-radius: 50%;
  background: #4a1a1a; box-shadow: inset 0 0 3px #000;
}
.lamp.on { background: #ff3b2f; box-shadow: 0 0 10px #ff3b2f, 0 0 2px #fff inset; }
.switch {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: grid; justify-items: center; gap: 6px; color: var(--text); padding: 0;
}
.switch-track {
  display: block; width: 34px; height: 74px; border-radius: 17px;
  background: linear-gradient(180deg, #1c1e22, #2c2f36);
  border: 2px solid #111; position: relative;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8);
}
.switch-knob {
  position: absolute; left: 3px; width: 24px; height: 30px; border-radius: 7px;
  top: 3px; background: linear-gradient(180deg, #f2f2f4, #b9bcc2);
  box-shadow: 0 2px 3px rgba(0,0,0,.6); transition: top 120ms;
}
.switch.down .switch-knob { top: 37px; background: linear-gradient(180deg, #ffb3ad, #e0311f); }
.switch-state { font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.1em; color: #bbb; }
.switch.down .switch-state { color: #ff7a70; }

.readout { width: 100%; text-align: center; }
.readout-time {
  background: var(--green-disp);
  color: var(--green-text);
  font: 700 30px/1 "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  border-radius: 4px; padding: 8px 0;
  text-shadow: 0 0 8px rgba(85, 255, 122, 0.55);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9);
  border: 2px solid #23262c;
}
.readout-time.running { color: #7dffa0; }
.readout-time.pause { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 215, 106, 0.55); }
.readout-time.ended { color: #ff7a70; text-shadow: 0 0 8px rgba(255, 122, 112, 0.55); }
.readout-info { color: var(--muted); font-size: 11px; margin-top: 6px; }

.key.horn { flex-direction: row; gap: 6px; height: 40px; width: 100%; text-transform: none; font-size: 13px; }

/* ---------- below the panel ---------- */

.below {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}
.panel {
  background: #24262c;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 14px 16px;
}
.panel h2 { font-size: 14px; margin: 0 0 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.panel h3 { font-size: 14px; margin: 14px 0 6px; }
.board-preview-wrap #board-preview { width: 100%; }
.help { font-size: 14px; line-height: 1.5; }
.help ul { margin: 4px 0 10px; padding-left: 22px; }
.seq-table { border-collapse: collapse; font-size: 13px; width: 100%; }
.seq-table th { text-align: left; vertical-align: top; padding: 5px 14px 5px 0; white-space: nowrap; color: #ffd28a; font-weight: 600; border-bottom: 1px solid #333; }
.seq-table td { padding: 5px 0; border-bottom: 1px solid #333; }
.keys-table { border-collapse: collapse; font-size: 13px; }
.keys-table td { padding: 3px 14px 3px 0; border-bottom: 1px solid #333; }
.keys-table td:first-child { font-family: Menlo, Consolas, monospace; color: #ffd28a; }