/* A plain black background, one light cream computer, one cream-screen
   program with dark writing: friendly, not eerie (the owner's word,
   2026-10-07; Onion Skin's dark room and green screen were for a ghost story).
   The screen inside is laid out at 640 x 480, like a 1990s monitor, and
   scaled to fit the window; see fit() in main.js. */
:root {
  color-scheme: light;
  --room: #000;        /* plain black, no gradient */
  --room-glow: #000;
  --plastic: #f1ead7;
  --plastic-hi: #fbf7ec;
  --plastic-lo: #ddd3bb;
  --plastic-dk: #c4b89c;
  --key: #d8cdb0;
  --key-text: #2a2418;
  --p0: #f7f1e1;      /* the cream screen */
  --p1: #ece2c8;      /* panel */
  --p2: #c2ae86;      /* rules and borders */
  --p3: #3d3226;      /* text, dark brown */
  --p4: #2b5797;      /* highlighted text, blue */
  --glowc: rgba(0, 0, 0, 0);   /* no glow */
  --paper: #f3ead0;   /* the sheet beside the computer */
  --paper-lo: #d7c28a;
  --paper-edge: rgba(122, 84, 30, .45);
  --ink: #2b1d10;
  --sw: 640px;        /* screen width, set by main.js */
  --k: 1;             /* 640-wide stage scaled to the screen */
  --kk: 1;            /* keyboard scale; wider than the monitor on phones */
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #000;
  color: var(--p3);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 1em; height: 1em; flex: none; }
[hidden] { display: none !important; }

#room {
  height: 100%; padding-inline: 16px;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--k) * 30px);
  direction: ltr;       /* the paper stands to the right of the computer */
}
#desk { display: flex; flex-direction: column; align-items: center; gap: calc(var(--k) * 18px); }

/* ---------- the monitor ---------- */
#monitor {
  padding: calc(var(--k) * 26px) calc(var(--k) * 30px) 0;
  border-radius: calc(var(--k) * 22px) calc(var(--k) * 22px) calc(var(--k) * 14px) calc(var(--k) * 14px);
  background: var(--plastic);
  box-shadow: inset 0 2px 0 var(--plastic-hi), inset 0 -3px 0 var(--plastic-lo);
}
#screen {
  position: relative;
  width: var(--sw);
  aspect-ratio: 4 / 3;
  border-radius: 7% / 9%;
  overflow: hidden;
  overflow: clip;       /* never scrolls, even when something inside gets focus */
  background: var(--p0);
  box-shadow: 0 0 0 calc(var(--k) * 6px) var(--plastic-dk), 0 0 0 calc(var(--k) * 8px) var(--plastic-lo);
}
#stage {
  position: absolute; top: 0; left: 0;
  width: 640px; height: 480px;
  transform: scale(var(--k)); transform-origin: 0 0;
}
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  border-radius: inherit;
}
body.on .glass { animation: none; }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 48% { opacity: 1; } 91% { opacity: .96; } }

#chin { display: flex; align-items: center; justify-content: space-between; height: calc(var(--k) * 44px); padding-inline: calc(var(--k) * 10px); direction: ltr; }
#chin .badge { width: calc(var(--k) * 64px); height: calc(var(--k) * 10px); border-radius: 2px; background: linear-gradient(90deg, var(--plastic-lo), var(--plastic-dk)); opacity: .6; }
#chin .vents { flex: 1; height: calc(var(--k) * 14px); margin-inline: calc(var(--k) * 40px); background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 7px); }
#chin .led { width: calc(var(--k) * 10px); height: calc(var(--k) * 10px); border-radius: 50%; background: #3a2a14; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
body.on #chin .led { background: #7dff9a; box-shadow: 0 0 8px #58e08a, inset 0 -1px 1px rgba(0, 0, 0, .3); }

/* ---------- views inside the screen ---------- */
.view { position: absolute; inset: 0; }

#off { display: grid; place-items: center; background: #e2d9c3; }
#power {
  width: 120px; height: 120px; border-radius: 50%;
  border: 3px solid var(--p2); background: transparent; color: var(--p3);
  font-size: 58px; display: grid; place-items: center;
  animation: pulse 2.4s ease-in-out infinite;
}
#power:hover, #power:focus-visible { color: var(--p4); border-color: var(--p3); outline: none; box-shadow: 0 0 30px var(--glowc); }
@keyframes pulse { 50% { box-shadow: 0 0 36px var(--glowc); text-shadow: 0 0 12px var(--glowc); } }

#boot { display: grid; place-items: center; background: var(--p0); }
#boot.flash { animation: crt-on .7s ease-out both; }
@keyframes crt-on {
  0% { transform: scale(1, .004); filter: brightness(6); background: #ffffff; }
  45% { transform: scale(1, .004); filter: brightness(4); background: #ffffff; }
  70% { transform: scale(1, 1); filter: brightness(2); background: #efe6d0; }
  100% { transform: scale(1, 1); filter: brightness(1); background: var(--p0); }
}
.boot-box { display: grid; justify-items: center; gap: 22px; color: var(--p3); }
.boot-icon { font-size: 86px; filter: drop-shadow(0 0 10px var(--glowc)); }
.boot-bar { width: 260px; height: 18px; border: 2px solid var(--p3); padding: 2px; direction: ltr; }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--p3) 0 10px, transparent 10px 13px); animation: fill 1.6s steps(20) .7s forwards; }
@keyframes fill { to { width: 100%; } }

/* ---------- the archive program ---------- */
#archive {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 18px 14px;
  background: var(--p0);
  text-shadow: none;
}
.bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--p3); color: var(--p0); text-shadow: none;
  padding: 4px 12px; font-size: 20px; font-weight: 700;
}
/* the date and time in Kabul now, where a computer shows its clock */
.bar .now { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bar .now #now-time { font-variant-numeric: tabular-nums; font-weight: 900; }

.search { display: flex; gap: 10px; }
.search input {
  flex: 1; min-width: 0;
  font: 700 30px/1.3 'Vazirmatn', Tahoma, sans-serif;
  color: var(--p4); caret-color: var(--p4);
  background: var(--p1); border: 2px solid var(--p2);
  padding: 4px 14px; text-shadow: none;
}
.search input:focus { outline: none; border-color: var(--p3); box-shadow: 0 0 12px var(--glowc) inset; }
.go {
  display: flex; align-items: center; gap: 8px;
  font-size: 22px; font-weight: 700;
  padding: 0 16px; border: 2px solid var(--p3);
  background: var(--p1); color: var(--p4); text-shadow: none;
}
.go:hover, .go:focus-visible { background: var(--p3); color: var(--p0); text-shadow: none; outline: none; }
.go.hint { animation: hint 1.2s ease-in-out infinite; }
@keyframes hint { 50% { background: var(--p2); box-shadow: 0 0 18px var(--glowc); } }

/* «۱۰ فلم پیدا شد» at the right; when more were found than can be shown,
   the computer's error in the middle */
.found { min-height: 28px; font-size: 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 12px; color: var(--p3); direction: rtl; }
.found-n { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.found-err { grid-column: 2; white-space: nowrap; }
.found.none { color: var(--p4); }
.found svg { font-size: 22px; }

.results { display: flex; gap: 12px; min-height: 142px; align-items: flex-start; }
.tile {
  width: 108px; display: flex; flex-direction: column; gap: 4px; padding: 0;
  background: none; border: none; color: var(--p3); text-align: center; text-shadow: inherit;
}
.tile .thumb { position: relative; width: 108px; height: 81px; border: 2px solid var(--p2); background: var(--p1); overflow: hidden; }
.tile canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; filter: saturate(.95) contrast(1.03); }   /* in their own colours; Onion Skin tinted them green */
.tile .meta { display: flex; justify-content: space-between; font-size: 18px; padding-inline: 2px; }
.tile .meta b { font-weight: 900; color: var(--p4); }
.tile .seen-mark { position: absolute; top: 3px; left: 3px; font-size: 16px; color: var(--p4); background: var(--p0); padding: 1px 3px; line-height: 1; }
.tile:hover .thumb, .tile:focus-visible .thumb { border-color: var(--p4); box-shadow: 0 0 14px var(--glowc); }
.tile:hover canvas, .tile:focus-visible canvas { filter: saturate(1.05) brightness(1.08); }
.tile:focus-visible { outline: none; }
.tile.new { animation: appear .35s steps(4) both; }
@keyframes appear { from { opacity: 0; } }

.seen { margin-top: auto; border-top: 2px solid var(--p2); padding-top: 10px; display: flex; align-items: center; gap: 12px; }
.seen-label { display: flex; align-items: center; gap: 6px; font-size: 18px; white-space: nowrap; }
.slots { display: flex; gap: 6px; flex: 1; justify-content: space-between; }
.slot {
  position: relative; width: 50px; height: 38px; padding: 0;
  border: 2px dashed var(--p2); background: var(--p0); color: var(--p2);
  font-size: 16px; font-weight: 700; display: grid; place-items: center; cursor: default;
}
.slot.got { border: 2px solid var(--p3); cursor: pointer; color: var(--p4); }
.slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; filter: saturate(.8) brightness(.75); }
.slot span { position: relative; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.slot.got:hover, .slot.got:focus-visible { border-color: var(--p4); outline: none; box-shadow: 0 0 10px var(--glowc); }
.slot.pop { animation: pop .6s steps(3) 2; }
/* many recordings: a grid of small squares instead of slots */
.slots.many { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-start; align-content: flex-start; max-height: 120px; overflow-y: auto; }
.cell { width: 10px; height: 8px; padding: 0; border: 1px solid var(--p2); background: var(--p0); cursor: default; }
.cell.got { background: var(--p3); border-color: var(--p3); cursor: pointer; box-shadow: 0 0 4px var(--glowc); }
.cell.got:hover, .cell.got:focus-visible { background: var(--p4); outline: none; }
.cell.pop { animation: pop .6s steps(3) 2; }
@keyframes pop { 50% { background: var(--p3); } }

/* ---------- watching ---------- */
#player { background: #000; }
#tv { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the camcorder's writing over the picture: white letters on dark bars,
   with the slight red and blue fringes of tape */
.osd { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; direction: ltr; pointer-events: none; }
/* top right: the person's name, the place, the tape, the time and the date */
.osd-info { margin-left: auto; display: grid; justify-items: end; gap: 3px; }
.osd-line {
  font: 800 25px/1.2 'Vazirmatn', Tahoma, sans-serif; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: #f1f0e6; background: rgba(8, 10, 10, .55); padding: 0 9px;
  text-shadow: 1.5px 0 rgba(255, 70, 70, .55), -1.5px 0 rgba(70, 200, 255, .55), 0 0 7px rgba(255, 255, 255, .35);
}
.osd-line:empty { display: none; }
.osd-time { margin-top: 12px; }
/* one row of controls along the bottom of the picture */
.bottom-row { position: absolute; left: 20px; right: 20px; bottom: 18px; height: 54px; display: flex; gap: 10px; }
.ctl {
  width: 54px; height: 54px; padding: 0; display: grid; place-items: center;
  background: rgba(247, 241, 225, .92); color: var(--p3);
  border: 2px solid var(--p2); text-shadow: none;
}
.ctl svg { font-size: 26px; }
#pause, #again { margin-inline-start: auto; }
.ctl:hover, .ctl:focus-visible { background: var(--p3); color: var(--p0); text-shadow: none; outline: none; }

#tv { cursor: pointer; }
.search.after { flex: 1; min-width: 0; }
.search.after input { font-size: 26px; background: rgba(247, 241, 225, .94); }
.search.after .go { width: 54px; padding: 0; justify-content: center; background: rgba(247, 241, 225, .94); }
.search.after .go svg { font-size: 26px; }

/* ---------- the paper beside the computer ----------
   The words of a recording are written here: none while the person is
   speaking, the words so far when the tape is paused, the whole line when
   it ends. The last line stays until another recording plays. */
#side { display: flex; flex-direction: column; align-items: center; gap: calc(var(--k) * 22px); }
#paper {
  --pl: calc(var(--k) * 42px);           /* the distance between ruled lines */
  width: calc(var(--sw) * 0.44); height: calc(var(--sw) * 0.75);
  padding: calc(var(--pl) * 1.2) calc(var(--k) * 34px) calc(var(--k) * 20px) calc(var(--k) * 26px);
  direction: rtl; overflow: hidden;
  transform: rotate(1.6deg);
  /* clean paper: ruled lines and the margin line, no stains or shading */
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--pl) - 1px), rgba(90, 70, 40, .22) calc(var(--pl) - 1px) var(--pl)),
    linear-gradient(270deg, transparent calc(var(--k) * 22px), rgba(170, 60, 50, .35) calc(var(--k) * 22px) calc(var(--k) * 24px), transparent calc(var(--k) * 24px)),
    var(--paper);
  background-position: 0 calc(var(--pl) * 0.2), 0 0, 0 0;
  box-shadow: 0 calc(var(--k) * 12px) calc(var(--k) * 24px) rgba(0, 0, 0, .5);
  border-radius: 2px;
}
.subs {
  margin: 0;
  font-size: calc(var(--k) * 24px); font-weight: 600; line-height: var(--pl);
  color: var(--ink);
  text-shadow: 0 0 1px rgba(43, 29, 16, .5);
}
.subs .w { visibility: hidden; }
.subs .w.on { visibility: visible; cursor: pointer; border-radius: 2px; }
.subs .w.on:hover { background: rgba(120, 80, 20, .16); }
/* one sentence played by itself: the rest of the line is written faintly */
.subs .w.dim { opacity: .35; }
/* a word's meaning: a small slip laid on the paper under the word */
.gloss {
  position: absolute; z-index: 2; max-width: calc(100% - 12px);
  display: grid; gap: calc(var(--k) * 2px); justify-items: center; text-align: center;
  padding: calc(var(--k) * 6px) calc(var(--k) * 12px);
  background: #fbf6e6; color: var(--ink); border: 1px solid rgba(90, 60, 20, .35); border-radius: 2px;
  box-shadow: 0 calc(var(--k) * 4px) calc(var(--k) * 10px) rgba(60, 40, 10, .35);
  transform: rotate(-1.2deg);
}
.gloss b { font: 800 calc(var(--k) * 22px)/1.4 'Vazirmatn', Tahoma, sans-serif; }
.gloss .mean { display: grid; gap: calc(var(--k) * 3px); font: 600 calc(var(--k) * 18px)/1.3 'Vazirmatn', 'Segoe UI', sans-serif; }
.gloss .mean .pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  column-gap: calc(var(--k) * 6px); direction: ltr; }
.gloss .mean .ph { font-weight: 800; }
.gloss .mean .eq { opacity: .6; }
.gloss i { font: italic 500 calc(var(--k) * 17px)/1.3 Georgia, 'Times New Roman', serif; color: #7a4a1c; }
/* more than one sheet: the next one shows behind, and a tab turns to it */
#paper { position: relative; }
#paper.more { box-shadow: inset 0 0 calc(var(--k) * 38px) var(--paper-edge), calc(var(--k) * -7px) calc(var(--k) * 7px) 0 calc(var(--k) * -1px) var(--paper-lo),
  calc(var(--k) * -7px) calc(var(--k) * 7px) 0 0 rgba(90, 60, 20, .5), 0 calc(var(--k) * 18px) calc(var(--k) * 34px) rgba(70, 45, 15, .3); }
.page-turn {
  position: absolute; left: calc(var(--k) * 8px); bottom: calc(var(--k) * 8px);
  display: flex; align-items: center; gap: calc(var(--k) * 6px);
  padding: calc(var(--k) * 4px) calc(var(--k) * 10px); border: none; border-radius: 2px;
  background: linear-gradient(135deg, var(--paper-lo), #c7ae6e); color: var(--ink);
  box-shadow: 0 calc(var(--k) * 2px) calc(var(--k) * 5px) rgba(60, 40, 10, .45);
  font: 700 calc(var(--k) * 20px)/1 'Vazirmatn', Tahoma, sans-serif; direction: ltr;
}
.page-turn svg { font-size: calc(var(--k) * 20px); transform: scaleX(-1); }
.page-turn:hover, .page-turn:focus-visible { background: linear-gradient(135deg, #e3cf92, var(--paper-lo)); outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- the keyboard on the desk ---------- */
#keyboard {
  position: relative;
  display: flex; flex-direction: column; gap: calc(var(--kk) * 6px);
  padding: calc(var(--kk) * 12px) calc(var(--kk) * 14px);
  border-radius: calc(var(--kk) * 10px);
  background: var(--plastic);
  box-shadow: inset 0 2px 0 var(--plastic-hi), 0 16px 30px rgba(0, 0, 0, .5);
}
.krow { display: flex; gap: calc(var(--kk) * 6px); justify-content: center; }
.key {
  width: calc(var(--kk) * 46px); height: calc(var(--kk) * 42px);
  border: none; border-radius: calc(var(--kk) * 5px);
  background: linear-gradient(180deg, #efe6cf, var(--key) 60%, #b9ae90);
  box-shadow: 0 calc(var(--kk) * 3px) 0 #8a7f64, inset 0 -2px 0 rgba(0, 0, 0, .08);
  color: var(--key-text);
  font: 700 calc(var(--kk) * 24px)/1 'Vazirmatn', Tahoma, sans-serif;
  display: grid; place-items: center; padding: 0;
  touch-action: manipulation;
}
.key.wide { width: calc(var(--kk) * 110px); }
.key.space { width: calc(var(--kk) * 250px); }
.key svg { font-size: calc(var(--kk) * 24px); }
.key:active, .key.down { transform: translateY(calc(var(--kk) * 3px)); box-shadow: 0 0 0 #8a7f64; background: #cfc4a6; }
.key:focus-visible { outline: 2px solid var(--p3); outline-offset: 2px; }
.key.enter { background: linear-gradient(180deg, #dbe5ff, #adc2f0 60%, #8099d4); }
/* putting the keyboard away with its X, or with the key beside the paper */
.kb-close {
  position: absolute; top: calc(var(--kk) * -11px); right: calc(var(--kk) * -11px);
  width: calc(var(--kk) * 30px); height: calc(var(--kk) * 30px); border-radius: 50%;
  border: none; padding: 0; display: grid; place-items: center;
  background: var(--plastic-dk); color: var(--plastic-hi);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5); font-size: calc(var(--kk) * 16px);
}
.kb-close:hover, .kb-close:focus-visible { background: #3e3829; outline: none; }
/* at the paper's left edge; the keyboard drawing fills the whole key */
.kb-open {
  align-self: flex-start;
  width: calc(var(--k) * 74px); height: calc(var(--k) * 48px); padding: calc(var(--k) * 5px) calc(var(--k) * 6px);
  border: none; border-radius: calc(var(--k) * 7px);
  background: linear-gradient(180deg, #efe6cf, var(--key) 60%, #b9ae90); color: var(--key-text);
  box-shadow: 0 calc(var(--k) * 4px) 0 #8a7f64, 0 calc(var(--k) * 10px) calc(var(--k) * 18px) rgba(70, 45, 15, .3);
  display: grid; place-items: center; font-size: calc(var(--k) * 30px);
  display: none;   /* no keyboard key, on computers or phones (the owner, 2026-10-07) */
}
.kb-open svg { width: 100%; height: 100%; }
.kb-open[aria-pressed="false"] { background: linear-gradient(180deg, #dbe5ff, #adc2f0 60%, #8099d4); }
.kb-open:active { transform: translateY(calc(var(--k) * 4px)); box-shadow: 0 0 0 #8a7f64; }
/* to the right of the keyboard key: a numbered key for each sentence; the
   sentence playing, or last played, stays pressed down */
.side-keys { align-self: flex-start; display: flex; gap: calc(var(--k) * 14px); direction: ltr; }
.parts { display: flex; gap: calc(var(--k) * 10px); }
.part-key {
  width: calc(var(--k) * 48px); height: calc(var(--k) * 48px); padding: 0;
  border: none; border-radius: calc(var(--k) * 7px);
  background: linear-gradient(180deg, #efe6cf, var(--key) 60%, #b9ae90); color: var(--key-text);
  box-shadow: 0 calc(var(--k) * 4px) 0 #8a7f64, 0 calc(var(--k) * 10px) calc(var(--k) * 18px) rgba(70, 45, 15, .3);
  display: grid; place-items: center;
  font: 800 calc(var(--k) * 28px)/1 'Vazirmatn', Tahoma, sans-serif;
  touch-action: manipulation;
}
.part-key:active, .part-key[aria-pressed="true"] {
  transform: translateY(calc(var(--k) * 4px)); background: #cfc4a6;
  box-shadow: 0 0 0 #8a7f64, 0 calc(var(--k) * 6px) calc(var(--k) * 12px) rgba(70, 45, 15, .28);
}
.part-key:focus-visible { outline: 2px solid var(--p3); outline-offset: 2px; }

/* a phone: the monitor at the very top, the paper under it filling the
   rest of the screen, then the keyboard key and the sentence keys, then
   the keyboard when it is out */
@media (max-width: 699px) {
  #room {
    flex-direction: column; justify-content: flex-start; gap: 10px;
    height: 100%; height: 100dvh;
    padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  #desk { display: contents; }
  #monitor { order: 1; flex: none; }
  #side {
    order: 2; flex: 1; min-height: 0;
    flex-direction: column; align-items: stretch; gap: 10px;
    width: calc(var(--sw) + var(--k) * 60px);
  }
  #keyboard { order: 3; flex: none; }
  #paper {
    flex: 1; width: auto; height: auto; min-height: calc(var(--sw) * 0.34);
    transform: none; --pl: 38px;
    padding: calc(var(--pl) * 0.2) 26px 10px 16px;   /* writing from the very first ruled line */
  }
  .subs { font-size: 22px; }
  .page-turn { font-size: 15px; padding: 4px 9px; }
  .gloss b { font-size: 18px; }
  .gloss .mean { font-size: 14px; }
  .gloss i { font-size: 14px; }
  .side-keys { align-self: flex-start; gap: 10px; }
  .kb-open { display: none; }   /* phones type on their own keyboard (the owner, 2026-10-07) */
  .parts { gap: 10px; }
  .part-key { width: 44px; height: 44px; font-size: 22px; }
}
.kb-open:focus-visible, .kb-close:focus-visible { outline: 2px solid var(--p0); outline-offset: 2px; }

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