/* Ossuary v1.1 · DeathAI Australia · dark only
 * Shared design layer for every MumbleChat page. Load it before any page CSS.
 * Spec: design/ossuary.md (rendered: design/ossuary.html)
 *
 * Components are prefixed .oss-* so they never collide with page classes
 * (.btn, .badge, .tabs already exist on many pages). Effects (.glitch,
 * [data-decrypt]) are unprefixed to match the spec.
 */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800;900&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=VT323&display=swap");

:root {
  color-scheme: dark;
  --void: #060505;  --slab: #0d0b0b;  --slab-2: #151111;
  --line: #2e2120;  --line-soft: #1c1514;
  --bone: #d9d2c7;  --ash: #8f857d;
  --ghost: #5a4f4a; /* decoration only */
  --blood: #c8201f; --ember: #ff4a3d; --on-blood: #fff;
  --rot: #39ff6a;   --amber: #f2a93b; --fault: #ff4a3d;
  --rose: #e07a96;  --ice: #4dd0e1;
  --split-a: #ff0040; --split-b: #00e5ff; /* glitch only */
  --font-display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", ui-monospace, monospace;
  --font-crt: "VT323", "Courier New", monospace;
  --r-0: 0; --r-1: 2px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --glow-blood: 0 0 0 1px var(--blood), 0 0 18px rgba(200,32,31,.55);
  --glow-rot: 0 0 8px rgba(57,255,106,.45);

  /* ── Legacy aliases (see the Migration table in design/ossuary.md) ──
   * Pages that drop their inline :root block pick these up unchanged. */
  /* Terminal Morgue (index, login, register, friends, profile …) */
  --bg-void: var(--void);
  --bg-terminal: var(--slab);
  --blood-red: var(--blood);
  --coagulated-maroon: var(--line);
  --rust-trim: var(--line-soft);
  --bone-white: var(--bone);
  --toxic-green: var(--rot);
  --faded-gray: var(--ash);
  --shadow-glow: rgba(200,32,31,.25);
  /* DeathAIAUS Dark (css/style.css) */
  --death-primary: var(--void);
  --death-secondary: var(--slab);
  --death-accent: var(--ember);
  --death-text: var(--bone);
  --death-text-muted: var(--ash);
  --death-border: var(--line);
  --death-hover: var(--slab-2);
  --death-success: var(--rot);
  --death-warning: var(--amber);
  --death-error: var(--fault);
  --death-shadow: rgba(0,0,0,.6);
  /* room.html */
  --bg-primary: var(--void);
  --bg-secondary: var(--slab);
  --accent: var(--blood);
  --text-primary: var(--bone);
  --text-secondary: var(--ash);
  /* account-settings / bot-api */
  --bg: var(--void);
  --panel: var(--slab);
  --panel-2: var(--slab-2);
  --text: var(--bone);
  --muted: var(--ash);
  --red: var(--blood);
  --green: var(--rot);
  --gold: var(--amber);
  --blue: var(--ice);
}

/* ── Base ─────────────────────────────────────────────────────────── */
html { background: var(--void); }
body {
  background-color: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
}
::selection { background: var(--blood); color: var(--on-blood); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--glow-blood);
}
* { scrollbar-width: thin; scrollbar-color: var(--line) var(--void); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--blood); }

/* ── Atmosphere (layers injected by js/ossuary.js) ─────────────────────
 * body[data-oss-fx="lite"]  scanlines + grain only (dense apps like room.html)
 * body[data-oss-fx="off"]   nothing                                         */
.oss-fx { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; }
.oss-fx-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.72) 100%); }
.oss-fx-scan {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  animation: oss-roll 9s linear infinite;
}
.oss-fx-grain { width: 100%; height: 100%; opacity: .045; image-rendering: pixelated; }
.oss-fx-tear {
  inset: auto 0 auto 0; height: 3px; top: -10px;
  background: rgba(255,74,61,.25);
  animation: oss-tear 11s steps(1) infinite;
}
body[data-oss-fx="lite"] .oss-fx-vignette,
body[data-oss-fx="lite"] .oss-fx-tear { display: none; }
body[data-oss-fx="lite"] .oss-fx-scan { opacity: .45; }
body[data-oss-fx="lite"] .oss-fx-grain { opacity: .04; }
body[data-oss-fx="off"] .oss-fx { display: none; }
@keyframes oss-roll { to { background-position: 0 300px; } }
@keyframes oss-tear {
  0%, 92% { top: -10px }
  93% { top: 23% } 94% { top: 61% }
  95% { top: 40%; height: 14px; background: rgba(0,229,255,.08) }
  96%, 100% { top: -10px }
}

/* ── RGB-split glitch: still ≥85% of the time, bursts every few seconds ── */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none;
}
.glitch::before { color: var(--split-a); mix-blend-mode: screen; animation: oss-slice-a 4.2s infinite steps(1); }
.glitch::after  { color: var(--split-b); mix-blend-mode: screen; animation: oss-slice-b 4.2s infinite steps(1); }
.glitch.slow::before, .glitch.slow::after { animation-duration: 6.5s; }
.glitch.burst::before, .glitch.burst::after { animation-duration: .5s; animation-iteration-count: 1; }
@keyframes oss-slice-a {
  0%, 84%, 100% { clip-path: inset(100% 0 0 0); transform: none }
  85% { clip-path: inset(10% 0 62% 0); transform: translate(-4px, 0) }
  87% { clip-path: inset(48% 0 30% 0); transform: translate(5px, 0) }
  89% { clip-path: inset(78% 0 4% 0); transform: translate(-2px, 0) }
  91% { clip-path: inset(100% 0 0 0) }
}
@keyframes oss-slice-b {
  0%, 85%, 100% { clip-path: inset(100% 0 0 0); transform: none }
  86% { clip-path: inset(60% 0 18% 0); transform: translate(4px, 0) }
  88% { clip-path: inset(20% 0 55% 0); transform: translate(-5px, 0) }
  90% { clip-path: inset(100% 0 0 0) }
}
.oss-flicker { animation: oss-flicker 7s infinite; }
@keyframes oss-flicker { 0%, 89%, 91%, 93%, 100% { opacity: 1 } 90% { opacity: .2 } 92% { opacity: .6 } }
@keyframes oss-jitter { 0% { transform: translate(1px,-1px); filter: hue-rotate(30deg) } 50% { transform: translate(-2px,1px) } 100% { transform: none; filter: none } }
@keyframes oss-blink { 50% { opacity: 0 } }
@keyframes oss-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.oss-jitter:hover { animation: oss-jitter .22s steps(2) 2; }

/* ── Type helpers ─────────────────────────────────────────────────── */
.oss-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; line-height: .95; }
.oss-crt { font-family: var(--font-crt); letter-spacing: .04em; }
.oss-label { font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.oss-prompt { font: 400 19px/1.2 var(--font-crt); color: var(--rot); letter-spacing: .03em; text-shadow: var(--glow-rot); }
.oss-prompt span { color: var(--ash); text-shadow: none; }
.oss-prompt::after, .oss-cursor::after { content: "█"; margin-left: 4px; animation: oss-blink 1s steps(1) infinite; }
.oss-muted { color: var(--ash); }

/* ── Components ───────────────────────────────────────────────────── */
/* Frame: square panel with ember corner ticks instead of rounded cards */
.oss-frame {
  position: relative;
  border: 1px solid var(--line-soft);
  background-color: var(--slab);
  background-image:
    linear-gradient(var(--ember), var(--ember)), linear-gradient(var(--ember), var(--ember)),
    linear-gradient(var(--ember), var(--ember)), linear-gradient(var(--ember), var(--ember));
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.oss-btn {
  font: 600 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  padding: 12px 18px; border-radius: var(--r-1); border: 1px solid transparent;
  cursor: pointer; position: relative;
  transition: background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.oss-btn-primary { background: var(--blood); color: var(--on-blood); }
.oss-btn-primary::before { content: "[ "; opacity: .6; }
.oss-btn-primary::after { content: " ]"; opacity: .6; }
.oss-btn-primary:hover:not([disabled]) { box-shadow: var(--glow-blood); animation: oss-jitter .22s steps(2) 2; }
.oss-btn-ghost { background: transparent; color: var(--bone); border-color: var(--line); }
.oss-btn-ghost:hover:not([disabled]) { border-color: var(--rot); color: var(--rot); text-shadow: var(--glow-rot); }
.oss-btn-quiet { background: transparent; color: var(--ash); padding-inline: 6px; }
.oss-btn-quiet:hover { color: var(--bone); }
.oss-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.oss-field { display: grid; gap: 6px; min-width: 0; }
.oss-field label { font: 400 17px/1 var(--font-crt); letter-spacing: .05em; color: var(--ash); }
.oss-field label::before { content: "> "; color: var(--rot); }
.oss-input, .oss-field input, .oss-field select, .oss-field textarea {
  font: 400 15px/1.2 var(--font-mono); color: var(--rot); caret-color: var(--rot);
  background: #000; border: 1px solid var(--line); border-radius: var(--r-0);
  padding: 11px 12px; width: 100%;
}
.oss-field select { color: var(--bone); }
.oss-input:focus, .oss-field :is(input, select, textarea):focus { border-color: var(--blood); }
.oss-field .hint { font-size: 12px; color: var(--ash); }
.oss-field.err :is(input, select, textarea) { border-color: var(--fault); color: var(--ember); }
.oss-field.err .hint { color: var(--fault); }

.oss-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 8px; border: 1px solid currentColor; border-radius: var(--r-1);
}
.oss-badge::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.oss-badge.live { color: var(--rot); } .oss-badge.live::before { animation: oss-pulse 1.6s infinite; box-shadow: var(--glow-rot); }
.oss-badge.warn { color: var(--amber); }
.oss-badge.fault { color: var(--fault); }
.oss-badge.owner { color: var(--ember); }
.oss-badge.bot { color: var(--rose); }
.oss-badge.model { color: var(--ice); }

/* Relay bar: sticky CRT status strip */
.oss-relay {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); align-items: center;
  padding: 6px var(--s4);
  background: rgba(6,5,5,.92); border-bottom: 1px solid var(--line);
  font: 400 17px/1.2 var(--font-crt); color: var(--ash); letter-spacing: .04em;
}
.oss-relay b { color: var(--rot); font-weight: 400; text-shadow: var(--glow-rot); font-variant-numeric: tabular-nums; }
.oss-relay .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rot); box-shadow: var(--glow-rot); margin-right: 6px; animation: oss-pulse 1.6s infinite; vertical-align: 1px; }

/* Boot log */
.oss-boot { font: 400 18px/1.35 var(--font-crt); color: var(--ash); background: var(--slab); border: 1px solid var(--line); padding: var(--s3) var(--s4); white-space: pre-wrap; }
.oss-boot .ok { color: var(--rot); text-shadow: var(--glow-rot); }
.oss-boot .bad { color: var(--ember); }
.oss-boot .hi { color: var(--bone); }

/* Redaction: hover to read */
.oss-redact { background: var(--bone); color: transparent; padding: 0 3px; transition: background .2s, color .2s; cursor: help; }
.oss-redact:hover, .oss-redact:focus { background: transparent; color: var(--ember); outline: none; }

@media (prefers-reduced-motion: reduce) {
  .oss-fx-tear { display: none; }
  .oss-fx-scan, .glitch::before, .glitch::after, .oss-flicker,
  .oss-prompt::after, .oss-cursor::after, .oss-badge::before, .oss-relay .dot { animation: none !important; }
  .oss-btn-primary:hover, .oss-jitter:hover { animation: none !important; }
}

/* ── Data tables, toasts, meters ─────────────────────────────────────────────
   Ported from the Ossuary v1.1 reference build (GitHub main, 2 Oct), scoped to
   .oss-* so they only apply where a page opts in. */
.oss-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 var(--s4); }
.oss-table th {
  font: 400 17px/1 var(--font-crt);
  letter-spacing: .05em;
  color: var(--ash);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--slab);
}
.oss-table td { padding: 12px 14px; border-bottom: 1px dashed var(--line-soft); vertical-align: middle; color: var(--bone); }
.oss-table tr:last-child td { border-bottom: 0; }
.oss-table tbody tr:hover { background: var(--slab-2); }
.oss-table th.num { text-align: right; }
.oss-table td.num { font: 400 20px/1 var(--font-crt); font-variant-numeric: tabular-nums; text-align: right; color: var(--rot); }
.oss-table td.model, .oss-table td.code { font: 600 13px/1.3 var(--font-mono); color: var(--rot); }

.oss-toast {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  background: #000;
  border: 1px solid var(--line);
  max-width: 460px;
}
.oss-toast.t-ok    { border-color: var(--rot); }
.oss-toast.t-warn  { border-color: var(--amber); }
.oss-toast.t-fault { border-color: var(--fault); }

.oss-meter { width: 90px; height: 8px; background: var(--slab-2); display: inline-block; vertical-align: middle; margin-right: 8px; }
.oss-meter > i { display: block; height: 100%; background: var(--rot); box-shadow: var(--glow-rot); }

.oss-tlabel { font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.oss-tdata  { font: 500 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }