body.pricing.show {
  --pricing-canvas: #dfe6e6;
  --pricing-line: #878b8d;
  --pricing-ink-muted: #686d70;
  --pricing-row: #9b9c9f;
  --pricing-panel: #ffffff;

  background: var(--pricing-canvas);
  font-size: 16px;

  > .content {
    gap: 12px;
    padding-top: 24px;
  }

  [hidden] {
    display: none !important;
  }

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

  > .content > .alert,
  > .content > .notice {
    padding: 10px 13px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 16px;
  }

  > .content > .alert {
    border-color: #e2aaa5;
    background: #fcedeb;
    color: #7d231d;
  }

  > .content > .notice {
    border-color: #add5bb;
    background: #eaf6ee;
    color: #28633e;
  }

  .pricing-toolbar,
  .pricing-save-state,
  .pricing-quote-header,
  .pricing-quote-header__actions {
    display: flex;
    align-items: center;
  }

  .pricing-toolbar {
    min-height: 32px;
    gap: 16px;

    .back {
      display: inline-flex;
      min-height: 29px;
      align-items: center;
      align-self: center;
      font-size: 16px;
      line-height: 1;

      &::before {
        font-size: 18px;
        line-height: 1;
        padding-right: 6px;
      }
    }
  }

  .pricing-save-state {
    min-height: 29px;
    align-self: center;
    gap: 10px;
    color: #777c7f;
    font-size: 14px;

    > span {
      display: inline-flex;
      min-height: 29px;
      align-items: center;
      column-gap: 3px;
      line-height: 1.2;
      white-space: nowrap;
    }
  }

  .pricing-quote-header {
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;

    h1 {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--color-secondary);
      font-size: 24px;
      font-weight: 400;
      letter-spacing: 0.01em;
      text-transform: none;

      strong {
        font-size: 0.88em;
        text-transform: uppercase;
      }
    }
  }

  .pricing-quote-header__estimate {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;

    small {
      padding: 2px 6px;
      border-radius: 999px;
      background: #f4e4e9;
      color: #8e2642;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }
  }

  .pricing-estimate-revision {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 13px;
    border: 1px solid #cdd6d6;
    border-radius: 8px;
    background: var(--pricing-panel);
    font-size: 16px;

    p {
      margin: 0;
    }

    .pricing-estimate-revision__warning {
      flex-basis: 100%;
      color: #7d231d;

      .fa-triangle-exclamation {
        margin-right: 4px;
      }
    }
  }

  .pricing-quote-header__actions {
    justify-content: flex-end;
    gap: 14px;

    form {
      gap: 0;
    }

    .move-status {
      width: min(250px, 32vw);
      min-height: 36px;
    }
  }

  .pricing-card {
    border: 1px solid #e3e5e5;
    border-radius: 8px;
    background: var(--pricing-panel);
    box-shadow: none;
  }

  .pricing-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    &:focus-visible {
      outline: 3px solid rgba(204, 17, 67, 0.28);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    &.pricing-button--primary {
      background: var(--color-primary);
      box-shadow: 0 2px 5px rgba(30, 30, 30, 0.28);
      color: var(--color-white);

      &:hover:not(:disabled) {
        background: #b50f3b;
      }
    }

    &.pricing-button--secondary {
      border-color: var(--color-primary);
      background: var(--color-white);
      color: var(--color-primary);
    }
  }

  .pricing-save-button {
    min-height: 27px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .pricing-empty-state {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px;
    color: var(--pricing-ink-muted);

    .pricing-empty-state__icon {
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      place-items: center;
      border-radius: 50%;
      background: var(--color-primary5);
      color: var(--color-primary);
    }

    h2 {
      font-size: 20px;
    }

    p {
      margin-top: 3px;
      font-size: 16px;
      line-height: 1.45;
    }
  }

  .pricing-readonly-summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px;

    span,
    strong {
      display: block;
    }

    span {
      color: var(--pricing-ink-muted);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
    }

    strong {
      margin-top: 3px;
    }
  }

  /* The ADDITIONALS block as the letter will print it, for the reviewer who cannot see
     the calculator any more: label over value, waived charges stamped like the PDF. */
  .pricing-ancillary-summary {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
  }

  .pricing-ancillary-summary__item {
    min-width: 0;

    dt {
      color: var(--pricing-ink-muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    dd {
      margin: 2px 0 0;
      font-size: 15px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    &.is-waived dd {
      color: var(--pricing-ink-muted);
    }

    small {
      display: block;
      color: #735e2c;
      font-size: 12px;
      font-style: italic;
      font-weight: 400;
    }
  }

  /* Outranks the card's own span rule above, which would block and uppercase it. */
  .pricing-ancillary-summary .pricing-ancillary-summary__waived {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 800;
    vertical-align: 1px;
  }

  .pricing-ancillary-warning p {
    margin: 0;
  }

  .pricing-workflow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px;

    h2 {
      margin-top: 3px;
      font-size: 20px;
    }

    > div:first-child > p:last-child {
      margin-top: 4px;
      color: var(--pricing-ink-muted);
      font-size: 16px;
      line-height: 1.4;
    }
  }

  .pricing-eyebrow {
    color: var(--pricing-ink-muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .pricing-workflow__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 440px);
    gap: 9px;

    form {
      gap: 0;
    }
  }

  /* Action buttons sit in a row beneath the Reopen/Approve panel rather than
     wrapping alongside it, which left them stranded in a narrow right column. */
  .pricing-workflow__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    form {
      gap: 0;
    }
  }

  .pricing-workflow__note {
    color: #735e2c;
    font-size: 14px;
    line-height: 1.4;
  }

  .pricing-workflow__note--stale {
    font-weight: 700;
  }

  /* Approve is a bare button until a warning needs acknowledging, at which point
     it becomes a form and gets the same framing as Reopen. */
  .pricing-approve {
    display: flex;
    flex-direction: column;
    width: min(100%, 440px);
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid #dbe0e1;
    border-radius: 8px;
    background: #f8f9f9;
  }

  .pricing-reopen {
    width: min(100%, 500px);
    padding: 9px 12px;
    border: 1px solid #dbe0e1;
    border-radius: 8px;
    background: #f8f9f9;

    summary {
      color: var(--color-primary);
      cursor: pointer;
      font-size: 15px;
      font-weight: 800;

      &:focus-visible {
        outline: 3px solid rgba(204, 17, 67, 0.25);
        outline-offset: 2px;
      }
    }

    form {
      margin-top: 12px;
      gap: 12px;
    }
  }

  .pricing-modular {
    /* Match the ancillary amount fields without changing pills elsewhere on the page. */
    --pricing-field-radius: 6px;
    --pricing-divider-gap: 8px;
    position: relative;
    overflow: visible;
  }

  .pricing-form {
    gap: 0;
  }

  .pricing-modular__header {
    position: relative;
    min-height: 72px;
    padding: 0 12px;

    h2 {
      position: absolute;
      right: 12px;
      bottom: 7px;
      left: 12px;
      display: flex;
      min-width: 0;
      align-items: center;
      color: #34383a;
      font-size: 16px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;

      &::after {
        height: 1px;
        flex: 1;
        margin-left: 6px;
        background: var(--pricing-line);
        content: "";
      }
    }
  }

  .pricing-mode-selector {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .pricing-mode-option {
    position: relative;

    input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    label {
      display: grid;
      min-width: 76px;
      min-height: 28px;
      place-items: center;
      padding: 5px 12px;
      border: 1px solid #9b9c9e;
      border-radius: 999px;
      background: #9b9c9e;
      box-shadow: 0 1px 3px rgba(30, 30, 30, 0.25);
      color: var(--color-white);
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;
      transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    }

    input:checked + label {
      border-color: var(--color-primary);
      background: var(--color-primary);
      box-shadow: 0 1px 4px rgba(204, 17, 67, 0.32);
    }

    input:focus-visible + label {
      outline: 3px solid rgba(204, 17, 67, 0.28);
      outline-offset: 2px;
    }

    input:disabled + label {
      opacity: 0.55;
      cursor: not-allowed;
    }
  }

  /* Sits between the mode header and the workspace, where the form supplies no gap, so
     it carries its own spacing and the 12px card gutters the header and workspace use. */
  .pricing-modular__alert {
    margin: 0 12px 7px;
  }

  /* The controls column is held as narrow as its content allows so the matrix gets the
     width: 6px + 211px entry column + 8px + 196px percentages column + 8px + 1px border. Every
     track below is sized from the widest text it has to show. */
  .pricing-modular__workspace {
    display: grid;
    grid-template-columns: calc(414px + var(--pricing-divider-gap) * 2) minmax(0, 1fr);
    align-items: stretch;
    padding: 0 12px 8px;
  }

  /* No bottom padding: the percentages column's divider has to run to the same
     bottom edge as this border. The entry column keeps the 8px instead. */
  .pricing-controls {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(211px, 1fr) 196px;
    gap: var(--pricing-divider-gap);
    padding: 44px var(--pricing-divider-gap) 0 6px;
    border-right: 1px solid #9fa2a4;
  }

  .pricing-controls__primary {
    display: grid;
    align-content: start;
    gap: 13px;
    padding-bottom: 8px;

    /* 106px fits the widest label line, "Color Changes", at 14px/800; the labels
       break onto two lines (see the calculator template) so the track can be this
       narrow. 100px is plenty for the entries: a six-digit quantity with its spinner,
       or the $-prefixed read-out, needs about 75px. */
    .field {
      display: grid;
      grid-template-columns: minmax(106px, 1fr) 100px;
      align-items: center;
      gap: 5px;

      /* nowrap keeps each label to the two lines the template breaks it into: a font
         that renders a line a pixel or two wider must spill into the gap, not fold
         the line and push the label to three. */
      > label,
      .pricing-select-tooltip > label {
        text-align: right;
        white-space: nowrap;
      }
    }

    /* The unlabelled selects and the date span the whole entry column, label track
       and input track together. */
    .pricing-control-select--full,
    .pricing-control-date--full {
      grid-template-columns: minmax(0, 1fr);
    }

    /* The outsource fields only reach the calculator for estimates that carry an
       outsourced cost, so they are boxed as their own section. The border is what lets
       the second field read as plain "Markup": inside this group it cannot be mistaken
       for the global markup on the matrix. */
    .pricing-outsource-fields {
      display: grid;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid #c5c8ca;
      border-radius: 10px;
    }

    /* The box eats 26px of the column in padding and borders, which is more than the
       shared 106px label track plus the 100px control track can give back, so the label
       track shrinks to its content here instead of overflowing the border. */
    .pricing-outsource-fields .field:not(.pricing-control-select--full) {
      grid-template-columns: minmax(0, 1fr) 100px;
    }

    /* Only the outsource method stacks a visible label above a full-width control, and
       the shared right alignment would push that label away from the select it names. */
    .pricing-outsource-fields .pricing-control-select--full > label {
      text-align: left;
    }
  }

  .pricing-copies-input {
    position: relative;
    width: 100%;
    min-width: 0;

    input[readonly] {
      padding-right: 58px;
      background: #f1f2f2;
      color: #5e6265;
      cursor: not-allowed;
      appearance: textfield;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
      }
    }
  }

  .pricing-copies-lock {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #686d70;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);

    &[hidden] {
      display: none;
    }
  }

  .pricing-copy-limit-note {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: #735e2c;
    font-size: 13px;
    line-height: 1.35;
  }

  .pricing-fixed-entry {
    display: grid;
    gap: 13px;

    /* Fixed Price is a read-out of the matrix cell rather than an entry field, so it
       reads like the locked copies input instead of an empty box asking for a number. */
    .input-with-prefix:has(input[readonly]) {
      background: #f1f2f2;
    }

    input[readonly] {
      background: #f1f2f2;
      color: #5e6265;
      cursor: not-allowed;
      appearance: textfield;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
      }
    }
  }

  .field {
    min-width: 0;

    label {
      color: #303436;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
    }

    input[type="text"],
    input[type="number"],
    input[type="date"],
    select {
      width: 100%;
      min-width: 0;
      height: 32px;
      min-height: 32px;
      padding: 4px 8px;
      border: 1px solid #c5c8ca;
      border-radius: var(--pricing-field-radius, 999px);
      background: var(--color-white);
      color: #3f4447;
      font: inherit;
      font-size: 13px;
      line-height: 1;
      transition: border-color 120ms ease, box-shadow 120ms ease;

      &:focus-visible {
        border-color: var(--color-primary);
        outline: 0;
        box-shadow: 0 0 0 3px rgba(204, 17, 67, 0.16);
      }

      &:disabled {
        background: #f1f2f2;
        color: #a2a5a7;
        cursor: not-allowed;
      }

      &::placeholder {
        color: #777b7d;
        opacity: 1;
      }
    }

    select {
      cursor: pointer;
      text-overflow: ellipsis;
    }
  }

  .pricing-control-select .pricing-select-tooltip {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(106px, 1fr) 100px;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .pricing-control-select--full .pricing-select-tooltip {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-date-field {
    position: relative;
    min-width: 0;

    input {
      padding-right: 9px;
      padding-left: 9px;
    }

    > span {
      position: absolute;
      top: 50%;
      right: 28px;
      left: 9px;
      overflow: hidden;
      background: var(--color-white);
      color: #3f4447;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      pointer-events: none;
      text-overflow: ellipsis;
      transform: translateY(-50%);
      white-space: nowrap;

      &.required::after {
        margin-left: 3px;
        color: var(--color-error);
        content: "*";
        font-size: 0.7em;
        vertical-align: super;
      }
    }

    input:valid + span {
      display: none;
    }
  }

  .pricing-select-tooltip__content {
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    z-index: 30;
    width: max-content;
    max-width: 300px;
    padding: 6px 8px;
    border-radius: 5px;
    background: var(--color-secondary);
    box-shadow: 0 4px 12px rgba(30, 30, 30, 0.22);
    color: var(--color-white);
    font-size: 14px;
    line-height: 1.35;
    opacity: 0;
    overflow-wrap: anywhere;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 120ms ease, transform 120ms ease;

    &::after {
      position: absolute;
      top: 100%;
      right: 22px;
      border: 5px solid transparent;
      border-top-color: var(--color-secondary);
      content: "";
    }
  }

  .pricing-select-tooltip:not(.pricing-select-tooltip--dismissed):hover .pricing-select-tooltip__content,
  .pricing-select-tooltip.pricing-select-tooltip--visible .pricing-select-tooltip__content {
    opacity: 1;
    transform: translateY(0);
  }

  /* Keep Calculate directly below Rebate even when Fixed adds more entry fields.
     The column stretches to the full height of the controls, so its divider runs
     past Calculate down to the bottom, level with the border on the matrix side. */
  .pricing-controls__commercial {
    display: grid;
    align-content: start;
    gap: 8px;
    padding-left: 8px;
    border-left: 1px solid #9fa2a4;
  }

  /* Label beside value, one row per percentage, on the same 32px + 13px rhythm as the
     entry fields. 120px keeps the widest label, "Warehousing:" at 14px/800, on one
     line. */
  .pricing-commercial-values {
    display: grid;
    align-content: start;
    gap: 13px;

    > dl {
      display: grid;
      grid-template-columns: minmax(120px, 1fr) 62px;
      align-items: center;
      gap: 5px;
      min-height: 32px;
    }

    dt {
      color: #303436;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
      text-align: right;
      white-space: nowrap;
    }

    dd {
      display: grid;
      height: 32px;
      place-items: center;
      padding: 3px 5px;
      border: 1px solid #c5c8ca;
      border-radius: var(--pricing-field-radius, 999px);
      color: #777b7d;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }
  }

  .input-with-prefix,
  .input-with-suffix {
    display: flex;
    min-width: 0;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #c5c8ca;
    border-radius: var(--pricing-field-radius, 999px);
    background: var(--color-white);

    &:focus-within {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(204, 17, 67, 0.14);
    }

    input[type="number"] {
      min-width: 0;
      flex: 1;
      border: 0;
      border-radius: 0;
      box-shadow: none;

      &:focus-visible {
        box-shadow: none;
      }
    }

    > span {
      display: grid;
      min-width: 28px;
      place-items: center;
      background: #f0f1f1;
      color: #626769;
      font-size: 13px;
      font-weight: 700;
    }
  }

  .input-with-prefix > span {
    border-right: 1px solid #d8dada;
  }

  .input-with-suffix > span {
    order: 2;
    border-left: 1px solid #d8dada;
  }

  .pricing-acknowledgement {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 7px;
    padding: 8px;
    border-radius: 6px;
    background: #fff7df;
    color: #645325;
    font-size: 13px;
    line-height: 1.35;

    input {
      flex: 0 0 auto;
      accent-color: var(--color-primary);
    }
  }

  .pricing-schedule {
    --pricing-method-column-width: 59px;
    --pricing-method-input-width: 55px;
    --pricing-method-suffix-width: 10px;
    /* Column widths of the matrix's frozen pane. The sticky offsets below are
       derived from these, so a width change here is the only edit needed. */
    --pricing-matrix-col-1: calc(var(--pricing-method-column-width) + var(--pricing-divider-gap) - 2px);
    --pricing-matrix-col-2: 64px;
    --pricing-matrix-col-3: 60px;
    --pricing-matrix-col-4: 148px;
    --pricing-matrix-col-5: 12px;
    --pricing-matrix-head-row: 22px;
    --pricing-matrix-marker-row: 12px;
    /* Two header rows; Fixed adds the copy-marker row above them. The global method
       column mirrors this so its inputs land on the first body row. */
    --pricing-matrix-head: calc(var(--pricing-matrix-head-row) * 2);
    /* Height of the marker row above the header band: 0 outside Fixed. The global
       method labels pad by this so they centre within the same two header rows as
       the Indiv. Markup cell, whose row sits below the marker row in the table. */
    --pricing-matrix-marker-offset: 0px;
    --pricing-matrix-pane-edge: linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
    --pricing-matrix-row: var(--color-white);
    --pricing-matrix-stripe: var(--pricing-row);
    min-width: 0;
    /* The global field adds its own 2px inset, matching the controls' 8px gutter. */
    padding: 0 0 8px calc(var(--pricing-divider-gap) - 2px);

    &[data-pricing-mode="fixed"] {
      --pricing-matrix-head: calc(var(--pricing-matrix-head-row) * 2 + var(--pricing-matrix-marker-row));
      --pricing-matrix-marker-offset: var(--pricing-matrix-marker-row);
    }
  }

  /* One pricing-method radio with its label, rendered as the header of the column it
     governs (global markup and margin on the left, individual markup in the matrix). */
  .pricing-method-option {
    position: relative;
    display: grid;
    width: 100%;
    place-items: center;
    align-content: center;
    gap: 2px;

    input {
      width: 7px;
      height: 7px;
      margin: 0;
      appearance: none;
      border: 1px solid #929698;
      border-radius: 50%;
      background: var(--color-white);
      cursor: pointer;

      &:checked {
        border-color: var(--color-primary);
        background: var(--color-primary);
      }

      &:focus-visible {
        outline: 3px solid rgba(204, 17, 67, 0.28);
        outline-offset: 2px;
      }
    }

    label {
      color: #000;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
    }
  }

  .pricing-schedule__matrix {
    display: grid;
    min-width: 0;
    grid-template-columns: calc(var(--pricing-method-column-width) * 2) minmax(0, 1fr);
  }

  .pricing-global-method-values {
    display: grid;
    grid-template-columns: repeat(2, var(--pricing-method-column-width));
    align-content: start;
  }

  .pricing-method-value {
    display: grid;
    width: var(--pricing-method-column-width);
    grid-template-rows: var(--pricing-matrix-head) auto;
    padding: 0 0 2px;

    .pricing-method-option {
      align-self: stretch;
      padding-top: var(--pricing-matrix-marker-offset);
    }

    .input-with-suffix {
      width: var(--pricing-method-input-width);
      height: 28px;
      margin: 3px auto 0;
      background: #f3f4f4;
    }

    input[type="number"] {
      height: 26px;
      min-height: 26px;
      padding: 3px 0 3px 2px;
      background: transparent;
      color: #777b7d;
      appearance: textfield;
      font: inherit;
      font-size: 11px;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
      }

      &:read-only {
        cursor: default;
      }

      &::placeholder {
        color: #8b8f91;
        opacity: 1;
      }

      &:placeholder-shown + span {
        display: none;
      }
    }

    .input-with-suffix > span {
      min-width: var(--pricing-method-suffix-width);
      flex: 0 0 var(--pricing-method-suffix-width);
      background: transparent;
      font-size: 11px;
    }

    &.is-active .input-with-suffix {
      background: var(--color-white);
    }
  }

  .pricing-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1.4;

    &.pricing-alert--warning {
      border-color: #ead08a;
      background: #fff8e5;
      color: #67531e;
    }

    &.pricing-alert--error {
      margin-bottom: 7px;
      border-color: #e8bbb7;
      background: #fceceb;
      color: #792820;
    }

    strong {
      display: block;
      margin-bottom: 2px;
    }
  }

  .pricing-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;

    /* Keep a draggable track visible even on systems with overlay scrollbars. */
    &::-webkit-scrollbar {
      height: 12px;
    }

    &::-webkit-scrollbar-track {
      background: #eee;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb {
      border: 2px solid #eee;
      border-radius: 6px;
      background: #888;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #666;
    }

    &:focus-visible {
      border-radius: 3px;
      outline: 3px solid rgba(204, 17, 67, 0.22);
      outline-offset: 2px;
    }
  }

  .pricing-schedule__matrix > .pricing-table-scroll {
    min-width: 0;
  }

  .pricing-matrix {
    width: max-content;
    min-width: 0;
    /* Separate borders: collapsed ones are painted by the table, so they would stay
       put (and show scrolled content through) while the sticky pane cells move. */
    border-collapse: separate;
    border-spacing: 0;
    color: #313638;
    font-size: 13px;
    font-variant-numeric: tabular-nums;

    th,
    td {
      height: 34px;
      padding: 3px 5px;
      border-right: 1px solid rgba(255, 255, 255, 0.8);
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
    }

    thead th {
      height: var(--pricing-matrix-head-row);
      padding-top: 1px;
      padding-bottom: 1px;
      background: #6a6f73;
      color: var(--color-white);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.05;
      text-transform: uppercase;
    }

    tbody tr:nth-child(even) {
      background: var(--pricing-matrix-stripe);
    }

    tbody th {
      font-weight: 700;
    }

    tbody output {
      font-size: 13px;
      white-space: nowrap;
    }

    tbody tr > :nth-child(1),
    .pricing-matrix__selector-row > :nth-child(1) {
      width: var(--pricing-matrix-col-1);
      min-width: var(--pricing-matrix-col-1);
      max-width: var(--pricing-matrix-col-1);
    }

    tbody tr > :nth-child(2),
    .pricing-matrix__selector-row > :nth-child(2) {
      width: var(--pricing-matrix-col-2);
      min-width: var(--pricing-matrix-col-2);
      max-width: var(--pricing-matrix-col-2);
    }

    tbody tr > :nth-child(3),
    .pricing-matrix__selector-row > :nth-child(3) {
      width: var(--pricing-matrix-col-3);
      min-width: var(--pricing-matrix-col-3);
      max-width: var(--pricing-matrix-col-3);
    }

    tbody tr > :nth-child(4),
    .pricing-matrix__selector-row > :nth-child(4) {
      width: var(--pricing-matrix-col-4);
      min-width: var(--pricing-matrix-col-4);
      max-width: var(--pricing-matrix-col-4);
    }

    tbody tr > :nth-child(5),
    .pricing-matrix__selector-row > :nth-child(5) {
      width: var(--pricing-matrix-col-5);
      min-width: var(--pricing-matrix-col-5);
      max-width: var(--pricing-matrix-col-5);
      padding-right: 1px;
      padding-left: 1px;
    }

    tbody tr > :nth-child(n + 6),
    .pricing-matrix__copy-headings > th,
    .pricing-copy-markers > td {
      width: 80px;
      min-width: 80px;
      max-width: 80px;
    }

    /* Frozen pane: the per-row controls and the quantity keep their place while the
       copy columns scroll beneath them, spreadsheet style. Sticky cells need an
       opaque background or the scrolled columns show through. */
    tbody tr {
      background: var(--pricing-matrix-row);
    }

    tbody tr > :nth-child(-n + 5):not(.pricing-matrix__empty),
    .pricing-matrix__selector-row > :nth-child(-n + 5),
    .pricing-matrix__marker-gutter {
      position: sticky;
      z-index: 2;
      /* The translucent cell borders are flattened to the same shade over the
         background, since a see-through border would show scrolled columns. */
      border-right-color: color-mix(in srgb, var(--color-white) 80%, var(--pricing-matrix-row));
      background: var(--pricing-matrix-row);
    }

    tbody tr:nth-child(even) > :nth-child(-n + 5) {
      border-right-color: color-mix(in srgb, var(--color-white) 80%, var(--pricing-matrix-stripe));
      background: var(--pricing-matrix-stripe);
    }

    tbody tr > :nth-child(1),
    .pricing-matrix__selector-row > :nth-child(1),
    .pricing-matrix__marker-gutter {
      left: 0;
    }

    tbody tr > :nth-child(2),
    .pricing-matrix__selector-row > :nth-child(2) {
      left: var(--pricing-matrix-col-1);
    }

    tbody tr > :nth-child(3),
    .pricing-matrix__selector-row > :nth-child(3) {
      left: calc(var(--pricing-matrix-col-1) + var(--pricing-matrix-col-2));
    }

    tbody tr > :nth-child(4),
    .pricing-matrix__selector-row > :nth-child(4) {
      left: calc(var(--pricing-matrix-col-1) + var(--pricing-matrix-col-2) + var(--pricing-matrix-col-3));
    }

    tbody tr > :nth-child(5),
    .pricing-matrix__selector-row > :nth-child(5) {
      left: calc(
        var(--pricing-matrix-col-1) + var(--pricing-matrix-col-2) + var(--pricing-matrix-col-3) +
          var(--pricing-matrix-col-4)
      );
    }

    .pricing-matrix__selector-row > :nth-child(-n + 5) {
      border-right-color: color-mix(in srgb, var(--color-white) 80%, #6a6f73);
      background: #6a6f73;
    }
  }

  /* The pane's right edge only casts a shadow once something has scrolled under it.
     Fixed shows the row-selector column, so the edge moves out one column there. A
     pseudo-element carries the shadow so it paints over the scrolled cells whatever
     the table's own paint order. */
  .pricing-table-scroll.is-scrolled .pricing-matrix {
    tbody tr > :nth-child(4)::after,
    .pricing-matrix__selector-row > :nth-child(4)::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 6px;
      background: var(--pricing-matrix-pane-edge);
      pointer-events: none;
      transform: translateX(100%);
    }
  }

  .pricing-schedule[data-pricing-mode="fixed"] .pricing-table-scroll.is-scrolled .pricing-matrix {
    tbody tr > :nth-child(4)::after,
    .pricing-matrix__selector-row > :nth-child(4)::after {
      content: none;
    }

    .pricing-matrix__row-selector::after,
    .pricing-matrix__marker-gutter::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 6px;
      background: var(--pricing-matrix-pane-edge);
      pointer-events: none;
      transform: translateX(100%);
    }
  }

  .pricing-matrix__copies-label {
    min-width: 80px;
    text-align: left !important;

    span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .pricing-matrix__copy-headings th {
    position: relative;
    height: var(--pricing-matrix-head-row);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* The copy-marker row sits above the header band inside the table, so each dot is
     a cell of the copy column it marks and follows it through scrolling and hiding. */
  .pricing-matrix .pricing-copy-markers {
    > th,
    > td {
      height: var(--pricing-matrix-marker-row);
      padding: 0;
      border-right-color: transparent;
      background: var(--color-white);
    }
  }

  .pricing-copy-marker {
    &::before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      margin: 0 auto;
      border: 1px solid #9a9da0;
      border-radius: 50%;
      background: var(--color-white);
    }

    &.is-selected::before {
      border-color: var(--color-primary);
      background: var(--color-primary);
    }
  }

  /* The approved design keeps the individual-markup and quantity-selector
     columns as white gutters, so the row stripe reads as two separate bands
     instead of running behind those controls. Without this the alternating grey
     fills the sliver behind the quantity radios and the dots lose contrast. */
  .pricing-matrix__individual-markup-header,
  .pricing-matrix__individual-markup,
  .pricing-matrix__row-selector {
    border-right-color: var(--color-white) !important;
    background: var(--color-white) !important;
  }

  .pricing-matrix .pricing-matrix__individual-markup {
    /* Keep the field's left inset while opening an 8px gutter before Margin. */
    padding-inline: 2px calc(var(--pricing-divider-gap) - 1px);
    /* Match the global ovals' 3px top inset even when a quantity/profile badge
       makes the table row taller than the input. */
    vertical-align: top;
  }

  .pricing-matrix .pricing-matrix__individual-markup-header {
    padding: 0 calc(var(--pricing-divider-gap) - 2px) 0 0 !important;
    white-space: normal;

    .pricing-method-option {
      height: 100%;
    }
  }

  .pricing-matrix__row-selector {
    input {
      display: block;
      width: 7px;
      height: 7px;
      margin: auto;
      appearance: none;
      border: 1px solid #929698;
      border-radius: 50%;
      background: var(--color-white);
      cursor: pointer;

      &:checked {
        border-color: var(--color-primary);
        background: var(--color-primary);
      }

      &:focus-visible {
        outline: 3px solid rgba(204, 17, 67, 0.3);
        outline-offset: 2px;
      }
    }

    label {
      display: none;
    }
  }

  .pricing-matrix__quantity-content {
    display: grid;
    /* Equal side tracks keep the quantity centered in the field, independent of
       the badge's text width. The right track fits even the unknown-profile ???. */
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 4px;
  }

  .pricing-matrix__quantity-value {
    grid-column: 2;
    text-align: center;
    white-space: nowrap;
  }

  .pricing-matrix__profile-badge {
    grid-column: 3;
    justify-self: end;
    margin: 0;
    padding: 1px 3px;
    border: 1px solid #c5c8ca;
    border-radius: 999px;
    background: #f0f1f1;
    color: #5f6467;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
  }

  .table-percentage-input {
    display: flex;
    width: var(--pricing-method-input-width);
    height: 28px;
    align-items: center;
    margin: auto;
    overflow: hidden;
    border: 1px solid #c5c8ca;
    border-radius: var(--pricing-field-radius, 999px);
    background: var(--color-white);

    &:focus-within {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(204, 17, 67, 0.18);
    }

    input {
      flex: 1;
      min-width: 0;
      height: 26px;
      padding: 2px 0 2px 2px;
      border: 0;
      background: transparent;
      appearance: textfield;
      font: inherit;
      font-size: 11px;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
      }

      &:focus-visible {
        outline: 0;
      }
    }

    span {
      display: grid;
      flex: 0 0 var(--pricing-method-suffix-width);
      place-items: center;
      color: #676c6e;
      font-size: 11px;
    }
  }

  .table-percentage-output {
    display: grid;
    width: var(--pricing-method-input-width);
    height: 28px;
    margin: auto;
    place-items: center;
    border: 1px solid #d5d7d8;
    border-radius: var(--pricing-field-radius, 999px);
    background: #f3f4f4;
    /* The small output text needs the darker grey to clear the 4.5:1 contrast minimum. */
    color: #676c6e;
    font-size: 12px !important;
  }

  .pricing-matrix__price {
    padding: 0 !important;
  }

  .pricing-fixed-cell {
    width: 100%;
    height: 34px;
    padding: 3px 5px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: default;
    font: inherit;
    font-variant-numeric: tabular-nums;

    &:focus-visible {
      position: relative;
      z-index: 2;
      outline: 3px solid rgba(204, 17, 67, 0.32);
      outline-offset: -2px;
    }
  }

  .pricing-schedule[data-pricing-mode="fixed"] {
    /* Close the price grid beside Fixed's white quantity-selection gutter. */
    .pricing-matrix tbody tr > :nth-child(6),
    .pricing-matrix__copies-label,
    .pricing-matrix__copy-headings > th:first-child {
      border-left: 1px solid #000;
    }

    .pricing-fixed-cell {
      color: inherit;
      cursor: pointer;

      &:hover {
        background: #d4d5d5;
        color: #4b5052;
      }
    }

    /* The selected cell is the quote the operator reads off the sheet, so it gets
       a solid yellow fill with bold black digits (~19:1 contrast). The hover fill above is
       deliberately out-specified here so the highlight survives the pointer. */
    .pricing-matrix__price.is-selected,
    .pricing-matrix__price.is-selected .pricing-fixed-cell,
    .pricing-matrix__price.is-selected .pricing-fixed-cell:hover {
      background: #ffff00;
      color: var(--color-black);
      font-weight: 700;
    }
  }

  .pricing-matrix__empty {
    min-width: min(620px, 80vw);
    padding: 18px !important;
    color: #686d70;
    text-align: left !important;
    white-space: normal !important;
  }

  /* All pricing modes share the RFQ pricing review's stripes, gutter and grid. */
  .pricing-schedule {
    --pricing-matrix-stripe: #dadbdd;
    --pricing-matrix-col-4: 154px;

    .pricing-matrix tbody {
      color: #000;
    }

    .pricing-matrix {
      /* One edge per cell keeps the grid crisp without doubled borders. */
      tbody tr > :is(td, th):nth-child(n + 2):not(.pricing-matrix__row-selector):not(.pricing-matrix__empty),
      .pricing-matrix__selector-row > th:nth-child(n + 2):not(.pricing-matrix__row-selector),
      .pricing-matrix__copy-headings > th {
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
      }

      .pricing-matrix__selector-row > th:nth-child(n + 2):not(.pricing-matrix__row-selector) {
        border-top: 1px solid #000;

        &.pricing-matrix__copies-label {
          border-bottom: 0;
        }
      }

      .pricing-matrix__copy-headings > th:has(~ th:not([hidden])) {
        border-right-color: #fff;
      }

      tbody tr > :nth-child(2),
      .pricing-matrix__selector-row > :nth-child(2) {
        border-left: 1px solid #000;
      }

      /* A white gutter separates Value Added from Quantities. The inset line
         gives Quantities its own left grid edge while the sticky cells scroll. */
      .pricing-matrix__quantity,
      .pricing-matrix__selector-row > :nth-child(4) {
        border-left: 6px solid #fff;
        box-shadow: inset 1px 0 #000;
        padding-left: 6px;

        /* Cover the joins where horizontal black borders meet the white border,
           so the separator stays uninterrupted between rows and at the header. */
        &::before {
          content: "";
          position: absolute;
          top: -1px;
          bottom: -1px;
          left: -6px;
          width: 6px;
          background: #fff;
          pointer-events: none;
        }
      }
    }

  }

  /* The ancillary charges row under the matrix (PNG mock-up, red box): the four charges
     on one line, each "Label: [$ amount] WAIVED", then the overs/unders line. No box of
     its own -- the mock-up sets it flush under the matrix; its red frame is the reviewer's
     annotation, not chrome. Wraps to two, then one, charges per line on narrow screens. */
  .pricing-ancillary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 8px;
    padding: 4px 2px 0;

    label {
      color: #303436;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.15;
      white-space: nowrap;
    }

    /* Compact 26px fields, as in the mock-up; the .field sizing rules are scoped elsewhere. */
    input[type="number"] {
      width: 100%;
      min-width: 0;
      height: 26px;
      min-height: 26px;
      padding: 3px 6px 3px 1px;
      border: 0;
      background: transparent;
      color: #3f4447;
      font: inherit;
      font-size: 12px;
      line-height: 1;
      appearance: textfield;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
      }

      &::placeholder {
        color: #777b7d;
        opacity: 1;
      }
    }

    /* The "$" sits inside the field, not in its own cell: "$250.00" reads as one figure. */
    .input-with-prefix,
    .input-with-suffix {
      min-width: 0;
      height: 26px;
      border-radius: 6px;

      > span {
        display: grid;
        min-width: 0;
        place-items: center;
        border: 0;
        background: transparent;
        color: #5e6265;
        font-size: 12px;
        font-weight: 600;
      }
    }

    .input-with-prefix {
      width: 72px;

      > span {
        padding-left: 6px;
      }
    }
  }

  .pricing-ancillary__footer {
    flex: 1 0 100%;
  }

  /* Shared charge columns keep each sundry's field aligned with the per-copy field
     above it. The section heading uses the same rule and gutters as Profiles. */
  .pricing-ancillary--grouped {
    --charge-columns: 1;
    container-type: inline-size;
    display: block;
    margin-top: 8px;
    padding: 0 12px 8px;

    .pricing-ancillary__row,
    .pricing-ancillary__footer {
      display: grid;
      grid-template-columns: 80px minmax(0, 1fr);
      align-items: start;
      column-gap: 16px;
      margin-left: 36px;
      padding: 5px 0;
      border-top: 1px solid transparent;
    }

    .pricing-ancillary__row + .pricing-ancillary__row,
    .pricing-ancillary__footer {
      border-top: 1px solid var(--pricing-line);
    }

    .pricing-ancillary__group {
      margin: 0;
      color: #303436;
      font-size: 14px;
      font-weight: 800;
      line-height: 26px;
    }

    .pricing-ancillary__charges {
      display: grid;
      grid-template-columns: repeat(var(--charge-columns), minmax(0, 1fr));
      gap: 6px 16px;
      align-items: start;
      min-width: 0;
    }

    .pricing-ancillary__dies {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .pricing-ancillary__charge {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 72px 66px;

      > label { text-align: right; }
    }

    .pricing-ancillary__miscellaneous {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: max-content minmax(100px, 1fr) 56px 72px max-content 90px;
      align-items: center;
      gap: 6px;
      min-width: 0;

      > input {
        width: 100%;
        min-width: 0;
        height: 26px;
        padding: 3px 6px;
        border: 1px solid #c5c8ca;
        border-radius: 6px;
        font-size: 12px;
      }

      > input[type="number"] { text-align: center; }
      > .input-with-prefix { width: 100%; }
    }

    .pricing-ancillary__miscellaneous-equals {
      font-size: 18px;
      font-weight: 700;
    }

    .pricing-ancillary__extras {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 32px;
      min-width: 0;
    }

    .pricing-ancillary__freight {
      display: flex;
      width: max-content;
      align-items: center;
      gap: 5px;
      font-size: 14px;

      > span {
        min-height: 26px;
        min-width: 160px;
        padding: 4px 6px;
        border: 1px solid #c5c8ca;
        border-radius: 6px;
        color: #5e6265;
        font-size: 12px;
      }
    }

    .pricing-ancillary__overs {
      display: flex;
      flex: 0 1 auto;
      flex-wrap: wrap;
      min-width: 0;
      gap: 6px;

      > label { text-align: right; }
      > .input-with-suffix { margin-right: 16px; }

      .input-with-suffix {
        position: relative;
        overflow: visible;

        > span {
          position: absolute;
          left: calc(100% + 3px);
          height: 100%;
          padding: 0;
        }
      }
    }

    .pricing-ancillary__overs-rest {
      display: contents;

      > .input-with-suffix { margin-right: 16px; }
      > .pricing-ancillary__surcharge { margin-left: 0; }
    }

    .pricing-ancillary__notice {
      margin: 5px 0 0 36px;
    }
  }

  @container (min-width: 768px) {
    .pricing-ancillary__row, .pricing-ancillary__footer { --charge-columns: 2; }
  }

  @container (min-width: 1340px) {
    .pricing-ancillary__row, .pricing-ancillary__footer { --charge-columns: 4; }

    .pricing-ancillary--grouped {
      .pricing-ancillary__miscellaneous { grid-column: span 2; }

      .pricing-ancillary__extras {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .pricing-ancillary__freight {
        display: grid;
        width: auto;
        grid-template-columns: minmax(0, 1fr) 144px;
        gap: 6px;

        > strong { text-align: right; }
      }

      .pricing-ancillary__overs {
        display: grid;
        grid-column: 2 / -1;
        /* The remaining three tracks start at Copy Change / Art. */
        grid-template-columns: calc((100% - 32px) / 3 - 150px) 52px minmax(0, 1fr);

        > .input-with-suffix { margin-right: 0; }
      }

      .pricing-ancillary__overs-rest {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        padding-left: 16px;
      }
    }
  }

  .pricing-ancillary__overs-rest {
    display: contents;
  }

  /* One charge: label, money field and pill on a single line. */
  .pricing-ancillary__charge {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;

    input[readonly] {
      background: transparent;
      color: #5e6265;
      cursor: default;
    }
  }

  /* The Radius factors behind the default ("5 × $95.00 · Radius: Charge None") are a
     tooltip on the field (title attribute) and stay in the DOM for assistive tech; the
     mock-up shows no helper text under the fields. */
  .pricing-ancillary__hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* The WAIVED pill: the mode-selector pill as a toggle button, filled while pressed. */
  .pricing-ancillary__waive {
    display: grid;
    min-width: 56px;
    min-height: 24px;
    place-items: center;
    padding: 4px 8px;
    border: 1px solid #9b9c9e;
    border-radius: 999px;
    background: #9b9c9e;
    box-shadow: 0 1px 3px rgba(30, 30, 30, 0.25);
    color: var(--color-white);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;

    &[aria-pressed="true"] {
      border-color: var(--color-primary);
      background: var(--color-primary);
      box-shadow: 0 1px 4px rgba(204, 17, 67, 0.32);
    }

    &:focus-visible {
      outline: 3px solid rgba(204, 17, 67, 0.28);
      outline-offset: 2px;
    }
  }

  /* "Overs: [05] % / Unders [00] %  A 10% surcharge will be applied." on its own line. */
  .pricing-ancillary__overs {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;

    .input-with-suffix {
      width: 52px;

      > span {
        padding-right: 5px;
      }
    }

    input[type="number"] {
      padding-left: 5px;
      text-align: center;
    }

    input[readonly] {
      background: transparent;
      color: #5e6265;
      cursor: default;
    }
  }

  /* Same voice as the copies note: an advisory sentence, not an alert. */
  .pricing-ancillary__surcharge {
    margin: 0 0 0 6px;
    color: #735e2c;
    font-size: 12px;
    font-style: italic;
    line-height: 1.35;
  }

  .pricing-ancillary .pricing-ancillary__markup {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    font-weight: normal;

    input[type="number"] {
      flex: 0 0 32px;
      width: 32px;
      border: 1px solid #b8bdc0;
      border-radius: 3px;
      background: #fff;
      height: 26px;
      padding: 2px 3px;
      text-align: center;
      font: inherit;
    }
  }

  .pricing-ancillary__notice {
    flex: 1 0 100%;
    margin: 0;
    color: #c8102e;
    font-size: 12px;
    line-height: 1.35;

    p {
      margin: 0;
    }

    p + p {
      margin-top: 2px;
    }
  }

  .pricing-calculate-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 6px;

    .pricing-button {
      min-width: 130px;

      &:disabled {
        border-color: #aeb2b4;
        background: #aeb2b4;
        box-shadow: none;
        color: #f5f6f6;
        cursor: not-allowed;
        opacity: 1;
        transform: none;
      }
    }
  }

  .radius-connection {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;

    > span {
      width: 5px;
      height: 5px;
      margin-right: 4px;
      border-radius: 50%;
    }

    &.radius-connection--connected {
      background: #e5f4ea;
      color: #27673f;

      > span {
        background: var(--color-success);
      }
    }

  }

  .pricing-profiles {
    padding: 0 12px 12px;
  }

  .pricing-profiles > h3,
  .pricing-ancillary__heading {
    display: flex;
    align-items: center;
    color: #34383a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;

    &::after {
      height: 1px;
      flex: 1;
      margin-left: 7px;
      background: var(--pricing-line);
      content: "";
    }
  }

  .pricing-profile-summary {
    display: grid;
    grid-template-columns: 0.9fr 2.1fr 1.8fr 1.2fr 1fr 1.1fr 1fr 1.15fr;
    gap: 10px;
    padding: 8px 14px 7px;

    > dl {
      min-width: 0;
    }

    dt {
      overflow: hidden;
      color: #303436;
      font-size: 13px;
      font-weight: 800;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    dd {
      overflow: hidden;
      margin-top: 4px;
      color: #3e4345;
      font-size: 13px;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .radius-profiles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0;
    list-style: none;

    > li {
      min-width: 0;
    }
  }

  .pricing-profile {
    border: 1px solid #7d8082;

    > summary {
      display: flex;
      min-height: 26px;
      align-items: center;
      padding: 3px 7px;
      background: #adadaf;
      /* The mid grey summary bar needs this darker label to clear 4.5:1 contrast. */
      color: #34383a;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      &::before {
        margin-right: 4px;
        content: "›";
        font-size: 18px;
        line-height: 0.7;
        transform-origin: center;
        transition: transform 120ms ease;
      }

      &:focus-visible {
        position: relative;
        z-index: 2;
        outline: 3px solid rgba(204, 17, 67, 0.28);
        outline-offset: 1px;
      }
    }

    &[open] > summary::before {
      transform: rotate(90deg);
    }
  }

  .pricing-profile__body {
    padding: 6px 8px 8px;
    background: var(--color-white);
  }

  /* The quantity layer sits directly under the profile bar as a stack of
     indented, lighter summary bars; the white body padding only returns inside
     an opened quantity. */
  .pricing-profile__body--quantities {
    padding: 0;
    background: #d9d9db;
  }

  .pricing-profile__quantities {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
      min-width: 0;
    }
  }

  .pricing-profile__quantity {
    > summary {
      display: flex;
      min-height: 22px;
      align-items: baseline;
      gap: 8px;
      padding: 2px 7px 2px 22px;
      background: #c9c9cb;
      color: #34383a;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      &::before {
        margin-right: 4px;
        content: "›";
        font-size: 16px;
        line-height: 0.7;
        transform-origin: center;
        transition: transform 120ms ease;
      }

      &:focus-visible {
        position: relative;
        z-index: 2;
        outline: 3px solid rgba(204, 17, 67, 0.28);
        outline-offset: 1px;
      }
    }

    &[open] > summary::before {
      transform: rotate(90deg);
    }
  }

  .pricing-profile__quantity-body {
    padding: 6px 8px 8px;
    background: var(--color-white);
  }

  .pricing-profile__section + .pricing-profile__section {
    margin-top: 7px;
  }

  .pricing-profile__section {
    > h4 {
      padding: 3px 7px;
      background: #777a7c;
      color: var(--color-white);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.15;
      text-transform: uppercase;
    }

    > p {
      padding: 7px;
      color: #6d7274;
      font-size: 13px;
    }

    .pricing-table-scroll {
      margin: 0;
    }
  }

  .pricing-table,
  .pricing-profile__table,
  .pricing-profile__materials {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;

    th,
    td {
      height: 26px;
      padding: 3px 7px;
      border-bottom: 1px solid #d6d8d9;
      text-align: left;
      vertical-align: middle;
    }

    thead th {
      background: #a7a7a7;
      color: #33383a;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      white-space: nowrap;
    }

    tbody tr:nth-child(even) {
      background: #f1f1f1;
    }

    tfoot {
      border-top: 2px solid #777a7c;
      background: #f4f4f4;
      font-weight: 800;

      th,
      td {
        border-bottom: 3px double #777a7c;
      }
    }

    tbody th {
      white-space: nowrap;
    }

    td strong,
    td small {
      display: block;
    }

    td strong {
      font-size: 13px;
    }

    td small {
      margin-top: 1px;
      color: #707577;
      font-size: 12px;
      white-space: nowrap;
    }
  }

  .pricing-profile__table {
    width: 100%;
    min-width: 820px;
    table-layout: fixed;
    font-size: 12px;

    th,
    td {
      height: 21px;
      overflow: hidden;
      padding: 2px 6px;
      border-bottom: 0;
      background: var(--color-white);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    thead th {
      background: #a7a7a7;
      font-size: 11px;
      font-weight: 500;
      text-transform: none;
    }

    /* Spacer cells only hold a grid stop open, so they never show a value. */
    thead td.is-spacer {
      background: #a7a7a7;
    }

    tbody tr:nth-child(even) {
      background: transparent;
    }

    tbody th {
      font-weight: 400;
    }

    .is-numeric {
      text-align: right;
    }

    tfoot {
      border-top: 0;
      background: transparent;

      th,
      td {
        border-bottom: 0;
        background: var(--color-white);
      }

      th {
        position: relative;
        z-index: 1;
        overflow: visible;
        white-space: nowrap;
      }

      /* Radius rules each total value on its own, so the lines are inset by the
         cell padding and neighbouring columns keep a small gap. */
      td.has-value {
        position: relative;
      }

      td.has-value::before,
      td.has-value::after {
        position: absolute;
        right: 6px;
        left: 6px;
        content: "";
      }

      td.has-value::before {
        top: 0;
        border-top: 1px solid #777a7c;
      }

      td.has-value::after {
        bottom: 0;
        border-bottom: 3px double #777a7c;
      }
    }
  }

  /* Shared twelve-column customer grid taken from the Radius costing screen.
     Every section right-aligns its values on the same stops as LABOR:
     35% (percent), 48% (make-ready / width), 55% (run / feet), 62% (total qty),
     71% (unit price), 80% (weighted), 91% (cost), and 100% (cost per M). */
  .pricing-profile__table--labor {
    :is(th, td):nth-child(1) { width: 12%; }
    :is(th, td):nth-child(2) { width: 8%; }
    :is(th, td):nth-child(3) { width: 8%; }
    :is(th, td):nth-child(4) { width: 7%; }
    :is(th, td):nth-child(5) { width: 6%; }
    :is(th, td):nth-child(6) { width: 7%; }
    :is(th, td):nth-child(7) { width: 7%; }
    :is(th, td):nth-child(8) { width: 7%; }
    :is(th, td):nth-child(9) { width: 9%; }
    :is(th, td):nth-child(10) { width: 9%; }
    :is(th, td):nth-child(11) { width: 11%; }
    :is(th, td):nth-child(12) { width: 9%; }
  }

  /* Width lands on the make-ready stop (48%), Feet on the run stop (55%) and
     Price/MSI on the shared unit-price stop (71%). Column 6 is the spacer that
     keeps Cost the same width as Total Cost in Labor. */
  .pricing-profile__table--substrates {
    :is(th, td):nth-child(1) { width: 12%; }
    :is(th, td):nth-child(2) { width: 29%; }
    :is(th, td):nth-child(3) { width: 7%; }
    :is(th, td):nth-child(4) { width: 7%; }
    :is(th, td):nth-child(5) { width: 16%; }
    :is(th, td):nth-child(6) { width: 9%; }
    :is(th, td):nth-child(7) { width: 11%; }
    :is(th, td):nth-child(8) { width: 9%; }
  }

  /* Coverage %, Min LBS and LBS share the 48% / 55% / 62% stops with the
     MR Qty, Run Qty and Total Qty columns of Other Materials. */
  .pricing-profile__table--coatings {
    :is(th, td):nth-child(1) { width: 12%; }
    :is(th, td):nth-child(2) { width: 27%; }
    :is(th, td):nth-child(3) { width: 9%; }
    :is(th, td):nth-child(4) { width: 7%; }
    :is(th, td):nth-child(5) { width: 7%; }
    :is(th, td):nth-child(6) { width: 9%; }
    :is(th, td):nth-child(7) { width: 9%; }
    :is(th, td):nth-child(8) { width: 11%; }
    :is(th, td):nth-child(9) { width: 9%; }
  }

  .pricing-profile__table--other-materials {
    :is(th, td):nth-child(1) { width: 12%; }
    :is(th, td):nth-child(2) { width: 29%; }
    :is(th, td):nth-child(3) { width: 7%; }
    :is(th, td):nth-child(4) { width: 7%; }
    :is(th, td):nth-child(5) { width: 7%; }
    :is(th, td):nth-child(6) { width: 9%; }
    :is(th, td):nth-child(7) { width: 9%; }
    :is(th, td):nth-child(8) { width: 11%; }
    :is(th, td):nth-child(9) { width: 9%; }
  }

  /* Quantity lands on the total-quantity stop (62%) so it lines up with
     Total Qty, LBS, Total Time and Feet. */
  .pricing-profile__table--packing,
  .pricing-profile__table--clicks {
    :is(th, td):nth-child(1) { width: 55%; }
    :is(th, td):nth-child(2) { width: 7%; }
    :is(th, td):nth-child(3) { width: 9%; }
    :is(th, td):nth-child(4) { width: 9%; }
    :is(th, td):nth-child(5) { width: 11%; }
    :is(th, td):nth-child(6) { width: 9%; }
  }

  .pricing-profile__references {
    margin-bottom: 8px;

    dl {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 24px;
      margin: 4px 0 0;
    }

    dl > div {
      display: flex;
      gap: 6px;
    }

    dt { font-weight: 700; }
    dd { margin: 0; }
  }

  /* The cost summary block that closes the report page sits on the right, as the
     report prints it: 48% of the body, so its Cost and Cost/M columns (11% and 9%
     of the body) land on the same stops as the section tables above, and the two
     detail columns carry customer percentages and the margin / value-added
     read-outs. */
  .pricing-profile__section--summary {
    width: 48%;
    min-width: 400px;
    margin-top: 7px;
    margin-left: auto;
    padding-top: 4px;
    border-top: 2px solid #777a7c;
  }

  .pricing-profile__table--summary {
    min-width: 0;

    tbody th,
    tbody td {
      white-space: normal;
    }

    .pricing-profile__readouts {
      display: block;
      white-space: normal;

      > span {
        display: inline-block;
        white-space: nowrap;
      }
    }

    .pricing-profile__readouts--markup {
      display: flex;
      flex-wrap: wrap;
      gap: 2px 12px;

      > span + span {
        margin-left: auto;
      }
    }

    col:nth-child(1) { width: 25%; }
    col:nth-child(2) { width: 16.67%; }
    col:nth-child(3) { width: 16.67%; }
    col:nth-child(4) { width: 22.91%; }
    col:nth-child(5) { width: 18.75%; }

    tbody th {
      padding-left: 12px;
    }

    tbody tr.is-total {
      font-weight: 800;

      th,
      td {
        background: #e4e5e6;
      }

      th {
        text-transform: uppercase;
      }
    }

    /* Outwork starts below Gross Sales with a white gap and a shaded
       heading row, indented markup and Extra Sales lines, then the
       outwork-inclusive Gross Sales as an ordinary total row. */
    tbody tr.is-outwork-heading {
      font-weight: 800;

      th,
      td {
        border-top: 10px solid var(--color-white);
        background: #e4e5e6;
      }
    }

    tbody tr.is-outwork-detail th {
      padding-left: 36px;
    }

    tbody tr.is-outwork-subtotal {
      font-weight: 800;

      th {
        font-weight: inherit;
      }
    }
  }

  .pricing-profile__unavailable,
  .pricing-profile__source-note {
    margin: 0;
    padding: 7px;
    color: #656a6c;
    font-size: 13px;
    line-height: 1.35;
  }

  .pricing-profile__unavailable {
    background: #f3f4f4;
    font-style: italic;
  }

  .pricing-profile__source-note {
    border-bottom: 1px solid #d6d8d9;
    background: #fafafa;
  }

  .pricing-table--radius {
    min-width: 850px;
  }

  .commercial-rate-cell {
    min-width: 155px;
  }

  .pricing-profile__materials {
    min-width: 420px;
  }

  .pricing-profiles__empty {
    padding: 8px 14px 2px;
    color: #6f7476;
    font-size: 13px;
  }

  .pricing-rfq-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;

    .legend {
      display: flex;
      align-items: center;
      color: #293033;
      font-weight: 800;
      line-height: 1;
      text-transform: uppercase;

      &::after {
        height: 1px;
        flex: 1;
        margin-left: 8px;
        background: #d9dcdd;
        content: "";
      }
    }
  }

  .pricing-rfq-context > .details-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;

    fieldset {
      display: flex;
      min-inline-size: 0;
      flex-direction: column;
      gap: 20px;
      padding: 16px;
      border: 0;
      border-radius: 7px;
      background: var(--color-white);
      box-shadow: none;
    }

    .category {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 10px;
    }

    .detail-item {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 4px;
      overflow-wrap: anywhere;
      line-height: 1.35;

      em {
        font-style: normal;
        font-weight: 800;
      }
    }

    .rfq-info-card {
      display: flex;
      justify-content: space-between;
      gap: 16px;
    }

    .edit-button {
      align-self: flex-start;
      padding: 5px 24px;
      border: 1px solid var(--color-primary);
      border-radius: 999px;
      color: var(--color-primary);
      text-decoration: none;
      white-space: nowrap;

      &::after {
        padding-left: 6px;
        font-family: "Font Awesome 6 Pro", sans-serif;
        content: "\f303";
      }

      &:hover {
        background: var(--color-primary);
        color: var(--color-white);
      }

      &:focus-visible {
        outline: 3px solid rgba(204, 17, 67, 0.25);
        outline-offset: 2px;
      }
    }

    .file-item {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .file-header,
    .image-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .question-image {
      width: 130px;
      padding: 10px;
      border: 1px solid var(--color-primary);
      border-radius: 6px;
      object-fit: contain;
    }
  }

  .pricing-rfq-context .activity-log {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
    padding: 16px;
    border-radius: 7px;
    background: var(--color-white);

    form {
      gap: 14px;

      .field {
        display: flex;
        flex-direction: column;
        gap: 6px;

        label {
          font-weight: 800;
        }

        textarea {
          min-height: 78px;

          &:focus-visible {
            border-color: var(--color-primary);
            outline: 0;
            box-shadow: 0 0 0 3px rgba(204, 17, 67, 0.14);
          }
        }
      }

      .actions button {
        width: auto;
        min-width: 185px;
        padding: 8px 24px;

        &::after {
          padding-left: 7px;
          font-family: "Font Awesome 6 Pro", sans-serif;
          content: "\f1d8";
        }
      }
    }

    .status-change,
    .comment {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 15px;
      border-top: 1px solid #656a6c;

      > .details {
        display: flex;
        justify-content: space-between;
        gap: 10px;
      }

      .user {
        display: flex;
        flex-direction: column;

        .name {
          font-weight: 800;
        }
      }
    }

    .status {
      display: flex;
      align-items: center;

      .from,
      .to {
        display: flex;
        min-height: 30px;
        flex: 1;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: #dfe4e4;
        text-align: center;
      }

      .fa-solid {
        padding: 8px;
      }
    }

    .notified,
    .notes,
    .attachments {
      display: flex;
      flex-direction: column;
      gap: 7px;

      label {
        font-weight: 800;
      }
    }

    .users {
      color: var(--color-primary);
    }
  }

  .download-button {
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    padding: 6px 9px;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    color: var(--color-primary);
    text-decoration: none;
    text-overflow: ellipsis;

    &::before {
      padding-right: 6px;
      font-family: "Font Awesome 6 Pro", sans-serif;
      content: "\f019";
    }

    &:hover {
      background: var(--color-primary);
      color: var(--color-white);
    }

    &:focus-visible {
      outline: 3px solid rgba(204, 17, 67, 0.25);
      outline-offset: 2px;
    }
  }

  @media (max-width: 1100px) {
    .pricing-modular__workspace {
      grid-template-columns: 1fr;
    }

    .pricing-controls {
      grid-template-columns: minmax(285px, 1fr) minmax(235px, 0.75fr);
      padding-right: 0;
      padding-bottom: 10px;
      border-right: 0;
      border-bottom: 1px solid #9fa2a4;
    }

    .pricing-controls__primary .field,
    .pricing-control-select .pricing-select-tooltip {
      grid-template-columns: minmax(145px, 1fr) minmax(118px, 165px);
    }

    .pricing-controls__primary .pricing-control-select--full,
    .pricing-controls__primary .pricing-control-date--full,
    .pricing-control-select--full .pricing-select-tooltip {
      grid-template-columns: minmax(0, 1fr);
    }

    .pricing-commercial-values > dl {
      grid-template-columns: minmax(115px, 1fr) 72px;
    }

    .pricing-schedule {
      padding-top: 6px;
      padding-bottom: 8px;
      padding-left: 0;
    }

    .pricing-ancillary {
      gap: 6px 14px;
    }

    .pricing-profile-summary {
      grid-template-columns: repeat(4, minmax(0, 1fr));

      > dl:nth-child(n + 5) {
        padding-top: 3px;
      }
    }
  }

  @container (max-width: 767px) {
    .pricing-ancillary--grouped {
      .pricing-ancillary__row,
      .pricing-ancillary__footer {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        margin-left: 12px;
      }

      .pricing-ancillary__miscellaneous {
        grid-template-columns: minmax(56px, 1fr) 72px max-content 90px;

        > label,
        > input[type="text"] { grid-column: 1 / -1; }
      }
    }
  }

  @media (max-width: 760px) {
    > .content {
      gap: 10px;
      padding-block: 18px;
    }

    .pricing-quote-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .pricing-toolbar {
      flex-wrap: wrap;
    }

    .pricing-save-state {
      flex-wrap: wrap;
    }

    .pricing-quote-header__actions {
      width: 100%;
      justify-content: space-between;

      .move-status {
        width: min(250px, 64vw);
      }
    }

    .pricing-modular__header {
      align-items: stretch;
      flex-direction: column;
      gap: 8px;
    }

    .pricing-mode-selector {
      align-self: flex-end;
    }

    .pricing-mode-option label {
      min-width: 72px;
      padding-right: 9px;
      padding-left: 9px;
    }

    .pricing-controls {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .pricing-controls__primary .field,
    .pricing-control-select .pricing-select-tooltip {
      grid-template-columns: minmax(135px, 1fr) minmax(120px, 165px);
    }

    .pricing-controls__primary .pricing-control-select--full,
    .pricing-controls__primary .pricing-control-date--full,
    .pricing-control-select--full .pricing-select-tooltip {
      grid-template-columns: minmax(0, 1fr);
    }

    .pricing-controls__commercial {
      padding-left: 0;
      border-left: 0;
    }

    .pricing-commercial-values {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
      gap: 7px 10px;
      padding-top: 10px;
      border-top: 1px solid #d6d8d9;
    }

    .pricing-profile-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
    }

    .pricing-rfq-context {
      grid-template-columns: 1fr;
    }

    .pricing-rfq-context > .details-list .rfq-info-card {
      flex-direction: column;
    }

    .pricing-rfq-context .activity-log form .actions button {
      width: 100%;
    }

    .pricing-readonly-summary {
      align-items: stretch;
      flex-direction: column;
    }

    .pricing-ancillary--grouped {
      .pricing-ancillary__notice { margin-left: 12px; }
    }

    .pricing-ancillary__charge {
      flex-basis: 100%;
    }

    .pricing-workflow {
      flex-direction: column;
    }

    .pricing-workflow__actions,
    .pricing-workflow__actions .pricing-button,
    .pricing-workflow__actions form {
      width: 100%;
    }

    .pricing-workflow__actions {
      justify-content: stretch;
    }
  }

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