:root {
  color-scheme: light;
  --font-ui: "Aptos", "Segoe UI Variable", "Segoe UI", "Inter", "Noto Sans", sans-serif;
  --font-data: "Aptos Mono", "Cascadia Mono", "SFMono-Regular", "Roboto Mono", monospace;
  --canvas: #eef1f4;
  --surface: #ffffff;
  --surface-muted: #f8f9fb;
  --surface-rail: #f3f5f7;
  --line: #d6dce3;
  --line-strong: #aeb8c4;
  --text: #17202a;
  --text-muted: #4e5b68;
  --text-subtle: #667382;
  --accent: #2f6f4e;
  --accent-hover: #275d42;
  --accent-pressed: #214d38;
  --accent-blue: #2952cc;
  --danger: #b42318;
  --warning: #8a4b00;
  --success: #1d6a43;
  --focus: #174ea6;
  --shadow-sm: 0 1px 2px rgb(18 28 45 / 0.08);
  --shadow-md: 0 12px 32px rgb(18 28 45 / 0.14);
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --topbar-height: 52px;
  --ribbon-height: 142px;
  --rail-width: 292px;
}

* {
  box-sizing: border-box;
}

html {
  min-block-size: 100%;
  background: var(--canvas);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-block-size: 100%;
  margin: 0;
  color: var(--text);
  background: var(--canvas);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 1000;
  padding: 10px 14px;
  color: #ffffff;
  background: var(--focus);
  border-radius: var(--radius-sm);
  transform: translateY(-140%);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  min-block-size: 100vh;
}

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--topbar-height);
  padding-inline: 14px 18px;
  color: var(--text);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 30px;
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent-pressed);
  border-radius: var(--radius-xs);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-kicker,
.section-label {
  margin: 0;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-lockup h1,
.login-card h2,
.workbook-topline h2,
.inspector h3 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-lockup h1 {
  font-size: 18px;
  line-height: 1.1;
}

.topbar-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-inline-size: 0;
}

.state-chip,
.version-chip,
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 28px;
  padding-inline: 10px;
  color: var(--text-muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  white-space: nowrap;
}

.state-chip::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  background: var(--warning);
  border-radius: 999px;
}

.state-chip[data-state="ready"]::before {
  background: var(--success);
}

.state-chip[data-state="error"]::before {
  background: var(--danger);
}

.login-panel {
  display: grid;
  place-items: center;
  min-block-size: calc(100vh - var(--topbar-height));
  padding: 24px;
}

.login-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  inline-size: min(860px, 100%);
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.login-card h2 {
  margin-block-start: 8px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
}

.panel-copy {
  max-inline-size: 520px;
  margin-block: 14px 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
}

.login-form {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.login-form label,
.field label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

input,
select {
  inline-size: 100%;
  min-block-size: 38px;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
}

input {
  padding-inline: 10px;
}

select {
  padding-inline: 10px 34px;
}

input:hover,
select:hover {
  border-color: #7f8a99;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
.drop-zone:focus-visible,
.sheet-scroller:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 72%, white);
  outline-offset: 2px;
}

.form-error {
  margin: 2px 0 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

.workspace {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-block-size: calc(100vh - var(--topbar-height));
  overflow: hidden;
  transition: grid-template-columns 220ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.workspace.rail-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.rail {
  display: flex;
  flex-direction: column;
  inline-size: var(--rail-width);
  min-inline-size: 0;
  min-block-size: calc(100vh - var(--topbar-height));
  overflow: hidden;
  background: var(--surface-rail);
  border-inline-end: 1px solid var(--line);
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 160ms ease, border-color 160ms ease;
}

.workspace.rail-collapsed .rail {
  pointer-events: none;
  opacity: 0;
  border-inline-end-color: transparent;
  transform: translateX(-100%);
}

.rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-block-size: 48px;
  padding-inline: 14px;
  border-block-end: 1px solid var(--line);
}

.rail-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.job-list {
  display: grid;
  gap: 6px;
  padding: 10px;
  overflow: auto;
}

.job-card {
  display: grid;
  gap: 5px;
  inline-size: 100%;
  padding: 10px 11px;
  text-align: start;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line);
  border-inline-start: 4px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.job-card:hover {
  border-color: var(--line-strong);
}

.job-card.is-active {
  border-inline-start-color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.job-card-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}

.job-card-meta,
.job-card-status,
.empty-panel span,
.ribbon-help,
.drop-zone p,
.validation-summary,
.formula-input {
  color: var(--text-muted);
  font-size: 13px;
}

.job-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  inline-size: 7px;
  block-size: 7px;
  flex: 0 0 auto;
  background: var(--text-subtle);
  border-radius: 999px;
}

.status-dot.ready {
  background: var(--success);
}

.status-dot.rejected,
.status-dot.error {
  background: var(--danger);
}

.status-dot.warning {
  background: var(--warning);
}

.empty-panel {
  display: grid;
  gap: 4px;
  margin: 10px;
  padding: 14px;
  color: var(--text);
  background: #ffffff;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.workbook {
  display: grid;
  /* topline, stage rail, ribbon, banner, then the active pane fills the rest. */
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  min-inline-size: 0;
  background: var(--canvas);
}

/* The active pane scrolls on its own so the ribbon and stages stay put. */
.pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-block-size: 0;
  padding-block-end: 16px;
  overflow-y: auto;
}

.pane:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

#paneData {
  gap: 0;
}

.workbook-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

.workbook-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}

.rail-toggle-button {
  flex: 0 0 auto;
}

.workbook-topline h2 {
  margin-block-start: 3px;
  font-size: 22px;
}

.period-readout {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.period-readout span {
  padding: 6px 10px;
  color: var(--text-muted);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
}

.ribbon {
  background: var(--surface);
  border-block-end: 1px solid var(--line-strong);
}

.ribbon-tabs {
  display: flex;
  align-items: end;
  gap: 2px;
  min-block-size: 34px;
  padding-inline: 12px;
  border-block-end: 1px solid var(--line);
}

.ribbon-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 30px;
  padding-inline: 14px;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-block-end: 0;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  font-size: 13px;
  font-weight: 700;
  transition: color 120ms ease, background-color 120ms ease;
}

.ribbon-tab:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.ribbon-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.ribbon-tab[aria-selected="true"] {
  color: var(--accent-pressed);
  background: var(--surface-muted);
  border-color: var(--line);
}

/* Count of produced artefacts; the number is the point, so it reads as data. */
.tab-count {
  min-inline-size: 18px;
  padding-inline: 5px;
  color: var(--surface);
  background: var(--accent);
  border-radius: 9px;
  font-family: var(--font-data);
  font-size: 11px;
  text-align: center;
}

.ribbon-groups {
  display: grid;
  grid-template-columns: minmax(420px, 1.4fr) minmax(280px, 0.9fr) minmax(280px, 0.9fr);
}

.ribbon-groups[data-pane="data"],
.ribbon-groups[data-pane="results"] {
  grid-template-columns: minmax(0, 1fr);
}

.ribbon-body {
  min-block-size: 106px;
  padding: 8px 12px;
}

.ribbon-group {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 6px 12px;
  border-inline-end: 1px solid var(--line);
}

.ribbon-group:last-child {
  border-inline-end: 0;
}

.ribbon-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 94px 96px auto;
  align-items: end;
}

.field {
  display: grid;
  gap: 5px;
  min-inline-size: 0;
}

.field-wide {
  min-inline-size: 180px;
}

.upload-group,
.validation-group {
  align-items: center;
  flex-wrap: wrap;
}

.ribbon-help {
  flex-basis: 100%;
  margin: -2px 0 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 38px;
  padding-inline: 14px;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  font-weight: 700;
  white-space: nowrap;
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
}

.button:hover:not(:disabled) {
  background: var(--surface-muted);
  border-color: #7f8a99;
}

.button:active:not(:disabled) {
  background: #e8ecef;
}

.button:disabled {
  color: #7b8794;
  background: #eef1f4;
  border-color: #d8dde3;
}

.button-primary {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent-pressed);
}

.button-primary:hover:not(:disabled) {
  color: #ffffff;
  background: var(--accent-hover);
  border-color: var(--accent-pressed);
}

.button-primary:active:not(:disabled) {
  color: #ffffff;
  background: var(--accent-pressed);
}

.button-secondary {
  color: var(--accent-pressed);
  background: #ffffff;
  border-color: var(--accent);
}

.button-secondary:hover:not(:disabled) {
  color: var(--accent-pressed);
  background: #f3f6f4;
  border-color: var(--accent-pressed);
}

.button-quiet {
  min-block-size: 32px;
  padding-inline: 10px;
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
}

.button-quiet:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-muted);
  border-color: var(--line);
}

.button-small {
  min-block-size: 30px;
  font-size: 12px;
}

.drop-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 16px;
  padding: 14px 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.drop-zone.is-over {
  border-color: var(--accent-blue);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-blue) 35%, white);
}

.drop-zone p {
  margin: 3px 0 0;
}

.drop-zone-action {
  color: var(--accent-pressed);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.formula-bar {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  padding: 0 16px 12px;
}

.name-box,
.formula-input {
  display: flex;
  align-items: center;
  min-block-size: 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}

.name-box {
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
}

.formula-input {
  min-inline-size: 0;
  padding-inline: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-panel {
  min-block-size: 0;
  margin: 0 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sheet-scroller {
  inline-size: 100%;
  block-size: 100%;
  overflow: auto;
}

.sheet-grid {
  inline-size: 100%;
  min-inline-size: 920px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.sheet-grid th,
.sheet-grid td {
  block-size: 34px;
  padding: 7px 10px;
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: middle;
}

.sheet-grid th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  color: var(--text-muted);
  background: #f1f3f5;
  font-size: 12px;
  font-weight: 700;
}

.sheet-grid .row-handle {
  inline-size: 44px;
  padding-inline: 0;
  color: var(--text-subtle);
  text-align: center;
  background: #f1f3f5;
  font-family: var(--font-data);
  font-size: 12px;
}

.sheet-grid td[data-kind="number"],
.sheet-grid td[data-kind="hash"] {
  font-family: var(--font-data);
}

.sheet-grid td[data-kind="number"] {
  text-align: end;
}

.sheet-grid tbody tr:hover td:not(.row-handle) {
  background: #f9fbff;
}

.sheet-grid tbody tr.is-selected td:not(.row-handle) {
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.status-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 700;
}

.remedy-text {
  color: var(--text-muted);
}

.inspector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border-block-start: 1px solid var(--line);
}

.inspector h3 {
  margin-block-start: 2px;
  font-size: 16px;
}

.validation-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 30px;
  padding-inline: 10px;
  color: var(--text-muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
}

.summary-item strong {
  color: var(--text);
  font-family: var(--font-data);
}

/* ---------------------------------------------------------------------------
   Stage rail

   Answers "where am I and what do I do next" from real job state. Each stage
   carries its state as text as well as colour, because a colour-only step
   indicator is unreadable to a third of the reasons people fail this task.
   --------------------------------------------------------------------------- */

.stage-rail {
  padding: 10px 16px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

.stage-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  flex: 1 1 150px;
  padding: 7px 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.stage-index {
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
}

.stage-text {
  min-inline-size: 0;
}

.stage-name {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.stage-state {
  display: block;
  color: var(--text-subtle);
  font-size: 11.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage[data-state="done"] {
  background: var(--surface);
  border-color: var(--success);
}

.stage[data-state="done"] .stage-index {
  color: var(--surface);
  background: var(--success);
  border-color: var(--success);
}

.stage[data-state="current"] {
  background: var(--surface);
  border-color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.stage[data-state="current"] .stage-index {
  color: var(--surface);
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.stage[data-state="blocked"] {
  background: var(--surface);
  border-color: var(--danger);
}

.stage[data-state="blocked"] .stage-index {
  color: var(--surface);
  background: var(--danger);
  border-color: var(--danger);
}

.stage[data-state="running"] .stage-index {
  color: var(--surface);
  background: var(--warning);
  border-color: var(--warning);
}

/* ---------------------------------------------------------------------------
   Terminal state banner
   --------------------------------------------------------------------------- */

.job-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--text-subtle);
  border-radius: var(--radius-sm);
}

.job-banner[data-tone="error"] {
  border-inline-start-color: var(--danger);
}

.job-banner[data-tone="success"] {
  border-inline-start-color: var(--success);
}

.job-banner[data-tone="working"] {
  border-inline-start-color: var(--warning);
}

.job-banner[data-tone="info"] {
  border-inline-start-color: var(--accent-blue);
}

.banner-body {
  min-inline-size: 0;
  flex: 1 1 auto;
}

.banner-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.banner-detail {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.banner-code {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 1px 6px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-data);
  font-size: 11.5px;
}

/* ---------------------------------------------------------------------------
   Panels and record lists

   Replaces the old grid-of-status-text. A file, a check, and an artefact are
   records with a name and facts, not spreadsheet cells.
   --------------------------------------------------------------------------- */

.panel {
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-block-end: 1px solid var(--line);
}

.panel-head h3 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel-meta {
  margin: 0;
  color: var(--text-subtle);
  font-family: var(--font-data);
  font-size: 12px;
}

.record-list {
  display: flex;
  flex-direction: column;
}

.record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-block-end: 1px solid var(--line);
}

.record:last-child {
  border-block-end: 0;
}

.record-main {
  min-inline-size: 0;
  flex: 1 1 260px;
}

.record-name {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.record-detail {
  display: block;
  margin-block-start: 2px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.record-facts {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fact-label {
  color: var(--text-subtle);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fact-value {
  color: var(--text);
  font-family: var(--font-data);
  font-size: 12.5px;
}

.record-empty {
  padding: 14px;
  color: var(--text-subtle);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Reconciliation: the arithmetic must be readable, not summarised
   --------------------------------------------------------------------------- */

.recon-panel {
  padding: 12px 14px;
}

.recon-row {
  padding-block: 8px;
  border-block-end: 1px solid var(--line);
}

.recon-row:last-child {
  border-block-end: 0;
}

.recon-name {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}

.recon-sum {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-data);
  font-size: 13px;
}

.recon-term {
  color: var(--text);
}

.recon-term span {
  color: var(--text-subtle);
  font-size: 11px;
}

.recon-op {
  color: var(--text-subtle);
}

.recon-balanced {
  color: var(--success);
  font-weight: 700;
}

.recon-unbalanced {
  color: var(--danger);
  font-weight: 700;
}

.recon-note {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
}

.pane-note {
  margin: 0 16px;
  color: var(--text-subtle);
  font-size: 12.5px;
}

.toast {
  position: fixed;
  inset-inline: auto 16px;
  inset-block-end: 16px;
  z-index: 100;
  max-inline-size: min(460px, calc(100vw - 32px));
  padding: 12px 14px;
  color: #ffffff;
  background: #1f293a;
  border: 1px solid #101015;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-weight: 700;
}

.toast[data-tone="error"] {
  background: var(--danger);
  border-color: #7a1a12;
}

.toast[data-tone="success"] {
  background: var(--success);
  border-color: #104329;
}

@media (max-width: 1120px) {
  :root {
    --rail-width: 248px;
  }

  .ribbon-groups {
    grid-template-columns: 1fr;
  }

  .ribbon-group {
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
  }

  .ribbon-group:last-child {
    border-block-end: 0;
  }
}

@media (max-width: 820px) {
  .topbar {
    position: static;
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
    padding-block: 12px;
  }

  .topbar-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .login-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .workspace {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .workspace.rail-collapsed {
    grid-template-columns: 1fr;
  }

  .rail {
    inline-size: 100%;
    max-block-size: 320px;
    min-block-size: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
    transform: translateY(0);
    transition: max-block-size 220ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 220ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 160ms ease;
  }

  .workspace.rail-collapsed .rail {
    max-block-size: 0;
    opacity: 0;
    border-block-end: 0;
    transform: translateY(-16px);
  }

  .job-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    overflow-x: auto;
  }

  .empty-panel {
    margin-block-start: 0;
  }

  .workbook-topline,
  .drop-zone,
  .record {
    align-items: stretch;
    flex-direction: column;
  }

  /* Stages stack rather than shrinking below a readable label. */
  .stage {
    flex: 1 1 100%;
  }

  .record-facts {
    gap: 12px;
  }

  .period-readout,
  .validation-summary {
    justify-content: flex-start;
  }

  .ribbon-form {
    grid-template-columns: 1fr;
  }

  .button,
  input,
  select {
    min-block-size: 44px;
  }

  .drop-zone-action {
    white-space: normal;
  }

  .formula-bar {
    grid-template-columns: 58px minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .login-panel {
    padding: 12px;
  }

  .workbook-topline,
  .ribbon-tabs,
  .ribbon-body,
  .drop-zone,
  .formula-bar,
  .stage-rail {
    padding-inline: 10px;
  }

  .sheet-panel,
  .panel,
  .job-banner,
  .pane-note {
    margin-inline: 10px;
  }

  .brand-lockup h1 {
    font-size: 16px;
  }
}

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

/* ---------------------------------------------------------------------------
   Spreadsheet host

   The grid bundle is optional and large, so it is fetched only when the Data
   tab is first opened. Until then, and if it never arrives, the table preview
   below it stays the interface. The host reserves its own height so switching
   tabs does not reflow the pane.
   --------------------------------------------------------------------------- */

/* The panel owns the frame; the host is only the canvas surface. Expanding is then
   one element changing size, so the grid keeps its state and never remounts. */
.grid-panel {
  display: flex;
  flex-direction: column;
  margin: 0 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 10px 7px 12px;
  background: var(--surface-muted);
  border-block-end: 1px solid var(--line);
}

.grid-toolbar-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-inline-size: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.grid-hint {
  color: var(--text-subtle);
  font-size: 11.5px;
  font-weight: 400;
}

.grid-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.grid-host {
  block-size: min(560px, 60vh);
  overflow: hidden;
}

/* Full screen is the same panel at viewport size - same chrome, same tokens, same
   grid instance - so nothing is relearned and no state is lost on the way in or out. */
.grid-panel--expanded {
  position: fixed;
  inset: 0;
  z-index: 200;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.grid-panel--expanded .grid-toolbar {
  padding-inline: 16px;
}

.grid-panel--expanded .grid-host {
  block-size: auto;
  flex: 1 1 auto;
  min-block-size: 0;
}

body:has(.grid-panel--expanded) {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Job assistant

   Answers from the same APIs the operator can already read. It is docked rather
   than floating over the grid, because covering the numbers being discussed is
   the one thing it must not do.
   --------------------------------------------------------------------------- */

.assistant {
  position: fixed;
  inset-inline-end: 16px;
  inset-block-end: 16px;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 8px;
}

.assistant-toggle {
  min-block-size: 38px;
  padding-inline: 14px;
  color: var(--surface);
  background: var(--accent);
  border: 1px solid var(--accent-pressed);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 700;
  transition: background-color 120ms ease;
}

.assistant-toggle:hover {
  background: var(--accent-hover);
}

.assistant-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.assistant-panel {
  display: flex;
  flex-direction: column;
  inline-size: min(400px, calc(100vw - 32px));
  block-size: min(460px, 60vh);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-block-end: 1px solid var(--line);
}

.assistant-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.assistant-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  padding: 12px;
  overflow-y: auto;
}

.assistant-message {
  max-inline-size: 90%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant-message[data-role="user"] {
  align-self: flex-end;
  color: var(--surface);
  background: var(--accent-pressed);
}

.assistant-message[data-role="assistant"] {
  align-self: flex-start;
  background: var(--surface-muted);
  border: 1px solid var(--line);
}

.assistant-message[data-role="error"] {
  align-self: stretch;
  color: var(--danger);
  background: var(--surface);
  border: 1px solid var(--danger);
}

/* Tool activity is shown, not hidden: an answer's grounding is the point. */
.assistant-tool {
  align-self: flex-start;
  color: var(--text-subtle);
  font-family: var(--font-data);
  font-size: 11.5px;
}

.assistant-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-block-start: 1px solid var(--line);
}

.assistant-form input {
  min-inline-size: 0;
  flex: 1 1 auto;
}

.assistant-empty {
  color: var(--text-subtle);
  font-size: 12.5px;
}

@media (max-width: 820px) {
  .grid-host {
    block-size: min(420px, 55vh);
  }

  .assistant {
    inset-inline: 10px;
    inset-block-end: 10px;
  }

  .assistant-panel {
    inline-size: 100%;
  }
}

/* A saved correction changes nothing until the job is processed again, so the
   count says what is outstanding rather than implying the fix has landed. */
.edit-badge {
  margin: 0 16px 8px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--warning);
  border-inline-start: 4px solid var(--warning);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
}