/* =========================================================
   PhobOS theme — design tokens
   ========================================================= */
:root{
  --bg-void:#080b0d;
  --bg-panel:#0e1417;
  --bg-panel-alt:#131a1e;
  --bg-input:#0a0f12;
  --line:#1e2a2f;
  --line-bright:#2c3d43;
  --cyan:#5fe6c8;
  --cyan-dim:#2f7a6c;
  --amber:#ffb454;
  --red:#ff5a5a;
  --red-dim:#7a2f2f;
  --text-bright:#dfece9;
  --text-dim:#5f7a78;
  --text-mid:#8fa8a4;
  --font-display:'Chakra Petch', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{background:var(--bg-void);}
body{
  background:var(--bg-void);
  color:var(--text-bright);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.5;
  min-height:100vh;
  margin:0;
  position:relative;
}

.visually-hidden.focusable:not(:focus){
  position:absolute !important; overflow:hidden; clip:rect(0 0 0 0); width:1px; height:1px;
}
.visually-hidden.focusable:focus{
  position:fixed; top:8px; left:8px; z-index:1100; background:var(--bg-panel);
  color:var(--cyan); padding:8px 14px; border:1px solid var(--cyan-dim);
}

a{color:var(--cyan); text-decoration:none;}
a:hover{color:var(--amber); text-decoration:underline;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* ambient scanline / glow overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(95,230,200,.018) 0px, rgba(95,230,200,.018) 1px, transparent 1px, transparent 3px);
  z-index:999; mix-blend-mode:screen;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(95,230,200,.05), transparent 60%);
  z-index:998;
}

/* =========================================================
   Top bar / nav
   ========================================================= */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 22px; border-bottom:1px solid var(--line); background:var(--bg-panel);
}
.brand{font-family:var(--font-display); font-weight:700; letter-spacing:.08em; font-size:15px; color:var(--text-bright);}
.brand span{color:var(--cyan);}
.topbar-right{display:flex; gap:24px; align-items:center;}
.clock-block{text-align:right;}
.clock{font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--cyan); letter-spacing:.05em;}
.clock-date{font-size:10px; color:var(--text-dim); letter-spacing:.1em;}
.status-pill{
  display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.1em; color:var(--text-mid);
  border:1px solid var(--line-bright); padding:5px 10px; background:var(--bg-panel-alt);
}
.status-dot{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.subnav{
  display:flex; flex-wrap:wrap; align-items:center; padding:0 22px; background:var(--bg-panel-alt);
  border-bottom:1px solid var(--line); font-size:11px;
}
/* legacy .menu (core default template) — still used by secondary_menu/account links */
.subnav ul.menu{list-style:none; display:flex; margin:0; padding:0;}
.subnav ul.menu li{margin:0;}
.subnav ul.menu a, .subnav > a{
  display:block; padding:10px 16px; color:var(--text-mid); letter-spacing:.08em;
  border-right:1px solid var(--line); font-weight:500; text-decoration:none;
}
.subnav ul.menu a.is-active{color:var(--cyan); background:var(--bg-void);}
.subnav ul.menu a:hover, .subnav > a:hover{color:var(--amber);}
.subnav-account{margin-left:auto; display:flex; gap:14px; padding:10px 0; color:var(--text-dim);}
.subnav-account ul.menu{display:flex; gap:14px;}
.subnav-account a{border-right:none; padding:0;}

/* ---- Primary navigation (menu--main.html.twig) ---- */
.menu--primary{list-style:none; display:flex; margin:0; padding:0;}
.menu--primary > li{margin:0; position:relative;}
.menu--primary > li > a,
.menu--primary > li > .menu-toggle{
  display:flex; align-items:center; gap:5px; padding:10px 16px; color:var(--text-mid);
  letter-spacing:.08em; border-right:1px solid var(--line); font-weight:500;
  text-decoration:none; cursor:pointer; background:none; border-top:none; border-left:none; border-bottom:none;
  font-family:var(--font-mono); font-size:11px;
}
.menu--primary > li > a:hover,
.menu--primary > li > .menu-toggle:hover{color:var(--amber);}
.menu--primary > li.menu-item--active-trail > a,
.menu--primary > li.is-open > a,
.menu--primary > li.is-open > .menu-toggle{color:var(--cyan); background:var(--bg-void);}
.menu-toggle::after{
  content:"\25BE"; font-size:9px; margin-left:6px; display:inline-block;
  transition:transform .15s ease;
}
.menu-toggle[aria-expanded="true"]::after{transform:rotate(180deg); color:var(--cyan);}

/* Secondary row: full width, wraps onto its own line below the primary row */
.menu--secondary-wrap{flex-basis:100%;}
.menu--secondary{background:var(--bg-panel-alt); border-bottom:1px solid var(--line);}
.menu--secondary-list{
  list-style:none; display:flex; flex-wrap:wrap; margin:0 auto; padding:0 22px;
  max-width:1700px;
}
.menu--secondary-list li{margin:0;}
.menu--secondary-list a{
  display:block; padding:9px 14px; font-size:11px; color:var(--text-mid);
  letter-spacing:.06em; border-right:1px solid var(--line); text-decoration:none;
}
.menu--secondary-list a:hover{color:var(--amber);}

@keyframes menuFlash{
  0%{background:var(--cyan-dim);}
  100%{background:var(--bg-panel-alt);}
}
.menu--secondary.flash{animation:menuFlash .5s ease-out;}
@media (prefers-reduced-motion: reduce){
  .menu--secondary.flash{animation:none;}
}

/* =========================================================
   Layout shell
   ========================================================= */
.shell{
  display:grid; grid-template-columns:220px 1fr 260px; gap:16px;
  padding:18px 22px 40px; max-width:1500px; margin:0 auto;
}
@media (max-width:1100px){ .shell{grid-template-columns:1fr;} }

/* When one or both sidebar regions are empty: widen content and center it */
.shell.no-sb-first.no-sb-second{
  grid-template-columns: 1fr;
  max-width: none;
  padding-left: 10%;
  padding-right: 10%;
}
.shell.no-sb-first:not(.no-sb-second){
  grid-template-columns: 1fr 260px;
}
.shell.no-sb-second:not(.no-sb-first){
  grid-template-columns: 220px 1fr;
}
@media (max-width:1100px){
  .shell.no-sb-first.no-sb-second{ padding-left:22px; padding-right:22px; }
}

/* =========================================================
   Panel (used by block.html.twig for every block)
   ========================================================= */
.panel{
  background:var(--bg-panel); border:1px solid var(--line); position:relative;
  padding:14px 16px 16px; margin-bottom:16px;
}
.panel .br1, .panel .br2, .panel::before, .panel::after{
  content:""; position:absolute; width:9px; height:9px; border-color:var(--cyan-dim); border-style:solid; opacity:.8;
}
.panel::before{top:-1px; left:-1px; border-width:1px 0 0 1px;}
.panel::after{top:-1px; right:-1px; border-width:1px 1px 0 0;}
.panel .br1{bottom:-1px; left:-1px; border-width:0 0 1px 1px;}
.panel .br2{bottom:-1px; right:-1px; border-width:0 1px 1px 0;}

.panel-title{
  font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.12em;
  color:var(--text-bright); display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.panel-title small{font-family:var(--font-mono); font-weight:400; color:var(--text-dim); font-size:10px;}

/* =========================================================
   Layout Builder multi-column layouts: equal-height columns
   (columns stretch to match the tallest panel in the row)
   !important is used here because Drupal core's layout_discovery
   CSS (layout-*.css) is attached as its own library and tends to
   load AFTER theme CSS, so at equal specificity it would otherwise
   win the cascade and silently override these rules.
   ========================================================= */
.layout{align-items:stretch !important;}
.layout > .layout__region{display:flex !important; flex-direction:column !important;}
.layout > .layout__region > .panel{
  flex:1 1 auto !important; display:flex !important; flex-direction:column !important;
  height:auto !important; margin:2px 4px 10px !important;
}
/* if a region stacks multiple panels, only the last one grows to fill leftover space */
.layout > .layout__region > .panel + .panel{flex:0 0 auto !important;}
.layout > .layout__region > .panel:last-child{flex:1 1 auto !important;}

.side-nav a{display:block; padding:8px 4px; font-size:11.5px; letter-spacing:.05em; color:var(--text-mid); border-bottom:1px dashed var(--line);}
.side-nav a:hover{color:var(--cyan); text-decoration:none; padding-left:8px;}

.stat-row{display:flex; justify-content:space-between; font-size:11px; padding:5px 0; border-bottom:1px solid var(--line); color:var(--text-mid);}
.stat-row span:last-child{color:var(--cyan); font-weight:500;}
.bar-track{height:5px; background:var(--bg-input); border:1px solid var(--line); margin-top:4px;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--cyan-dim), var(--cyan));}

/* =========================================================
   Tables (Views output lands here automatically)
   ========================================================= */
table{width:100%; border-collapse:collapse; font-size:11.5px;}
th{
  text-align:left; padding:7px 8px; font-size:10px; letter-spacing:.08em; color:var(--text-dim);
  text-transform:uppercase; border-bottom:1px solid var(--line-bright); font-weight:500;
}
td{padding:8px 8px; border-bottom:1px solid var(--line); color:var(--text-mid); vertical-align:middle;}
tr:hover td{background:var(--bg-panel-alt); color:var(--text-bright);}
td a{color:var(--text-bright);}
td a:hover{color:var(--amber);}

.tag{display:inline-block; font-size:9.5px; letter-spacing:.06em; padding:2px 7px; border:1px solid var(--line-bright); text-transform:uppercase;}
.tag.active{color:var(--cyan); border-color:var(--cyan-dim);}
.tag.mia{color:var(--red); border-color:var(--red-dim);}
.tag.queued{color:var(--amber); border-color:#7a5f2f;}
.tag.corrupt{color:var(--text-dim); font-style:italic;}

.avatar{width:28px; height:28px; border:1px solid var(--line-bright); background:var(--bg-input); display:inline-block; vertical-align:middle; background-size:cover; background-position:center;}

/* =========================================================
   News-style rows (for a Views "unformatted" row style)
   ========================================================= */
.news-row{display:grid; grid-template-columns:80px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line);}
.news-row:last-child{border-bottom:none;}
.news-date{font-size:10px; color:var(--text-dim); letter-spacing:.05em;}
.news-title{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--text-bright); margin-bottom:3px;}
.news-loc{font-size:10px; color:var(--amber); letter-spacing:.06em; margin-bottom:5px;}
.news-report{color:var(--text-mid); font-size:11.5px;}

/* =========================================================
   Filters (Views exposed filters land here)
   ========================================================= */
.filter-row, .views-exposed-form{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:16px; margin-bottom:16px; width:100%;
}
.views-exposed-form .form-item,
.views-exposed-form .form-actions{
  flex:1 1 180px; margin:0; min-width:0;
}
.views-exposed-form label{
  display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:4px;
}
.views-exposed-form input[type="text"],
.views-exposed-form input[type="search"],
.views-exposed-form select{
  width:100%;
}
input[type="text"], input[type="search"], input[type="email"], input[type="password"], select, textarea{
  background:var(--bg-input); border:1px solid var(--line-bright); color:var(--text-bright);
  font-family:var(--font-mono); font-size:11px; padding:6px 8px;
}
input:focus, select:focus, textarea:focus{border-color:var(--cyan-dim); outline:none;}

.footnote{font-size:10px; color:var(--text-dim); margin-top:10px; letter-spacing:.04em;}
.pager{font-size:10px; color:var(--text-dim); letter-spacing:.04em; width:100%;}
.pager__items{list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:14px 0 0; width:100%;}

/* =========================================================
   Radar / signature widget (drop into a Custom HTML block)
   ========================================================= */
.radar-wrap{
  position:relative; width:100%; aspect-ratio:1/1; max-width:210px; margin:6px auto 4px;
  border-radius:50%; border:1px solid var(--line-bright);
  background:radial-gradient(circle, rgba(95,230,200,.05), transparent 70%); overflow:hidden;
}
.radar-ring{position:absolute; border:1px solid var(--line); border-radius:50%;}
.radar-ring.r1{inset:0;} .radar-ring.r2{inset:22%;} .radar-ring.r3{inset:44%;}
.radar-sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(95,230,200,.35), transparent 55deg);
  animation:sweep 4s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg);}}
.radar-dot{position:absolute; width:4px; height:4px; border-radius:50%; background:var(--red); box-shadow:0 0 5px var(--red);}

.btn{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  padding:8px 14px; border:1px solid var(--cyan-dim); color:var(--cyan); background:transparent;
  cursor:pointer; text-transform:uppercase;
}
.btn:hover{background:var(--cyan); color:var(--bg-void); text-decoration:none;}

.site-footer{padding:16px 22px; border-top:1px solid var(--line); color:var(--text-dim); font-size:10px; letter-spacing:.06em; text-align:center;}

/* =========================================================
   "Tabs" block (local tasks: View / Edit / Delete / ...)
   Flat horizontal bar, same rhythm as the primary nav, but red-tinted
   to read as an admin/action bar rather than content navigation.
   No toggle/JS behavior — plain links.
   ========================================================= */
.tabs-bar{margin-bottom:16px;}
.tabs-bar h2.visually-hidden{display:none;}

.tabs-bar > ul,
.tabs-bar ul.tabs,
.tabs-bar ul.tabs.primary{
  list-style:none; display:flex; flex-wrap:wrap; margin:0; padding:0;
  background:rgba(122,47,47,.18); border:1px solid var(--red-dim);
}
.tabs-bar li,
.tabs-bar .tabs__tab{margin:0;}
.tabs-bar li a,
.tabs-bar .tabs__tab a{
  display:block; padding:9px 16px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--red);
  border-right:1px solid var(--red-dim); text-decoration:none;
}
.tabs-bar li a:hover,
.tabs-bar .tabs__tab a:hover{background:var(--red-dim); color:var(--text-bright);}
.tabs-bar li.is-active a,
.tabs-bar .tabs__tab.is-active a{background:var(--red); color:var(--bg-void); font-weight:600;}

/* secondary tabs (if present) render as a slightly dimmer second row */
.tabs-bar ul.tabs.secondary{
  list-style:none; display:flex; flex-wrap:wrap; margin:0; padding:0;
  background:rgba(122,47,47,.07); border:1px solid var(--line-bright); border-top:none;
}
.tabs-bar ul.tabs.secondary li{margin:0;}
.tabs-bar ul.tabs.secondary a{
  display:block; padding:7px 14px; font-size:10px; letter-spacing:.06em;
  color:var(--text-mid); border-right:1px solid var(--line); text-decoration:none;
}
.tabs-bar ul.tabs.secondary a:hover{color:var(--amber);}

::selection{background:var(--cyan-dim); color:var(--bg-void);}

@media (prefers-reduced-motion: reduce){
  .status-dot, .radar-sweep, #boot{animation:none !important; transition:none !important;}
}