/* Components: pieces reused across pages. One block per component. */

/* Grouped list: a small heading with a white rounded list under it. */
.placeholder-section h2,
.department h2 {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.plain-list,
.file-list,
.department-pages {
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
}

.plain-list li,
.file-list li,
.department-pages a {
  padding: 0.7rem var(--space-3);
}

.plain-list li + li,
.file-list li + li,
.department-pages li + li {
  border-top: 1px solid var(--line);
}

/* Placeholder page */
.placeholder { display: grid; gap: var(--space-4); max-width: 44rem; }

.placeholder-state {
  padding: 0.7rem var(--space-3);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink-soft);
}

.file-list li { color: var(--ink-soft); }

/* Message page (errors, missing pages) */
.message {
  max-width: 40rem;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--panel);
}

.message-title { font-size: var(--step-1); margin-bottom: var(--space-2); }
.message-detail { color: var(--ink-soft); }

/* Dashboard */
.dashboard { display: grid; gap: var(--space-4); }

.server-status {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--panel);
  font-size: var(--step--1);
  font-weight: 500;
}

.server-status::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink-soft);
}

.server-status[data-state='ok']::before { background: var(--ok); }
.server-status[data-state='error']::before { background: var(--error); }
.server-status[data-state='error'] { color: var(--error); }

.dashboard-note { color: var(--ink-soft); max-width: 40rem; }

.department-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4) var(--space-3);
  align-items: start;
}

/* Each page link is a row with a chevron on the right. */
.department-pages a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}

.department-pages a::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  transform: rotate(-45deg);
}

.department-pages a:hover { background: var(--fill); }

/* Buttons */
.button {
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--panel);
  font-weight: 600;
  cursor: pointer;
}

.button:disabled { opacity: 0.5; cursor: default; }

.button-primary { background: var(--crimson); color: #fff; }
.button-primary:hover:not(:disabled) { background: var(--crimson-deep); }

.button-plain { background: transparent; color: var(--crimson-ink); padding-left: var(--space-2); padding-right: var(--space-2); }

.button-danger { background: var(--panel); color: var(--error); }
.button-danger[data-armed='true'] { background: var(--error); color: #fff; }

/* Toolbar above a list: search on the left, main action on the right */
.toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  max-width: 44rem;
  margin-bottom: var(--space-2);
}

.search-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--fill-strong);
  font: inherit;
  color: inherit;
}

.search-field::placeholder { color: var(--ink-soft); }

.list-count {
  min-height: 1.2rem;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Record list: one row per record, opens the record when clicked */
.record-list-area { max-width: 44rem; }

.record-list {
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
}

.record-list li + li { border-top: 1px solid var(--line); }

.record-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.7rem var(--space-3);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.record-row:hover { background: var(--fill); }

.record-row::after {
  content: '';
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  transform: rotate(-45deg);
}

.record-main { flex: 1 1 auto; min-width: 0; display: grid; }
.record-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-detail { font-size: var(--step--1); color: var(--ink-soft); }
.record-trailing { flex: 0 0 auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.empty-state {
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink-soft);
  text-align: center;
}

.empty-state-error { color: var(--error); }

/* Sheet: the panel that opens over the page */
.sheet {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--page);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.sheet::backdrop { background: rgba(0, 0, 0, 0.35); }

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) 0 var(--space-4);
}

.sheet-title { font-size: var(--step-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sheet-body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }

/* Form */
.form { display: grid; gap: var(--space-3); }

.field-group {
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
}

.field {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-2);
  padding: 0 var(--space-3);
}

.field + .field { border-top: 1px solid var(--line); }

.field label { padding: 0.7rem 0; color: var(--ink-soft); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible { outline: none; }
.field:focus-within { background: var(--focus-fill); }

.field-error {
  grid-column: 2;
  padding-bottom: 0.6rem;
  font-size: var(--step--1);
  color: var(--error);
}

.form-error { padding: 0 var(--space-3); color: var(--error); }

/* History of changes shown at the bottom of a sheet */
.history-heading {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.history-list { background: var(--panel); border-radius: var(--radius); font-size: var(--step--1); }
.history-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0.6rem var(--space-3); }
.history-list li + li { border-top: 1px solid var(--line); }
.history-when { flex: 0 0 auto; color: var(--ink-soft); }

@media (max-width: 760px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar .button { flex: 1 1 100%; }
  .field { grid-template-columns: minmax(0, 1fr); }
  .field label { padding-bottom: 0; font-size: var(--step--1); }
  .field input, .field textarea { padding-top: 0.2rem; }
  .field-error { grid-column: 1; }
}

/* Bulk import sheet */
.sheet-wide { width: min(46rem, calc(100vw - 2rem)); }

.import-help { color: var(--ink-soft); }

.import-paste {
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--panel);
  font-family: var(--font-code);
  font-size: var(--step--1);
  color: inherit;
  resize: vertical;
  white-space: pre;
}

.import-file { font: inherit; font-size: var(--step--1); color: var(--ink-soft); }

.import-review { display: grid; gap: var(--space-2); }
.import-review .history-heading { margin: var(--space-2) 0 0; }

.import-matching {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.import-match {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.import-match select {
  width: 100%;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
}

.import-option { display: flex; align-items: center; gap: var(--space-2); padding: 0.2rem var(--space-3); }
.import-option input { accent-color: var(--crimson); }

.import-summary,
.import-choices { background: var(--panel); border-radius: var(--radius); padding: var(--space-2) 0; }
.import-summary li { padding: 0.3rem var(--space-3); }
.import-summary strong { display: inline-block; min-width: 2.5rem; font-variant-numeric: tabular-nums; }
.import-summary-problem { color: var(--error); }

.import-problems { padding: 0 var(--space-3); font-size: var(--step--1); color: var(--error); }
.import-problems li { padding: 0.15rem 0; }

.import-preview { overflow-x: auto; background: var(--panel); border-radius: var(--radius); }
.import-preview table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.import-preview th, .import-preview td { padding: 0.5rem var(--space-3); text-align: left; white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.import-preview th { color: var(--ink-soft); font-weight: 600; }
.import-preview tbody tr { border-top: 1px solid var(--line); }

.import-action { display: grid; margin-top: var(--space-2); }
.import-done { padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }

/* Wider toolbar and list, for pages whose rows carry more columns */
.toolbar-wide,
.record-list-area-wide { max-width: 56rem; }

.filter-field {
  flex: 0 0 auto;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--fill-strong);
  font: inherit;
  color: inherit;
}

a.button { text-decoration: none; text-align: center; }
a.record-row { text-decoration: none; color: inherit; }

.record-money { font-variant-numeric: tabular-nums; color: var(--ink); }

.status-tag {
  flex: 0 0 9.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--fill);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
}

.status-tag[data-status='SUIVI A FAIRE'] { background: var(--crimson); color: #fff; }
.status-tag[data-status='A FERME'] { background: var(--gold-soft); color: var(--gold-ink); }
.status-tag[data-status='PERDU'] { background: transparent; color: #a3a3a8; }

/* An opened record: bar on top, grouped fields below */
.record-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.back-link { color: var(--crimson-ink); font-weight: 600; text-decoration: none; }
.back-link::before { content: '\2039\00a0'; }

.record-heading { flex: 1 1 auto; font-size: var(--step-1); }
.save-note { font-size: var(--step--1); color: var(--ink-soft); }

.record-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.record-columns section,
.record-footer { display: grid; gap: var(--space-2); align-content: start; }
.record-footer { max-width: 44rem; margin-top: var(--space-4); }

.field select { width: 100%; padding: 0.7rem 0; border: 0; background: transparent; font: inherit; color: inherit; }
.field input[type='checkbox'] { width: auto; margin: 0.9rem 0; accent-color: var(--crimson); }
.record-columns .field { grid-template-columns: 8.5rem minmax(0, 1fr); }
.field-note, .field-hint { font-size: var(--step--1); color: var(--ink-soft); }
.field-note { grid-column: 2; padding-bottom: 0.5rem; }
.field-hint { padding: 0 var(--space-3); }

/* Pricing lines table */
.lines { background: var(--panel); border-radius: var(--radius); margin-bottom: var(--space-4); }
.lines-scroll { overflow-x: auto; }
.lines-table { width: 100%; min-width: 52rem; border-collapse: collapse; }

.lines-table th {
  padding: 0.6rem 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  text-align: left;
  color: var(--ink-soft);
  white-space: nowrap;
}

.lines-table th:first-child, .lines-table td:first-child { padding-left: var(--space-3); }
.lines-table tbody tr { border-top: 1px solid var(--line); }
.lines-table td { padding: 0.15rem 0.5rem; }
.lines-table .cell-wide { width: 30%; }

.lines-table input,
.lines-table select {
  width: 100%;
  min-width: 4.5rem;
  padding: 0.5rem 0.3rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: inherit;
}

.lines-table input:focus-visible,
.lines-table select:focus-visible { outline: none; background: var(--focus-fill); box-shadow: inset 0 0 0 1px var(--gold); }

.cell-number, .cell-money { text-align: right; font-variant-numeric: tabular-nums; }
.cell-money { white-space: nowrap; color: var(--ink-soft); }

.line-remove {
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.1rem;
  cursor: pointer;
}

.line-remove:hover { background: var(--fill); color: var(--error); }
.lines > .button { margin: var(--space-1) var(--space-2); }

/* Totals */
.totals {
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0;
  background: var(--panel);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}

.totals dt, .totals dd { margin: 0; padding: 0.7rem var(--space-3); }
.totals dt { color: var(--ink-soft); }
.totals dd { text-align: right; font-weight: 600; }
.totals dt:nth-of-type(n + 2), .totals dd:nth-of-type(n + 2) { border-top: 1px solid var(--line); }
.totals-note { padding: 0 var(--space-3); font-size: var(--step--1); color: var(--ink-soft); }

@media (max-width: 760px) {
  .status-tag { flex-basis: auto; }
  .record-money { display: none; }
  .record-columns .field { grid-template-columns: minmax(0, 1fr); }
}

/* Orders */
.button-gold { background: var(--gold); color: #3d2c00; }
.button-gold:hover:not(:disabled) { background: var(--gold-bright); }

.status-tag[data-status='LATE'] { background: var(--crimson); color: #fff; }
.status-tag[data-status='IN PRODUCTION'], .status-tag[data-status='CONFIRMER'] { background: var(--tone-green-soft); color: var(--tone-green-ink); }
.status-tag[data-status='FERME'], .status-tag[data-status='CLOSED'] { background: transparent; color: #a3a3a8; }

.record-heading .record-closed { flex: none; margin-left: var(--space-2); vertical-align: middle; letter-spacing: 0; }

.lines-locked input, .lines-locked select { color: var(--ink-soft); }
.lines-locked .line-remove, .lines-locked > .button { display: none; }
.lines + .button { justify-self: start; margin-top: calc(var(--space-3) * -1); margin-bottom: var(--space-3); }
.sheet .field { grid-template-columns: 8.5rem minmax(0, 1fr); }
@media (max-width: 760px) { .sheet .field { grid-template-columns: minmax(0, 1fr); } }

/* Purchasing */
.status-tag[data-status='RECU'] { background: var(--tone-green-soft); color: var(--tone-green-ink); }
.status-tag[data-status='TO ORDER'] { background: var(--gold-soft); color: var(--gold-ink); }

/* A panel: a list inside a record, with its own buttons underneath */
.panel { margin-bottom: var(--space-4); }
.panel-body { display: grid; gap: var(--space-2); }
.panel-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.panel-total { margin-left: auto; padding-right: var(--space-3); font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.empty-state-small { padding: var(--space-3); text-align: left; }

.delivery .history-heading { margin-top: var(--space-4); }
.delivery .history-heading:first-child { margin-top: 0; }
.delivery-late { color: var(--crimson-ink); }
.sheet .record-list { max-height: 50vh; overflow-y: auto; }
.field input:disabled { color: var(--ink-soft); }
.status-tag[data-status='FULFILLED'], .status-tag[data-status='READY'] { background: var(--tone-green-soft); color: var(--tone-green-ink); }
.status-tag[data-status='REQUESTED'] { background: var(--gold-soft); color: var(--gold-ink); }
.status-tag[data-status='CANCELLED'] { background: transparent; color: #a3a3a8; }

/* Summary pages (CRM, Sales intelligence) */
.summary-area { display: grid; gap: var(--space-4); max-width: 64rem; }
.summary-note { color: var(--ink-soft); }
.toolbar-space { flex: 1 1 auto; }

/* Segmented control: a row of buttons where one is chosen */
.segmented { display: inline-flex; flex: 0 0 auto; padding: 2px; border-radius: var(--radius-small); background: var(--fill-strong); }
.segment { padding: 0.4rem 0.9rem; border: 0; border-radius: 8px; background: transparent; font-weight: 500; color: var(--ink); cursor: pointer; }
.segment-on { background: var(--panel); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); margin: 0; }
.tile { padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.tile dt { font-size: var(--step--1); color: var(--ink-soft); }
.tile dd { margin: var(--space-1) 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.tile-note { margin-top: 2px; font-size: var(--step--1); color: var(--ink-soft); }

/* Period cards with goal meters */
.period-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.period-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); border-radius: var(--radius); background: var(--panel); }
.period-card h3 { font-size: var(--step-1); }
.period-facts { font-size: var(--step--1); color: var(--ink-soft); }

.meter { display: grid; gap: var(--space-1); }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); color: var(--ink-soft); }
.meter-value { font-size: 1.35rem; font-weight: 600; color: var(--ink); }
/* The track is a lighter step of the fill's own colour. */
.meter-track { height: 8px; border-radius: 4px; background: var(--tone-red-soft); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 4px; background: var(--crimson); }
.meter-fill-reached { background: var(--ok); }
.meter-track:has(.meter-fill-reached) { background: var(--tone-green-soft); }
.meter-note { font-size: var(--step--1); color: var(--ink-soft); }

/* Data table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--panel); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.6rem var(--space-3); text-align: left; white-space: nowrap; }
.data-table th { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.data-table tbody tr { border-top: 1px solid var(--line); }
.data-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.data-table a { color: var(--crimson-ink); font-weight: 600; text-decoration: none; }
.cell-detail { margin-left: var(--space-2); font-size: var(--step--1); color: var(--ink-soft); }
.sort-button { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.row-quiet td { color: #a3a3a8; }
.row-current td { font-weight: 600; }

/* A thin bar under a number, showing its share of the largest value */
.bar-cell { background-image: linear-gradient(var(--crimson), var(--crimson)); background-repeat: no-repeat; background-position: right var(--space-3) bottom 0.3rem; background-size: calc((100% - 2 * var(--space-3)) * var(--share, 0)) 3px; min-width: 9rem; }

.section-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.section-bar .history-heading { margin: 0; }
.summary-area > * { min-width: 0; }

/* The switch between views at the top of a page */
.view-switch { margin-bottom: var(--space-4); }

/* Pump Service */
.family-heading { margin: var(--space-4) 0 var(--space-2); }
.family-heading:first-child { margin-top: 0; }
.record-none { color: var(--line-strong); }
.text-link { color: var(--crimson-ink); font-weight: 600; text-decoration: none; }
.tag-small { flex: 0 0 auto; }

/* Parts list table: narrower cells for item and quantity */
.parts-table { min-width: 60rem; }
.parts-table .cell-narrow { width: 4.5rem; }
.parts-table .cell-narrow input { min-width: 3rem; }
.parts-table select { min-width: 9.5rem; }
.history-heading .cell-detail { font-weight: 400; }

/* A pump's master parts, group by group, folded until opened */
.parts-group { background: var(--panel); border-radius: var(--radius); }
.parts-group summary { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem var(--space-3); font-weight: 500; cursor: pointer; list-style: none; }
.parts-group summary::-webkit-details-marker { display: none; }
.parts-group[open] summary { border-bottom: 1px solid var(--line); }
.parts-reference td { padding: 0.45rem var(--space-3); font-size: var(--step--1); white-space: normal; }
.parts-reference .cell-item { width: 3.5rem; color: var(--ink-soft); }

/* Job statuses */
.status-tag[data-status='WAITING ARRIVAL'], .status-tag[data-status='WAITING PARTS'], .status-tag[data-status='WAITING NEW PUMP'] { background: var(--gold-soft); color: var(--gold-ink); }
.status-tag[data-status='BC RECEIVED'], .status-tag[data-status='WAITING ASSEMBLE'], .status-tag[data-status='SHIPPING'] { background: var(--tone-green-soft); color: var(--tone-green-ink); }

/* Board: one column per status */
.board { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-3); align-items: flex-start; }
.board-column { flex: 0 0 15rem; display: grid; gap: var(--space-2); }
.board-column h3 { display: flex; justify-content: space-between; padding: 0 var(--space-2); font-size: var(--step--1); font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
.board-card { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius); background: var(--panel); text-decoration: none; color: inherit; }
.board-card:hover { background: var(--panel-hover); }
.board-detail { font-size: var(--step--1); color: var(--ink-soft); }
.board-tags { display: flex; gap: var(--space-1); margin-top: var(--space-1); }
.board-tags:empty { display: none; }

/* Toolbars with many controls wrap onto a second row instead of squeezing */
.toolbar { flex-wrap: wrap; }
.toolbar .search-field { flex: 1 1 14rem; }
.button { white-space: nowrap; }

/* Parts required: the pump's master list with a tick box per line */
.parts-picker { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.parts-picker-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.parts-picker-bar .search-field { flex: 1 1 16rem; }
.parts-picker-body { display: grid; gap: var(--space-2); }
.part-count-on { color: var(--crimson-ink); font-weight: 600; }
.part-lines { border-top: 0; }
.part-line + .part-line { border-top: 1px solid var(--line); }
.part-line-on { background: var(--focus-fill); }
.part-head { display: grid; grid-template-columns: auto 3rem minmax(0, 1fr) 8.5rem 8.5rem 3.5rem; align-items: center; gap: var(--space-2); padding: 0.5rem var(--space-3); cursor: pointer; }
.part-head:hover { background: var(--fill); }
.part-head input { width: 1.1rem; height: 1.1rem; accent-color: var(--crimson); }
.part-item { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.part-number { font-size: var(--step--1); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-qty { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.part-line-on .part-name { font-weight: 600; }

.part-details { display: grid; grid-template-columns: 8rem repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: 0 var(--space-3) var(--space-3) calc(var(--space-3) + 1.1rem + var(--space-2)); }
.part-note { display: grid; gap: 2px; font-size: var(--step--1); color: var(--ink-soft); }
.part-note-ebr { grid-column: 1; grid-row: 1; }
.part-note-qty { grid-column: 1; grid-row: 2; align-content: start; }
.part-note-ebr input { font-weight: 700; background: color-mix(in srgb, var(--gold) 9%, var(--panel)); }
.part-ebr { color: var(--ink); font-weight: 600; }
.part-note input, .part-note textarea { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font: inherit; font-size: var(--step-0); color: var(--ink); resize: vertical; }
.part-note input:focus-visible, .part-note textarea:focus-visible { outline: none; border-color: var(--gold); }

.parts-picker-add { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.parts-picker-add input { flex: 1 1 12rem; padding: 0.55rem 0.9rem; border: 0; border-radius: var(--radius-small); background: var(--fill-strong); font: inherit; color: inherit; }
.parts-picker-add input:first-child { flex: 3 1 16rem; }
.parts-picker-add input[aria-label='EBR number'] { flex: 1 1 8rem; }

/* Inspection reports */
.inspection-list { display: grid; gap: var(--space-2); }
.inspection { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.inspection-head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.inspection input, .inspection select, .inspection textarea { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font: inherit; color: inherit; }
.inspection-title { flex: 1 1 14rem; font-weight: 600; }
.inspection textarea { width: 100%; resize: vertical; }
.inspection input:focus-visible, .inspection select:focus-visible, .inspection textarea:focus-visible { outline: none; border-color: var(--gold); }

@media (max-width: 760px) {
  .part-head { grid-template-columns: auto 2.5rem minmax(0, 1fr) 3rem; }
  .part-head .part-number { display: none; }
  .part-details { grid-template-columns: minmax(0, 1fr); padding-left: var(--space-3); }
  .part-note-qty, .part-note-ebr { grid-column: auto; grid-row: auto; }
}

/* ----- Pump job: pricing, the link to Sales, and the printed report ----- */
.lines-table .cell-text { padding: 0.45rem 0.5rem; font-size: var(--step--1); }
.lines-table .cell-empty { padding: var(--space-3); color: var(--ink-soft); font-size: var(--step--1); }
.panel > .lines-scroll + .lines-scroll { margin-top: var(--space-3); }
.calc-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.calc-field { display: grid; gap: 0.15rem; font-size: var(--step--1); color: var(--ink-soft); }
.calc-field input { width: 6.5rem; }
.sales-panel { padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.sales-link { font-weight: 600; color: var(--crimson-ink); }
.sales-link-note { margin: 0 0 var(--space-2); font-size: var(--step--1); color: var(--ink-soft); }
.sales-panel .sales-link-note:last-of-type:not(:first-child) { margin: var(--space-2) 0 0; }
.table-link { font-weight: 600; color: var(--crimson-ink); text-decoration: none; }
.table-link:hover { text-decoration: underline; }
button.record-row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }

.report { max-width: 50rem; margin: 0 auto; padding: var(--space-5); border-radius: var(--radius); background: #fff; color: #1c1c1e; }
.report-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 2px solid var(--crimson); }
.report-head h2 { margin: 0; font-size: var(--step-1); color: var(--crimson-deep); }
.report-head p { margin: 0; color: var(--ink-soft); }
.report-date { margin-left: auto !important; }
.report-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.report-facts dt { font-size: var(--step--1); color: var(--ink-soft); }
.report-facts dd { margin: 0; font-weight: 600; }
.report-block { margin-top: var(--space-4); break-inside: avoid-page; }
.report-block h3 { margin: 0 0 var(--space-2); font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.04em; color: var(--crimson-ink); }
.report-block h4 { margin: var(--space-2) 0 0.2rem; font-size: var(--step-0); }
.report-block p { margin: 0 0 0.3rem; }
.report-parts { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.report-parts th, .report-parts td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--fill-strong); text-align: left; }
.report-parts .number { text-align: right; }
.report-group th { padding-top: var(--space-2); color: var(--ink-soft); font-weight: 600; }
.report-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.report-tile { display: grid; gap: 0.1rem; padding: 0.5rem 0.7rem; border-radius: 8px; border-left: 5px solid; }
.report-tile b { font-size: 1.5rem; line-height: 1; }
.report-tile span { font-size: 0.78rem; color: #3a3a3c; }
.report-tile-green { border-color: #1f9d55; background: #e3f5ea; } .report-tile-green b { color: #157040; }
.report-tile-amber { border-color: #d99a00; background: #fdf3d6; } .report-tile-amber b { color: #8a5d00; }
.report-tile-red { border-color: #c2182b; background: #fbe3e5; } .report-tile-red b { color: #a3101f; }
.report-tile-grey { border-color: #8e8e93; background: #f0f0f2; } .report-tile-grey b { color: #555; }
.report-clearances td { vertical-align: top; }
.report-measure-out td:first-child { box-shadow: inset 4px 0 0 #c2182b; }
.report-measure-near td:first-child { box-shadow: inset 4px 0 0 #d99a00; }
.report-measure-in td:first-child { box-shadow: inset 4px 0 0 #1f9d55; }
.report-reading { display: flex; gap: 0.6rem; align-items: baseline; }
.report-reading span { min-width: 4.2rem; font-variant-numeric: tabular-nums; }
.report-reading-in b { color: #157040; } .report-reading-near b { color: #8a5d00; } .report-reading-out b { color: #a3101f; } .report-reading-none b { color: #555; font-weight: 500; }
.report-parts-red thead th { border-bottom: 2px solid #c2182b; }
.report-parts-amber thead th { border-bottom: 2px solid #d99a00; }
.report-note { color: #3a3a3c; }
.report-foot { margin-top: var(--space-5); padding-top: var(--space-2); border-top: 1px solid #d1d1d6; font-size: 0.78rem; color: #555; }
.report .report-head p, .report .report-facts dt { color: #555; }
@media print { .report-tile, .report-measure-out td, .report-reading b { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

@media print {
  .sidebar, .title-block, .no-print { display: none !important; }
  .shell { display: block; }
  .screen { padding: 0; }
  body { background: #fff; }
  .report { max-width: none; padding: 0; }
}
.pricing-panel { padding: var(--space-2) 0 var(--space-3); border-radius: var(--radius); background: var(--panel); }
.pricing-panel .calc-bar, .pricing-panel .tiles { padding: 0 var(--space-3); }
.pricing-panel .tile { background: var(--page); }
.pricing-panel .lines-table select { min-width: 9.5rem; }
.calc-field input, .sales-panel input {
  padding: 0.5rem 0.7rem; border: 0; border-radius: var(--radius-small); background: var(--fill-strong); font: inherit;
}
.calc-field input:focus-visible, .sales-panel input:focus-visible { outline: 2px solid var(--gold); }

/* ----- Bundles of pump parts ----- */
.bundle-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.bundle-label { font-size: var(--step--1); color: var(--ink-soft); }
.bundle-button { padding: 0.35rem 0.8rem; font-size: var(--step--1); }
.bundle-head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2); margin-bottom: var(--space-2); }
.bundle-head input { padding: 0.55rem 0.9rem; border: 0; border-radius: var(--radius-small); background: var(--fill-strong); font: inherit; min-width: 0; }
@media (max-width: 40rem) { .bundle-head { grid-template-columns: 1fr; } }

/* ----- Fabrication ----- */
.fab-progress { margin: 0 var(--space-3) var(--space-2); }
.calc-field select { padding: 0.5rem 0.7rem; border: 0; border-radius: var(--radius-small); background: var(--fill-strong); font: inherit; }
.pricing-panel .tiles { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.status-tag[data-status='QUOTING'], .status-tag[data-status='WAITING MATS'], .status-tag[data-status='REQUIRED'], .status-tag[data-status='REFAB'] { background: var(--gold-soft); color: var(--gold-ink); }
.status-tag[data-status='PURCHASE ORDER RECEIVED'], .status-tag[data-status='WAITING DELIVERY'], .status-tag[data-status='RECEIVED'], .status-tag[data-status='ORDERED'] { background: var(--tone-green-soft); color: var(--tone-green-ink); }
.status-tag[data-status='NOT REQUIRED'] { background: transparent; color: #a3a3a8; }
.sheet .lines-table { min-width: 34rem; }
.sheet .lines-table td:nth-child(5) { width: 5rem; }

/* ----- The drawing tool (fabrication, AutoCAD page) ----- */
.screen:has(> .cad) { max-width: none; }
.cad { outline: none; }
.cad-rev { margin-left: var(--space-1); padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); font-size: var(--step--1); font-weight: 600; }
.cad-ribbon { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.cad-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; padding: 0.3rem 0.5rem; border-radius: var(--radius-small); background: var(--panel); }
.cad-group-name { margin-right: 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.cad-tool { padding: 0.35rem 0.6rem; border: 0; border-radius: 8px; background: var(--fill); color: var(--ink); font: inherit; font-size: var(--step--1); cursor: pointer; }
.cad-tool:hover { background: var(--fill-strong); }
.cad-tool-on, .cad-tool-on:hover, .cad-place.cad-tool-on { background: var(--crimson); color: #fff; }
.cad-field { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--step--1); color: var(--ink-soft); }
.cad-num { width: 3.6rem; padding: 0.3rem 0.4rem; border: 0; border-radius: 8px; background: var(--fill-strong); font: inherit; font-size: var(--step--1); text-align: right; }

.cad-main { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-2); align-items: start; }
.cad-stage { display: grid; gap: 0; border-radius: var(--radius); overflow: hidden; background: var(--cad-bg); }
.cad-canvas { display: block; width: 100%; height: clamp(20rem, 100vh - 31rem, 60rem); touch-action: none; user-select: none; cursor: default; }
.cad-canvas[data-tool='PAN'] { cursor: grab; }
.cad-canvas:not([data-tool='SELECT']):not([data-tool='PAN']):not([data-tool='LASSO']) { cursor: crosshair; }
.cad-status, .cad-command { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: 0.35rem 0.6rem; background: #161c20; color: var(--cad-ink); font-size: var(--step--1); }
.cad-status-text { flex: 1 1 14rem; min-height: 1.2em; }
.cad-cursor { font-family: var(--font-code); font-variant-numeric: tabular-nums; opacity: 0.8; }
.cad-status .cad-field { color: var(--cad-ink); }
.cad-status .cad-num { background: #2a343b; color: var(--cad-ink); }
.cad-toggle { padding: 0.2rem 0.5rem; border: 1px solid #3a474f; border-radius: 6px; background: transparent; color: #7f8d96; font: inherit; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; }
.cad-toggle-on { border-color: var(--cad-selected); color: var(--cad-selected); }
.cad-command { border-top: 1px solid #2a343b; align-items: flex-end; }
.cad-log { flex: 1 1 100%; font-family: var(--font-code); font-size: 0.75rem; opacity: 0.7; }
.cad-log:empty { display: none; }
.cad-command-input { flex: 1 1 auto; padding: 0.35rem 0.5rem; border: 0; border-radius: 6px; background: #2a343b; color: var(--cad-ink); font-family: var(--font-code); font-size: var(--step--1); }
.cad-command-input::placeholder { color: #7f8d96; }

.cad-side { display: grid; gap: var(--space-2); max-height: calc(clamp(20rem, 100vh - 31rem, 60rem) + 5rem); overflow-y: auto; }
.cad-panel { padding: var(--space-2) var(--space-3) var(--space-3); border-radius: var(--radius); background: var(--panel); }
.cad-panel h3 { display: flex; justify-content: space-between; margin: 0 0 var(--space-2); font-size: var(--step--1); color: var(--ink-soft); }
.cad-panel-count { font-weight: 400; text-transform: capitalize; }
.cad-props { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cad-prop { display: grid; gap: 0.15rem; margin: 0; font-size: 0.75rem; color: var(--ink-soft); }
.cad-prop-wide, .cad-hint, .cad-actions { grid-column: 1 / -1; }
.cad-prop input, .cad-prop textarea, .cad-prop select, .cad-insert select, .cad-layer-add input, .cad-revision-note input {
  width: 100%; min-width: 0; padding: 0.4rem 0.5rem; border: 0; border-radius: 8px; background: var(--fill); color: var(--ink); font: inherit; font-size: var(--step--1);
}
.cad-readout strong { font-size: var(--step-0); color: var(--ink); }
.cad-hint { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.cad-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cad-actions .button, .cad-place, .cad-layer-add .button { padding: 0.35rem 0.7rem; font-size: var(--step--1); }
.cad-layers { display: grid; gap: 1px; }
.cad-layer { display: grid; grid-template-columns: 1.5rem 1.5rem minmax(0, 1fr) auto; align-items: center; border-radius: 6px; }
.cad-layer-on { background: var(--gold-soft); }
.cad-layer-flag, .cad-layer-name { border: 0; background: none; font: inherit; font-size: var(--step--1); cursor: pointer; padding: 0.25rem 0; }
.cad-layer-name { display: flex; align-items: center; gap: 0.4rem; text-align: left; }
.cad-swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); }
.cad-layer-type { padding-right: 0.3rem; font-size: 0.6875rem; color: var(--ink-soft); }
.cad-layer-add { display: flex; gap: 0.3rem; margin-top: var(--space-2); }
.cad-insert { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.5rem; padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.cad-insert:first-of-type { border-top: 0; padding-top: 0; }
.cad-insert strong { flex: 1 1 100%; font-size: var(--step--1); }
.cad-insert select { flex: 1 1 8rem; }
.cad-insert .cad-num { width: 3.2rem; background: var(--fill); }
.cad-revision { margin: 0 0 0.2rem; font-size: var(--step--1); }
.cad-revision-note { grid-template-columns: 1fr; }

/* What is drawn on the sheet. */
.cad-bg { fill: var(--cad-bg); }
.cad-grid-line { fill: none; stroke: var(--cad-grid); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.cad-grid-line-major { stroke: var(--cad-grid-major); }
.cad-axis { stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0.7; }
.cad-axis-x { stroke: var(--cad-axis-x); }
.cad-axis-y { stroke: var(--cad-axis-y); }
.cad-el { fill: none; stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.cad-text { stroke: none; font-family: Arial, sans-serif; }
.cad-marker { fill: var(--cad-ink); stroke: none; }
.cad-dim { stroke-width: 1px; }
.cad-dim line { vector-effect: non-scaling-stroke; }
.cad-dim-witness { opacity: 0.7; }
.cad-dim-text { stroke: none; font-family: Arial, sans-serif; font-size: 5.2px; }
.cad-selected, .cad-selected-group line, .cad-selected-group .cad-el { stroke: var(--cad-selected); stroke-width: 2px; }
.cad-text.cad-selected, .cad-selected-group text { fill: var(--cad-selected); stroke: none; }
.cad-grip { fill: var(--cad-bg); stroke: var(--cad-selected); stroke-width: 1.3px; vector-effect: non-scaling-stroke; cursor: move; }
.cad-draft { fill: none; stroke: var(--cad-draft); stroke-width: 1.4px; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.cad-draft-point { fill: var(--cad-draft); }
.cad-lasso { fill: rgba(55, 145, 215, 0.12); stroke: #49a6ef; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.cad-lasso-crossing { fill: rgba(75, 170, 91, 0.12); stroke: #56c26b; stroke-dasharray: 5 3; }
.cad-snap { pointer-events: none; }
.cad-snap rect { fill: none; stroke: var(--cad-snap); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.cad-snap text { fill: var(--cad-snap); font-family: Arial, sans-serif; }

/* On paper: black on white, with a title block. */
.cad-print-sheet { display: none; }
.cad-print .cad-bg { fill: #fff; }
.cad-print .cad-el { stroke: #000; stroke-width: 0.9px; }
.cad-print .cad-text, .cad-print .cad-dim, .cad-print .cad-marker { fill: #000; }
.cad-print .cad-dim { stroke: #000; stroke-width: 0.7px; }
.cad-title-block { display: grid; grid-template-columns: 1.2fr 2.5fr 0.5fr 1fr 1.5fr 1fr 1fr 1fr; margin: 0; border: 1px solid #000; }
.cad-title-block div { padding: 0.25rem 0.4rem; border-left: 1px solid #000; }
.cad-title-block div:first-child { border-left: 0; }
.cad-title-block dt { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.05em; color: #555; }
.cad-title-block dd { margin: 0; font-size: 0.8125rem; font-weight: 600; min-height: 1.1em; }

@media (max-width: 62rem) {
  .cad-main { grid-template-columns: minmax(0, 1fr); }
  .cad-side { max-height: none; }
  .cad-canvas { height: 60vh; }
}
@media print {
  .cad-screen-only { display: none !important; }
  .cad-print-sheet { display: block; }
  .cad-print-sheet .cad-canvas { height: auto; aspect-ratio: 1.45; border: 1px solid #000; border-bottom: 0; min-height: 0; }
  /* Landscape for drawings only (a named page), never for the other printouts. */
  .cad-print-sheet { page: cad-sheet; }
  @page cad-sheet { size: landscape; margin: 10mm; }
}

/* ----- Dashboard: the command centre ----- */
.screen:has(> .command) { max-width: 90rem; }
.command { display: grid; gap: var(--space-3); }
.command-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); color: #fff; }
.command-banner.level-red { background: linear-gradient(120deg, var(--alert-red), var(--crimson-deep)); }
.command-banner.level-amber { background: linear-gradient(120deg, var(--alert-amber), #8a5200); }
.command-banner.level-green { background: linear-gradient(120deg, var(--alert-green), var(--tone-green-ink)); }
.command-state { margin: 0; font-size: var(--step-2); font-weight: 700; letter-spacing: -0.01em; }
.command-date { margin: 0; opacity: 0.85; }
.command-counts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.command-count { display: grid; min-width: 8.5rem; padding: 0.5rem 0.9rem; border-radius: var(--radius-small); background: var(--panel); text-decoration: none; font-size: var(--step--1); font-weight: 600; }
.command-count strong { font-size: var(--step-2); line-height: 1.1; }
.count-red { color: var(--alert-red); } .count-amber { color: var(--alert-amber); } .count-blue { color: var(--alert-blue); }

.dept-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-3); }
.dept-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); border-radius: var(--radius); background: var(--panel); border-top: 5px solid var(--alert-green); }
.dept-card.level-red { border-top-color: var(--alert-red); } .dept-card.level-amber { border-top-color: var(--alert-amber); }
.dept-card h3, .command-panel h3 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin: 0; font-size: var(--step-1); }
.dept-card h3 a, .command-panel h3 a { color: inherit; text-decoration: none; }
.dept-flags { display: flex; gap: 0.3rem; }
.flag, .alert-kind, .dept-chip { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.flag-red, .kind-red { background: var(--alert-red); color: #fff; }
.flag-amber, .kind-amber { background: var(--alert-amber-soft); color: var(--alert-amber); }
.flag-green { background: var(--alert-green-soft); color: var(--alert-green); }
.dept-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0; }
.dept-fact { padding: 0.5rem 0.7rem; border-radius: var(--radius-small); background: var(--fill); color: inherit; text-decoration: none; }
.dept-fact:hover { background: var(--fill-strong); }
.dept-fact dt { font-size: 0.75rem; color: var(--ink-soft); }
.dept-fact dd { margin: 0; font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.status-bar { display: flex; gap: 2px; height: 1.5rem; border-radius: 8px; overflow: hidden; }
.status-part { flex: 1 1 0; min-width: 1.4rem; padding: 0; border-radius: 0; line-height: 1.5rem; font-size: 0.75rem; }
.status-key { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin: 0; font-size: 0.75rem; color: var(--ink-soft); }
.status-key > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.status-dot, .key-dot { flex: 0 0 0.7rem; width: 0.7rem; height: 0.7rem; padding: 0; border-radius: 50%; }
.key-dot { background: var(--line-strong); } .key-now { background: var(--gold); } .key-reached { background: var(--alert-green); }

.command-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.command-stack { display: grid; gap: var(--space-3); }
.command-panel { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--panel); min-width: 0; }
.command-panel .section-bar h3 { margin: 0; }
.alert-list { display: grid; gap: 0.35rem; max-height: 44rem; overflow-y: auto; }
.alert-row { display: flex; align-items: center; gap: var(--space-2); padding: 0.55rem 0.7rem; border-radius: var(--radius-small); border-left: 5px solid; color: inherit; text-decoration: none; }
.alert-row.level-red { border-color: var(--alert-red); background: var(--alert-red-soft); }
.alert-row.level-amber { border-color: var(--alert-amber); background: var(--alert-amber-soft); }
.alert-row:hover { filter: brightness(0.97); }
.alert-main { display: grid; flex: 1 1 auto; min-width: 0; }
.alert-main span { font-size: var(--step--1); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-days { font-weight: 700; font-size: var(--step--1); color: var(--alert-red); white-space: nowrap; }
.level-amber .alert-days { color: var(--alert-amber); }
.dept-chip { color: #fff; }
.dept-sales { background: var(--dept-sales); } .dept-purchasing { background: var(--dept-purchasing); } .dept-pumps { background: var(--dept-pumps); } .dept-fabrication { background: var(--dept-fabrication); }

.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.week-day { display: grid; gap: 0.25rem; align-content: start; min-height: 6rem; padding: 0.4rem; border-radius: var(--radius-small); background: var(--fill); }
.week-today { background: var(--alert-blue-soft); outline: 2px solid var(--alert-blue); }
.week-name { margin: 0; font-size: 0.6875rem; font-weight: 700; color: var(--ink-soft); }
.week-none { margin: 0; font-size: 0.6875rem; color: #a3a3a8; }
.week-item { padding: 0.2rem 0.35rem; border-radius: 6px; color: #fff; font-size: 0.6875rem; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); }
.month-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.3rem; margin-top: var(--space-2); }
.month-col { display: grid; gap: 0.15rem; justify-items: center; font-size: 0.6875rem; color: var(--ink-soft); }
.month-track { display: flex; align-items: flex-end; width: 100%; height: 6rem; border-radius: 6px; background: var(--fill); }
.month-bar { width: 100%; border-radius: 6px; background: var(--line-strong); }
.month-bar-reached { background: var(--alert-green); } .month-bar-now { background: var(--gold); }
.month-value { min-height: 1em; font-variant-numeric: tabular-nums; }
@media (max-width: 70rem) { .command-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .week-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alert-row { flex-wrap: wrap; } .command-state { font-size: var(--step-1); } }
.command-panel .segmented { flex-wrap: wrap; max-width: 100%; }
.week-item { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.command-panel .section-bar { align-items: flex-start; }
.command-open { margin: 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-small); border: 2px dashed var(--alert-red); background: var(--alert-red-soft); color: var(--alert-red); font-size: var(--step--1); }
.command-user { margin: 0; text-align: right; font-size: var(--step--1); color: var(--ink-soft); }

/* ----- Data transfer ----- */
.transfer, .transfer-area { display: grid; gap: var(--space-3); }
.transfer .tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.transfer .tile { background: var(--fill); }
.transfer-safe { margin: 0; padding: 0.5rem 0.8rem; border-radius: var(--radius-small); background: var(--alert-green-soft); color: var(--alert-green); font-size: var(--step--1); font-weight: 600; }
.transfer-warnings { font-size: var(--step--1); }
.transfer-warnings summary { cursor: pointer; font-weight: 600; color: var(--alert-amber); }
.transfer-warnings ul { max-height: 16rem; overflow-y: auto; margin: var(--space-2) 0 0; padding-left: 1.2rem; color: var(--ink-soft); }
.transfer-progress { display: grid; gap: var(--space-2); }

/* ----- Status colours, everywhere -----
   Every status has a tone. The tone colours its tag, the left edge of its
   row in a list, and its column on a board. To change which colour a status
   has, move its name from one group below to another. */
.status-tag { --tone-soft: var(--tone-grey-soft); --tone-ink: var(--tone-grey-ink); --tone: var(--tone-grey); }
.status-tag, .status-tag[data-status] { background: var(--tone-soft); color: var(--tone-ink); }
.status-tag:not(.status-part):not(.status-dot)::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-radius: 50%; background: var(--tone); vertical-align: 0.05em; }
.status-tag.status-dot, .status-tag.status-dot[data-status] { background: var(--tone); }
.status-tag.status-part, .status-tag.status-part[data-status] { background: var(--tone); color: #fff; font-weight: 700; }
.record-row { border-left: 5px solid transparent; }
.board-column { border-top: 5px solid var(--tone, var(--tone-grey)); border-radius: var(--radius); }
.board-column h3 { color: var(--tone-ink, inherit); }
.board-card { border-left: 4px solid var(--tone, var(--tone-grey)); }
.status-tag[data-status='SUIVI A FAIRE'], .status-tag[data-status='LATE'], .status-tag[data-status='FOLLOW UP NEEDED'], .status-tag[data-status='REFAB'], .status-tag[data-status='URGENT'], .status-tag[data-status='OVERDUE'],
.board-column[data-status='SUIVI A FAIRE'], .board-column[data-status='LATE'], .board-column[data-status='FOLLOW UP NEEDED'], .board-column[data-status='REFAB'], .board-column[data-status='URGENT'], .board-column[data-status='OVERDUE'] { --tone-soft: var(--tone-red-soft); --tone-ink: var(--tone-red-ink); --tone: var(--tone-red); }
.record-row:has(> .status-tag[data-status='SUIVI A FAIRE']:last-child), .record-row:has(> .status-tag[data-status='LATE']:last-child), .record-row:has(> .status-tag[data-status='FOLLOW UP NEEDED']:last-child), .record-row:has(> .status-tag[data-status='REFAB']:last-child), .record-row:has(> .status-tag[data-status='URGENT']:last-child), .record-row:has(> .status-tag[data-status='OVERDUE']:last-child) { border-left-color: var(--tone-red); }
.status-tag[data-status='ATTEND PRIX'], .status-tag[data-status='TO ORDER'], .status-tag[data-status='WAITING INSPECTION'], .status-tag[data-status='WAITING NEW PUMP'], .status-tag[data-status='HIGH'],
.board-column[data-status='ATTEND PRIX'], .board-column[data-status='TO ORDER'], .board-column[data-status='WAITING INSPECTION'], .board-column[data-status='WAITING NEW PUMP'], .board-column[data-status='HIGH'] { --tone-soft: var(--tone-orange-soft); --tone-ink: var(--tone-orange-ink); --tone: var(--tone-orange); }
.record-row:has(> .status-tag[data-status='ATTEND PRIX']:last-child), .record-row:has(> .status-tag[data-status='TO ORDER']:last-child), .record-row:has(> .status-tag[data-status='WAITING INSPECTION']:last-child), .record-row:has(> .status-tag[data-status='WAITING NEW PUMP']:last-child), .record-row:has(> .status-tag[data-status='HIGH']:last-child) { border-left-color: var(--tone-orange); }
.status-tag[data-status='EN ATTEND'], .status-tag[data-status='REQUESTED'], .status-tag[data-status='WAITING ARRIVAL'], .status-tag[data-status='WAITING PARTS'], .status-tag[data-status='WAITING MATS'], .status-tag[data-status='REQUIRED'],
.board-column[data-status='EN ATTEND'], .board-column[data-status='REQUESTED'], .board-column[data-status='WAITING ARRIVAL'], .board-column[data-status='WAITING PARTS'], .board-column[data-status='WAITING MATS'], .board-column[data-status='REQUIRED'] { --tone-soft: var(--tone-amber-soft); --tone-ink: var(--tone-amber-ink); --tone: var(--tone-amber); }
.record-row:has(> .status-tag[data-status='EN ATTEND']:last-child), .record-row:has(> .status-tag[data-status='REQUESTED']:last-child), .record-row:has(> .status-tag[data-status='WAITING ARRIVAL']:last-child), .record-row:has(> .status-tag[data-status='WAITING PARTS']:last-child), .record-row:has(> .status-tag[data-status='WAITING MATS']:last-child), .record-row:has(> .status-tag[data-status='REQUIRED']:last-child) { border-left-color: var(--tone-amber); }
.status-tag[data-status='A FERME'], .status-tag[data-status='CONFIRMER'], .status-tag[data-status='RECU'], .status-tag[data-status='FULFILLED'], .status-tag[data-status='BC RECEIVED'], .status-tag[data-status='PURCHASE ORDER RECEIVED'], .status-tag[data-status='RECEIVED'],
.board-column[data-status='A FERME'], .board-column[data-status='CONFIRMER'], .board-column[data-status='RECU'], .board-column[data-status='FULFILLED'], .board-column[data-status='BC RECEIVED'], .board-column[data-status='PURCHASE ORDER RECEIVED'], .board-column[data-status='RECEIVED'] { --tone-soft: var(--tone-green-soft); --tone-ink: var(--tone-green-ink); --tone: var(--tone-green); }
.record-row:has(> .status-tag[data-status='A FERME']:last-child), .record-row:has(> .status-tag[data-status='CONFIRMER']:last-child), .record-row:has(> .status-tag[data-status='RECU']:last-child), .record-row:has(> .status-tag[data-status='FULFILLED']:last-child), .record-row:has(> .status-tag[data-status='BC RECEIVED']:last-child), .record-row:has(> .status-tag[data-status='PURCHASE ORDER RECEIVED']:last-child), .record-row:has(> .status-tag[data-status='RECEIVED']:last-child) { border-left-color: var(--tone-green); }
.status-tag[data-status='PARTIALY DELIVERED'], .status-tag[data-status='CONFIRMED'], .status-tag[data-status='READY'], .status-tag[data-status='INSPECTION DONE'], .status-tag[data-status='SHIPPING'], .status-tag[data-status='WAITING DELIVERY'],
.board-column[data-status='PARTIALY DELIVERED'], .board-column[data-status='CONFIRMED'], .board-column[data-status='READY'], .board-column[data-status='INSPECTION DONE'], .board-column[data-status='SHIPPING'], .board-column[data-status='WAITING DELIVERY'] { --tone-soft: var(--tone-teal-soft); --tone-ink: var(--tone-teal-ink); --tone: var(--tone-teal); }
.record-row:has(> .status-tag[data-status='PARTIALY DELIVERED']:last-child), .record-row:has(> .status-tag[data-status='CONFIRMED']:last-child), .record-row:has(> .status-tag[data-status='READY']:last-child), .record-row:has(> .status-tag[data-status='INSPECTION DONE']:last-child), .record-row:has(> .status-tag[data-status='SHIPPING']:last-child), .record-row:has(> .status-tag[data-status='WAITING DELIVERY']:last-child) { border-left-color: var(--tone-teal); }
.status-tag[data-status='SUIVI FAIT'], .status-tag[data-status='IN PRODUCTION'], .status-tag[data-status='FOLLOW UP DONE'], .status-tag[data-status='ORDERED'], .status-tag[data-status='IN PREPARATION'], .status-tag[data-status='QUOTE SENT'], .status-tag[data-status='WAITING ASSEMBLE'],
.board-column[data-status='SUIVI FAIT'], .board-column[data-status='IN PRODUCTION'], .board-column[data-status='FOLLOW UP DONE'], .board-column[data-status='ORDERED'], .board-column[data-status='IN PREPARATION'], .board-column[data-status='QUOTE SENT'], .board-column[data-status='WAITING ASSEMBLE'] { --tone-soft: var(--tone-blue-soft); --tone-ink: var(--tone-blue-ink); --tone: var(--tone-blue); }
.record-row:has(> .status-tag[data-status='SUIVI FAIT']:last-child), .record-row:has(> .status-tag[data-status='IN PRODUCTION']:last-child), .record-row:has(> .status-tag[data-status='FOLLOW UP DONE']:last-child), .record-row:has(> .status-tag[data-status='ORDERED']:last-child), .record-row:has(> .status-tag[data-status='IN PREPARATION']:last-child), .record-row:has(> .status-tag[data-status='QUOTE SENT']:last-child), .record-row:has(> .status-tag[data-status='WAITING ASSEMBLE']:last-child) { border-left-color: var(--tone-blue); }
.status-tag[data-status='ATTEND INFO'], .status-tag[data-status='PARTIALLY RECEIVED'], .status-tag[data-status='WAITING QUOTE'], .status-tag[data-status='QUOTING'],
.board-column[data-status='ATTEND INFO'], .board-column[data-status='PARTIALLY RECEIVED'], .board-column[data-status='WAITING QUOTE'], .board-column[data-status='QUOTING'] { --tone-soft: var(--tone-purple-soft); --tone-ink: var(--tone-purple-ink); --tone: var(--tone-purple); }
.record-row:has(> .status-tag[data-status='ATTEND INFO']:last-child), .record-row:has(> .status-tag[data-status='PARTIALLY RECEIVED']:last-child), .record-row:has(> .status-tag[data-status='WAITING QUOTE']:last-child), .record-row:has(> .status-tag[data-status='QUOTING']:last-child) { border-left-color: var(--tone-purple); }
.status-tag[data-status='BILLING'], .status-tag[data-status='WAITING PAYMENT'],
.board-column[data-status='BILLING'], .board-column[data-status='WAITING PAYMENT'] { --tone-soft: var(--tone-pink-soft); --tone-ink: var(--tone-pink-ink); --tone: var(--tone-pink); }
.record-row:has(> .status-tag[data-status='BILLING']:last-child), .record-row:has(> .status-tag[data-status='WAITING PAYMENT']:last-child) { border-left-color: var(--tone-pink); }
.status-tag[data-status='PERDU'], .status-tag[data-status='FERME'], .status-tag[data-status='CLOSED'], .status-tag[data-status='CANCELLED'], .status-tag[data-status='NOT REQUIRED'],
.board-column[data-status='PERDU'], .board-column[data-status='FERME'], .board-column[data-status='CLOSED'], .board-column[data-status='CANCELLED'], .board-column[data-status='NOT REQUIRED'] { --tone-soft: var(--tone-grey-soft); --tone-ink: var(--tone-grey-ink); --tone: var(--tone-grey); }
.record-row:has(> .status-tag[data-status='PERDU']:last-child), .record-row:has(> .status-tag[data-status='FERME']:last-child), .record-row:has(> .status-tag[data-status='CLOSED']:last-child), .record-row:has(> .status-tag[data-status='CANCELLED']:last-child), .record-row:has(> .status-tag[data-status='NOT REQUIRED']:last-child) { border-left-color: var(--tone-grey); }
/* Those that mean "act now" stay solid. */
.status-tag[data-status='LATE']:not(.status-dot):not(.status-part), .status-tag[data-status='SUIVI A FAIRE']:not(.status-dot):not(.status-part), .status-tag[data-status='URGENT'], .status-tag[data-status='OVERDUE'] { background: var(--tone-red); color: #fff; }
.status-tag[data-status='LATE']::before, .status-tag[data-status='SUIVI A FAIRE']::before, .status-tag[data-status='URGENT']::before, .status-tag[data-status='OVERDUE']::before { background: #fff; }
/* A record's own status box takes its status's colour too. */
select[data-status] { font-weight: 700; color: var(--tone-ink, inherit); }
select[data-status='SUIVI A FAIRE'], select[data-status='LATE'], select[data-status='FOLLOW UP NEEDED'], select[data-status='REFAB'], select[data-status='URGENT'], select[data-status='OVERDUE'] { --tone-ink: var(--tone-red-ink); }
select[data-status='ATTEND PRIX'], select[data-status='TO ORDER'], select[data-status='WAITING INSPECTION'], select[data-status='WAITING NEW PUMP'], select[data-status='HIGH'] { --tone-ink: var(--tone-orange-ink); }
select[data-status='EN ATTEND'], select[data-status='REQUESTED'], select[data-status='WAITING ARRIVAL'], select[data-status='WAITING PARTS'], select[data-status='WAITING MATS'], select[data-status='REQUIRED'] { --tone-ink: var(--tone-amber-ink); }
select[data-status='A FERME'], select[data-status='CONFIRMER'], select[data-status='RECU'], select[data-status='FULFILLED'], select[data-status='BC RECEIVED'], select[data-status='PURCHASE ORDER RECEIVED'], select[data-status='RECEIVED'] { --tone-ink: var(--tone-green-ink); }
select[data-status='PARTIALY DELIVERED'], select[data-status='CONFIRMED'], select[data-status='READY'], select[data-status='INSPECTION DONE'], select[data-status='SHIPPING'], select[data-status='WAITING DELIVERY'] { --tone-ink: var(--tone-teal-ink); }
select[data-status='SUIVI FAIT'], select[data-status='IN PRODUCTION'], select[data-status='FOLLOW UP DONE'], select[data-status='ORDERED'], select[data-status='IN PREPARATION'], select[data-status='QUOTE SENT'], select[data-status='WAITING ASSEMBLE'] { --tone-ink: var(--tone-blue-ink); }
select[data-status='ATTEND INFO'], select[data-status='PARTIALLY RECEIVED'], select[data-status='WAITING QUOTE'], select[data-status='QUOTING'] { --tone-ink: var(--tone-purple-ink); }
select[data-status='BILLING'], select[data-status='WAITING PAYMENT'] { --tone-ink: var(--tone-pink-ink); }
select[data-status='PERDU'], select[data-status='FERME'], select[data-status='CLOSED'], select[data-status='CANCELLED'], select[data-status='NOT REQUIRED'] { --tone-ink: var(--tone-grey-ink); }

/* ----- The side panel of a quote or order ----- */
.screen:has(.record-layout) { max-width: 96rem; }
.record-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-4); align-items: start; }
.record-main-column { min-width: 0; }
.record-side { display: grid; gap: var(--space-3); position: sticky; top: var(--space-3); }
.side-card { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.side-card h3 { margin: 0; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.side-figures { display: grid; gap: var(--space-2); }
.side-figures span, .side-fact span { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.side-big strong { font-size: var(--step-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.side-pair, .side-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.side-pair strong { font-size: var(--step-0); font-variant-numeric: tabular-nums; }
.side-margin { padding: 0.5rem 0.7rem; border-radius: var(--radius-small); }
.side-margin strong { font-size: var(--step-1); }
.side-margin-track { height: 6px; margin-top: 0.3rem; border-radius: 3px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
.side-margin-fill { height: 100%; border-radius: 3px; }
.tone-green { --t: var(--tone-green); --ts: var(--tone-green-soft); --ti: var(--tone-green-ink); }
.tone-amber { --t: var(--tone-amber); --ts: var(--tone-amber-soft); --ti: var(--tone-amber-ink); }
.tone-red { --t: var(--tone-red); --ts: var(--tone-red-soft); --ti: var(--tone-red-ink); }
.tone-blue { --t: var(--tone-blue); --ts: var(--tone-blue-soft); --ti: var(--tone-blue-ink); }
.tone-grey { --t: var(--tone-grey); --ts: var(--tone-grey-soft); --ti: var(--tone-grey-ink); }
.tone-orange { --t: var(--tone-orange); --ts: var(--tone-orange-soft); --ti: var(--tone-orange-ink); }
.tone-purple { --t: var(--tone-purple); --ts: var(--tone-purple-soft); --ti: var(--tone-purple-ink); }
.tone-pink { --t: var(--tone-pink); --ts: var(--tone-pink-soft); --ti: var(--tone-pink-ink); }
.tone-teal { --t: var(--tone-teal); --ts: var(--tone-teal-soft); --ti: var(--tone-teal-ink); }
.side-margin { background: var(--ts); }
.side-margin strong, .side-margin span { color: var(--ti); }
.side-margin-fill { background: var(--t); }
.side-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.side-step { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-2); padding: 0.35rem 0 0.35rem 1.4rem; }
.side-step::before { content: ''; position: absolute; left: 0.2rem; top: 0.65rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--t); }
.side-step::after { content: ''; position: absolute; left: 0.5rem; top: 1.4rem; bottom: -0.6rem; width: 2px; background: var(--line); }
.side-step:last-child::after { display: none; }
.step-none::before { background: var(--panel); border: 2px solid var(--tone-grey); }
.step-next::before { box-shadow: 0 0 0 3px var(--ts); }
.side-step-label { font-weight: 600; }
.side-step-date { font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.step-none .side-step-label { font-weight: 400; color: var(--ink-soft); }
.side-step-note { grid-column: 1 / -1; justify-self: start; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--ts); color: var(--ti); font-size: 0.75rem; font-weight: 700; }
.step-done .side-step-note { background: none; padding: 0; color: var(--ink-soft); font-weight: 400; }
.side-customer { display: grid; gap: var(--space-2); }
.side-fact { padding: 0.45rem 0.6rem; border-radius: var(--radius-small); background: var(--fill); }
.side-fact strong { font-size: var(--step-0); font-variant-numeric: tabular-nums; }
.side-fact small { display: block; font-size: 0.6875rem; color: var(--ink-soft); }
.side-sub { margin: var(--space-1) 0 0; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); }
.side-other { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0.35rem 0.5rem; border-radius: var(--radius-small); color: inherit; text-decoration: none; }
.side-other:hover { background: var(--fill); }
.side-other-main { display: grid; font-size: var(--step--1); }
.side-other-main span { color: var(--ink-soft); }
.side-other .status-tag { flex: 0 0 auto; }
@media (max-width: 75rem) { .record-layout { grid-template-columns: minmax(0, 1fr); } .record-side { position: static; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }

/* ----- The master search, at the top of every page ----- */
.master-search { position: sticky; top: 0; z-index: 20; padding: var(--space-3) var(--space-5) 0; background: linear-gradient(var(--page) 75%, transparent); }
.master-search-input { width: 100%; max-width: 46rem; padding: 0.7rem 1.1rem; border: 2px solid transparent; border-radius: 999px; background: var(--panel); font: inherit; color: inherit; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.master-search-input:focus { outline: none; border-color: var(--gold); }
.master-search-results { position: absolute; left: var(--space-5); right: var(--space-5); top: 100%; max-width: 46rem; max-height: min(70vh, 38rem); overflow-y: auto; margin-top: 0.3rem; padding: var(--space-2);
  border-radius: var(--radius); background: var(--panel); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); }
.master-heading { margin: var(--space-2) 0 0.15rem; padding: 0 0.6rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.master-heading:first-child { margin-top: 0.2rem; }
.dept-text-sales { color: var(--dept-sales); } .dept-text-purchasing { color: var(--dept-purchasing); } .dept-text-pumps { color: var(--dept-pumps); } .dept-text-fabrication { color: var(--dept-fabrication); }
.master-hit { display: flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.6rem; border-radius: var(--radius-small); color: inherit; text-decoration: none; }
.master-hit:hover, .master-hit-on { background: var(--fill); }
.master-hit-on { box-shadow: inset 3px 0 0 var(--gold); }
.master-dot { flex: 0 0 0.6rem; height: 0.6rem; border-radius: 50%; }
.master-hit-main { display: grid; flex: 1 1 auto; min-width: 0; }
.master-hit-main span { font-size: var(--step--1); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.master-hit .status-tag { flex: 0 0 auto; }
.master-none { margin: 0; padding: var(--space-3); color: var(--ink-soft); }
.title-block { padding-top: var(--space-3); }
@media (max-width: 760px) { .master-search { padding: var(--space-2) var(--space-3) 0; } .master-search-results { left: var(--space-3); right: var(--space-3); } }
@media print { .master-search { display: none !important; } }

/* ----- Formatted text: the editor, and the text wherever it is shown ----- */
.rich-editor { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.rich-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.rich-head .history-heading { margin: 0; }
.rich-frame { border-radius: var(--radius); background: var(--panel); border: 2px solid transparent; }
.rich-frame:focus-within { border-color: var(--gold); }
.rich-toolbar { position: sticky; top: 3.6rem; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: var(--panel-hover); }
.rich-group { display: inline-flex; align-items: center; gap: 0.2rem; padding-right: var(--space-2); border-right: 1px solid var(--line); }
.rich-group:last-of-type { border-right: 0; }
.rich-button { min-width: 2rem; padding: 0.3rem 0.55rem; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: var(--step--1); cursor: pointer; }
.rich-button:hover { background: var(--fill-strong); }
.rich-button-on, .rich-button-on:hover { background: var(--crimson); color: #fff; }
.rich-b { font-weight: 800; } .rich-i { font-style: italic; font-family: Georgia, serif; } .rich-u { text-decoration: underline; } .rich-s { text-decoration: line-through; }
.rich-dot { min-width: 0; width: 1.25rem; height: 1.25rem; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.rich-dot[data-tone='red'] { background: var(--tone-red); } .rich-dot[data-tone='amber'] { background: var(--tone-amber); }
.rich-dot[data-tone='green'] { background: var(--tone-green); } .rich-dot[data-tone='blue'] { background: var(--tone-blue); }
.rich-dot-plain { background: var(--ink); }
.rich-dot:hover { transform: scale(1.15); }
.rich-mark { background: #fff3a3; }
.rich-box { padding: var(--space-3) var(--space-4); outline: none; overflow-wrap: anywhere; }
.rich-box.rich-empty::before { content: 'Type here. Select text to format it.'; color: #a3a3a8; pointer-events: none; }
.rich-text { line-height: 1.5; }
.rich-text p { margin: 0 0 0.5rem; }
.rich-text h3, .rich-text h4, .report-block .rich-text h3 { margin: 0.7rem 0 0.3rem; font-size: 1.1rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); }
.rich-text ul, .rich-text ol { margin: 0 0 0.5rem; padding-left: 1.5rem; }
.rich-text li { margin-bottom: 0.15rem; }
.rich-text blockquote { margin: 0 0 0.5rem; padding-left: var(--space-3); border-left: 3px solid var(--line); }
.rich-text mark { padding: 0 0.15em; border-radius: 3px; background: #fff3a3; color: inherit; }
.rich-text [data-tone='red'] { color: var(--tone-red); } .rich-text [data-tone='amber'] { color: #a86f00; }
.rich-text [data-tone='green'] { color: var(--tone-green); } .rich-text [data-tone='blue'] { color: var(--tone-blue); }
.rich-text > :last-child { margin-bottom: 0; }
@media print { .rich-text mark { background: #fff3a3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .rich-text [data-tone] { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.rich-text ul { list-style: disc; } .rich-text ol { list-style: decimal; } .rich-text ul ul { list-style: circle; }

/* ----- Quality of life ----- */
/* The bar with the Save button stays in view under the search box. */
.record-bar { position: sticky; top: 3.7rem; z-index: 15; margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); padding: var(--space-2); border-radius: var(--radius); background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(8px); }
.cad .record-bar { position: static; }
/* Unsaved changes are plain to see: the note turns amber and Save glows gold. */
.save-note:not(:empty) { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--tone-amber-soft); color: var(--tone-amber-ink); font-weight: 700; }
.record-bar .button-primary:not(:disabled) { box-shadow: 0 0 0 3px var(--gold); animation: save-glow 1.6s ease-in-out infinite; }
@keyframes save-glow { 50% { box-shadow: 0 0 0 6px rgba(212, 167, 44, 0.35); } }
@media (prefers-reduced-motion: reduce) { .record-bar .button-primary:not(:disabled) { animation: none; } }

/* Status buttons with counts above the lists. */
.status-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 var(--space-2); }
.status-tag.status-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; border: 2px solid transparent; font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer; }
.status-tag.status-chip:not([data-status]) { background: var(--panel); color: var(--ink); }
.status-tag.status-chip:not([data-status])::before { background: var(--ink); }
.status-chip:hover { filter: brightness(0.96); }
.status-chip-on { border-color: currentColor !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.status-chip-count { min-width: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: color-mix(in srgb, var(--panel) 75%, transparent); color: var(--ink); font-size: 0.75rem; text-align: center; }

/* "Saved" and other short messages. */
.toasts { position: fixed; left: 50%; bottom: var(--space-4); z-index: 100; display: grid; gap: var(--space-2); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); animation: toast-in 0.25s ease-out; transition: opacity 0.5s, transform 0.5s; }
.toast-mark { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--tone-green); font-size: 0.8rem; }
.toast-amber .toast-mark { background: var(--tone-amber); }
.toast-going { opacity: 0; transform: translateY(0.5rem); }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.75rem); } }
@media print { .toasts { display: none; } .record-bar { position: static; } }

/* ----- Follow-ups board ----- */
.dept-followups { background: var(--dept-followups); }
.dept-text-followups { color: var(--dept-followups); }
.status-tag[data-status='TO DO'] { --tone-soft: var(--tone-blue-soft); --tone-ink: var(--tone-blue-ink); --tone: var(--tone-blue); }
.status-tag[data-status='WAITING FOR'] { --tone-soft: var(--tone-purple-soft); --tone-ink: var(--tone-purple-ink); --tone: var(--tone-purple); }
.status-tag[data-status='FOLLOW-UP'] { --tone-soft: var(--tone-orange-soft); --tone-ink: var(--tone-orange-ink); --tone: var(--tone-orange); }
.fu-blue { --t: var(--tone-blue); --ts: var(--tone-blue-soft); --ti: var(--tone-blue-ink); }
.fu-purple { --t: var(--tone-purple); --ts: var(--tone-purple-soft); --ti: var(--tone-purple-ink); }
.fu-orange { --t: var(--tone-orange); --ts: var(--tone-orange-soft); --ti: var(--tone-orange-ink); }
.tone-sales { --t: var(--dept-sales); --ts: color-mix(in srgb, var(--dept-sales) 14%, var(--panel)); --ti: var(--dept-sales); }
.tone-text-red { color: var(--tone-red-ink); } .tone-text-amber { color: var(--tone-amber-ink); } .tone-text-blue { color: var(--tone-blue-ink); } .tone-text-grey { color: var(--ink-soft); }

.fu-hint { margin: 0 0 var(--space-2); padding: 0.6rem 0.9rem; border-radius: var(--radius-small); background: var(--panel); color: var(--ink-soft); font-size: var(--step--1); }
.fu-hint strong { color: var(--ink); }
.fu-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.fu-stat { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--ts); color: var(--ti); font-size: var(--step--1); font-weight: 600; }
.fu-stat strong { font-size: var(--step-1); }

/* As many columns as the owner keeps: side by side on the page's full
   width, wrapping onto a second row when they do not fit, so none is ever
   hidden; one under the other on a phone. */
.screen:has(.fu-board) { max-width: none; }
.fu-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: var(--space-3); align-items: start; }
@media (max-width: 40rem) { .fu-board { grid-template-columns: 1fr; } }
.fu-column { display: grid; gap: var(--space-2); min-height: 16rem; padding: var(--space-2); border-radius: var(--radius); border-top: 6px solid var(--t); background: color-mix(in srgb, var(--ts) 45%, var(--panel)); transition: box-shadow 0.15s, background 0.15s; }
.fu-column.fu-over { background: var(--ts); box-shadow: 0 0 0 3px var(--t) inset; }
.fu-column-head { padding: var(--space-1) var(--space-1) 0; }
.fu-column-head h3 { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: var(--step-1); color: var(--ti); }
.fu-column-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fu-column-head p { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.fu-count { min-width: 1.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--t); color: #fff; font-size: var(--step--1); text-align: center; }
.fu-drop { padding: 0.7rem; border: 2px dashed var(--t); border-radius: var(--radius-small); background: color-mix(in srgb, var(--panel) 60%, transparent); color: var(--ti); font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; }
.fu-drop:hover, .fu-over .fu-drop { background: var(--panel); }
.fu-column-body { display: grid; gap: var(--space-2); }
.fu-group { margin: var(--space-1) 0 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.fu-empty { margin: 0; padding: var(--space-3) var(--space-2); color: var(--ink-soft); font-size: var(--step--1); text-align: center; }

.fu-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; padding: 0.7rem 0.8rem; border-radius: var(--radius-small); border-left: 4px solid var(--t); background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); cursor: pointer; }
.fu-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); }
.fu-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.fu-card-late { border-left-color: var(--tone-red); background: color-mix(in srgb, var(--tone-red-soft) 35%, var(--panel)); }
.fu-card-high .fu-title::before { content: '● '; color: var(--tone-red); }
.fu-dragging { opacity: 0.4; }
.fu-card-main { display: grid; gap: 0.15rem; min-width: 0; }
.fu-title { overflow-wrap: anywhere; line-height: 1.3; }
.fu-contact { font-size: var(--step--1); color: var(--ink-soft); }
.fu-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.fu-tags:empty { display: none; }
.fu-tag { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--ts); color: var(--ti); font-size: 0.72rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
a.fu-tag:hover { text-decoration: underline; }
.fu-tick { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: 0.05rem; border: 2px solid var(--t); border-radius: 50%; background: var(--panel); color: transparent; font-size: 0.85rem; font-weight: 800; cursor: pointer; }
.fu-tick:hover { color: var(--t); }
.fu-tick-on { background: var(--tone-green); border-color: var(--tone-green); color: #fff; }

.fu-choice { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fu-choice-button { padding: 0.4rem 0.8rem; border: 2px solid var(--t); border-radius: 999px; background: var(--panel); color: var(--ti); font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer; }
.fu-choice-on { background: var(--t); color: #fff; }
.fu-due { display: grid; gap: 0.35rem; }
.fu-quick { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.button-small { padding: 0.25rem 0.6rem; font-size: var(--step--1); }
.fu-high { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.fu-email { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--fill); }
.fu-email h3 { margin: 0; font-size: var(--step-0); }
.fu-email dl { display: grid; gap: 0.2rem; margin: 0; }
.fu-email dl div { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-2); }
.fu-email dt { color: var(--ink-soft); font-size: var(--step--1); }
.fu-email dd { margin: 0; overflow-wrap: anywhere; }
.fu-email-body { max-height: 22rem; overflow: auto; padding: var(--space-3); border-radius: var(--radius-small); background: var(--panel); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--step--1); line-height: 1.5; }
.sheet-body > .fu-email { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
.fu-due-words { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }

/* ----- Délais tool ----- */
.delais-section { border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.delais-section > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: 0.7rem var(--space-3); background: var(--crimson); color: #fff; cursor: pointer; list-style: none; }
.delais-section > summary::-webkit-details-marker { display: none; }
.delais-section > summary::before { content: '▸'; margin-right: 0.4rem; color: var(--gold); transition: transform 0.15s; }
.delais-section[open] > summary::before { transform: rotate(90deg); }
.delais-title { flex: 1; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.delais-tag { font-size: 0.75rem; color: var(--gold-bright); }
.delais { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--space-3); padding: var(--space-3); background: var(--fill); }
.sheet-body > .delais { padding: 0; background: none; }
.delais-panel { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); border-radius: var(--radius-small); border: 1px solid var(--line); background: var(--panel); }
.delais-panel-head { display: flex; justify-content: space-between; align-items: start; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.delais-panel-head h4 { margin: 0; font-size: var(--step-0); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.delais-panel-head p { margin: 0; font-size: 0.75rem; color: var(--ink-soft); }
.delais-number { padding: 0.15rem 0.45rem; border: 1px solid var(--gold); border-radius: 4px; color: var(--crimson-ink); font-size: 0.75rem; font-weight: 700; }
.delais-inputs, .delais-results { display: grid; gap: var(--space-2); }
.delais-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.delais-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.delais-field { display: grid; gap: 0.25rem; min-width: 0; }
.delais-field > span, .delais-result > span, .delais-buffer > span:first-child { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.delais-field input, .delais-field select { width: 100%; min-width: 0; padding: 0.45rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); font: inherit; font-weight: 600; }
.delais-buffer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0.45rem 0.7rem; border: 1px dashed var(--gold); border-radius: var(--radius-small); background: var(--tone-amber-soft); }
.delais-buffer-value { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 800; color: var(--tone-amber-ink); }
.delais-buffer-input { width: 3.5rem; padding: 0.15rem 0.3rem; border: 1px solid var(--gold); border-radius: 4px; background: var(--panel); font: inherit; font-weight: 800; text-align: center; }
.delais-result { display: grid; gap: 0.15rem; align-content: start; min-width: 0; padding: 0.6rem 0.7rem; border-radius: var(--radius-small); background: var(--fill); }
.delais-result strong { font-size: var(--step-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.delais-result small { font-size: 0.75rem; color: var(--ink-soft); }
.delais-main { background: var(--tone-blue-soft); }
.delais-main strong { color: var(--tone-blue-ink); }
.delais-use { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.delais-use[hidden] { display: none; }
.delais-note { margin: 0; font-size: 0.75rem; color: var(--ink-soft); }
.field-filled { animation: field-filled 1.5s ease-out; }
@keyframes field-filled { from { background: var(--tone-amber-soft); } }
@media (max-width: 30rem) { .delais-three { grid-template-columns: 1fr 1fr; } }
.delais-calc { grid-template-columns: minmax(8.5rem, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr); }
.delais-result strong { line-height: 1.15; overflow-wrap: normal; }
@media (max-width: 30rem) { .delais-calc { grid-template-columns: 1fr 1fr; } .delais-calc > :first-child { grid-column: 1 / -1; } }
.delais-buffer-value { white-space: nowrap; font-size: var(--step--1); }
/* In the side panel the tool is narrow: one panel under the other. */
.record-side .delais-section { box-shadow: none; }
.record-side .delais-section > summary { padding: 0.6rem var(--space-3); }
.record-side .delais-tag { display: none; }
.record-side .delais { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2); }
.record-side .delais-panel { padding: var(--space-2); }
.record-side .delais-calc { grid-template-columns: 1fr 1fr; }
.record-side .delais-calc > :first-child { grid-column: 1 / -1; }
.record-side .delais-results.delais-three { grid-template-columns: 1fr 1fr; }
.record-side .delais-results.delais-three > :last-child { grid-column: 1 / -1; }
.record-side .delais-inputs.delais-two { grid-template-columns: minmax(0, 1fr); }
.record-side .delais-result strong { font-size: var(--step-0); }
.delais-skipped { margin: 0; padding: 0.35rem 0.6rem; border-radius: var(--radius-small); background: var(--tone-purple-soft); color: var(--tone-purple-ink); font-size: 0.75rem; font-weight: 600; }
.delais-skipped:empty { display: none; }
.delais-holidays { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: var(--step--1); font-weight: 600; }
.delais-holidays span { flex-basis: 100%; font-size: 0.72rem; font-weight: 400; color: var(--ink-soft); }

/* ----- Ticking many rows at once ----- */
.button-on { background: var(--crimson); color: #fff; }
.bulk-row { display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-2); }
.bulk-row > .record-row { flex: 1; min-width: 0; }
.bulk-tick { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--crimson); cursor: pointer; }
.bulk-chosen { background: var(--tone-amber-soft); }
.bulk-bar { position: fixed; left: 50%; bottom: var(--space-3); z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  width: min(56rem, calc(100vw - 2rem)); padding: 0.7rem var(--space-3); border-radius: var(--radius); border-top: 4px solid var(--gold); background: var(--crimson-deep); color: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3); transform: translateX(-50%); }
.bulk-bar[hidden] { display: none; }
.bulk-all { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.bulk-all input { accent-color: var(--gold); }
.bulk-count { color: var(--gold-bright); }
.bulk-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.bulk-bar .button-plain { color: #fff; }
body:has(.bulk-bar:not([hidden])) .toasts { bottom: 6.5rem; }
.bulk-bar select { background: var(--panel); color: var(--ink); }
.bulk-bar .button-primary { background: var(--gold); color: var(--crimson-deep); }
.bulk-bar .button:disabled { opacity: 0.45; }
body:has(.bulk-bar:not([hidden])) #screen { padding-bottom: 6rem; }

/* ----- Customer page ----- */
.cust-code { margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 6px; background: var(--fill); color: var(--ink-soft); font-size: var(--step--1); font-weight: 600; vertical-align: middle; }
.cust-contact { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); padding: 0.7rem var(--space-3); border-radius: var(--radius); background: var(--panel); }
.cust-contact a { color: var(--crimson-ink); text-decoration: none; font-weight: 600; }
.cust-notes { color: var(--ink-soft); }
.cust-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.cust-tile { display: grid; gap: 0.15rem; padding: 0.8rem var(--space-3); border-radius: var(--radius); border-top: 4px solid var(--t); background: var(--panel); }
.cust-tile span { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.cust-tile strong { font-size: var(--step-2); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ti); }
.cust-tile small { font-size: 0.78rem; color: var(--ink-soft); }
.tone-purple { --t: var(--tone-purple); --ts: var(--tone-purple-soft); --ti: var(--tone-purple-ink); }
.tone-orange { --t: var(--tone-orange); --ts: var(--tone-orange-soft); --ti: var(--tone-orange-ink); }
.cust-card { margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.cust-card h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--space-2); font-size: var(--step-0); }
.cust-card h3 > span { font-size: var(--step--1); color: var(--ink-soft); }
.cust-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.4rem; height: 11rem; align-items: end; }
.cust-month { display: grid; grid-template-rows: auto 1fr auto; height: 100%; align-items: end; text-align: center; }
.cust-month-value { font-size: 0.68rem; font-weight: 700; color: var(--ink-soft); }
.cust-bar { align-self: end; width: 100%; min-height: 2px; border-radius: 5px 5px 0 0; background: var(--crimson); }
.cust-bar-now { background: var(--gold); }
.cust-bar-empty { background: var(--line); }
.cust-month-name { padding-top: 0.25rem; font-size: 0.72rem; color: var(--ink-soft); }
.cust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 0 var(--space-3); }
@media (max-width: 30rem) { .cust-grid { grid-template-columns: 1fr; } }
.cust-list { border-top: 5px solid var(--t); }
.cust-list h3 { color: var(--ti); }
.cust-count { min-width: 1.7rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--t); color: #fff !important; text-align: center; }
.cust-list .record-list { margin: 0; }
.cust-empty { margin: 0; padding: var(--space-2) 0; color: var(--ink-soft); font-size: var(--step--1); }
.cust-past > summary { cursor: pointer; font-weight: 700; }
.cust-past[open] > summary { margin-bottom: var(--space-2); }
.side-link { display: block; margin-top: var(--space-2); color: var(--crimson-ink); font-weight: 600; text-decoration: none; }

/* ----- Calendar ----- */
.dept-fill-sales { --d: var(--dept-sales); } .dept-fill-purchasing { --d: var(--dept-purchasing); } .dept-fill-pumps { --d: var(--dept-pumps); }
.dept-fill-fabrication { --d: var(--dept-fabrication); } .dept-fill-followups { --d: var(--dept-followups); }
.dept-edge-sales { --d: var(--dept-sales); } .dept-edge-purchasing { --d: var(--dept-purchasing); } .dept-edge-pumps { --d: var(--dept-pumps); }
.dept-edge-fabrication { --d: var(--dept-fabrication); } .dept-edge-followups { --d: var(--dept-followups); }
.cal-toolbar { align-items: center; }
.cal-title { min-width: 11rem; margin: 0; font-size: var(--step-2); text-align: center; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: var(--space-2); }
.cal-filter { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem; border: 2px solid var(--d); border-radius: 999px; background: var(--d); color: #fff; font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer; }
.cal-filter span { padding: 0 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.cal-filter-off { background: var(--panel); color: var(--d); opacity: 0.75; }
.cal-note { margin: 0 0 var(--space-2); padding: 0.45rem 0.8rem; border-radius: var(--radius-small); background: var(--tone-red-soft); color: var(--tone-red-ink); font-size: var(--step--1); font-weight: 600; }
.cal-note[hidden] { display: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.cal-head { padding: 0.4rem; background: var(--crimson); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }
.cal-cell { display: flex; flex-direction: column; gap: 3px; min-height: 7.2rem; min-width: 0; padding: 0.3rem; background: var(--panel); cursor: pointer; }
.cal-cell:hover { background: var(--panel-hover); }
.cal-cell:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.cal-weekend { background: var(--fill); }
.cal-other { opacity: 0.45; }
.cal-holiday { background: var(--tone-purple-soft); }
.cal-today { box-shadow: inset 0 0 0 3px var(--gold); }
.cal-chosen { box-shadow: inset 0 0 0 3px var(--crimson); }
.cal-date { display: flex; justify-content: space-between; align-items: center; font-size: var(--step--1); font-weight: 700; }
.cal-today .cal-date { color: var(--crimson-ink); }
.cal-count { padding: 0 0.4rem; border-radius: 999px; background: var(--fill); color: var(--ink-soft); font-size: 0.68rem; }
.cal-has-late .cal-count { background: var(--tone-red); color: #fff; }
.cal-holiday-name { margin-left: 0.4rem; color: var(--tone-purple-ink); font-size: 0.68rem; font-weight: 700; }
.cal-cell .cal-holiday-name { margin: 0; }
.cal-event { display: block; overflow: hidden; padding: 1px 0.35rem; border-radius: 4px; background: var(--d); color: #fff; font-size: 0.7rem; font-weight: 600; line-height: 1.45; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.cal-event:hover { filter: brightness(1.12); }
.cal-event.cal-late { box-shadow: inset 0 0 0 2px var(--tone-red); background: color-mix(in srgb, var(--d) 75%, var(--tone-red)); }
.cal-more { font-size: 0.68rem; font-weight: 700; color: var(--ink-soft); }
.cal-day { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius); border-top: 5px solid var(--crimson); background: var(--panel); }
.cal-day[hidden] { display: none; }
.cal-day h4, .cal-agenda-day h4 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--step-0); }
.cal-day h4 .button { margin-left: auto; }
.cal-agenda { display: grid; gap: var(--space-2); }
.cal-agenda-day { padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.cal-agenda-day.cal-today { box-shadow: inset 0 0 0 3px var(--gold); }
.cal-agenda-row { display: grid; grid-template-columns: 9rem minmax(8rem, auto) 1fr auto; align-items: center; gap: var(--space-2); padding: 0.45rem 0.6rem; border-left: 5px solid var(--d); border-radius: var(--radius-small); background: var(--fill); color: inherit; text-decoration: none; }
.cal-agenda-row + .cal-agenda-row { margin-top: 4px; }
.cal-agenda-row:hover { background: var(--fill-strong); }
.cal-agenda-row > span:nth-child(3) { overflow: hidden; color: var(--ink-soft); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }
.cal-kind { justify-self: start; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--d); color: #fff; font-size: 0.7rem; font-weight: 700; }
.cal-agenda-row.cal-late { background: var(--tone-red-soft); }
.cal-late-tag { padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--tone-red); color: #fff; font-size: 0.68rem; font-weight: 800; }
@media (max-width: 45rem) { .cal-cell { min-height: 4.5rem; } .cal-event { font-size: 0; height: 6px; padding: 0; } .cal-agenda-row { grid-template-columns: 1fr auto; } .cal-agenda-row > span:nth-child(3) { grid-column: 1 / -1; } }

/* ----- Weekly report page ----- */
.report-intro { margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius); border-left: 6px solid var(--gold); background: var(--panel); }
.report-intro h3 { margin: 0 0 0.3rem; }
.report-intro p { margin: 0; color: var(--ink-soft); }
.report-steps { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; counter-reset: step; }
.report-step { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--panel); counter-increment: step; }
.report-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--line); font-weight: 800; }
.report-mark:empty::before { content: counter(step); color: var(--ink-soft); }
.report-done .report-mark { border-color: var(--tone-green); background: var(--tone-green); color: #fff; }
.report-step p { margin: 0.25rem 0 0; color: var(--ink-soft); }
.report-step a { color: var(--crimson-ink); font-weight: 600; }
.report-step code { padding: 0.05rem 0.35rem; border-radius: 4px; background: var(--fill); color: var(--ink); font-weight: 700; }
.report-ok { color: var(--tone-green-ink) !important; font-weight: 700; }
.report-wait { color: var(--tone-amber-ink) !important; font-weight: 700; }
.report-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.report-form input[type=email] { flex: 1 1 18rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-small); font: inherit; }
.report-switch { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.report-result { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.report-failed { color: var(--tone-red-ink); font-weight: 700; }
.report-frame { width: 100%; height: 70rem; border: 0; border-radius: var(--radius); background: var(--fill); }
.cust-tile:last-child strong { font-size: var(--step-1); }
.cust-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 70rem) { .cust-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .cust-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cust-tile strong, .cust-tile:last-child strong { font-size: clamp(1.1rem, 1.7vw, 1.6rem); overflow-wrap: anywhere; }
.cust-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); }
.cust-tile { padding: 0.7rem 0.8rem; } .cust-tile strong, .cust-tile:last-child strong { font-size: clamp(1rem, 1.4vw, 1.5rem); overflow-wrap: normal; }
.purchase-jump { justify-self: start; }
.report-confidential { margin-top: 0.5rem !important; padding: 0.5rem 0.75rem; border-radius: var(--radius-small); background: var(--tone-green-soft); color: var(--tone-green-ink) !important; font-weight: 600; }
.purchase-jumps { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ----- My day ----- */
.myday { border-top: 5px solid var(--gold); }
.myday-progress { display: flex; align-items: center; gap: var(--space-2); min-width: 14rem; font-size: var(--step--1); }
.myday-track { flex: 1; height: 10px; overflow: hidden; border-radius: 5px; background: var(--fill); }
.myday-bar { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold), var(--tone-green)); transition: width 0.4s ease; }
.myday-list { display: grid; gap: 4px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.myday-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-2); padding: 0.5rem 0.7rem; border-left: 5px solid var(--t); border-radius: var(--radius-small); background: var(--fill); transition: opacity 0.3s; }
.myday-item input { width: 1.3rem; height: 1.3rem; accent-color: var(--tone-green); cursor: pointer; }
.myday-main { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.myday-main span { overflow: hidden; color: var(--ink-soft); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }
.myday-label { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--ts); color: var(--ti); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.myday-done { opacity: 0.5; }
.myday-done .myday-main strong { text-decoration: line-through; }
.myday-more { margin: var(--space-2) 0 0; font-size: var(--step--1); }
.myday-more a { color: var(--crimson-ink); font-weight: 600; }
.myday-complete { border-top-color: var(--tone-green); }
@media (max-width: 40rem) { .myday-item { grid-template-columns: auto 1fr; } .myday-label, .myday-item .dept-chip { grid-column: 2; justify-self: start; } }

/* ----- Trends ----- */
.trend-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 60rem) { .trend-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 0 var(--space-3); }
.trend-sub { margin: -0.3rem 0 var(--space-2); color: var(--ink-soft); font-size: var(--step--1); }
.year-card .section-bar { margin-bottom: var(--space-2); }
.year-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.year-facts div { padding: 0.6rem 0.8rem; border-radius: var(--radius-small); background: var(--fill); }
.year-facts strong { display: block; font-size: var(--step-1); color: var(--crimson-ink); }
.year-facts span { font-size: 0.78rem; color: var(--ink-soft); }
@media (max-width: 40rem) { .year-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.heat-key { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: var(--space-2); font-size: 0.75rem; color: var(--ink-soft); }
.heat-swatch { width: 12px; height: 12px; border-radius: 2.5px; }
.heat-bg-0 { background: var(--heat-0); } .heat-bg-1 { background: var(--heat-1); } .heat-bg-2 { background: var(--heat-2); }
.heat-bg-3 { background: var(--heat-3); } .heat-bg-4 { background: var(--heat-4); } .heat-bg-5 { background: var(--heat-5); }
.ch-heat-holder { overflow-x: auto; }
.ch-heat { width: 100%; min-width: 46rem; height: auto; }
.ch-day { transition: opacity 0.15s; } .ch-day:hover { stroke: var(--ink); stroke-width: 1.5; }
.heat-0 { fill: var(--heat-0); } .heat-1 { fill: var(--heat-1); } .heat-2 { fill: var(--heat-2); }
.heat-3 { fill: var(--heat-3); } .heat-4 { fill: var(--heat-4); } .heat-5 { fill: var(--heat-5); }

.ch-holder { position: relative; }
.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--chart-grid); stroke-width: 1; }
.ch-tick { fill: var(--chart-axis); font-size: 11px; font-family: inherit; }
.ch-col { fill: var(--chart-1); } .ch-col-now { fill: var(--chart-1); opacity: 0.75; }
.ch-col-blue { fill: var(--chart-2); }
.ch-line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-line-muted { stroke: var(--chart-muted); }
.ch-area { fill: var(--chart-1); opacity: 0.1; }
.ch-dot { fill: var(--chart-1); stroke: var(--panel); stroke-width: 2; }
.ch-dot-muted { fill: var(--chart-muted); }
.ch-dot-now { fill: var(--gold); }
.ch-end { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: inherit; }
.ch-target { stroke: var(--chart-axis); stroke-width: 1; stroke-dasharray: 4 4; }
.ch-target-label { fill: var(--chart-axis); font-size: 11px; font-family: inherit; }
.ch-hover { fill: var(--fill); }
.ch-hit { fill: transparent; cursor: default; outline: none; }
.ch-tip { position: absolute; top: 0; z-index: 5; display: grid; gap: 1px; min-width: 9rem; padding: 0.45rem 0.65rem; border-radius: var(--radius-small); background: var(--ink); color: #fff; font-size: 0.78rem; transform: translateX(-50%); pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }
.ch-tip[hidden] { display: none; }
.ch-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-1); font-size: var(--step--1); color: var(--ink-soft); }
.ch-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ch-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ch-key-col, .ch-key-ch-col { background: var(--chart-1); }
.ch-key-ch-col-blue { background: var(--chart-2); }
.ch-key-muted { height: 3px; border-radius: 2px; background: var(--chart-muted); }
.trend-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr)); }
.ch-empty { fill: var(--ink-soft); font-size: 14px; font-family: inherit; }

/* ----- Drawing tool: full screen, panels, crosshair, measuring ----- */
.cad-canvas { height: clamp(24rem, 100vh - 26rem, 64rem); }
.cad-no-panels .cad-main { grid-template-columns: minmax(0, 1fr); }
.cad-no-panels .cad-side { display: none; }
.cad-full { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--page); overflow: hidden; }
.cad-full .record-bar { position: static; margin: 0; }
.cad-full .cad-ribbon { margin: 0; }
.cad-full .cad-main { flex: 1; min-height: 0; }
.cad-full .cad-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; height: 100%; }
.cad-full .cad-canvas { height: 100%; min-height: 0; }
.cad-full .cad-side { max-height: 100%; }
.cad-cross { stroke: var(--cad-ink); stroke-width: 1px; opacity: 0.35; vector-effect: non-scaling-stroke; pointer-events: none; }
.cad-measure { stroke: var(--cad-snap); stroke-width: 1.6px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.cad-measure-text { fill: var(--cad-snap); font-family: var(--font-code); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--cad-bg); stroke-width: 0.6; pointer-events: none; }
.cad-overlay { pointer-events: none; }
.cad-keys { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.cad-keys td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); }
.cad-keys kbd { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 5px; background: var(--fill); font-family: var(--font-code); font-weight: 700; white-space: nowrap; }
.cad-canvas[data-tool='MEASURE'] { cursor: crosshair; }
@media print { .cad-full { position: static; display: block; } .cad-overlay { display: none; } }

/* ----- Wall screen: for a TV, readable from across the room ----- */
.screen:has(> .wall) { max-width: none; }
.wall { display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100vh - 12rem); padding: clamp(1rem, 2vw, 2rem); border-radius: var(--radius); background: radial-gradient(circle at 20% 0%, #3a0a12 0%, #160408 60%, #0d0205 100%); color: #fff; outline: none; }
.wall:fullscreen { min-height: 100vh; border-radius: 0; }
.wall-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-bottom: clamp(0.8rem, 1.5vw, 1.5rem); border-bottom: 2px solid rgba(212, 167, 44, 0.45); }
.wall-brand { display: flex; align-items: center; gap: 0.6rem; color: var(--gold-bright); font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 800; letter-spacing: 0.15em; }
.wall-brand small { color: rgba(255, 255, 255, 0.6); font-size: 0.6em; letter-spacing: 0.1em; }
.wall-lion { height: clamp(2.5rem, 4vw, 4.5rem); width: auto; }
.wall-when { text-align: center; }
.wall-clock { font-size: clamp(2rem, 5vw, 5rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.wall-date { color: rgba(255, 255, 255, 0.7); font-size: clamp(0.9rem, 1.4vw, 1.4rem); }
.wall-buttons { display: flex; gap: 0.4rem; }
.wall-button { padding: 0.5rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.wall-full { border-color: var(--gold); color: var(--gold-bright); }
.wall:fullscreen .wall-buttons { opacity: 0.15; transition: opacity 0.3s; } .wall:fullscreen .wall-buttons:hover { opacity: 1; }
.wall-stage { display: grid; padding: clamp(1rem, 2vw, 2rem) 0; }
.wall-slide { animation: wall-in 0.6s ease-out; }
@keyframes wall-in { from { opacity: 0; transform: translateY(1rem); } }
@media (prefers-reduced-motion: reduce) { .wall-slide { animation: none; } }
.wall-slide h2 { margin-bottom: clamp(0.8rem, 2vw, 2rem); font-size: clamp(1.8rem, 4vw, 4rem); }
.wall-overview.wall-level-red h2 { color: #ff8a97; } .wall-overview.wall-level-amber h2 { color: #ffd166; } .wall-overview.wall-level-green h2 { color: #7be3a4; }
.wall-bigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 2rem); }
.wall-big { display: grid; padding: clamp(1rem, 2.5vw, 2.5rem); border-radius: 1.2rem; background: rgba(255, 255, 255, 0.06); border-top: 6px solid var(--wc); }
.wall-big strong { color: var(--wc); font-size: clamp(3rem, 9vw, 9rem); line-height: 1; font-variant-numeric: tabular-nums; }
.wall-big span { font-size: clamp(1rem, 1.8vw, 1.8rem); color: rgba(255, 255, 255, 0.8); }
.wall-red { --wc: #ff6b7d; } .wall-amber { --wc: #ffc94d; } .wall-blue { --wc: #6fb2ff; }
.wall-depts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; margin-top: clamp(1rem, 2vw, 2rem); }
.wall-dept { display: grid; padding: 0.9rem 1.1rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.06); border-left: 8px solid var(--wd, #888); }
.wall-dept span { color: rgba(255, 255, 255, 0.7); font-size: clamp(0.9rem, 1.2vw, 1.2rem); }
.wall-dept strong { font-size: clamp(1.2rem, 2vw, 2rem); }
.wall-dept.wall-level-red strong { color: #ff8a97; } .wall-dept.wall-level-amber strong { color: #ffd166; } .wall-dept.wall-level-green strong { color: #7be3a4; }
.wall-dept-sales { --wd: #e0566a; } .wall-dept-purchasing { --wd: #5aa2ee; } .wall-dept-pumps { --wd: #a985e6; } .wall-dept-fabrication { --wd: #4cc483; } .wall-dept-followups { --wd: #e5b53a; }
.wall-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.wall-row { display: grid; grid-template-columns: minmax(10rem, auto) 1fr auto; align-items: center; gap: 1rem; padding: 0.8rem 1.1rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.06); border-left: 8px solid var(--wd); font-size: clamp(1rem, 1.7vw, 1.8rem); }
.wall-row span { overflow: hidden; color: rgba(255, 255, 255, 0.75); text-overflow: ellipsis; white-space: nowrap; }
.wall-row em { color: #ff8a97; font-style: normal; font-weight: 800; }
.wall-calm { color: #7be3a4; font-size: clamp(1.5rem, 3vw, 3rem); font-weight: 700; }
.wall-more { margin-top: 0.6rem; color: rgba(255, 255, 255, 0.6); font-size: clamp(0.9rem, 1.3vw, 1.3rem); }
.wall-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; }
.wall-day { display: flex; flex-direction: column; gap: 0.35rem; min-height: 16rem; padding: 0.8rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.05); }
.wall-today { background: rgba(212, 167, 44, 0.16); box-shadow: inset 0 0 0 2px var(--gold); }
.wall-day h3 { color: rgba(255, 255, 255, 0.75); font-size: clamp(0.9rem, 1.3vw, 1.3rem); }
.wall-day-count { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.wall-item { overflow: hidden; padding: 0.25rem 0.5rem; border-left: 4px solid var(--wd); border-radius: 4px; background: rgba(255, 255, 255, 0.06); font-size: clamp(0.75rem, 1vw, 1rem); text-overflow: ellipsis; white-space: nowrap; }
.wall-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; }
.wall-card { padding: 1rem 1.2rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.06); border-top: 6px solid var(--wd); }
.wall-card h3 { margin-bottom: 0.6rem; font-size: clamp(1.2rem, 1.8vw, 1.8rem); }
.wall-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0; }
.wall-card dt { color: rgba(255, 255, 255, 0.6); font-size: clamp(0.75rem, 1vw, 1rem); }
.wall-card dd { margin: 0; font-size: clamp(1.2rem, 2.2vw, 2.2rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.wall-foot { display: grid; gap: 0.6rem; }
.wall-dots { display: flex; justify-content: center; gap: 0.5rem; }
.wall-dots span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.wall-dots .wall-dot-on { background: var(--gold); }
.wall-progress { height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.wall-progress span { display: block; width: 0; height: 100%; background: var(--gold); }
.wall-progress .wall-filling { animation: wall-fill 20s linear forwards; }
@keyframes wall-fill { to { width: 100%; } }
@media (max-width: 50rem) { .wall-bigs { grid-template-columns: 1fr; } .wall-week { grid-template-columns: repeat(2, 1fr); } .wall-row { grid-template-columns: 1fr auto; } .wall-row span { grid-column: 1 / -1; grid-row: 2; } }

/* ----- Follow-ups: every colour a column can take, and changing columns ----- */
.fu-amber { --t: var(--tone-amber); --ts: var(--tone-amber-soft); --ti: var(--tone-amber-ink); }
.fu-green { --t: var(--tone-green); --ts: var(--tone-green-soft); --ti: var(--tone-green-ink); }
.fu-teal { --t: var(--tone-teal); --ts: var(--tone-teal-soft); --ti: var(--tone-teal-ink); }
.fu-red { --t: var(--tone-red); --ts: var(--tone-red-soft); --ti: var(--tone-red-ink); }
.fu-pink { --t: var(--tone-pink); --ts: var(--tone-pink-soft); --ti: var(--tone-pink-ink); }
.fu-grey { --t: var(--tone-grey); --ts: var(--tone-grey-soft); --ti: var(--tone-grey-ink); }
.fu-column-edit { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ti); font: inherit; font-size: 1.1rem; font-weight: 800; line-height: 1; cursor: pointer; }
.fu-column-edit:hover, .fu-column-edit:focus-visible { background: var(--ts); }
.fu-add-column { display: grid; align-content: center; justify-items: center; gap: 0.3rem; min-height: 16rem; padding: var(--space-3); border: 2px dashed var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--ink-soft); font: inherit; text-align: center; cursor: pointer; }
.fu-add-column strong { color: var(--ink); font-size: var(--step-1); }
.fu-add-column span { font-size: var(--step--1); }
.fu-add-column:hover, .fu-add-column:focus-visible { border-color: var(--gold); background: var(--panel); }
@media (max-width: 40rem) { .fu-add-column { min-height: 5rem; } }
.fu-column-preview { display: grid; gap: 0.1rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-small); border-top: 6px solid var(--t); background: color-mix(in srgb, var(--ts) 45%, var(--panel)); }
.fu-column-preview strong { color: var(--ti); font-size: var(--step-1); }
.fu-column-preview span { color: var(--ink-soft); font-size: 0.8rem; }
.fu-swatches { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fu-swatch { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem 0.3rem 0.35rem; border: 2px solid var(--t); border-radius: 999px; background: var(--panel); color: var(--ti); font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer; }
.fu-swatch::before { content: ''; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--t); }
.fu-swatch-on { background: var(--ts); box-shadow: 0 0 0 2px var(--t); }
.fu-column-moves { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.fu-column-moves span { margin-right: auto; font-weight: 600; }
.fu-column-note { margin: var(--space-3) 0 0; color: var(--ink-soft); font-size: var(--step--1); }
.fu-column-remove { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--fill); }
.fu-column-remove h3 { margin: 0; font-size: var(--step-0); }
.fu-column-remove label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* A status bar or key coloured by a tone the owner chose (follow-up columns). */
.status-tag[data-tone='blue'] { --tone-soft: var(--tone-blue-soft); --tone-ink: var(--tone-blue-ink); --tone: var(--tone-blue); }
.status-tag[data-tone='purple'] { --tone-soft: var(--tone-purple-soft); --tone-ink: var(--tone-purple-ink); --tone: var(--tone-purple); }
.status-tag[data-tone='orange'] { --tone-soft: var(--tone-orange-soft); --tone-ink: var(--tone-orange-ink); --tone: var(--tone-orange); }
.status-tag[data-tone='amber'] { --tone-soft: var(--tone-amber-soft); --tone-ink: var(--tone-amber-ink); --tone: var(--tone-amber); }
.status-tag[data-tone='green'] { --tone-soft: var(--tone-green-soft); --tone-ink: var(--tone-green-ink); --tone: var(--tone-green); }
.status-tag[data-tone='teal'] { --tone-soft: var(--tone-teal-soft); --tone-ink: var(--tone-teal-ink); --tone: var(--tone-teal); }
.status-tag[data-tone='red'] { --tone-soft: var(--tone-red-soft); --tone-ink: var(--tone-red-ink); --tone: var(--tone-red); }
.status-tag[data-tone='pink'] { --tone-soft: var(--tone-pink-soft); --tone-ink: var(--tone-pink-ink); --tone: var(--tone-pink); }
.status-tag[data-tone='grey'] { --tone-soft: var(--tone-grey-soft); --tone-ink: var(--tone-grey-ink); --tone: var(--tone-grey); }

/* ----- Where a quote's prices came from ----- */
.sources { padding-bottom: var(--space-2); }
.sources-table { min-width: 48rem; }
.source-who { display: flex; align-items: center; gap: 0.3rem; min-width: 18rem; }
.source-who input { flex: 1; min-width: 0; }
.source-who input[aria-invalid] { box-shadow: inset 0 0 0 2px var(--tone-amber); }
.source-page { padding: 0.2rem 0.4rem; border-radius: var(--radius-small); color: var(--crimson-ink); font-weight: 700; text-decoration: none; }
.source-page:hover { background: var(--fill); }
.source-sums { display: grid; gap: 0.15rem; min-width: 11rem; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.source-sums .button { justify-self: start; padding: 0.1rem 0.4rem; font-size: 0.75rem; }
.source-none { color: var(--ink-soft); }
.source-empty, .source-unassigned { margin: 0; padding: var(--space-2) var(--space-3); color: var(--ink-soft); font-size: var(--step--1); }
.source-unassigned { color: var(--tone-amber-ink); font-weight: 600; }
.sources-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lines-table .cell-supplier { min-width: 9rem; }
.lines-table .cell-supplier-empty { color: var(--ink-soft); }

/* ----- Smart buying ----- */
.buy-search { flex: 1 1 24rem; font-size: var(--step-1); }
.buy-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 40rem) { .buy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.buy-count { margin: 0 0 var(--space-2); color: var(--ink-soft); font-size: var(--step--1); }
.buy-results { display: grid; gap: var(--space-3); }
.buy-card { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); border-left: 6px solid var(--tone-green); background: var(--panel); }
.buy-card-warned { border-left-color: var(--tone-amber); }
.buy-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.buy-head h3 { margin: 0; font-size: var(--step-1); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.buy-head p { margin: 0.1rem 0 0; color: var(--ink-soft); }
.buy-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.3rem; }
.buy-verdict { display: grid; gap: 0.1rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-small); background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }
.buy-verdict strong { color: var(--gold-ink); font-size: var(--step-0); }
.buy-verdict span { color: var(--ink-soft); font-size: var(--step--1); }
.buy-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--step--1); }
.buy-table th { padding: 0.35rem 0.5rem; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; }
.buy-table td { padding: 0.45rem 0.5rem; border-top: 1px solid var(--line); vertical-align: top; }
.buy-table td small { display: block; color: var(--ink-soft); font-size: 0.72rem; }
.buy-table td .fu-tag { display: inline-block; margin: 0 0.2rem 0.2rem 0; white-space: normal; }
.buy-table a { color: var(--ink); font-weight: 600; }
.buy-best-row { background: color-mix(in srgb, var(--tone-green-soft) 45%, var(--panel)); }
.buy-badge { padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--tone-green); color: #fff; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.buy-cad { font-weight: 700; }
.buy-source { color: var(--ink-soft); }
.buy-empty { display: grid; gap: var(--space-2); text-align: left; }
.buy-empty p { margin: 0; }
.buy-more { justify-self: center; }
.lines-table .cell-part { min-width: 9rem; vertical-align: top; }
.line-advice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.1rem 0 0.3rem; padding: 0.2rem 0.45rem; border-radius: var(--radius-small); background: var(--ts); color: var(--ti); font-size: 0.72rem; font-weight: 600; line-height: 1.3; }
.line-advice[hidden] { display: none; }
.line-advice-use { padding: 0.05rem 0.5rem; border: 0; border-radius: 999px; background: var(--t); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
@media (max-width: 40rem) { .screen:has(.buy-results) .segmented { max-width: 100%; overflow-x: auto; } }
.buy-table td:nth-child(5), .buy-source { white-space: nowrap; }
.lines-table td { vertical-align: top; }

/* ----- Adding prices from an email or PDF ----- */
.cap { display: grid; gap: var(--space-3); }
.cap-zone { display: grid; gap: 0.3rem; justify-items: center; padding: var(--space-5) var(--space-3); border: 2px dashed var(--gold); border-radius: var(--radius); background: color-mix(in srgb, var(--gold) 8%, var(--panel)); color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
.cap-zone strong { font-size: var(--step-1); }
.cap-zone span { color: var(--ink-soft); font-size: var(--step--1); }
.cap-zone.cap-over, .cap-zone:hover { background: color-mix(in srgb, var(--gold) 20%, var(--panel)); }
.cap textarea { width: 100%; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); color: var(--ink); font: inherit; }
.cap-busy { margin: 0; color: var(--ink-soft); font-weight: 600; }
.cap-head { display: grid; grid-template-columns: 2fr 1fr 1fr 0.7fr 0.8fr; gap: var(--space-2); }
.cap-head label { display: grid; gap: 0.2rem; align-content: start; }
.cap-head label > span { color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cap-head input, .cap-head select { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); color: var(--ink); font: inherit; }
.cap-note { color: var(--ink-soft); font-size: 0.72rem; }
@media (max-width: 40rem) { .cap-head { grid-template-columns: 1fr 1fr; } .cap-head label:first-child { grid-column: 1 / -1; } }
.cap-summary { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.cap-table { min-width: 44rem; }
.cap-table td:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-width: 11rem; }
.cap-off td { opacity: 0.45; }
.cap-check { color: var(--tone-green); font-weight: 800; }
.cap-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cap-raw summary { color: var(--ink-soft); font-size: var(--step--1); cursor: pointer; }
.cap-raw pre { max-height: 16rem; overflow: auto; padding: var(--space-2); border-radius: var(--radius-small); background: var(--fill); font-size: 0.75rem; white-space: pre-wrap; }
.sheet-wide:has(.cap) { width: min(66rem, calc(100vw - 2rem)); }
.buy-drop-hint { outline: 3px dashed var(--gold); outline-offset: 6px; border-radius: var(--radius); }
.cap-table input[type=number] { min-width: 6.5rem; }
.cap-table td:first-child { width: 2rem; }

/* ----- Purchase order items, and making POs from an order ----- */
.tone-teal { --t: var(--tone-teal); --ts: var(--tone-teal-soft); --ti: var(--tone-teal-ink); }
.tone-pink { --t: var(--tone-pink); --ts: var(--tone-pink-soft); --ti: var(--tone-pink-ink); }
.po-cost { display: grid; gap: 0.2rem; }
.po-lines { margin-bottom: var(--space-2); }
.po-lines-table { min-width: 46rem; }
.po-lines-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); }
.po-lines-foot strong { font-variant-numeric: tabular-nums; }
.make-po { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); border-left: 5px solid var(--dept-purchasing); background: var(--panel); }
.make-po-off { opacity: 0.5; }
.make-po header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.make-po-keep { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step-0); }
.make-po-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.make-po-fields { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.make-po-fields label { display: grid; gap: 0.2rem; }
.make-po-fields label span { color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.make-po-fields input { padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); color: var(--ink); font: inherit; }
.make-po-fields p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.make-po-lines { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.make-po-lines li { display: grid; grid-template-columns: 3.5rem 9rem 1fr auto; gap: var(--space-2); padding: 0.25rem 0; border-top: 1px solid var(--line); }
.make-po-lines li > span:first-child { color: var(--ink-soft); text-align: right; }
.make-po-warn { color: var(--tone-amber-ink); font-weight: 600; }
@media (max-width: 40rem) { .make-po-lines li { grid-template-columns: 3rem 1fr auto; } .make-po-lines li > span:nth-child(3) { grid-column: 2 / -1; grid-row: 2; } }
.sheet-wide:has(.po-lines), .sheet-wide:has(.make-po) { width: min(60rem, calc(100vw - 2rem)); }
.po-lines-table td:first-child { min-width: 9rem; }
.po-lines-table .cell-wide { min-width: 13rem; }
.po-lines-table .cell-number { max-width: 6rem; }

/* ----- "Where the prices came from", folded under the pricing lines ----- */
.sources-fold { margin-bottom: var(--space-4); }
.sources-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0.55rem var(--space-3); border-radius: var(--radius); background: var(--panel); cursor: pointer; list-style: none; }
.sources-fold > summary::-webkit-details-marker { display: none; }
.sources-fold > summary::before { content: '▸'; color: var(--ink-soft); transition: transform 0.15s; }
.sources-fold[open] > summary::before { transform: rotate(90deg); }
.sources-fold[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
.sources-fold-title { color: var(--ink-soft); font-size: var(--step--1); font-weight: 700; }
.sources-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sources-chip { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--fill); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.sources-chip-warn { background: var(--tone-amber-soft); color: var(--tone-amber-ink); font-weight: 600; }
.sources-fold > .sources { border-radius: 0 0 var(--radius) var(--radius); border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .sources-fold > summary::before { transition: none; } }

/* ----- Ask for prices ----- */
.req { display: grid; gap: var(--space-3); }
.req-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.req-top .cap-note { margin: 0; }
.req-block { display: grid; gap: var(--space-2); }
.req-block > h3 { margin: 0; font-size: var(--step-0); }
.req-block > input[type=text] { padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); color: var(--ink); font: inherit; }
.req-suggestions, .req-chosen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.req-suggestions:empty, .req-chosen:empty { display: none; }
.req-suggest { display: inline-grid; padding: 0.3rem 0.7rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-small); background: transparent; color: var(--ink); font: inherit; font-size: var(--step--1); text-align: left; cursor: pointer; }
.req-suggest small { color: var(--ink-soft); font-size: 0.7rem; }
.req-suggest:hover { border-color: var(--gold); background: var(--panel); }
.req-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.4rem 0.25rem 0.75rem; border-radius: 999px; background: var(--dept-purchasing); color: #fff; font-size: var(--step--1); font-weight: 700; }
.req-chip button { width: 1.4rem; height: 1.4rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.25); color: #fff; font: inherit; cursor: pointer; }
.req-table { min-width: 30rem; }
.req-table td:first-child { width: 2rem; }
.req-table .cell-number { max-width: 5.5rem; }
.req-head { grid-template-columns: 1fr 1fr 2fr; }
.req-head textarea { width: 100%; min-height: 2.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); color: var(--ink); font: inherit; }
@media (max-width: 40rem) { .req-head { grid-template-columns: 1fr; } }
.req-follow { display: flex; align-items: center; gap: 0.4rem; font-size: var(--step--1); }
.req-send { display: grid; gap: var(--space-2); }
.req-send-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--panel); border-left: 5px solid var(--dept-purchasing); }
.req-send-row > div:first-child { display: grid; }
.req-send-row span { color: var(--ink-soft); font-size: var(--step--1); }
.req-send-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.req-preview { max-height: 18rem; overflow: auto; padding: var(--space-2); border-radius: var(--radius-small); background: var(--fill); font-size: 0.75rem; white-space: pre-wrap; }
.sheet-wide:has(.req) { width: min(52rem, calc(100vw - 2rem)); }

/* ----- Pump series sheets (parts as rows, sizes as columns), edited like Excel ----- */
.series-list .record-trailing { white-space: nowrap; }
.man-scroll { max-height: 55vh; overflow: auto; }
.man-table { min-width: 40rem; }
.man-table td { vertical-align: top; }
.man-note { display: block; color: var(--ink-soft); font-size: 0.72rem; }
.man-fits { max-width: 14rem; font-size: var(--step--1); }
.man-sections { margin: var(--space-2) 0 0; padding-left: 1.2rem; font-size: var(--step--1); }
.sheet-wide:has(.man) { width: min(64rem, calc(100vw - 2rem)); }

.screen:has(.grid) { max-width: none; }
.grid-toolbar { flex-wrap: wrap; align-items: center; }
.grid-toolbar .search-field { flex: 1 1 14rem; }
.grid-add { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-soft); font-size: var(--step--1); }
.grid-how-many { width: 4.5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel); color: inherit; font: inherit; }
.grid-count { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; color: var(--ink-soft); font-size: var(--step--1); }
.grid-hint { margin-top: var(--space-2); }
.grid-sheet-label { display: grid; gap: 0.3rem; font-weight: 600; }
.grid-sheet-label input { padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel); color: inherit; font: inherit; font-weight: 400; }
.grid-sheet-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }

.grid-scroll { max-height: calc(100vh - 15rem); min-height: 16rem; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel); }
.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: var(--step--1); }
.grid th, .grid td { padding: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.grid thead th { position: sticky; top: 0; z-index: 2; height: 2.1rem; padding: 0 0.45rem; background: var(--fill-strong); color: var(--ink-soft); font-size: 0.72rem; font-weight: 800; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-col-num { width: 2.4rem; }
.grid-col-xs { width: 3.2rem; }
.grid-col-s { width: 4.6rem; }
.grid-col-m { width: 8.8rem; }
.grid-col-l { width: 14rem; }
.grid-col-tick { width: 3.1rem; }
.grid-col-seal { width: 5.6rem; }
.grid th.grid-num { position: sticky; left: 0; z-index: 1; padding: 0 0.3rem; background: var(--fill-strong); color: var(--ink-soft); font-size: 0.7rem; font-weight: 700; text-align: center; cursor: pointer; user-select: none; }
.grid thead th.grid-num { z-index: 3; }
.grid tbody th.grid-num:hover { color: var(--crimson-ink); }
.grid tr[hidden] { display: none; }
.grid-input { display: block; width: 100%; height: 2rem; padding: 0 0.45rem; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; }
.grid-input:focus { outline: none; }
.grid-input-number { text-align: right; }
.grid td:nth-child(6) .grid-input { font-weight: 700; }
.grid td:nth-child(6) { background: color-mix(in srgb, var(--gold) 9%, var(--panel)); }
.grid-tick { height: 2rem; color: var(--crimson-ink); font-weight: 800; text-align: center; cursor: pointer; user-select: none; }
.grid-tick:hover { background: var(--fill); }
.grid-tick-on, .grid-tick-on:hover { background: color-mix(in srgb, var(--crimson) 10%, var(--panel)); }
.grid td.grid-current { box-shadow: inset 0 0 0 2px var(--gold); }
.grid-tick:focus { outline: none; }
.grid tr.grid-picked th.grid-num { background: var(--gold); color: #fff; }
.grid tr.grid-picked td { background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }
.grid thead th.grid-head-tick { padding: 0; text-align: center; }
.grid-size { width: 100%; height: 100%; min-height: 2.1rem; padding: 0 0.2rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.grid-size:hover { background: var(--fill); color: var(--crimson-ink); }
.grid-sheet-label + .grid-sheet-label { margin-top: var(--space-3); }
/* Like Excel's frozen panes: the row number, parts list and description stay in view when scrolling to the sizes. */
.grid td:nth-child(2), .grid td:nth-child(3), .grid thead th:nth-child(2), .grid thead th:nth-child(3) { position: sticky; z-index: 1; background: var(--panel); }
.grid td:nth-child(2), .grid thead th:nth-child(2) { left: 2.4rem; }
.grid td:nth-child(3), .grid thead th:nth-child(3) { left: 7rem; box-shadow: inset -2px 0 0 var(--line-strong); }
.grid thead th:nth-child(2), .grid thead th:nth-child(3) { z-index: 3; background: var(--fill-strong); }
.grid td.grid-current:nth-child(2), .grid td.grid-current:nth-child(3) { box-shadow: inset 0 0 0 2px var(--gold); }
.grid tr.grid-picked td:nth-child(2), .grid tr.grid-picked td:nth-child(3) { background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }

/* ----- Pump center: a series' three views (parts, tolerances, notes) ----- */
.series-views { margin: 0 0 var(--space-3); }
.series-notes { width: 100%; max-width: 60rem; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel); color: inherit; font: inherit; line-height: 1.6; resize: vertical; }
.grid-spare-head { display: block; text-align: center; font-size: 0.7rem; }
.tol-types-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--ink-soft); }
.tol-types { width: 16rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel); color: inherit; font: inherit; }
.tol-missing { margin: 0 0 var(--space-2); padding: 0.4rem 0.8rem; border-radius: var(--radius-small); background: var(--tone-amber-soft); color: var(--tone-amber-ink); font-size: var(--step--1); font-weight: 600; }
.tol-missing[hidden] { display: none; }
.tol-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0.25rem 0.45rem; text-align: left; }
.tol-head small { font-size: 0.66rem; font-weight: 600; color: var(--crimson-ink); }
.tol-grid .grid thead th { height: 2.8rem; }
.tol-grid .grid td:nth-child(6) { background: var(--panel); }
.tol-grid .grid td:nth-child(6) .grid-input { font-weight: 400; }
.tol-grid .grid td:nth-child(3), .tol-grid .grid thead th:nth-child(3) { position: static; box-shadow: none; }
.tol-grid .grid td:nth-child(2) .grid-input { font-weight: 700; }
.tol-types-pick { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.tol-type { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
/* Standard remarques and propositions */
.grid-col-xl { width: 24rem; }
.grid-plain .grid td:nth-child(2), .grid-plain .grid td:nth-child(3), .grid-plain .grid thead th:nth-child(2), .grid-plain .grid thead th:nth-child(3) { position: static; box-shadow: none; }
.grid-plain .grid td:nth-child(6) { background: var(--panel); }
.grid-plain .grid td:nth-child(6) .grid-input { font-weight: 400; }
.grid-plain .grid-scroll { max-height: 26rem; min-height: 0; }
.phrase-block { margin: var(--space-4) 0; }
.phrase-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--step-1); }
.phrase-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-weight: 800; }
.phrase-block-remark .phrase-mark { background: var(--tone-blue-soft); color: var(--tone-blue-ink); }
.phrase-block-proposition .phrase-mark { background: var(--tone-amber-soft); color: var(--tone-amber-ink); }
.phrase-block-remark .grid thead th { border-bottom: 2px solid var(--tone-blue); }
.phrase-block-proposition .grid thead th { border-bottom: 2px solid var(--tone-amber); }
.phrase-sets { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
.phrase-set { padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.phrase-set-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.phrase-set-head input { padding: 0.45rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel); color: inherit; font: inherit; }
.phrase-set-head input:first-child { flex: 1 1 14rem; font-weight: 700; }
.phrase-set-head input:nth-child(2) { width: 9rem; }
.phrase-set-lines { margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--step--1); display: grid; gap: 2px; }
.phrase-set-lines li { display: flex; gap: 0.5rem; padding: 0.2rem 0.5rem; border-radius: 6px; }
.phrase-set-lines .phrase-remark { background: var(--tone-blue-soft); }
.phrase-set-lines .phrase-proposition { background: var(--tone-amber-soft); }
.phrase-pick { margin: 0 0 var(--space-3); padding: 0; list-style: none; display: grid; gap: 4px; }
.phrase-pick label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.grid td.grid-tick-spare { color: var(--crimson-ink); font-size: 1.1rem; border-right: 2px solid var(--line-strong); }
.grid td.grid-tick-seal { color: var(--tone-teal-ink); }
.grid td.grid-tick-seal.grid-tick-on { background: var(--tone-teal-soft); }
.grid td.grid-tick-seal-last { border-right: 2px solid var(--line-strong); }
.grid-seal-head { white-space: normal; line-height: 1.1; color: var(--tone-teal-ink); font-size: 0.68rem; }
.grid td.grid-tick-spare.grid-tick-on { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); }
.report-line { display: flex; gap: 0.5rem; align-items: baseline; }
.report-line b { flex: 0 0 0.8rem; }
.report-line-text p { margin: 0; }

/* ----- Pump center: the inspection of a job ----- */
.insp-section { margin: var(--space-4) 0; }
.insp-bar { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; }
.insp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.insp-tile { border-radius: var(--radius); padding: 0.5rem 0.9rem; }
.insp-tile b { display: block; font-size: 1.6rem; line-height: 1.1; }
.insp-tile span { font-size: var(--step--1); font-weight: 600; }
.insp-tile-ok { background: var(--tone-green-soft); color: var(--tone-green-ink); }
.insp-tile-watch { background: var(--tone-amber-soft); color: var(--tone-amber-ink); }
.insp-tile-replace { background: var(--tone-red-soft); color: var(--tone-red-ink); }
.insp-tile-none { background: var(--fill-strong); color: var(--ink-soft); }
.insp-card { margin-bottom: var(--space-3); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.insp-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0.6rem var(--space-3); background: var(--fill); font-weight: 700; }
.insp-card-head .search-field { margin-left: auto; flex: 0 1 18rem; }
.insp-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff; font-size: 0.8rem; }
.insp-num-blue { background: var(--tone-blue); } .insp-num-purple { background: var(--tone-purple, #7a4fd1); } .insp-num-red { background: var(--tone-red); }
.insp-rotor { margin-left: auto; }
.insp-seal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0.5rem var(--space-3); border-bottom: 1px solid var(--line); }
.insp-seal-label { font-weight: 700; font-size: 0.85rem; }
.insp-seal-tag { margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--tone-teal-soft); color: var(--tone-teal-ink); font-size: 0.72rem; font-weight: 600; }
.insp-empty { margin: 0; padding: var(--space-3); color: var(--ink-soft); font-size: var(--step--1); }
.insp-measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-2); padding: var(--space-3); }
.insp-measure { padding: var(--space-2) var(--space-3); border-radius: var(--radius-small); border: 2px solid var(--line); }
.insp-measure h4 { margin: 0; font-size: var(--step-0); }
.insp-spec { margin: 0 0 var(--space-2); font-size: var(--step--1); color: var(--ink-soft); }
.insp-in { border-color: var(--tone-green); } .insp-near { border-color: var(--tone-amber); } .insp-out { border-color: var(--tone-red); background: var(--tone-red-soft); }
.insp-reading { display: grid; grid-template-columns: 3.8rem 5.5rem minmax(7.5rem, 1fr) auto; gap: 0.4rem; align-items: center; margin-top: 0.35rem; font-size: var(--step--1); }
.insp-reading input { padding: 0.35rem 0.5rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: inherit; font: inherit; text-align: right; }
.insp-result { padding: 0.2rem 0.5rem; border-radius: 6px; text-align: center; font-weight: 700; }
.insp-result-in { background: var(--tone-green); color: #fff; } .insp-result-near { background: var(--tone-amber); color: #fff; } .insp-result-out { background: var(--tone-red); color: #fff; }
.insp-result-none { background: var(--fill); color: var(--ink-soft); font-weight: 400; }
.insp-head, .insp-line { display: grid; grid-template-columns: 3rem minmax(7rem, 1fr) 3.5rem 8rem 7.5rem 17rem; gap: var(--space-2); align-items: center; padding: 0.4rem var(--space-3); }
.insp-head { font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.insp-row { border-bottom: 1px solid var(--line); border-left: 6px solid var(--line); }
.insp-row-ok { border-left-color: var(--tone-green); }
.insp-row-watch { border-left-color: var(--tone-amber); background: color-mix(in srgb, var(--tone-amber-soft) 55%, var(--panel)); }
.insp-row-replace { border-left-color: var(--tone-red); background: color-mix(in srgb, var(--tone-red-soft) 60%, var(--panel)); }
.insp-item { font-variant-numeric: tabular-nums; }
.insp-desc { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.insp-has-notes { color: var(--crimson-ink); }
.insp-qty { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.insp-pn { font-size: var(--step--1); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-ebr { font-weight: 700; font-size: var(--step--1); }
.insp-ebr-input { width: 100%; padding: 0.3rem 0.45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 700; }
.insp-ebr-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
.insp-ebr-input::placeholder { font-weight: 400; color: var(--ink-soft); }
.insp-ebr-pending { border-style: dashed; border-color: var(--tone-amber); }
.insp-ebr-changed { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--panel)); }
.insp-ebr-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; padding: 0.45rem var(--space-3); background: color-mix(in srgb, var(--gold) 14%, var(--panel)); font-size: var(--step--1); }
.insp-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.insp-btn { padding: 0.3rem 0.2rem; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.insp-btn-ok.insp-btn-on { background: var(--tone-green); border-color: var(--tone-green); color: #fff; }
.insp-btn-watch.insp-btn-on { background: var(--tone-amber); border-color: var(--tone-amber); color: #fff; }
.insp-btn-replace.insp-btn-on { background: var(--tone-red); border-color: var(--tone-red); color: #fff; }
.insp-add { padding: var(--space-2) var(--space-3); }
.insp-copy { margin-left: auto; }
.insp-order-list { padding: 0 var(--space-3) var(--space-2); }
.insp-order-line { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 8rem 3rem; gap: var(--space-2); padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
@media (max-width: 900px) { .insp-head { display: none; } .insp-line { grid-template-columns: 2.5rem minmax(0, 1fr) 7rem; } .insp-pn, .insp-qty { display: none; } .insp-status { grid-column: 1 / -1; } .insp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Remarques and propositions of a job */
.findings { margin: var(--space-4) 0; }
.findings-layout { display: grid; gap: var(--space-3); }
.findings-layout-open { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); align-items: start; }
.findings-lists { display: grid; gap: var(--space-3); }
.findings-box { border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.findings-head { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0.55rem var(--space-3); font-size: var(--step-0); }
.findings-remark .findings-head { background: var(--tone-blue-soft); color: var(--tone-blue-ink); }
.findings-proposition .findings-head { background: var(--tone-amber-soft); color: var(--tone-amber-ink); }
.findings-mark { font-weight: 800; }
.findings-lines { margin: 0; padding: 0; list-style: none; }
.findings-line { display: flex; gap: var(--space-2); align-items: baseline; padding: 0.4rem var(--space-3); border-top: 1px solid var(--line); }
.findings-line > b { flex: 0 0 0.8rem; }
.findings-text { flex: 1; } .findings-text p { margin: 0; }
.findings-line-blank .findings-text { background: color-mix(in srgb, var(--gold) 18%, transparent); border-radius: 4px; }
.findings-tool { padding: 0 0.3rem; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font: inherit; }
.findings-tool:hover { color: var(--crimson-ink); }
.findings-edit { flex: 1; padding: 0.35rem 0.5rem; border: 1px solid var(--gold); border-radius: 8px; background: var(--panel); color: inherit; font: inherit; }
.findings-add { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); }
.findings-add input { flex: 1; padding: 0.45rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: inherit; font: inherit; }
.findings-library { position: sticky; top: 5rem; max-height: 75vh; overflow: auto; padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.findings-library-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: var(--space-2); }
.findings-topic { margin: var(--space-2) 0 0.2rem; font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.findings-pick, .findings-set { display: flex; gap: 0.5rem; width: 100%; padding: 0.35rem 0.5rem; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; font-size: var(--step--1); text-align: left; cursor: pointer; }
.findings-pick:hover, .findings-set:hover { background: var(--fill); }
.findings-pick-remark b { color: var(--tone-blue-ink); } .findings-pick-proposition b { color: var(--tone-amber-ink); }
.findings-set { font-weight: 700; }
@media (max-width: 900px) { .findings-layout-open { grid-template-columns: minmax(0, 1fr); } .findings-library { position: static; } }

/* The tech sheet, printed like the manufacturer's parts list (always black on white) */
.tech-sheet { max-width: 52rem; margin: 0 auto; padding: 1.6rem 2rem; background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; font-size: 12px; border-radius: 4px; }
.tech-head { display: flex; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 10px; }
.tech-head b { font-size: 16px; }
.tech-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; margin-bottom: 12px; font-size: 11px; }
.tech-facts span { display: block; color: #555; }
.tech-table { width: 100%; border-collapse: collapse; }
.tech-table th { border-top: 1.5px solid #111; border-bottom: 1px solid #111; padding: 4px 5px; font-size: 10.5px; font-weight: 700; text-align: left; vertical-align: bottom; }
.tech-table td { border-bottom: 0.5px solid #bbb; padding: 4px 5px; vertical-align: top; }
.tech-item { width: 3.4rem; } .tech-qty { width: 3.6rem; text-align: center; } .tech-pn { width: 6.6rem; } .tech-notes { width: 4.5rem; } .tech-check { width: 1.8rem; text-align: center; }
.tech-box { display: inline-block; width: 11px; height: 11px; border: 1px solid #111; }
.tech-table tr, .tech-group { break-inside: avoid; page-break-inside: avoid; }
/* Rows with the same item number: one tall item cell, a firmer line between items. */
.tech-group + .tech-group td, .tech-group + .tech-group th { border-top: 1px solid #555; }
.tech-table td.tech-item { vertical-align: middle; text-align: center; font-weight: 700; border-left: 1px solid #555; border-right: 1px solid #555; }
.tech-spare { width: 1rem; padding-left: 0; padding-right: 0; text-align: center; }
.tech-table td.tech-spare { vertical-align: middle; font-weight: 700; border-bottom: none; }
.report-group { break-inside: avoid; page-break-inside: avoid; }
.report-parts td.report-item { vertical-align: middle; text-align: center; font-weight: 700; border-right: 1px solid var(--fill-strong); }
.report-group + .report-group td { border-top: 1px solid var(--line-strong); }
.tech-foot-notes { margin-top: 12px; font-size: 10.5px; }
.tech-foot-notes p { margin: 2px 0; }
.tech-sign { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 6px; border-top: 1px solid #111; font-size: 11px; }
@media print { .tech-sheet { max-width: none; padding: 0; border-radius: 0; } .tech-table thead { display: table-header-group; } }

/* ----- Marks over a pump inspection (markup-layer.js) ----- */
.markup-host { position: relative; }
.markup-svg { position: absolute; top: 0; left: 0; z-index: 4; overflow: visible; pointer-events: none; }
.markup-on .markup-svg { pointer-events: auto; cursor: crosshair; touch-action: none; }
.markup-on .markup-content { outline: 2px dashed var(--gold); outline-offset: 4px; border-radius: var(--radius); }
.markup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.markup-bar:has(.markup-tool) { position: sticky; top: 7.2rem; z-index: 14; padding: var(--space-2); border-radius: var(--radius); background: var(--panel); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.markup-tool-on { background: var(--gold); color: #1c1c1e; border-color: var(--gold); }
.markup-swatches { display: inline-flex; gap: 0.3rem; }
.markup-swatch { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.markup-swatch-on { box-shadow: 0 0 0 3px var(--ink); }
.markup-note { margin-left: auto; color: var(--ink-soft); font-size: var(--step--1); }
.mk-swatch-yellow { background: var(--mark-yellow); } .mk-swatch-green { background: var(--mark-green); } .mk-swatch-pink { background: var(--mark-pink); }
.mk-swatch-red { background: var(--mark-red); } .mk-swatch-blue { background: var(--mark-blue); } .mk-swatch-black { background: var(--mark-black); }
.mk { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mk-highlight { stroke-width: 16; opacity: 0.38; mix-blend-mode: multiply; }
.mk-pen { stroke-width: 2.5; }
.mk-circle { stroke-width: 2.5; }
.mk-yellow { stroke: var(--mark-yellow); } .mk-green { stroke: var(--mark-green); } .mk-pink { stroke: var(--mark-pink); }
.mk-red { stroke: var(--mark-red); } .mk-blue { stroke: var(--mark-blue); } .mk-black { stroke: var(--mark-black); }
:root[data-theme='dark'] .mk-highlight { mix-blend-mode: screen; opacity: 0.45; }
@media print { .markup-bar { display: none; } .mk-highlight { mix-blend-mode: multiply; opacity: 0.38; } }

/* ----- Pump file stages (pumps/stages.js) ----- */
.status-tag[data-status='ARRIVED'],
.board-column[data-status='ARRIVED'] { --tone-soft: var(--tone-orange-soft); --tone-ink: var(--tone-orange-ink); --tone: var(--tone-orange); }
.record-row:has(> .status-tag[data-status='ARRIVED']:last-child) { border-left-color: var(--tone-orange); }
select[data-status='ARRIVED'] { --tone-ink: var(--tone-orange-ink); }
.status-tag[data-status='INSPECTION'], .status-tag[data-status='ANALYSIS'],
.board-column[data-status='INSPECTION'], .board-column[data-status='ANALYSIS'] { --tone-soft: var(--tone-purple-soft); --tone-ink: var(--tone-purple-ink); --tone: var(--tone-purple); }
.record-row:has(> .status-tag[data-status='INSPECTION']:last-child), .record-row:has(> .status-tag[data-status='ANALYSIS']:last-child) { border-left-color: var(--tone-purple); }
select[data-status='INSPECTION'], select[data-status='ANALYSIS'] { --tone-ink: var(--tone-purple-ink); }
.status-tag[data-status='PO RECEIVED'],
.board-column[data-status='PO RECEIVED'] { --tone-soft: var(--tone-green-soft); --tone-ink: var(--tone-green-ink); --tone: var(--tone-green); }
.record-row:has(> .status-tag[data-status='PO RECEIVED']:last-child) { border-left-color: var(--tone-green); }
select[data-status='PO RECEIVED'] { --tone-ink: var(--tone-green-ink); }
.status-tag[data-status='PARTS ORDERED'],
.board-column[data-status='PARTS ORDERED'] { --tone-soft: var(--tone-amber-soft); --tone-ink: var(--tone-amber-ink); --tone: var(--tone-amber); }
.record-row:has(> .status-tag[data-status='PARTS ORDERED']:last-child) { border-left-color: var(--tone-amber); }
select[data-status='PARTS ORDERED'] { --tone-ink: var(--tone-amber-ink); }
.status-tag[data-status='IN WORK'],
.board-column[data-status='IN WORK'] { --tone-soft: var(--tone-blue-soft); --tone-ink: var(--tone-blue-ink); --tone: var(--tone-blue); }
.record-row:has(> .status-tag[data-status='IN WORK']:last-child) { border-left-color: var(--tone-blue); }
select[data-status='IN WORK'] { --tone-ink: var(--tone-blue-ink); }

/* The strip of stages at the top of a pump file (stage-strip.js). */
.stage-strip { margin: var(--space-2) 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.stage-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.stage-step { display: grid; gap: 0.1rem; width: 100%; min-height: 2.8rem; padding: 0.35rem 0.4rem; border: 0; border-radius: 8px; font: inherit; font-size: 0.78rem; text-align: center; cursor: pointer; background: var(--fill); color: var(--ink-soft); }
.stage-step:hover { box-shadow: inset 0 0 0 2px var(--line-strong); }
.stage-done { background: var(--tone-green-soft); color: var(--tone-green-ink); }
.stage-now { background: var(--tone-amber-soft); color: var(--tone-amber-ink); font-weight: 700; box-shadow: inset 0 0 0 2px var(--tone-amber); cursor: default; }
.stage-now:hover { box-shadow: inset 0 0 0 2px var(--tone-amber); }
.stage-date { font-size: 0.7rem; opacity: 0.85; font-weight: 500; }
.stage-facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--step--1); }
.stage-promised { color: var(--ink-soft); }
.stage-late { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--tone-red-soft); color: var(--tone-red-ink); font-weight: 700; }
.teams-field { display: flex; gap: var(--space-2); align-items: center; }
.teams-field input { flex: 1 1 auto; min-width: 0; }

/* The pump center (center-screen.js). */
.center-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.center-head h2 { margin: 0 auto 0 0; font-size: var(--step-1); }
.center-head .search-field { flex: 0 1 20rem; margin-right: auto; }
.center-count { display: flex; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-2); color: var(--ink-soft); }
.center-late-count { padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--tone-red-soft); color: var(--tone-red-ink); font-weight: 700; }
.center-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr)); gap: 0.5rem; margin-bottom: var(--space-3); }
.center-tile { display: grid; gap: 0.1rem; padding: 0.6rem 0.75rem; border: 0; border-left: 5px solid var(--t, var(--line-strong)); border-radius: 0 var(--radius) var(--radius) 0; background: var(--ts, var(--panel)); color: var(--ti, var(--ink)); font: inherit; text-align: left; cursor: pointer; }
.center-tile b { font-size: 1.6rem; line-height: 1.1; }
.center-tile span { font-size: 0.82rem; font-weight: 600; }
.center-tile em { font-style: normal; font-size: 0.75rem; font-weight: 700; }
.center-tile-all { --t: var(--crimson); background: var(--panel); color: var(--ink); }
.center-tile-empty { opacity: 0.55; }
.center-tile-on { box-shadow: 0 0 0 2px var(--ink); }
.center-list { border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.center-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1.2fr) minmax(0, 1fr) 9.5rem 10.5rem minmax(0, 1.4fr); gap: var(--space-2); align-items: center; padding: 0.55rem var(--space-3); border-top: 1px solid var(--line); border-left: 5px solid transparent; color: inherit; text-decoration: none; font-size: var(--step--1); }
.center-row:hover { background: var(--fill); }
.center-row-head { border-top: 0; color: var(--ink-soft); font-weight: 600; font-size: 0.75rem; }
.center-row-head:hover { background: none; }
.center-row-late { border-left-color: var(--tone-red); background: var(--tone-red-soft); }
.center-row-late:hover { background: var(--tone-red-soft); filter: brightness(0.98); }
.center-days-late { color: var(--tone-red-ink); font-weight: 700; }
@media (max-width: 760px) {
  .center-row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .center-row > :nth-child(3), .center-row > :nth-child(6) { display: none; }
  .center-row > :nth-child(5) { grid-column: 2 / -1; }
}

/* A narrow inspection card (side panel open, smaller screen): the part number gives its room to the description. */
.insp-card { container-type: inline-size; }
@container (max-width: 780px) {
  .insp-head, .insp-line { grid-template-columns: 2.4rem minmax(5rem, 1fr) 2.6rem 6.8rem 17rem; }
  .insp-head > :nth-child(4), .insp-line .insp-pn { display: none; }
  .insp-status .insp-btn { padding-left: 0.35rem; padding-right: 0.35rem; }
}

/* ----- The tabs of a pump file (job-tabs.js) and their panels ----- */
.job-tabs { position: sticky; top: 7.1rem; z-index: 12; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 var(--space-3); padding: 0.35rem; border-radius: var(--radius); background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(8px); }
.job-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem; border: 0; border-radius: 10px; background: var(--panel); color: var(--ink-soft); font: inherit; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.job-tab:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.job-tab-on, .job-tab-on:hover { background: var(--crimson); color: #fff; box-shadow: none; }
.job-tab-count { min-width: 1.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--tone-red-soft); color: var(--tone-red-ink); font-size: 0.75rem; text-align: center; }
.job-tab-on .job-tab-count { background: var(--gold); color: #1c1c1e; }
.job-panel[hidden] { display: none; }
.insp-mini-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; padding: 0.5rem var(--space-3); }
.insp-mini-tiles .insp-tile { padding: 0.35rem 0.6rem; }
.insp-mini-tiles .insp-tile b { font-size: 1.1rem; }
@media (max-width: 760px) { .job-tab { padding: 0.5rem 0.7rem; font-size: 0.85rem; } .job-tabs { top: 6.2rem; } }

/* The parts required (job-required-view.js). */
.req-section { padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.req-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.req-bar h3 { margin: 0 auto 0 0; }
.req-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; }
.req-markup-field { display: inline-flex; gap: 0.35rem; align-items: center; font-size: var(--step--1); color: var(--ink-soft); }
.req-markup { width: 4.5rem; }
.req-table { container-type: inline-size; }
.req-line { display: grid; grid-template-columns: 2.6rem minmax(9rem, 1fr) 9rem 4rem 8rem 7.5rem 6rem 4.6rem 6rem 6.5rem 2.2rem 1.8rem; gap: 0.4rem; align-items: center; padding: 0.3rem 0; }
.req-head { font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.req-line input, .req-line select { width: 100%; min-width: 0; padding: 0.3rem 0.45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: var(--step--1); }
.req-line input:focus, .req-notes textarea:focus { outline: none; border-color: var(--gold); }
.req-ebr { font-weight: 700; }
.req-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--step--1); }
.req-notes-button { border: 0; background: none; cursor: pointer; color: var(--ink-soft); font-size: 1rem; }
.req-has-notes { color: var(--crimson-ink); }
.req-group { margin-top: var(--space-2); border-left: 4px solid var(--tone-red); padding-left: var(--space-2); }
.req-group-head { display: flex; gap: var(--space-2); align-items: baseline; margin: 0.4rem 0 0.2rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--crimson-ink); }
.req-group-seal { border-left-color: var(--tone-teal); }
.req-group-moving { border-left-color: var(--tone-purple); }
.req-group-hardware { border-left-color: var(--tone-grey); }
.req-group-body { border-left-color: var(--tone-blue); }
.req-group-jacketed { border-left-color: var(--tone-orange); }
.req-row { border-bottom: 1px solid var(--line); }
.req-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-2); padding: 0.3rem 0 0.6rem 3rem; }
.req-notes textarea { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }
.req-watch { margin: var(--space-3) 0 0; padding: 0.45rem var(--space-3); border-radius: 8px; background: var(--tone-amber-soft); color: var(--tone-amber-ink); font-size: var(--step--1); }
.req-totals { display: flex; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 2px solid var(--line-strong); }
.req-totals div { display: grid; text-align: right; }
.req-totals span { font-size: 0.75rem; color: var(--ink-soft); }
.req-totals b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
@container (max-width: 900px) {
  .req-line { grid-template-columns: 2rem minmax(6rem, 1fr) 6.6rem 3rem 6rem 4.6rem 3.6rem 4.8rem 1.6rem 1.4rem; gap: 0.3rem; }
  .req-line > :nth-child(5), .req-line > :nth-child(10) { display: none; }
}
.pricing-material { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: center; margin: 0 var(--space-3) var(--space-3); padding: 0.6rem var(--space-3); border-radius: 8px; background: var(--fill); }
.pricing-material > div:first-child { display: flex; gap: var(--space-2); align-items: center; }
.pricing-material-sums { display: flex; gap: var(--space-4); font-variant-numeric: tabular-nums; }
.req-line .req-markup-cell { background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }

/* ----- Diagrams of a pump series (diagram-view.js, diagram-editor.js, diagrams-panel.js) ----- */
.dg-figure { position: relative; display: block; line-height: 0; background: #fff; border-radius: 6px; overflow: hidden; }
.dg-figure img { display: block; width: 100%; height: auto; user-select: none; }
.dg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dg-shape { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg-number circle { fill: #fff; }
.dg-number text, text.dg-text { stroke: none; font-family: var(--font-body, system-ui, sans-serif); font-weight: 800; }
.dg-arrow path { stroke: none; }
.dg-highlight { opacity: 0.38; mix-blend-mode: multiply; }
.dg-red { stroke: var(--mark-red); color: var(--mark-red); } .dg-blue { stroke: var(--mark-blue); color: var(--mark-blue); } .dg-green { stroke: var(--mark-green); color: var(--mark-green); }
.dg-black { stroke: var(--mark-black); color: var(--mark-black); } .dg-yellow { stroke: var(--mark-yellow); color: var(--mark-yellow); } .dg-pink { stroke: var(--mark-pink); color: var(--mark-pink); }
.dg-number text, text.dg-text, .dg-arrow path { fill: currentColor; }
.dg-number text { fill: currentColor; }
.dg-crop { fill: rgba(0, 0, 0, 0.08); stroke: var(--mark-blue); stroke-dasharray: 8 6; }
.dg-panel { display: grid; gap: var(--space-3); }
.dg-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; justify-content: space-between; }
.dg-head .fu-hint { flex: 1 1 24rem; margin: 0; }
.dg-add, .dg-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.dg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); }
.dg-card { display: grid; gap: 0.5rem; padding: 0.6rem; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.dg-thumb { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.dg-thumb .dg-figure { max-height: 14rem; }
.dg-card-text { display: grid; gap: 0.2rem; }
.dg-card-actions { display: flex; gap: 0.35rem; }
.dg-tag { justify-self: start; padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--fill); color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; }
.dg-tag-seal { background: var(--tone-teal-soft); color: var(--tone-teal-ink); }
.dg-editor { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.dg-details { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 14rem); gap: var(--space-2); }
.dg-details .dg-field:last-child { grid-column: 1 / -1; }
.dg-field { display: grid; gap: 0.2rem; font-size: var(--step--1); color: var(--ink-soft); }
.dg-field input, .dg-field select { padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; }
.dg-sizes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dg-chip { padding: 0.25rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.8rem; cursor: pointer; }
.dg-chip-on { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.dg-toolbar { position: sticky; top: 7.2rem; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; padding: 0.4rem; border-radius: 8px; background: var(--fill); }
.dg-tool-on { background: var(--gold); border-color: var(--gold); color: #1c1c1e; }
.dg-colours { display: inline-flex; gap: 0.25rem; }
.dg-hint { flex: 1 1 100%; }
.dg-stage { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dg-stage .dg-svg { cursor: crosshair; touch-action: none; }
.dg-stage[data-tool='erase'] .dg-svg { cursor: not-allowed; }
.dg-chooser { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.dg-chooser h4 { margin: 0; }
.dg-preview img { max-width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.tech-diagrams { display: grid; gap: 10px; margin-bottom: 12px; }
.tech-diagram { margin: 0; break-inside: avoid; page-break-inside: avoid; }
.tech-diagram .dg-figure { max-width: 100%; border: 1px solid #ccc; border-radius: 0; }
.tech-diagram figcaption { margin-top: 4px; font-size: 11px; font-weight: 700; }
@media print {
  .tech-diagram .dg-figure { width: fit-content; max-width: 100%; margin: 0 auto; }
  .tech-diagram .dg-figure img { max-height: 7cm; width: auto; max-width: 100%; }
  .tech-seal-head { break-after: avoid; page-break-after: avoid; }
  .tech-table thead { display: table-header-group; }
}
@media (max-width: 760px) { .dg-details { grid-template-columns: 1fr; } }
.dg-drop { outline: 3px dashed var(--gold); outline-offset: 6px; border-radius: var(--radius); }
.tech-seal { margin-top: 14px; padding-top: 10px; border-top: 3px solid #1c1c1e; }
.tech-seal-head { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }

/* The tech sheet is printed by the tech: as few pages as possible. Small
   type and tight rows, diagrams two across and at most 7 cm high, the seal
   list straight after the pump's (its heavy line and heading divide them). */
@media print {
  .tech-sheet { page: tech-sheet; }
  @page tech-sheet { size: letter portrait; margin: 8mm; }
  .tech-sheet { font-size: 9px; line-height: 1.2; }
  .tech-head { padding-bottom: 3px; margin-bottom: 5px; }
  .tech-head b { font-size: 13px; }
  .tech-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px 8px; margin-bottom: 6px; font-size: 9px; }
  .tech-table th { padding: 2px 4px; font-size: 8.5px; }
  .tech-table td { padding: 1.5px 4px; }
  .tech-box { width: 8px; height: 8px; }
  .tech-diagrams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
  .tech-diagram:only-child { grid-column: 1 / -1; }
  .tech-diagram figcaption { margin-top: 2px; font-size: 9px; }
  .tech-seal { margin-top: 8px; padding-top: 5px; border-top-width: 2px; }
  .tech-seal-head { margin-bottom: 4px; font-size: 11px; }
  .tech-foot-notes { margin-top: 6px; font-size: 8.5px; }
  .tech-sign { margin-top: 10px; font-size: 9px; }
}

/* ----- The diagram that drives the inspection (diagram-inspect.js) -----
   Beside the parts list when there is room, above it when narrow. The
   numbers are coloured like the rows: green OK, amber to watch, red to
   replace, dashed grey not checked. The paper stays white in dark mode. */
.insp-section { container-type: inline-size; }
.insp-split { display: grid; gap: var(--space-3); align-items: start; }
@container (min-width: 900px) {
  .insp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .insp-split > .dgi { position: sticky; top: 10.6rem; z-index: 4; }
}
.dgi { display: grid; gap: 0.5rem; padding: var(--space-3); border-radius: var(--radius); background: var(--panel); }
.dgi[hidden] { display: none; }
.dgi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dgi-head > b { font-size: 1rem; }
.dgi-picker[hidden] { display: none; }
.dgi-zooms { display: inline-flex; gap: 0.25rem; margin-left: auto; }
.dgi-zoom { width: 2rem; height: 2rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.dgi-zoom:hover { background: var(--fill); }
.dgi-hint { flex: 1 1 100%; color: var(--ink-soft); font-size: var(--step--1); }
.dgi-hint-warn { padding: 0.4rem 0.6rem; border-radius: 8px; background: var(--tone-amber-soft); color: var(--tone-amber-ink); }
.dgi-paper { display: flex; justify-content: center; min-width: 0; }
.dgi-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; touch-action: pan-y; }
.dgi-stage.dgi-zoomed { cursor: grab; touch-action: none; }
.dgi-stage.dgi-dragging { cursor: grabbing; }
.dgi-layer { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 0.2s ease; }
.dgi-dragging .dgi-layer { transition: none; }
.dgi-figure { position: absolute; inset: 0; border-radius: 0; }
.dgi-figure img { width: 100%; height: 100%; -webkit-user-drag: none; }
.dgi-balloons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dgi-b { cursor: pointer; outline: none; }
.dgi-ring { transition: fill 0.2s ease, stroke 0.2s ease; }
.dgi-b text { font-family: var(--font-body, system-ui, sans-serif); font-weight: 800; pointer-events: none; transition: fill 0.2s ease; }
.dgi-todo .dgi-ring { fill: #fff; stroke: #8e8e93; stroke-dasharray: 4 3; } .dgi-todo text { fill: #1c1c1e; }
.dgi-none .dgi-ring { fill: #f2f2f7; stroke: #c4c4c9; } .dgi-none text { fill: #8e8e93; }
.dgi-ok .dgi-ring { fill: var(--tone-green); stroke: #fff; }
.dgi-watch .dgi-ring { fill: var(--tone-amber); stroke: #fff; }
.dgi-replace .dgi-ring { fill: var(--tone-red); stroke: #fff; }
.dgi-ok text, .dgi-watch text, .dgi-replace text { fill: #fff; }
.dgi-halo { fill: none; stroke: var(--gold); opacity: 0; transition: opacity 0.15s ease; }
.dgi-hot .dgi-halo, .dgi-b:focus-visible .dgi-halo { opacity: 0.8; }
.dgi-sel .dgi-halo { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .dgi-sel .dgi-halo { animation: dgi-pulse 1.4s ease-in-out infinite; } }
@keyframes dgi-pulse { 50% { stroke-opacity: 0.35; } }
.dgi-dim { opacity: 0.25; }
.dgi-pop { display: grid; gap: 0.45rem; padding: 0.6rem 0.7rem; border-radius: 10px; background: var(--fill); box-shadow: inset 0 0 0 2px var(--gold); }
.dgi-pop[hidden] { display: none; }
.dgi-pop-head { display: flex; align-items: center; gap: 0.5rem; }
.dgi-pop-head b { flex: 1; min-width: 0; font-size: 0.85rem; }
.dgi-pop-num { padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--fill-strong); font-weight: 800; font-size: 0.85rem; }
.dgi-pop-close { width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink); font: inherit; cursor: pointer; }
.dgi-pop-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, auto); align-items: center; gap: 0.3rem 0.6rem; padding-top: 0.4rem; border-top: 1px solid var(--line); font-size: 0.8rem; }
@container (max-width: 520px) { .dgi-pop-part { grid-template-columns: minmax(0, 1fr); } }
.dgi { container-type: inline-size; }
.dgi-pop-part .insp-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
.dgi-pop-keys, .dgi-pop-none { margin: 0; color: var(--ink-soft); font-size: 0.72rem; }
/* Tab 1 with a diagram: the side panel steps aside so the diagram and the list sit side by side. */
.record-layout:has(.job-panel:not([hidden]) .insp-split) { grid-template-columns: minmax(0, 1fr); }
.record-layout:has(.job-panel:not([hidden]) .insp-split) > .record-side { display: none; }
/* A list beside the diagram can be narrow: each row's buttons go under its description. */
@container (max-width: 600px) {
  .insp-head { display: none; }
  .insp-line { grid-template-columns: 2.4rem minmax(0, 1fr) 2.6rem 7rem; }
  .insp-line .insp-status { grid-column: 2 / -1; }
}
/* The rows of the chosen number, and of the number pointed at. */
.insp-row { transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.insp-row.insp-row-sel { box-shadow: inset 0 0 0 2px var(--gold); background: color-mix(in srgb, var(--gold-soft) 70%, var(--panel)); }
.insp-row.insp-row-hot { background: color-mix(in srgb, var(--gold-soft) 55%, var(--panel)); }
/* The count tiles above the list are its filter. */
.insp-filter { border: 0; font: inherit; text-align: left; cursor: pointer; }
.insp-filter:hover { filter: brightness(0.97); }
.insp-filter-on { box-shadow: inset 0 0 0 2px currentColor; }

/* ----- EBR Workshop page in REGIVOS: people and approved devices (workshop-people-screen.js) ----- */
.ws-intro { max-width: 52rem; }
.ws-card { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius); background: var(--panel); margin-bottom: var(--space-4); }
.ws-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ws-head h3 { margin: 0; font-size: 1.15rem; }
.ws-head .button { margin-left: auto; }
.ws-group h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.ws-table { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ws-row { display: grid; grid-template-columns: minmax(8rem, 1.2fr) minmax(10rem, 1.6fr) 5rem 4rem minmax(8rem, 1fr) 11rem 4.5rem; gap: 0.6rem; align-items: center; padding: 0.55rem 0.8rem; border-top: 1px solid var(--line); }
.ws-row:first-child { border-top: 0; }
.ws-row-head { background: var(--fill); color: var(--ink-soft); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ws-row-device { grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1fr) minmax(10rem, 1fr) 5rem; }
.ws-off { color: var(--ink-soft); }
.ws-email { overflow-wrap: anywhere; font-size: 0.9rem; }
.ws-yes { color: var(--tone-green-ink); font-weight: 800; } .ws-no { color: var(--ink-soft); }
@media (max-width: 900px) {
  .ws-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ws-row-head { display: none; }
  .ws-row > :nth-child(n+3):not(:last-child):not(:nth-child(6)) { display: none; }
  .ws-row > .ws-email { grid-column: 1 / -1; order: 3; }
}
.ws-form { display: grid; gap: var(--space-3); }
/* EBR Workshop overview (REGIVOS' own section for the Workshop). */
.ws-front .fu-hint { margin: 0; max-width: 52rem; }
.ws-address { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ws-address span { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.ws-address input { flex: 1 1 18rem; max-width: 32rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); color: var(--ink); font: inherit; }
.ws-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ws-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); align-items: start; }
@media (max-width: 900px) { .ws-columns { grid-template-columns: minmax(0, 1fr); } }
.ws-overview .record-row { display: flex; align-items: center; gap: var(--space-2); }
.ws-overview .record-main { flex: 1 1 auto; min-width: 0; }
.ws-overview div.record-row::after { content: none; }
.ws-overview div.record-row:hover { background: none; }
.ws-late .record-detail { color: var(--alert-red); font-weight: 600; }
.ws-stages { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: var(--space-2); }
.ws-stage { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--fill); font-size: 0.8rem; }
.ws-stage-none { color: var(--ink-soft); }
.ws-form .field .button { margin: 0 0 0.6rem; justify-self: start; }
.ws-switch { display: flex; align-items: center; gap: 0.5rem; }
.ws-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.ws-code-box { display: grid; gap: 0.4rem; text-align: center; }
.ws-code { margin: 0.2rem 0; font: 800 2.2rem/1.1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.12em; color: var(--crimson-ink); }
.ws-row .fu-tag { justify-self: start; }

/* ----- Rundown: every pump file, whoever made it (pumps/rundown-screen.js) ----- */
.rundown-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--panel); }
.rundown-table a { color: var(--crimson-ink); text-decoration: none; }
.rundown-late td:nth-child(5) { color: var(--tone-red-ink); font-weight: 700; }