/* ═══════════════════════════════════════════════════════════════
   TZ://TRACKER — retro terminal stylesheet
   Strictly monochrome. One phosphor color per theme, nothing else.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:    #040404;
  --fg:    #e6e6e6;   /* phosphor */
  --dim:   #8a8a8a;   /* secondary text */
  --faint: #454545;   /* night / disabled */
  --ghost: #242424;   /* barely there */
}
:root[data-theme="green"] {
  --bg:    #030603;
  --fg:    #35ff5b;
  --dim:   #1c8a35;
  --faint: #0d4a1c;
  --ghost: #072b10;
}
:root[data-theme="amber"] {
  --bg:    #070402;
  --fg:    #ffb300;
  --dim:   #9a6c07;
  --faint: #533a06;
  --ghost: #2b1f04;
}

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

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "VT323", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 19px;
  line-height: 1.25;
  min-height: 100vh;
  overflow-x: auto;
  cursor: default;
}


::selection { background: var(--fg); color: var(--bg); }

pre, button, input { font: inherit; color: inherit; letter-spacing: inherit; }

/* ── CRT overlay: scanlines + vignette flicker ─────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0px,
    rgba(0, 0, 0, 0)    2px,
    rgba(0, 0, 0, 0.22) 3px
  );
  animation: crt-flicker 6s infinite steps(1);
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  57%      { opacity: 0.92; }
  57.4%    { opacity: 1; }
  81%      { opacity: 0.95; }
  81.2%    { opacity: 1; }
}

/* ═══ BOOT SCREEN ══════════════════════════════════════════════ */
#boot {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  padding: 4vh 4vw;
}
#boot.off { display: none; }
#boot-text { white-space: pre-wrap; }
#boot .hint {
  position: absolute;
  bottom: 3vh;
  color: var(--faint);
  animation: blink 1.2s infinite steps(1);
}

/* ═══ APP ══════════════════════════════════════════════════════ */
#app {
  max-width: 92ch;
  margin: 0 auto;
  padding: 2ch 1.5ch 6ch;
  display: none;
}
#app.on { display: block; }

/* two columns on wide screens: data left, map right */
@media (min-width: 900px) {
  #app { max-width: none; width: max-content; }
  #app.on {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 2ch;
    align-items: start;
    justify-content: center;
  }
  #app.on > header, #app.on > #toolbar { grid-column: 1 / -1; }
  header { display: flex; flex-wrap: wrap; column-gap: 4ch; justify-content: space-between; align-items: flex-end; }
  #hdr-clocks { text-align: right; }
}
#app.power-on { animation: power-on 0.55s ease-out; }
@keyframes power-on {
  0%   { transform: scaleY(0.004) scaleX(0.7); filter: brightness(6); }
  35%  { transform: scaleY(0.02)  scaleX(1);   filter: brightness(4); }
  60%  { transform: scaleY(1.06);              filter: brightness(1.6); }
  100% { transform: scaleY(1);                 filter: brightness(1); }
}

/* ── header ── */
#logo { line-height: 1.12; margin-bottom: 0.25em; }
#logo .sub { color: var(--dim); }
#hdr-clocks { color: var(--dim); margin-bottom: 1em; }
#hdr-clocks b { color: var(--fg); font-weight: normal; }

/* ── toolbar buttons ── */
#toolbar { margin: 0.5em 0 1em; display: flex; flex-wrap: wrap; gap: 1ch; align-items: baseline; }
.tbtn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.25ch;
  transition: transform 0.05s steps(1);
}
.tbtn::before { content: "[ "; color: var(--dim); }
.tbtn::after  { content: " ]"; color: var(--dim); }
.tbtn:hover, .tbtn:focus-visible {
  background: var(--fg);
  color: var(--bg);
  outline: none;
}
.tbtn:hover::before, .tbtn:focus-visible::before { content: "[>"; color: var(--bg); }
.tbtn:hover::after,  .tbtn:focus-visible::after  { content: "<]"; color: var(--bg); }
.tbtn:active { transform: translateY(2px); }

/* ── section frames ── */
.panel {
  border: 1px solid var(--faint);
  padding: 0.75em 1ch 1em;
  margin-bottom: 1.25em;
  position: relative;
}
.panel > h2 {
  position: absolute;
  top: -0.72em;
  left: 1.5ch;
  background: var(--bg);
  padding: 0 1ch;
  font-size: inherit;
  font-weight: normal;
  color: var(--dim);
  letter-spacing: 0.1ch;
}
.panel > h2 b { color: var(--fg); font-weight: normal; }

/* ── city clock rows ── */
#clock-rows { overflow-x: auto; }
.crow {
  white-space: pre;
  display: flex;
  align-items: baseline;
}
.crow .cname  { display: inline-block; width: 17ch; }
.crow .ctime  { display: inline-block; width: 10ch; }
.crow .coff   { display: inline-block; width: 11ch; color: var(--dim); }
.crow .cdelta { display: inline-block; width: 9ch;  color: var(--dim); }
.crow .cphase { display: inline-block; width: 9ch; }
.crow .cphase.night { color: var(--faint); }
.crow.local .cname, .crow.local .ctime { color: var(--fg); }
.crow.local .cname::after { content: " ◂ YOU"; color: var(--faint); }
.crow .xbtn {
  background: none; border: none; cursor: pointer;
  color: var(--faint);
  margin-left: auto;
}
.crow .xbtn:hover { background: var(--fg); color: var(--bg); }
.crow.spawn { animation: spawn 0.25s steps(4); }
@keyframes spawn {
  from { opacity: 0; transform: translateX(-2ch); }
  to   { opacity: 1; transform: none; }
}
.empty-hint { color: var(--faint); }

/* ── timeline grid ── */
#tl-grid { white-space: pre; overflow-x: auto; }
.tl-row { white-space: pre; }
.tl-label { display: inline-block; width: 14ch; overflow: hidden; vertical-align: top; }
.tl-tag   { color: var(--faint); }
.cell {
  display: inline-block;
  width: 3ch;
  text-align: center;
  cursor: crosshair;
  border-left: 1px solid transparent;
  margin-left: -1px;
}
.cell.work  { background: var(--fg); color: var(--bg); }
.cell.wake  { color: var(--fg); }
.cell.night { color: var(--faint); }
.cell.mid   { border-left: 1px solid var(--dim); }
.cell.hl    { background: var(--dim); color: var(--bg); }
.cell.work.hl { background: var(--fg); outline: 1px solid var(--bg); outline-offset: -2px; }
.cell.pin   { box-shadow: inset 0 0 0 1px var(--fg); }
.cell.now   { text-decoration: underline; text-underline-offset: 3px; }
.hdr-cell   { color: var(--dim); cursor: crosshair; }
.hdr-cell.nowmark { background: var(--fg); color: var(--bg); }
#tl-readout { margin-top: 0.5em; color: var(--dim); white-space: pre-wrap; min-height: 1.25em; }
#tl-readout b { color: var(--fg); font-weight: normal; }
#tl-legend { margin-top: 0.35em; color: var(--faint); }
#tl-legend .lg-work { background: var(--fg); color: var(--bg); }
#tl-legend .lg-wake { color: var(--fg); }

/* ── world map ── */
#map-pre { line-height: 1.05; letter-spacing: 0.05ch; overflow-x: auto; }
#map-pre span.day    { color: var(--fg); }
#map-pre span.dusk   { color: var(--dim); }
#map-pre span.night  { color: var(--faint); }
#map-pre span.sea    { color: var(--ghost); }
#map-pre span.sea.day { color: var(--faint); }
#map-pre span.marker {
  color: var(--fg);
  animation: blink 1s infinite steps(1);
}
#map-pre span.sun { color: var(--fg); }
#map-legend { margin-top: 0.5em; color: var(--faint); }

/* ── status bar ── */
#statusbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--faint);
  padding: 0.3em 1.5ch;
  display: flex;
  gap: 2ch;
  z-index: 40;
  white-space: pre;
  overflow: hidden;
}
#status-msg { color: var(--fg); }
#keyhints { margin-left: auto; color: var(--faint); }
#keyhints b { color: var(--dim); font-weight: normal; }

.cursor { animation: blink 1.06s infinite steps(1); }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── command palette ── */
#palette {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(52ch, 92vw);
  background: var(--bg);
  border: 1px double var(--dim);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.9);
  z-index: 60;
  padding: 0.5em 1ch 0.75em;
  display: none;
}
#palette.open { display: block; animation: spawn 0.12s steps(3); }
#palette .p-title { color: var(--dim); margin-bottom: 0.4em; }
#pal-line { display: flex; align-items: baseline; border-bottom: 1px solid var(--faint); padding-bottom: 0.2em; }
#pal-line .prompt { color: var(--fg); margin-right: 1ch; }
#pal-input {
  background: none; border: none; outline: none;
  flex: 1;
  text-transform: uppercase;
  caret-color: transparent;
}
#pal-cursor { margin-left: -1ch; }
#pal-results { list-style: none; margin-top: 0.4em; max-height: 12.5em; overflow-y: auto; }
#pal-results li { white-space: pre; cursor: pointer; padding: 0 0.5ch; }
#pal-results li .meta { color: var(--dim); }
#pal-results li.sel { background: var(--fg); color: var(--bg); }
#pal-results li.sel .meta { color: var(--bg); }
#pal-results li.added { color: var(--faint); }
#pal-results li.added .meta { color: var(--faint); }
#pal-results li.nores { color: var(--faint); cursor: default; }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .cursor, #map-pre span.marker { animation: none; }
  #app.power-on, .crow.spawn, #palette.open { animation: none; }
}

@media (max-width: 700px) {
  #keyhints { display: none; }
}