/* ==========================================================================
   Console — the administrative control plane
   --------------------------------------------------------------------------
   Same language as the trader deck, different posture: a fixed navigation
   spine, denser tables, and every destructive control visibly separated from
   the reversible ones.
   ========================================================================== */

.console {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* ---- spine -------------------------------------------------------------- */

.spine {
  position: sticky;
  top: 52px;
  align-self: start;
  height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s4) var(--s3);
  border-right: 1px solid var(--kerf);
  background: color-mix(in oklab, var(--ink-100) 52%, transparent);
  overflow-y: auto;
}

.spine__mark {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s2) var(--s4);
}

.spine__group {
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: var(--s4) var(--s2) 6px;
}

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

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

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

.spine__link[data-locked="true"] { opacity: 0.35; pointer-events: none; }

.spine__badge {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: var(--t-micro);
  color: var(--sig-brand);
}

/* ---- section ------------------------------------------------------------ */

.section {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s9);
  min-width: 0;
}

.section__head {
  display: flex;
  align-items: flex-end;
  gap: var(--s4);
  padding-bottom: var(--s2);
  flex-wrap: wrap;
}

.section__title { font-size: var(--t-sub); letter-spacing: -0.012em; color: var(--ink-999); font-weight: 480; }

.panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

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

.panel__body {
  min-width: 0;
  /* Table rows size to their content; without this a wide table pushes its
     columns past the panel instead of scrolling inside it. */
  overflow-x: auto;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--s3);
}

.tile {
  position: relative;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 92px;
  overflow: hidden;
}

.tile__value { font-family: var(--font-num); font-size: var(--t-title); font-weight: 500; color: var(--ink-999); letter-spacing: -0.02em; line-height: 1; }
.tile__label { font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.tile__delta { font-family: var(--font-num); font-size: var(--t-micro); }
.tile__spark { position: absolute; right: 0; bottom: 0; left: 0; height: 30px; opacity: 0.55; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--s3); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); align-items: start; }

/* ---- tables ------------------------------------------------------------- */

.ctable { display: flex; flex-direction: column; min-width: 0; }

.ctable__scroll { overflow-x: auto; }

.ctable__head,
.ctable__row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4);
  min-width: 0;
}

/* Only paginated tables size to their content and scroll; a standalone row
   inside a panel stays inside the panel and truncates instead. */
.ctable__inner {
  min-width: max-content;
  display: flex;
  flex-direction: column;
}

.ctable__inner .ctable__head,
.ctable__inner .ctable__row {
  min-width: 100%;
}

.ctable__head {
  min-height: 30px;
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--kerf);
  background: color-mix(in oklab, var(--ink-150) 76%, transparent);
  position: sticky;
  top: 0;
  z-index: 2;
}

.ctable__sort { cursor: pointer; transition: color var(--m-quick) var(--ease-out); }
.ctable__sort:hover { color: var(--ink-900); }
.ctable__sort[data-active="true"] { color: var(--sig-brand); }

.ctable__row {
  position: relative;
  min-width: 0;
  min-height: 40px;
  font-size: var(--t-small);
  color: var(--ink-800);
  border-bottom: 1px solid color-mix(in oklab, var(--plate-line) 30%, transparent);
  transition: background var(--m-quick) var(--ease-out);
}

.ctable__row:hover { background: color-mix(in oklab, var(--ink-250) 48%, transparent); color: var(--ink-999); }
.ctable__row--click { cursor: pointer; }

.ctable__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--kerf);
  font-size: var(--t-micro);
  color: var(--ink-600);
}

.filters {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--kerf);
}

.filters .field { min-width: 132px; }
.filters .input, .filters .select { height: 28px; font-size: var(--t-small); }

/* ---- record view -------------------------------------------------------- */

.record { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr); gap: var(--s3); align-items: start; }

.record__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  flex-wrap: wrap;
}

.record__avatar {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-size: var(--t-lead);
  color: var(--ink-000);
  background: linear-gradient(150deg, var(--sig-brand), color-mix(in oklab, var(--sig-brand) 55%, var(--sig-mind)));
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.kv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px var(--s3); padding: var(--s4) var(--s5); font-size: var(--t-small); }
.kv dt { color: var(--ink-500); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; align-self: center; }
.kv dd { margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }

.timeline { display: flex; flex-direction: column; }

.timeline__row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: var(--s3);
  padding: 8px var(--s4);
  font-size: var(--t-small);
  border-bottom: 1px solid color-mix(in oklab, var(--plate-line) 26%, transparent);
}

.timeline__pip {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  background: var(--pip, var(--ink-600));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.danger-zone {
  padding: var(--s4) var(--s5);
  border-top: 1px solid color-mix(in oklab, var(--sig-loss) 26%, transparent);
  background: color-mix(in oklab, var(--sig-loss) 5%, transparent);
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
}

/* ---- charts ------------------------------------------------------------- */

.chart { padding: var(--s4); }
.chart canvas { width: 100%; height: 190px; }
.chart--tall canvas { height: 260px; }

.legend { display: flex; gap: var(--s4); flex-wrap: wrap; padding: 0 var(--s4) var(--s3); font-size: var(--t-micro); color: var(--ink-600); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

.funnel { display: flex; flex-direction: column; gap: 2px; padding: var(--s4); }

.funnel__step { display: grid; grid-template-columns: 150px minmax(0, 1fr) 78px; gap: var(--s3); align-items: center; }

.funnel__bar {
  height: 22px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--sig-brand) 62%, transparent), color-mix(in oklab, var(--sig-brand) 26%, transparent));
  width: calc(var(--v) * 1%);
  min-width: 2px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: width var(--m-settle) var(--ease-out);
}

.cohort { display: grid; gap: 2px; padding: var(--s4); overflow-x: auto; }
.cohort__row { display: grid; grid-template-columns: 56px repeat(var(--n, 6), minmax(38px, 1fr)); gap: 2px; align-items: center; }

.cohort__cell {
  height: 26px;
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-size: var(--t-micro);
  color: var(--ink-900);
  background: color-mix(in oklab, var(--sig-cool) calc(var(--v) * 0.8%), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--plate-line) 40%, transparent);
}

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

@media (max-width: 1240px) {
  .record { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .console { grid-template-columns: 1fr; }
  .spine {
    position: sticky;
    top: 52px;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--kerf);
    padding: var(--s2) var(--s3);
  }
  .spine__mark, .spine__group { display: none; }
  .spine__link { white-space: nowrap; }
  .section { padding: var(--s4) var(--s3) var(--s8); }
}