/* ============================================================
   FU LCARS — Outer chrome stylesheet
   Replaces the page-level header/sidebar/right-rail/ticker
   geometry with an LCARS shell. Internal Tailwind components
   (feed cards, chat messages, modals) are untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Saira+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --lcars-orange:#ff9966; --lcars-peach:#ffcc99; --lcars-salmon:#ff9999;
  --lcars-yellow:#ffcc66; --lcars-tan:#ffcc99;
  --lcars-blue:#7a90c8; --lcars-violet:#a88aff; --lcars-cream:#ffeecc;
  --lcars-grey:#5599cc; --lcars-green:#99cc99;
  --fu-purple-bright:#6f00f0;
  --fu-purple-deep:#300080;
  --lcars-display:"Saira Condensed",-apple-system,BlinkMacSystemFont,sans-serif;
  --lcars-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --lcars-serif:"Source Serif 4",Georgia,serif;
}

/* Body becomes the LCARS shell host. We override Tailwind's flex layout. */
body.lcars{
  background:#000 !important;
  color:#fff;
  font-family:var(--lcars-display);
  height:100vh;
  overflow:hidden;
  margin:0;
  padding:0;
}

/* Scrollbar treatment everywhere */
body.lcars *{scrollbar-width:thin;scrollbar-color:var(--lcars-orange) transparent}
body.lcars ::-webkit-scrollbar{width:8px;height:8px}
body.lcars ::-webkit-scrollbar-track{background:transparent}
body.lcars ::-webkit-scrollbar-thumb{background:var(--lcars-orange);border-radius:4px}
body.lcars ::-webkit-scrollbar-thumb:hover{background:var(--lcars-peach)}
body.lcars ::selection{background:var(--lcars-orange);color:#000}

/* ============================================================
   SHELL GRID
   ============================================================ */
.lcars-shell{
  display:grid;
  grid-template-columns:190px 1fr;
  grid-template-rows:auto 1fr auto auto auto;
  column-gap:8px; row-gap:0;
  height:100vh; width:100%;
  max-width:100vw;
  overflow-x:hidden;
  padding:6px;
  background:#000;
  box-sizing:border-box;
}

/* ============================================================
   TOP STRIP
   ============================================================ */
.lcars-topstrip{
  grid-column:2; grid-row:1;
  display:grid;
  /* crest · title · sub(1fr) · topright — right-side controls live in one
     flex cell so adding/removing them never changes the column count */
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  background:var(--fu-purple-bright);
  color:#fff;
  font-family:var(--lcars-display);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 6px 6px 6px;
  border-radius:0 24px 0 0;
  min-height:46px;
  gap:14px;
}
.lcars-topstrip .crest{
  display:flex; align-items:center; justify-content:center;
  background:#000; border-radius:18px;
  padding:4px 14px 4px 10px; height:36px;
}
.lcars-topstrip .crest img{
  height:28px; width:auto; display:block;
  filter:drop-shadow(0 0 6px rgba(168,138,255,.4));
}
.lcars-topstrip .title{font-size:1.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lcars-topstrip .topright{display:flex;align-items:center;gap:12px;justify-self:end;flex-wrap:nowrap;white-space:nowrap}
/* language picker dropdown — real classes so Alpine :class/:style can't clobber layout */
.langmenu{position:absolute;top:100%;right:0;z-index:60;margin-top:.4em;width:178px;max-height:72vh;overflow-y:auto;padding:4px;background:#0c0c10;border:1px solid var(--lcars-violet);border-radius:0 0 12px 12px;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.langmenu button{display:block;width:100%;text-align:start;border:0;background:none;cursor:pointer;font-family:var(--lcars-mono);font-size:.76rem;font-weight:600;letter-spacing:.02em;padding:.42em .8em;white-space:nowrap;border-radius:5px;color:rgba(255,255,255,.78)}
.langmenu button:hover{background:rgba(168,138,255,.2);color:#fff}
.langmenu button.active{color:var(--lcars-orange);background:rgba(168,138,255,.14)}
.lcars-topstrip .sub{
  font-family:var(--lcars-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.12em; color:#fff; opacity:.85;
  text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.lcars-topstrip .stardate{
  font-family:var(--lcars-mono); font-size:.74rem; font-weight:600;
  letter-spacing:.08em; color:#fff;
  background:rgba(0,0,0,.25);
  padding:4px 10px; border-radius:10px;
}
.lcars-topstrip .user{
  display:flex; align-items:center; gap:.5em;
  background:#000; color:var(--lcars-violet);
  font-family:var(--lcars-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; padding:5px 12px 5px 5px;
  border-radius:0 12px 12px 0;
}
.lcars-topstrip .user img{width:22px;height:22px;border-radius:50%}
.lcars-topstrip .user .logout{
  background:none; border:0; color:var(--lcars-orange);
  font-family:var(--lcars-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  padding:0 0 0 6px; border-left:1px solid #333;
}
.lcars-topstrip .user .logout:hover{color:var(--lcars-cream)}
.lcars-topstrip .login{
  font-family:var(--lcars-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; background:#000; color:var(--lcars-violet);
  padding:5px 12px; border-radius:0 12px 12px 0;
  text-decoration:none; cursor:pointer; border:0;
}
.lcars-topstrip .login:hover{color:var(--lcars-orange)}

/* Ticker speed/direction popover — drops down from the top strip */
.lcars-topstrip .tkpop{
  position:absolute; top:100%; right:0; z-index:60; width:228px; margin-top:.45em;
  background:#0c0c12; border:1px solid var(--lcars-violet); border-radius:0 0 12px 12px;
  padding:11px 13px; box-shadow:0 12px 30px rgba(0,0,0,.6); color:#fff;
  text-transform:none; letter-spacing:normal; font-weight:400;
}
.lcars-topstrip .tkpop .tkhead{font-family:var(--lcars-display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lcars-orange);margin-bottom:9px}
.lcars-topstrip .tkpop .tkrow{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.lcars-topstrip .tkpop .tkrow:last-child{margin-bottom:0}
.lcars-topstrip .tkpop .tklbl{font-family:var(--lcars-mono);font-size:.64rem;letter-spacing:.06em;color:#bcbcc6;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:.5em}
.lcars-topstrip .tkpop .tklbl b{color:var(--lcars-cream);font-weight:600}
.lcars-topstrip .tkpop .tkbtns{display:flex;gap:6px}
.lcars-topstrip .tkpop .tkbtns button{flex:1;font-family:var(--lcars-mono);font-size:.7rem;font-weight:600;color:#cdd0d8;background:#15151c;border:1px solid #2a2a36;border-radius:5px;padding:.5em .3em;cursor:pointer}
.lcars-topstrip .tkpop .tkbtns button.on{background:var(--lcars-violet);color:#000;border-color:var(--lcars-violet)}
.lcars-topstrip .tkpop .tkrange{width:100%;accent-color:var(--lcars-orange);margin:0}
.lcars-topstrip .tkpop .tkhint{font-family:var(--lcars-mono);font-size:.6rem;line-height:1.45;letter-spacing:.02em;color:#8b8b95;text-transform:none}

.lcars-topstrip .hamburger{
  background:#000; color:var(--lcars-orange); border:0;
  padding:6px 10px; border-radius:12px;
  font-family:var(--lcars-mono); font-weight:700;
  cursor:pointer; display:none;
}

/* ============================================================
   LEFT ELBOW
   ============================================================ */
.lcars-elbow{
  grid-column:1; grid-row:1/4;
  display:flex; flex-direction:column; gap:6px;
  min-height:0;
}
.lcars-elbow .cap-top{
  background:var(--fu-purple-bright);
  height:46px;
  border-radius:24px 0 0 0;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:0 12px 6px; color:#fff;
  flex-shrink:0;
}
.lcars-elbow .cap-top .code{
  font-family:var(--lcars-mono); font-size:.7rem;
  font-weight:600; letter-spacing:.08em;
}
.lcars-elbow .head{
  padding:10px 14px;
  background:var(--lcars-orange); color:#000;
  font-family:var(--lcars-display); font-weight:700;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius:0 8px 8px 0;
  flex-shrink:0;
}
.lcars-elbow .head .meta{
  display:block; font-family:var(--lcars-mono);
  font-size:.6rem; font-weight:500; letter-spacing:.1em;
  margin-top:.2rem; opacity:.7;
}
.lcars-elbow .stack{
  flex:1; display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; min-height:0;
}
.lcars-elbow .nav{
  display:grid; grid-template-columns:42px 1fr;
  align-items:baseline;
  padding:9px 12px;
  background:var(--lcars-peach); color:#000;
  font-family:var(--lcars-display); font-weight:600;
  font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
  border-radius:0 8px 8px 0;
  transition:filter 120ms,background 120ms;
  text-decoration:none; border:0; text-align:left;
  width:100%;
}
.lcars-elbow .nav .n{
  font-family:var(--lcars-mono); font-size:.68rem;
  font-weight:700; color:#000; letter-spacing:.04em;
}
.lcars-elbow .nav .t{line-height:1.15}
.lcars-elbow .nav:hover{filter:brightness(1.08)}
.lcars-elbow .nav.current{background:var(--lcars-orange);color:#000}
.lcars-elbow .nav.muted{background:var(--lcars-tan)}
.lcars-elbow .nav.purple{background:var(--lcars-violet);color:#000}
.lcars-elbow .nav.blue{background:var(--lcars-blue);color:#000}
.lcars-elbow .nav.red{background:var(--lcars-salmon);color:#000}
.lcars-elbow .nav.yellow{background:var(--lcars-yellow);color:#000}

/* Projects grid as compact LCARS tiles */
.lcars-elbow .projects-label{
  font-family:var(--lcars-mono); font-size:.62rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-orange); padding:8px 12px 4px;
}
.lcars-elbow .projects{
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
  padding:0 4px 0 0;
}
.lcars-elbow .projects .pj{
  position:relative; aspect-ratio:1/1;
  background:var(--pj-color,#0d0d0d); border:0; border-left:2px solid var(--lcars-violet);
  cursor:pointer; padding:0; overflow:hidden;
  border-radius:0 4px 4px 0;
}
/* Icon + brand-color base: always legible, shows through for sites with no
   og:image and while the thumbnail is still loading. */
.lcars-elbow .projects .pj .glyph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; line-height:1; color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.4); pointer-events:none;
}
.lcars-elbow .projects .pj img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.92; transition:opacity 120ms;
}
.lcars-elbow .projects .pj:hover img{opacity:1}
.lcars-elbow .projects .pj:hover{border-left-color:var(--lcars-orange)}
.lcars-elbow .projects .pj .label{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top,rgba(0,0,0,.95),transparent);
  color:var(--lcars-cream);
  font-family:var(--lcars-mono); font-size:.54rem;
  font-weight:600; letter-spacing:.04em;
  padding:8px 3px 2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center;
}
.lcars-elbow .projects .pj.current{border-left-color:var(--lcars-orange);outline:1px solid var(--lcars-orange)}
.lcars-elbow .projects .pj .pj-new{
  position:absolute; top:3px; right:3px; z-index:2;
  background:var(--lcars-orange); color:#1a0f00;
  font-family:var(--lcars-mono); font-size:.46rem; font-weight:700;
  letter-spacing:.08em; padding:1px 4px; border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.5); pointer-events:none;
}
.lcars-elbow .projects .pj .pj-react{
  position:absolute; top:3px; left:3px; z-index:3;
  display:inline-flex; align-items:center; gap:2px;
  background:rgba(0,0,0,.5); border:0; cursor:pointer;
  color:rgba(255,255,255,.6);
  font-family:var(--lcars-mono); font-size:.52rem; font-weight:700;
  letter-spacing:.02em; padding:2px 5px; border-radius:7px;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  transition:color 120ms,background 120ms,transform 100ms;
}
.lcars-elbow .projects .pj .pj-react:hover{ color:#ff7eb6; background:rgba(0,0,0,.82); transform:scale(1.1) }
.lcars-elbow .projects .pj .pj-react.on{ color:#ff7eb6 }
.lcars-elbow .pj-filter{
  width:calc(100% - 16px); margin:0 4px 5px 12px;
  background:#16121f; border:1px solid var(--lcars-violet); border-radius:10px;
  color:var(--lcars-cream); font-family:var(--lcars-mono);
  font-size:.6rem; letter-spacing:.06em; padding:4px 9px; outline:none;
}
.lcars-elbow .pj-filter::placeholder{ color:#7a7a90; text-transform:uppercase; letter-spacing:.1em }
.lcars-elbow .pj-filter:focus{ border-color:var(--lcars-orange) }
.lcars-elbow .pj-filter::-webkit-search-cancel-button{ display:none }
.lcars-elbow .pj-empty{
  color:#7a7a90; font-family:var(--lcars-mono);
  font-size:.56rem; letter-spacing:.04em; padding:6px 12px;
}

.lcars-elbow .cap-bot{
  background:var(--fu-purple-bright);
  min-height:60px;
  border-radius:0 0 0 24px;
  display:flex; flex-direction:column; gap:3px;
  padding:8px 12px 8px; color:#fff;
  font-family:var(--lcars-mono); font-size:.6rem; font-weight:600;
  letter-spacing:.08em; line-height:1.4;
  flex-shrink:0;
}
.lcars-elbow .cap-bot .stat{
  display:flex; justify-content:space-between; gap:.4em;
}
.lcars-elbow .cap-bot .stat .v{color:var(--lcars-cream)}
.lcars-elbow .cap-bot .ministats{
  background:#0d0d0d; border-left:2px solid var(--lcars-orange);
  padding:6px 8px; margin:0 -8px 0; border-radius:0 4px 4px 0;
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--lcars-mono); font-size:.6rem;
}
.lcars-elbow .cap-bot .ministats .label{color:var(--lcars-peach);letter-spacing:.1em;text-transform:uppercase}
.lcars-elbow .cap-bot .ministats .value{color:var(--lcars-orange);font-size:.85rem;font-weight:700;letter-spacing:.04em}
.lcars-elbow .cap-bot .ministats .sub{color:#888;font-size:.55rem;letter-spacing:.06em}

/* ============================================================
   BODY — centre + right
   ============================================================ */
.lcars-body{
  grid-column:2; grid-row:2;
  display:grid;
  grid-template-columns:1fr 320px;
  column-gap:8px;
  min-height:0;
  overflow:hidden;
  padding-top:6px;
}
.lcars-centre{
  background:#0a0a0a;
  color:#fff;
  overflow:hidden; /* internal scroll handled by inner content */
  border-radius:0 0 0 8px;
  position:relative;
  display:flex; flex-direction:column;
  min-width:0;
}
.lcars-centre::before{
  content:""; position:absolute; left:0; top:0;
  width:5px; height:100%;
  background:linear-gradient(180deg,var(--fu-purple-bright) 0%,var(--lcars-violet) 100%);
  z-index:1; pointer-events:none;
}
/* Reserve left padding so content clears the spine */
.lcars-centre > *{padding-left:8px}

.lcars-right{
  display:flex; flex-direction:column; gap:8px;
  min-height:0; min-width:0;
  overflow:hidden;
}

/* ============================================================
   TV CARD (top of right rail)
   ============================================================ */
.lcars-tvcard{
  background:#000;
  border:1px solid #1a1a1a;
  border-left:3px solid var(--lcars-orange);
  overflow:hidden;
  flex-shrink:0;
}
.lcars-tvcard .head{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px;
  background:#101010;
  border-bottom:1px solid #1f1f1f;
  font-family:var(--lcars-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-peach);
}
.lcars-tvcard .head .live{color:var(--lcars-salmon);font-weight:600}
.lcars-tvcard .screen{
  aspect-ratio:16/9;
  background:radial-gradient(circle at 30% 30%,#1a0a30 0%,#000 70%);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  cursor:pointer;
}
.lcars-tvcard .screen::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px);
  pointer-events:none;
}
.lcars-tvcard .footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px;
  background:#0a0a0a;
  border-top:1px solid #1f1f1f;
  font-family:var(--lcars-mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--lcars-blue);
}
.lcars-tvcard .footer .count{color:var(--lcars-orange)}

/* ============================================================
   LCARS panel frame around any internal block (e.g. chat aside)
   ============================================================ */
.lcars-panel{
  background:#0a0a0a;
  border:1px solid #1a1a1a;
  border-left:3px solid var(--lcars-violet);
  flex:1 1 auto;
  min-height:0; min-width:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.lcars-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px;
  background:#101010;
  border-bottom:1px solid #1f1f1f;
  font-family:var(--lcars-display); font-weight:700;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-orange);
  flex-shrink:0;
}
.lcars-panel-head .meta{
  font-family:var(--lcars-mono); font-size:.62rem;
  letter-spacing:.08em; color:var(--lcars-peach);
  font-weight:500; opacity:.75;
}

/* ============================================================
   NARRATOR / NOW-PLAYING BAR
   ============================================================ */
.lcars-narrator{
  grid-column:2; grid-row:3;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:14px;
  background:var(--lcars-orange);
  color:#000;
  padding:8px 18px 8px 14px;
  border-radius:24px 0 24px 0;
  min-height:54px;
  margin-top:6px;
}
.lcars-narrator.disabled{
  background:#1a1a1a; color:#555;
  display:flex; justify-content:center; align-items:center;
  font-family:var(--lcars-mono); font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase;
}
/* Standby strip acts as the FU.TV launcher (esp. on mobile, where the
   right-rail viewscreen is hidden). */
.lcars-narrator.disabled.tappable{cursor:pointer; transition:background .15s, color .15s}
.lcars-narrator.disabled.tappable:hover,
.lcars-narrator.disabled.tappable:focus-visible{background:#222; color:var(--lcars-orange); outline:none}
.lcars-narrator .play{
  width:38px; height:38px; border-radius:50%;
  background:#000; color:var(--lcars-orange);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; border:0;
  flex-shrink:0;
}
.lcars-narrator .play:hover{filter:brightness(1.25)}
.lcars-narrator .info{min-width:0}
.lcars-narrator .label{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.2rem; color:#000;
  display:flex; align-items:center; gap:.5em;
}
.lcars-narrator .label .live-dot{
  width:7px; height:7px; border-radius:50%;
  background:#000;
  animation:lcars-pulse 1.8s infinite;
}
.lcars-narrator .now{
  font-family:var(--lcars-mono); font-size:.78rem;
  font-weight:500; color:#000;
  letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lcars-narrator .meta{
  font-family:var(--lcars-mono); font-size:.74rem;
  letter-spacing:.08em; color:#000; font-weight:600;
  background:rgba(0,0,0,.15);
  padding:.3em .7em; border-radius:.2em;
  white-space:nowrap;
}
@keyframes lcars-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ============================================================
   BOTTOM TICKER STRIP
   ============================================================ */
.lcars-botbar{
  grid-column:1/3; grid-row:4;
  display:grid;
  grid-template-columns:190px 1fr;
  column-gap:8px;
  margin-top:6px;
}
.lcars-botbar .label{
  background:var(--fu-purple-bright);
  color:#fff;
  border-radius:0 0 0 24px;
  font-family:var(--lcars-display); font-weight:700;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 14px;
  display:flex; align-items:center; justify-content:flex-end;
  gap:.6em;
  white-space:nowrap;            /* never wrap to a second line */
}
.lcars-botbar .label .lbl-short{display:none}  /* shown only on mobile */
.lcars-botbar .label .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--lcars-orange);
  box-shadow:0 0 6px var(--lcars-orange);
}
.lcars-botbar .tickerwrap{
  background:#0a0a0a;
  border:1px solid #1a1a1a;
  border-radius:0 0 24px 0;
  overflow:hidden;
  position:relative;
  display:flex; align-items:center;
  height:38px;
}

/* Tailwind ticker styles from existing site bleed through; we
   normalise the inner text styling here while keeping its track.
   NOTE: the "Network" badge now lives in .lcars-botbar .label, so
   .fu-marquee's only child is the track itself — do NOT hide it. */
.lcars-botbar .fu-marquee{
  background:transparent !important; border:0 !important; height:38px !important;
}
.lcars-botbar .fu-marquee-track button{
  font-family:var(--lcars-mono); font-size:.78rem;
  color:#9aa0a8 !important;
}
.lcars-botbar .fu-marquee-track button span:nth-child(2){
  font-family:var(--lcars-display) !important; font-weight:700 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  font-size:.82rem !important;
}

/* Two stacked strips: Tenant Reports (live feed) sits above Network.
   Network is the bottom-most, so it keeps the rounded bottom corners;
   the tenant strip squares off and gets an alert-red label. */
.lcars-botbar.tenant{grid-row:4; margin-top:6px}
.lcars-botbar.network{grid-row:5; margin-top:3px}
.lcars-botbar.tenant .label{background:#b91c1c; border-radius:0}
.lcars-botbar.tenant .tickerwrap{border-radius:0}
.lcars-botbar .fu-marquee-track .tenant-sev{font-size:.7rem; letter-spacing:-1px}

/* ============================================================
   Mobile responsive
   ============================================================ */
@media(max-width:900px){
  /* dvh keeps the shell off the mobile browser chrome (100vh gets cut off) */
  body.lcars{height:100dvh}
  .lcars-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr auto auto auto;
    height:100dvh;
    column-gap:0;
  }

  /* Left elbow becomes an off-canvas drawer, opened by the ≡ hamburger.
     It keeps its full vertical desktop layout; .open is toggled by Alpine. */
  .lcars-elbow{
    position:fixed; top:0; left:0; bottom:0;
    width:82vw; max-width:300px;
    z-index:40;
    background:#000; padding:6px;
    overflow-y:auto;
    box-shadow:4px 0 28px rgba(0,0,0,.7);
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .lcars-elbow.open{transform:translateX(0)}
  .lcars-elbow .cap-top{border-radius:24px 0 0 0}

  .lcars-topstrip{
    grid-column:1;grid-row:1;border-radius:24px 24px 0 0;gap:8px;
    /* .sub hidden, leaving: crest · title(1fr) · hamburger · topright */
    grid-template-columns:auto 1fr auto auto;
  }
  .lcars-topstrip .sub{display:none}
  .lcars-topstrip .title{font-size:.92rem}
  .lcars-topstrip .hamburger{display:flex;align-items:center}

  .lcars-body{grid-column:1;grid-row:2;grid-template-columns:1fr}
  .lcars-right{display:none}

  .lcars-narrator{grid-column:1;grid-row:3}
  .lcars-botbar{grid-column:1;grid-template-columns:82px 1fr}
  .lcars-botbar.tenant{grid-row:4}
  .lcars-botbar.network{grid-row:5; margin-top:6px}
  /* Compact single-line labels so they don't wrap (wasteful) and the two
     strips read as distinct, color-coded rows. */
  .lcars-botbar .label{font-size:.6rem; letter-spacing:.03em; padding:8px 8px; gap:.4em}
  .lcars-botbar .label .lbl-full{display:none}
  .lcars-botbar .label .lbl-short{display:inline}

  /* Welcome prose: tighten the generous desktop gutters on small screens */
  .lcars-welcome{padding:20px 16px 28px}

  /* ── Mobile overflow guard ──────────────────────────────────────────
     The shell clips (overflow-x:hidden), so if any one grid child has a
     min-content wider than the viewport, its 1fr track grows past the
     screen and EVERYTHING clips uniformly on the right. min-width:0 lets
     those tracks collapse back to the column width. */
  .lcars-shell > *{min-width:0}
  .lcars-narrator{overflow:hidden}
  /* Feed: long links / unbroken strings and oversized media must wrap/fit
     rather than force the column wider. */
  .lcars-centre{overflow-wrap:anywhere}
  .lcars-centre img,.lcars-centre video,.lcars-centre iframe{max-width:100%}
}

/* Phones: the top strip can't fit lang + SHARE + stardate + login side by
   side, so drop the decorative stardate (it's flavour, not a control). */
@media (max-width:560px){
  .lcars-topstrip .stardate{display:none}
}

/* ============================================================
   WELCOME VIEW — LCARS prose inside the centre
   ============================================================ */
.lcars-welcome{
  flex:1; overflow-y:auto;
  padding:28px 40px 36px 48px;
  font-family:var(--lcars-serif);
  color:#fff;
}
.lcars-welcome-inner{max-width:68ch;margin:0 auto}
.lcars-welcome .archtag{
  font-family:var(--lcars-mono); font-size:.66rem;
  color:var(--lcars-peach); letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:6px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; opacity:.85;
}
.lcars-welcome .archtag .ref{color:var(--lcars-blue)}
.lcars-welcome .centre-num{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.85rem; letter-spacing:.16em;
  color:var(--lcars-orange); text-transform:uppercase;
  margin-bottom:24px;
}
.lcars-welcome .prose{
  font-family:var(--lcars-serif); font-size:1.1rem;
  line-height:1.7; color:#fff; max-width:68ch;
}
.lcars-welcome .prose h1{
  font-family:var(--lcars-serif); font-weight:600;
  font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.01em;
  line-height:1.15; margin:0 0 .4em; color:var(--lcars-cream);
}
.lcars-welcome .prose h2{
  font-family:var(--lcars-serif); font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.005em;
  line-height:1.2; margin:1.6em 0 .55em; color:var(--lcars-cream);
  display:flex; align-items:baseline; gap:.7em;
  padding-bottom:.35em; border-bottom:1px solid #1f1f1f;
}
.lcars-welcome .prose h2 .num{
  font-family:var(--lcars-mono); font-weight:600;
  font-size:.5em; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lcars-orange); padding-right:.7em;
  border-right:1px solid #2a2a2a;
}
.lcars-welcome .prose p{margin:0 0 1.05em}
.lcars-welcome .prose p.dek{
  font-family:var(--lcars-serif); font-style:italic;
  font-size:1.12em; color:var(--lcars-cream); line-height:1.55;
  margin:0 0 1.5em;
}
.lcars-welcome .prose strong{color:var(--lcars-cream);font-weight:600}
.lcars-welcome .prose em{color:var(--lcars-peach);font-style:italic}
.lcars-welcome .prose p.lede::first-letter{
  font-family:var(--lcars-serif); font-weight:700;
  font-size:3em; float:left; line-height:.85;
  padding:.08em .14em 0 0; color:var(--lcars-orange);
}

.lcars-welcome .chips{display:flex;flex-wrap:wrap;gap:.4em;margin:1em 0 1.4em}
.lcars-welcome .chip{
  display:inline-block; font-family:var(--lcars-mono);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lcars-peach); border:1px solid var(--lcars-peach);
  padding:.25em .65em; border-radius:.2em; background:transparent;
}
.lcars-welcome .chip.amber{color:var(--lcars-yellow);border-color:var(--lcars-yellow)}
.lcars-welcome .chip.violet{color:var(--lcars-violet);border-color:var(--lcars-violet)}
.lcars-welcome .chip.salmon{color:var(--lcars-salmon);border-color:var(--lcars-salmon)}
.lcars-welcome .chip.blue{color:var(--lcars-blue);border-color:var(--lcars-blue)}

.lcars-welcome .onair{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:1.1em;
  background:#0d0d0d; border-left:3px solid var(--lcars-salmon);
  padding:1em 1.2em; margin:1em 0 1.6em;
}
.lcars-welcome .onair.standby{border-left-color:var(--lcars-blue)}
.lcars-welcome .onair .badge{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:#000; background:var(--lcars-salmon);
  padding:.35em .7em; border-radius:.2em;
  animation:lcars-pulse 2.4s ease-in-out infinite;
}
.lcars-welcome .onair.standby .badge{
  background:var(--lcars-blue); animation:none;
}
.lcars-welcome .onair .title{
  font-family:var(--lcars-serif); font-weight:600;
  font-size:1.05rem; color:var(--lcars-cream); line-height:1.25;
  display:block;
}
.lcars-welcome .onair .meta{
  font-family:var(--lcars-mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--lcars-peach); margin-top:.3em; display:block;
  opacity:.85;
}
.lcars-welcome .onair .watch{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:#000; background:var(--lcars-orange);
  padding:.55em 1em; border:0; cursor:pointer;
  border-radius:0 8px 0 8px;
}
.lcars-welcome .onair .watch:hover{filter:brightness(1.1)}

.lcars-welcome .netgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.6em; margin:1em 0 1.6em;
}
.lcars-welcome .netcard{
  display:block; background:#0d0d0d;
  border-left:3px solid var(--lcars-violet);
  padding:.95em 1.1em; text-decoration:none; color:inherit;
  transition:background 120ms,border-color 120ms;
  cursor:pointer; border-top:0; border-right:0; border-bottom:0;
  text-align:left; width:100%; font-family:inherit;
  position:relative;
}
.lcars-welcome .netcard .newtab{
  position:absolute; top:6px; right:8px;
  font-family:var(--lcars-mono); font-size:.95rem;
  font-weight:700; line-height:1; color:var(--lcars-orange);
  background:#000; border:1px solid #2a2a2a;
  padding:3px 6px; border-radius:3px;
  text-decoration:none; opacity:.55;
  transition:opacity 120ms,background 120ms,color 120ms,border-color 120ms;
}
.lcars-welcome .netcard:hover .newtab{opacity:1}
.lcars-welcome .netcard .newtab:hover{
  background:var(--lcars-orange); color:#000; border-color:var(--lcars-orange);
}
.lcars-welcome .netcard:hover{
  background:#141414; border-left-color:var(--lcars-orange);
}
.lcars-welcome .netcard .row{display:flex;align-items:baseline;gap:.55em;margin-bottom:.3em}
.lcars-welcome .netcard .glyph{font-size:1.1em;line-height:1}
.lcars-welcome .netcard .site{
  font-family:var(--lcars-display); font-weight:700;
  font-size:.84rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--lcars-cream);
}
.lcars-welcome .netcard .blurb{
  font-family:var(--lcars-serif); font-size:.82rem;
  line-height:1.4; color:#9aa0a8; margin:0;
}
.lcars-welcome .netcard .tag{
  font-family:var(--lcars-mono); font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-orange); margin-top:.4em; display:block;
  opacity:.8;
}
.lcars-welcome .netcard .netreact{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:.55em;
}
.lcars-welcome .netcard .netreact .rx{
  display:inline-flex; align-items:center; gap:3px;
  background:#000; border:1px solid #2a2a2a; border-radius:999px;
  padding:2px 7px 2px 5px; cursor:pointer;
  font-family:var(--lcars-mono); font-size:.62rem; color:#9aa0a8;
  transition:border-color 120ms,color 120ms,background 120ms;
}
.lcars-welcome .netcard .netreact .rx img{ width:14px; height:14px; display:block }
.lcars-welcome .netcard .netreact .rx.add{ padding:2px 8px; color:#ff7eb6; font-size:.82rem; line-height:1 }
.lcars-welcome .netcard .netreact .rx:hover{ border-color:var(--lcars-orange); color:var(--lcars-cream) }
.lcars-welcome .netcard .netreact .rx.on{ border-color:#ff7eb6; color:#ff7eb6; background:rgba(255,126,182,.12) }
.lcars-welcome .netcard .netreact .rxwrap{ position:relative }
.lcars-welcome .netcard .netreact .rxmenu{
  position:absolute; bottom:130%; left:0; z-index:60;
  background:#0b0b0b; border:1px solid #2a2a2a; border-radius:10px;
  padding:6px; box-shadow:0 6px 20px rgba(0,0,0,.6);
  display:grid; grid-template-columns:repeat(8,1fr); gap:3px;
  width:240px; max-height:170px; overflow-y:auto;
}
.lcars-welcome .netcard .netreact .rxmenu button{
  background:none; border:0; padding:3px; cursor:pointer; border-radius:5px;
}
.lcars-welcome .netcard .netreact .rxmenu button:hover{ background:rgba(255,126,182,.15) }
.lcars-welcome .netcard .netreact .rxmenu img{ width:22px; height:22px; display:block }

.lcars-welcome .stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.8em; background:#0d0d0d;
  border-left:3px solid var(--lcars-orange);
  padding:1.1em 1.3em; margin:1.5em 0;
}
.lcars-welcome .stats .col .big{
  font-family:var(--lcars-display); font-weight:700;
  color:var(--lcars-orange); font-size:2.1rem; letter-spacing:.02em;
  line-height:1; display:block;
}
.lcars-welcome .stats .col .big.violet{color:var(--lcars-violet)}
.lcars-welcome .stats .col .big.yellow{color:var(--lcars-yellow)}
.lcars-welcome .stats .col .big.green{color:var(--lcars-green)}
.lcars-welcome .stats .col .label{
  font-family:var(--lcars-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lcars-peach); margin-top:.45em; display:block;
  opacity:.85;
}

/* ── Network search ────────────────────────────────────────── */
.lcars-elbow .nav-search{
  display:flex; align-items:center; gap:6px;
  margin:6px 4px 2px 0; padding:5px 8px;
  background:#0d0d14; border-left:2px solid var(--lcars-violet);
  border-radius:0 6px 6px 0;
}
.lcars-elbow .nav-search .ico{ color:var(--lcars-violet); font-size:.95rem; line-height:1 }
.lcars-elbow .nav-search input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  color:var(--lcars-cream); font-family:var(--lcars-mono);
  font-size:.74rem; letter-spacing:.02em;
}
.lcars-elbow .nav-search input::placeholder{ color:#7a7a90; text-transform:none }
.lcars-elbow .nav-search input::-webkit-search-cancel-button{ display:none }
.lcars-elbow .nav-search .clr{
  background:0; border:0; color:#7a7a90; cursor:pointer;
  font-size:.7rem; padding:0 2px;
}
.lcars-elbow .nav-search .clr:hover{ color:var(--lcars-cream) }

.fu-results{ display:flex; flex-direction:column; gap:8px; max-width:820px; margin:0 auto }
.fu-result{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:#12121a; border:1px solid #25252f; border-left:4px solid var(--rc,#a88aff);
  border-radius:0 8px 8px 0; padding:10px 12px; transition:background .12s, border-color .12s;
}
.fu-result:hover{ background:#181822; border-color:#3a3a48; border-left-color:var(--rc,#a88aff) }
.fu-result .rhead{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap }
.fu-result .glyph{ color:var(--rc,#a88aff); font-size:.9rem }
.fu-result .site{
  font-family:var(--lcars-display); font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--lcars-cream);
}
.fu-result .host{ font-family:var(--lcars-mono); font-size:.62rem; color:#6f6f85 }
.fu-result .rtitle{
  color:var(--lcars-cream); font-size:.9rem; font-weight:600;
  margin:.28em 0 .15em; line-height:1.25;
}
.fu-result .rsnip{ color:#b7b7c6; font-size:.8rem; line-height:1.4; margin:0 }
.fu-result .rsnip mark{ background:rgba(168,138,255,.28); color:var(--lcars-cream); border-radius:2px; padding:0 1px }

/* Hidden by default; visible only after Alpine boots */
[x-cloak]{display:none !important}