@font-face{
  font-family: "INT10H_VGA_9x16";
  src: url("/static/fonts/WebPlus_IBM_VGA_9x16.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Share Tech Mono";
  src: url("/static/fonts/ShareTechMono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --card:#121b27;
  --muted:#95a3b3;
  --text:#e8eef6;
  --accent:#61dafb;
  --border:#223245;
  --quote:#182536;
  --new:#122a1d;

  --bbs-ui-mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bbs-msg-font: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #0f1620, #0b0f14);
  position:sticky;
  top:0;
  z-index: 1000;
}
.brand{font-weight:700; letter-spacing:.3px}
.links{
  display:flex;
  gap:10px;
  align-items: flex-end;
  flex-wrap:wrap;
  justify-content:center;
  margin:0 auto;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.02);

/* Topbar primary nav pills (Home / Explore) should align with compact dropdowns and match their styling */
.topbar .links > a.pill,
.topbar .links > .exploreWrap > button.pill{
  height:26px;
  padding:3px 12px;
  font-size:12px;
  background: var(--panel, #0f1620);
  border: 1px solid rgba(255,255,255,0.22);
}
.topbar .links > a.pill:hover,
.topbar .links > .exploreWrap > button.pill:hover{
  filter: brightness(1.12);
}
}

/* Buttons that use the pill style should look clickable (Time Machine uses inline cursor styles).
   Apply globally so pages like Board DNA, Conference Pulse, and Poster Cloud get the same affordance. */
button.pill{ cursor:pointer; }

/* Generic button affordance for pages that use .btn/.btnGhost helpers */
button.btn, button.btnGhost, .btn, .btnGhost{ cursor:pointer; }

/* --- UX extras (ui_extras.js) --- */
.pillBtn{ border:none; cursor:pointer; }

.rangePill{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  font-size:12px;
  opacity:.9;
  user-select:none;
}

@keyframes bbsvizFlash {
  0%{ box-shadow:0 0 0 rgba(0,0,0,0); border-color: rgba(255,255,255,0.14); }
  35%{ box-shadow:0 0 18px rgba(120,255,190,0.35); border-color: rgba(120,255,190,0.8); }
  100%{ box-shadow:0 0 0 rgba(0,0,0,0); border-color: rgba(255,255,255,0.14); }
}
.rangeFlash{ animation: bbsvizFlash .9s ease-out 1; }

.quickRangeRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.quickRangeBtn{
  padding:6px 10px;
  font-size:12px;
  border-radius:10px;
}

/* ANSI mode (nostalgia toggle) */
html.ansiMode{ letter-spacing: 0.1px; text-rendering: geometricPrecision; }
html.ansiMode body{ background:#020202; }
html.ansiMode .card, html.ansiMode .panel{
  box-shadow: 0 0 0 1px rgba(120,255,190,0.08), 0 0 26px rgba(120,255,190,0.06);
}
html.ansiMode pre, html.ansiMode code{ font-family: var(--bbs-msg-font, ui-monospace, monospace); }

/* Time Machine density bar */
.densityBar{
  position:absolute;
  display:flex;
  align-items:stretch;
  height:10px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  overflow:hidden;
}
.densityCell{ flex:1; background: rgba(120,255,190,0.08); }

.container{padding:16px; max-width:960px; margin:0 auto}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

/* ---- Split layout (resizable columns) ---- */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.panel-header{
  padding:12px;
  border-bottom:1px solid var(--border);
  display:flex;
  gap:8px;
  align-items:center;
}

/* Legacy header used by Conference Lens (kept for compatibility) */
.panelHead{
  padding:12px;
  border-bottom:1px solid var(--border);
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.panelHead .spacer{flex:1 1 auto;}
.panelHead .ctl-group{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.panelHead input[type="range"]{width:140px;max-width:45vw;}

/* Stacked header controls (prevents cramped rows on narrower screens) */
.panel-header-col{
  padding:12px;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}

.panel-body{
  padding:10px;
  overflow:auto;
  min-height:0;
  flex:1;
}

/* Sidebar bits */
.search{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--text);
}
.thread-item{
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:10px;
  cursor:pointer;
  background:rgba(255,255,255,.02);
}
.thread-item:hover{border-color:#355071}
.thread-item .meta{color:var(--muted); font-size:12px; margin-top:6px}
.thread-item .title{font-weight:600}

/* Cytoscape container */
#cy{
  width:100%;
  height:100%;
  background:rgba(255,255,255,.01);
}

/* Message inspector */
.msg-header{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.kv{color:var(--muted); font-size:12px}
.mono{
  font-family: var(--bbs-ui-mono-font);
}
.pre{
  white-space:pre-wrap;
  font-family: var(--bbs-msg-font);
font-size:13px;
  line-height:1.35;
}
.block{
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  margin-top:10px;
}
.block.quote{background:var(--quote)}
.block.new{background:var(--new)}
.small{font-size:12px; color:var(--muted)}


.section-title{font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg); opacity:0.85}
.section-title::after{content:""; display:block; height:1px; margin-top:6px; background:linear-gradient(90deg,var(--accent), transparent); opacity:0.55}
/* Time Machine tidbits layout helpers */
.tm-tidbit-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}

.tm-tidbit-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tm-tidbit-metric{
  font-size:16px;
  line-height:1.2;
}

.tm-link{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:2px;
}

.tm-open-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px; /* keep Open and Subject aligned */
}

.tm-open{ font-size:14px; }
.tm-subject{ font-size:14px; font-weight:700; }

/* Tree */
.tree details{
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px 10px;
  margin:8px 0;
  background:rgba(255,255,255,.02);
}
.tree summary{
  cursor:pointer;
  list-style:none;
}
.tree summary::-webkit-details-marker{display:none}
.tree .node-meta{color:var(--muted); font-size:12px; margin-left:6px}

/* ---- 3-pane layout (resizable with splitter.js) ---- */
.layout{
  --left: 20;
  --center: 40;
  --right: 40;
  display:grid;
  grid-template-columns: calc((100% - 24px) * var(--left) / 100) 12px calc((100% - 24px) * var(--center) / 100) 12px calc((100% - 24px) * var(--right) / 100);
  height: calc(100vh - 56px);
  padding:12px;
  gap:0;
}
.gutter{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:10px;
  cursor: col-resize;
  position:relative;
}
.gutter::after{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  border-radius:2px;
  background:rgba(97,218,251,.25);
}
body.dragging{ cursor: col-resize; user-select:none; }

#net{ width:100%; height:100%; background:rgba(255,255,255,.01);} 


/* --- Time Machine theme modes --- */
:root[data-theme="vga"]{
  --bg: #0b0f14;
  --panel: #0f1620;
  --text: #e8f0ff;
  --muted: #9bb0c9;
  --accent: #1f6feb;
}

:root[data-theme="amber"]{
  --bg: #0c0903;
  --panel: #141006;
  --text: #ffd38a;
  --muted: #caa36a;
  --accent: #ffb020;
}

:root[data-theme="phosphor"]{
  --bg: #04100a;
  --panel: #07180f;
  --text: #b7ffcf;
  --muted: #7bd9a0;
  --accent: #2ee37b;
}

/* apply vars */
body{ background: var(--bg, #0b0f14); color: var(--text, #e8f0ff); }
.panel, .card{ background: var(--panel, #0f1620); }
.pill{ border-color: rgba(255,255,255,0.08); color: var(--text, #e8f0ff); }
.pill:hover{ border-color: rgba(255,255,255,0.18); }


/* Better contrast for dropdowns and inputs (theme-aware) */
select, option, input[type="date"], input[type="text"], input[type="range"], .search {
  background: var(--panel, #0f1620);
  color: var(--text, #e8f0ff);
  border: 1px solid rgba(255,255,255,0.22);
}

option{
  background: var(--panel, #0f1620);
  color: var(--text, #e8f0ff);
}

select:focus, .search:focus, input[type="date"]:focus{
  outline: none;
  border-color: var(--accent, #1f6feb);
}


/* ---- Slider-controlled font sizing: ensure inner elements scale too ---- */
#msgCard .pre { font-size: 1em; }                /* override global 13px */
#msgCard .small { font-size: 0.85em; }           /* override global 12px */
#msgCard .kv { font-size: 0.85em; }              /* override global 12px */
#msgCard .thread-item .small { font-size: 0.85em; }

#profile .pre { font-size: 1em; }
#profile .small { font-size: 0.85em; }
#profile .kv { font-size: 0.85em; }


/* Better contrast for dropdowns/inputs (theme-aware) */
select, option, .search, input[type="date"], input[type="range"]{
  background: var(--panel, #0f1620);
  color: var(--text, #e8f0ff);
}
select, .search, input[type="date"]{
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 10px;
}
select:focus, .search:focus, input[type="date"]:focus{
  outline:none;
  border-color: var(--accent, #1f6feb);
}

/* Theme selector in topbar */
.themeWrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.themeLbl{
  font-size:12px;
  color: rgba(232,240,255,0.85);
}
.themeSel{
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
}

/* Thread Galaxy control grouping */
.top-controls{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ctl-group{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(2px);
}
.ctl-title{
  font-weight:700;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.ctl-group label{
  display:flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
}
.ctl-group input[type="range"]{
  width: 140px;
}


/* --- BBS/ANSI vibe --- */
body{
  font-family: "Share Tech Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre, code, textarea, .messageBody{
  font-family: var(--bbs-msg-font);
  letter-spacing: 0;
  line-height: 1.1;
}
body.scanlines::before{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 1px,
    rgba(0,0,0,0.0) 3px,
    rgba(0,0,0,0.0) 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.22;
  z-index: 0;
}
body.scanlines::after{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:-10%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.05), rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.35));
  opacity:0.5;
  z-index:0;
}
.container, .panel, .card{
  position: relative;
  z-index: 1;
}
.topbar{
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.pill{
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}
.card, .panel{
  border: 1px solid rgba(255,255,255,0.14);
}


/* Discover results */
.list .row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  margin-top:10px;
}
.rowTitle{
  font-size: 22px;
  line-height: 1.1;
}
.rowMeta{
  opacity: 0.85;
  margin-top: 4px;
  font-size: 12px;
}
.rowActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}


.siggrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
.sigcard{
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  padding:10px;
  background: rgba(0,0,0,0.18);
}
@media (max-width: 900px){
  .siggrid{ grid-template-columns: 1fr; }
}


/* Quote-Tree Explorer: clearer nesting contrast */
#tree details{
  margin-top:10px;
  padding:10px 10px 10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
}
#tree details > summary{
  cursor:pointer;
  list-style:none;
  outline:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
#tree details > summary::-webkit-details-marker{ display:none; }

#tree details details{
  border-left: 3px solid rgba(255,190,90,0.35);
  background: rgba(0,0,0,0.12);
}
#tree details details > summary{
  background: rgba(255,255,255,0.03);
}
#tree details details details{
  border-left-color: rgba(90,200,255,0.28);
}
#tree details details details details{
  border-left-color: rgba(180,120,255,0.22);
}
#tree details details details details details{
  border-left-color: rgba(120,255,170,0.20);
}

/* Conference Lens: reuse Quote-Tree nesting colors in the middle-pane thread previews */
.quoteNest details{
  margin-top:10px;
  padding:10px 10px 10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
}
.quoteNest details > summary{
  cursor:pointer;
  list-style:none;
  outline:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.quoteNest details > summary::-webkit-details-marker{ display:none; }

.quoteNest details details{
  border-left: 3px solid rgba(255,190,90,0.35);
  background: rgba(0,0,0,0.12);
}
.quoteNest details details > summary{
  background: rgba(255,255,255,0.03);
}
.quoteNest details details details{
  border-left-color: rgba(90,200,255,0.28);
}
.quoteNest details details details details{
  border-left-color: rgba(180,120,255,0.22);
}
.quoteNest details details details details details{
  border-left-color: rgba(120,255,170,0.20);
}

.node-meta{
  opacity:0.85;
  margin-left:10px;
}


/* Quote-Tree: selected thread highlight */
.thread-item.selected{
  border-color: rgba(255,190,90,0.55) !important;
  box-shadow: 0 0 0 2px rgba(255,190,90,0.10) inset, 0 0 18px rgba(255,190,90,0.08);
  background: rgba(255,190,90,0.06);
}


/* Board DNA */
.dnaChart{
  width: 100%;
  min-height: 380px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  padding: 10px;
  overflow: hidden;
}
.dnaSvg{ width:100%; height:auto; display:block; }
.dnaGrid{ stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.dnaAxisText{
  fill: rgba(255,255,255,0.72);
  font-size: 11px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.dnaChip{
  display:inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  margin: 4px 6px 0 0;
  white-space: nowrap;
}
.confRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  cursor:pointer;
}
.confRow:hover{ background: rgba(255,255,255,0.04); }
.confRow input{ transform: scale(1.05); }
.confName{ flex:1; }
.confMeta{ opacity:.85; }


/* DNA layout helpers */
.padTitle{ padding: 16px; }
.sectionTitle{ padding-left: 10px; padding-right: 10px; }
.rowWrap{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding: 0 6px; }

.dnaLeft .block .mono.sectionTitle,
.dnaLeft .block .sectionTitle{
  display:block;
}



/* Message font selector in topbar */
.fontWrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.fontWrap.inline{ flex-direction:row !important; align-items:center; gap:8px; }
.fontLbl{
  font-size:12px;
  color: rgba(232,240,255,0.85);
}
.fontSel{
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
}


/* Theme + Msg Font cluster in topbar */
.themeAndFont{
  display:flex;
  align-items:center;
  gap:12px;
}

.themeSel, .fontSel{
  height: 30px;
  line-height: 18px;
}
/* Responsive compact selectors in topbar (Theme / Msg Font / Archive) */
.themeAndFont{ align-items:flex-end; gap:10px; }
.topbar .themeWrap, .topbar .fontWrap, .topbar .archiveWrap{
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:center;
}
.topbar .themeLbl, .topbar .fontLbl, .topbar .archiveLbl{
  font-size:11px;
  line-height:11px;
  opacity:0.82;
  margin:0;
}
.topbar .themeSel, .topbar .fontSel, .topbar .archiveSel{
  height:26px;
  font-size:12px;
  padding: 3px 8px;
}
@media (max-width: 720px){
  .themeAndFont{ gap:8px; }
  .topbar .themeSel, .topbar .fontSel, .topbar .archiveSel{ height:26px; font-size:12px; }
}



.searchRow{
  display:flex;
  align-items:center;
  gap:8px;
}
.btnTiny{
  height:30px;
  width:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: rgba(232,240,255,0.9);
  cursor:pointer;
}
.btnTiny:hover{ filter: brightness(1.15); }

/* Conference Lens controls: responsive stacking so search + mode don't cram */
.confTop{display:flex;flex-direction:column;gap:10px;max-width:980px}
.confTop .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.confTop .row label{min-width:92px;color:var(--fg2)}
.confTop .row select,.confTop .row .input{flex:1;min-width:260px}
.confTop .modePills{display:flex;gap:10px;flex-wrap:wrap}
.confTop .btnTiny{height:34px;width:36px}

@media (max-width: 1100px){
  .confTop{max-width:100%}
  .confTop .row select,.confTop .row .input{min-width:0;width:100%}
  .confTop .btnTiny{align-self:flex-end}
  .confTop .modePills{width:100%}
}

.searchMode{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.radioPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  font-size:12px;
  color: rgba(232,240,255,0.9);
}
.radioPill input{ accent-color: #8fb8ff; }


/* v39: keep topbar/toolbar controls aligned */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.toolbar, .toolbarRow, .controls, .topbar .links{
  align-items: flex-end;
}

/* Archive selector (shared across pages)
   Styled to match Theme selector (see .themeWrap/.themeSel). */
.archiveWrap{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left: 10px; /* small separation from the nav pills */
}
.archiveLbl{
  font-size:12px;
  color: rgba(232,240,255,0.85);
}
.archiveSel{
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
}


.taglink{display:inline-block;margin-left:8px;padding:2px 6px;border:1px solid var(--border);border-radius:999px;font-size:12px;text-decoration:none;color:var(--text);opacity:.85}
.taglink:hover{opacity:1}
.rowitem.sel{outline:2px solid var(--accent);}


.section-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;}
.section-title-right{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}


/* Page header: BBSviz + fading rule + page title */
.page-head{margin:10px 0 14px 0;}
.page-head .page-brand{font-size:18px; font-weight:800; letter-spacing:.04em;}
.page-head .fade-rule{height:1px; margin:6px 0 8px 0; background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.30), rgba(255,255,255,0.0));}
.page-head .page-title{font-size:18px; font-weight:700; margin:0;}

/* Topbar brand + page title stack */
.topbar{align-items:flex-start;}
.brandstack{display:flex; flex-direction:column; gap:4px; padding:6px 10px 0 10px;}
.brandstack .brand{font-size:18px; font-weight:800; letter-spacing:.04em; line-height:1;}
.brandstack .fade-rule-top{height:1px; width:120px; background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.35), rgba(255,255,255,0.0));}
.brandstack .pagetitle{font-size:14px; font-weight:700; line-height:1; opacity:.95;}
.topbar .links{padding-top:6px;}


/* ---- App layouts (Galaxy / Quote-Tree / Handle Atlas) ----
   Fix persistent scrollbars caused by % columns + fixed gutters and
   ensure panels can flex without forcing body-level scrollbars. */
html, body.app-layout { height: 100%; }
body.app-layout{
  display:flex;
  flex-direction:column;
  overflow:hidden; /* prevent phantom page scrollbars */
}
body.app-layout .layout{
  flex:1 1 auto;
  min-height:0;
  height:auto; /* override calc(100vh - topbar) */
  width:100%;
}


/* Range slider (cross-browser) */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,0.18);
  outline:none;
}
input[type="range"]:focus{ outline:none; }
input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,0.18);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background: rgba(230,230,230,0.95);
  border: 1px solid rgba(0,0,0,0.45);
  margin-top:-5px;
}
input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,0.18);
}
input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background: rgba(230,230,230,0.95);
  border: 1px solid rgba(0,0,0,0.45);
}
input[type="range"]::-ms-track{
  height:6px;
  border-radius:999px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper{
  background: rgba(255,255,255,0.18);
  border-radius:999px;
}
input[type="range"]::-ms-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background: rgba(230,230,230,0.95);
  border: 1px solid rgba(0,0,0,0.45);
}


/* --- Global footer links (legal/about) --- */
.globalFooter{
  position: relative;
  z-index: 10; /* ensure above background effects */
  margin: 22px auto 28px auto;
  /* Match the visible width of content inside .container (which has 16px side padding). */
  width: calc(100% - 32px);
  max-width: 928px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: rgba(15,22,32,0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
  border-radius: 10px;
}
.globalFooter .footerInner{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  font-family: var(--bbs-ui-mono-font);
  font-size: 13px;
  color: var(--muted);
  text-align:center;
}
.globalFooter a{
  color: var(--accent);
  text-decoration: none;
}
.globalFooter a:hover{ text-decoration: underline; }
.globalFooter .sep{ opacity:0.7; }

/* --- Legal/about pages --- */
.legalBody{ line-height: 1.55; }
.legalBody h1.legalH1{
  margin: 0 0 12px 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}
.legalText p{ margin: 10px 0; }
.legalText ul, .legalText ol{ margin: 10px 0 10px 22px; }
.legalCallout{
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(18,27,39,0.75);
  border-radius: 10px;
}


/* --- Compact Explore navigation --- */
.exploreWrap{ position:relative; display:inline-block; }
.exploreWrap .pill{ cursor:pointer; }
.exploreMenu{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: min(92vw, 340px);
  max-height: min(70vh, 520px);
  overflow:auto;
  padding: 10px 10px 8px 10px;
  border: 1px solid var(--border);
  background: rgba(10,16,24,0.96);
  box-shadow: 0 12px 38px rgba(0,0,0,0.55);
  border-radius: 12px;
  display:none;
  z-index: 2000;
}
.exploreMenu.open{ display:block; }
.exploreGroup{
  font-size: 12px;
  opacity: 0.82;
  margin: 6px 4px 6px 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.exploreItem{
  display:block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration:none;
  border: 1px solid transparent;
}
.exploreItem:hover{
  border-color: var(--border);
  background: rgba(255,255,255,0.05);
}

/* Make topbar wrap less aggressively on small screens */
@media (max-width: 720px){
  .topbar{ align-items:flex-start; }
  .topbar .links{ gap: 8px; flex-wrap: wrap; }
  .exploreMenu{ left:0; right:auto; }
}


/* --- Home dashboard --- */
.homeDash{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 6px 0;
}
.dashCol{
  border: 1px solid var(--border);
  background: rgba(18,27,39,0.55);
  border-radius: 12px;
  padding: 10px 10px;
}
.dashHdr{
  font-weight: 700;
  margin: 2px 2px 8px 2px;
  opacity: 0.92;
}
.dashLink{
  display:block;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration:none;
}
.dashLink:hover{
  border-color: var(--border);
  background: rgba(255,255,255,0.05);
}

@media (max-width: 860px){
  .homeDash{ grid-template-columns: 1fr; }
}


/* --- Nav z-index overrides --- */
.topbar{ z-index: 5000 !important; }
.exploreMenu{ z-index: 6000 !important; }
.exploreWrap{ z-index: 6000 !important; }

/* Make Home/Explore pills match compact selector sizing */
.pill{ font-size:12px; padding:6px 12px; height:26px; }

/* Center labels above Theme / Msg Font / Archive */
.topbar .themeWrap, .topbar .fontWrap, .topbar .archiveWrap{ align-items:center !important; }


.week-slider-row{ position:relative; padding-bottom:18px; }



/* Archive-change pulse for date pickers (replaces the old Range pill) */
.rangeFlashInput{
  animation: rangeInputPulse 0.9s ease-in-out 1;
}
@keyframes rangeInputPulse{
  0%{ box-shadow: 0 0 0 rgba(120,255,190,0); border-color: rgba(255,255,255,0.22); }
  30%{ box-shadow: 0 0 18px rgba(120,255,190,0.35); border-color: rgba(120,255,190,0.65); }
  100%{ box-shadow: 0 0 0 rgba(120,255,190,0); border-color: rgba(255,255,255,0.22); }
}

/* --- Message pane CP437/VGA rendering fixes (v137) --- */
#msgCard .pre,
#msgCard pre,
#msgCard code,
#msgCard .messageBody{
  font-family: var(--bbs-msg-font);
  font-size: inherit;                /* scale via #msgCard font-size slider */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  text-rendering: geometricPrecision;
}

/* Default (non-VGA) keeps wrapping + comfortable leading */
#msgCard .pre,
#msgCard .messageBody{
  white-space: pre-wrap;
  line-height: 1.2;
}

/* VGA/CP437 mode: pixel-tight rows + preserve exact columns */
:root.vga-msg-font #msgCard .pre,
:root.vga-msg-font #msgCard pre,
:root.vga-msg-font #msgCard code,
:root.vga-msg-font #msgCard .messageBody{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1;                    /* remove extra leading to prevent box seams */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
}


#rightPanel #msgCard{ position: relative; }

/* --- Thread Galaxy: CRT mode for message pane (overlay only; no layout impact) --- */
#msgCard .block.crt-mode{
  position: relative;
  overflow: hidden;
}
#msgCard .block.crt-mode::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 3;               /* above text */
  opacity:var(--scan-opacity, .20);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.28) 0px,
      rgba(0,0,0,.28) 1px,
      rgba(255,255,255,.08) 1px,
      rgba(255,255,255,.08) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
  mix-blend-mode: normal;
}
#msgCard .block.crt-mode[data-scan="0"]::before{ display:none; }
#msgCard .block.crt-mode[data-scan="1"]{ --scan-opacity: .12; }
#msgCard .block.crt-mode[data-scan="2"]{ --scan-opacity: .20; }
#msgCard .block.crt-mode[data-scan="3"]{ --scan-opacity: .30; }
#msgCard .block.crt-mode::after{
  content:"";
  position:absolute;
  inset:-6%;
  pointer-events:none;
  z-index: 2;
  border-radius: 18px;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%),
    radial-gradient(closest-side at 50% 10%, rgba(255,255,255,.045), rgba(255,255,255,0) 55%);
  filter: blur(0px);
  opacity:.675;             /* ~25% less phosphor/glass glow */
}

/* CRT toggle button inside the message pane */
#msgCard .crtToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 6px;          /* sit below msg uid line */
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--hair);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font: 12px/1 var(--mono);
  cursor:pointer;
}
#msgCard .crtToggle:hover{ filter: brightness(1.08); }
#msgCard .crtToggle[aria-pressed="true"]{ box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }

/* keep overlay from obscuring selection (apply within the green message block) */
#msgCard .block.crt-mode > *{ position: relative; z-index: 1; }



/* Thread Galaxy CRT controls inside message header */
#msgCard .crtControls{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
#msgCard .crtToggle{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); color:inherit; cursor:pointer; }
#msgCard .scanLabel{ display:flex; align-items:center; gap:6px; font-size:12px; opacity:.9; }
#msgCard .scanSel{ background:rgba(0,0,0,.25); color:inherit; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:4px 8px; }