/* The chassis: flat, opaque, radius 0. Structure, not floating objects. */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  height: 100dvh;
  overflow: hidden;
  background: var(--stage);
}

.app--bare { grid-template-columns: 1fr; }

.app__main {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  min-width: 0;
  /* Without this the 1fr row grows to fit its content instead of the viewport. */
  min-height: 0;
  overflow: hidden;
}

.app__main--bare { grid-template-rows: 1fr; }

.app__screen {
  min-height: 0;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.app__screen > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* --- rail ---------------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  border-right: 1px solid var(--divider);
  background: var(--shell);
}

.rail__mark {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 30% 8%, #12151a, var(--ink) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* O · ON AIR / SWEEP RING — sweep ring, disc, red core. */
.rail__mark-ring {
  position: absolute;
  left: 14%;
  top: 14%;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    var(--standby-light),
    var(--standby) 22%,
    rgba(79, 227, 156, 0.5) 62%,
    rgba(79, 227, 156, 0.36) 86%,
    var(--standby-light)
  );
}

.rail__mark-disc {
  position: absolute;
  left: 26%;
  top: 26%;
  width: 48%;
  height: 48%;
  border-radius: 50%;
  background: #0a0c10;
}

.rail__mark-core {
  position: absolute;
  left: 35%;
  top: 35%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side at 36% 30%, #ff9a9a, var(--live) 46%, #d42b2b);
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.8);
}

.rail__item {
  position: relative;
  overflow: hidden;
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 0;
  border-radius: var(--r-rail-item);
  border: 1px solid transparent;
  color: var(--bone55);
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}

.rail__item:hover { background: rgba(237, 235, 230, 0.04); color: var(--bone); }

.rail__item[aria-current="page"] {
  background: rgba(237, 235, 230, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: var(--bone);
}

.rail__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), transparent 42%);
  pointer-events: none;
}

/* Live route active = live-tinted; reporter rail active = credit-tinted. */
.rail__item[aria-current="page"][data-accent="live"] {
  background: rgba(255, 77, 77, 0.18);
  border-color: rgba(255, 128, 128, 0.45);
  color: var(--live-light);
}

.rail__item[aria-current="page"][data-accent="credit"] {
  background: rgba(245, 165, 36, 0.18);
  border-color: rgba(245, 165, 36, 0.45);
  color: var(--credit-light);
}

.rail__item:disabled { opacity: 0.4; cursor: default; }
.rail__item:disabled:hover { background: none; color: var(--bone55); }

.rail__label {
  position: relative;
  font: 500 8px/1 var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.rail__item[aria-current="page"] .rail__label { font-weight: 600; }

.rail__glyph {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* glyph primitives: ring · dot · three bars · rounded rect */
.glyph-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.glyph-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.glyph-dot--live {
  background: var(--live);
  box-shadow: 0 0 10px var(--live);
  animation: sp-breathe var(--breathe-dur) ease-in-out infinite;
}

.glyph-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 18px;
}

.glyph-bars > i { height: 2px; background: currentColor; }
.glyph-bars > i:nth-child(2) { width: 12px; }

.glyph-rect {
  width: 18px;
  height: 14px;
  border-radius: 4px;
  border: 2px solid currentColor;
}

.glyph-cam {
  width: 18px;
  height: 13px;
  border-radius: 3px;
  border: 2px solid currentColor;
  position: relative;
}

.glyph-cam::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 2px;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.rail__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(237, 235, 230, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px/1 var(--font-mono);
  color: var(--bone72);
}

.rail__avatar--credit {
  background: rgba(245, 165, 36, 0.14);
  border-color: rgba(245, 165, 36, 0.4);
  color: var(--credit-light);
}

/* --- top bar ------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-bottom: 1px solid var(--divider);
  background: var(--shell);
}

.topbar__wordmark {
  font: 700 13px/1 var(--font-display);
  letter-spacing: 3.2px;
}

.topbar__divider {
  width: 1px;
  height: 22px;
  background: rgba(237, 235, 230, 0.1);
}

.search {
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(237, 235, 230, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color var(--dur-hover) var(--ease-out);
}

.search:focus-within { border-color: rgba(79, 227, 156, 0.5); }

.search__input {
  flex: 1;
  min-width: 0;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bone);
}

.search__input::placeholder { color: var(--bone42); }

.search__hint {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 1px;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(237, 235, 230, 0.08);
  color: var(--bone45);
}

.topbar__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bone60);
  white-space: nowrap;
}

.topbar__wallet {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 1.2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(245, 165, 36, 0.13);
  border: 1px solid rgba(245, 165, 36, 0.4);
  color: var(--credit-light);
  white-space: nowrap;
  transition: background var(--dur-hover) var(--ease-out);
}

.topbar__wallet:hover { background: rgba(245, 165, 36, 0.2); }

.lang-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(8, 9, 11, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lang-toggle__item {
  padding: 6px 8px;
  border-radius: 7px;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 1px;
  color: var(--bone50);
}

.lang-toggle__item[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-weight: 600;
}

/* --- chassis columns ----------------------------------------------------- */

.column {
  display: flex;
  flex-direction: column;
  background: var(--shell);
  min-height: 0;
}

.column--left {
  width: var(--list-w);
  flex-shrink: 0;
  border-right: 1px solid var(--divider);
}

.column--right {
  width: var(--inspector-w);
  flex-shrink: 0;
  border-left: 1px solid var(--divider);
}

.column--wide { width: var(--side-w); }
.column--meter { width: var(--meter-w); }

.column--elastic {
  flex: 1;
  min-width: 0;
  border: 0;
}

.column__header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--divider);
}

.column__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 235, 230, 0.18) transparent;
}

.column__scroll::-webkit-scrollbar { width: 8px; }
.column__scroll::-webkit-scrollbar-thumb {
  background: rgba(237, 235, 230, 0.16);
  border-radius: 4px;
}

.strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
}

.strip__close {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 14px/1 var(--font-mono);
  color: var(--bone45);
  border-radius: 6px;
}

.strip__close:hover { color: var(--bone); background: rgba(237, 235, 230, 0.08); }

/* Flat note slab — chassis furniture, radius 0, no glass. */
.slab {
  padding: 14px 16px;
  background: rgba(237, 235, 230, 0.04);
  border: 1px solid var(--divider);
}

.empty-state {
  padding: 20px;
  border-radius: var(--r-row);
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bone60);
  text-align: center;
}

/* --- command palette / popovers ------------------------------------------ */

.popover {
  position: absolute;
  z-index: 40;
  min-width: 216px;
  padding: 10px;
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.popover__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bone72);
  text-align: left;
}

.popover__item:hover { background: rgba(237, 235, 230, 0.08); color: var(--bone); }

.popover__item[aria-selected="true"] { color: var(--standby-light); }

.popover__group {
  padding: 8px 10px 4px;
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--bone45);
}