/* ============================================================================
 * psico-mode.css — PsiCo Systems Division (Easter egg)
 * ----------------------------------------------------------------------------
 * EVERY selector is namespaced under `body.psico-mode`. Nothing in this file
 * can affect the site unless psico-mode.js explicitly engages the mode.
 *
 * DO NOT include psico-mode.js on: dashboard, login, api_keys, account,
 * privacy, terms, security. Front-facing marketing pages only.
 *
 * Belt-and-suspenders: adding <meta name="psico-disabled" content="1"> to a
 * page's <head> hard-stops the script even if it gets included by accident.
 *
 * OPTIONAL PIXEL FONT
 * -------------------
 * The interface font is driven by --psico-font-ui below. It defaults to
 * Tahoma, which genuinely shipped with Windows 95 and is present almost
 * everywhere. If you ever want a true bitmap font (W95FA, Px437, etc.):
 *   1. drop the .woff2 in /static/fonts/
 *   2. uncomment the @font-face block below
 *   3. add the family to the front of --psico-font-ui
 * Nothing else changes.
 * ========================================================================= */


/* Uncomment if/when you add a pixel font file:

@font-face {
  font-family: 'PsicoPixel';
  src: url('/static/fonts/w95fa.woff2') format('woff2');
  font-display: swap;
}
*/


/* ===== 1. TOKENS =========================================================
 * These are declared on #psico-memo and #psico-printer as well as on the body.
 * The goodbye memo is shown *after* the mode class is removed, so if the tokens
 * only lived on body.psico-mode it would render with no background at all.
 * ========================================================================= */

body.psico-mode,
#psico-memo,
#psico-printer {
  --psico-font-ui:    Tahoma, Verdana, Geneva, sans-serif;
  --psico-font-paper: 'Courier New', Courier, ui-monospace, monospace;

  --psico-beige:      #d4cfc4;   /* desktop */
  --psico-face:       #ded9ce;   /* control face */
  --psico-face-hi:    #ebe7dd;   /* control face, hover */
  --psico-light:      #ffffff;   /* bevel highlight */
  --psico-shadow:     #7d786e;   /* bevel shadow */
  --psico-line:       #a9a396;
  --psico-ink:        #21201c;
  --psico-ink-soft:   #4a4740;
  --psico-paper:      #fdfbf2;
  --psico-teal:       #0e7a7a;   /* the Windows 3.1 desktop teal */
  --psico-alarm:      #b4291b;
}


/* ===== 2. PAGE CHROME ==================================================== */

body.psico-mode {
  background-color: var(--psico-beige) !important;
  color: var(--psico-ink) !important;
  font-family: var(--psico-font-ui) !important;
  -webkit-font-smoothing: none;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M6 2h12v5l-4 5 4 5v5H6v-5l4-5-4-5V2z' fill='white' stroke='black' stroke-width='1.4' stroke-linejoin='round'/><path d='M8.5 4.5h7L12 9z' fill='black'/></svg>") 12 12, wait !important;
}

/* Kill every rounded corner and soft shadow on the page. This single pair of
   rules is what makes it read as 1999 rather than "a beige modern site". */
body.psico-mode *:not(#psico-printer):not(#psico-memo) {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
}

/* Any element the script measured as having a dark background. 1999 did not
   have hero gradients or dark mode; everything is beige now. See the
   _lightenDarkSections() sweep in psico-mode.js. */
body.psico-mode .psico-lightened,
body.psico-mode .psico-lightened::before,
body.psico-mode .psico-lightened::after {
  background-color: var(--psico-beige) !important;
  background-image: none !important;
  color: var(--psico-ink) !important;
}

/* Gradients flatten to solid beige. */
body.psico-mode [class*="gradient"],
body.psico-mode [style*="gradient"] {
  background-image: none !important;
  background-color: var(--psico-face) !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--psico-ink) !important;
}

/* Faint CRT scanlines. */
body.psico-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.045) 0px,
    rgba(0,0,0,0.045) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Vignette, to sell the curved glass. */
body.psico-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9989;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.20) 100%);
}


/* ===== 3. TYPOGRAPHY ===================================================== */

body.psico-mode h1,
body.psico-mode h2,
body.psico-mode h3,
body.psico-mode h4,
body.psico-mode h5,
body.psico-mode h6 {
  font-family: var(--psico-font-ui) !important;
  font-weight: 700 !important;
  color: var(--psico-ink) !important;
  text-transform: none;
}

body.psico-mode p,
body.psico-mode li,
body.psico-mode span,
body.psico-mode label,
body.psico-mode td,
body.psico-mode th {
  color: var(--psico-ink-soft) !important;
}

body.psico-mode a {
  color: #0000c8 !important;
  text-decoration: underline !important;
}
body.psico-mode a:visited { color: #660099 !important; }

body.psico-mode code,
body.psico-mode pre,
body.psico-mode [class*="code"] {
  font-family: var(--psico-font-paper) !important;
  background: var(--psico-ink) !important;
  color: #d8d3c6 !important;
  border: 2px solid !important;
  border-color: var(--psico-shadow) var(--psico-light) var(--psico-light) var(--psico-shadow) !important;
}


/* ===== 4. BEVELLED SURFACES ============================================== */

/* Anything card-like gets an outset bevel. Matched on shape, not on your
   class names, so it survives future markup changes. */
body.psico-mode [class*="card"],
body.psico-mode [class*="panel"],
body.psico-mode [class*="block"],
body.psico-mode [class*="callout"],
body.psico-mode [class*="tile"],
body.psico-mode [class*="door"],
body.psico-mode section > article,
body.psico-mode figure {
  background: var(--psico-face) !important;
  border: 2px solid !important;
  border-color: var(--psico-light) var(--psico-shadow) var(--psico-shadow) var(--psico-light) !important;
  color: var(--psico-ink) !important;
}

/* Pills and chips become square status boxes. */
body.psico-mode .pill,
body.psico-mode [class*="chip"],
body.psico-mode [class*="badge"],
body.psico-mode [class*="eyebrow"] {
  background: var(--psico-face) !important;
  border: 2px solid !important;
  border-color: var(--psico-shadow) var(--psico-light) var(--psico-light) var(--psico-shadow) !important;
  color: var(--psico-ink) !important;
  padding: 2px 8px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}


/* ===== 5. BUTTONS ======================================================== */

body.psico-mode button,
body.psico-mode .btn,
body.psico-mode [class*="btn"],
body.psico-mode input[type="submit"],
body.psico-mode input[type="button"] {
  background: var(--psico-face) !important;
  color: var(--psico-ink) !important;
  font-family: var(--psico-font-ui) !important;
  font-weight: 700 !important;
  border: 2px solid !important;
  border-color: var(--psico-light) var(--psico-shadow) var(--psico-shadow) var(--psico-light) !important;
  transition: none !important;
  transform: none !important;
}

body.psico-mode button:hover,
body.psico-mode .btn:hover,
body.psico-mode [class*="btn"]:hover {
  background: var(--psico-face-hi) !important;
}

/* Press = the bevel inverts. Nothing else moves. */
body.psico-mode button:active,
body.psico-mode .btn:active,
body.psico-mode [class*="btn"]:active {
  border-color: var(--psico-shadow) var(--psico-light) var(--psico-light) var(--psico-shadow) !important;
  padding-top: calc(0.1em + 1px) !important;
  padding-left: calc(0.1em + 1px) !important;
}

/* Focus ring is a dotted marquee, exactly as it was. */
body.psico-mode button:focus-visible,
body.psico-mode a:focus-visible,
body.psico-mode input:focus-visible,
body.psico-mode [class*="btn"]:focus-visible {
  outline: 1px dotted var(--psico-ink) !important;
  outline-offset: -4px !important;
}


/* ===== 6. INPUTS ========================================================= */

body.psico-mode input,
body.psico-mode select,
body.psico-mode textarea {
  background: #ffffff !important;
  color: var(--psico-ink) !important;
  font-family: var(--psico-font-ui) !important;
  border: 2px solid !important;
  border-color: var(--psico-shadow) var(--psico-light) var(--psico-light) var(--psico-shadow) !important;
}

body.psico-mode input::placeholder,
body.psico-mode textarea::placeholder {
  color: #8a857a !important;
}


/* ===== 7. IMAGES & MEDIA ================================================= */

/* 8-bit-ish: desaturate, crush contrast slightly, kill smoothing. */
body.psico-mode img,
body.psico-mode video,
body.psico-mode canvas,
body.psico-mode svg {
  filter: saturate(0.55) contrast(1.08) !important;
  image-rendering: pixelated;
}

/* Scrollbar goes bevelled. */
body.psico-mode ::-webkit-scrollbar { width: 16px; height: 16px; }
body.psico-mode ::-webkit-scrollbar-track { background: #c3beb2; }
body.psico-mode ::-webkit-scrollbar-thumb {
  background: var(--psico-face);
  border: 2px solid;
  border-color: var(--psico-light) var(--psico-shadow) var(--psico-shadow) var(--psico-light);
}

body.psico-mode ::selection {
  background: #000080 !important;
  color: #ffffff !important;
}


/* ===== 8. THE MEMO (engage / disengage notice) =========================== */

#psico-memo {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  background: var(--psico-paper);
  border: 2px solid;
  border-color: var(--psico-light) var(--psico-shadow) var(--psico-shadow) var(--psico-light);
  font-family: var(--psico-font-paper);
  font-size: 13px;
  line-height: 1.5;
  color: var(--psico-ink);
  z-index: 10001;
  animation: psico-flicker-in 0.5s ease-out;
}

#psico-memo .psico-memo-bar {
  background: #000080;
  color: #ffffff;
  font-family: var(--psico-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#psico-memo .psico-memo-close {
  width: 15px;
  height: 14px;
  background: var(--psico-face);
  border: 1px solid;
  border-color: var(--psico-light) var(--psico-shadow) var(--psico-shadow) var(--psico-light);
  color: var(--psico-ink);
  font-family: var(--psico-font-ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
}

#psico-memo .psico-memo-body {
  padding: 12px 14px 14px;
  white-space: pre-wrap;
}

#psico-memo .psico-memo-rule {
  border-top: 1px solid var(--psico-ink);
  margin: 6px 0 8px;
}

#psico-memo.psico-leaving { animation: psico-flicker-out 0.45s ease-in forwards; }

@keyframes psico-flicker-in {
  0% { opacity: 0; } 15% { opacity: 0.9; } 25% { opacity: 0.25; }
  40% { opacity: 1; } 55% { opacity: 0.5; } 70% { opacity: 1; }
  85% { opacity: 0.75; } 100% { opacity: 1; }
}
@keyframes psico-flicker-out { from { opacity: 1; } to { opacity: 0; } }


/* ===== 9. THE PRINTER ==================================================== */

#psico-printer {
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 190px;
  z-index: 9999;
  font-family: var(--psico-font-ui);
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: none;
  border: 0;
  padding: 0;
}

/* --- continuous tractor-feed paper --- */

#psico-printer .psico-paper {
  position: relative;
  height: 0;
  overflow: hidden;
  background: var(--psico-paper);
  border-left: 1px solid var(--psico-line);
  border-right: 1px solid var(--psico-line);
  transition: height 140ms steps(4, end);
  margin: 0 6px -2px;
}

#psico-printer .psico-paper::before,
#psico-printer .psico-paper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 13px;
  background-image: radial-gradient(circle at 6.5px 8px, #e4dfd2 3px, transparent 3.2px);
  background-size: 13px 16px;
  border-color: #ddd7c8;
  border-style: dashed;
  border-width: 0;
}
#psico-printer .psico-paper::before { left: 0;  border-right-width: 1px; }
#psico-printer .psico-paper::after  { right: 0; border-left-width: 1px; }

#psico-printer .psico-paper-text {
  margin: 0;
  padding: 5px 16px;
  font-family: var(--psico-font-paper);
  font-size: 10px;
  line-height: 13px;
  color: #2b2a25;
  white-space: pre;
  letter-spacing: 0.02em;
}

#psico-printer.psico-jam .psico-paper-text { color: var(--psico-alarm); }

/* --- printer body --- */

#psico-printer .psico-body {
  position: relative;
  background: var(--psico-face);
  border: 2px solid;
  border-color: var(--psico-light) var(--psico-shadow) var(--psico-shadow) var(--psico-light);
  padding: 6px 8px 8px;
}

#psico-printer:hover .psico-body { background: var(--psico-face-hi); }

#psico-printer .psico-slot {
  height: 6px;
  background: #3d3a33;
  border: 1px solid var(--psico-shadow);
  margin-bottom: 7px;
}

#psico-printer .psico-vents {
  height: 6px;
  margin-bottom: 7px;
  background: repeating-linear-gradient(
    0deg,
    var(--psico-line) 0px, var(--psico-line) 1px,
    transparent 1px, transparent 3px
  );
}

#psico-printer .psico-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #cfc9bc;
  border: 2px solid;
  border-color: var(--psico-shadow) var(--psico-light) var(--psico-light) var(--psico-shadow);
  padding: 4px 6px;
}

#psico-printer .psico-led {
  width: 8px;
  height: 8px;
  border-radius: 50% !important;
  background: #5fd68a;
  border: 1px solid #2f8a52;
  flex: none;
}

#psico-printer.psico-busy .psico-led { animation: psico-blink 0.25s steps(1) infinite; }
#psico-printer.psico-jam  .psico-led { background: #ef5b4c; border-color: #7d1a11; }

@keyframes psico-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

#psico-printer .psico-led-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--psico-ink-soft);
  flex: 1;
}

#psico-printer .psico-keys { display: flex; gap: 4px; }

#psico-printer .psico-key {
  width: 16px;
  height: 9px;
  background: var(--psico-face);
  border: 1px solid;
  border-color: var(--psico-light) var(--psico-shadow) var(--psico-shadow) var(--psico-light);
}

#psico-printer .psico-key--off:hover {
  background: var(--psico-face-hi);
}
#psico-printer .psico-key--off:active {
  border-color: var(--psico-shadow) var(--psico-light) var(--psico-light) var(--psico-shadow);
}

#psico-printer .psico-feet {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
}
#psico-printer .psico-feet i {
  display: block;
  width: 22px;
  height: 4px;
  background: var(--psico-shadow);
}

#psico-printer.psico-jam { animation: psico-rattle 0.1s steps(2) infinite; }

@keyframes psico-rattle {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1.5px, 1px); }
  100% { transform: translate(1.5px, -1px); }
}


/* ===== 10. MOTION & SMALL SCREENS ======================================== */

@media (prefers-reduced-motion: reduce) {
  #psico-memo,
  #psico-memo.psico-leaving,
  #psico-printer.psico-jam,
  #psico-printer.psico-busy .psico-led { animation: none !important; }
  #psico-printer .psico-paper { transition: none !important; }
}

@media (max-width: 640px) {
  #psico-printer { width: 150px; bottom: 12px; right: 12px; }
  #psico-printer .psico-paper-text { font-size: 9px; line-height: 12px; padding: 4px 15px; }
  #psico-memo { width: min(300px, calc(100vw - 32px)); }
  body.psico-mode::after { display: none; }
}