/* ============================================================
   Baron Mind Stream — console.css
   Shared "Star Trek console" aesthetic.
   Usage:  <link rel="stylesheet" href="/assets/css/console.css">
   Each page sets --accent (jewel color) for its local highlights.
   Cyan is the universal structural color (hairlines, sec-IDs, labels).
   Tokens live in base.css: --console-cyan, --console-hot,
   --console-hairline, --console-hairline-soft, --console-glass,
   --console-top-edge, --mono.
   ============================================================ */

/* Scan-line + ambient radial overlay (uses page --accent for bottom tint) */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(125,211,252,0.018) 0 1px,
      transparent 1px 3px
    ),
    radial-gradient(ellipse at 50% 0%, rgba(125,211,252,0.05), transparent 60%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent, #7dd3fc) 8%, transparent), transparent 70%);
}
header, main, footer, nav { position: relative; z-index: 1; }

/* ---- Console preamble strip ---- */
.console-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.85rem;
  padding:0.5rem 0.85rem;
  margin-bottom:1.25rem;
  border:1px solid var(--console-hairline);
  border-radius:4px;
  background:var(--console-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 var(--console-top-edge);
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(160,164,173,0.85);
}
.console-strip .live{
  width:7px; height:7px;
  border-radius:50%;
  background: var(--accent, var(--console-hot));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, var(--console-hot)) 60%, transparent);
  animation:lcars-pulse 2.4s ease-in-out infinite;
  flex-shrink:0;
}
.console-strip .label{ color: var(--console-cyan); }
.console-strip .sep{
  width:1px; height:14px;
  background:var(--console-hairline);
  margin:0 0.15rem;
}
.console-strip .stamp{ color:rgba(160,164,173,0.6); }
@keyframes lcars-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.5;transform:scale(0.9);}
}

/* ---- Glass section panels (details/summary pattern) ---- */
.section{
  margin-bottom:0.95rem;
  border-radius:5px;
  overflow:hidden;
  border:1px solid var(--console-hairline-soft);
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.section[open]{
  border-color:var(--console-hairline);
  box-shadow:0 0 0 1px var(--console-hairline-soft) inset, 0 8px 30px -15px rgba(125,211,252,0.22);
}
.section summary{
  cursor:pointer;
  list-style:none;
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  gap:0.85rem;
  align-items:center;
  padding:0.7rem 1rem;
  background:var(--console-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 var(--console-top-edge);
  color:var(--fg);
  transition:background 0.18s ease;
}
.section summary::-webkit-details-marker{ display:none; }
.section summary:hover{ background:rgba(22,26,34,0.7); }
.section[open] summary{ border-bottom:1px solid var(--console-hairline-soft); }

.sec-id{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.16em;
  color:var(--console-cyan);
  padding:0.18rem 0.45rem;
  border:1px solid var(--console-hairline);
  border-radius:3px;
  background:rgba(125,211,252,0.04);
}
.sec-pulse{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--console-cyan);
  box-shadow:0 0 6px rgba(125,211,252,0.6);
  opacity:0.55;
}
.section[open] .sec-pulse{
  background: var(--accent, var(--console-hot));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, var(--console-hot)) 60%, transparent);
  opacity:1;
  animation:lcars-pulse 2.4s ease-in-out infinite;
}
.sec-title{
  font-size:1rem;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--fg);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sec-count{
  font-family:var(--mono);
  font-size:0.75rem;
  color:rgba(160,164,173,0.7);
  letter-spacing:0.06em;
}
.sec-toggle{
  font-family:var(--mono);
  font-size:0.78rem;
  color:rgba(160,164,173,0.55);
  width:18px;
  text-align:center;
  transition:color 0.15s ease, transform 0.25s ease;
}
.section[open] .sec-toggle{
  color: var(--accent, var(--console-cyan));
  transform:rotate(180deg);
}

.section-body{
  background:rgba(15,17,21,0.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:1rem 1.15rem 1.2rem;
}

/* ---- Bracketed inline label tag ---- */
.label-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.66rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:0.12rem 0.4rem;
  border:1px solid var(--console-hairline);
  border-radius:3px;
  color:var(--console-cyan);
  background:rgba(125,211,252,0.04);
  margin-right:0.35rem;
  vertical-align:1px;
}

/* ---- Reusable glass panel ---- */
.console-panel{
  background:var(--console-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--console-hairline-soft);
  border-radius:4px;
  box-shadow:inset 0 1px 0 var(--console-top-edge);
  padding:1rem 1.15rem;
}

/* ---- Mobile defaults ---- */
@media (max-width: 600px){
  .console-strip{ font-size:0.62rem; gap:0.55rem; padding:0.45rem 0.65rem; }
  .console-strip .stamp{ display:none; }
  .section summary{ grid-template-columns:auto auto 1fr auto; gap:0.55rem; padding:0.6rem 0.75rem; }
  .sec-pulse{ display:none; }
  /* Allow long section titles to wrap on narrow screens instead of being
     truncated mid-word; keeps the row readable on portrait phones. */
  .sec-title{
    font-size:0.92rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }
  .section-body{ padding:0.85rem 0.85rem 1rem; }
}

/* ---- Light theme adjustments ---- */
[data-theme="light"] .section summary,
[data-theme="light"] .console-strip,
[data-theme="light"] .console-panel{
  background: rgba(255,255,255,0.6);
}
[data-theme="light"] .section-body{
  background: rgba(255,255,255,0.7);
}