/* cosmo-lost.css — the "lost" page (404 + coming-soon).
   Terminal windows pile up over pure black, one at a time, dny19-style —
   each one a cosmo os window: hairline green border, traffic-light dots,
   gradient wordmark, terminal voice. The front window is "focused"
   (focus-green border); the rest sit back dimmed. Mobile gets ONE clean
   centered window. Tokens follow hero-v4.css exactly. */
:root {
  --amber: #3DFC6E;
  --amber-dim: #1d5a2e;
  --pink: #FF5CA8;
  --pink-dim: #7c3a5c;
  --txt: #e0f2e3;
  --paper: #F2EDE1;
  --body: #b8b3a7;
  --hairline: #2a302a;
}

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

.lost-stage { position: fixed; inset: 0; overflow: hidden; }

/* ---------- one terminal window ---------- */
.lw {
  position: absolute; width: min(370px, calc(100vw - 32px));
  background: #121412;
  border: 1px solid var(--amber-dim); border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .62);
  transition: filter .3s ease, border-color .25s ease;
}
/* server-rendered (and no-JS / mobile) resting spot: clean center */
.lw-center { left: 50%; top: 46%; transform: translate(-50%, -50%); }

/* pile depth: everything behind the front window sits back */
.lw:not(.lw-top) { filter: brightness(.68) saturate(.92); }
.lw-top { border-color: #2e8f49; }               /* the focused-terminal green */

.lw.lw-in { animation: lw-in .26s cubic-bezier(.2, .65, .25, 1) both; }
@keyframes lw-in {
  0%   { opacity: 0; transform: scale(.94) translateY(10px); }
  46%  { opacity: 1; transform: scale(1.005) translateY(-2px); }
  58%  { opacity: .45; }                          /* CRT flicker */
  70%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.lw.lw-out { animation: lw-out .16s ease both; pointer-events: none; }
@keyframes lw-out { to { opacity: 0; transform: scale(.96) translateY(6px); } }

/* ---------- title bar ---------- */
.lw-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid #0c130d;
  cursor: grab; user-select: none; -webkit-user-select: none;
  border-radius: 10px 10px 0 0;
}
.lw.lw-dragging .lw-bar { cursor: grabbing; }
.lw-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 0; padding: 0; }
.lw-dot-close { background: var(--pink); cursor: pointer; transition: box-shadow .16s ease; }
.lw-dot-close:hover, .lw-dot-close:focus-visible { box-shadow: 0 0 9px rgba(255, 92, 168, .85); }
.lw-dot-min { background: var(--pink-dim); }
.lw-dot-max { background: var(--amber); }
.lw-title {
  margin-left: 6px; color: var(--dim); font-size: 11px; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ---------- window body ---------- */
.lw-body { padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 11px; }

/* small gradient COSMO wordmark — same treatment as the homepage lockup */
.lw-mark {
  margin: 0; font-family: var(--mono); white-space: pre; user-select: none;
  font-size: 5.4px; line-height: 1.2;
  background: linear-gradient(90deg, #7FD6FF 0%, #3DFC6E 48%, #F2E96B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 6px rgba(61, 252, 110, .35));
}
.lw-mark.ascii-glitch { text-shadow: none; }     /* keep the gradient clean during glitch frames */

.lw-lines { font-size: 12.5px; line-height: 1.6; }
.lw-cmd { color: var(--amber); overflow-wrap: anywhere; }
/* the `cd ~/route` echo wraps as one token, never mid-path */
.lw-cmd [data-lost-cmd] { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.lw-msg { color: var(--txt); margin-top: 3px; }
.lw-sub { color: var(--dim); }
.lw-progress { color: var(--amber); letter-spacing: .04em; margin-top: 3px; }

.lw-foot-sep {
  margin: 9px -16px 0;
  border-top: 1px solid var(--amber-dim);
}

/* the way home — house nav-link behavior: pink hover, typed underline */
.lw-home {
  width: max-content; max-width: 100%; position: relative;
  color: var(--amber); font-size: 13px; text-decoration: none;
  margin-top: 8px;
  transition: color .16s ease, transform .16s ease;
}
.lw-home .lw-sep, .lw-home .lbl { color: var(--dim); transition: color .16s ease; }
.lw-home::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--pink); transform: scaleX(0); transform-origin: left;
}
.lw-home:hover, .lw-home:focus-visible { color: var(--pink); transform: translateX(5px); text-decoration: none; }
.lw-home:hover .lbl, .lw-home:focus-visible .lbl,
.lw-home:hover .lw-sep, .lw-home:focus-visible .lw-sep { color: var(--pink); }
.lw-home:hover::after, .lw-home:focus-visible::after {
  transform: scaleX(1);
  transition: transform .28s steps(9, end);
}

/* ---------- bottom caption, house style ---------- */
.lost-caption {
  position: fixed; left: 0; right: 0; bottom: 14px; text-align: center;
  color: var(--dim); font-size: 10.5px; letter-spacing: .16em; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lw.lw-in, .lw.lw-out { animation: none; }
  .lw { transition: none; }
}

/* ---------- soon pages with the site nav ---------- */
.topbar { position: relative; z-index: 60; }
.topnav a:hover, .topnav a:focus-visible,
.topnav a:hover .tilde, .topnav a:focus-visible .tilde,
.topnav a.is-here, .topnav a.is-here .tilde { color: #7FD6FF; }
.topnav a::after { background: #7FD6FF; }

/* ---------- mobile / touch: one clean centered window, no pile ---------- */
@media (max-width: 700px), (pointer: coarse) {
  .lost-stage { display: flex; overflow-y: auto; padding: 16px 16px 40px; }
  .lw {
    position: static; margin: auto; transform: none;
    width: min(92vw, 370px);
  }
  .lw:not(.lw-top) { filter: none; }
  .lw-bar { cursor: default; }
  .lw-foot-sep { margin-left: -16px; margin-right: -16px; }
}