* { margin: 0; padding: 0; box-sizing: border-box; }
[v-cloak] { display: none; }

/* ============ THEMES ============ */
:root {
  /* dark: night station board */
  --bg: #100f0d;
  --ink: #ece5d6;
  --dim: #8a8272;
  --line: rgba(236, 229, 214, .14);
  --panel: rgba(236, 229, 214, .04);
  --flap: #191713;
  --flap-ink: #f2ecdd;
  --flap-line: rgba(242, 236, 221, .12);
  --up: #4cd98a;
  --warn: #eab308;
  --down: #ff6b52;
  --accent: #ffb020;
  --display: "Big Shoulders Display", sans-serif;
  --mono: "Sometype Mono", Consolas, monospace;
}
html[data-theme="light"] {
  /* light: paper timetable — flap chips stay dark like a real board */
  --bg: #ede6d8;
  --ink: #201d16;
  --dim: #7c7461;
  --line: rgba(32, 29, 22, .18);
  --panel: rgba(32, 29, 22, .035);
  --up: #14804a;
  --warn: #a16207;
  --down: #c2410c;
  --accent: #b45309;
}

html { background: var(--bg); }

body {
  font-family: var(--mono);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  padding: 18px 16px 12px;
  transition: background .4s, color .4s;
}

/* paper grain */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.48 0 0 0 0 0.42 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ HEADER ============ */
header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mark {
  font-family: var(--display); font-weight: 900; font-size: 1.7rem; letter-spacing: 1px;
  line-height: .9;
}
.sub { color: var(--dim); font-size: .55rem; letter-spacing: 2.5px; margin-top: 4px; }

.controls { display: flex; gap: 8px; align-items: center; }
.controls button {
  background: none; border: 1px solid var(--line); color: var(--dim);
  width: 32px; height: 32px; cursor: pointer; font-size: .95rem;
}
.controls button:hover { color: var(--ink); border-color: var(--ink); }

.pill {
  font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: 2px;
  padding: 8px 11px; border: 1px solid var(--line); display: flex; gap: 7px; align-items: center;
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.online { color: var(--up); border-color: var(--up); }
.pill.online i { animation: blink 1.6s infinite; }
.pill.offline { color: var(--down); border-color: var(--down); }
@keyframes blink { 50% { opacity: .2; } }

/* ============ CLOCK ============ */
.clockstrip {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  margin: 14px 0 16px; padding: 8px 0 10px;
}
.clockwrap { display: flex; align-items: baseline; gap: 8px; }
#clock {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.2rem, 14vw, 5.5rem); line-height: 1; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
#ampm {
  font-family: var(--display); font-weight: 900; font-size: 1.1rem; letter-spacing: 2px;
  color: var(--bg); background: var(--ink); padding: 3px 8px;
}
.clockmeta { text-align: right; display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
#date { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; }
.meta-dim { color: var(--dim); font-size: .56rem; letter-spacing: 1.5px; }
.meta-dim b { color: var(--ink); font-weight: 600; }

/* ============ ALERT ============ */
.alert {
  display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px; padding: 10px 12px;
  border: 1px solid var(--down); color: var(--down); font-size: .7rem;
  animation: rise .4s both;
}
.alert b { font-family: var(--display); letter-spacing: 2px; font-size: .8rem; }
.alert span { color: var(--ink); }
.alert button {
  margin-left: auto; background: none; border: 1px solid var(--line); color: var(--dim);
  font-family: var(--mono); font-size: .55rem; letter-spacing: 1px; padding: 4px 8px; cursor: pointer;
}
.hidden { display: none !important; }

/* ============ SECTIONS ============ */
.sechead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
h2 { font-family: var(--display); font-weight: 900; font-size: 1.05rem; letter-spacing: 2px; }
.secnote { color: var(--dim); font-size: .55rem; letter-spacing: 1.5px; }
section { margin-bottom: 22px; }

/* ============ DEPARTURES BOARD ============ */
.board { border: 1px solid var(--line); background: var(--panel); }
.board-cols, .row {
  display: grid; grid-template-columns: 1fr 86px 64px 56px; gap: 8px; align-items: center;
  padding: 9px 12px;
}
.board-cols {
  color: var(--dim); font-size: .52rem; letter-spacing: 2px;
  border-bottom: 1px solid var(--line);
}
.board-cols span:not(:first-child), .row > *:not(.dest) { text-align: right; }

.row { border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }

.dest {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: 1.5px;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.dest span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest .del {
  background: none; border: none; color: var(--dim); cursor: pointer; font-size: .7rem;
  opacity: 0; transition: opacity .2s;
}
.row:hover .del, .row:active .del { opacity: 1; }

/* split-flap chip: always dark, both themes — physical flaps are black */
.flap {
  font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: 1.5px;
  background: var(--flap); color: var(--flap-ink);
  border: 1px solid var(--flap-line); border-radius: 3px;
  padding: 5px 0; text-align: center; position: relative; overflow: hidden;
  transform-origin: 50% 0;
}
.flap::after { /* flap hinge line */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid rgba(0,0,0,.55);
}
/* flap text: fixed bright colors — chip bg is always dark, theme vars go dark in light mode */
.flap.up   { color: #4cd98a; }
.flap.down { color: #ff8f79; background: #2a120c; border-color: rgba(255,107,82,.4); }
.flap.unknown { color: #9a9282; }
.flap.flip { animation: flip .45s cubic-bezier(.3,.9,.4,1); }
@keyframes flip {
  0% { transform: rotateX(90deg); filter: brightness(1.6); }
  100% { transform: rotateX(0); filter: none; }
}

.ms, .ssl { font-size: .68rem; font-variant-numeric: tabular-nums; }
.ms b, .ssl b { font-weight: 600; }
.ssl.warn { color: var(--warn); font-weight: 700; }
.ssl.bad { color: var(--down); font-weight: 700; }

.addrow {
  width: 100%; margin-top: 6px; padding: 8px; cursor: pointer;
  background: none; border: 1px dashed var(--line); color: var(--dim);
  font-family: var(--mono); font-size: .6rem; letter-spacing: 2px;
}
.addrow:hover { color: var(--ink); border-color: var(--ink); }

/* ============ WORKBENCH + FLIGHT LOG ============ */
.repostate { display: flex; gap: 8px; justify-content: flex-end; font-size: .58rem; letter-spacing: .5px; }
.repostate b { font-weight: 600; color: var(--dim); }
.warntxt { color: var(--warn) !important; }
.oktxt { color: var(--up) !important; }

.copybtn {
  background: none; border: 1px solid var(--line); color: var(--dim); cursor: pointer;
  font-family: var(--mono); font-size: .55rem; letter-spacing: 2px; padding: 5px 10px;
}
.copybtn:hover { color: var(--ink); border-color: var(--ink); }

.gist {
  border: 1px solid var(--line); background: var(--panel);
  padding: 12px 14px; font-size: .64rem; line-height: 2; letter-spacing: .5px;
  white-space: pre-wrap;
}

/* night dim: kiosk should not be a floodlight at 2am; desktop mouse-move restores */
body.dim { filter: brightness(.75); transition: filter .8s; }
body.dim:hover { filter: none; }

/* ============ CODING TIMER ============ */
.timerbox {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border: 1px solid var(--line); background: var(--panel); padding: 14px 12px;
}
.timer-left { display: flex; flex-direction: column; gap: 8px; flex: 1; max-width: 200px; }
#project {
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: .75rem; letter-spacing: 1px; padding: 9px 10px;
  text-transform: uppercase; outline: none;
}
#project:focus { border-color: var(--ink); }
#timer-btn {
  font-family: var(--display); font-weight: 900; letter-spacing: 3px; font-size: .85rem;
  border: none; padding: 10px; cursor: pointer;
}
#timer-btn.start { background: var(--ink); color: var(--bg); }
#timer-btn.stop  { background: var(--down); color: #fff; }
.timer-right { text-align: right; }
#elapsed {
  font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1; font-variant-numeric: tabular-nums;
}
#elapsed.live { color: var(--up); }
.weekstats { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.weekstats span { color: var(--dim); font-size: .58rem; letter-spacing: 1px; }
.weekstats b { color: var(--ink); font-weight: 600; }

/* ============ MACHINE ============ */
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
@media (min-width: 700px) { .meters { grid-template-columns: repeat(4, 1fr); } }

.meter { display: flex; align-items: center; gap: 8px; font-size: .62rem; }
.meter span { color: var(--dim); letter-spacing: 1px; width: 34px; }
.meter b { font-variant-numeric: tabular-nums; font-weight: 600; width: 38px; text-align: right; }
.track { flex: 1; height: 8px; background: var(--panel); border: 1px solid var(--line); }
.track i { display: block; height: 100%; width: 0; background: var(--up); transition: width .6s, background .6s; }
.track i.warn { background: var(--warn); }
.track i.bad { background: var(--down); }

.netline {
  display: flex; gap: 18px; align-items: center; margin: 12px 0 8px;
  color: var(--dim); font-size: .62rem; letter-spacing: 1px;
}
.netline b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.legend { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: .52rem; }
.legend i { width: 14px; height: 2px; display: inline-block; margin-right: 4px; }
.lg-cpu { background: var(--accent); }
.lg-ram { background: var(--up); }

canvas { width: 100%; display: block; border: 1px solid var(--line); background: var(--panel); }

footer { color: var(--dim); font-size: .52rem; letter-spacing: 2px; text-align: center; margin-top: 8px; }

/* ============ BOOT ============ */
.boot { opacity: 0; animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; }
.boot:nth-of-type(1) { animation-delay: .05s; }
.boot:nth-of-type(2) { animation-delay: .13s; }
.boot:nth-of-type(3) { animation-delay: .21s; }
.boot:nth-of-type(4) { animation-delay: .29s; }
.boot:nth-of-type(5) { animation-delay: .37s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ LOGIN ============ */
body.center { display: flex; align-items: center; justify-content: center; }
.login {
  width: min(340px, 92vw); display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px; border: 1px solid var(--line); background: var(--panel);
}
.login .mark { text-align: center; }
.login .sub { text-align: center; margin-bottom: 10px; }
.login input {
  background: var(--panel); border: 1px solid var(--line);
  padding: 13px 14px; color: var(--ink); font-size: .9rem; font-family: var(--mono); outline: none;
}
.login input:focus { border-color: var(--ink); }
.login button {
  font-family: var(--display); font-weight: 900; letter-spacing: 3px; font-size: .85rem;
  background: var(--ink); color: var(--bg); border: none; padding: 13px; cursor: pointer;
}
#err { color: var(--down); font-size: .65rem; min-height: 1em; text-align: center; letter-spacing: 1px; }

/* ---- crew / access ---- */
.crewrow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
}
.crewrow:last-child { border-bottom: 0; }
.crewmail {
  color: var(--dim); font-size: .68rem; flex: 1; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.accessforms { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
@media (min-width: 700px) { .accessforms { grid-template-columns: 1fr 1fr; } }
.accessforms form {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); background: var(--panel); padding: 12px;
}
.accessforms b {
  font-family: var(--display); font-weight: 700; letter-spacing: 2px;
  font-size: .7rem; color: var(--dim);
}
.accessforms input {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: .75rem; letter-spacing: 1px; padding: 9px 10px; outline: none;
}
.accessforms input:focus { border-color: var(--ink); }
.accessforms button {
  font-family: var(--display); font-weight: 900; letter-spacing: 3px; font-size: .8rem;
  background: var(--ink); color: var(--bg); border: none; padding: 10px; cursor: pointer;
}
.formmsg { font-size: .62rem; letter-spacing: 1px; }

/* ---- machines (multi-device) ---- */
.devblock { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; margin-bottom: 10px; }
.devhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.devname {
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 1.5px;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.devhead .flap { width: 86px; text-align: center; }