/* ENG-1249 Slice 1 PR B — the Quote Register (EXPERIENCE.md → Register projection).
   Tokens only; tests/eng-1249-stylesheet-tokens.test.mjs fails this file on the first
   hand-picked colour. Not added to redesign.css on purpose.

   ENG-1512: status colour comes from the design language's tones (Live blue, Won green,
   Lost red, Expired grey) on chips that always carry their word. This file adds layout only. */

.register-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}

.register-search {
  flex: 1 1 16rem;
  min-width: 0;
}

.register-search input {
  width: 100%;
  min-height: var(--touch);
  padding: 0.45rem 0.8rem;
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
}

.register-search input:focus-visible,
.register-filters .dl-filter:focus-visible,
.register-sort:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.register-filters {
  flex-basis: 100%;
}

.register-filters .dl-filter.dl-tone-neutral[aria-pressed="false"] {
  border: 1px solid var(--border-visible);
  background: var(--bg-card-opaque);
}

.register-filter-rule {
  align-self: stretch;
  width: 1px;
  margin: var(--space-1) var(--space-1-5);
  background: var(--border-visible);
}

.register-count {
  flex-basis: 100%;
  margin: 0;
}

.register-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--bg-card-opaque);
}

.quote-register {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}

.quote-register th,
.quote-register td {
  text-align: left;
  vertical-align: top;
}

.quote-register th {
  white-space: nowrap;
}

.quote-register th.num,
.quote-register td.num {
  text-align: right;
}

.register-sort {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.quote-register th[aria-sort="ascending"] .register-sort::after { content: " ↑"; }
.quote-register th[aria-sort="descending"] .register-sort::after { content: " ↓"; }

.quote-register tbody tr:last-child td {
  border-bottom: 0;
}

.register-row:not([data-attention]):hover td {
  background: var(--bg-elevated);
}

.register-cell {
  min-width: 0;
}

.register-cell > span {
  display: block;
}

.register-client-name,
.register-project-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-snug);
  color: var(--text-primary);
}

.register-ref {
  margin-top: var(--space-0-5);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-snug);
  color: var(--text-secondary);
}

.register-meta {
  margin-top: var(--space-0-5);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}

.tnum {
  font-variant-numeric: tabular-nums lining-nums;
}

.register-amount-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.register-status-cell > .register-status {
  display: inline-flex;
  margin-bottom: var(--space-1);
}

/* A status chip is the design language's label pill; a row still being read stays neutral and dashed. */
.register-status[data-status="checking"],
.register-status[data-status="unavailable"] {
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-visible);
}

.register-activity-sentence {
  color: var(--text-body);
  line-height: var(--lh-body-snug);
}

.register-attention-note {
  margin-top: var(--space-0-5);
  color: var(--attention-text);
  font-weight: var(--fw-semibold);
}

/* ENG-2415: an approval waiting more than 1 working day. */
.register-attention-note--overdue {
  color: var(--error);
}

.register-empty {
  padding: var(--space-6);
  color: var(--text-secondary);
  text-align: center;
}

.register-status-cell .quote-chip {
  margin-top: var(--space-1);
}

/* ENG-2356: the delivery project chip is a link and wraps inside the narrow status column. */
.register-status-cell .register-project-chip {
  display: flex;
  width: fit-content;
  max-width: 100%;
  border-color: var(--success-24);
  background: var(--success-10);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.register-status-cell .register-project-chip[data-flagged="true"] {
  border-color: var(--warning-24);
  background: var(--warning-10);
}

/* ENG-1460: engineering and synthetic quotes sit under a collapsed heading, same neutral plate. */
.register-engineering {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}

.register-engineering > summary {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

.register-engineering .register-table-wrap {
  margin-top: var(--space-2);
}

.register-engineering-chip {
  margin-left: var(--space-1);
}

.register-actions {
  white-space: nowrap;
}

.register-actions .register-followup-toggle,
.register-actions .register-row-action {
  display: block;
  margin-top: var(--space-2);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent-ink);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

.register-followup-row td {
  padding-top: 0;
}

.register-followup {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-visible);
  border-radius: var(--radius-panel);
}

.register-followup-note {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--ink-warning);
}

.register-followup-subject {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}

.register-followup-key {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.register-followup-body {
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-snug);
  color: var(--text-body);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-input);
  resize: vertical;
}

.register-followup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.register-followup-status {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}

.register-row.is-skeleton td {
  padding: var(--space-4);
}

/* ENG-2407: the ref opens the quote; the Waiting on me group and the rest have their own headings. */
a.register-ref {
  display: block;
  margin-top: 0;
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.register-group-row td {
  padding: var(--space-2) var(--space-3-5);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

/* Phone: each row becomes a card, headers become labels. Same markup, no second template. */
@media (max-width: 720px) {
  .quote-register thead {
    display: none;
  }

  .quote-register,
  .quote-register tbody,
  .quote-register tr,
  .quote-register td {
    display: block;
  }

  .register-row {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .quote-register.dl-register td {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3-5);
    border: 0;
  }

  /* Every line of a cell sits beside its label, never under it. */
  .quote-register.dl-register td > * {
    grid-column: 2;
  }

  .quote-register.dl-register td > .register-status {
    justify-self: start;
  }

  .quote-register.dl-register td.register-empty {
    display: block;
    padding: var(--space-4);
  }

  .quote-register.dl-register td.register-empty::before {
    content: none;
  }

  .quote-register td.num {
    text-align: left;
  }

  .quote-register td::before {
    content: attr(data-label);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .quote-register.dl-register .register-followup-row td {
    display: block;
  }

  .register-followup-row td::before {
    content: none;
  }

  .register-actions .btn {
    width: 100%;
  }

  /* ENG-2411: on a phone each row is a card of Client, Job name, Amount, Status and Next action. */
  .quote-register.dl-register td.register-ref-cell,
  .quote-register.dl-register td.register-preparer,
  .quote-register.dl-register td.register-approver,
  .quote-register.dl-register td.register-activity {
    display: none;
  }
}

/* ENG-1511, ENG-2411: the Board | List switch sits directly above the view it picks. */
.quotes-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}

.quotes-switch-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-meta);
}

.quotes-board-host {
  min-width: 0;
  margin: 0 0 var(--space-6);
}

.quotes-board-note {
  margin: var(--space-3) 0 0;
}

/* Phone: the board scrolls one column at a time inside its panel; the page never scrolls sideways. */
@media (max-width: 720px) {
  .quotes-board.dl-board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
  }

  .quotes-board > .dl-board-column {
    scroll-snap-align: start;
  }

  .quotes-board-host .dl-panel__head {
    flex-wrap: wrap;
  }

  .quotes-board-host .dl-panel__titles {
    flex-basis: calc(100% - 4rem);
  }
}

/* ENG-1513: "What CDS has charged before", a Coming panel under the register. */
.charged-before-host {
  margin: var(--space-6) 0 0;
}

.charged-before__rule {
  margin: 0 0 var(--space-5);
  padding: var(--space-3-5) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--coming-soft);
  color: var(--coming-ink);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.charged-before__plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5) var(--space-8);
}

.charged-before__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
}

.charged-before__steps,
.charged-before__states {
  margin: 0;
  display: grid;
  gap: var(--space-2-5);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}

.charged-before__steps {
  padding-left: var(--space-5);
}

.charged-before__states {
  padding: 0;
  list-style: none;
}

.charged-before__state {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.charged-before__state > span:last-child,
.charged-before__status {
  color: var(--text-secondary);
}

.charged-before__status {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.charged-before__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
}

/* Phone: the Coming pill drops under the title rather than squeezing it to one word a line. */
@media (max-width: 720px) {
  .charged-before-host .dl-panel__head {
    flex-wrap: wrap;
  }

  .charged-before-host .dl-panel__titles {
    flex-basis: calc(100% - 4rem);
  }
}

/* ENG-2395: Create New Quote. The page reads top to bottom like the CDS quote sheet. */
.create-quote { display: grid; gap: var(--space-5); }
.create-quote-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); border: 0; margin: 0; padding: 0; }
.create-quote-format { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-visible); border-radius: var(--radius-input); cursor: pointer; }
.create-quote-format:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.create-quote-format.is-coming { cursor: not-allowed; color: var(--text-secondary); }
.create-quote-format__label { font-weight: var(--fw-semibold); color: var(--text-primary); }
.create-quote-format__note { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.create-quote-starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.create-quote-start { display: grid; gap: var(--space-1); text-align: left; min-height: var(--touch); padding: var(--space-4); border: 1px solid var(--border-visible); border-radius: var(--radius-card); background: var(--bg-card); color: var(--text-body); font: inherit; cursor: pointer; }
.create-quote-start:hover, .create-quote-start:focus-visible { border-color: var(--accent); }
.create-quote-start strong { font-size: var(--fs-body); color: var(--text-primary); }
.create-quote-start span { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.create-quote-paste { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.create-quote-attach { justify-self: start; cursor: pointer; }
.create-quote-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3) var(--space-4); }
.create-quote-field { display: grid; gap: var(--space-1); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.create-quote-field input { font: inherit; font-weight: 400; font-size: var(--fs-body); color: var(--text-body); min-height: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-visible); border-radius: var(--radius-input); background: var(--bg-surface); }
.create-quote-field--clientName { grid-column: 1 / -1; }
.create-quote-required, .create-quote-hint { font-weight: 400; color: var(--text-muted); }
.create-quote-saved { margin: var(--space-3) 0 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.create-quote-saved.is-saved { color: var(--success); }
.create-quote-saved.is-error { color: var(--error); }
.create-quote-worktypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); border: 0; margin: 0; padding: 0; }
.create-quote-worktype { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-2); align-items: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-visible); border-radius: var(--radius-input); cursor: pointer; }
.create-quote-worktype:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.create-quote-worktype input { min-width: 1.25rem; min-height: 1.25rem; margin: 0.15rem 0 0; }
.create-quote-worktype strong { color: var(--text-primary); }
.create-quote-worktype .create-quote-hint { grid-column: 2; font-size: var(--fs-body-sm); }
.create-quote-questions { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.create-quote-questions:empty { display: none; }
.create-quote-subhead { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); }
/* ENG-2398: scope and pricing table on Create New Quote. Flat data, scrolls sideways on a phone. */
.create-quote-table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
.create-quote-pricing { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--fs-body-sm); }
.create-quote-pricing th, .create-quote-pricing td { padding: var(--space-2); border-bottom: 1px solid var(--border-visible); text-align: left; vertical-align: top; }
.create-quote-pricing thead th { font-family: var(--font-mono); font-size: var(--fs-label-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-secondary); font-weight: 500; }
.create-quote-pricing tbody th { font-weight: var(--fw-semibold); color: var(--text-primary); min-width: 12rem; }
.create-quote-pricing tbody th .create-quote-hint { display: block; font-weight: 400; }
.create-quote-pricing input, .create-quote-pricing select { font: inherit; font-size: var(--fs-body); width: 100%; min-height: var(--touch); padding: var(--space-1) var(--space-2); border: 1px solid var(--border-visible); border-radius: var(--radius-input); background: var(--bg-surface); color: var(--text-body); }
.create-quote-pricing input { font-variant-numeric: tabular-nums; }
.create-quote-internal { background: var(--bg-surface); }
.create-quote-price-note { display: block; margin-top: var(--space-1); color: var(--text-secondary); }
.create-quote-price-note[data-price-state="none"] { color: var(--text-muted); }
.create-quote-price-note[data-price-state="suggested"] strong { color: var(--accent); }
.create-quote-stale { display: inline-block; margin-left: var(--space-1); color: var(--warning); font-weight: var(--fw-semibold); }
.create-quote-use { margin-top: var(--space-1); }
.create-quote-add-line { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); margin-top: var(--space-3); }
.create-quote-add-line .create-quote-field { flex: 1 1 16rem; }
.create-quote-line-error { display: block; margin-top: var(--space-1); color: var(--error); }
.create-quote-pricing input[aria-invalid="true"] { border-color: var(--error); }
.create-quote-filled { display: block; margin-top: var(--space-1); font-size: var(--fs-body-sm); color: var(--accent-hover); }
.create-quote-paste textarea { width: 100%; font: inherit; }
.create-quote-badge { font-family: var(--font-mono); font-size: var(--fs-label-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); white-space: nowrap; }
.create-quote-badge.is-human { background: var(--warning-10); color: var(--text-primary); }
.create-quote-badge.is-agent { background: var(--gold-10); color: var(--accent-hover); }
.create-quote-badge.is-done { color: var(--text-muted); }
.create-quote-badge.is-busy { background: var(--info-10); color: var(--text-primary); }
.create-quote-suppliers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.create-quote-supplier { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.create-quote-supplier__kind { font-family: var(--font-mono); font-size: var(--fs-label-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-secondary); }
.create-quote-supplier-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); border: 0; padding: 0; margin: var(--space-4) 0 0; }
.create-quote-toggle { margin-left: var(--space-2); }
.create-quote-checklist { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.create-quote-requirements { margin: 0 0 var(--space-2); padding-left: var(--space-4); }
.create-quote-assumption { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.create-quote-assumption legend { font-weight: var(--fw-semibold); padding: 0 var(--space-1); }
.create-quote-sent-back { margin: 0 0 var(--space-4); }
.create-quote-sent-back h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.create-quote-sent-back__note, .create-quote-approval-note { white-space: pre-wrap; margin: 0; }
/* ENG-2414: the approver's comments, pinned for the preparer and shown again on resubmission. */
.create-quote-sent-back__lead { margin: var(--space-3) 0 var(--space-1); font-weight: var(--fw-semibold); }
.create-quote-sent-back__comments { margin: 0; padding-left: var(--space-5); }
.create-quote-line-comment { display: block; margin-top: var(--space-1); padding: var(--space-1) var(--space-2); border-left: 3px solid var(--warning); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); color: var(--text-body); }
.approve-line--changed > th, .approve-line--changed > td { background: var(--accent-soft); }
.approve-changed { display: block; margin-top: var(--space-1); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.approve-earlier { margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-2); border-left: 3px solid var(--warning); font-size: var(--fs-body-sm); color: var(--text-body); }
.approve-earlier[data-approve-earlier="answered"] { border-left-color: var(--success); }
.approve-earlier__label, .approve-earlier__state { font-weight: var(--fw-semibold); }
.approve-comment { margin-top: var(--space-2); display: grid; gap: var(--space-1); justify-items: start; }
.approve-comment textarea, .approve-bar__note textarea { width: 100%; font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-visible); border-radius: var(--radius-input); background: var(--bg-surface); color: var(--text-body); }
.approve-history { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.approve-history__note { display: block; white-space: pre-wrap; color: var(--text-body); }
.approve-removed { margin-top: var(--space-3); font-size: var(--fs-body-sm); }
.approve-bar__note summary { cursor: pointer; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.approve-bar__approved-note { margin: 0; }
.create-quote-approval-open { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.create-quote-after__act { margin: 0 0 var(--space-4); }
.create-quote-after__act .create-quote-hint { margin: var(--space-2) 0 0; }
.create-quote-after__send { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.create-quote-after__send h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }

/* ENG-2412: the approver's check. Summary strip, the quote read-only beside Ask Brain, and the answer held at the bottom. */
.approve-page { display: grid; gap: var(--space-5); padding-bottom: var(--space-4); }
.approve-status { margin: 0; }
.approve-strip { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-visible); border-radius: var(--radius-card); background: var(--bg-card); }
.approve-strip__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0; }
.approve-strip__fact dt { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--text-secondary); }
.approve-strip__fact dd { margin: var(--space-1) 0 0; color: var(--text-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.approve-strip__flags-title { margin: 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.approve-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.approve-flags a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch); padding: var(--space-1) var(--space-3); border: 1px solid var(--warning); border-radius: var(--radius-input); color: var(--text-primary); text-decoration: none; }
.approve-flags a:hover, .approve-flags a:focus-visible { background: var(--accent-soft); }
.approve-flags__count { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.approve-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.approve-quote { display: grid; gap: var(--space-4); min-width: 0; }
.approve-table-wrap { overflow-x: auto; }
.approve-lines { width: 100%; border-collapse: collapse; }
.approve-lines th, .approve-lines td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.approve-lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.approve-lines tr:target, .approve-lines tr:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.approve-ref, .approve-reasoning { display: block; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.approve-disposition, .approve-answer { display: block; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.approve-bar { position: sticky; bottom: 0; z-index: 30; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-visible); border-radius: var(--radius-card); background: var(--bg-card-opaque); box-shadow: var(--elevation-2); }
.approve-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.approve-bar__actions .btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.approve-bar__send-back { display: grid; gap: var(--space-2); }
.approve-bar__send-back textarea { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-visible); border-radius: var(--radius-input); background: var(--bg-surface); color: var(--text-body); }
.approve-bar__signed { margin: 0; color: var(--success); font-weight: var(--fw-semibold); }
.approve-bar__hint, .approve-bar__message { margin: 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.approve-bar__message:empty { display: none; }

/* A flag jump stops above the answer bar, not under it. */
html:has(.approve-page) { scroll-padding-bottom: 10rem; }
.approve-section:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-card); }

/* The fixed mobile nav shows from 900px down (app.css), so the bar sits above it from there. */
@media (max-width: 900px) {
  .approve-bar { bottom: var(--mobile-nav-height); }
  html:has(.approve-page) { scroll-padding-bottom: calc(var(--mobile-nav-height) + 12rem); }
}

@media (max-width: 720px) {
  .approve-bar { padding: var(--space-2) var(--space-3); }
  .approve-bar__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approve-bar__send-back textarea { max-height: 6rem; }
  .approve-lines thead { display: none; }
  .approve-lines, .approve-lines tbody, .approve-lines tr, .approve-lines th, .approve-lines td { display: block; }
  .approve-lines td.num { text-align: left; }
  .approve-lines td::before { content: attr(data-label); display: block; font-size: var(--fs-label); font-weight: var(--fw-semibold); text-transform: uppercase; color: var(--text-secondary); }
}

/* ENG-2413: margin is internal, read beside the cost; figures in tabular numbers. */
.create-quote-margin { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-secondary); }
.create-quote-margin-total { margin: var(--space-2) 0 0; font-variant-numeric: tabular-nums; }
/* ENG-2421: Create New Tender's document list and the Tenders page list, in Create New Quote's look. */
.tenders, .review-page { display: grid; gap: var(--space-5); }
.tender-docs, .tender-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.tender-doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.tender-doc__name { flex: 1 1 100%; overflow-wrap: anywhere; }
.tender-doc__label { flex: 1 1 14rem; }
.tender-list__row { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }