/* ═══════════════════════════════════════════════════════════════
   VESPER/OS — Meridian Instruments, 1989
   Night-shift workstation UI.
   Palette: night navy, bone grey, sodium-vapor amber (589 nm),
   phosphor green (instrument screens only).
   Dark-adaptation mode re-derives every token toward deep red.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --night:    #0a0d16;   /* desktop void            */
  --panel:    #131725;   /* window body             */
  --panel-2:  #0e1220;   /* recessed wells, inputs  */
  --chrome:   #1a2032;   /* inactive chrome         */
  --line:     #2a3350;   /* hairlines               */
  --line-hi:  #3d4a73;   /* focused hairlines       */
  --bone:     #c8cddc;   /* primary text            */
  --bone-dim: #7d86a3;   /* secondary text          */
  --sodium:   #f0a63c;   /* accent — sodium D line  */
  --sodium-hi:#ffc063;
  --sodium-ink:#171006;  /* text on sodium          */
  --phosphor: #7ce8a4;   /* CRT traces only         */
  --alarm:    #e0584a;
  --shadow: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.5);

  --ui: "Archivo", system-ui, sans-serif;
  --mono: "Azeret Mono", "Consolas", monospace;
}

/* — Dark adaptation: the whole station goes red. —
   Real observatories run red light at night; rods in the human
   eye are nearly blind to deep red, so night vision survives. */
:root[data-adapt="red"] {
  --night:    #0c0505;
  --panel:    #170a08;
  --panel-2:  #100605;
  --chrome:   #1f0d0a;
  --line:     #3c1712;
  --line-hi:  #5a2018;
  --bone:     #e0645a;
  --bone-dim: #8f3d34;
  --sodium:   #d94f3d;
  --sodium-hi:#f0705c;
  --sodium-ink:#180404;
  --phosphor: #e0645a;
  --alarm:    #ff7a68;
}
:root[data-adapt="red"] #wallpaper { filter: sepia(1) saturate(3) hue-rotate(-38deg) brightness(.55); }

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

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--night);
  color: var(--bone);
  font-family: var(--ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

::selection { background: var(--sodium); color: var(--sodium-ink); }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--sodium); outline-offset: 1px; }

/* ═══════════════ BOOT ═══════════════ */

#boot {
  position: fixed; inset: 0; z-index: 1000;
  background: #060810;
  padding: 6vh 7vw;
  display: flex; flex-direction: column;
}
:root[data-adapt="red"] #boot { background: #0a0404; }

#boot-text {
  font-family: var(--mono);
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--bone);
  white-space: pre-wrap;
  flex: 1;
}
#boot-text .ok   { color: var(--phosphor); }
#boot-text .amber{ color: var(--sodium); }
#boot-text .dim  { color: var(--bone-dim); }

#boot-skip {
  font-family: var(--mono); font-size: 11px;
  color: var(--bone-dim);
  letter-spacing: .12em; text-transform: uppercase;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

#boot.fading { animation: bootout .6s ease forwards; }
@keyframes bootout { to { opacity: 0; visibility: hidden; } }

/* ═══════════════ FRAME ═══════════════ */

#os { display: flex; flex-direction: column; height: 100%; }

#menubar {
  height: 34px; flex: none;
  display: flex; align-items: stretch;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  z-index: 500;
}

.mb-item {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  color: var(--bone);
  letter-spacing: .06em;
  white-space: nowrap;
}
.mb-static { color: var(--bone-dim); }
button.mb-item:hover { background: var(--chrome); color: var(--sodium-hi); }
.mb-spacer { flex: 1; border-right: 1px solid var(--line); }
.mb-spacer + .mb-item { border-left: none; }

#mb-logo {
  font-family: var(--ui);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: .1em;
  font-size: 13px;
}
#mb-logo .logo-mark { color: var(--sodium); font-size: 11px; }
#mb-logo[aria-expanded="true"] { background: var(--sodium); color: var(--sodium-ink); }
#mb-logo[aria-expanded="true"] .logo-mark { color: var(--sodium-ink); }

#mb-appname { font-family: var(--ui); font-weight: 600; letter-spacing: .12em; color: var(--bone); }
#mb-appname:empty { display: none; }

#mb-adapt.on, #mb-sound.off { color: var(--sodium); }
#mb-lst { color: var(--sodium); }

#osmenu {
  position: fixed; top: 34px; left: 0; z-index: 900;
  min-width: 230px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  box-shadow: var(--shadow);
  padding: 5px;
}
#osmenu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px;
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  letter-spacing: .03em;
}
#osmenu button:hover { background: var(--sodium); color: var(--sodium-ink); }
#osmenu hr { border: none; border-top: 1px solid var(--line); margin: 5px 0; }

/* ═══════════════ DESKTOP ═══════════════ */

#desktop { position: relative; flex: 1; overflow: hidden; }

#wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; }

#icons {
  position: absolute; top: 22px; left: 18px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 1;
}

.dicon {
  display: flex; align-items: center; gap: 11px;
  width: 178px;
  padding: 9px 12px;
  border: 1px solid transparent;
  text-align: left;
}
.dicon:hover { border-color: var(--line); background: rgba(19,23,37,.72); }
.dicon:active, .dicon.launching { border-color: var(--sodium); }
.dicon .glyph {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--sodium);
  font-family: var(--mono); font-size: 15px; font-weight: 500;
}
.dicon .meta { display: flex; flex-direction: column; gap: 1px; }
.dicon .name {
  font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}
.dicon .desc { font-size: 10.5px; color: var(--bone-dim); letter-spacing: .02em; }

/* ═══════════════ WINDOWS ═══════════════ */

.window {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 260px; min-height: 160px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.window.focused { border-color: var(--line-hi); }
.window.opening { animation: winopen .18s ease-out; }
@keyframes winopen { from { transform: scale(.96); opacity: 0; } }
.window.minimized { display: none; }

.titlebar {
  height: 30px; flex: none;
  display: flex; align-items: stretch;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  color: var(--bone-dim);
  touch-action: none;
}
.window.focused .titlebar {
  background: var(--sodium);
  border-bottom-color: var(--sodium);
  color: var(--sodium-ink);
}

.titlebar .tb-title {
  flex: 1;
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px;
  font-weight: 700; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  overflow: hidden; white-space: nowrap;
  cursor: grab;
}
.titlebar .tb-title:active { cursor: grabbing; }
.titlebar .tb-glyph { font-family: var(--mono); font-weight: 500; opacity: .75; }

.tb-btn {
  width: 36px; flex: none;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px;
  border-left: 1px solid var(--line);
  color: inherit;
}
.window.focused .tb-btn { border-left-color: rgba(23,16,6,.28); }
.tb-btn:hover { background: rgba(0,0,0,.22); }
.window.focused .tb-btn:hover { background: rgba(23,16,6,.16); }

.winbody {
  flex: 1; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}

.resizer {
  position: absolute; right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 5;
  background:
    linear-gradient(135deg, transparent 50%, var(--line-hi) 50%, var(--line-hi) 58%, transparent 58%,
      transparent 70%, var(--line-hi) 70%, var(--line-hi) 78%, transparent 78%);
  touch-action: none;
}

/* ═══════════════ SHELF ═══════════════ */

#shelf {
  height: 32px; flex: none;
  display: flex; align-items: stretch;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px;
  z-index: 500;
}
#shelf-station {
  display: flex; align-items: center;
  padding: 0 14px;
  color: var(--bone-dim);
  letter-spacing: .1em;
  border-right: 1px solid var(--line);
  white-space: nowrap; overflow: hidden;
}
#shelf-apps { display: flex; align-items: stretch; overflow-x: auto; }
.shelf-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  letter-spacing: .1em;
  color: var(--bone-dim);
  white-space: nowrap;
}
.shelf-chip::before { content: "●"; font-size: 7px; color: var(--line-hi); }
.shelf-chip.active { color: var(--bone); }
.shelf-chip.active::before { color: var(--sodium); }
.shelf-chip.min { font-style: italic; }
.shelf-chip:hover { background: var(--chrome); color: var(--sodium-hi); }

/* ═══════════════ SHARED APP CHROME ═══════════════ */

.toolrow {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
  flex-wrap: wrap;
}
.toolrow .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.toolrow .grow { flex: 1; }
.toolrow label { color: var(--bone-dim); letter-spacing: .08em; font-size: 10px; text-transform: uppercase; }

.vbtn {
  padding: 5px 11px;
  border: 1px solid var(--line-hi);
  background: var(--panel-2);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em;
  color: var(--bone);
}
.vbtn:hover { border-color: var(--sodium); color: var(--sodium-hi); }
.vbtn.on { background: var(--sodium); border-color: var(--sodium); color: var(--sodium-ink); }
.vbtn:disabled { opacity: .4; cursor: default; }

.vinput, select.vinput {
  padding: 5px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
  color: var(--bone);
}
.vinput:focus { outline: none; border-color: var(--sodium); }

.statusrow {
  flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 5px 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px;
  color: var(--bone-dim);
  letter-spacing: .08em; text-transform: uppercase;
  overflow: hidden; white-space: nowrap;
}
.statusrow .grow { flex: 1; }
.statusrow b { color: var(--sodium); font-weight: 500; }

/* ═══════════════ TERMINAL ═══════════════ */

.term {
  flex: 1; overflow-y: auto;
  padding: 12px 14px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  background: var(--panel-2);
  cursor: text;
}
.term .out { white-space: pre-wrap; word-break: break-word; }
.term .dim { color: var(--bone-dim); }
.term .amber { color: var(--sodium); }
.term .green { color: var(--phosphor); }
.term .err { color: var(--alarm); }
.term .promptline { display: flex; }
.term .ps1 { color: var(--sodium); white-space: pre; }
.term input {
  flex: 1; background: none; border: none; outline: none;
  font: inherit; color: var(--bone);
  caret-color: var(--sodium);
}

/* ═══════════════ FILES ═══════════════ */

.files-main { flex: 1; display: flex; overflow: hidden; }
.files-tree {
  width: 168px; flex: none; overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: 8px 0;
  font-family: var(--mono); font-size: 11.5px;
}
.files-tree button {
  display: block; width: 100%; text-align: left;
  padding: 5px 14px;
  color: var(--bone-dim); letter-spacing: .04em;
}
.files-tree button:hover { color: var(--sodium-hi); }
.files-tree button.here { color: var(--sodium); background: var(--panel-2); }

.files-list { flex: 1; overflow-y: auto; padding: 6px 0; background: var(--panel-2); }
.frow {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 6px 14px;
  font-family: var(--mono); font-size: 12px;
}
.frow:hover { background: var(--chrome); }
.frow.sel { background: var(--sodium); color: var(--sodium-ink); }
.frow .fglyph { width: 18px; flex: none; color: var(--sodium); }
.frow.sel .fglyph { color: var(--sodium-ink); }
.frow .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .fsize { color: var(--bone-dim); font-size: 10.5px; }
.frow.sel .fsize { color: var(--sodium-ink); }

/* ═══════════════ LOG (editor) ═══════════════ */

.log-edit {
  flex: 1; resize: none; border: none; outline: none;
  background: var(--panel-2);
  padding: 14px 16px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.8;
  color: var(--bone);
  caret-color: var(--sodium);
  user-select: text;
}

/* ═══════════════ SIGNAL (synth) ═══════════════ */

.sig-scope { flex: 1; min-height: 90px; background: #05070d; display: block; width: 100%; }
:root[data-adapt="red"] .sig-scope { background: #080302; }

.sig-keys {
  flex: none; height: 132px;
  display: flex; position: relative;
  border-top: 1px solid var(--line);
  padding: 10px; gap: 3px;
  background: var(--panel);
}
.sig-key {
  flex: 1;
  border: 1px solid var(--line-hi);
  background: var(--panel-2);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 7px;
  font-family: var(--mono); font-size: 9px;
  color: var(--bone-dim);
  touch-action: none;
}
.sig-key.black { background: var(--chrome); border-color: var(--line); }
.sig-key.down { background: var(--sodium); color: var(--sodium-ink); border-color: var(--sodium); }

/* ═══════════════ ORBIT / SKY / PLATES canvases ═══════════════ */

.appcanvas { flex: 1; display: block; width: 100%; min-height: 0; background: #05070d; }
:root[data-adapt="red"] .appcanvas { background: #080302; }
.appcanvas.crosshair { cursor: crosshair; }

/* ═══════════════ MONITOR ═══════════════ */

.mon-body { flex: 1; overflow-y: auto; padding: 12px 14px; font-family: var(--mono); font-size: 11.5px; background: var(--panel-2); }
.mon-sec { margin-bottom: 16px; }
.mon-sec h3 {
  font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 7px;
}
.mon-graph { width: 100%; height: 54px; display: block; background: var(--night); border: 1px solid var(--line); }
.mon-bar { height: 12px; background: var(--night); border: 1px solid var(--line); position: relative; }
.mon-bar i { position: absolute; inset: 1px auto 1px 1px; background: var(--sodium); }
.mon-table { width: 100%; border-collapse: collapse; }
.mon-table td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); color: var(--bone-dim); }
.mon-table td:first-child { color: var(--bone); }
.mon-table td:last-child { text-align: right; color: var(--sodium); }

/* ═══════════════ ABOUT ═══════════════ */

.about {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  padding: 24px;
  background: var(--panel-2);
}
.about .mark { font-size: 30px; color: var(--sodium); }
.about h1 {
  font-family: var(--ui); font-weight: 800; font-stretch: 122%;
  font-size: 26px; letter-spacing: .18em;
}
.about h1 span { color: var(--sodium); }
.about p { font-family: var(--mono); font-size: 11px; color: var(--bone-dim); line-height: 1.9; letter-spacing: .05em; }

/* ═══════════════ SCROLLBARS ═══════════════ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panel); }
::-webkit-scrollbar-thumb { background: var(--line-hi); border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: var(--sodium); }

/* ═══════════════ MOTION / SMALL SCREENS ═══════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 760px) {
  #shelf-station { display: none; }
  #mb-lst { display: none; }
  .dicon { width: 148px; }
}