/* ================================================================
   DirectFXIT — retro.css  (the rx- kit)
   Hand-written retro components. Loaded on EVERY page, after
   main.css. Prefix rx-. Markup helpers: includes/retro.php.
   Behaviour: assets/js/retro.js. See every piece on /kit (local).

   98.css, NES.css etc. are reference only. Nothing is copied.

   ⚠️ main.css's --blue is TEAL (#00b7ae), inherited from June.
   Never use var(--blue) here expecting blue. Use the --rx- tokens.
   ================================================================ */

:root {
  /* Windows 95 system greys */
  --rx-face:    #c0c0c0;   /* window and button face */
  --rx-hi:      #ffffff;
  --rx-light:   #dfdfdf;
  --rx-shadow:  #808080;
  --rx-dark:    #0a0a0a;
  --rx-ink:     #000000;
  --rx-ink-off: #808080;   /* disabled text, with a white emboss */
  --rx-title:   #000080;   /* 95 title bar: solid navy (98 added the gradient) */
  --rx-select:  #000080;

  /* Logo colours (design.md §3.1) */
  --rx-blue:   #2b7fff;
  --rx-ice:    #a8dcff;
  --rx-red:    #ff1f3d;
  --rx-orange: #ff7a18;

  /* Bevels. Four 1px inset lines, no blur: 95 drew edges, not shadows.
     raised  = buttons        frame  = window edge
     pressed = held buttons   sunken = fields, tray */
  --rx-raised:  inset -1px -1px var(--rx-dark), inset 1px 1px var(--rx-hi),
                inset -2px -2px var(--rx-shadow), inset 2px 2px var(--rx-light);
  --rx-pressed: inset -1px -1px var(--rx-hi), inset 1px 1px var(--rx-dark),
                inset -2px -2px var(--rx-light), inset 2px 2px var(--rx-shadow);
  --rx-frame:   inset -1px -1px var(--rx-dark), inset 1px 1px var(--rx-light),
                inset -2px -2px var(--rx-shadow), inset 2px 2px var(--rx-hi);
  --rx-sunken:  inset -1px -1px var(--rx-hi), inset 1px 1px var(--rx-shadow);
  --rx-field:   inset -1px -1px var(--rx-hi), inset 1px 1px var(--rx-shadow),
                inset -2px -2px var(--rx-light), inset 2px 2px var(--rx-dark);   /* white panes, text boxes */

  /* UI text: Tahoma, the 98/2000 UI face. A SYSTEM font stack, so
     nothing is downloaded and design.md §2's three-family rule
     (about download weight) still holds. Windows and Mac have
     Tahoma; iPhone gets Verdana; Android gets its own sans.
     Rajdhani was tried first (2026-10-21): too hard to read. */
  --rx-ui: Tahoma, Verdana, 'Segoe UI', system-ui, sans-serif;
}

[class^="rx-"], [class*=" rx-"],
[class^="rx-"]::before, [class*=" rx-"]::before,
[class^="rx-"]::after,  [class*=" rx-"]::after { box-sizing: border-box; }

.rx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================
   1. BUTTON  .rx-btn  (+ --default, disabled)
   Works on <a> and <button>. Pressed state inverts the bevel and
   nudges the label 1px down-right, like the real thing.
   ================================================================ */
.rx-btn {
  appearance: none; border: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 124px; min-height: 42px; padding: 6px 18px;
  background: var(--rx-face); color: var(--rx-ink);
  box-shadow: var(--rx-raised);
  font: 700 .95rem/1 var(--rx-ui);
  text-decoration: none; cursor: pointer;
}
.rx-btn:hover { color: var(--rx-ink); }
.rx-btn:active { box-shadow: var(--rx-pressed); padding: 7px 17px 5px 19px; }
.rx-btn:focus-visible { outline: 1px dotted var(--rx-ink); outline-offset: -7px; }

/* The default button (the one Enter would press) has an extra black ring. */
.rx-btn--default {
  box-shadow: inset 0 0 0 1px var(--rx-dark),
              inset -2px -2px var(--rx-dark), inset 2px 2px var(--rx-hi),
              inset -3px -3px var(--rx-shadow), inset 3px 3px var(--rx-light);
}
.rx-btn--default:active {
  box-shadow: inset 0 0 0 1px var(--rx-dark), inset 0 0 0 2px var(--rx-shadow);
}

/* Disabled: grey text with a white emboss, no press. */
.rx-btn:disabled, .rx-btn[aria-disabled="true"] {
  color: var(--rx-ink-off); text-shadow: 1px 1px 0 var(--rx-hi); cursor: default;
}
.rx-btn:disabled:active { box-shadow: var(--rx-raised); padding: 6px 18px; }
.rx-btn--default:disabled:active {
  box-shadow: inset 0 0 0 1px var(--rx-dark),
              inset -2px -2px var(--rx-dark), inset 2px 2px var(--rx-hi),
              inset -3px -3px var(--rx-shadow), inset 3px 3px var(--rx-light);
}

/* ================================================================
   2. WINDOW  .rx-win
   Title bar with Minimise / Maximise / Close, body, button row.
   States set by retro.js: [hidden], .rx-win--max,
   .rx-win--leaving / --entering (the minimise animation).
   ================================================================ */
.rx-win {
  display: flex; flex-direction: column;
  padding: 4px;
  background: var(--rx-face); color: var(--rx-ink);
  box-shadow: var(--rx-frame);
  font-family: var(--rx-ui);
}
.rx-win[hidden] { display: none; }   /* [hidden] loses to display:flex otherwise */
.rx-win--max { grid-column: 1 / -1; }

.rx-win__bar {
  display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 3px 4px 3px 8px;
  background: var(--rx-title); color: var(--rx-hi);
}
.rx-win__title {
  flex: 1; min-width: 0; margin: 0;
  font: 700 1rem/1.2 var(--rx-ui); color: var(--rx-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rx-win__ctls { display: flex; flex-shrink: 0; gap: 2px; }

/* Title bar buttons. Glyphs are DRAWN with pseudo-elements, not
   typed, so they are crisp and identical in every font. */
.rx-win__ctl {
  appearance: none; border: 0; padding: 0; margin: 0;
  position: relative; width: 26px; height: 22px;
  background: var(--rx-face); color: var(--rx-ink);
  box-shadow: var(--rx-raised); cursor: pointer;
}
.rx-win__ctl[data-rx-act="close"] { margin-left: 4px; }   /* 95 set Close apart */
.rx-win__ctl:active { box-shadow: var(--rx-pressed); }
.rx-win__ctl:focus-visible { outline: 1px dotted var(--rx-ink); outline-offset: -5px; }
.rx-win__ctl::before, .rx-win__ctl::after { content: ''; position: absolute; }
.rx-win__ctl:active::before, .rx-win__ctl:active::after { translate: 1px 1px; }

/* _ minimise */
.rx-win__ctl[data-rx-act="min"]::before { left: 8px; bottom: 6px; width: 8px; height: 2px; background: currentColor; }
/* □ maximise: box with a thick top edge */
.rx-win__ctl[data-rx-act="max"]::before {
  left: 7px; top: 5px; width: 12px; height: 11px;
  border: 1px solid currentColor; border-top-width: 2px;
}
/* ⧉ restore (shown while maximised): two overlapping boxes */
.rx-win__ctl[data-rx-act="max"][aria-pressed="true"]::before { left: 10px; top: 4px; width: 9px; height: 8px; }
.rx-win__ctl[data-rx-act="max"][aria-pressed="true"]::after {
  left: 6px; top: 8px; width: 9px; height: 8px;
  border: 1px solid currentColor; border-top-width: 2px; background: var(--rx-face);
}
/* × close: two bars, rotated with the rotate property so the
   :active translate above still applies on top */
.rx-win__ctl[data-rx-act="close"]::before,
.rx-win__ctl[data-rx-act="close"]::after { left: 7px; top: 10px; width: 12px; height: 2px; background: currentColor; }
.rx-win__ctl[data-rx-act="close"]::before { rotate: 45deg; }
.rx-win__ctl[data-rx-act="close"]::after  { rotate: -45deg; }

.rx-win__body { flex: 1; padding: 20px 18px 10px; }
.rx-win__h { margin: 0 0 10px; font: 700 1.2rem/1.25 var(--rx-ui); color: var(--rx-ink); }
.rx-win__p { margin: 0; font: 400 1rem/1.55 var(--rx-ui); color: var(--rx-ink); }
.rx-win__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 12px 12px; }

/* Minimise / restore. steps() because 95 animated in jumps. */
@keyframes rx-win-out { to   { opacity: 0; transform: translateY(45%) scale(.25); } }
@keyframes rx-win-in  { from { opacity: 0; transform: translateY(45%) scale(.25); } }
.rx-win--leaving  { animation: rx-win-out 200ms steps(5) forwards; pointer-events: none; }
.rx-win--entering { animation: rx-win-in 200ms steps(5); }

/* Dev note for empty content. Rendered by PHP only when DFX_ENV is local. */
.rx-devnote {
  margin: 0; padding: 10px 12px;
  border: 2px dashed var(--rx-red); color: #8a0010;
  font: 400 .9rem/1.35 'Share Tech Mono', monospace;
}

/* ================================================================
   3. TASKBAR  .rx-taskbar  (Start, Start menu, tasks, tray clock)
   ================================================================ */
.rx-taskbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 4px;
  background: var(--rx-face); color: var(--rx-ink);
  box-shadow: inset 0 1px var(--rx-light), inset 0 2px var(--rx-hi);
  font-family: var(--rx-ui);
}
.rx-start {
  appearance: none; border: 0; margin: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 7px;
  background: var(--rx-face); color: var(--rx-ink);
  box-shadow: var(--rx-raised);
  font: 700 1rem/1 var(--rx-ui); cursor: pointer;
}
.rx-start[aria-expanded="true"], .rx-start:active { box-shadow: var(--rx-pressed); }
.rx-start:focus-visible { outline: 1px dotted var(--rx-ink); outline-offset: -5px; }
.rx-start picture { display: block; }
.rx-start img { display: block; width: auto; height: 20px; }

.rx-taskbar__tasks { display: flex; flex: 1; min-width: 0; gap: 4px; }
.rx-task {
  appearance: none; border: 0; margin: 0;
  flex: 0 1 200px; min-width: 0; height: 34px; padding: 0 10px;
  background: var(--rx-face); color: var(--rx-ink);
  box-shadow: var(--rx-raised);
  font: 400 .92rem/1 var(--rx-ui); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.rx-task[hidden] { display: none; }
/* The open window's button: pressed in, with 95's dithered fill */
.rx-task[aria-pressed="true"] {
  box-shadow: var(--rx-pressed);
  background: repeating-conic-gradient(var(--rx-hi) 0 25%, var(--rx-face) 0 50%) 0 0 / 2px 2px;
}
.rx-task:focus-visible { outline: 1px dotted var(--rx-ink); outline-offset: -5px; }

.rx-tray {
  flex-shrink: 0; display: flex; align-items: center;
  height: 34px; padding: 0 14px;
  box-shadow: var(--rx-sunken);
  font: 400 .92rem/1 var(--rx-ui);
}
.rx-tray:has(.rx-tray__clock:empty) { display: none; }   /* no JS, no clock */

/* Start menu: opens upward from the Start button. The side band is
   ours (DirectFXIT), never the Windows wordmark or flag. */
.rx-startmenu {
  position: absolute; left: 2px; bottom: calc(100% - 2px); z-index: 6;
  display: flex; min-width: 270px; padding: 3px;
  background: var(--rx-face); box-shadow: var(--rx-frame);
}
.rx-startmenu[hidden] { display: none; }
.rx-startmenu__band {
  display: flex; align-items: flex-end; justify-content: center;
  width: 36px; padding: 12px 0;
  background: linear-gradient(0deg, var(--rx-title), var(--rx-blue));
}
.rx-startmenu__band span {
  writing-mode: vertical-rl; rotate: 180deg;
  font: 900 1.05rem/1 'Orbitron', sans-serif; letter-spacing: .04em; color: var(--rx-hi);
}
.rx-startmenu__band b { color: var(--rx-red); font-weight: 900; }
.rx-startmenu__list { flex: 1; margin: 0; padding: 2px 0; list-style: none; }
.rx-startmenu__item {
  appearance: none; border: 0; margin: 0;
  display: flex; align-items: center; width: 100%; min-height: 42px; padding: 0 18px;
  background: none; color: var(--rx-ink);
  font: 400 1rem/1.2 var(--rx-ui); text-align: left; text-decoration: none; cursor: pointer;
}
.rx-startmenu__item:hover, .rx-startmenu__item:focus-visible {
  background: var(--rx-select); color: var(--rx-hi); outline: 0;
}
.rx-startmenu__sep {
  height: 0; margin: 4px 2px;
  border-top: 1px solid var(--rx-shadow); border-bottom: 1px solid var(--rx-hi);
}

@media (max-width: 600px) {
  .rx-task { flex-basis: 120px; padding: 0 8px; font-size: .85rem; }
  .rx-tray { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .rx-win--leaving, .rx-win--entering { animation: none; }
}

/* ================================================================
   4. EXPLORER  .rx-win.rx-explorer
   Menu bar, two white panes (about | folders), status bar.
   Markup: rx_explorer(). Folders open dialogs (section 5).
   ================================================================ */
.rx-explorer { width: 100%; max-width: 1100px; margin: 0 auto; }
.rx-explorer.rx-win--max { max-width: none; }
.rx-explorer .rx-win__title::before { content: 'Exploring - '; }   /* decoration, kept out of the heading text */

.rx-menubar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 2px 2px; font: 400 .95rem/1 var(--rx-ui); }
.rx-menubar span { display: inline-block; padding: 5px 9px; }
.rx-menubar span::first-letter { text-decoration: underline; }   /* 95 keyboard-accelerator underline */

.rx-explorer__panes {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 4px; padding: 2px 2px 4px; min-height: 300px;
}
.rx-pane { background: var(--rx-hi); box-shadow: var(--rx-field); padding: 18px 18px 16px; overflow: auto; }
.rx-explorer__h   { margin: 0 0 6px; font: 700 1.25rem/1.2 var(--rx-ui); color: var(--rx-ink); }
.rx-explorer__tag { margin: 0 0 12px; font: 700 .98rem/1.3 var(--rx-ui); color: var(--rx-title); }
.rx-explorer__p   { margin: 0; font: 400 1.02rem/1.55 var(--rx-ui); color: var(--rx-ink); }

.rx-folders {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 18px 8px; align-content: start; margin: 0; padding: 0; list-style: none;
}
.rx-folder {
  appearance: none; border: 0; margin: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 4px; background: none; cursor: pointer;
  font: 400 .95rem/1.25 var(--rx-ui); color: var(--rx-ink); text-align: center;
}
/* A 95 folder, drawn: tab (::before) + body (::after), hard outline, no blur. */
.rx-folder__ico { position: relative; width: 58px; height: 44px; }
.rx-folder__ico::before, .rx-folder__ico::after { content: ''; position: absolute; border: 2px solid #6b5200; }
.rx-folder__ico::before { left: 2px; top: 0; width: 26px; height: 12px; border-bottom: 0; background: #e9c53b; }
.rx-folder__ico::after {
  inset: 9px 0 0 0;
  background: linear-gradient(180deg, #fff5a6 0 4px, #f8db50 4px 100%);
  box-shadow: inset -4px -4px 0 #d6b02c;
}
.rx-folder__label { padding: 2px 5px; }
.rx-folder:hover .rx-folder__label,
.rx-folder:focus-visible .rx-folder__label { background: var(--rx-select); color: var(--rx-hi); }
.rx-folder:focus-visible { outline: 0; }
.rx-folder:focus-visible .rx-folder__label { outline: 1px dotted var(--rx-hi); outline-offset: -2px; }
.rx-folder:active .rx-folder__ico { translate: 1px 1px; }

.rx-statusbar { display: flex; padding: 2px 2px 0; }
.rx-statusbar span { flex: 1; padding: 6px 10px; box-shadow: var(--rx-sunken); font: 400 .92rem/1.2 var(--rx-ui); }

@media (max-width: 700px) {
  .rx-explorer__panes { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rx-folders { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

/* ================================================================
   5. DIALOG  .rx-win.rx-dialog  (warning-style, never says "Warning")
   Markup: rx_dialog(). Floats over the desktop ONLY once retro.js
   has run (.is-rx on the desktop). Without JS it sits in the
   normal flow, so its text is still readable.
   ⚠️ Centred with the `translate` PROPERTY, not transform: the
   open/close animation uses transform and would overwrite it.
   ================================================================ */
.rx-dialog { width: 100%; max-width: 600px; margin: 24px auto 0; }
.is-rx .rx-dialog {
  position: absolute; z-index: 8; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(100% - 32px); margin: 0;
  max-height: calc(100% - 32px); overflow: hidden;
}
/* Long text scrolls INSIDE the dialog, so the title bar and the OK
   button stay on screen (on a phone the text outgrows the desktop). */
.is-rx .rx-dialog .rx-dialog__body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* The white text box is the scroller, so its edges stay whole. */
.is-rx .rx-dialog .rx-dialog__text { overflow: auto; scrollbar-color: var(--rx-shadow) var(--rx-light); }
.rx-dialog__body { display: flex; gap: 20px; padding: 22px 20px 6px; }

/* The yellow triangle: black triangle behind, yellow one inset. */
.rx-warn {
  position: relative; flex-shrink: 0; width: 50px; height: 44px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
  background: var(--rx-ink); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.rx-warn::before {
  content: ''; position: absolute; inset: 5px 4px 2px;
  background: #ffd800; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.rx-warn span { position: relative; font: 700 1.35rem/1 var(--rx-ui); color: var(--rx-ink); }

/* The text sits in a white sunken box, like 95's text fields.
   Regular-weight text straight on the grey was hard to read
   (Joseph, 2026-10-21); white behind it fixes that without
   making everything bold. */
.rx-dialog__text {
  flex: 1; min-width: 0; padding: 16px 18px 10px;
  background: var(--rx-hi); box-shadow: var(--rx-field);
}
.rx-dialog__q { margin: 0 0 10px; font: 700 1.15rem/1.3 var(--rx-ui); color: var(--rx-ink); }
.rx-dialog__signs { margin: 0 0 12px; padding: 0; list-style: none; }
.rx-dialog__signs li {
  position: relative; padding: 0 0 6px 20px;
  font: 400 1.05rem/1.5 var(--rx-ui); color: var(--rx-ink);
}
.rx-dialog__signs li::before {          /* square 95 bullet */
  content: ''; position: absolute; left: 4px; top: .5em; width: 7px; height: 7px; background: var(--rx-title);
}
.rx-dialog__job { margin: 4px 0 12px; padding-top: 12px; border-top: 1px solid var(--rx-shadow); font: 400 1.05rem/1.45 var(--rx-ui); color: var(--rx-ink); }
.rx-dialog__job strong { color: var(--rx-title); font-weight: 700; }
.rx-dialog__p { margin: 0 0 10px; font: 400 1.05rem/1.55 var(--rx-ui); color: var(--rx-ink); }
.rx-dialog__urgent {
  margin: 12px 0 6px; padding: 10px 12px;
  background: #fff8c4; border: 1px solid var(--rx-shadow);
  font: 700 .98rem/1.45 var(--rx-ui); color: var(--rx-ink);
}

@media (max-width: 520px) {
  .rx-dialog__body { gap: 14px; padding: 18px 14px 4px; }
  .rx-warn { width: 40px; height: 35px; }
  .is-rx .rx-dialog { width: calc(100% - 20px); }
}

/* ================================================================
   6. TASKBAR HINT  .rx-hint  ("Click here", arrow pointing at Start)
   ================================================================ */
.rx-hint {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px;
  font: 700 .95rem/1 var(--rx-ui); color: var(--rx-ink); white-space: nowrap;
}
.rx-hint[hidden] { display: none; }
.rx-hint__arrow {
  width: 0; height: 0; border-style: solid;
  border-width: 9px 14px 9px 0; border-color: transparent var(--rx-red) transparent transparent;
  animation: rx-nudge 900ms steps(2) infinite;
}
@keyframes rx-nudge { 50% { translate: -6px 0; } }

@media (prefers-reduced-motion: reduce) {
  .rx-hint__arrow { animation: none; }
}

/* ================================================================
   7. PHOTO WINDOW  .rx-win.rx-photo  (a 95 image viewer)
   Markup: rx_photo(). Title bar + sunken picture + status caption.
   ================================================================ */
.rx-photo { margin: 0; }
.rx-photo__frame { margin: 2px 2px 0; padding: 2px; box-shadow: var(--rx-field); background: var(--rx-dark); }
.rx-photo__frame picture { display: block; }            /* <picture> is inline: gap under the photo otherwise */
.rx-photo__frame img { display: block; width: 100%; height: auto; }