/* ==========================================================================
   Case invoicing

   Two things: the Invoicing card on the case record, and the builder modal it
   opens. The invoice *document* is styled somewhere else entirely and on
   purpose — it is a client-facing PDF printed from one self-contained string of
   HTML (see app/views/case_invoices/pdf/_styles.html.erb). Nothing here reaches
   it, and nothing there reaches this.
   ========================================================================== */

/* --- The card on the case record ----------------------------------------- */

.invoicing__status {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-3);
}

.invoicing__field + .invoicing__field {
  margin-top: 0;
}

.invoicing__field {
  margin-bottom: var(--space-3);
}

.invoicing__empty {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.invoicing__document {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.invoicing__link {
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.invoicing__amount {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* Everything superseded by the current invoice. Collapsed, because on most
   cases there is nothing in it and on the rest it is history rather than
   something to act on. */
.invoicing__history {
  margin-top: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.invoicing__history summary {
  cursor: pointer;
}

.invoicing__history ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

/* Only while an invoice is with a reviewer. Amber, because it is a hold rather
   than a fault — the same colour the builder's service-plan warning uses. */
.invoicing__review-note {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-small);
}

.invoicing__review-note form {
  margin-top: var(--space-2);
}

.invoicing__action {
  width: 100%;
  justify-content: center;
}

/* Who the invoice was emailed to, from the latest attempt (see
   Invoicing::Delivery). Red only when that attempt failed. */
.invoicing__delivery {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.invoicing__delivery--failed {
  color: var(--color-danger);
}

/* --- The builder modal ---------------------------------------------------- */

.invoice-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.invoice-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

/* Wide, because it is two panels side by side: choosing on the left and the
   consequence on the right. Capped at the viewport so the body scrolls inside
   it rather than the page scrolling behind it. */
.invoice-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  max-height: min(880px, 92vh);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

/* The form wraps the body and the footer, so it is the flex column that divides
   the panel's remaining height between them. A plain block here grows to its
   content instead, and pushes the footer out of the panel's overflow — a send
   button nobody can reach on a short screen. */
.invoice-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* The fixed bands — header, warning, footer — keep their height and the body
   absorbs whatever is left. */
.invoice-modal__header {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.invoice-modal__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.invoice-modal__title {
  font-size: var(--font-size-xlarge);
  color: var(--color-primary-dark);
}

.invoice-modal__subtitle {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.invoice-modal__close {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-1);
}

.invoice-modal__close:hover {
  color: var(--color-primary-dark);
}

.invoice-modal__warning {
  flex: none;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: #fdf4e9;
  font-size: var(--font-size-small);
  color: var(--color-warning-dark);
}

.invoice-modal__warning svg {
  flex: none;
  margin-top: 2px;
}

.invoice-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  /* `min-height: 0` is what lets the two panels scroll instead of the whole
     modal growing past the screen — a grid item's default minimum is its
     content. */
  min-height: 0;
  flex: 1 1 auto;
}

.invoice-modal__services {
  padding: var(--space-4) var(--space-6);
  overflow-y: auto;
}

/* A column of its own: the lines scroll and the totals sit under them as a
   band that does not move. Not `position: sticky` on the totals — a sticky block
   inside a short panel ends up painted over the line controls beneath it, and
   the thing it covers is a checkbox somebody was trying to tick. */
.invoice-modal__preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.invoice-modal__footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.invoice-modal__reviewer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.invoice-modal__reviewer .form__label {
  margin: 0;
  white-space: nowrap;
}

.invoice-modal__buttons {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
}

/* --- People tabs ---------------------------------------------------------- */

.invoice-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.invoice-people__tab,
.invoice-people__add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}

.invoice-people__tab.is-active {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: #fff;
}

/* A tab somebody added and has not named. Not an error — they may be halfway
   through typing — so it is marked rather than flagged. */
.invoice-people__tab.is-unnamed {
  font-style: italic;
  color: var(--color-text-muted);
}

.invoice-people__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tint-green-16);
  color: var(--color-primary-dark);
  font-size: 11px;
}

.invoice-people__tab.is-active .invoice-people__count {
  background: var(--tint-white-24);
  color: #fff;
}

/* --- The service list ----------------------------------------------------- */

.invoice-person__name-field {
  margin-bottom: var(--space-4);
}

.invoice-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.invoice-group__summary {
  padding: var(--space-3);
  font-weight: 600;
  color: var(--color-primary-dark);
  cursor: pointer;
}

.invoice-group__list {
  border-top: 1px solid var(--color-border);
}

.invoice-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
}

.invoice-line:first-child {
  border-top: 0;
}

.invoice-line.is-selected {
  background: var(--tint-green-10);
}

.invoice-line__toggle {
  flex: none;
}

.invoice-line__name {
  flex: 1;
  font-size: var(--font-size-small);
  cursor: pointer;
  margin: 0;
}

/* The catalogue's own exemption, said on the row rather than only in the
   preview: it changes what selecting the row will cost. */
.invoice-line__tag {
  padding: 1px 6px;
  border-radius: 999px;
  background: #fdf4e9;
  color: var(--color-warning-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.invoice-line__qty {
  width: 62px;
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
}

.invoice-line__price {
  min-width: 72px;
  text-align: right;
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
}

/* --- Custom lines --------------------------------------------------------- */

.invoice-custom {
  margin-top: var(--space-4);
}

.invoice-custom__title {
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.invoice-custom__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.invoice-custom__description {
  flex: 1;
}

.invoice-custom__fee {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 110px;
}

/* Which side of VAT a typed price is on (see case_submission_queue/_request_line). */
.invoice-custom__vat {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.submission-request__price .invoice-custom__fee:has(.invoice-custom__vat) {
  width: auto;
}

.invoice-custom__full-rate {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.invoice-custom__remove,
.invoice-preview__remove {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px;
}

.invoice-custom__remove:hover,
.invoice-preview__remove:hover {
  color: var(--color-danger);
}

.invoice-custom__add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--font-size-small);
  color: var(--color-primary-dark);
  cursor: pointer;
}

/* --- The preview ---------------------------------------------------------- */

.invoice-preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  padding: var(--space-4) var(--space-5) 0;
}

.invoice-preview__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.invoice-preview__empty {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* The only part that scrolls. */
.invoice-preview__lines {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.invoice-preview__person {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.invoice-preview__line {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.invoice-preview__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.invoice-preview__name {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.invoice-preview__tag {
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--tint-navy-06);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.invoice-preview__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 2px;
}

/* The three treatments, coloured so a line's story is legible without reading
   it: green for the one charged in full because it is the most expensive, grey
   for one charged in full because it is exempt, navy for a discounted one. */
.invoice-preview__badge {
  font-size: 11px;
  font-weight: 700;
}

.invoice-preview__badge--top {
  color: var(--color-success-dark);
}

.invoice-preview__badge--full {
  color: var(--color-text-muted);
}

.invoice-preview__badge--discounted {
  color: var(--color-primary-dark);
}

.invoice-preview__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.invoice-preview__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--color-text-muted);
}

.invoice-preview__controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.invoice-preview__controls select {
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

/* Under the lines and outside the scroll, so the total is always in view and
   never over anything. */
.invoice-preview__totals {
  flex: none;
  margin-top: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.invoice-total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 3px 0;
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
}

.invoice-total--reduction {
  color: var(--color-text-muted);
}

.invoice-total--split {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.invoice-total--grand {
  margin-top: var(--space-2);
  padding: var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-medium);
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* --- Adviser case submissions --------------------------------------------- */

/* The submission builder is the invoice builder's markup with the pricing taken
   out, so it inherits nearly all of the above. These are the few pieces it has
   that an invoice does not. */

/* Choosing the client, above the builder proper. Its own band because it is
   navigation rather than part of the form — picking a different one reloads the
   modal. */
.submission-chooser {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.submission-chooser__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.submission-chooser .form__label,
.submission-chooser .form__hint {
  margin: 0;
  white-space: nowrap;
}

/* The name of a client the firm has just taken on, typed into the submission.

   Inside the builder's own form rather than in the chooser band above it: it is
   part of what is being sent, and the chooser reloads the modal on every change
   (see case_submissions/_new_client_fields). */
.submission-new-client {
  flex: none;
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.submission-new-client__legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.submission-new-client .form__hint {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.submission-modal__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  color: var(--color-text-muted);
}

/* An item the adviser has asked for and nobody has priced. Said on the row
   itself as well as in the estimate, because the row is where they typed it. */
.invoice-custom__unpriced {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.invoice-preview__badge--pending {
  color: var(--color-warning-dark);
}

.invoice-preview__amount--pending {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* The caveat under the estimate. The whole reason the panel is called an
   estimate rather than a quote, so it is amber and it is not small print. */
.submission-caveat {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: #fdf4e9;
  font-size: var(--font-size-small);
  color: var(--color-warning-dark);
}

.submission-caveat svg {
  flex: none;
  margin-top: 2px;
}

.submission-footer__note {
  margin: 0;
  max-width: 42ch;
}

/* --- The submission record, both sides ------------------------------------ */

.submission-detail {
  gap: var(--space-4);
}

/* What the state means, said in words above the figures. Coloured by state so
   the page reads at a glance. */
.submission-note {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.submission-note--own {
  background: var(--color-surface-sunken);
}

.submission-note__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.submission-summary__person + .submission-summary__person {
  margin-top: var(--space-4);
}

.submission-summary__name {
  font-size: var(--font-size-medium);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-1);
}

/* The lines, on both sides' record screens. Its own small table rather than the
   index table's: this is three columns inside a card, not a listing. */
.submission-summary__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.submission-summary__table th,
.submission-summary__table td {
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  vertical-align: top;
}

.submission-summary__table th:first-child,
.submission-summary__table td:first-child {
  text-align: left;
  width: 100%;
}

.submission-summary__table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.submission-summary__table .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.submission-summary__treatment {
  font-size: 11px;
  color: var(--color-text-muted);
}

.submission-summary__totals {
  margin: var(--space-4) 0 0 auto;
  width: min(320px, 100%);
}

.invoice-preview .submission-summary__totals {
  width: 100%;
  margin: 0;
}

.submission-summary__estimate {
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
}

/* The adviser's decision. Accept is a button and decline is a small form,
   because declining takes a reason and accepting does not. */
.submission-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
}

.submission-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text);
}

.submission-tabs__tab.is-active {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: #fff;
}

.submission-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tint-green-16);
  color: var(--color-primary-dark);
  font-size: 11px;
}

.submission-tabs__tab.is-active .submission-tabs__count {
  background: var(--tint-white-24);
  color: #fff;
}

/* --- Pricing a submission -------------------------------------------------- */

/* The invoice builder's two panels, on a page rather than in a modal: what was
   asked for on the left, what it currently comes to on the right. */
.submission-pricer__body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.submission-pricer__preview {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Under both panels rather than beside one: it acts on the whole form. */
.submission-pricer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.submission-pricer__lead {
  flex: 1 1 320px;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 0;
}

.submission-pricer__meta {
  margin-top: var(--space-4);
  max-width: 480px;
}

/* --- The request, on the left --------------------------------------------- */

.submission-request__person + .submission-request__person {
  margin-top: var(--space-4);
}

.submission-request__name {
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.submission-request__line {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.submission-request__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.submission-request__label {
  font-size: var(--font-size-small);
  color: var(--color-primary-dark);
}

.submission-request__rate {
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Only a custom line has one: everything else is priced by the catalogue. */
.submission-request__price {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.submission-request__price .invoice-custom__fee {
  flex: 0 1 160px;
}

.submission-request__check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.submission-request__pending {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-warning-dark);
}

.submission-meta {
  display: grid;
  gap: var(--space-2);
}

.submission-meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-small);
}

.submission-meta dt {
  color: var(--color-text-muted);
}

.submission-pricer__section + .submission-pricer__section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.submission-pricer__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.submission-pricer__discount {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.submission-pricer__discount .form__select {
  flex: 1 1 140px;
}

.submission-pricer__discount .form__input {
  flex: 1 1 80px;
  min-width: 0;
}

.firm-records__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.firm-records__lead,
.firm-records__empty {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* --- A discount on the whole invoice --------------------------------------- */

/* Under the services rather than in the preview: the preview is replaced on
   every tick, and these are boxes somebody types into. */
.invoice-modal__discount {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.invoice-modal__discount-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.invoice-modal__discount-fields {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.invoice-modal__discount-fields .form__select {
  flex: 1 1 140px;
}

.invoice-modal__discount-fields .form__input {
  flex: 1 1 80px;
  min-width: 0;
}

/* The list price beside what was actually charged, wherever a subscription or a
   tier took something off. Struck through rather than labelled: the pair reads
   as "was / is" at a glance, and there is no room on a line for two headings. */
.invoice-preview__was {
  margin-right: 5px;
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* --- An adviser reading their quote ---------------------------------------- */

/* The figure first. A quote is opened to answer "what does it cost and do I say
   yes"; the breakdown underneath is there for "why that much", afterwards. */
.quote-headline {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.quote-headline__figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-border);
}

.quote-headline__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.quote-headline__amount {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-dark);
}

.quote-headline__vat {
  font-size: 11px;
  color: var(--color-text-muted);
}

.quote-headline__state h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.quote-headline__state p {
  margin-top: 2px;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* A quote waiting on the adviser is the one state worth colouring: it is the
   only one asking them for something. */
.quote-headline--quoted {
  border-color: var(--color-primary-green);
  box-shadow: inset 3px 0 0 var(--color-primary-green);
}

.quote-headline--declined {
  opacity: 0.75;
}

.quote-breakdown {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Lines and totals side by side where there is room. Stacked, a four-row table
   leaves a wide empty gap beside a narrow totals column. */
@media (min-width: 1100px) {
  .quote-breakdown .submission-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: var(--space-5);
    align-items: start;
  }

  .quote-breakdown .submission-summary__totals {
    width: 100%;
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }

  .quote-breakdown .submission-caveat {
    grid-column: 1 / -1;
  }
}

.quote-breakdown__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Accepting is one button; declining is behind a toggle. They are not two equal
   choices on a quote the adviser asked us for. */
.quote-decision {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.quote-decision__accept .button {
  white-space: nowrap;
}

.quote-decision__decline {
  flex: 1 1 320px;
  min-width: 0;
}

.quote-decision__decline summary {
  cursor: pointer;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  list-style: none;
}

.quote-decision__decline summary::-webkit-details-marker {
  display: none;
}

.quote-decision__decline summary::after {
  content: " ›";
}

.quote-decision__decline[open] summary::after {
  content: " ⌄";
}

.quote-decision__decline summary:hover {
  color: var(--color-primary-dark);
}

.quote-decision__decline .submission-decline {
  margin-top: var(--space-3);
}

.quote-decision__decline .button {
  margin-top: var(--space-2);
}

/* The two payment buttons on the case record's invoicing card. Below the pill
   rather than beside it: the pill is read on every case, and the buttons are
   pressed once each in the life of an invoice. */
.invoicing__payment-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}