/* ==========================================================================
   PRAWN SECTOR 32 — base stylesheet
   Design tokens, app shell and shared primitives. Screen-specific styles
   live in css/screens/<screen>.css and are scoped under .screen-<name>.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  color-scheme: dark;

  /* Surfaces (abyss darks) */
  --bg: #12121d;
  --surface-lowest: #0d0d18;
  --surface-low: #1b1a26;
  --surface-container: #1f1e2a;
  --surface-high: #292935;
  --surface-highest: #343440;
  --surface-bright: #383845;
  --navy: #1a1a2e;

  /* Text & lines */
  --on-surface: #e3e0f1;
  --on-surface-variant: #cfc2d5;
  --outline: #988d9e;
  --outline-variant: #4d4353;

  /* Primary: bioluminescent cyan */
  --cyan: #00dce5;
  --cyan-bright: #63f7ff;
  --cyan-muted: #00cad2;
  --cyan-deep: #005054;
  --on-cyan: #003739;
  --cyan-ink: #002021;

  /* Secondary: warm dough peach + turbo orange */
  --peach: #ffb599;
  --peach-light: #ffdbce;
  --on-peach: #5a1c00;
  --peach-ink: #370e00;
  --orange: #fe5f00;
  --on-orange: #521900;

  /* Tertiary: violet */
  --violet: #d5baff;
  --violet-light: #ecdcff;
  --violet-mid: #8b5cf6;
  --violet-deep: #5f00c2;
  --violet-ink: #42008a;

  --error: #ffb4ab;
  --error-deep: #93000a;

  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;

  /* Type */
  --font-head: "Space Grotesk", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Geometry */
  --topbar-h: 96px;
  --sidebar-w: 288px;
  --gutter: 2rem;

  /* Neo-brutalist hard shadows */
  --shadow-hard: 4px 4px 0 #000;
  --shadow-chunky: 8px 8px 0 #000;
  --shadow-cyan-soft: 8px 8px 0 rgb(0 220 229 / 0.2);
}

/* Accent scopes: set --accent / --accent-ink for any component. */
.accent-cyan   { --accent: var(--cyan);   --accent-ink: #000;              --accent-deep: var(--cyan-deep); }
.accent-peach  { --accent: var(--peach);  --accent-ink: var(--peach-ink);  --accent-deep: #7f2b00; }
.accent-violet { --accent: var(--violet); --accent-ink: var(--violet-ink); --accent-deep: var(--violet-deep); }
.accent-orange { --accent: var(--orange); --accent-ink: #000;              --accent-deep: var(--on-orange); }

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 2px 2px, rgb(0 220 229 / 0.07) 1px, transparent 0);
  background-size: 4px 4px;
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); line-height: 1.05; overflow-wrap: break-word; }
p { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--peach); color: var(--peach-ink); }

:focus-visible { outline: 3px solid var(--cyan-bright); outline-offset: 3px; }

.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;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--cyan); color: #000; padding: 0.75rem 1rem;
  font: 700 0.875rem var(--font-head); text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

/* ---- Icons (Material Symbols) ------------------------------------------ */
.ms {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  flex-shrink: 0;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  /* Avoid a flash of ligature text before the font loads. */
  overflow: hidden;
  width: 1em;
}
.ms--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ---- Typography -------------------------------------------------------- */
.display {
  font-family: var(--font-head);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.92;
}
.label {
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }

.c-cyan   { color: var(--cyan); }
.c-peach  { color: var(--peach); }
.c-orange { color: var(--orange); }
.c-violet { color: var(--violet); }
.c-muted  { color: var(--on-surface-variant); }
.c-dim    { color: var(--outline); }
.text-glow { text-shadow: 0 0 10px currentColor; }

/* Page heading used by most screens. */
.page-head { margin-bottom: 2.5rem; }
.page-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.92;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--cyan);
}
.page-sub {
  margin-top: 1rem;
  font: 700 0.875rem/1.3 var(--font-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peach);
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  --btn-bg: var(--cyan);
  --btn-ink: #000;
  --btn-shadow: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: 0;
  background-color: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: 4px 4px 0 var(--btn-shadow);
  font: 700 0.9375rem/1.1 var(--font-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: transform 60ms steps(2), box-shadow 60ms steps(2), filter 120ms;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 transparent; }
.btn .ms { font-size: 1.25em; }
.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}
.btn.htmx-request { filter: brightness(0.8); cursor: progress; }

.btn--cyan   { --btn-bg: var(--cyan);   --btn-ink: #000; }
.btn--peach  { --btn-bg: var(--peach);  --btn-ink: var(--peach-ink); }
.btn--orange { --btn-bg: var(--orange); --btn-ink: #000; }
.btn--violet { --btn-bg: var(--violet); --btn-ink: var(--violet-ink); }
.btn--accent { --btn-bg: var(--accent); --btn-ink: var(--accent-ink); }
.btn--dark   { --btn-bg: var(--surface-highest); --btn-ink: var(--cyan); }
.btn--danger { --btn-bg: #8e0e0e; --btn-ink: #fff; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--accent, var(--cyan));
  box-shadow: inset 0 0 0 2px currentColor, 4px 4px 0 var(--btn-shadow);
}
.btn--ghost:active { box-shadow: inset 0 0 0 2px currentColor; }
.btn--shadow-orange { --btn-shadow: var(--orange); }
.btn--shadow-cyan   { --btn-shadow: var(--cyan); }
.btn--shadow-none   { box-shadow: none; }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 0.5rem 0.875rem; font-size: 0.75rem; }
.btn--lg { padding: 1.25rem 2rem; font-size: 1.25rem; }
.btn--xl { padding: 1.75rem 2rem; font-size: 1.625rem; font-style: italic; letter-spacing: -0.04em; }
.btn--italic { font-style: italic; letter-spacing: -0.02em; }
/* CRT stripe texture seen on sanctuary command buttons. */
.btn--striped {
  background-image: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.14) 2px 4px);
}

/* ---- Surfaces ---------------------------------------------------------- */
.panel { position: relative; background: var(--surface-container); }
.panel--lowest  { background: var(--surface-lowest); }
.panel--low     { background: var(--surface-low); }
.panel--high    { background: var(--surface-high); }
.panel--highest { background: var(--surface-highest); }
.panel--chunky  { box-shadow: var(--shadow-chunky); }
.panel--frame   { border: 4px solid var(--surface-highest); }
.panel--inset   { box-shadow: inset 4px 4px 0 rgb(0 0 0 / 0.5); }

/* Image frame with a hard shadow. */
.frame {
  border: 4px solid var(--accent, var(--cyan));
  box-shadow: var(--shadow-hard);
  background: #000;
}
.frame > img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Textures ---------------------------------------------------------- */
.dither {
  background-image: radial-gradient(circle at 2px 2px, rgb(0 220 229 / 0.12) 1px, transparent 0);
  background-size: 4px 4px;
}
.dither-white {
  background-image: radial-gradient(rgb(255 255 255 / 0.13) 1px, transparent 0);
  background-size: 4px 4px;
}
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(18 18 29 / 0) 50%, rgb(0 0 0 / 0.16) 50%);
  background-size: 100% 4px;
}
.stripes {
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgb(255 255 255 / 0.06) 6px 12px);
}

/* ---- Meters, chips, tags ----------------------------------------------- */
.meter {
  --accent: var(--cyan);
  height: 14px;
  padding: 2px;
  background: var(--surface-lowest);
  box-shadow: inset 0 0 0 2px var(--surface-highest);
}
/* Re-declared so an accent class beats the .meter default above. */
.meter.accent-peach  { --accent: var(--peach); }
.meter.accent-violet { --accent: var(--violet); }
.meter.accent-orange { --accent: var(--orange); }
.meter__fill {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  background: var(--accent);
  transition: width 0.4s steps(8);
}

.seg { --accent: var(--cyan); display: flex; gap: 4px; }
.seg.accent-peach  { --accent: var(--peach); }
.seg.accent-violet { --accent: var(--violet); }
.seg.accent-orange { --accent: var(--orange); }
.seg > i {
  display: block;
  width: 2rem;
  height: 2.25rem;
  background: var(--surface-highest);
  box-shadow: inset 0 0 0 2px var(--outline-variant);
}
.seg > i.on { background: var(--accent); box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.25); }

.chip {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--accent, var(--cyan));
  color: var(--accent-ink, #000);
  font: 700 0.6875rem/1 var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tag {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  font: 500 0.6875rem/1 var(--font-head);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Terminal readout (shop status, logs). */
.terminal {
  background: var(--surface-lowest);
  color: var(--cyan);
  font: 0.8125rem/1.7 var(--font-mono);
  padding: 1.5rem;
}
.terminal__line::before { content: "> "; }
.cursor::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 0.25em;
  vertical-align: text-bottom;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}

/* Text inputs: minimal telemetry style (bottom outline only). */
.field { display: grid; gap: 0.375rem; }
.field__label { font: 700 0.6875rem var(--font-head); letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-surface-variant); }
.input {
  width: 100%;
  padding: 0.75rem 0.25rem;
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--outline-variant);
  color: var(--on-surface);
  font-family: var(--font-head);
  font-size: 1rem;
}
.input::placeholder { color: var(--outline); }
.input:focus { outline: none; border-bottom-color: var(--cyan); box-shadow: 0 6px 12px -8px var(--cyan); }

/* ---- Toasts ------------------------------------------------------------ */
.toasts {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  --toast-accent: var(--cyan);
  pointer-events: auto;
  cursor: pointer;
  padding: 0.875rem 1rem;
  background: var(--surface-high);
  border-left: 6px solid var(--toast-accent);
  box-shadow: var(--shadow-chunky);
  animation: toast-in 0.24s steps(4) both;
}
.toast--warn { --toast-accent: var(--orange); }
.toast--info { --toast-accent: var(--violet); }
.toast__title {
  color: var(--toast-accent);
  font: 700 0.875rem/1.2 var(--font-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.toast__msg { margin-top: 0.25rem; color: var(--on-surface-variant); font-size: 0.8125rem; line-height: 1.4; }
.toast.is-leaving { animation: toast-out 0.2s steps(3) forwards; }

/* ---- App shell: top bar ------------------------------------------------ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
  background: var(--bg);
  border-bottom: 4px solid var(--cyan);
  box-shadow: var(--shadow-cyan-soft);
  font-family: var(--font-head);
}
.topbar__menu {
  display: none;
  padding: 0.5rem;
  background: none;
  border: 0;
  color: var(--cyan);
}
.topbar__logo {
  flex-shrink: 0;
  color: var(--cyan);
  font-size: 1.875rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.06em;
  line-height: 1;
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--orange);
  white-space: nowrap;
}
.topbar__nav { display: flex; align-items: center; gap: 1.75rem; margin-inline: auto; }
.topbar__link {
  padding: 0.25rem 0;
  border-bottom: 4px solid transparent;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__link:hover { color: var(--cyan-bright); }
.topbar__link.is-active { color: var(--orange); border-bottom-color: var(--orange); }
.topbar__right { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.credits { text-align: right; line-height: 1; }
.credits__label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--peach);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.credits__value { color: var(--cyan); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.credits--bump .credits__value { animation: bump 0.45s steps(3); }
.topbar__avatar { display: block; flex-shrink: 0; }
.topbar__avatar img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 2px solid var(--cyan);
  background: #000;
}
.topbar__coin { padding: 0.75rem 1.125rem; font-size: 0.875rem; letter-spacing: 0.12em; white-space: nowrap; }

/* ---- App shell: sidebar ------------------------------------------------ */
.sidebar {
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  z-index: 40;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--navy) transparent;
  background: var(--bg);
  border-right: 8px solid var(--navy);
  box-shadow: 4px 0 0 var(--orange);
  font-family: var(--font-head);
  text-transform: uppercase;
}
.sidebar__head { padding: 1.5rem; border-bottom: 4px solid var(--navy); }
.sidebar__brand { display: flex; align-items: center; gap: 0.75rem; }
.sidebar__chip { width: 2rem; height: 2rem; flex-shrink: 0; background: var(--orange); }
.sidebar__title { color: var(--orange); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.sidebar__sub { margin-top: 0.5rem; color: var(--cyan); font-size: 0.75rem; font-weight: 700; opacity: 0.65; }
.sidebar__head--jon { text-align: center; }
.sidebar__portrait {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.75rem;
  object-fit: cover;
  border: 4px solid var(--cyan);
  box-shadow: var(--shadow-hard);
}
.sidebar__title--jon { color: var(--cyan); font-size: 0.8125rem; letter-spacing: 0.2em; }
.sidebar__head--jon .sidebar__sub { margin-top: 0.25rem; color: var(--peach); font-size: 0.625rem; letter-spacing: 0.15em; opacity: 1; }
.sidebar__nav { flex: 1; padding-bottom: 0.75rem; }
.sidebar__group-label {
  padding: 1rem 1rem 0.375rem;
  color: var(--outline);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.sidebar__group-label span { color: var(--orange); }
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-left: 8px solid transparent;
  color: var(--cyan);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.sidebar__link:hover { background: var(--navy); }
.sidebar__link:active { background: var(--orange); color: #fff; }
.sidebar__link.is-active { background: var(--cyan); color: var(--bg); border-left-color: var(--orange); }
.sidebar__cta { padding: 1rem; background: var(--navy); }
.sidebar__cta .btn { padding-block: 1rem; letter-spacing: 0.15em; }
.sidebar__foot { border-top: 4px solid var(--navy); }
.sidebar__logout {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  background: none;
  border: 0;
  color: var(--cyan);
  font: 700 0.875rem var(--font-head);
  text-transform: uppercase;
  text-align: left;
}
.sidebar__logout:hover { background: var(--navy); }
.sidebar-scrim { display: none; }

/* ---- App shell: main --------------------------------------------------- */
.main {
  position: relative;
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + 2rem) var(--gutter) 3rem;
}

/* 404 */
.lost { max-width: 40rem; padding-top: 4rem; }
.lost__title { margin: 1rem 0 1.5rem; color: var(--cyan); font-size: clamp(3rem, 8vw, 6rem); text-shadow: 6px 6px 0 var(--violet-ink); }
.lost__copy { margin-bottom: 2.5rem; color: var(--on-surface-variant); font-size: 1.125rem; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1360px) {
  .topbar { gap: 1.25rem; }
  .topbar__nav { gap: 1.25rem; }
  .topbar__link { font-size: 0.8125rem; }
}
@media (max-width: 1180px) {
  .topbar__nav { display: none; }
  .topbar__right { margin-left: auto; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 72px; --gutter: 1rem; }
  .topbar { padding: 0 1rem; gap: 0.75rem; }
  .topbar__menu { display: inline-flex; }
  .topbar__logo { font-size: 1.375rem; }
  .sidebar {
    transform: translateX(calc(-100% - 12px));
    transition: transform 0.2s steps(5);
    z-index: 60;
  }
  .sidebar.is-open { transform: none; }
  .sidebar-scrim:not([hidden]) {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: 55;
    background: rgb(0 0 0 / 0.6);
  }
  .main { margin-left: 0; padding-top: calc(var(--topbar-h) + 1.25rem); }
}
@media (max-width: 640px) {
  .credits__label { display: none; }
  .credits__value { font-size: 1rem; }
  .topbar__coin { display: none; }
  .topbar__logo { font-size: 1.125rem; }
}

/* ---- Motion ------------------------------------------------------------ */
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bump { 0%, 100% { transform: none; } 50% { transform: scale(1.18); color: var(--peach); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; } 42% { opacity: 0.6; } 43% { opacity: 1; }
  77% { opacity: 1; } 78% { opacity: 0.75; } 79% { opacity: 1; }
}
@keyframes glitch {
  0%, 100% { transform: none; }
  20% { transform: translate(-3px, 1px) skewX(-4deg); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, 0) skewX(3deg); }
}
.anim-pulse   { animation: pulse 1.6s steps(2) infinite; }
.anim-blink   { animation: blink 1s steps(1) infinite; }
.anim-flicker { animation: flicker 4s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}