/* ==========================================================================
   Shell — the persistent chrome around every surface
   ========================================================================== */

#chassis {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* ---- strata: the depth stack behind all content ------------------------ */

.strata {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-field);
  overflow: hidden;
}

.strata__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

/* A horizon line: one hairline that anchors the whole composition. */
.strata__horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--sig-cool) 22%, transparent) 20%, color-mix(in oklab, var(--sig-brand) 18%, transparent) 70%, transparent);
  opacity: 0.5;
  transform: translate3d(0, calc(var(--py) * 10px), 0);
}

/* ---- masthead ---------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 52px;
  padding: 0 var(--s5);
  background: color-mix(in oklab, var(--ink-050) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--kerf);
}

.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--sig-brand) 28%, transparent), transparent);
  opacity: 0.5;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.brand__mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--sig-brand);
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--sig-brand) 40%, transparent));
  transition: transform var(--m-move) var(--ease-spring);
}

.brand:hover .brand__mark { transform: rotate(-90deg); }

.brand__name {
  font-size: var(--t-base);
  font-weight: 560;
  letter-spacing: 0.02em;
  color: var(--ink-999);
}

.brand__name em {
  font-style: normal;
  color: var(--sig-brand);
}

.brand__sub {
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding-left: 9px;
  margin-left: 3px;
  border-left: 1px solid var(--plate-line);
}

/* telemetry strip in the masthead: the network's own vitals */
.telemetry {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-family: var(--font-num);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--ink-600);
}

.telemetry__item { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.telemetry__item b { font-weight: 500; color: var(--ink-900); }
.telemetry__key { text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-500); }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.navlink {
  height: 28px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-small);
  color: var(--ink-700);
  transition: color var(--m-quick) var(--ease-out), background var(--m-quick) var(--ease-out);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.navlink:hover { color: var(--ink-999); background: color-mix(in oklab, var(--ink-250) 60%, transparent); }

.navlink[aria-current="page"] {
  color: var(--ink-999);
  background: color-mix(in oklab, var(--sig-brand) 12%, transparent);
  box-shadow: inset 0 -1px 0 var(--sig-brand);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-700);
  background: color-mix(in oklab, var(--ink-200) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--plate-line);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

/* ---- outlet ------------------------------------------------------------ */

.outlet {
  position: relative;
  z-index: var(--z-plate);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- footing: minimal, and it stays minimal ---------------------------- */

.footing {
  position: relative;
  z-index: var(--z-plate);
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  border-top: 1px solid var(--kerf);
  background: color-mix(in oklab, var(--ink-000) 40%, transparent);
  font-size: var(--t-small);
  color: var(--ink-600);
  flex-wrap: wrap;
}

.footing__credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.footing__credit::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--plate-line-bright);
}

.footing__links { display: flex; gap: var(--s4); flex-wrap: wrap; }
.footing__links a { color: var(--ink-600); transition: color var(--m-quick) var(--ease-out); }
.footing__links a:hover { color: var(--ink-900); }

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

.palette-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: color-mix(in oklab, var(--ink-000) 62%, transparent);
  backdrop-filter: blur(6px);
}

.palette {
  width: min(620px, 92vw);
  max-height: 62vh;
  display: flex;
  flex-direction: column;
}

.palette__input {
  height: 46px;
  padding: 0 var(--s5);
  font-size: var(--t-lead);
  color: var(--ink-999);
  background: transparent;
  border-bottom: 1px solid var(--kerf);
  width: 100%;
}

.palette__input::placeholder { color: var(--ink-500); }

.palette__list { overflow-y: auto; padding: var(--s2) 0; }

.palette__item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 8px var(--s5);
  text-align: left;
  color: var(--ink-800);
  font-size: var(--t-small);
  transition: background var(--m-tap) var(--ease-out);
}

.palette__item:hover,
.palette__item[data-active="true"] {
  background: color-mix(in oklab, var(--sig-brand) 12%, transparent);
  color: var(--ink-999);
}

.palette__kind {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-left: auto;
}

/* ---- toasts: hairline slabs at the bottom-right ------------------------ */

.toaster {
  position: fixed;
  right: var(--s5);
  bottom: var(--s5);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: min(340px, 88vw);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  font-size: var(--t-small);
  color: var(--ink-900);
  animation: sheetIn 320ms var(--ease-spring) both;
}

.toast__bar {
  width: 2px;
  flex: none;
  background: var(--toast-ink, var(--sig-brand));
}

.toast__title { font-weight: 540; color: var(--ink-999); }
.toast__body { color: var(--ink-700); font-size: var(--t-small); }

/* ---- sheet: the modal form surface ------------------------------------- */

.sheet-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  background: color-mix(in oklab, var(--ink-000) 68%, transparent);
  backdrop-filter: blur(8px);
  overflow-y: auto;
}

.sheet {
  width: min(var(--sheet-w, 560px), 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.sheet__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--kerf);
}

.sheet__body { padding: var(--s5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4); }

.sheet__foot {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--kerf);
  background: color-mix(in oklab, var(--ink-100) 50%, transparent);
}

/* ---- impersonation banner: unmissable, never dismissible --------------- */

.assume-bar {
  position: sticky;
  top: 52px;
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 7px var(--s5);
  font-size: var(--t-small);
  color: var(--ink-000);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--sig-warn) 88%, transparent) 0 12px,
    color-mix(in oklab, var(--sig-warn) 72%, transparent) 12px 24px
  );
}

.assume-bar b { font-weight: 640; }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 1080px) {
  .telemetry__item:nth-child(n + 3) { display: none; }
}

@media (max-width: 780px) {
  .masthead { padding: 0 var(--s3); gap: var(--s2); }
  .brand__sub { display: none; }
  .telemetry { display: none; }
  .footing { padding: var(--s5) var(--s4); flex-direction: column; align-items: flex-start; gap: var(--s4); }
}

/* Below this the masthead keeps identity, search and the primary action only;
   navigation moves to the command palette, which is one tap away. */
@media (max-width: 640px) {
  .masthead__nav,
  .status-pill { display: none; }
  .brand__name { font-size: var(--t-small); }
}

/* Provenance marker: shown while the board is served by the built-in fabric
   rather than a live feed. Deliberately quiet — a statement of fact, not a
   warning banner. */
.footing__mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.footing__mode::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--sig-warn);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0.8;
}