/* ==========================================================================
   CHASSIS components
   --------------------------------------------------------------------------
   Plates are chamfered on two opposing corners, which gives every surface a
   direction. Light comes from one place; `background-attachment: fixed` makes
   the sheen gradient viewport-anchored so every plate is lit by the *same*
   lamp rather than each carrying its own private highlight.
   ========================================================================== */

/* ------------------------------------------------------------------ plate */

.plate {
  position: relative;
  background: var(--plate-line);
  clip-path: polygon(
    var(--chamfer) 0,
    100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%,
    0 var(--chamfer)
  );
  isolation: isolate;
}

.plate::before {
  content: "";
  position: absolute;
  inset: var(--hair);
  z-index: 0;
  background:
    linear-gradient(168deg,
      color-mix(in oklab, var(--plate-raised) 96%, transparent) 0%,
      var(--plate) 52%,
      color-mix(in oklab, var(--ink-100) 92%, transparent) 100%);
  clip-path: inherit;
}

/* The shared specular. Viewport-anchored, so moving the pointer sweeps one
   light across the entire interface. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(
    52vmax 52vmax at var(--lamp-x) var(--lamp-y),
    var(--sheen) 0%,
    color-mix(in oklab, var(--sheen) 35%, transparent) 26%,
    transparent 58%
  );
  background-attachment: fixed;
  background-size: 100vw 100vh;
  mix-blend-mode: soft-light;
  opacity: 0.9;
  transition: opacity var(--m-move) var(--ease-out);
}

.plate > * { position: relative; z-index: 2; }

.plate--sm { --chamfer: var(--chamfer-sm); }
.plate--lg { --chamfer: var(--chamfer-lg); }

.plate--raised { filter: drop-shadow(0 20px 34px color-mix(in oklab, var(--ink-000) 62%, transparent)); }
.plate--float { filter: drop-shadow(0 34px 60px color-mix(in oklab, var(--ink-000) 70%, transparent)); }

.plate--sunken::before { background: linear-gradient(180deg, var(--plate-sunken), color-mix(in oklab, var(--ink-050) 92%, transparent)); }

/* Charge: a plate bound to a live quantity glows at its rim in proportion.
   `--charge` (0..1) is written by the module from real data — volatility,
   conviction, risk — never for decoration. */
.plate[data-charged]::before {
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--charge-ink, var(--sig-brand)) calc(var(--charge, 0) * 46%), transparent),
    inset 0 0 calc(18px * var(--charge, 0)) color-mix(in oklab, var(--charge-ink, var(--sig-brand)) calc(var(--charge, 0) * 22%), transparent);
}

/* ---- corner ticks: machined registration marks, not borders ------------- */

.ticks {
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 3;
  --tick: color-mix(in oklab, var(--ink-600) 62%, transparent);
  --len: 9px;
  background-image:
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick));
  background-repeat: no-repeat;
  background-size: var(--len) 1px, 1px var(--len), var(--len) 1px, 1px var(--len);
  background-position: right top, right top, left bottom, left bottom;
  opacity: 0.55;
  transition: opacity var(--m-move) var(--ease-out), inset var(--m-move) var(--ease-out);
}

/* ---- bezel: the knurled strip that also serves as the drag handle ------- */

.bezel {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 34px;
  padding: 0 var(--s3) 0 var(--s4);
  border-bottom: 1px solid var(--kerf);
  background:
    repeating-linear-gradient(90deg,
      color-mix(in oklab, #fff 2.6%, transparent) 0 1px,
      transparent 1px 4px),
    linear-gradient(180deg, color-mix(in oklab, var(--ink-250) 70%, transparent), transparent);
  cursor: grab;
  user-select: none;
}

.bezel:active { cursor: grabbing; }

.bezel__id {
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-family: var(--font-num);
}

.bezel__title {
  font-size: var(--t-small);
  font-weight: 520;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bezel__spacer { flex: 1; }

.bezel__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.55;
  transition: opacity var(--m-quick) var(--ease-out);
}

.module:hover .bezel__tools,
.bezel:hover .bezel__tools { opacity: 1; }

/* ---- rail: vertical instrument labelling ------------------------------- */

.rail {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--t-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-family: var(--font-num);
  user-select: none;
  white-space: nowrap;
}

/* ---- kerf: hairline seams with a cut at the joint ---------------------- */

.kerf-x {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--plate-line) 8%, var(--plate-line) 92%, transparent);
  opacity: 0.7;
}

.kerf-y {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--plate-line) 12%, var(--plate-line) 88%, transparent);
  opacity: 0.7;
}

/* ------------------------------------------------------------------ button */

.btn {
  --btn-ink: var(--ink-900);
  --btn-line: var(--plate-line-bright);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 32px;
  padding: 0 var(--s4);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--btn-ink);
  background: color-mix(in oklab, var(--ink-250) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--btn-line), inset 0 1px 0 color-mix(in oklab, #fff 6%, transparent);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition:
    background var(--m-quick) var(--ease-out),
    color var(--m-quick) var(--ease-out),
    transform var(--m-tap) var(--ease-out),
    box-shadow var(--m-quick) var(--ease-out);
  white-space: nowrap;
}

.btn:hover {
  background: color-mix(in oklab, var(--ink-300) 78%, transparent);
  color: var(--ink-999);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-600) 70%, transparent), inset 0 1px 0 color-mix(in oklab, #fff 9%, transparent);
}

.btn:active { transform: translateY(1px); }

.btn:disabled { opacity: 0.42; pointer-events: none; }

.btn--prime {
  --btn-ink: var(--ink-000);
  background: linear-gradient(168deg,
    color-mix(in oklab, var(--sig-brand) 96%, #fff 12%),
    color-mix(in oklab, var(--sig-brand) 82%, var(--ink-300)));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-brand) 60%, #fff 20%),
    0 6px 20px -10px color-mix(in oklab, var(--sig-brand) 60%, transparent);
  font-weight: 560;
}

.btn--prime:hover {
  background: linear-gradient(168deg, color-mix(in oklab, var(--sig-brand) 100%, #fff 22%), var(--sig-brand));
  color: var(--ink-000);
}

.btn--quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--plate-line) 80%, transparent);
  color: var(--ink-700);
}

.btn--quiet:hover { background: color-mix(in oklab, var(--ink-250) 55%, transparent); }

.btn--danger { --btn-ink: var(--sig-loss); box-shadow: inset 0 0 0 1px var(--loss-dim); }
.btn--danger:hover { background: color-mix(in oklab, var(--sig-loss) 16%, transparent); color: var(--ink-999); }

.btn--gain { --btn-ink: var(--sig-gain); box-shadow: inset 0 0 0 1px var(--gain-dim); }
.btn--gain:hover { background: color-mix(in oklab, var(--sig-gain) 15%, transparent); color: var(--ink-999); }

.btn--sm { height: 25px; padding: 0 var(--s3); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; }
.btn--lg { height: 42px; padding: 0 var(--s6); font-size: var(--t-base); }
.btn--block { width: 100%; }

.btn--icon {
  width: 26px;
  height: 26px;
  padding: 0;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  background: transparent;
  box-shadow: none;
  color: var(--ink-600);
}

.btn--icon:hover { background: color-mix(in oklab, var(--ink-300) 70%, transparent); color: var(--ink-999); box-shadow: none; }

.btn[aria-pressed="true"] {
  background: color-mix(in oklab, var(--sig-brand) 18%, transparent);
  color: var(--sig-brand);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-brand) 45%, transparent);
}

/* -------------------------------------------------------------------- chip */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px 0 7px;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-700);
  background: color-mix(in oklab, var(--ink-250) 62%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--plate-line) 70%, transparent);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0.9;
}

.chip--gain { color: var(--sig-gain); background: var(--gain-dim); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-gain) 28%, transparent); }
.chip--loss { color: var(--sig-loss); background: var(--loss-dim); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-loss) 28%, transparent); }
.chip--warn { color: var(--sig-warn); background: var(--warn-dim); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-warn) 28%, transparent); }
.chip--mind { color: var(--sig-mind); background: var(--mind-dim); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-mind) 28%, transparent); }
.chip--brand { color: var(--sig-brand); background: var(--brand-dim); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-brand) 28%, transparent); }
.chip--cool { color: var(--sig-cool); background: color-mix(in oklab, var(--sig-cool) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-cool) 26%, transparent); }
.chip--flat::before { display: none; padding-left: 8px; }

/* ------------------------------------------------------------------- meter */

.meter {
  position: relative;
  height: 5px;
  background: color-mix(in oklab, var(--ink-300) 55%, transparent);
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v, 0) * 1%);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--meter-ink, var(--sig-brand)) 55%, transparent),
    var(--meter-ink, var(--sig-brand)));
  /* segmented, like a machined scale rather than a progress bar */
  mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px);
  transition: width var(--m-settle) var(--ease-out);
}

.meter--tall { height: 9px; }

.meter__mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  left: calc(var(--at, 50) * 1%);
  background: color-mix(in oklab, var(--ink-800) 70%, transparent);
}

/* ------------------------------------------------------------------ fields */

.field { display: flex; flex-direction: column; gap: 5px; }

.field__label {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.input,
.select,
.textarea {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-size: var(--t-small);
  color: var(--ink-900);
  background: color-mix(in oklab, var(--ink-100) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--plate-line), inset 0 2px 6px -4px var(--ink-000);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: box-shadow var(--m-quick) var(--ease-out), background var(--m-quick) var(--ease-out);
}

.textarea { height: auto; min-height: 84px; padding: 8px 10px; line-height: 1.5; resize: vertical; }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  background: color-mix(in oklab, var(--ink-150) 88%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig-brand) 52%, transparent),
    0 0 0 3px color-mix(in oklab, var(--sig-brand) 10%, transparent);
}

.input::placeholder, .textarea::placeholder { color: var(--ink-500); }

.select {
  appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-600) 50%),
    linear-gradient(135deg, var(--ink-600) 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.input--num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* switch: a machined toggle, throw travels along a slot */
.switch {
  position: relative;
  width: 38px;
  height: 20px;
  flex: none;
  background: color-mix(in oklab, var(--ink-300) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--plate-line), inset 0 2px 5px -3px var(--ink-000);
  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);
  cursor: pointer;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: linear-gradient(160deg, var(--ink-800), var(--ink-600));
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  transition: transform var(--m-move) var(--ease-spring), background var(--m-quick) var(--ease-out);
}

.switch[aria-checked="true"] { background: color-mix(in oklab, var(--sig-gain) 26%, transparent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: linear-gradient(160deg, var(--sig-gain), color-mix(in oklab, var(--sig-gain) 60%, var(--ink-400))); }

.switch--armed[aria-checked="true"] { background: color-mix(in oklab, var(--sig-brand) 30%, transparent); }
.switch--armed[aria-checked="true"]::after { background: linear-gradient(160deg, var(--sig-brand), color-mix(in oklab, var(--sig-brand) 62%, var(--ink-400))); }

/* ------------------------------------------------------------------- table */

.dtable { width: 100%; display: grid; font-size: var(--t-small); }

.dtable__head,
.dtable__row {
  display: grid;
  grid-template-columns: var(--cols, 1fr);
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4);
  min-height: 34px;
}

.dtable__head {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 28px;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: color-mix(in oklab, var(--ink-150) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--kerf);
}

.dtable__row {
  position: relative;
  border-bottom: 1px solid color-mix(in oklab, var(--plate-line) 42%, transparent);
  color: var(--ink-800);
  transition: background var(--m-quick) var(--ease-out), color var(--m-quick) var(--ease-out);
  cursor: default;
}

.dtable__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--row-ink, var(--sig-brand));
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform var(--m-quick) var(--ease-out);
}

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

.dtable__row:hover::before { transform: scaleY(1); }

.dtable__row[data-active="true"] { background: color-mix(in oklab, var(--sig-brand) 9%, transparent); }
.dtable__row[data-active="true"]::before { transform: scaleY(1); }

.dtable__row--clickable { cursor: pointer; }

.cell-r { text-align: right; justify-self: end; }
.cell-c { text-align: center; justify-self: center; }
.cell-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------- misc */

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row--gap { gap: var(--s3); }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.pad { padding: var(--s4); }
.pad-lg { padding: var(--s5); }

.scroll-y { overflow-y: auto; overscroll-behavior: contain; }
.scroll-x { overflow-x: auto; overscroll-behavior: contain; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--ink-500);
  font-size: var(--t-small);
}

.empty__mark {
  width: 26px;
  height: 26px;
  border: 1px solid var(--plate-line-bright);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0.6;
}

/* Tooltip: a hairline label that appears beside the cursor target. */
.tip { position: relative; }

.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 4px 8px;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
  background: var(--ink-200);
  box-shadow: inset 0 0 0 1px var(--plate-line-bright), var(--lift-2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-quick) var(--ease-out), transform var(--m-quick) var(--ease-out);
  z-index: var(--z-overlay);
}

.tip:hover::after { opacity: 1; transform: translate(-50%, 0); }

/* Segment control — instrument mode selector, not tabs. */
.segments {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: color-mix(in oklab, var(--ink-100) 76%, transparent);
  box-shadow: inset 0 0 0 1px var(--plate-line);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.segments__item {
  height: 24px;
  padding: 0 11px;
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-600);
  transition: color var(--m-quick) var(--ease-out), background var(--m-quick) var(--ease-out);
}

.segments__item:hover { color: var(--ink-900); }

.segments__item[aria-selected="true"] {
  color: var(--ink-999);
  background: color-mix(in oklab, var(--ink-300) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 7%, transparent);
}

/* Sparkline + canvas holders keep their own aspect without layout thrash. */
.spark { display: block; width: 100%; height: 26px; }
.spark--tall { height: 52px; }