/* Learning intervention runtime — warm paper theme.
   The --li-* names are kept so every downstream rule keeps working; only their
   values move from the dark space palette to the shared paper tokens. */
.learning-intervention-host {
  --li-ink: var(--ink);
  --li-muted: var(--ink-muted);
  --li-cyan: var(--tone-blue);
  --li-mint: var(--tone-teal);
  --li-violet: var(--tone-plum);
  --li-amber: var(--tone-amber);
  --li-rose: var(--tone-rose);
  --li-panel: var(--surface);
  --li-panel-2: var(--surface-sunken);
  --li-line: var(--line-card);
  --li-focus: var(--focus-border);
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 293px;
  color: var(--li-ink);
  font-family: var(--font);
}

body.has-learning-intervention {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}

body.has-learning-intervention #app {
  display: none !important;
}

body.has-learning-intervention #learning-intervention-root {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.has-learning-intervention #learning-intervention-root > .learning-intervention {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

body.has-learning-intervention #learning-intervention-root .li-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.learning-intervention,
.learning-intervention * {
  box-sizing: border-box;
}

.learning-intervention {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 293px;
  overflow: hidden;
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  contain: layout paint;
}

.learning-intervention::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(43, 32, 20, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 32, 20, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, #000, transparent 56%);
}

.li-header {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.6fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.li-identity {
  min-width: 0;
}

.li-eyebrow,
.li-mini-label {
  display: block;
  margin: 0;
  color: var(--primary-pill-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.li-title {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.3vw, 23px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-progress {
  display: grid;
  gap: 4px;
  min-width: 120px;
}

.li-progress-copy {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.li-progress-track {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-input);
}

.li-progress-fill {
  display: block;
  width: var(--li-progress);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 260ms ease;
}

.li-header-controls,
.li-choice-row,
.li-axis-controls,
.li-tool-tabs,
.li-term-choices,
.li-reason-choices {
  display: flex;
  align-items: center;
  gap: 6px;
}

.li-button,
.li-observation,
.li-axis-button,
.li-plot-column,
.li-repair-card,
.li-operation-mark,
.li-vessel,
.li-idea-card,
.li-choice-card,
.li-data-row,
.li-term-chip,
.li-reason-chip,
.li-tool-tab,
.li-help-option {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line-quiet);
  border-radius: var(--radius-input);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.li-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.li-button:hover:not(:disabled),
.li-observation:hover,
.li-axis-button:hover,
.li-plot-column:hover,
.li-repair-card:hover,
.li-idea-card:hover,
.li-choice-card:hover,
.li-data-row:hover,
.li-term-chip:hover,
.li-reason-chip:hover,
.li-tool-tab:hover,
.li-help-option:hover {
  border-color: var(--primary-line);
  background-color: var(--primary-soft);
}

.learning-intervention button:focus-visible,
.learning-intervention input:focus-visible,
.learning-intervention select:focus-visible,
.li-inquiry-query:focus,
.li-server-consequence:focus,
.li-phase-indicator:focus,
.li-active-help:focus {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.learning-intervention button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Flat single-stop gradient, not a texture: the shared :hover rule above is more
   specific than this one, so a plain background-color would be washed out to
   --primary-soft on hover and leave the #fff label unreadable. */
.li-button-primary {
  min-width: 172px;
  border: 0;
  color: #fff;
  background: linear-gradient(var(--primary), var(--primary));
  box-shadow: var(--shadow-primary);
}

.li-button-secondary,
.li-button-complete {
  color: var(--ink-mid);
  border-color: var(--line-quiet);
  background: var(--surface);
}

.li-button-complete {
  color: color-mix(in srgb, var(--ok) 72%, var(--ink));
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

.li-button-quiet,
.li-button-ghost {
  padding-inline: 10px;
  color: var(--ink-mid);
  background: var(--surface);
}

.li-button-ghost {
  color: var(--ink-mid);
  border-color: transparent;
  background: transparent;
}

.li-help-menu {
  position: absolute;
  z-index: 30;
  top: 54px;
  right: 88px;
  display: grid;
  gap: 5px;
  width: min(250px, calc(100vw - 30px));
  padding: 7px;
  border: 1px solid var(--line-card);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.li-help-option {
  padding: 8px 11px;
  background: var(--surface-sunken);
  text-align: left;
}

.li-body {
  display: grid;
  grid-template-columns: minmax(170px, 0.31fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 10px 14px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(43 32 20 / 22%) transparent;
}

.li-mission-copy {
  align-self: stretch;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}

.li-goal {
  margin: 5px 0 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.18;
}

.li-action-prompt {
  margin: 0;
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.22;
}

.li-footer {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 7px 12px 7px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.li-footer.is-guided-progress {
  grid-template-columns: minmax(0, 1fr) auto;
}

.li-visible-status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-visible-status.is-celebration,
.li-visible-status.is-noticing {
  color: color-mix(in srgb, var(--ok) 78%, var(--ink));
}

.li-visible-status.is-repair,
.li-visible-status.is-error {
  color: var(--bad);
}

.li-feedback-headline {
  flex: 0 0 auto;
  color: currentColor;
  font-weight: 700;
}

.li-feedback-message {
  overflow: hidden;
  text-overflow: ellipsis;
}

.li-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Story */
.li-body-story {
  grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1.1fr);
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.li-story-art {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

.li-story-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 48%, var(--paper));
  pointer-events: none;
}

.li-story-art img,
.li-terminal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}

.li-story-badge {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 10px;
  padding: 5px 9px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-chip);
  color: var(--primary-pill-ink);
  background: var(--primary-pill-bg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
}

.li-story-copy {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 18px;
}

.li-role-card,
.li-story-narration,
.li-focus-prompt {
  margin: 0;
}

.li-role-card {
  color: color-mix(in srgb, var(--ok) 78%, var(--ink));
  font-size: 11px;
  font-weight: 700;
}

.li-story-narration {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.li-focus-prompt {
  padding-left: 9px;
  border-left: 2px solid var(--tone-plum);
  color: var(--ink-mid);
  font-size: 12px;
  line-height: 1.2;
}

/* Shared labs */
.li-lab-grid {
  display: grid;
  grid-template-columns: minmax(145px, 0.36fr) minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  min-height: 0;
}

.li-observation-tray,
.li-workspace,
.li-case-board,
.li-operation-bench,
.li-simulation,
.li-teachback,
.li-transfer-lab,
.li-notice-grid,
.li-movement-cards,
.li-studio-list,
.li-overlay-lab,
.li-inquiry-list {
  min-width: 0;
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.li-observation-tray {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  overflow: auto;
}

.li-observation-tray > .li-mini-label {
  width: 100%;
}

.li-observation {
  display: grid;
  align-content: center;
  min-width: 76px;
  max-width: 100%;
  padding: 5px 8px;
  border-color: var(--line-input);
  background: var(--chip-bg);
  text-align: left;
}

.li-observation.is-selected,
.li-data-row.is-selected,
.li-repair-card.is-selected,
.li-idea-card.is-selected,
.li-choice-card.is-selected,
.li-term-chip.is-selected,
.li-reason-chip.is-selected,
.li-tool-tab.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-card);
}

.li-observation-value {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.li-observation-state {
  overflow: hidden;
  color: var(--ink-mid);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.li-workspace {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 8px 10px;
  overflow: auto;
}

.li-workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.li-unit-pill {
  padding: 3px 7px;
  border-radius: var(--radius-chip);
  color: var(--primary-pill-ink);
  background: var(--primary-pill-bg);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-axis,
.li-plot-axis {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(44px, 1fr);
  align-items: end;
  min-width: max-content;
  padding-top: 8px;
}

.li-axis::before,
.li-plot-axis::before {
  content: "";
  position: absolute;
  left: 21px;
  right: 21px;
  bottom: 21px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink-soft);
}

.li-axis-button,
.li-plot-column {
  position: relative;
  display: grid;
  place-items: end center;
  min-width: 44px;
  padding: 4px 3px;
  border-color: transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-mid);
  background: transparent;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.li-axis-button::before,
.li-plot-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 2px;
  height: 12px;
  background: var(--ink-muted);
  transform: translateX(-50%);
}

.li-axis-occupancy {
  position: absolute;
  left: 50%;
  bottom: 31px;
  display: grid;
  place-items: center;
  min-width: 18px;
  min-height: 18px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--tone-teal-soft);
  box-shadow: inset 0 0 0 1px var(--tone-teal);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}

.li-axis-button.is-endpoint-stop {
  border: 2px solid var(--primary);
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: var(--shadow-soft);
}

.li-axis-button.is-endpoint-stop .li-axis-occupancy {
  opacity: 0;
}

.li-axis-stop-marker {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 31px;
  display: grid;
  min-width: 42px;
  min-height: 18px;
  place-items: center;
  padding: 2px 4px;
  border: 2px solid var(--surface);
  border-radius: 5px 5px 5px 1px;
  color: #fff;
  background: var(--primary);
  box-shadow: var(--shadow-soft);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
}

.li-plot-column {
  min-height: 92px;
}

.li-plot-tick {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  width: 100%;
  min-height: 30px;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}

.li-mark-stack {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 32px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  transform: translateX(-50%);
}

.li-x-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--tone-blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.li-diagnostic-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

.li-bridge-copy {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-mini-plot {
  display: flex;
  align-items: end;
  min-width: 60px;
}

/* Inquiry and overlay */
.li-inquiry-stage,
.li-inquiry-workspace,
.li-inquiry-model,
.li-fraction-inquiry,
.li-measure-locate-scene,
.li-fraction-operation-inquiry {
  display: grid;
  min-width: 0;
  min-height: 0;
}

.li-inquiry-stage {
  align-self: start;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 6px;
  height: max-content;
  min-height: min-content;
  padding: 8px;
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.li-inquiry-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.li-server-reveal {
  display: grid;
  gap: 3px;
  padding: 6px 9px;
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
}

.li-prediction-choices,
.li-prediction-options,
.li-prediction-axis,
.li-inquiry-objects,
.li-tile-controls,
.li-equivalent-tag-tray,
.li-strip-transform-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}

.li-prediction-options.is-dense {
  display: grid;
  flex: 1 1 100%;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr));
  align-items: stretch;
  overflow: visible;
}

.li-prediction-choices.is-dense {
  display: block;
  overflow: visible;
}

.li-prediction-options.is-dense .li-choice-card {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.li-prediction-choices {
  align-items: stretch;
  padding: 5px;
  border: 1px dashed var(--ink-faint);
  border-radius: 12px;
  background: var(--surface-sunken);
}

.li-prediction-number {
  display: flex;
  align-items: center;
  gap: 8px;
}

.li-count-bracket-guidance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid var(--tone-teal-line);
  border-radius: var(--radius-input);
  background: var(--tone-teal-soft);
}

.li-count-bracket-guidance-copy {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.2;
}

.li-fraction-strict-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--tone-amber-line);
  border-radius: var(--radius-input);
  background: var(--tone-amber-soft);
}

.li-fraction-strict-rule-copy {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.li-prediction-axis .li-axis-button {
  border-color: var(--ink-faint);
}

.li-prediction-order {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.li-prediction-order-item {
  padding: 5px 8px;
  border-radius: var(--radius-chip);
  color: var(--primary-pill-ink);
  background: var(--primary-pill-bg);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-inquiry-workspace {
  grid-auto-rows: max-content;
  height: max-content;
  gap: 5px;
}

.li-inquiry-model,
.li-fraction-inquiry,
.li-measure-locate-scene,
.li-fraction-operation-inquiry {
  grid-auto-rows: max-content;
  height: max-content;
  gap: 6px;
}

.li-inquiry-objects {
  min-height: 44px;
  overflow-y: hidden;
}

.li-inquiry-objects .li-observation {
  flex: 0 0 auto;
}

.li-prediction-evidence {
  display: grid;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--surface-sunken);
}

.li-prediction-evidence-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.li-prediction-evidence-copy {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
}

.li-prediction-operation-plot {
  min-height: 124px;
  margin-inline: 22px;
}

.li-prediction-evidence-mark {
  display: grid;
  place-items: center;
  cursor: default;
  pointer-events: none;
}

.li-prediction-evidence-mark.is-accepted {
  color: var(--tone-amber);
  box-shadow: inset 0 0 0 2px var(--tone-amber);
}

.li-prediction-mark-number {
  position: absolute;
  top: 2px;
  right: 1px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: var(--radius-chip);
  color: #fff;
  background: var(--primary);
  font-size: 9px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.li-prediction-fraction-receipts {
  display: grid;
  gap: 3px;
}

.li-prediction-fraction-receipt {
  display: grid;
  grid-template-columns: 48px minmax(120px, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.li-prediction-receipt-label,
.li-prediction-receipt-endpoint {
  color: var(--primary-pill-ink);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.li-prediction-receipt-run {
  display: flex;
  min-height: 22px;
  overflow: hidden;
  border-right: 2px solid var(--tone-rose);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}

.li-prediction-receipt-tile {
  flex: 0 0 var(--li-tile-share);
  display: grid;
  min-width: 0;
  place-items: center;
  border-right: 1px solid var(--surface);
  color: #fff;
  background: var(--tone-blue);
  font-size: 9px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.li-fraction-rail-scene {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.li-whole-track {
  display: flex;
  justify-content: space-between;
  min-height: 22px;
  border-bottom: 4px solid var(--ink-soft);
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(12.5% - 1px),
    var(--ink-muted) calc(12.5% - 1px) 12.5%
  );
}

.li-rail-endpoint {
  color: var(--ink-mid);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-half-target {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 50%;
  min-height: 20px;
  padding: 3px 6px;
  border: 1px dashed var(--tone-amber);
  border-radius: 7px;
  color: var(--primary-pill-ink);
  background: var(--tone-amber-soft);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-half-target-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-half-target-pin {
  flex: 0 0 auto;
  padding-left: 5px;
  border-left: 2px solid var(--tone-rose);
  color: var(--tone-rose);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li-preserved-tile-comparison {
  display: grid;
  gap: 3px;
}

.li-preserved-tile-run {
  display: flex;
  width: 50%;
  min-width: 0;
  min-height: 20px;
  overflow: hidden;
  border-right: 2px solid var(--tone-rose);
  border-radius: 5px;
}

.li-preserved-fraction-tile {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--surface);
  color: #fff;
  background: var(--tone-blue);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-equivalence-receipt {
  padding: 4px 7px;
  border-left: 3px solid var(--ok);
  border-radius: 7px;
  color: var(--ink);
  background: var(--ok-soft);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-fraction-tile-run {
  display: flex;
  width: 100%;
  min-height: 30px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-input);
}

.li-active-tile-construction {
  position: relative;
  min-height: 30px;
}

.li-fraction-tile {
  flex: 0 0 calc(var(--li-tile-eighths) * 12.5%);
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid var(--surface);
  color: #fff;
  background: var(--primary);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-tile-endpoint {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  left: clamp(0%, calc(var(--li-endpoint-eighths) * 12.5%), 100%);
  padding: 2px 5px;
  border-left: 2px solid var(--tone-rose);
  color: var(--tone-rose);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li-overlay-strips {
  display: grid;
  gap: 4px;
}

.li-overlay-strip {
  width: var(--li-strip-end);
  min-width: 34px;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: width 220ms ease;
}

.li-overlay-strip:not(.is-placed) {
  border: 1px dashed var(--ink-muted);
  color: var(--ink);
  background: var(--surface-quiet);
}

.li-axis.is-reference-only .li-axis-button:disabled {
  cursor: default;
  opacity: 1;
}

.li-overlay-strip.is-half {
  background: var(--tone-blue-soft);
  box-shadow: inset 0 0 0 1px var(--tone-blue);
}

.li-overlay-strip.is-four-eighths {
  background: var(--tone-plum-soft);
  box-shadow: inset 0 0 0 1px var(--tone-plum);
}

.li-source-trace,
.li-accepted-relations,
.li-semantic-summary {
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: var(--surface-sunken);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.li-source-trace {
  border-left: 3px solid var(--li-amber);
  color: var(--li-ink);
}

.li-mark-referent-line {
  border-color: var(--li-mint);
}

.li-semantic-summary {
  overflow: hidden;
  color: var(--ink-mid);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-bracket-fold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
}

.li-source-id-ribbon {
  overflow: hidden;
  padding: 7px;
  border: 1px dashed var(--li-amber);
  border-radius: 9px;
  color: color-mix(in srgb, var(--li-amber) 76%, var(--ink));
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-folded-count,
.li-joined-strip-result {
  padding: 7px 9px;
  border-radius: 9px;
  color: #fff;
  background: color-mix(in srgb, var(--li-mint) 80%, var(--ink));
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.li-strip-transform-controls.is-join-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.li-strip-transform-controls.is-join-layout > .li-button,
.li-strip-transform-controls.is-join-layout > .li-joined-strip-result,
.li-strip-transform-controls.is-join-layout > .li-joined-strip-rail {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.li-strip-transform-controls.is-join-layout > .li-button {
  line-height: 1.15;
  white-space: normal;
}

.li-strip-transform-controls.is-join-layout > .li-joined-strip-result {
  display: grid;
  place-items: center;
  overflow-wrap: anywhere;
  text-align: center;
}

.li-strip-transform-controls.is-join-layout > .li-joined-strip-rail {
  grid-column: 1 / -1;
}

.li-source-strip-board {
  display: grid;
  gap: 4px;
}

.li-prediction-source-strip-board {
  padding-top: 5px;
  border-top: 1px solid var(--line);
}

.li-source-strip-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.38fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.li-zero-excess-model {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.li-zero-excess-rail {
  position: relative;
  min-height: 25px;
  overflow: hidden;
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  background: var(--surface-sunken);
}

.li-zero-source-length {
  display: grid;
  width: var(--li-source-length);
  min-width: 34px;
  min-height: 25px;
  place-items: center;
  color: #fff;
  background: var(--li-cyan);
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.li-zero-excess-benchmark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--li-zero-benchmark);
  border-left: 2px dashed var(--li-rose);
  box-shadow: 0 0 0 1px var(--paper);
}

.li-zero-excess-proof {
  color: color-mix(in srgb, var(--li-amber) 76%, var(--ink));
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.li-strip-source {
  color: var(--li-cyan);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.li-strip-referent {
  color: color-mix(in srgb, var(--li-amber) 76%, var(--ink));
  text-align: center;
}

.li-detached-strip {
  display: block;
  width: max(34px, var(--li-strip-width));
  min-height: 25px;
  padding: 5px 7px;
  border-radius: 6px;
  color: #fff;
  background: var(--li-cyan);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li-positive-excess-model {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.li-excess-equation {
  color: color-mix(in srgb, var(--li-amber) 76%, var(--ink));
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.li-detached-strip.is-partitioned {
  background: repeating-linear-gradient(
    90deg,
    var(--li-cyan) 0 calc(var(--li-strip-cell) - 2px),
    var(--paper) calc(var(--li-strip-cell) - 2px) var(--li-strip-cell)
  );
}

.li-joined-strip-rail {
  display: flex;
  width: 100%;
  min-height: 32px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.li-joined-strip-segment {
  flex: 0 0 var(--li-joined-share);
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border-right: 2px solid var(--paper);
  color: #fff;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--li-mint) 80%, var(--ink)) 0 calc(var(--li-joined-cell) - 1px),
    color-mix(in srgb, var(--li-mint) 25%, var(--paper)) calc(var(--li-joined-cell) - 1px) var(--li-joined-cell)
  );
  font-size: 8px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-joined-strip-segment:last-child {
  border-right: 0;
}

.li-active-help {
  align-self: start;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto;
  grid-auto-rows: max-content;
  align-items: center;
  gap: 7px;
  height: max-content;
  min-height: 38px;
  overflow: hidden;
  padding: 5px 9px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-input);
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 var(--warn);
}

.li-body.has-active-help {
  align-content: start;
  grid-auto-rows: max-content;
}

.li-help-effect-copy,
.li-help-metrics,
.li-help-relationship-map {
  color: var(--li-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}

.li-help-metrics,
.li-help-relationship-map {
  padding: 4px 7px;
  border-radius: var(--radius-chip);
  color: var(--primary-pill-ink);
  background: var(--primary-pill-bg);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.is-help-target {
  outline: 3px solid var(--primary) !important;
  outline-offset: 2px;
}

[data-help-target~="line-plot:observation-marks"].is-help-target {
  outline-color: var(--tone-blue) !important;
  background: var(--tone-blue-soft);
}

[data-help-target~="line-plot:axis-furniture"].is-help-target {
  outline-color: var(--tone-amber) !important;
  background: var(--tone-amber-soft);
}

.li-executable-help-model {
  grid-column: 1 / -1;
  min-width: 0;
}

.li-help-ghost-placement,
.li-help-source-axis-link,
.li-help-pair-lines,
.li-help-whole-endpoints,
.li-help-adjacent-interval,
.li-help-object-legend,
.li-help-sentence-frame {
  display: flex;
  align-items: center;
  gap: 6px;
}

.li-help-ghost-placement {
  position: relative;
  padding: 5px 7px;
  border: 1px dashed var(--tone-amber);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.li-help-source-axis-link {
  padding: 5px 7px;
  border: 1px dashed var(--tone-blue);
  border-radius: var(--radius-sm);
  background: var(--tone-blue-soft);
}

.li-help-ghost-source,
.li-help-ghost-destination,
.li-help-pair-line,
.li-help-target-receipt {
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-help-ghost-tether,
.li-help-pair-line {
  color: color-mix(in srgb, var(--li-amber) 88%, var(--ink));
}

.li-help-ghost-destination {
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--li-cyan);
}

.li-help-ghost-destination.is-strip {
  width: max(48px, calc(var(--li-help-strip-eighths) * 18px));
  background: color-mix(in srgb, var(--li-mint) 80%, var(--ink));
}

.li-help-ghost-badge {
  margin-left: auto;
  color: var(--li-muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.li-help-block-vessels {
  display: flex;
  align-items: end;
  gap: 5px;
  overflow-x: auto;
}

.li-help-block-vessel {
  display: grid;
  gap: 3px;
  min-width: 62px;
  padding: 4px;
  border: 1px solid var(--ink-muted);
  border-radius: 7px 7px 12px 12px;
  background: var(--surface-sunken);
}

.li-help-eighth-blocks {
  display: flex;
  align-content: end;
  flex-wrap: wrap-reverse;
  gap: 1px;
  min-height: 22px;
}

.li-help-eighth-block {
  width: 8px;
  height: 8px;
  border: 1px solid var(--surface);
  background: var(--li-cyan);
}

.li-help-block-label,
.li-help-live-meter {
  color: color-mix(in srgb, var(--li-mint) 72%, var(--ink));
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-help-pair-lines {
  flex-wrap: wrap;
}

.li-help-pair-line {
  padding: 3px 6px;
  border-radius: var(--radius-chip);
  background: var(--surface);
}

.li-help-partition-rail {
  display: flex;
  min-height: 28px;
  overflow: hidden;
  border: 2px solid var(--ink-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.li-help-partition-region {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--ink-muted);
  color: var(--ink-mid);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.li-help-partition-region.is-focused {
  color: #fff;
  background: var(--primary);
}

.li-help-same-scale-strips {
  display: grid;
  gap: 3px;
}

.li-help-half-strip,
.li-help-four-eighths-strip {
  width: 50%;
  min-width: 110px;
  padding: 4px 7px;
  border-radius: 5px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.li-help-half-strip { background: var(--li-cyan); }
.li-help-four-eighths-strip {
  background: repeating-linear-gradient(90deg, var(--li-violet) 0 calc(25% - 1px), var(--surface) calc(25% - 1px) 25%);
}

.li-help-common-unit-strips {
  display: grid;
  gap: 3px;
}

.li-help-common-unit-strip {
  display: block;
  width: max(42px, calc(var(--li-help-strip-eighths) * 18px));
  height: 17px;
  border: 1px solid var(--li-cyan);
  border-radius: 4px;
  background: var(--surface-sunken);
}

.li-help-common-unit-segment {
  display: block;
  width: 18px;
  height: 100%;
  background: var(--primary);
}

.li-help-whole-endpoints {
  width: 100%;
}

.li-help-endpoint {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--primary-deep);
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.li-help-whole-line {
  flex: 1;
  border-bottom: 3px solid var(--ink-soft);
  color: var(--ink-mid);
  font-size: 8px;
  font-weight: 700;
  text-align: center;
}

.li-help-adjacent-interval {
  width: min(230px, 100%);
  color: var(--ink-muted);
}

.li-help-axis-tick {
  font-size: 24px;
}

.li-help-axis-bracket {
  flex: 1;
  padding: 3px 5px;
  border-top: 2px solid var(--primary);
  color: var(--primary);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.li-help-deck-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.li-help-deck-card {
  padding: 4px 6px;
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-sm);
  color: var(--li-ink);
  background: var(--surface);
  font-size: 8px;
  font-weight: 700;
}

.li-help-observation-swatch,
.li-help-axis-swatch,
.li-help-sentence-slot {
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  color: var(--li-ink);
  background: var(--surface);
  font-size: 9px;
  font-weight: 700;
}

.li-help-observation-swatch { border: 2px solid var(--li-cyan); }
.li-help-axis-swatch { border: 2px solid var(--li-amber); }
.li-help-sentence-slot {
  border-bottom: 2px solid var(--primary);
  color: var(--primary);
}

.li-inquiry-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.li-inquiry-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 7px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border-radius: var(--radius-input);
  background: var(--surface-sunken);
}

.li-inquiry-query,
.li-inquiry-action {
  margin: 0;
  line-height: 1.12;
}

.li-inquiry-query {
  color: var(--li-ink);
  font-size: 12px;
  font-weight: 700;
}

.li-inquiry-action {
  color: var(--ink-mid);
  font-size: 10px;
}

.li-inquiry-step .li-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 96px;
}

.li-overlay-lab {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 11px;
}

.li-fraction-strips {
  display: grid;
  gap: 5px;
}

.li-fraction-strip {
  position: relative;
  height: 28px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--tone-blue) 75%, var(--paper));
  border-radius: var(--radius-sm);
  color: #fff;
  background: linear-gradient(90deg, var(--li-cyan) 50%, var(--surface-sunken) 50%);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-eighth-strip {
  color: var(--ink);
  background: linear-gradient(90deg, var(--li-violet) calc(var(--li-strip-parts) * 12.5%), var(--surface-sunken) 0);
}

/* Error detective */
.li-case-board {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

.li-case-intro {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--tone-amber-line);
  border-radius: var(--radius-input);
  background: var(--tone-amber-soft);
}

.li-case-title {
  color: color-mix(in srgb, var(--li-amber) 76%, var(--ink));
  font-size: 11px;
}

.li-case-description {
  min-width: 0;
  margin: 0;
  color: var(--ink-mid);
  font-size: 10px;
  line-height: 1.15;
}

.li-case-fault-count {
  padding: 3px 7px;
  border-radius: var(--radius-chip);
  color: var(--tone-rose);
  background: var(--tone-rose-soft);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li-audit-visual {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(250px, 0.95fr) auto minmax(280px, 1.05fr);
  align-items: center;
  gap: 5px;
  padding: 8px;
  border-radius: var(--radius-input);
  background: var(--surface-sunken);
}

.li-audit-bank {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.li-glyph-row,
.li-detective-plot,
.li-audit-checks,
.li-repair-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
}

.li-source-object {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid var(--tone-blue);
  border-radius: var(--radius-sm);
  color: var(--li-cyan);
  background: var(--tone-blue-soft);
  cursor: pointer;
  touch-action: manipulation;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-source-object.is-selected {
  border-color: var(--primary);
  color: #fff;
  background: var(--primary);
  box-shadow: none;
}

.li-detective-column {
  position: relative;
  display: grid;
  place-items: end center;
  min-width: 44px;
  min-height: 62px;
  padding-bottom: 3px;
  border: 1px solid transparent;
  border-bottom: 2px solid var(--ink-soft);
  border-radius: 8px 8px 2px 2px;
  background: var(--surface);
}

.li-detective-column.is-selected {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary), inset 0 -2px 0 var(--primary);
}

.li-detective-column .li-mark-stack {
  bottom: 18px;
}

.li-detective-mark {
  position: relative;
}

.li-detective-mark-source {
  position: absolute;
  top: -3px;
  right: -7px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: var(--radius-chip);
  /* 9px glyph: white on solid --tone-amber is 4.46:1, just under the 4.5 small-text
     floor. Dark ink on the pale amber reads at 11.3:1 and still says "amber source". */
  color: var(--ink);
  background: var(--tone-amber-line);
  font-size: 9px;
  font-weight: 900;
  text-shadow: none;
}

.li-detective-position {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-detective-placement-draft,
.li-detective-placement-receipt {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.li-detective-placement-draft {
  border: 1px dashed var(--tone-amber);
  color: var(--ink);
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 var(--tone-amber);
}

.li-detective-placement-receipt {
  border: 1px solid var(--ok);
  color: var(--ink);
  background: var(--ok-soft);
  box-shadow: inset 3px 0 0 var(--ok);
}

.li-repair-actions {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.li-equivalence-final-proof {
  display: grid;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.li-equivalence-proof-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.li-equivalence-proof-label {
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.li-equivalence-proof-track {
  position: relative;
  display: block;
  height: 21px;
  border-bottom: 2px solid var(--ink-soft);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(12.5% - 1px),
      var(--ink-muted) calc(12.5% - 1px) 12.5%
    )
    var(--surface);
}

.li-equivalence-proof-zero,
.li-equivalence-proof-endpoint {
  position: absolute;
  bottom: -2px;
  z-index: 2;
  color: var(--ink-mid);
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.li-equivalence-proof-zero {
  left: 0;
  color: var(--ink);
  background: var(--surface);
  transform: translateX(-2px);
}

.li-equivalence-proof-endpoint {
  left: var(--li-proof-end);
  color: var(--li-rose);
  transform: translateX(3px);
}

.li-equivalence-proof-run {
  position: absolute;
  inset: 0 auto 2px 0;
  display: flex;
  width: var(--li-proof-end);
  overflow: hidden;
  border-right: 2px solid var(--li-rose);
  border-radius: 4px 0 0 4px;
}

.li-equivalence-proof-tile {
  flex: 1 1 0;
  display: grid;
  min-width: 0;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  background: var(--li-cyan);
  font-size: 8px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.li-equivalence-proof-row.is-fixed-half .li-equivalence-proof-tile {
  background: var(--li-violet);
}

.li-equivalent-tag-map {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(3, 20px);
  min-height: 60px;
  border-top: 1px dashed var(--tone-amber-line);
  padding-inline: 4px;
}

.li-equivalent-tag-pin {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 18px;
  min-width: max-content;
  padding: 2px 4px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-chip);
  color: var(--primary-pill-ink);
  background: var(--primary-pill-bg);
  font-size: 9px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.li-equivalent-tag-tether {
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: calc(5px + var(--li-tag-row) * 20px);
  border-left: 2px solid var(--primary);
  pointer-events: none;
}

.li-equivalent-tag-pin-label {
  position: relative;
  z-index: 1;
}

.li-server-consequence {
  grid-column: 1 / -1;
  padding: 5px 8px;
  border-left: 3px solid var(--li-violet);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: var(--tone-plum-soft);
  font-size: 10px;
  font-weight: 700;
}

.li-audit-checks {
  grid-column: 1 / -1;
}

.li-audit-bank {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.li-glyph-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px;
  color: var(--li-cyan);
}

.li-source-glyph {
  color: color-mix(in srgb, var(--tone-teal) 72%, var(--ink));
  font-size: 13px;
}

.li-transform-arrow {
  color: var(--li-violet);
  font-size: 20px;
}

.li-repair-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.li-repair-card,
.li-idea-card,
.li-choice-card,
.li-reason-chip {
  padding: 7px 9px;
  background: var(--surface);
  font-size: 11px;
  line-height: 1.1;
  text-align: left;
}

/* Operation bench */
.li-operation-bench {
  display: grid;
  grid-template-rows: auto minmax(82px, 1fr) auto;
  gap: 6px;
  padding: 7px 9px;
}

.li-tool-tabs {
  overflow-x: auto;
}

.li-tool-tab {
  min-height: 38px;
  padding: 5px 10px;
  background: var(--chip-bg);
  font-size: 11px;
}

.li-operation-rule-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--tone-rose-line);
  border-radius: var(--radius-chip);
  color: var(--tone-rose);
  background: var(--tone-rose-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.li-operation-plot {
  position: relative;
  min-height: 124px;
  margin: 0 20px;
}

.li-operation-plot::before {
  content: none;
}

.li-operation-plot::after {
  content: none;
}

.li-operation-axis-ticks {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18px;
  border-top: 3px solid var(--ink-soft);
  color: var(--ink-mid);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.li-operation-axis-tick {
  position: absolute;
  top: 5px;
  left: var(--li-tick-position);
  text-align: center;
  transform: translateX(-50%);
}

.li-operation-axis-tick:first-child {
  text-align: left;
  transform: none;
}

.li-operation-axis-tick:last-child {
  text-align: right;
  transform: translateX(-100%);
}

.li-operation-axis-tick::before {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 6px;
  background: var(--ink-muted);
  content: "";
}

.li-operation-axis-tick:first-child::before {
  left: 0;
}

.li-operation-axis-tick:last-child::before {
  left: 100%;
}

.li-operation-mark {
  position: absolute;
  z-index: 3;
  left: var(--li-mark-position);
  bottom: calc(18px + var(--li-mark-stack) * 44px);
  min-width: 44px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--li-cyan);
  font-size: 27px;
  line-height: 1;
  transform: translateX(-50%);
}

.li-operation-mark.is-selected {
  border-color: var(--li-amber);
  color: #fff;
  background: var(--li-amber);
}

.li-operation-mark.is-span-endpoint {
  border-color: var(--li-mint);
  color: var(--li-mint);
  background: var(--tone-teal-soft);
  box-shadow: 0 0 0 2px var(--li-mint);
}

.li-threshold-line {
  position: absolute;
  z-index: 1;
  left: var(--li-threshold-position);
  bottom: 18px;
  height: calc(100% - 18px);
  border-left: 1px dashed var(--li-rose);
}

.li-threshold-label {
  position: absolute;
  top: 20px;
  left: 4px;
  padding: 2px 5px;
  border-radius: var(--radius-chip);
  color: #fff;
  background: var(--li-rose);
  font-size: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li-transform-tray {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.li-operation-bracket,
.li-operation-span {
  position: absolute;
  z-index: 4;
  top: 1px;
  left: var(--li-bracket-left, var(--li-span-left));
  right: var(--li-bracket-right, var(--li-span-right));
  min-width: 16px;
  height: 15px;
  border-top: 3px solid var(--li-amber);
  pointer-events: none;
}

.li-operation-bracket::before,
.li-operation-bracket::after,
.li-operation-span::before,
.li-operation-span::after {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 15px;
  border-radius: 3px;
  background: var(--li-amber);
  content: "";
}

.li-operation-bracket::before,
.li-operation-span::before {
  left: 0;
}

.li-operation-bracket::after,
.li-operation-span::after {
  right: 0;
}

.li-operation-bracket-count,
.li-operation-span-equation {
  position: absolute;
  top: 3px;
  left: 50%;
  bottom: auto;
  padding: 2px 6px;
  border-radius: var(--radius-chip);
  color: #fff;
  background: color-mix(in srgb, var(--li-amber) 90%, var(--ink));
  font-size: 9px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
}

.li-operation-bracket-tether {
  position: absolute;
  z-index: 2;
  top: 16px;
  bottom: calc(19px + var(--li-tether-stack) * 44px);
  left: var(--li-tether-position);
  border-left: 1px dashed var(--li-amber);
  transform: translateX(calc(-50% + var(--li-tether-stack) * 2px));
}

.li-operation-span {
  border-top-color: var(--li-mint);
}

.li-operation-span::before,
.li-operation-span::after,
.li-operation-span-equation {
  background: var(--li-mint);
}

.li-operation-span-equation {
  top: -4px;
  background: color-mix(in srgb, var(--li-mint) 80%, var(--ink));
}

.li-operation-span.is-awaiting-endpoint {
  right: auto;
  width: 18px;
  border-top-style: dashed;
}

.li-operation-count-model,
.li-operation-span-model,
.li-operation-expression,
.li-operation-transform-prompt {
  display: block;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--tone-teal-line);
  border-radius: var(--radius-sm);
  color: var(--li-ink);
  background: var(--tone-teal-soft);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-operation-strip-board {
  display: grid;
  gap: 4px;
  max-height: 167px;
  overflow: auto;
}

.li-operation-strip-row {
  display: grid;
  grid-template-columns: minmax(118px, 0.33fr) 28px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  background: var(--tone-blue-soft);
}

.li-operation-strip-source {
  overflow: hidden;
  color: var(--li-cyan);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-operation-strip-referent {
  color: color-mix(in srgb, var(--li-amber) 76%, var(--ink));
  font-size: 13px;
  text-align: center;
}

.li-operation-detached-strip {
  display: grid;
  place-items: center;
  width: max(38px, var(--li-strip-width));
  min-height: 27px;
  border: 1px solid var(--tone-blue);
  border-radius: 6px;
  color: #fff;
  background-color: var(--li-cyan);
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), #fff 0);
  background-position: 0;
  background-size: calc(100% / var(--li-strip-eighths)) 100%;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li-operation-expression {
  border-color: color-mix(in srgb, var(--li-mint) 80%, var(--ink));
  color: #fff;
  background: color-mix(in srgb, var(--li-mint) 80%, var(--ink));
  text-align: center;
}

.li-metric-pill {
  display: grid;
  gap: 2px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
}

.li-metric-value {
  overflow: hidden;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Redistribution */
.li-simulation {
  display: grid;
  grid-template-columns: minmax(100px, 0.25fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 8px 10px;
}

.li-simulation > .li-prediction {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.li-reservoir-model {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

.li-shared-tank {
  position: relative;
  width: 94px;
  height: 116px;
  overflow: hidden;
  border: 2px solid var(--ink-muted);
  border-radius: 8px 8px 20px 20px;
  background: var(--surface-sunken);
  box-shadow: var(--shadow-soft);
}

.li-tank-title {
  position: absolute;
  z-index: 3;
  top: 3px;
  right: 4px;
  left: 4px;
  display: grid;
  min-height: 18px;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  color: var(--ink);
  background: var(--surface);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.li-tank-regions {
  position: absolute;
  top: 23px;
  right: 3px;
  bottom: 4px;
  left: 3px;
  display: grid;
  grid-template-rows: repeat(var(--li-region-count), minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ink-muted);
  border-radius: 4px 4px 14px 14px;
}

.li-tank-region {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  border-top: 1px solid var(--surface);
  color: #fff;
  background: var(--tone-blue);
  transition: color 180ms ease, background 180ms ease, opacity 180ms ease;
}

.li-tank-region:first-child {
  border-top: 0;
}

.li-tank-region.is-routed {
  color: var(--ink-mid);
  border-top-color: var(--ink-muted);
  background:
    repeating-linear-gradient(-45deg, rgba(43, 32, 20, 0.05) 0 4px, rgba(43, 32, 20, 0.12) 4px 6px),
    var(--surface-sunken);
}

.li-tank-region-amount {
  overflow: hidden;
  padding-inline: 2px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.li-region-field,
.li-phase-controls,
.li-phase-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.li-region-field {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

.li-region-field .li-number-input:disabled {
  color: var(--ink-muted);
  opacity: 1;
  -webkit-text-fill-color: var(--ink-muted);
  border-color: var(--line-input);
  background: var(--surface-quiet);
}

.li-partition-equation {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  background: var(--surface-sunken);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.li-partition-equation strong {
  color: var(--ink);
}

.li-refill-map {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-sunken);
}

.li-refill-map-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 11px;
}

.li-refill-map-progress {
  padding: 3px 7px;
  border: 1px solid var(--tone-teal);
  border-radius: 999px;
  color: color-mix(in srgb, var(--tone-teal) 72%, var(--ink));
  background: var(--tone-teal-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.li-region-routes {
  display: grid;
  grid-template-columns: repeat(var(--li-route-count), minmax(140px, 1fr));
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  list-style: none;
}

.li-region-route-item {
  min-width: 0;
}

.li-region-route {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 78px;
  grid-template-rows: auto 10px auto auto;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--line-card);
  border-radius: 9px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.li-region-route:hover,
.li-region-route:focus-visible {
  border-color: var(--primary-line);
  box-shadow: var(--focus-ring);
}

.li-region-route.is-complete {
  border-color: var(--tone-teal);
  background: var(--tone-teal-soft);
}

.li-region-route.is-waiting {
  border-style: dashed;
  color: var(--ink-muted);
  background: var(--surface-quiet);
  border-color: var(--line-input);
}

.li-region-route:disabled {
  cursor: default;
  opacity: 1 !important;
}

.li-route-source,
.li-route-destination {
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.li-route-source {
  color: var(--tone-blue);
}

.li-route-destination {
  color: var(--ink);
}

.li-route-connection {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.li-route-line {
  width: calc(100% - 7px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink-faint) 0 5px, transparent 5px 8px);
}

.li-route-arrow {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--ink-faint);
}

.li-region-route.is-complete .li-route-line {
  background: var(--tone-teal);
}

.li-region-route.is-complete .li-route-arrow {
  border-left-color: var(--tone-teal);
}

.li-route-status {
  justify-self: start;
  padding: 2px 4px;
  border-radius: 999px;
  color: var(--primary-pill-ink);
  background: var(--primary-pill-bg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.li-region-route.is-complete .li-route-status {
  color: color-mix(in srgb, var(--tone-teal) 72%, var(--ink));
  background: var(--surface);
}

.li-region-route.is-waiting .li-route-status {
  color: var(--ink-mid);
  background: var(--chip-bg);
}

.li-phase-indicator {
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--primary-pill-ink);
  background: var(--primary-pill-bg);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.li-phase-controls,
.li-conservation-meter {
  grid-column: 1 / -1;
  justify-content: center;
}

.li-phase-controls {
  flex-wrap: wrap;
}

.li-vessel-static {
  cursor: default;
}

.li-prediction,
.li-result-field,
.li-select-label {
  display: grid;
  align-content: center;
  gap: 4px;
}

.li-number-input,
.li-select {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-input);
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-number-input {
  width: 98px;
  padding: 6px 9px;
  color: var(--ink);
  opacity: 1;
  caret-color: var(--primary);
  -webkit-text-fill-color: var(--ink);
}

.li-select {
  padding: 5px 7px;
}

.li-vessels {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 7px;
  min-height: 96px;
}

.li-vessel {
  position: relative;
  width: 58px;
  height: 92px;
  overflow: hidden;
  border-radius: 9px 9px 18px 18px;
  border-color: var(--ink-muted);
  background: var(--surface-sunken);
}

.li-vessel.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.li-liquid {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  height: var(--li-liquid-level);
  border-radius: 5px 5px 14px 14px;
  background: var(--tone-blue);
  transition: height 220ms ease;
}

.li-vessel-value {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  padding: 3px 5px;
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.li-conservation-meter {
  color: color-mix(in srgb, var(--tone-teal) 72%, var(--ink));
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Teach-back */
.li-teachback {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

.li-explanation-path {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px;
  border-radius: var(--radius-input);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.li-drone {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--tone-teal);
  border-radius: var(--radius-card);
  color: var(--li-mint);
  background: var(--tone-teal-soft);
  font-size: 28px;
}

.li-drone-memory {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 19px;
  color: var(--li-ink);
  font-size: 10px;
  line-height: 1.1;
}

.li-memory-empty {
  color: var(--ink-mid);
  list-style: none;
}

.li-idea-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.li-proposition-slots {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.li-proposition-slot {
  min-height: 44px;
  padding: 5px 7px;
  border: 1px dashed var(--ink-muted);
  border-radius: var(--radius-sm);
  color: var(--ink-mid);
  background: var(--surface);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  text-align: left;
}

.li-proposition-slot.is-filled {
  border-style: solid;
  border-color: var(--primary);
  color: var(--li-ink);
  background: var(--primary-soft);
}

.li-proposition-meta,
.li-reflection-disclosure {
  margin: 0;
  color: var(--ink-mid);
  font-size: 9px;
  line-height: 1.1;
}

.li-reflection-disclosure {
  grid-column: 1 / -1;
  padding-top: 5px;
  border-top: 1px dashed var(--line-quiet);
}

/* Transfer */
.li-transfer-lab {
  display: grid;
  align-self: start;
  grid-template-rows: auto auto auto;
  gap: 6px;
  padding: 7px;
  overflow: visible;
}

.li-transfer-setup,
.li-transfer-work,
.li-transfer-operation {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.li-transfer-setup {
  grid-template-columns: minmax(0, 1fr) auto;
}

.li-transfer-work {
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
}

.li-transfer-operation {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.li-data-table {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  overflow: auto;
}

.li-data-row {
  padding: 5px 7px;
  background: var(--tone-blue-soft);
  font-size: 10px;
}

.li-vertical-plot {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 108px;
  border-left: 3px solid var(--ink-soft);
}

.li-vertical-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 2px 5px;
  border: 0;
  border-bottom: 1px solid var(--ink-muted);
  color: var(--li-ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.li-vertical-tick {
  color: var(--ink-mid);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.li-vertical-stack {
  display: flex;
  gap: 2px;
}

.li-transfer-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.li-choice-row {
  min-width: 0;
}

.li-choice-card {
  flex: 1;
  min-width: 100px;
  text-align: center;
}

.li-axis-controls {
  align-items: end;
}

.li-select-label .li-select {
  max-width: 118px;
  min-height: 44px;
}

.li-transfer-work {
  display: grid;
  grid-template-columns: minmax(130px, 0.3fr) minmax(0, 1fr);
  gap: 7px;
  min-height: 92px;
}

.li-data-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  overflow: auto;
}

.li-data-row {
  min-height: 44px;
  padding: 4px 6px;
  border-color: var(--tone-blue-line);
  background: var(--tone-blue-soft);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: left;
}

.li-transfer-plot {
  padding-block: 1px;
}

.li-transfer-plot .li-plot-column {
  min-height: 80px;
}

.li-axis-placeholder {
  display: grid;
  place-items: center;
  min-height: 80px;
  border: 1px dashed var(--ink-muted);
  border-radius: var(--radius-input);
  color: var(--ink-mid);
  background: var(--surface-sunken);
  font-size: 11px;
}

.li-transfer-operation {
  display: grid;
  grid-template-areas:
    "label label"
    "choices choices"
    "board board"
    "result equation"
    "reason reason";
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 0.55fr);
  align-items: start;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--li-line);
}

.li-transfer-operation > .li-mini-label {
  grid-area: label;
}

.li-transfer-operation > .li-term-choices {
  grid-area: choices;
}

.li-transfer-operation > .li-transfer-excess-board {
  grid-area: board;
}

.li-transfer-operation > .li-result-field {
  grid-area: result;
}

.li-transfer-operation > .li-transfer-excess-equation {
  grid-area: equation;
}

.li-transfer-operation > .li-reason-choices {
  grid-area: reason;
}

.li-term-choices,
.li-reason-choices {
  flex-wrap: wrap;
}

.li-transfer-operation > .li-term-choices {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 3px;
}

.li-term-chip,
.li-reason-chip {
  min-height: 44px;
  padding: 5px 8px;
  background: var(--chip-bg);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.li-result-field {
  grid-template-columns: auto auto;
}

.li-result-field .li-mini-label {
  grid-column: 1 / -1;
}

.li-result-field .li-number-input {
  width: 66px;
  min-height: 44px;
}

.li-result-field .li-select {
  min-height: 44px;
}

.li-transfer-excess-board {
  display: grid;
  gap: 2px;
  max-height: 182px;
  overflow: auto;
}

.li-transfer-excess-row {
  display: grid;
  grid-template-columns: minmax(118px, 0.36fr) 26px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid var(--tone-blue-line);
  border-radius: var(--radius-sm);
  background: var(--tone-blue-soft);
}

.li-transfer-excess-row.is-nonpositive {
  border-color: var(--tone-rose);
  background: var(--tone-rose-soft);
}

.li-transfer-excess-source {
  overflow: hidden;
  color: var(--li-cyan);
  font-size: 9px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-transfer-excess-referent {
  color: color-mix(in srgb, var(--li-amber) 76%, var(--ink));
  text-align: center;
}

.li-transfer-excess-model {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.li-transfer-source-strip {
  display: flex;
  width: var(--li-source-width);
  min-width: 0;
  height: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-sunken);
}

.li-transfer-threshold-piece,
.li-transfer-excess-piece {
  display: grid;
  flex: 0 0 var(--li-piece-share);
  place-items: center;
  min-width: 0;
  color: #fff;
  background: var(--li-cyan);
  font-size: 8px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.li-transfer-excess-piece {
  background: color-mix(in srgb, var(--li-amber) 80%, var(--ink));
}

.li-transfer-threshold-ghost {
  position: absolute;
  z-index: 2;
  top: -3px;
  bottom: 13px;
  left: 50%;
  border-left: 1px dashed var(--li-rose);
  color: var(--li-rose);
  font-size: 7px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.li-transfer-excess-term {
  overflow: hidden;
  color: var(--li-ink);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.li-transfer-excess-prompt,
.li-transfer-excess-equation {
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: var(--tone-plum-soft);
  font-size: 9px;
  font-weight: 750;
}

.li-transfer-excess-equation {
  color: #fff;
  background: color-mix(in srgb, var(--li-mint) 80%, var(--ink));
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Generic modalities and terminal */
.li-notice-grid,
.li-movement-cards,
.li-studio-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.li-movement-card,
.li-studio-card {
  padding: 8px;
  border-radius: var(--radius-input);
  color: var(--li-ink);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 11px;
}

.li-seated-alternative {
  margin: 0;
  padding: 8px;
  border-left: 3px solid var(--li-mint);
  color: var(--ink-mid);
  font-size: 11px;
}

.li-terminal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(260px, 1.2fr);
  min-height: 0;
  overflow: hidden;
}

.li-terminal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 18%, var(--surface) 40%);
}

.li-terminal-copy {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 20px;
  background: var(--surface);
}

.li-terminal-title {
  margin: 5px 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.li-terminal-message {
  margin: 0;
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.25;
}

.li-terminal-cta {
  margin-top: 12px;
}

.li-paused {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(260px, 1.2fr);
  min-height: 0;
  overflow: hidden;
}

.li-paused::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 18%, var(--surface) 40%);
}

.li-paused img,
.li-terminal img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.li-paused-copy {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 20px;
  background: var(--surface);
}

.li-paused-controls {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

/* 844 × 293 is the primary in-game surface. */
@media (min-width: 700px) and (max-height: 360px) {
  .learning-intervention,
  .learning-intervention-host {
    min-height: 293px;
  }

  .li-header {
    min-height: 58px;
    padding-block: 6px;
  }

  .li-body {
    padding-block: 7px;
  }

  .li-footer {
    min-height: 54px;
    padding-block: 5px;
  }

  .li-goal {
    font-size: 13px;
  }

  .li-action-prompt {
    font-size: 11px;
  }

  /* Keep both 44px tile controls fully above the in-game footer. The second
     workshop query also retains its earlier four-eighth proof at true scale. */
  .li-body.is-fraction-tile-workshop {
    padding-block: 3px;
  }

  .li-inquiry-stage.is-fraction-tile-workshop {
    gap: 2px;
    padding: 3px 8px;
  }

  .li-inquiry-stage.is-fraction-tile-workshop .li-inquiry-workspace,
  .li-inquiry-stage.is-fraction-tile-workshop .li-inquiry-model,
  .li-inquiry-stage.is-fraction-tile-workshop .li-fraction-inquiry {
    gap: 2px;
  }

  .li-inquiry-stage.is-fraction-tile-workshop .li-fraction-rail-scene {
    gap: 2px;
    min-height: 0;
    padding: 3px 10px;
  }

  .li-inquiry-stage.is-fraction-tile-workshop .li-whole-track {
    min-height: 18px;
  }

  .li-inquiry-stage.is-fraction-tile-workshop .li-active-tile-construction,
  .li-inquiry-stage.is-fraction-tile-workshop .li-fraction-tile-run {
    min-height: 26px;
  }

  .li-inquiry-stage.is-fraction-tile-workshop .li-preserved-tile-comparison {
    position: relative;
    display: block;
    min-height: 18px;
  }

  .li-inquiry-stage.is-fraction-tile-workshop .li-preserved-tile-comparison .li-mini-label {
    position: absolute;
    top: 3px;
    left: calc(50% + 8px);
    white-space: nowrap;
  }

  .li-inquiry-stage.is-fraction-tile-workshop .li-preserved-tile-run {
    width: 50%;
    min-height: 18px;
  }
}

@media (max-width: 699px) {
  .learning-intervention-host {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .learning-intervention {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .li-header {
    position: sticky;
    top: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .li-progress {
    display: none;
  }

  .li-header-controls .li-button-quiet {
    padding-inline: 8px;
  }

  .li-body,
  .li-body-story {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .li-body-story {
    grid-template-rows: minmax(160px, 0.8fr) auto;
  }

  .li-story-art {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .li-lab-grid,
  .li-case-board,
  .li-teachback,
  .li-transfer-work,
  .li-transfer-setup {
    grid-template-columns: 1fr;
  }

  .li-observation-tray {
    max-height: 150px;
  }

  .li-simulation {
    grid-template-columns: 1fr;
  }

  .li-simulation > .li-prediction,
  .li-reservoir-model,
  .li-region-field,
  .li-partition-equation,
  .li-refill-map,
  .li-phase-controls,
  .li-conservation-meter {
    grid-column: 1;
    grid-row: auto;
  }

  .li-vessels {
    flex-wrap: wrap;
  }

  .li-region-routes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .li-transfer-operation {
    grid-template-areas:
      "label"
      "choices"
      "board"
      "result"
      "equation"
      "reason";
    grid-template-columns: 1fr;
  }

  .li-axis-controls,
  .li-choice-row {
    flex-wrap: wrap;
  }

  .li-footer {
    position: sticky;
    z-index: 8;
    bottom: 0;
    grid-template-columns: 1fr;
    background: var(--paper);
  }

  .li-visible-status {
    white-space: normal;
  }

  .li-button-primary {
    width: 100%;
  }

  .li-active-help {
    align-self: start;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    height: max-content;
    min-height: max-content;
    overflow: hidden;
  }

  .li-body.has-active-help {
    align-content: start;
    grid-auto-rows: max-content;
  }

  .li-active-help > *,
  .li-executable-help-model {
    min-width: 0;
    max-width: 100%;
  }

  .li-help-metrics,
  .li-help-relationship-map {
    width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .li-help-half-strip,
  .li-help-four-eighths-strip,
  .li-help-common-unit-strip {
    width: 100%;
    min-width: 0;
  }

  .li-bracket-fold,
  .li-source-strip-row,
  .li-transfer-setup {
    grid-template-columns: 1fr;
  }

  .li-fraction-strict-rule,
  .li-strip-transform-controls.is-join-layout {
    grid-template-columns: 1fr;
  }

  .li-strip-transform-controls.is-join-layout > .li-joined-strip-rail {
    grid-column: 1;
  }

  .li-terminal,
  .li-paused {
    grid-template-columns: 1fr;
  }

  .li-terminal::after,
  .li-paused::after {
    background: linear-gradient(0deg, color-mix(in srgb, var(--surface) 94%, transparent) 18%, transparent 84%);
  }

  .li-terminal-copy,
  .li-paused-copy {
    grid-column: 1;
    align-self: end;
  }
}

@media (max-width: 420px) {
  .li-header {
    align-items: start;
    gap: 7px;
    padding: 6px 7px;
  }

  .li-eyebrow {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .li-title {
    display: -webkit-box;
    max-height: 2.25em;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.12;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .li-header-controls {
    gap: 4px;
  }

  .li-header-controls .li-button {
    padding-inline: 6px;
    font-size: 11px;
  }

  .li-body {
    gap: 8px;
    padding: 8px;
  }

  .li-active-help {
    gap: 5px;
    padding: 6px 7px;
  }

  .li-footer {
    padding: 6px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-intervention *,
  .learning-intervention *::before,
  .learning-intervention *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .learning-intervention,
  .li-mission-copy,
  .li-observation-tray,
  .li-workspace,
  .li-case-board,
  .li-operation-bench,
  .li-simulation,
  .li-teachback,
  .li-transfer-lab {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .li-progress-fill,
  .li-liquid {
    background: Highlight;
  }
}