:root {
    --bg: #0a0f14;
    --panel: rgba(18, 24, 31, .72);
    --glass: rgba(22, 28, 36, .45);
    --text: #d8f3ff;
    --text-dim: #a7c7da;
    --accent: #58ffc8;
    --accent-2: #39c3ff;
    --warn: #ff5d7a
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial;
  color: var(--text-dim);
  background:
    radial-gradient(1100px 800px at 20% -10%, rgba(57,195,255,.08), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(88,255,200,.06), transparent 60%),
    var(--bg);
  background-repeat: no-repeat, no-repeat, no-repeat; /* ← key */
  background-attachment: fixed, fixed, fixed;         /* optional: nice parallax */
  line-height: 1.7;
}

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

a:hover {
    color: var(--accent);
    text-decoration: underline
}

.status-bar {
    position: sticky;
    top: 0;
    z-index: 9;
    background: rgba(10, 15, 20, .92);
    border-bottom: 1px solid rgba(88, 255, 200, .25);
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: IBM Plex Mono, ui-monospace, Menlo, Consolas, monospace;
    color: var(--text);
    font-size: .92rem
}

.badge {
    color: var(--accent)
}

.container {
    max-width: 1200px;
    margin: 48px auto;
    padding: 0 20px
}

.console {
    background: var(--panel);
    border: 1px solid rgba(57, 195, 255, .25);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 0 80px rgba(57, 195, 255, .06);
    backdrop-filter: blur(8px);
    overflow: clip
}

.console .header {
    padding: 22px 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(57, 195, 255, .2)
}

.title {
    color: var(--text);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: .02em
}

.subtle {
    font-family: IBM Plex Mono;
    color: var(--text-dim)
}

.console .body {
    padding: 26px
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px
}

.card {
    grid-column: span 12;
    background: var(--glass);
    border: 1px solid rgba(57, 195, 255, .18);
    border-radius: 14px;
    padding: 18px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.card:hover {
    transform: translateY(-2px);
    border-color: rgba(88, 255, 200, .35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

@media (min-width:720px) {
    .card {
        grid-column: span 6
    }
}

@media (min-width:980px) {
    .card {
        grid-column: span 4
    }
}

.card h3 {
    margin: 0 0 6px;
    color: var(--text);
    font-weight: 700
}

.card .meta {
    font-family: IBM Plex Mono;
    font-size: .84rem;
    color: var(--text-dim);
    margin-bottom: 8px
}

.card .tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0 0
}

.tag {
    font-family: IBM Plex Mono;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(88, 255, 200, .35);
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(88, 255, 200, .08), rgba(88, 255, 200, .02))
}

.hero {
    padding: 28px 26px 0
}

.h1 {
    margin: 0;
    color: var(--text);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem)
}

.kicker {
    font-family: IBM Plex Mono;
    color: var(--accent-2);
    font-size: .86rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.tags-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 0
}

.sub {
    font-family: IBM Plex Mono;
    color: var(--text-dim);
    margin: 0 0 16px
}

.content {
    font-family: IBM Plex Mono;
    color: var(--text);
    background: var(--glass);
    border: 1px solid rgba(57, 195, 255, .18);
    border-radius: 12px;
    padding: 18px;
    margin: 18px 26px
}

blockquote {
    margin: 18px 0;
    padding: 14px 18px 14px 22px;
    background: linear-gradient(180deg, rgba(57, 195, 255, .08), rgba(57, 195, 255, .03));
    border: 1px solid rgba(57, 195, 255, .25);
    border-left: 4px solid var(--accent-2);
    border-radius: 12px;
    color: var(--text)
}

blockquote .kicker {
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 6px
}

.footer-readouts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-family: IBM Plex Mono;
    margin: 0 26px 26px
}

.readout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid rgba(88, 255, 200, .35);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(88, 255, 200, .08), rgba(88, 255, 200, .02));
    color: var(--text);
    font-size: .85rem;
    white-space: nowrap
}

.readout .label {
    color: var(--accent-2);
    opacity: .9
}

.readout .val {
    color: var(--accent)
}

.readout .unit {
    opacity: .75
}

.boot {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    background: radial-gradient(600px 400px at 50% 10%, rgba(57, 195, 255, .06), transparent 60%), var(--bg);
    color: var(--text);
    z-index: 9999;
    transition: opacity .5s ease;
    pointer-events: none;
    opacity: 0;
    font-family: IBM Plex Mono
}

.boot.show {
    opacity: 1;
    pointer-events: auto
}

/* =========================
   TSD Patch — Mission list bullets
   Make Mission Logs under both Personnel and Mission panels
   use the same bullet style and indentation.
   ========================= */
#personnel-list ul,
#mission-list ul {
  list-style: disc outside;   /* uniform solid bullet */
  margin-left: 1.25rem;       /* consistent indent */
  padding-left: 1.25rem;      /* keep text aligned */
}

/* Ensure nested ULs (e.g., inside <details>) keep the same bullets */
#personnel-list ul ul,
#mission-list ul ul {
  list-style: disc outside;
}