/*==============================================================
  alphasim.css — pulpit i karta terminala (komponent)
  --------------------------------------------------------------
  Wydzielone z alphacon.pl. To JEDYNY styl, jakiego potrzebuje
  osadzony terminal: reguły .ac-panel* / .ac-term* i domyślna
  paleta SPRZĘTOWA jako tokeny (--ac-term, --ac-led-*, --ac-panel-*).

  Tokeny są WEJŚCIEM MOTYWU: host (np. alphacon) może je nadpisać,
  a `SET TERMINAL/SKIN` przez adapter hosta ustawia html[data-skin],
  co zmienia palety w alphasim-skins.css. Font terminala: VT323
  (fonts.css). Wszystko self-hosted, bez zależności zewnętrznych.
==============================================================*/

/* --- tokeny: domyślna paleta sprzętowa (nadpisywalna przez host) --- */
/* --- ciemny (domyślny) ---
   Ten sam blok obsługuje dwie rzeczy: motyw ciemny ORAZ pas odwrócony
   wewnątrz motywu jasnego. Dzięki temu każda paleta jest zapisana raz. */
:root,
[data-theme="dark"],
[data-theme="light"] .ac-invert {
  --ac-bg:          #14100d;
  --ac-surface:     #1c1712;
  --ac-card:        #231c17;
  --ac-line:        #3a2f26;
  --ac-line2:       #2b231c;
  --ac-inputborder: #46392b;

  --ac-ink:    #f7f2ea;
  --ac-strong: #ddd3c5;
  --ac-muted:  #a89c8c;
  --ac-faint:  #9a8b79;

  /* akcent tekstowy — bursztyn lampki, ~10:1 na ciepłej czerni */
  --ac-acc:       #ffab1f;
  --ac-acc-soft:  rgba(255, 171, 31, 0.35);
  --ac-acc-wash:  rgba(255, 171, 31, 0.09);

  /* przycisk: rozjaśniona czerwień z ciemnym tekstem — jak etykieta
     ostrzegawcza na sprzęcie. Biały tekst na #e0402f dałby 4,2:1. */
  --ac-btn-bg:       #ff5c45;
  --ac-btn-bg-hover: #ff7f6c;
  --ac-btn-ink:      #1a0d09;

  /* kategorie */
  --ac-red:   #e0402f;
  --ac-blue:  #3a7bd5;
  --ac-amber: #ffab1f;
  --ac-magenta: #e85ac0;
  --ac-red-text:   #ff7a66;
  --ac-blue-text:  #7db0ee;
  --ac-amber-text: #ffab1f;
  --ac-magenta-text: #f58ad2;

  /* panel IMSAI */
  --ac-panel-bg:   #0d0a07;
  --ac-panel-face: #1a140f;
  --ac-panel-slot: #241c15;
  --ac-panel-dim:  #948674;
  /* Dioda świeci tym samym kolorem w obu motywach — panel jest sprzętem,
     a nie elementem interfejsu, więc nie może iść za --ac-amber, które
     w motywie jasnym robi się ciemnobrązowe. */
  --ac-led-on:     #ffab1f;
  /* ATTN i REMOTE świeciły na 11/780 czerwono. Osobny token, a nie
     --ac-red, z tego samego powodu co wyżej: lampka jest sprzętem. */
  --ac-led-red:    #ff4a32;
  --ac-led-off:    #33281b;
  --ac-screw:      #3f3427;

  /* terminal — bursztynowy CRT, ciemny w obu motywach */
  --ac-term:     #ffb31f;
  --ac-term-rgb: 255 179 31;
  --ac-term-dim: #ab7a2b;
  --ac-term-bg:  #120d07;

  --ac-navbg: rgba(20, 16, 13, 0.86);
  --ac-shadow: rgba(0, 0, 0, 0.45);

  --ac-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ac-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --ac-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- jasny — i pas odwrócony wewnątrz motywu ciemnego --- */
[data-theme="light"],
[data-theme="dark"] .ac-invert {
  --ac-bg:          #f4eee3;
  --ac-surface:     #eae2d3;
  --ac-card:        #fdfaf4;
  --ac-line:        #d3c7b4;
  --ac-line2:       #ded4c3;
  --ac-inputborder: #c2b49d;

  --ac-ink:    #17130f;
  --ac-strong: #332c24;
  --ac-muted:  #5c5449;
  --ac-faint:  #6b6255;

  --ac-acc:      #8f5300;
  --ac-acc-soft: rgba(143, 83, 0, 0.35);
  --ac-acc-wash: rgba(143, 83, 0, 0.07);

  --ac-btn-bg:       #c9301f;
  --ac-btn-bg-hover: #a52618;
  --ac-btn-ink:      #ffffff;

  --ac-red:   #c9301f;
  --ac-blue:  #2f66b5;
  --ac-amber: #b06a00;
  --ac-magenta: #a3186f;
  --ac-red-text:   #b32a1a;
  --ac-blue-text:  #2a5da6;
  --ac-amber-text: #8f5300;
  --ac-magenta-text: #93165f;

  --ac-panel-bg:   #17130f;
  --ac-panel-face: #241c15;
  --ac-panel-slot: #2e2419;
  --ac-panel-dim:  #9a8b76;
  --ac-led-on:     #ffab1f;
  --ac-led-red:    #ff4a32;
  --ac-led-off:    #3b2f20;
  --ac-screw:      #564835;

  --ac-navbg: rgba(244, 238, 227, 0.88);
  --ac-shadow: rgba(60, 45, 25, 0.14);
}

/* --- pulpit i karta terminala --- */
/* Mono-nota z kilku linii. <figure> dopuszcza tylko jeden <figcaption>,
   więc kolejne wiersze podpisu są blokami w środku, nie osobnymi elementami. */
.ac-mono-line { display: block; }

.ac-mono-line + .ac-mono-line { margin-top: 6px; }

/* --- panel przednich przełączników IMSAI ---------------------
   Zastępuje szablonową animację fal (WebGL, 253 linie JS), która
   pasowałaby do dowolnej firmy. Tu jest czysty CSS, zero obrazków.
   Cały panel jest dekoracją — w HTML ma aria-hidden.

   UWAGA: od sierpnia 2026 maszyną edycji jest VAX-11/780 i tego
   panelu NIE MA już w żadnym HTML-u. Reguły zostają razem z kodem
   maszyny w machines/imsai/js/ — to jedno wyjście awaryjne na wypadek,
   gdyby VAX nie zdążył na 8 października. Skasować po edycji,
   razem z emulatorem, a nie osobno.                                */
.ac-panel {
  background:
    radial-gradient(circle at 10px 10px, var(--ac-screw) 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--ac-screw) 1.6px, transparent 2px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--ac-screw) 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--ac-screw) 1.6px, transparent 2px),
    linear-gradient(180deg, var(--ac-panel-face), var(--ac-panel-bg));
  background-repeat: no-repeat;
  border: 1px solid var(--ac-line);
  border-radius: 4px;
  padding: 20px 22px 18px;
  box-shadow: 0 18px 44px var(--ac-shadow);
}

.ac-panel-cap {
  display: flex;
  justify-content: space-between;
  font-family: var(--ac-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-panel-dim);
  margin-bottom: 14px;
}

.ac-leds {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
  margin-bottom: 9px;
}

.ac-leds i {
  /* grid rozciągnąłby diody w elipsy — stała szerokość i wyśrodkowanie */
  width: 9px;
  height: 9px;
  justify-self: center;
  border-radius: 50%;
  background: var(--ac-led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

.ac-leds i.on {
  background: var(--ac-led-on);
  box-shadow: 0 0 7px var(--ac-led-on);
}

/* Cztery niewspółmierne okresy — diody nie układają się w widoczny wzór */
.ac-leds i.b1 { animation: ac-lamp 1.1s steps(1, end) infinite; }

.ac-leds i.b2 { animation: ac-lamp 0.7s steps(1, end) infinite; }

.ac-leds i.b3 { animation: ac-lamp 1.7s steps(1, end) infinite; }

.ac-leds i.b4 { animation: ac-lamp 2.3s steps(1, end) infinite; }

@keyframes ac-lamp {
  0%, 55% { background: var(--ac-led-on); box-shadow: 0 0 7px var(--ac-led-on); }
  56%, 100% { background: var(--ac-led-off); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); }
}

.ac-leds-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--ac-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ac-panel-dim);
  margin: 0 0 16px;
}

.ac-sws {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
}

.ac-sw {
  position: relative;
  height: 42px;
  border-radius: 2px;
  /* wgłębienie w panelu: jaśniej u góry, ciemniej u dołu */
  background: linear-gradient(180deg, rgba(0,0,0,0.55), var(--ac-panel-slot) 45%, rgba(0,0,0,0.4));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Sam kontakt jest wąski i pionowy — kwadrat na całą szerokość gniazda
   czytał się jak przypadkowa kolorowa plamka, a nie jak przełącznik. */
.ac-sw::after {
  content: '';
  position: absolute;
  left: 26%; right: 26%;
  height: 19px;
  border-radius: 1.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: top .12s ease, bottom .12s ease;
}

.ac-sw.r::after { background: var(--ac-red); }

.ac-sw.b::after { background: var(--ac-blue); }

.ac-sw.up::after { top: 1px; }

.ac-sw.down::after { bottom: 1px; }

/* Przełączniki dają się przerzucać myszą. Nic nie robią — o to chodzi. */
.ac-sw.up:hover::after { top: auto; bottom: 1px; }

.ac-sw.down:hover::after { bottom: auto; top: 1px; }

.ac-panel-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--ac-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ac-panel-dim);
  margin-top: 10px;
}

/* Notka statusu maszyny. Stoi POD pulpitem i ma być cicha: to podpis
   pod eksponatem, a nie napis na obudowie. Wcześniej siedziała
   w karcie, dziedziczyła jej duży krój i mówiła głośniej niż legendy
   przełączników, czyli niż rzeczy, które na tej maszynie są prawdziwe.

   Pusta znika bez rezerwowania miejsca, bo pojawia się dopiero po
   PWR — a `role="status"` i tak przeczyta ją czytnik ekranu. */
.ac-panel-note {
  margin: 10px 2px 0;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ac-muted);
}

.ac-panel-note:empty { display: none; }

/* „Wyczyść mój zapis". Świadomie NIE wygląda jak kontrolka pulpitu —
   stoi pod eksponatem, w warstwie strony. Dyskretny, w tonie noty;
   pokazuje się dopiero, gdy maszyna żyje (panel.js zdejmuje hidden). */
.ac-save {
  display: inline-block;
  margin: 8px 2px 0;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-muted);
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 2px;
  padding: 4px 10px;
  cursor: pointer;
  transition: none !important;
}

.ac-save[hidden] { display: none; }

.ac-save:hover { color: var(--ac-led-on); border-color: var(--ac-led-on); }

.ac-save:active { transform: translateY(1px); }

.ac-save:focus-visible {
  outline: 2px solid var(--ac-led-on) !important;
  outline-offset: 2px;
}

/* Podpis-zadanie pod pulpitem: mniejszy niż zwykła mono-nota, żeby zmieścić
   trzy pytania CTF w jednej linii na szerokości panelu (2-kolumnowy hero,
   >=1200px). Węziej hero składa się do jednej kolumny i podpis może zawinąć. */
.ac-panel-task { font-size: 11px; margin-top: 14px; }

@media (min-width: 1200px) {
.ac-panel-task .ac-mono-line { white-space: nowrap; }
}

@media (max-width: 1199px) {
.ac-panel { max-width: 560px; }
}

@media (max-width: 575px) {
.ac-panel { padding: 16px 14px 14px; }
.ac-sws { grid-template-columns: repeat(8, 1fr); }
.ac-sw { height: 36px; }
.ac-sw::after { height: 16px; }
.ac-leds { gap: 5px; }
}

/*--------------------------------------------------------------
  6b. Panel po włączeniu zasilania

  Wszystko pod .ac-panel[data-live], więc stan przed aktywacją
  zostaje bajt w bajt dzisiejszy. JS nie ustawia tu ani jednego
  koloru — podaje wyłącznie liczbę --l (0..1), czyli jasność
  diody. Kolory zostają w tokenach i skórki działają dalej.
--------------------------------------------------------------*/

/* Przycisk zasilania. Jedyny nowy przystanek tabulacji w hero
   przed włączeniem maszyny. */
.ac-pwr {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ac-panel-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 1px 5px;
  margin: -1px -5px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.ac-pwr:hover { color: var(--ac-led-on); border-color: var(--ac-led-on); }

.ac-panel[data-live] .ac-pwr { color: var(--ac-led-on); border-color: var(--ac-led-on); }

.ac-panel[data-error] .ac-pwr { color: var(--ac-red-text); border-color: var(--ac-red-text); }

/* --- diody sterowane wypełnieniem magistrali --- */
.ac-panel[data-live] .ac-leds i {
  position: relative;
  background: var(--ac-led-off);
  animation: none !important;
}

.ac-panel[data-live] .ac-leds i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ac-led-on);
  box-shadow: 0 0 7px var(--ac-led-on);
  opacity: var(--l, 0);
}

/* --- przełączniki ---
   W trybie live bank schodzi do ośmiu kolumn na KAŻDEJ szerokości.
   Bez tego szesnaście przełączników stoi pod ośmioma diodami
   w proporcji 2:1 i gracz nie wie, który przełącznik jest „pod"
   świecącą diodą — a to najważniejsza afordancja tej gry.
   Przy okazji cel dotykowy rośnie z ~28 px do ~42 px. */
.ac-panel[data-live] .ac-sws { grid-template-columns: repeat(8, 1fr); gap: 4px; }

.ac-panel[data-live] .ac-sw {
  height: 46px;
  padding: 0;
  border: 0;
  cursor: pointer;
  /* Szablon ma `button { transition: all ease 0.4s }` (style.css:207) —
     przełącznik przerzucałby się jak w smole. */
  transition: none !important;
}

/* Po przejściu na osiem kolumn gniazdo jest dwa razy szersze, więc
   kontakt trzeba zwęzić — inaczej z przełącznika robi się klocek. */
.ac-panel[data-live] .ac-sw::after {
  left: 35%;
  right: 35%;
  height: 21px;
  transition: top .1s ease, bottom .1s ease;
}

/* Przerzucanie na hover było żartem („nic nie robią — o to chodzi").
   Po ożywieniu stałoby się błędem: mysz przejeżdżająca nad panelem
   przestawiałaby stan gry. */
.ac-panel[data-live] .ac-sw.up:hover::after { top: 1px; bottom: auto; }

.ac-panel[data-live] .ac-sw.down:hover::after { bottom: 1px; top: auto; }

.ac-panel[data-live] .ac-sw[aria-checked="true"]::after { top: 1px; bottom: auto; }

.ac-panel[data-live] .ac-sw[aria-checked="false"]::after { bottom: 1px; top: auto; }

/* Szablon gasi obrys focusa (style.css:136) — bez tego bank
   przełączników jest nieobsługiwalny z klawiatury. */
.ac-panel[data-live] .ac-sw:focus-visible,
.ac-panel[data-live] .ac-pbtn:focus-visible,
.ac-pwr:focus-visible {
  outline: 2px solid var(--ac-led-on) !important;
  outline-offset: 2px;
}

/* --- pulpit sterowniczy --- */
.ac-panel[data-live] .ac-panel-foot { gap: 6px; }

.ac-pbtn {
  font-family: var(--ac-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-panel-dim);
  background: transparent;
  border: 1px solid var(--ac-line);
  border-radius: 2px;
  padding: 5px 7px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.ac-pbtn:hover { color: var(--ac-led-on); border-color: var(--ac-led-on); }

.ac-pbtn[aria-pressed="true"] { color: var(--ac-led-on); border-color: var(--ac-led-on); }

/* --- wiersz stanu --- */
.ac-panel-status {
  font-family: var(--ac-font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ac-panel-dim);
  margin: 12px 0 0;
  min-height: 2.2em;
}

.ac-panel[data-won] .ac-panel-status { color: var(--ac-led-on); }

@media (max-width: 575px) {
.ac-panel[data-live] .ac-sw { height: 40px; }
.ac-pbtn { font-size: 7.5px; padding: 5px 5px; letter-spacing: 0.1em; }
}

/*--------------------------------------------------------------
  6c. Pulpit VAX-11/780

  Pulpit 11/780 to cztery lampki i trzy przełączniki — żadnego
  Deposit, żadnego Examine, żadnych diod adresowych. Przeklejenie
  banku przełączników IMSAI byłoby kłamstwem o konkretnej maszynie,
  a to jedyna rzecz, której ta strona sobie nie pozwala.

  Układ i legendy są przepisane z dokumentacji DEC-a (VMS Upgrade
  and Installation Supplement: VAX-11/780, 785, rozdz. 1.2):

      lampki      ATTN · RUN · POWER · REMOTE
      Keylock     pokrętło, pięć pozycji (mamy trzy — patrz panel.js)
      Auto Restart pokrętło, dwie pozycje: Off i On
      Boot        przełącznik sprężynowy, wraca sam

  Poprzednia wersja miała lampkę ERROR i prostokątny guzik z napisem
  LOCAL. Jedno i drugie było wymyślone: ERROR nie jest legendą z tego
  pulpitu, a kluczyk jest OBROTOWY i wyglądał jak guzik tylko dlatego,
  że nikt go nie narysował.

  Podział ról jest ten sam co piętro niżej: JS nie ustawia tu ani
  jednego koloru, podaje wyłącznie liczby --l (0..1) i --deg. Kolory
  zostają w tokenach, więc skórki edycji działają dalej.
--------------------------------------------------------------*/
.ac-lamps,
.ac-lamps-label {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ac-lamps { margin-bottom: 9px; }

.ac-lamps i {
  /* grid rozciągnąłby lampkę w elipsę — stała szerokość i wyśrodkowanie */
  width: 11px;
  height: 11px;
  justify-self: center;
  border-radius: 50%;
  background: var(--ac-led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* Na wyłączonej maszynie pulsuje sama lampka zasilania. To jedyny
   ruch na martwym pulpicie i jedyna podpowiedź, że da się go
   włączyć — bank IMSAI miał do tego cztery migające diody.

   Wybieramy ją po nazwie, a nie po pozycji: POWER stoi teraz jako
   trzecia, bo taka jest kolejność na pulpicie 11/780, i `first-child`
   pulsowałby lampką ATTN. */
.ac-panel:not([data-live]) .ac-lamps i[data-lamp="power"] {
  animation: ac-lamp 2.3s steps(1, end) infinite;
}

.ac-lamps-label {
  font-family: var(--ac-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-panel-dim);
  margin: 0 0 18px;
}

.ac-lamps-label span { text-align: center; }

/* --- rząd przełączników --- */
.ac-ctl {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
}

.ac-dialcap {
  display: block;
  font-family: var(--ac-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-panel-dim);
  text-align: center;
  margin-top: 7px;
  white-space: nowrap;
}

/* --- pokrętła: Keylock i Auto Restart ---
   Oba NIE SĄ dekoracją: kluczyk zatrzymuje procesor i odcina konsolę,
   Auto Restart decyduje, czy maszyna wstaje sama, czy zatrzymuje się
   na `>>>`. Dlatego oba są zwykłymi <button> i zostają poza
   aria-hidden — dekoracyjne są tylko krążek i legendy w środku. */
/* Szerokość liczy się z legendami, a nie z samym krążkiem: napis
   REMOTE stoi OBOK pokrętła i musi mieścić się w przycisku, inaczej
   wychodzi poza niego i zderza się z sąsiadem przy pierwszej
   węższej kolumnie. Krążek ma 40 px, reszta to miejsce na podpisy. */
.ac-key,
.ac-auto {
  position: relative;
  height: 60px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  /* Szablon ma `button { transition: all ease 0.4s }` (style.css:207) —
     kluczyk przekręcałby się jak w smole. */
  transition: none !important;
}

.ac-key[disabled],
.ac-auto[disabled] { cursor: default; opacity: 0.45; }

.ac-key { width: 104px; }

.ac-auto { width: 86px; }

.ac-key  .ac-dial { left: 26px; }

.ac-auto .ac-dial { left: 24px; }

.ac-dial {
  position: absolute;
  top: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, var(--ac-screw), var(--ac-panel-bg) 70%),
    var(--ac-panel-slot);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.14), 0 2px 5px rgba(0, 0, 0, 0.7);
}

/* Nacięcie na klucz — to ono robi z krążka kluczyk, a nie guzik. */
.ac-dial::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 20px;
  margin: -10px 0 0 -1.5px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  transform: rotate(var(--deg, 0deg));
  transition: transform .12s ease;
}

/* Wskazówka wychodzi poza krążek — bez niej nie widać, na co pokazuje. */
.ac-dial::after {
  content: '';
  position: absolute;
  left: 50%; top: -6px;
  width: 2px; height: 10px;
  margin-left: -1px;
  background: var(--ac-led-on);
  /* Oś obrotu to ŚRODEK krążka, a nie środek wskazówki: krążek ma
     40 px, dolna krawędź wskazówki leży 4 px pod jego górą, więc do
     środka brakuje 16. */
  transform-origin: 50% calc(100% + 16px);
  transform: rotate(var(--deg, 0deg));
  transition: transform .12s ease;
}

.ac-key i,
.ac-auto i {
  position: absolute;
  font-family: var(--ac-font-mono);
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-panel-dim);
  white-space: nowrap;
}

/* Legendy stoją tam, gdzie pokazuje wskazówka: Off w lewo, Local
   w górę, Remote w prawo. Górna jest wyśrodkowana nad KRĄŻKIEM,
   a nie nad przyciskiem — przycisk jest szerszy o miejsce na Remote. */
.ac-key i:nth-of-type(1) { left: 0; top: 32px; }

.ac-key i:nth-of-type(2) { left: 46px; top: 0; transform: translateX(-50%); }

.ac-key i:nth-of-type(3) { left: 70px; top: 32px; }

/* Auto Restart ma dwie pozycje, więc obie legendy idą po bokach. */
.ac-auto i:nth-of-type(1) { left: 0; top: 26px; }

.ac-auto i:nth-of-type(2) { left: 68px; top: 26px; }

/* Pozycja Remote gasi konsolę lokalną, więc wskazówka zmienia kolor
   na ten sam, którym świeci lampka REMOTE. */
.ac-key[data-pos="2"] .ac-dial::after { background: var(--ac-led-red); }

.ac-key[data-pos="0"] .ac-dial::after { background: var(--ac-panel-dim); }

.ac-auto[data-pos="0"] .ac-dial::after { background: var(--ac-panel-dim); }

/* --- Boot: przełącznik sprężynowy ---
   Na oryginale wraca do Off, gdy go puścisz, i wydaje domyślną
   procedurę rozruchową. Tutaj robi dokładnie to samo. */
.ac-boot {
  font-family: var(--ac-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-panel-dim);
  background: linear-gradient(180deg, rgba(0,0,0,0.5), var(--ac-panel-slot) 45%, rgba(0,0,0,0.4));
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  padding: 9px 14px;
  margin-top: 15px;
  cursor: pointer;
  transition: none !important;
}

.ac-boot[disabled] { cursor: default; opacity: 0.45; }

.ac-boot:not([disabled]):hover { color: var(--ac-led-on); border-color: var(--ac-led-on); }

/* Sprężyna: wciśnięty guzik siada o piksel i wraca sam. */
.ac-boot:not([disabled]):active { transform: translateY(1px); }

/* Szablon gasi obrys focusa (style.css:136) — bez tego pulpitu
   nie da się obsłużyć z klawiatury. */
.ac-key:focus-visible,
.ac-auto:focus-visible,
.ac-boot:focus-visible {
  outline: 2px solid var(--ac-led-on) !important;
  outline-offset: 2px;
}

/* --- napęd konsolowy CSA1 ---
   Też nie jest ozdobą, choć długo nią był. Zatrzask NAPRAWDĘ wysuwa
   dyskietkę, a wtedy maszyna przestaje wstawać: konsola 11/780 czytała
   procedurę rozruchową właśnie stąd i bez niej 11/780 nie startował,
   choćby dysk systemowy był w idealnym stanie. Dlatego to <button>,
   a nie <div> schowany w aria-hidden.

   Napęd dostaje własny wiersz, bo w kolumnie hero nie mieści się obok
   przełączników — a wciśnięty na siłę wypychał je poza kartę. Osobny
   wiersz czyta się zresztą jak osobna szuflada, czyli tak, jak było. */
.ac-drive {
  flex-basis: 100%;
  height: 54px;
  margin-top: 4px;
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), var(--ac-panel-slot) 40%, rgba(0,0,0,0.45));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  position: relative;
  cursor: pointer;
  transition: none !important;
}

.ac-drive[disabled] { cursor: default; opacity: 0.45; }

.ac-drive::after {                      /* zatrzask */
  content: '';
  position: absolute;
  right: 15%; top: 50%;
  width: 13px; height: 15px;
  margin-top: -8px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ac-screw), var(--ac-panel-bg));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

.ac-drive:not([disabled]):hover::after {
  background: linear-gradient(180deg, var(--ac-panel-dim), var(--ac-screw));
}

.ac-drive:focus-visible {
  outline: 2px solid var(--ac-led-on) !important;
  outline-offset: 2px;
}

/* Szczelina jest zawsze, dyskietka nie. Pusty napęd to czarna szpara —
   jedyna rzecz na tym pulpicie, po której widać, że maszyna nie ruszy. */
.ac-drive-slot {
  position: absolute;
  left: 12%; right: 24%; top: 42%;
  height: 7px;
  border-radius: 1px;
  background: var(--ac-panel-bg);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.07);
}

.ac-drive[data-media="in"] .ac-drive-slot::after {
  content: '';
  position: absolute;
  top: 1px; bottom: 1px; left: 2px; right: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--ac-screw), var(--ac-panel-slot));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.ac-drive-cap {
  position: absolute;
  left: 12%; bottom: 9px;
  font-family: var(--ac-font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  color: var(--ac-panel-dim);
}

/* Pusty napęd mówi to wprost. Bez tego wysunięta dyskietka wygląda na
   drobiazg graficzny, a nie na zdjętą zależność — i człowiek szuka
   błędu w emulatorze zamiast w napędzie. */
.ac-drive[data-media="out"] .ac-drive-cap::after {
  /* Dwa napisy obok siebie, bo sekwencja \00b7 zjada spację po sobie
     — jednym napisem wychodziło „·no medium". */
  content: ' \00b7' ' no medium';
  color: var(--ac-led-red);
}

@media (max-width: 575px) {
.ac-lamps-label { font-size: 7.5px; letter-spacing: 0.08em; }
.ac-ctl { gap: 22px; }
/* Napęd znika pierwszy: jest scenerią, a przełączniki nie są. */
  .ac-drive { display: none; }
}

/*--------------------------------------------------------------
  9. Terminal CRT — bursztyn zamiast zieleni, żeby został w palecie
--------------------------------------------------------------*/
.ac-term {
  position: relative;
  background: var(--ac-term-bg);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgb(var(--ac-term-rgb) / 0.3);
  box-shadow: 0 0 0 1px rgb(var(--ac-term-rgb) / 0.07),
              0 14px 32px var(--ac-shadow),
              inset 0 0 60px rgb(var(--ac-term-rgb) / 0.05);
}

.ac-term::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px);
}

.ac-term-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-bottom: 1px solid rgb(var(--ac-term-rgb) / 0.16);
  font-family: 'VT323', var(--ac-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ac-term-dim);
}

.ac-led {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ac-term);
  box-shadow: 0 0 6px rgb(var(--ac-term-rgb) / 0.8);
  display: inline-block;
  flex: 0 0 auto;
}

.ac-term-wrap { padding: 14px 14px 18px; }

/* Rozstaw i interlinia stoją w zmiennych, bo liczą z nich TRZY rzeczy:
   wydruk, nakładka kursora i wysokość kontenera ze scrollem. Trzy kopie
   tych liczb rozjechałyby się przy pierwszej poprawce.

   Deklarujemy je na KARCIE, a nie na wydruku, bo `.ac-term-wrap` jest
   rodzeństwem wydruku w dół drzewa — własność zadeklarowana na
   `.ac-term-body` nigdy by tam nie doszła. */
.ac-term { --ac-ls: 0.02em; --ac-lh: 1.45; }

/* GEOMETRIA EKRANU, nie upodobanie typograficzne. Znak VT323 ma
   szerokość 0,42 stopnia pisma, więc przy interlinii 1,45 komórka jest
   3,45 raza wyższa niż szersza — a prawdziwy VT100 ma ten stosunek
   równy 2,5, bo osiemdziesiąt kolumn na dwadzieścia cztery wiersze
   siedziało na kineskopie 4:3.

   Dopóki karta pokazywała kilkanaście ostatnich wierszy, nie było tego
   widać. Odkąd pokazuje CAŁY ekran, wychodziło okno wyższe niż szersze
   — czyli terminal w portrecie, czego nikt nigdy nie widział.

   1,05 daje dokładnie 4:3: 80 x 0,42 x F szerokości na 24 x 1,05 x F
   wysokości. Martwa karta w hero zostaje przy 1,45, bo nie jest
   ekranem — jest pięcioma wierszami wpisanymi w HTML. */
.ac-term.is-live { --ac-lh: 1.05; }

/* TELEFON — karta JEST OKNEM, a nie kolumną w stronie. Klasę stawia
   szyba (shared/glass.js): okno węższe niż 600 px, a karta zajmuje co
   najmniej jego połowę. Dwie rzeczy, obie o czytelności przy dziesięciu
   pikselach, i obie z tego samego zgłoszenia co sam próg.

   WYPEŁNIENIE. Czternaście pikseli z każdej strony to na telefonie
   siedem procent szerokości karty — a szerokość przekłada się WPROST na
   stopień pisma, bo szyba dobiera go tak, żeby osiemdziesiąt kolumn
   wypełniło ją co do krawędzi. Te siedem procent to cały piksel pisma,
   czyli dziesięć procent jego wielkości. Na desktopie oddajemy je za
   powietrze wokół wydruku i słusznie; na telefonie oddajemy je za
   powietrze przy samej krawędzi ekranu, którego nikt nie ogląda.

   INTERLINIA. 1,05 stoi wyżej po to, żeby karta miała proporcję 4:3
   prawdziwego VT100, i przy dziewiętnastu pikselach wygląda jak
   terminal. Przy dziesięciu wygląda jak zbity blok — i to on męczy oko
   bardziej niż sam rozmiar liter, bo mały tekst potrzebuje światła
   między wierszami. Pionu jest tam w nadmiarze: ekran rośnie z ~250 do
   ~340 px i dalej mieści się nad klawiaturą. Proporcji 4:3 i tak nie ma
   tam czego ratować, bo okno telefonu jest pionowe. */
.ac-term.is-tight .ac-term-wrap { padding: 8px 4px 10px; }
.ac-term.is-live.is-tight { --ac-lh: 1.35; }

/* ...a na koniec KARTA WYCHODZI Z MARGINESÓW STRONY. Zmierzone na
   telefonie: ekran 402 px, karta 376 px — te dwadzieścia sześć pikseli
   to gutter kolumny, w której karta stoi. Na desktopie kupują oddech
   między kartą a resztą strony; na telefonie kupują pasek tła przy
   krawędzi ekranu, a płaci za nie stopień pisma, bo szyba dobiera go do
   szerokości. Zmierzone przy prawdziwym VT323: szyba 366 px daje pismo
   10 px, szyba 383 px — już 11 px. Cała różnica to właśnie ten gutter.

   `calc(50% - 50vw)` cofa kartę o dokładnie tyle, ile odsunął ją rodzic,
   nie wiedząc nic o jego wypełnieniu — a dzięki temu ta sama reguła
   działa i pod bootstrapem na alphacon.pl, i na stronach demo. Bocznych
   krawędzi przy samym brzegu ekranu nie rysujemy: nie ma już czego od
   czego oddzielać, a dwa piksele ramki to dwa piksele szyby.

   Zastrzeżenie, żeby nie zaskoczyło: gdyby ta klasa trafiła na OKNO
   DESKTOPOWE węższe niż 600 px na systemie z klasycznym paskiem
   przewijania, `50vw` liczy się razem z tym paskiem i strona dostanie
   przewijanie w bok. Na telefonie, czyli tam, gdzie ta klasa naprawdę
   wchodzi, paska nie ma. */
.ac-term.is-tight {
  margin-inline: calc(50% - 50vw);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.ac-term-body {
  font-family: 'VT323', var(--ac-font-mono);
  /* Stopień pisma dobiera KARTA, nie ten arkusz: żywy terminal skaluje
     się tak, żeby zadeklarowana liczba kolumn wypełniła szybę co do
     krawędzi (patrz shared/glass.js). Dziewiętnaście zostaje wartością
     zapasową i to jest ta, którą widać na MARTWEJ karcie w hero — tam
     nie ma czego mierzyć ani do czego dopasowywać. */
  font-size: var(--ac-term-size, 19px);
  color: var(--ac-term);
  letter-spacing: var(--ac-ls);
  text-shadow: 0 0 2px rgb(var(--ac-term-rgb) / 0.45), 0 0 7px rgb(var(--ac-term-rgb) / 0.2);
  line-height: var(--ac-lh);
}

/* pre-wrap TYLKO dla żywej maszyny. Żywy render() składa ciasne
   <div>-y bez odstępów, a spacje niosą treść (kolumny DIRECTORY,
   wcięcia, rysunek z bloku rozruchowego), więc pre-wrap jest tam
   konieczny. Statyczna karta w hero ma jednak wcięcia i nowe linie
   MIĘDZY <div>-ami wprost w HTML-u — pod pre-wrap renderowały się jako
   puste przestrzenie i po wyłączeniu maszyny (stop() przywraca ten
   statyczny HTML) karta się rozjeżdżała. Domyślne `normal` zwija te
   odstępy i statyczna treść stoi równo. */
.ac-term.is-live .ac-term-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* Szyba jest szeroka na tyle kolumn, ile dostał SYSTEM — a nie na
     tyle, ile ma karta. Zwykle jest to jedno i to samo, bo glass.js
     dobiera pismo do krawędzi; różnią się dopiero wtedy, gdy stopień
     pisma dobił do sufitu na bardzo dużym ekranie. Wtedy nadmiar
     szerokości rozkłada się PO OBU stronach, jak ramka kineskopu,
     zamiast zostać pustym pasem po prawej. */
  max-width: var(--ac-term-width, none);
  margin-inline: auto;
}

.ac-prompt { color: var(--ac-term-dim); margin-right: 6px; }

.ac-cursor {
  display: inline-block;
  width: 0.55em; height: 0.95em;
  vertical-align: -0.1em;
  background: var(--ac-term);
  box-shadow: 0 0 6px rgb(var(--ac-term-rgb) / 0.7);
  /* W `em`, jak reszta kursora: stopień pisma zmienia się teraz razem
     z szerokością szyby, a odstęp podany w pikselach rósłby przy małym
     terminalu i ginął przy dużym. */
  margin-left: 0.2em;
  animation: ac-blink 1s steps(1) infinite;
}

/* KURSOR ŻYWEJ KARTY JEST NAKŁADKĄ, nie znakiem doklejonym na końcu
   wiersza. Odkąd karta rysuje z siatki (shared/vt.js), kursor musi stać
   pod DOWOLNĄ kolumną — a rozcinanie tekstu wiersza wokół niego zabiłoby
   rysowanie przyrostowe: każdy ruch kursora brudziłby cały wiersz.

   Kolumnę i wiersz podaje karta w --ac-cur-col i --ac-cur-row. Metryki
   nie mierzymy: pismo jest o stałej szerokości, więc kolumna to `1ch`
   plus rozstaw, a wiersz to interlinia — obie wzięte z tych samych
   zmiennych, z których rysuje się tekst.

   MARTWA KARTA W HERO zostaje bez zmian: tam kursor jest wpisany w HTML
   na końcu wiersza i ma być zwykłym inline-block z reguły wyżej. */
.ac-term.is-live .ac-term-body { position: relative; }
/* KAŻDY WIERSZ ZAJMUJE SWOJĄ WYSOKOŚĆ, TAKŻE PUSTY. Pusty <div> ma zero
   wysokości, więc ekran zwijałby puste linie i tekst podjeżdżałby w górę
   — a nakładka kursora liczy pozycję z interlinii, więc stanęłaby obok
   wiersza zamiast na nim. `min-height`, nie `height`: wiersz zawinięty
   na wąskiej karcie ma prawo być wyższy. */
.ac-term.is-live .ac-term-body > div { min-height: calc(var(--ac-lh) * 1em); }
.ac-term.is-live .ac-cursor {
  position: absolute;
  margin-left: 0;
  /* Krój MUSI być ten sam co w wierszu, i to nie jest kosmetyka:
     skórka `phosphor` przemalowuje KAŻDY <span>, a kursor jest spanem.
     Bez tej linijki `1ch` niżej rozwiązywałoby się w cudzym piśmie. */
  font-family: inherit;
  /* Szerokość komórki podaje szyba (--ac-cell) i jest to ta sama
     liczba, którą dobrała stopień pisma — więc kolumna trafia co do
     piksela. `1ch` zostaje wyłącznie na wypadek, gdy szyba oddała
     sterowanie arkuszowi (okno za wąskie, patrz shared/glass.js). */
  /* --ac-cell NIESIE JUŻ ROZSTRZELENIE — szyba mierzy sondą, która
     dostaje je w swojej skali. Dokładać go tu drugi raz znaczyłoby
     policzyć je podwójnie. */
  left: calc(var(--ac-cur-col, 0) * var(--ac-cell, calc(1ch + var(--ac-ls))));
  top:  calc(var(--ac-cur-row, 0) * var(--ac-lh) * 1em);
}

@keyframes ac-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* --- terminal po ożywieniu ---
   Do tej pory .ac-term pokazywał wymyśloną sesję. Gdy zaczyna
   pokazywać prawdziwe wyjście procesora, potrzebuje przewijania,
   ogniskowania i widocznej zachęty — inaczej użytkownik patrzy na
   prompt, który nie reaguje na klawiaturę, i słusznie uznaje, że
   to dalej obrazek. */
.ac-term.is-live .ac-term-wrap {
  position: relative;
  /* DWADZIEŚCIA CZTERY WIERSZE, bo tyle ma ekran. Do sierpnia 2026
     stało tu 340 px i wystarczało, dopóki karta pokazywała rosnący
     wydruk — wtedy widać było ostatnie kilkanaście wierszy i o to
     chodziło. Odkąd karta rysuje EKRAN, program pełnoekranowy
     (SMG$: panel DECODER-a) nie mieścił się w niej ani razu: ramka
     zaczynała się w wierszu 2, a kończyła poza kadrem.

     Liczymy ze stopnia pisma, który dobrała szyba, więc na wąskim
     oknie karta maleje razem z pismem. Wypełnienia NIE doliczamy:
     `box-sizing` jest tu `content-box`, więc te 14 i 18 pikseli dochodzi
     samo, a doliczone dawało dwudziesty piąty wiersz. */
  max-height: calc(24 * var(--ac-lh) * var(--ac-term-size, 19px));
  overflow-y: auto;
  cursor: text;
  outline-offset: -2px;
  /* Zakotwiczanie przewijania walczyło z naszym własnym zjeżdżaniem na
     dół: przeglądarka próbowała utrzymać w miejscu treść, która przed
     chwilą urosła o wiersz, a my w tej samej klatce ustawialiśmy
     scrollTop na koniec. Efektem było drganie przy każdym wydruku. */
  overflow-anchor: none;
}

/* Obrys pokazujemy na karcie, bo fokus siedzi na ukrytym polu w środku */
.ac-term.is-live:focus-within .ac-term-wrap { outline: 2px solid var(--ac-term); }

/*--------------------------------------------------------------
  Terminal na cały ekran

  Dwie drogi prowadzą do tego samego wyglądu: Fullscreen API
  (chowa pasek przeglądarki, ale na iOS nie działa poza wideo
  i wymaga gestu) oraz nakładka na całe okno, którą da się
  włączyć także poleceniem SET TERMINAL/SCREEN=FULL z DCL-a.

  Dlatego reguły stoją pod DWOMA selektorami — a nie pod jednym
  z aliasem, bo `:fullscreen` nieznane przeglądarce unieważniłoby
  całą regułę razem z klasą.
--------------------------------------------------------------*/
.ac-term.is-full,
.ac-term:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 999;
  max-width: none;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  /* Fullscreen API maluje pod spodem czerń systemową — bez własnego
     tła terminal wisiałby na niej bez ramki. */
  background: var(--ac-term-bg, var(--ac-panel-bg));
}

.ac-term.is-full .ac-term-wrap,
.ac-term:fullscreen .ac-term-wrap {
  flex: 1 1 auto;
  max-height: none;
}

/* Przełącznik w nagłówku karty. Powstaje z JS razem z terminalem,
   więc na nieaktywnej karcie nie ma go wcale. */
.ac-term-full {
  margin-left: auto;
  font-family: var(--ac-font-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--ac-panel-dim);
  background: transparent;
  border: 1px solid var(--ac-line);
  border-radius: 2px;
  padding: 2px 6px;
  cursor: pointer;
  transition: none !important;
}

.ac-term-full:hover { color: var(--ac-term); border-color: var(--ac-term); }

.ac-term-full:focus-visible {
  outline: 2px solid var(--ac-term) !important;
  outline-offset: 2px;
}

/* ZNAKI STERUJĄCE POD PALEC.

   Klawiatura programowa nie ma klawisza CTRL, więc na telefonie cała
   obsługa Ctrl-czegokolwiek w karcie jest martwa: nie przerwiesz pętli
   i nie zamkniesz wpisu w CREATE. Przycisk otwiera listę tych kilku
   sekwencji, które na danej maszynie naprawdę coś znaczą.

   Stoi w PASKU NAGŁÓWKA obok pełnego ekranu, a nie w rogu wydruku:
   tam zasłaniał ostatnie wiersze, czyli dokładnie te, dla których
   sięga się po przerwanie. Wygląda jak sąsiad i ma jego rozmiar. */
.ac-term-keys {
  margin-left: auto;
  font-family: var(--ac-font-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--ac-panel-dim);
  background: transparent;
  border: 1px solid var(--ac-line);
  border-radius: 2px;
  padding: 2px 6px;
  cursor: pointer;
  transition: none !important;
}

/* Przycisk znaków sterujących powstaje WCZEŚNIEJ niż pełny ekran, więc
   w pasku stoi przed nim — i to ON odpycha parę w prawo. Pełny ekran ma
   własne `margin-left: auto`; zostawiony rozsunąłby oba na przeciwne
   końce paska (zmierzone: 195 px odstępu), więc tu go kasujemy. */
.ac-term-keys + .ac-term-full { margin-left: 0; }

.ac-term-keys:hover,
.ac-term-keys[aria-expanded="true"] {
  color: var(--ac-term);
  border-color: var(--ac-term);
}

.ac-term-keys:focus-visible {
  outline: 2px solid var(--ac-term) !important;
  outline-offset: 2px;
}

/* Pasek jest układem odniesienia dla menu, więc `top: 100%` znaczy
   „tuż pod paskiem" i nikt nie musi mierzyć jego wysokości. */
.ac-term-head { position: relative; }

.ac-term-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--ac-term-bg);
  border: 1px solid var(--ac-line);
  border-radius: 2px;
}

/* Same sekwencje, wyśrodkowane — lista jest wąska i nie zasłania
   wydruku, a to ona jest treścią karty. */
.ac-term-menu-item {
  font-family: var(--ac-font-mono);
  font-size: 13px;
  line-height: 1;
  text-align: center;
  color: var(--ac-panel-dim);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ac-line);
  padding: 9px 14px;
  cursor: pointer;
  transition: none !important;
}

.ac-term-menu-item:last-child { border-bottom: 0; }
.ac-term-menu-item:hover { color: var(--ac-term); }

.ac-term-menu-item:focus-visible {
  outline: 2px solid var(--ac-term) !important;
  outline-offset: -2px;
}

/* WĄSKA KARTA — trochę większy cel, bez przesady: sekwencje są krótkie,
   więc lista i tak zostaje wąska. Progu nie stawia media query, tylko
   szyba (shared/glass.js) klasą .is-tight, bo karta jest oknem, a nie
   kolumną w stronie. */
.ac-term.is-tight .ac-term-keys { font-size: 15px; padding: 5px 9px; }
.ac-term.is-tight .ac-term-menu-item { font-size: 15px; padding: 11px 16px; }

/* Ukryte pole przyjmujące wejście. Nie może być display:none ani
   visibility:hidden — musi dać się ustawić na nim fokus, bo tylko
   prawdziwe pole tekstowe podnosi klawiaturę ekranową na telefonie.
   font-size 16px jest obowiązkowe: przy mniejszym iOS przybliża
   całą stronę w momencie ogniskowania. */
/* Ukryte pole wejścia. Leży przy DOLNEJ krawędzi, a nie przy górnej:
   przeglądarka wciągająca element w widok zjeżdżałaby wtedy na sam
   początek scrollbacku i treść skakałaby przy każdym kliknięciu.
   JS blokuje to przez preventScroll — to jest druga linia obrony. */
.ac-term-kbd {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  outline: none;
  opacity: 0;
  resize: none;
  overflow: hidden;
  font-size: 16px;
  caret-color: transparent;
  background: transparent;
  color: transparent;
}

.ac-term.is-live .ac-term-body { min-height: 120px; }

/*--------------------------------------------------------------
  8. Pulpit PDP-11/70

  Trzy rzędy lampek zamiast czterech kontrolek: 11/70 pokazywał
  ADRES i DANĄ, a nie tylko „żyję / liczę". Dlatego ten pulpit
  potrzebuje własnych reguł, a nie wariantu tamtych.

  Podział ról jest ten sam, co wszędzie na pulpitach: JS nie
  ustawia tu ANI JEDNEGO KOLORU — podaje wyłącznie liczby --l
  (0..1) i --deg. Kolory zostają w tokenach, więc skórki działają
  dalej.

  Kontrolki (.ac-ctl, .ac-dial, .ac-boot, .ac-sw) są pożyczone
  z pulpitu VAX-a — tak samo, jak Osborne pożycza rdzeń od IMSAI.
  Druga kopia byłaby drugim źródłem prawdy o tym, jak wygląda
  pokrętło.
--------------------------------------------------------------*/

.ac-p11-row {
  display: flex;
  gap: 3px;
  margin-bottom: 4px;
}

.ac-p11-row i {
  flex: 1 1 0;
  min-width: 6px;
  max-width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ac-led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* Przerwa co trzy lampki, licząc OD PRAWEJ: trzy bity to jedna
   cyfra ósemkowa, więc adres da się z pulpitu ODCZYTAĆ, a nie
   tylko obejrzeć. Tak grupował je DEC i po to. */
.ac-p11-row i.gap { margin-left: 7px; }

.ac-p11-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--ac-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-panel-dim);
  margin: 0 0 14px;
}

/* Cztery lampki stanu: RUN, PAUSE, MASTER, USER. Stoją w rzędzie
   z podpisami przy sobie, bo w przeciwieństwie do rzędów ADDRESS
   i DATA czyta się je pojedynczo. */
.ac-p11-stat {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.ac-p11-lamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ac-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ac-panel-dim);
}

.ac-p11-lamp i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ac-led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* Rejestr przełączników ma szesnaście pozycji na KAŻDEJ szerokości —
   inaczej niż bank IMSAI, który po włączeniu schodzi do ośmiu. Powód
   jest inny: tu przełączniki nie stoją pod diodami i nie ma czego
   ustawiać w parach; szesnaście to jedno słowo i tak się je czyta. */
.ac-panel[data-live] .ac-p11 .ac-sws {
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
}

.ac-panel[data-live] .ac-p11 .ac-sw {
  height: 34px;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: none !important;
}

.ac-panel[data-live] .ac-p11 .ac-sw::after { height: 15px; }

.ac-p11 .ac-sws { margin-bottom: 8px; }

/* --- lampki po włączeniu zasilania ---
   Ta sama sztuczka co przy diodach IMSAI: warstwa ::after o pełnym
   kolorze i zmiennej przezroczystości. Zmiana samego `background`
   kosztowałaby przeliczenie koloru przy każdej klatce razy 38
   lampek. */
.ac-panel[data-live] .ac-p11-row i,
.ac-panel[data-live] .ac-p11-lamp i {
  position: relative;
  animation: none !important;
}

.ac-panel[data-live] .ac-p11-row i::after,
.ac-panel[data-live] .ac-p11-lamp i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ac-led-on);
  box-shadow: 0 0 6px var(--ac-led-on);
  opacity: var(--l, 0);
}

/* Na wyłączonej maszynie pulsuje sama lampka RUN — jedyny ruch na
   martwym pulpicie i jedyna podpowiedź, że da się go włączyć. */
.ac-panel:not([data-live]) .ac-p11-lamp i[data-lamp="run"] {
  animation: ac-lamp 2.3s steps(1, end) infinite;
}

/* --- Halt/Enable: pokrętło o dwóch pozycjach --- */
.ac-enable {
  position: relative;
  height: 60px;
  width: 86px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: none !important;
}

.ac-enable .ac-dial { left: 24px; }

.ac-enable i {
  position: absolute;
  font-family: var(--ac-font-mono);
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-panel-dim);
  white-space: nowrap;
}

.ac-enable i:nth-of-type(1) { left: 0; top: 26px; }

.ac-enable i:nth-of-type(2) { left: 62px; top: 26px; }

/* Pozycja Halt zatrzymuje procesor, więc wskazówka gaśnie — tak
   samo jak przy kluczyku VAX-a w pozycji Off. */
.ac-enable[data-pos="0"] .ac-dial::after { background: var(--ac-panel-dim); }

.ac-enable:focus-visible {
  outline: 2px solid var(--ac-led-on) !important;
  outline-offset: 2px;
}

/* Na wąskim ekranie lampki i przełączniki robią się ciasne —
   ale ZOSTAJĄ, bo bez nich to nie jest ten pulpit. */
@media (max-width: 640px) {
.ac-p11-row { gap: 2px; }
.ac-p11-row i.gap { margin-left: 4px; }
.ac-panel[data-live] .ac-p11 .ac-sw { height: 28px; }
.ac-panel[data-live] .ac-p11 .ac-sw::after { height: 12px; }
.ac-p11-stat { gap: 12px; }
}