/* ============================================================
 * uci-demo docs — milspec / instrument-grade tactical brutalism.
 *
 * Color discipline: deep gunmetal field, phosphor green accent,
 * sparing amber for warnings. JetBrains Mono throughout. Sharp
 * angular geometry, no rounded chrome. Sub-pixel scanline texture
 * on body. Mirrors apps/cop-ui/app/globals.css.
 * ============================================================ */

:root,
[data-md-color-scheme="slate"] {
  /* Phosphor */
  --uci-phos:           #00ff66;
  --uci-phos-dim:       #00cc52;
  --uci-phos-ghost:     #00ff6633;
  --uci-amber:          #ffb020;
  --uci-amber-dim:      #cc8a14;
  --uci-red:            #ff3838;

  /* Field */
  --uci-bg:             #07090a;
  --uci-bg-elev:        #0e1214;
  --uci-bg-card:        #11161a;
  --uci-bg-code:        #000000;
  --uci-rule:           #1a2226;
  --uci-rule-bright:    #244;

  /* Type */
  --uci-fg:             #cfe3d4;
  --uci-fg-dim:         #7a8a82;
  --uci-fg-bright:      #ffffff;

  /* Material overrides */
  --md-primary-fg-color:           var(--uci-bg-elev);
  --md-primary-fg-color--light:    var(--uci-bg-card);
  --md-primary-fg-color--dark:     var(--uci-bg);
  --md-primary-bg-color:           var(--uci-fg);
  --md-primary-bg-color--light:    var(--uci-fg-dim);

  --md-accent-fg-color:            var(--uci-phos);
  --md-accent-fg-color--transparent: var(--uci-phos-ghost);
  --md-accent-bg-color:             var(--uci-bg);
  --md-accent-bg-color--light:      var(--uci-bg-elev);

  --md-default-bg-color:            var(--uci-bg);
  --md-default-bg-color--light:     var(--uci-bg-elev);
  --md-default-bg-color--lighter:   var(--uci-bg-card);
  --md-default-fg-color:            var(--uci-fg);
  --md-default-fg-color--light:     var(--uci-fg);
  --md-default-fg-color--lighter:   var(--uci-fg-dim);
  --md-default-fg-color--lightest:  var(--uci-fg-dim);

  --md-code-bg-color:               var(--uci-bg-code);
  --md-code-fg-color:               var(--uci-phos);
  --md-code-hl-color:               var(--uci-amber);

  --md-typeset-color:               var(--uci-fg);
  --md-typeset-a-color:             var(--uci-phos);
  --md-typeset-mark-color:          var(--uci-amber-dim);

  --md-footer-bg-color:             var(--uci-bg-elev);
  --md-footer-bg-color--dark:       var(--uci-bg);
  --md-footer-fg-color:             var(--uci-fg-dim);
  --md-footer-fg-color--light:      var(--uci-fg);
  --md-footer-fg-color--lighter:    var(--uci-fg-dim);
}

/* ────────────────────────────────────────────────────────────
 * Body + scanline texture
 * ──────────────────────────────────────────────────────────── */
body {
  background:
    /* very subtle horizontal scanline pattern */
    repeating-linear-gradient(
      0deg,
      rgba(0, 255, 102, 0.012) 0px,
      rgba(0, 255, 102, 0.012) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--uci-bg) !important;
  color: var(--uci-fg);
  font-feature-settings: "ss01", "ss02", "calt", "liga", "tnum";
}

.md-typeset {
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ────────────────────────────────────────────────────────────
 * Headings — slight phosphor glow on h1/h2; mono, tight tracking
 * ──────────────────────────────────────────────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--uci-fg-bright);
}
.md-typeset h1 {
  font-size: 1.7rem;
  margin: 1.4em 0 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--uci-phos-dim);
  text-shadow:
    0 0 8px rgba(0, 255, 102, 0.18),
    0 0 1px rgba(0, 255, 102, 0.6);
}
.md-typeset h1::before {
  content: "▸ ";
  color: var(--uci-phos);
}
.md-typeset h2 {
  font-size: 1.25rem;
  margin: 1.5em 0 0.5em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--uci-rule);
}
.md-typeset h2::before {
  content: "// ";
  color: var(--uci-phos-dim);
  opacity: 0.7;
}
.md-typeset h3 {
  font-size: 1rem;
  color: var(--uci-phos);
  margin: 1.4em 0 0.4em;
}
.md-typeset h4 {
  font-size: 0.9rem;
  color: var(--uci-fg-bright);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ────────────────────────────────────────────────────────────
 * Top header bar + nav tabs
 * ──────────────────────────────────────────────────────────── */
.md-header {
  background: var(--uci-bg-elev);
  border-bottom: 1px solid var(--uci-rule-bright);
  box-shadow: 0 0 0 1px var(--uci-rule), 0 -1px 0 0 var(--uci-phos-dim) inset;
}
.md-header__title {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.md-header__topic:first-child {
  font-size: 0.8rem;
}
.md-header__topic:first-child::before {
  content: "[ ";
  color: var(--uci-phos);
}
.md-header__topic:first-child::after {
  content: " ]";
  color: var(--uci-phos);
}
.md-tabs {
  background: var(--uci-bg);
  border-bottom: 1px solid var(--uci-rule);
}
.md-tabs__link {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
  color: var(--uci-phos);
}

/* ────────────────────────────────────────────────────────────
 * Sidebar nav
 * ──────────────────────────────────────────────────────────── */
.md-sidebar {
  background: var(--uci-bg);
}
.md-nav {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
}
.md-nav__title {
  color: var(--uci-fg-bright);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent !important;
  border-bottom: 1px solid var(--uci-rule);
}
.md-nav__item .md-nav__link {
  color: var(--uci-fg-dim);
}
.md-nav__item .md-nav__link:hover,
.md-nav__item .md-nav__link--active {
  color: var(--uci-phos);
}
.md-nav__item .md-nav__link--active::before {
  content: "▸ ";
  color: var(--uci-phos);
}

/* ────────────────────────────────────────────────────────────
 * Code blocks — milspec terminal
 * ──────────────────────────────────────────────────────────── */
.md-typeset pre,
.md-typeset .codehilite,
.md-typeset .highlight {
  background: var(--uci-bg-code) !important;
  border: 1px solid var(--uci-rule-bright);
  border-radius: 0 !important;
  position: relative;
  margin: 1.25em 0;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 102, 0.04),
    0 0 0 1px var(--uci-bg);
}

/* Corner brackets — instrument-grade chrome */
.md-typeset .codehilite::before,
.md-typeset .codehilite::after,
.md-typeset pre::before,
.md-typeset pre::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--uci-phos);
  pointer-events: none;
}
.md-typeset .codehilite::before,
.md-typeset pre::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.md-typeset .codehilite::after,
.md-typeset pre::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.md-typeset pre > code,
.md-typeset .codehilite pre,
.md-typeset .codehilite code {
  background: transparent !important;
  color: var(--uci-fg);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  line-height: 1.5;
  padding: 1em 1.1em;
}

/* Inline code — sharp phosphor chip */
.md-typeset code {
  background: var(--uci-bg-card);
  color: var(--uci-phos);
  border: 1px solid var(--uci-rule);
  border-radius: 0;
  padding: 0.05em 0.35em;
  font-size: 0.84em;
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────────
 * Pygments syntax highlighting — green/cyan/amber phosphor palette
 * ──────────────────────────────────────────────────────────── */
.codehilite .c,  /* comment */
.codehilite .c1,
.codehilite .cm,
.codehilite .cs,
.codehilite .cp { color: #4a7c50; font-style: italic; }

.codehilite .k,  /* keyword */
.codehilite .kc,
.codehilite .kd,
.codehilite .kn,
.codehilite .kp,
.codehilite .kr,
.codehilite .kt  { color: #6cc4ff; font-weight: 500; }

.codehilite .s,  /* string */
.codehilite .s1,
.codehilite .s2,
.codehilite .sb,
.codehilite .sc,
.codehilite .sd,
.codehilite .se,
.codehilite .sh,
.codehilite .si,
.codehilite .sx,
.codehilite .sr,
.codehilite .ss { color: #ffb020; }

.codehilite .nv, /* shell variable */
.codehilite .vi,
.codehilite .vc,
.codehilite .vg { color: var(--uci-phos); }

.codehilite .nb, /* builtin */
.codehilite .nf, /* function */
.codehilite .nc, /* class */
.codehilite .nn, /* namespace */
.codehilite .ne, /* exception */
.codehilite .na  { color: #c5e0c9; }

.codehilite .m,  /* number */
.codehilite .mi,
.codehilite .mf,
.codehilite .mh,
.codehilite .mo  { color: #ff66cc; }

.codehilite .o,  /* operator */
.codehilite .ow,
.codehilite .p   { color: var(--uci-fg-dim); }

.codehilite .err { color: var(--uci-red); background: rgba(255,56,56,0.08); }

/* ────────────────────────────────────────────────────────────
 * Tables — instrument-grade gridlines
 * ──────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  background: var(--uci-bg-card);
  border: 1px solid var(--uci-rule-bright);
  border-radius: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
}
.md-typeset table:not([class]) th {
  background: var(--uci-bg-elev);
  color: var(--uci-phos);
  border-bottom: 1px solid var(--uci-phos-dim);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.md-typeset table:not([class]) td {
  border-color: var(--uci-rule);
}

/* ────────────────────────────────────────────────────────────
 * Links + emphasis
 * ──────────────────────────────────────────────────────────── */
.md-typeset a {
  color: var(--uci-phos);
  text-decoration: none;
  border-bottom: 1px dashed var(--uci-phos-dim);
  transition: color 80ms linear, border-color 80ms linear;
}
.md-typeset a:hover {
  color: var(--uci-fg-bright);
  border-bottom-color: var(--uci-phos);
}

.md-typeset strong,
.md-typeset b {
  color: var(--uci-fg-bright);
}

.md-typeset hr {
  border-color: var(--uci-rule-bright);
  border-style: dashed;
}

/* ────────────────────────────────────────────────────────────
 * Blockquotes — left bracket
 * ──────────────────────────────────────────────────────────── */
.md-typeset blockquote {
  border-left: 2px solid var(--uci-phos);
  background: linear-gradient(90deg, rgba(0,255,102,0.04) 0%, transparent 100%);
  color: var(--uci-fg);
  font-style: italic;
  padding: 0.6em 1em;
  margin: 1em 0;
}

/* ────────────────────────────────────────────────────────────
 * Admonitions
 * ──────────────────────────────────────────────────────────── */
.md-typeset .admonition {
  background: var(--uci-bg-card);
  border: 1px solid var(--uci-rule-bright);
  border-left: 3px solid var(--uci-phos);
  border-radius: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
}
.md-typeset .admonition-title {
  background: var(--uci-bg-elev);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--uci-phos);
}
.md-typeset .admonition.warning,
.md-typeset .admonition.caution {
  border-left-color: var(--uci-amber);
}
.md-typeset .admonition.warning .admonition-title,
.md-typeset .admonition.caution .admonition-title {
  color: var(--uci-amber);
}
.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset .admonition.error {
  border-left-color: var(--uci-red);
}

/* ────────────────────────────────────────────────────────────
 * Search box
 * ──────────────────────────────────────────────────────────── */
.md-search__input {
  background: var(--uci-bg-card) !important;
  color: var(--uci-fg) !important;
  font-family: "JetBrains Mono", monospace;
  border: 1px solid var(--uci-rule-bright);
  border-radius: 0;
}
.md-search__input::placeholder {
  color: var(--uci-fg-dim) !important;
}

/* ────────────────────────────────────────────────────────────
 * Footer
 * ──────────────────────────────────────────────────────────── */
.md-footer-meta {
  background: var(--uci-bg-elev);
  border-top: 1px solid var(--uci-phos-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.md-footer__inner {
  background: var(--uci-bg);
}

/* ────────────────────────────────────────────────────────────
 * Scrollbars
 * ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--uci-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--uci-rule-bright);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--uci-phos-dim);
}

/* ────────────────────────────────────────────────────────────
 * Selection
 * ──────────────────────────────────────────────────────────── */
::selection {
  background: var(--uci-phos);
  color: var(--uci-bg);
}

/* ────────────────────────────────────────────────────────────
 * Hero overrides — kill the rounded corners + Material defaults
 * ──────────────────────────────────────────────────────────── */
.md-typeset img,
.md-typeset svg {
  border: 1px solid var(--uci-rule-bright);
  box-shadow: 0 0 0 1px var(--uci-bg), 0 4px 16px rgba(0,0,0,0.6);
}