/* ==========================================================================
   chrismish.com — LCARS-hybrid (LCARS-faithful) — V3 CONSOLE
   SPA console: paddle-selected panels, display window, band-height-locked type.
   Body tucked inside the frame. Two spacing constants. Color roles declared.
   ========================================================================== */

:root {
  /* ----- COLOR ROLES (Picard slate structure x brand oxide anchor) ----- */
  --substrate: #0E1016;
  --text: #F0F1F5;
  --readout: #E96D39;
  --shell: #687088;              /* slate — primary structural (sampled ion.studio) */
  --shell-2: #98A0B8;            /* light slate — secondary structural */
  --shell-3: #283048;            /* dark slate — fill */
  --active: #E96D39;             /* signal oxide — warm anchor (brand) */
  --text-muted: #98A0B8;       /* secondary readout role */
  --fault: #C03A2B;              /* fault ONLY (unused) */
  --paddle-a: #687088; --paddle-a-text: #0E1016;
  --paddle-b: #283048; --paddle-b-text: #F0F1F5;
  --display-trace: #E96D39;
  --display-trace-2: #98A0B8;

  /* ----- TWO SPACING CONSTANTS ----- */
  --gap: 6px;
  --pad: 24px;

  /* ----- FRAME GEOMETRY (band-height locked) ----- */
  --rail-thick: 150px;
  --rail-thin: 42px;             /* THE height: band, title, clock, caps — all equal */
  --rail-mid: 16px;
  --cap-r: 21px;                 /* rail-thin / 2 */

  /* ----- TYPE: ONE FAMILY, THREE SCALES ----- */
  --font: 'Antonio', 'Arial Narrow', sans-serif;
  --type-title: calc(var(--rail-thin) * 0.80);  /* locked to band height */
  --type-label: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  --type-data: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  background: var(--substrate);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--type-data);
  line-height: 1.4;
  padding: var(--pad);
}
a { color: inherit; }
button { font: inherit; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--active); outline-offset: 2px; }
::selection { background: var(--shell); color: var(--substrate); }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--shell); color: var(--substrate); padding: 8px 16px; z-index: 9; }
.skip-link:focus { left: var(--pad); }

/* ==========================================================================
   SHELL — full console frame; interior tucked inside it
   ========================================================================== */

.console {
  max-width: 1280px;
  margin-inline: auto;
  min-height: calc(100vh - var(--pad) * 2);
  display: flex;
  flex-direction: column;
}

.shell-top, .shell-bot { display: flex; gap: var(--gap); }
.swept { flex: 0 0 auto; display: block; }
.shell-top .band { flex: 1; align-self: flex-start; }
.shell-bot { align-items: flex-end; }
.shell-bot .band { flex: 1; }

.frame-body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--rail-thick) 1fr;
  gap: var(--gap);
  margin-block: var(--gap);
  min-height: 0;
  /* tuck the interior up into the frame: swept is 170 tall, band is rail-thin;
     pull the body up into the space under the band, column stays below swept */
  --tuck: calc(170px - var(--rail-thin) - var(--gap) * 2);
  margin-top: calc(-1 * var(--tuck));
}
.column { padding-top: var(--tuck); }

/* --- band: EVERY element exactly rail-thin tall --- */
.band { display: flex; gap: var(--gap); height: var(--rail-thin); }
.band > * { height: var(--rail-thin); display: flex; align-items: center; }
.band__title {
  font-size: var(--type-title);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  padding-inline: calc(var(--gap) * 2);
  white-space: nowrap;
}
.band__seg { background: var(--shell); flex: 1; }
.band__seg--short { flex: 0 0 10%; background: var(--shell-3); }
.band__seg--mid { flex: 0 0 18%; background: var(--shell-2); }
.band__cap { flex: 0 0 calc(var(--rail-thin) * 1.1); border-radius: 0 var(--cap-r) var(--cap-r) 0; background: var(--shell); }
.band--bot .band__cap { background: var(--shell-2); }
.band__readout {
  font-size: var(--type-title);     /* chronometer = title height, per directive */
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--readout);
  padding-inline: calc(var(--gap) * 2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.band--bot .band__readout { font-size: var(--type-data); }

/* --- command column: paddles = page selectors --- */
.column { display: flex; flex-direction: column; gap: var(--gap); }
.paddle {
  background: var(--paddle-a);
  color: var(--paddle-a-text);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 8px calc(var(--gap) * 2) 8px var(--pad);
  min-height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  width: 100%;
}
.paddle:nth-child(even) { background: var(--paddle-b); color: var(--paddle-b-text); }
.paddle:hover { background: var(--shell); color: var(--substrate); }
.paddle.is-active { background: var(--active); color: var(--substrate); }
.column__filler { flex: 1; background: var(--shell); min-height: var(--pad); }
.column__id {
  background: var(--shell);
  color: var(--substrate);
  text-align: right;
  padding: 5px calc(var(--gap) * 2);
  font-size: var(--type-data);
  letter-spacing: 0.08em;
}
.status-stack { display: flex; flex-direction: column; gap: var(--gap); }
.status-stack .stat {
  background: var(--shell-3); color: var(--substrate);
  text-align: right; padding: 5px calc(var(--gap) * 2);
  font-size: var(--type-data); letter-spacing: 0.06em; text-transform: uppercase;
}
.status-stack .stat--live { background: var(--active); color: var(--substrate); }

/* ==========================================================================
   INTERIOR — tucked into the frame: display window + selected panel
   ========================================================================== */

.interior {
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  padding: var(--gap) 0 var(--gap) var(--gap);
  min-width: 0;
}

.display__tag {
  position: absolute;
  top: var(--gap); right: var(--gap);
  font-size: var(--type-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--readout);
  background: var(--substrate);
  padding: 2px 10px;
}
.display__sig {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.display__sig img { max-height: 78%; width: auto; }

/* --- panels --- */
.panel[hidden] { display: none; }
.panel { display: flex; flex-direction: column; gap: calc(var(--gap) * 3); }

.panel__intro { max-width: 65ch; line-height: 1.5; }
.panel__role { font-size: var(--type-title); text-transform: uppercase; font-weight: 400; line-height: 1.1; letter-spacing: 0.02em; }
.panel__meta { color: var(--text-muted); letter-spacing: 0.08em; font-size: var(--type-data); margin-top: var(--gap); }

.well__head { display: flex; align-items: center; gap: var(--gap); }
.well__rail { height: var(--rail-mid); background: var(--shell-2); flex: 1; border-radius: 0 calc(var(--rail-mid) / 2) calc(var(--rail-mid) / 2) 0; }
.well__label { font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.05em; color: var(--shell); white-space: nowrap; }

/* diagnostic stream (quotes) */
.stream { display: grid; gap: calc(var(--gap) * 2); }
.stream__entry { display: grid; grid-template-columns: auto 1fr; gap: var(--gap) calc(var(--gap) * 2); align-items: baseline; }
.stream__id { color: var(--active); font-size: var(--type-data); letter-spacing: 0.06em; white-space: nowrap; }
.stream__entry p { font-size: var(--type-data); line-height: 1.5; max-width: 70ch; }
.stream__entry cite { font-style: normal; color: var(--text-muted); font-size: var(--type-data); letter-spacing: 0.06em; text-transform: uppercase; }

/* operational matrix */
.matrix a {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: calc(var(--gap) * 2);
  align-items: baseline;
  text-decoration: none;
  padding: 9px var(--gap);
  min-height: 44px;
  border-bottom: 1px solid color-mix(in srgb, var(--shell) 30%, transparent);
}
@media (min-width: 760px) { .matrix a { grid-template-columns: 4.5rem 1fr 1fr auto; } }
.matrix .m-id { color: var(--shell); letter-spacing: 0.06em; }
.matrix .m-name { text-transform: uppercase; font-size: var(--type-label); font-weight: 400; }
.matrix .m-desc { color: var(--text-muted); display: none; }
@media (min-width: 760px) { .matrix .m-desc { display: block; } }
.matrix .m-mark { color: var(--shell-2); }
.matrix a:hover { background: color-mix(in srgb, var(--active) 18%, transparent); }
.matrix a:hover .m-id { color: var(--active); }

/* featured */
.featured {
  --frame-radius: 20px;
  border: var(--rail-mid) solid var(--shell-2);
  border-left-width: calc(var(--rail-mid) * 2.5);
  border-bottom-width: calc(var(--rail-mid) / 2);
  border-radius: var(--frame-radius);
  padding: var(--pad);
  display: grid;
  gap: calc(var(--gap) * 2);
}
.featured h2 { font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--shell); }
.featured p { max-width: 65ch; line-height: 1.5; }
.featured .cta {
  justify-self: start;
  background: var(--active);
  color: var(--substrate);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--type-label);
  padding: 10px var(--pad);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--cap-r);
}
.featured .cta:hover { background: var(--shell); }

.matrix-grid { display: grid; gap: 0 var(--pad); }
@media (min-width: 980px) { .matrix-grid { grid-template-columns: 1fr 1fr; } }

/* comms */
.contact p { max-width: 65ch; line-height: 1.5; }
.social { display: flex; flex-wrap: wrap; gap: var(--gap); }
.social a {
  background: var(--paddle-a);
  color: var(--paddle-a-text);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--type-data);
  letter-spacing: 0.04em;
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.social a:first-child { border-radius: var(--cap-r) 0 0 var(--cap-r); }
.social a:last-child { border-radius: 0 var(--cap-r) var(--cap-r) 0; }
.social a:nth-child(even) { background: var(--paddle-b); color: var(--paddle-b-text); }
.social a:hover { background: var(--active); color: var(--substrate); }

/* ==========================================================================
   RESPONSIVE — grammar preserved
   ========================================================================== */
@media (max-width: 759px) {
  :root { --rail-thick: 90px; --rail-thin: 34px; --cap-r: 17px; --pad: 14px; }
  body { overflow-x: hidden; }
  .console { min-height: 0; }
  .band__readout, .band__seg--short, .band__seg--mid { display: none; }
  .band__title { font-size: var(--type-label); }
  .swept { display: none; }
  .band--top, .band--bot { border-radius: var(--cap-r) 0 0 var(--cap-r); overflow: hidden; }
  .band--top::before, .band--bot::before { content: ""; flex: 0 0 var(--cap-r); background: var(--shell); }
  .frame-body { grid-template-columns: 1fr; --tuck: 0px; margin-top: var(--gap); }
  .column { flex-direction: row; flex-wrap: wrap; padding-top: 0; }
  .paddle { flex: 1 1 30%; min-height: 44px; text-align: center; justify-content: center; align-items: center; padding: 8px var(--gap); }
  .column__filler, .column__id, .status-stack { display: none; }
  .interior { padding-left: 0; }
  .display__stage { height: 130px; }
}

/* ----- hybrid: oxide anchoring on slate structure ----- */
.well__label, .matrix .m-id, .stream__id { color: var(--active); }
.panel__meta a { color: var(--active); }
.column__id { background: var(--active); color: var(--substrate); }


/* ----- long version: sticky display window, section rhythm ----- */
.display--sticky { position: sticky; top: var(--gap); z-index: 5; }
.panel { scroll-margin-top: calc(170px + var(--gap) * 4); }
.panel + .panel { padding-top: var(--pad); }
@media (max-width: 759px) { .display--sticky { position: static; } }



/* ==========================================================================
   VIEWER — railed bezel around the wide display (Chris directive)
   Left rail 26px thick -> mini-swepts -> 12px top/bottom rails. Concentric.
   ========================================================================== */
.viewer {
  min-width: 0;
  display: grid;
  grid-template-columns: 80px 1fr 90px;
  grid-template-rows: 48px clamp(130px, 20vh, 190px) 48px;
  column-gap: var(--gap);
}
.viewer__corner { grid-column: 1; grid-row: 1; }
.viewer__corner--bot { grid-row: 3; }
.viewer__rail { display: block; background: var(--shell-2); }
.viewer__rail--top    { grid-column: 2; grid-row: 1; height: 12px; align-self: start; }
.viewer__rail--tr     { grid-column: 3; grid-row: 1; height: 12px; align-self: start; border-radius: 0 6px 6px 0; background: var(--shell); }
.viewer__rail--left   { grid-column: 1; grid-row: 2; width: 26px; background: var(--shell); }
.viewer__rail--right  { grid-column: 3; grid-row: 2; width: 12px; justify-self: end; background: var(--shell-3); }
.viewer__stage {
  grid-column: 2 / 4; grid-row: 2;
  position: relative;
  background: color-mix(in srgb, var(--shell-3) 10%, var(--substrate));
  margin-right: calc(12px + var(--gap)); /* clear the right rail */
}
.viewer__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viewer__rail--bottom { grid-column: 2; grid-row: 3; height: 12px; align-self: end; }
.viewer__rail--br     { grid-column: 3; grid-row: 3; height: 12px; align-self: end; border-radius: 0 6px 6px 0; background: var(--shell); }

@media (max-width: 759px) {
  .viewer { grid-template-columns: 50px 1fr 50px; grid-template-rows: 30px 130px 30px; }
  .viewer__corner { width: 50px; height: 30px; }
  .viewer__rail--left { width: 16px; }
}