/* Office OS shell. One typeface (PixelStartViet: 8 design px per em, line-height >= 1.5), hard shadows,
   no rounded corners, no blur. Colors are tokens; programs' windows use the same classes. */
@font-face { font-family: "PixelStartViet"; src: url("/fonts/pixelstartviet.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --font: "PixelStartViet", ui-monospace, monospace;
  --bg: #1b1d2b; --bar: #12131d; --ink: #1e2030; --paper: #f8f8f0; --paper-2: #e8e6d8; --line: #2b2d42;
  --accent: #3868d8; --gold: #f8c838; --ok: #38b860; --warn: #e89830; --err: #d84848; --muted: #6b6f88; --soft: #9aa0c0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--paper); overflow: hidden; }
body { font-family: var(--font); font-size: 10px; line-height: 1.6; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* top bar: start menu, open windows, tray, clock */
.bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bar); border-bottom: 3px solid #000; position: relative; z-index: 50; min-height: 44px; }
.bar .start { color: var(--gold); }
.bar .tasks { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
.bar .tray { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.bar .clock { color: var(--soft); }
.bar .commit { color: var(--muted); font-size: 8px; }
.btn { background: var(--ink); color: var(--paper); border: 3px solid #000; box-shadow: inset 0 0 0 2px #3a3d50; padding: 6px 8px; cursor: pointer; white-space: nowrap; font-size: 9px; line-height: 1.5; }
.btn:active { transform: translate(1px, 1px); }
.btn[aria-pressed="true"], .btn.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.primary { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.danger { background: var(--err); color: #fff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: #cfd2e6; }
.pill i { width: 10px; height: 10px; display: inline-block; box-shadow: 0 0 0 2px #000; }
.pill.alert { color: #ff9a9a; } .pill.alert i { animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (max-width: 640px) { .bar .clock, .bar .commit { display: none; } }

/* start menu */
.menu { position: absolute; top: 100%; left: 8px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 #000;
  min-width: 220px; max-height: 70vh; overflow-y: auto; padding: 6px; z-index: 60; }
.menu h4 { margin: 8px 6px 4px; font-size: 8px; color: var(--muted); font-weight: 400; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 8px; cursor: pointer; font-size: 9px; }
.menu button:hover, .menu button:focus-visible { background: var(--ink); color: var(--gold); outline: none; }

/* desktop: the office canvas */
.desk { flex: 1; position: relative; min-height: 0; overflow: hidden; }
.stage { position: absolute; inset: 0; touch-action: none; cursor: pointer; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.labels .bubble { position: absolute; transform: translate(-50%, -100%); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 #000;
  padding: 3px 6px; font-size: 8px; max-width: 180px; white-space: normal; text-align: center; }
.labels .name { position: absolute; transform: translate(-50%, 0); font-size: 7px; color: var(--paper); text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; white-space: nowrap; }
.labels .name.sel { color: var(--gold); }
.viewbar { position: absolute; right: 10px; bottom: 10px; z-index: 6; display: flex; gap: 6px; }
.boot { position: absolute; inset: 0; display: grid; place-items: center; color: var(--soft); background: var(--bg); z-index: 40; text-align: center; padding: 20px; }

/* retro screen (v0's CRT): scanlines every third pixel and a dark vignette over the office, with v0's slow
   flicker. Windows, the bar and the dock stay clear of it. v0 also raised the canvas's saturation and
   contrast; that CSS filter halved the frame rate on a software renderer (measured 56 → 20 fps here), so the
   look is the scanlines and the vignette alone. */
.crt { position: absolute; inset: 0; pointer-events: none; z-index: 5; display: none;
  background: repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.55) 100%); }
body.crt-on .crt { display: block; animation: crtFlicker 4s steps(40) infinite; }
@keyframes crtFlicker { 0%, 100% { opacity: 1; } 3% { opacity: .86; } 6% { opacity: 1; } 48% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { body.crt-on .crt { animation: none; } }
.boot pre { font: inherit; text-align: left; white-space: pre-wrap; color: #cfd2e6; }

/* dock: bars owned by programs (the news ticker …), under the office */
.dock { flex: none; display: flex; flex-direction: column; }
.dock:empty { display: none; }

/* windows */
.wins { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.win { position: absolute; pointer-events: auto; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 #000;
  display: flex; flex-direction: column; min-width: 240px; min-height: 120px; max-width: calc(100% - 8px); max-height: calc(100% - 8px); }
.win.focus { box-shadow: 4px 4px 0 #000, 0 0 0 2px var(--gold); }
.win .tb { display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 6px 8px; cursor: move; user-select: none; touch-action: none; }
.win .tb .t { flex: 1; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win .tb button { background: var(--paper); color: var(--ink); border: 2px solid #000; width: 22px; height: 22px; padding: 0; cursor: pointer; font-size: 9px; line-height: 1; }
.win .wb { flex: 1; overflow: auto; padding: 10px; min-height: 0; font-size: 9px; }
.win .wb.flush { padding: 0; }
@media (max-width: 640px) {
  .win { left: 4px !important; right: 4px; width: auto !important; top: auto !important; bottom: 4px; max-height: 70%; }
  .win .tb { cursor: default; }
}

/* shared widgets for app windows */
.row { display: flex; gap: 8px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--muted); }
.tag { display: inline-block; padding: 1px 4px; border: 2px solid var(--ink); font-size: 7px; }
.field { width: 100%; border: 3px solid var(--ink); background: #fff; padding: 8px; font-size: 10px; line-height: 1.6; }
textarea.field { resize: vertical; min-height: 60px; }
/* iOS Safari and Chrome on Android zoom the page when a focused text control's font size is under 16px.
   Touch devices get 16px controls so focusing one never zooms; the pixel sizes stay on desktop pointers.
   Pinch zoom still works: index.html's viewport meta sets no maximum-scale. Programs set their own smaller
   sizes for the pixel look, so this rule overrides them. Checkboxes, radios, files, ranges and colours are
   not text entry and keep their sizes. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  textarea, select { font-size: 16px !important; }
}
table.grid { width: 100%; border-collapse: collapse; font-size: 8px; }
table.grid th, table.grid td { text-align: left; padding: 4px 6px; border-bottom: 2px solid var(--paper-2); white-space: nowrap; }
table.grid th { color: var(--muted); font-weight: 400; position: sticky; top: 0; background: var(--paper); }
table.grid tr.bad td { color: var(--err); }
.term { background: #0c0d14; color: #c8f0c8; font-size: 9px; line-height: 1.6; padding: 8px; white-space: pre-wrap; overflow-y: auto; flex: 1; min-height: 0; }
.term .err { color: #ff8a8a; } .term .cmd { color: var(--gold); }
.term-in { display: flex; background: #0c0d14; border-top: 2px solid #2b2d42; }
.term-in span { color: var(--gold); padding: 8px 0 8px 8px; }
.term-in input { flex: 1; background: none; border: 0; color: #fff; padding: 8px; outline: none; }
.chat { display: flex; flex-direction: column; gap: 6px; }
.msg { padding: 6px 8px; border: 2px solid var(--ink); max-width: 90%; white-space: pre-wrap; word-break: break-word; }
.msg.me { align-self: flex-end; background: #dfe8ff; }
.msg.them { align-self: flex-start; background: #fff; }
.msg.sys { align-self: center; border-style: dashed; color: var(--muted); }

/* toasts */
.toasts { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 45; pointer-events: none; align-items: center; }
.toast { background: var(--ink); color: var(--paper); border: 3px solid #000; box-shadow: 3px 3px 0 #000; padding: 6px 10px; font-size: 9px; max-width: min(520px, 90vw); }
.toast.err { color: #ff9a9a; }

/* 3D view: its own controls sit over the canvas */
.r3d-walkbtn { position: absolute; right: 10px; bottom: 48px; z-index: 7; }
.r3d-tint { pointer-events: none; z-index: 3; }
.r3d-hint { position: absolute; left: 10px; bottom: 10px; z-index: 7; background: none; border: 0; color: var(--paper); text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; font-size: 8px; cursor: pointer; }
.r3d-pad { position: absolute; right: 12px; bottom: 88px; z-index: 7; display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 34px); gap: 4px; }
.r3d-pad .btn { padding: 0; font-size: 10px; }
.r3d-pad .btn[data-w="f"] { grid-column: 2; grid-row: 1; }
.r3d-pad .btn[data-w="l"] { grid-column: 1; grid-row: 2; }
.r3d-pad .btn[data-w="b"] { grid-column: 2; grid-row: 2; }
.r3d-pad .btn[data-w="r"] { grid-column: 3; grid-row: 2; }