/* ============================================================
   MARRIAGE.OS — 04_ErrorLog
   Faithful static export of the Wonder artboard
   "Error Log Screen" (hum) + reproduced CRT effects.

   Palette (exact):
     bg          #0a0805
     error code  #ff5e3a  (entry 0x01 has red glow)
     label       #ffb0008c (dimmed amber ~55%)  "trigger:" etc
     value       #ffb000
     resolved    #33ff99  (+ green glow)
     suffix      #ffb00099 (amber ~60%)
     title       #ffb0008c   subtitle #ffb00059
   Summary line renders in Inter (per source), everything
   else in JetBrains Mono.
   ============================================================ */

:root {
  --bg:        #0a0805;
  --err:       #ff5e3a;
  --label:     #ffb0008c;
  --value:     #ffb000;
  --resolved:  #33ff99;
  --suffix:    #ffb00099;
  --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-8) --------------------- */
.page {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 32px 80px;            /* py-8 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 --------------------------------------------- */
.log-header {
  position: relative;
  z-index: 10;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 6px;                      /* gap-1.5 */
}

.log-title {
  color: var(--title);
  font-size: 14px;               /* text-sm */
  letter-spacing: 2.8px;
}

.log-subtitle {
  color: var(--subtitle);
  font-size: 12px;               /* text-xs */
}

/* ---- Error entries -------------------------------------- */
.error-entries {
  position: relative;
  z-index: 10;
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin-top: 24px;              /* mt-6 */
  gap: 14px;                     /* gap-3.5 */
}

.error-entry {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 3px;                      /* gap-[3px] */
}

.err-code {
  color: var(--err);
  font-size: 13px;
  line-height: 1.45;
}
/* only entry 0x01 carries the red glow in the source */
.err-code--glow { text-shadow: rgba(255, 94, 58, 0.45) 0px 0px 6px; }

.err-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 7px;               /* gap-x-[7px] */
  padding-left: 28px;            /* pl-7 */
  font-size: 13px;
  line-height: 1.45;
}

.lbl { color: var(--label); }
.val { color: var(--value); }

.resolved {
  color: var(--resolved);
  text-shadow: rgba(51, 255, 153, 0.5) 0px 0px 6px;
}

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

/* ---- Summary line (Inter, text-base) -------------------- */
.summary {
  position: relative;
  z-index: 10;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;               /* gap-x-[7px] */
  margin-top: 20px;              /* mt-5 */
}

.summary span { font-family: 'Inter', sans-serif; font-size: 16px; }

.sum-label { color: var(--value); }
.sum-value {
  color: var(--value);
  text-shadow: rgba(255, 176, 0, 0.55) 0px 0px 8px;
}

/* ---- 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; }
}