/* What is left of the machine once the desktop is gone: a fixed instrument
   strip, the terminal, and the command palette. No icon rail, no windows, and
   no 22px background grid. Hairline grids drawn purely to make a page look
   engineered are decoration; the horizon is the real instrument here. */

#os-root { position: relative; }

/* ---- the strip -------------------------------------------------------- */

.strip {
  display: none !important;
}

/* Read position, drawn on the strip's own top edge. Scroll timeline, so it
   costs no listener and runs off the main thread. */
.strip-prog {
  position: absolute; left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
}
@supports (animation-timeline: scroll()) {
  .strip-prog {
    animation: tb-prog linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes tb-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* The badge, small enough for the strip. */
.badge--sm { margin: 0; }
.badge--sm .badge-mark, .badge--sm .badge-no { padding: 1px var(--sp-2); font-size: .6rem; }

.strip .strip-now {
  color: var(--slate);
  letter-spacing: .12em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.strip .strip-hint {
  margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--slate); font-family: var(--font-mono); font-size: .68rem;
  padding: 2px var(--sp-2); cursor: pointer;
}
.strip .strip-hint:hover { border-color: var(--bone); color: var(--bone); }

@media (max-width: 560px) {
  .strip .strip-now { display: none; }
}

/* Kerb stripes: the divider motif, red and white on the diagonal. */
.kerb {
  height: 4px;
  background: repeating-linear-gradient(135deg,
    var(--red) 0 8px, var(--bone) 8px 16px);
  opacity: .55;
}

/* ---- terminal --------------------------------------------------------- */

.term { font-size: 0.82rem; color: var(--green); min-height: 220px; }
.term-out { margin: 0 0 var(--sp-2); white-space: pre-wrap; }
.term-line { display: flex; gap: var(--sp-2); align-items: center; }
.term-prompt { color: var(--slate); }
.term-in {
  flex: 1; background: none; border: 0; outline: none;
  color: var(--green); font-family: var(--font-mono); font-size: 0.82rem;
}

/* ---- command palette -------------------------------------------------- */

.pal { position: fixed; inset: 0; z-index: 8000; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.pal[hidden] { display: none; }
.pal-box { width: min(460px, 92vw); background: var(--carbon);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pal-in { width: 100%; background: var(--asphalt); border: 0; border-bottom: 1px solid var(--line);
  outline: none; color: var(--bone); font-family: var(--font-mono);
  font-size: 0.85rem; padding: var(--sp-3); }
.pal-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.pal-list li { padding: var(--sp-2) var(--sp-3); font-size: 0.8rem; cursor: pointer; }
.pal-list li.on { background: var(--asphalt); color: var(--bone); }
.pal-none { color: var(--slate); cursor: default; }