/* Works: a desktop terminal window. Blacker than the rest of the site, almost no sci-fi dressing. */
body.wk { --bg: #08090b; background: #08090b; }
body.wk::before, body.wk::after { display: none; }                 /* no scanlines / grain here */
body.wk .nav { background: linear-gradient(#08090bf2, #08090bb0); border-bottom-color: #ffffff0d; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

:root {
  --t-win: #0c0e11;
  --t-bar: #181b20;
  --t-line: #23272e;
  --t-text: #d3dae2;
  --t-dim: #6f7a86;
  --t-green: #6fdc8c;
  --t-blue: #3ca0ff;
  --t-cyan: #56d4dd;
  --t-yellow: #e5c07b;
  --t-red: #ff7b72;
  --t-mag: #c792ea;
}

.stage { display: grid; place-items: center; min-height: calc(100svh - 64px - 49px); padding: 28px var(--pad); }

.win { display: grid; grid-template-rows: auto 1fr auto auto; width: min(980px, 100%); height: min(680px, calc(100svh - 170px)); min-height: 420px; overflow: hidden; border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-win); box-shadow: 0 40px 90px #000c, 0 0 0 1px #00000080; font: 13.5px/1.55 var(--mono); color: var(--t-text); }

/* title bar */
.win__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 9px 14px; background: var(--t-bar); border-bottom: 1px solid var(--t-line); color: var(--t-dim); font-size: 11.5px; }
.win__dots { display: flex; gap: 7px; }
.win__dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f47; }
.win:hover .win__dots i:nth-child(1) { background: #ff5f57; }
.win:hover .win__dots i:nth-child(2) { background: #febc2e; }
.win:hover .win__dots i:nth-child(3) { background: #28c840; }
.win__dots i { transition: background .2s; }

/* output */
.win__out { overflow-y: auto; padding: 16px 18px 6px; scrollbar-width: thin; scrollbar-color: #2e343c transparent; }
.ln { margin: 0; min-height: 1.55em; white-space: pre-wrap; word-break: break-word; }
.ln a { color: var(--t-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #3ca0ff66; }
.ln a:hover { color: #8fcaff; }
.dim { color: var(--t-dim); }
.green { color: var(--t-green); } .blue { color: var(--t-blue); } .cyan { color: var(--t-cyan); }
.yellow { color: var(--t-yellow); } .red { color: var(--t-red); } .mag { color: var(--t-mag); }
.bold { font-weight: 700; color: #fff; }

/* prompts (echoed commands and the live input share this look) */
.p-user { color: var(--t-green); font-weight: 700; }
.p-path { color: var(--t-blue); font-weight: 700; }
.p-dim { color: var(--t-text); }
.ln--cmd { margin-top: 10px; }
.ln--cmd .cmdtext { color: #fff; }

/* ls -l rows (clickable) */
.lsrow { display: grid; grid-template-columns: 11ch 1fr auto; gap: 14px; align-items: baseline; width: 100%; padding: 1px 6px; margin: 0 -6px; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lsrow:hover, .lsrow:focus-visible { background: #ffffff0f; }
.lsrow .perm { color: var(--t-dim); }
.lsrow .name { font-weight: 700; }
.lsrow .tag { color: var(--t-dim); }
.lsrow .st { font-size: 11.5px; }
.ls-exec { color: var(--t-green); } .ls-beta { color: var(--t-cyan); } .ls-soon { color: var(--t-text); } .ls-sealed { color: #55606c; }
.lsnames { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.lsnames button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }
.lsnames button:hover { text-decoration: underline; }

.logo { color: var(--t-blue); font-weight: 700; margin: 0; white-space: pre; line-height: 1.2; }
.nf { display: grid; grid-template-columns: auto 1fr; gap: 0 28px; align-items: start; margin: 6px 0; }
@media (max-width: 560px) { .nf { grid-template-columns: 1fr; } }

/* input line */
.win__in { display: flex; align-items: center; gap: 8px; padding: 6px 18px 12px; }
.win__in label { white-space: nowrap; }
.win__in input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; caret-color: var(--t-green); caret-shape: block; }

/* tmux-style status bar */
.tmux { display: flex; align-items: center; gap: 14px; padding: 3px 12px; background: #1c2a1f; border-top: 1px solid #243326; color: #9fd6ac; font-size: 11.5px; }
.tmux__win { padding: 0 8px; background: var(--t-green); color: #08130b; font-weight: 700; }
.tmux__items { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; }
.tmux__items button { padding: 0 8px; border: 0; background: none; color: #9fd6ac; font: inherit; cursor: pointer; }
.tmux__items button:hover { background: #2c4430; color: #fff; }
.tmux__right { display: inline-flex; gap: 14px; color: #7fb98d; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .win { font-size: 12px; height: calc(100svh - 150px); }
  .lsrow { grid-template-columns: 1fr auto; }
  .lsrow .perm, .lsrow .tag { display: none; }
  .win__in label .p-user, .win__in label .p-dim:first-of-type { display: none; }
  .tmux__right #clock { display: none; }
}

/* phones: no iOS zoom on focus, bigger status-bar buttons, roomier window */
@media (max-width: 700px) {
  .stage { padding: 14px 12px 22px; align-items: start; }
  .win { height: calc(100svh - 150px); min-height: 380px; border-radius: 8px; }
  .win__out { padding: 12px 12px 4px; }
  .win__in { padding: 4px 12px 10px; }
  .win__in input { font-size: 16px; }                      /* under 16px makes iPhones zoom the page on tap */
  .win__in label .p-user, .win__in label .p-dim:first-of-type { display: none; }
  .lsrow { min-height: 40px; align-items: center; }
  .tmux { flex-wrap: wrap; padding: 4px 8px; gap: 2px 8px; }
  .tmux__items { order: 3; flex-basis: 100%; }
  .tmux__items button { min-height: 36px; padding: 0 10px; }
  .tmux__right #clock { display: none; }
}