/* ============================================================
   MARRIAGE.OS — 03_Conditionals
   Faithful static export of the Wonder artboard
   "Active Conditionals Screen" (gaz) + reproduced CRT effects.

   Palette (exact):
     bg        #0a0805
     keyword   #ff5e3a   (IF / THEN / AND / WHILE / EVERY /
                           THROW / TRY / CATCH / RETURN)
     code      #ffb000   (+ text-shadow amber glow)
     comment   #ffb00059 (amber ~35%, italic)
     title     #ffb0008c (amber ~55%)
     subtitle  #ffb00059
   ============================================================ */

:root {
  --bg:       #0a0805;
  --kw:       #ff5e3a;
  --code:     #ffb000;
  --comment:  #ffb00059;
  --title:    #ffb0008c;
  --subtitle: #ffb00059;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  background: var(--bg);
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  overflow-x: hidden;
}

/* ---- Page (root: w-1440, px-20 py-[30px]) ---------------- */
.page {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 30px 80px;            /* py-[30px] px-20 */
  background: var(--bg);
  overflow: hidden;
}

/* No shader on this page — flat #0a0805 background (only the boot &
   shutdown bookend screens carry the oil-slick shader). */

/* ---- Header --------------------------------------------- */
.cond-header {
  position: relative;
  z-index: 10;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 6px;                      /* gap-1.5 */
}

.cond-title { color: var(--title); font-size: 15px; }

.cond-subtitle {
  color: var(--subtitle);
  font-size: 12px;               /* text-xs */
  letter-spacing: 0.5px;
}

/* ---- Code listing --------------------------------------- */
.code-listing {
  position: relative;
  z-index: 10;
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin-top: 26px;              /* mt-[26px] */
  gap: 10px;                     /* gap-2.5 */
}

.rule-block {
  display: flex;
  flex-direction: column;
  gap: 4px;                      /* gap-1 */
}

.rule-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;               /* gap-x-[7px] */
  font-size: 14px;               /* text-sm */
  line-height: 1.7;              /* leading-[1.7] */
}

.rule-line.indent { padding-left: 32px; }   /* pl-8 */

.kw { color: var(--kw); }

.code {
  color: var(--code);
  text-shadow: rgba(255, 176, 0, 0.3) 0px 0px 6px;
}

.comment {
  color: var(--comment);
  font-style: italic;
}

/* ---- Overlays ------------------------------------------- */
.overlay { position: absolute; inset: 0; pointer-events: none; }

.scanlines {
  z-index: 30;
  overflow: hidden;
  background: repeating-linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0)    0px,
              rgba(0, 0, 0, 0)    2px,
              rgba(0, 0, 0, 0.22) 3px);
}
.scanlines::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
              rgba(255, 176, 0, 0),
              rgba(255, 176, 0, 0.03),
              rgba(255, 176, 0, 0));
  animation: sweep 9s linear infinite;
}

/* Vignette — exact gradient from source (rgba(0,0,0,0) 55%) */
.vignette {
  z-index: 40;
  background: radial-gradient(circle,
              rgba(0, 0, 0, 0) 55%,
              rgba(0, 0, 0, 0.55) 100%);
}

/* ---- Keyframes ------------------------------------------ */
@keyframes sweep {
  from { transform: translateY(-50%); }
  to   { transform: translateY(320%); }
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: 0.82; }
  98%           { opacity: 1; }
  99%           { opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
  .scanlines::after, .shader-bg { animation: none; }
}