:root {
  --bg-black: #0a0b0e;
  --bg-panel: #10131a;
  --bg-archive: #0e1117;

  --ink-primary: #e6e6eb;
  --ink-muted: #9aa0b2;
  --ink-accent: #66f2ff;

  --heading-blue: rgb(131, 201, 253);
  --link-muted: rgba(160, 200, 230, 0.6);

  --accent-blue: #00d0ff;
  --accent-cyan: #7fd4ff;
  --accent-cyan-bright: #00ffff;
  --accent-violet: #8b7cff;
  --accent-crimson: #b84a5a;
  --accent-yellow: #ffcc00;
  --accent-orange: #ff6600;
  --accent-green: #00ff88;

  --border-faint: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(102, 242, 255, 0.35);
  --border-blue: #054ea9;

  --bg-overlay: rgba(0, 0, 0, 0.4);
  --shadow-strong: rgba(0, 0, 0, 0.6);

  --radius-sm: 6px;
  --radius-lg: 6px;

  --radius-hybrid-br: 0 0 12px 0;

  --font-primary: "Inter", system-ui, sans-serif;
  /* --font-mono: "JetBrains Mono", monospace; */


  --tex-void: url("../assets/core/void.png");
  --tex-grid: url("../assets/core/grid.png");
  --tex-grid: url("../assets/core/grid.jpg");

  --tex-panel: url("../assets/core/panel.png");
  --tex-frame: url("../assets/core/frame.png");

  --tex-noise: url("../assets/core/star-noise.png");



  /* --font-ui: 'Inter', system-ui, sans-serif; */
  /* --font-mono: 'IBM Plex Mono', monospace; */
  --font-ui: 'Science Gothic', system-ui, sans-serif;
  --font-heading: 'Science Gothic', system-ui, sans-serif;
  --font-body: 'Blinker', system-ui, sans-serif;


  --aug-border: 1px;
  --aug-cut: 16px;
  --aug-border-bg: #0e0e18;
  --aug-inlay-bg: #1a202f;



  --status-active: #00ff9c;
  --status-standby: #4cc9ff;
  --status-charging: #ffb703;
  --status-limited: #ff8c42;
  --status-offline: #6b7280;
  --status-error: #ff3b3b;

  /* --condition-operational: #4cc9ff; */
  --condition-operational: #ffffff;
  --condition-stable: #3a86ff;
  --condition-unstable: #ffb703;
  --condition-critical: #ff3b3b;
  --condition-damaged: #ff8c42;
  --condition-unknown: #9b5de5;
}





/* Info card status and condition colors */
.info-card {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

/* STATUS */

.info-card[data-status="active"] {
  border-left-color: #00ff9c;
  /* neon green-cyan */
}

.info-card[data-status="standby"] {
  border-left-color: #4cc9ff;
  /* lab cyan */
}

.info-card[data-status="charging"] {
  border-left-color: #ffb703;
  /* amber */
}

.info-card[data-status="limited"] {
  border-left-color: #ff8c42;
  /* warning orange */
}

.info-card[data-status="offline"] {
  border-left-color: #6b7280;
  /* muted gray */
}

.info-card[data-status="error"] {
  border-left-color: #ff3b3b;
  /* critical red */
}

/* CONDITION */

.info-card[data-condition="operational"] {
  border-left-color: #4cc9ff;
  /* clean cyan */
}

.info-card[data-condition="stable"] {
  border-left-color: #3a86ff;
  /* deep blue */
}

.info-card[data-condition="unstable"] {
  border-left-color: #ffb703;
  /* amber */
}

.info-card[data-condition="damaged"] {
  border-left-color: #ff8c42;
  /* orange */
}

.info-card[data-condition="critical"] {
  border-left-color: #ff3b3b;
  /* red */
}

.info-card[data-condition="unknown"] {
  border-left-color: #9b5de5;
  /* violet */
}

/* CATEGORY */

.info-card[data-category="vectorforce"] {
  border-left-color: #00b4d8;
  /* cold kinetic blue */
}

.info-card[data-category="chronoworks"] {
  border-left-color: #9b5de5;
  /* temporal violet */
}

.info-card[data-category="lightforms"] {
  border-left-color: #ffd166;
  /* warm spectral gold */
}

.info-card[data-category="hologrids"] {
  border-left-color: #48cae4;
  /* holographic cyan */
}

.info-card[data-category="quantumlattice"] {
  border-left-color: #5f27cd;
  /* deep quantum indigo */
}

.info-card[data-category="archives"] {
  border-left-color: #6c757d;
  /* archival gray */
}


/* Priority: Condition > Status > Category */

.info-card[data-condition] {
  border-left-width: 3px;
}

.info-card[data-status] {
  border-left-width: 3px;
}

.info-card[data-category] {
  border-left-width: 2px;
}


/* optional  */
.info-card[data-status="active"] {
  box-shadow: inset 0 0 0 1px rgba(0, 255, 156, 0.12);
}


.info-card[data-status="active"] p {
  color: var(--status-active);
  text-shadow: 0 0 6px rgba(0, 255, 156, 0.35);
}

.info-card[data-status="charging"] p {
  color: var(--status-charging);
}

.info-card[data-condition="operational"] p {
  color: var(--condition-operational);
}

.info-card[data-condition="critical"] {
  border-color: var(--condition-critical);
  box-shadow: 0 0 12px rgba(255, 59, 59, 0.25);
}

.info-card[data-status="active"] {
  border-left: 2px solid var(--status-active);
}

.info-card[data-condition="operational"] h3 {
  /* color: var(--condition-operational); */
  letter-spacing: 0.08em;
}






*,
*::before,
*::after {
  box-sizing: border-box;
}



html,
body {
  margin: 0;
  background: var(--bg-black);
  color: var(--ink-primary);
  line-height: 1.55;
  letter-spacing: 0.1em;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: #cfd6dd;
  background-color: #0a0c0f;

  background:
    linear-gradient(rgba(10, 12, 15, 0.4), rgba(10, 12, 15, 0.4)),
    var(--tex-void) repeat;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin-top: 0;
  color: var(--ink-primary);
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


.site-tagline {
  font-family: 'Science Gothic', sans-serif;
  font-size: 1.25rem; /* slightly smaller than H1 */
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #aaa; /* subtle, cyberpunk tone */
  margin: 0.25rem 0 0.75rem 0;
  text-align: center;
}


a {
  color: var(--accent-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* =========================================================
   GLOBAL CONTENT CONTAINER
   ========================================================= */

.content {
  /* max-width: 1200px; */
  /* max-width: 65em; */
  margin-inline: auto;
  /* padding-inline: clamp(1.25rem, 4vw, 2.5rem); */
  padding-block: clamp(1rem, 1vw, 3rem);
  /* padding-top: 0; */
  /* margin-top: 1em; */
}

.content>section {

  margin-bottom: 1rem;

}

.content>.item-detail {
  background: linear-gradient(rgba(16, 19, 26, 0.85), rgba(16, 19, 26, 0.85)), var(--tex-panel) repeat;
  border: 1px solid #21211f;
  padding: 1rem;
  /* margin-bottom: 1.5rem; */
  border-radius: var(--radius-sm);
}




/* Graphical Elements  */

/* Page Floor */


.page-floor {
    background-image: var(--tex-grid);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    min-height: 1em;

 

}



.page-floor {
  background-image: var(--tex-grid);
  background-repeat: repeat;
  background-position: center bottom; /* start at bottom */
  background-size: 100%;
  min-height: 1em;

  animation: grid-move 200s linear infinite;
}

/* Keyframes must be defined outside the selector */
@keyframes grid-move {
  0% {
    background-position: center bottom;
  }
  100% {
    background-position: center top;
  }
}





/* Site footer */
.site-footer {
  border-top: 1px solid var(--border-faint);
  /* background: linear-gradient(rgb(14 17 26 / 42%), rgb(16 19 26 / 20%));*/
  color: var(--ink-muted);
  padding-block: 0.3rem;
  margin-top: 1rem;
}

.site-footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(1rem, 4vw, 2rem);
  font-family: var(--font-mono);
  font-size: smaller;
}

.site-footer .footer-mark {
  color: var(--ink-primary);
  letter-spacing: 0.16em;
}

.site-footer .footer-tagline {
  opacity: 0.9;
  text-align: center;
  flex: 1 1 auto;
  display: none;
}

.site-footer .footer-support a {
  color: var(--accent-blue);
  text-decoration: none;
}

.site-footer .footer-support a:hover {
  text-decoration: underline;
}

@media (min-width: 2001px) {
  .site-footer .footer-inner {
    justify-content: space-evenly;
    max-width: 70em;
  }

  .site-footer .footer-tagline {
    display: block;
  }

  .site-footer .footer-support,
  .site-footer .footer-policies {
    margin-inline: 2rem;
  }
}

@media (min-width: 3000px) {
  .site-footer .footer-inner {
    max-width: 80em;
  }
}

@media (max-width: 800px) {
  .site-footer .footer-inner {
    display: block;
    gap: 0.5rem;
    text-align: left;
  }

  .site-footer .footer-tagline {
    text-align: left;
  }

  /* .site-footer .footer-inner > * { */
  /* margin: 0.25rem 0; */
  /* } */
}


.site-footer .footer-policies a {
  color: var(--ink-muted);
  text-decoration: none;
  opacity: 0.65;
  font-size: 0.85em;
  letter-spacing: 0.08em;
}



.panel,
.archive-item,
.interaction-panel {
  background:
    var(--tex-panel) repeat;
  background-size: 512px 512px;
  background-color: #121622;
}





/* =========================================================
   SYSTEM HEADER
   ========================================================= */

.site-header.system-header {
  position: relative;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  padding-bottom: 0em;
  border-bottom: 1px solid var(--border-faint);
  /* background:
    linear-gradient(rgba(16,19,26,0.85), rgba(16,19,26,0.85)),
    var(--tex-panel) repeat; */
  background:
    linear-gradient(rgba(16, 19, 26, 0.65), rgba(16, 19, 26, 0.45)),
    var(--tex-panel) repeat;
}

.site-header.system-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      var(--border-glow),
      transparent);
}


.header-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: center;
  justify-content: space-between;
  /* margin-bottom: 0.75rem; */
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 1.5vw, 0.75rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid dodgerblue;
}

.system-context {
  font-size: clamp(0.6rem, 1.4vw, 0.7rem);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

@media (max-width: 500px) {
  .header-main h1 {
    font-size: medium !important;
  }
}


.header-main h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0.5em;
}

.header-main p {
  margin-top: 0.25rem;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  color: var(--ink-muted);
  /* max-width: 60ch; */
}




.system-id {
  font-family: var(--font-heading);
}

.system-context {
  font-family: var(--font-mono);
}

.system-id {
  /* opacity: 0.85; */
  font-size: medium;
}


.system-context {
  text-align: right;
  white-space: nowrap;
  opacity: 0.75;
}

@media (max-width: 700px) {
  .system-context {
    white-space: inherit;
  }
}


.system-context.status {
  color: var(--ink-accent);
}

.system-context.warning {
  color: var(--accent-crimson);
}

.system-context.idle {
  opacity: 0.5;
}

/* Color utility classes */
.color-stable {
  color: #4cff7f;
}

.color-synced {
  color: #00d9ff;
}

.system-frame::after {
  background: var(--tex-frame) repeat;
}