/* Global Horizon — shared pieces for the working modules: orders, tasks,
 * deliveries, policies. Builds on products.css (page, panel, dtable). */

/* ---------------------------------------------------------------- tables */

.dtable--orders { --cols: minmax(0, 0.9fr) minmax(0, 1.2fr) 96px 92px 118px 104px 150px; }
.dtable--tasks  { --cols: minmax(0, 1.8fr) 130px 90px 110px 110px; }
.dtable--notes  { --cols: 90px 130px minmax(0, 1.4fr) minmax(0, 1fr) 110px 120px; }
.dtable--assets { --cols: 72px minmax(0, 1.3fr) 130px minmax(0, 1fr) 106px 180px 100px; }
.dtable--policies { --cols: minmax(0, 1.3fr) 140px minmax(0, 1fr) 130px 74px 170px; }
.late { color: var(--ember-dark); font-weight: 600; }

/* how much of an order has been delivered */
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 14px; }
.bar__fill { display: block; height: 100%; background: var(--navy); border-radius: 4px; }

/* ---------------------------------------------------------------- forms */

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 18px; }
@media (min-width: 700px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form .field--wide { grid-column: 1 / -1; }
.form select.field__input, .form textarea.field__input { width: 100%; font: inherit; }
.form textarea.field__input { min-height: 96px; resize: vertical; line-height: 1.5; }
.form__row { display: flex; gap: 8px; }
.form__row > .field__input:first-child { flex: 1 1 auto; min-width: 0; }
.form__row > select.field__input { flex: 0 0 110px; width: 110px; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.field__hint { font-size: 11.5px; color: var(--ink-400); }

/* ---------------------------------------------------------------- updates timeline */

.compose { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line-faint); }
.compose textarea { width: 100%; min-height: 64px; resize: vertical; font: inherit; line-height: 1.5; }
.compose__actions { display: flex; justify-content: flex-end; }

.timeline { display: flex; flex-direction: column; padding: 4px 18px 10px; }
.timeline__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.timeline__item:last-child { border-bottom: 0; }
.timeline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); margin-top: 7px; flex-shrink: 0; opacity: 0.55; }
.timeline__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.timeline__meta { font-size: 11.5px; color: var(--ink-400); }
.timeline__body { font-size: 13.5px; color: var(--ink); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.timeline__empty { font-size: 13px; color: var(--ink-400); padding: 14px 0; }

/* ---------------------------------------------------------------- checklist */

.checklist { display: flex; flex-direction: column; padding: 4px 18px 10px; }
.checkitem { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.checkitem:last-child { border-bottom: 0; }
.checkitem input { width: 20px; height: 20px; accent-color: var(--navy); flex-shrink: 0; }
.checkitem__name { font-size: 13.5px; color: var(--ink); }
.checkitem.is-done .checkitem__name { color: var(--ink-400); text-decoration: line-through; }
.checkadd { display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--line-faint); }
.checkadd .field__input { flex: 1 1 auto; min-width: 0; }
.checkref { display: block; }
.checkref .field__input { width: 100%; max-width: 260px; min-height: 34px; padding: 6px 10px; font-size: 12.5px; }
.checkitem.is-done .checkref .field__input { color: var(--ink-600); }

/* ---------------------------------------------------------------- hub cards (Deliveries, Operations) */

.hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px) { .hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hubcard {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink);
}
a.hubcard:hover { border-color: var(--navy); color: var(--ink); }
.hubcard__icon { width: 38px; height: 38px; border-radius: 10px; background: #EDF3FA; color: var(--navy); display: flex; align-items: center; justify-content: center; }
.hubcard__count { font-size: 12px; color: var(--ink-400); }
.hubcard__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.hubcard__meta { font-size: 12.5px; color: var(--ink-600); }

/* ---------------------------------------------------------------- long text (policies) */

.prose { font-size: 14px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-display); color: var(--ink); margin: 20px 0 8px; line-height: 1.3; }
.prose h2 { font-size: 18px; } .prose h3 { font-size: 16px; } .prose h4 { font-size: 14.5px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { margin: 3px 0; }
.prose > :first-child { margin-top: 0; }

/* The asset number is what is printed on the sticker, so it reads as a label
   above the name rather than as another field inside the record. */
.pagehead__eyebrow { margin: 0 0 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
                     color: var(--ink-400); text-transform: uppercase; }
.assetphoto { display: block; width: 100%; max-height: 300px; object-fit: contain;
              border-radius: var(--radius-sm); background: #F4F6FA; }

/* Picking which labels go on the sheet. The bar sits above the table and the
   rows become checkboxes, so a tap adds a label instead of opening the asset. */
.picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
          gap: 10px; padding: 10px 14px; margin-bottom: 12px;
          background: var(--surface); border: 1px solid var(--navy); border-radius: var(--radius-sm); }
.picker__count { font-size: 13px; font-weight: 600; color: var(--navy); }
.picker__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.picker__from { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-600); }
.picker__from .field__input { width: 64px; min-height: 36px; padding: 7px 9px; }

.dtable--picking { --cols: 44px 72px minmax(0, 1.3fr) 130px minmax(0, 1fr) 106px 180px 100px; }
.dtable__row--pick { cursor: pointer; }
.dtable__cell--pick { display: flex; align-items: center; }
.dtable__cell--pick input { width: 18px; height: 18px; accent-color: var(--navy); cursor: pointer; }

@media (max-width: 860px) {
  .picker { position: sticky; bottom: 0; z-index: 5; margin-bottom: 0; }
  .picker__actions { width: 100%; }
}

/* A policy's sections. Collapsed they read like the schedule the broker sends;
   opened, each one becomes its own small form. */
.sections { display: block; }
.section { border-bottom: 1px solid var(--line-soft); }
.section:last-child { border-bottom: 0; }
.section__head { display: grid; grid-template-columns: minmax(0, 1.4fr) 130px 110px 96px minmax(0, 1fr) 74px;
                 gap: 12px; align-items: center; padding: 11px 16px; font-size: 12.5px;
                 cursor: pointer; list-style: none; }
.section__head::-webkit-details-marker { display: none; }
.section__head:hover { background: var(--surface-2, #F7F9FC); }
.section__head--cols, .section__head--total { cursor: default; font-size: 11px; font-weight: 600;
                 letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-400);
                 border-bottom: 1px solid var(--line-soft); }
.section__head--total { border-bottom: 0; border-top: 1px solid var(--line); color: var(--navy); }
.section__name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section__kind, .section__excess { color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section__sum, .section__prem { font-variant-numeric: tabular-nums; }
.section__count { font-size: 11.5px; color: var(--ink-400); text-align: right; }
.section__form { padding: 4px 16px 16px; }
.form__actions--tight { margin-top: 4px; }
.form--inline { display: flex; align-items: flex-end; gap: 10px; }
.form--inline .field { flex-grow: 1; margin: 0; }

@media (max-width: 760px) {
  .section__head { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .section__head--cols { display: none; }
  .section__kind { grid-column: 1; font-size: 11.5px; }
  .section__sum::before { content: 'Sum '; color: var(--ink-400); }
  .section__prem::before { content: 'Premium '; color: var(--ink-400); }
  .section__excess::before { content: 'Excess '; color: var(--ink-400); }
  .section__sum, .section__prem, .section__excess { grid-column: 1 / -1; white-space: normal; }
  .section__count { grid-column: 2; grid-row: 1; }
}

/* Alerts. An unread one carries a dot and a heavier title; a read one stays
   legible rather than greying out, because it is still a record of what was
   said. */
.alert { position: relative; }
.alert--unread .attach__title { font-weight: 700; }
.alert--unread::before { content: ''; position: absolute; left: -2px; top: 50%;
                         width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
                         background: var(--ember); }
.alert__when { font-size: 11.5px; color: var(--ink-400); white-space: nowrap; flex-shrink: 0; }

@media (max-width: 560px) {
  .alert__when { display: none; }
}

/* People. The role sits on the row rather than behind an edit screen, because
   changing what someone can reach is the whole job here. */
.person { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
          border-bottom: 1px solid var(--line-soft); }
.person:last-child { border-bottom: 0; }
.person--off { opacity: 0.6; }
.person__avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
                  background: var(--navy); color: #fff; font-size: 13px; font-weight: 600;
                  display: flex; align-items: center; justify-content: center; }
.person__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.person__name { font-size: 14px; font-weight: 600; color: var(--ink);
                display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.person__sub { font-size: 12.5px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; }
.person__reach { font-size: 11.5px; color: var(--ink-400); }
.person__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.person__role { margin: 0; }
.person__role .field__input { min-height: 36px; padding: 7px 10px; font-size: 12.5px; }

@media (max-width: 720px) {
  .person { flex-wrap: wrap; }
  .person__actions { width: 100%; padding-left: 50px; justify-content: flex-start; }
}

/* The shopping list. One line to add, one tap to tick off — anything more
   ceremonious and nobody keeps it up to date. */
.panel--quiet { background: transparent; border-style: dashed; }
.shopadd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shopadd .field { margin: 0; }
.shopadd__name { flex: 3 1 220px; }
.shopadd__qty  { flex: 1 1 110px; }
.shopadd__cat  { flex: 1 1 150px; }
.shopadd__urgent { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
                   color: var(--ink-600); white-space: nowrap; cursor: pointer; }
.shopadd__urgent input { width: 17px; height: 17px; accent-color: var(--ember); cursor: pointer; }

.shoplist { padding: 0; }
.shopitem { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer;
            border-bottom: 1px solid var(--line-soft); }
.shopitem:last-child { border-bottom: 0; }
.shopitem:hover { background: #F7F9FC; }
.shopitem input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--navy);
                                   flex-shrink: 0; cursor: pointer; }
.shopitem__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.shopitem__name { font-size: 14px; color: var(--ink); display: flex; align-items: baseline;
                  gap: 8px; flex-wrap: wrap; }
.shopitem__qty { font-size: 12px; color: var(--ink-600); background: var(--line-soft);
                 padding: 1px 7px; border-radius: 20px; }
.shopitem__meta { font-size: 11.5px; color: var(--ink-400); }
.shopitem__meta:empty { display: none; }
.shopitem__x { color: #B4BCCB; display: flex; padding: 4px; border-radius: 6px; flex-shrink: 0; }
.shopitem__x:hover { color: var(--ember); background: #FDEEEA; }
.shopitem.is-urgent .shopitem__name { font-weight: 600; }
.shopitem.is-urgent .shopitem__meta { color: var(--ember-dark); font-weight: 600; }
.shopitem.is-done { opacity: 0.55; }
.shopitem.is-done .shopitem__name { text-decoration: line-through; }

@media (max-width: 560px) {
  .shopadd__name, .shopadd__qty, .shopadd__cat { flex: 1 1 100%; }
}

/* Contacts as rows. Thirty-odd of them as cards is a page nobody scrolls, so
   each is one line and the standing instructions open on a tap. */
.crow { border-bottom: 1px solid var(--line-soft); }
.crow:last-child { border-bottom: 0; }
.crow--todo .crow__name { color: var(--ink-400); font-style: italic; }
.crow__main { display: grid; width: 100%; text-align: left; background: none; gap: 12px;
              grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr) 22px;
              align-items: center; padding: 11px 16px; min-height: 46px; }
.crow__main:hover { background: #F7F9FC; }
.crow--head { border-bottom: 1px solid var(--line); }
.crow--head .crow__main { padding-top: 9px; padding-bottom: 9px; font-size: 11px; font-weight: 600;
                          letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-400);
                          cursor: default; }
.crow--head .crow__main:hover { background: none; }
.crow__name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.crow__company, .crow__for, .crow__reach { font-size: 12.5px; color: var(--ink-600); }
.crow__name, .crow__company, .crow__for, .crow__reach {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__chev { color: #B4BCCB; display: flex; justify-content: flex-end; }
.crow.is-open { background: #FBFCFE; }
.crow.is-open .crow__main { background: #F2F6FB; }
.crow__open { padding: 4px 16px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.crow__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.crow__address { margin: 0; font-size: 12.5px; color: var(--ink-600); }
.crow__foot { display: flex; align-items: center; justify-content: space-between;
              gap: 10px; font-size: 12px; }
.contact__link { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
                 color: var(--navy); min-height: 28px; }
.contact__link:hover { text-decoration: underline; }
.contact__missing { margin: 0; font-size: 12.5px; color: var(--ink-400); font-style: italic; }
.contact__what { font-size: 12.5px; line-height: 1.55; color: var(--ink-600); white-space: pre-wrap;
                 border-top: 1px solid var(--line-soft); padding-top: 10px; }

@media (max-width: 860px) {
  .crow__main { grid-template-columns: minmax(0, 1fr) 22px; gap: 2px 10px; }
  .crow__company { grid-column: 1; }
  .crow__for, .crow__reach { grid-column: 1; }
  .crow__chev { grid-row: 1; grid-column: 2; }
  .crow--head { display: none; }
}

/* Typing a certificate's results. A grid, because the figures come off the
   supplier's sheet in rows and tabbing across is how they get entered. */
.dtable--coalist { --cols: minmax(0, 1.5fr) 120px minmax(0, 1fr) 106px 140px 150px; }
.resrow { display: grid; gap: 8px; align-items: center; margin-bottom: 8px;
          grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr) 80px minmax(0, 1fr) 30px; }
.resrow .field__input { min-height: 38px; padding: 8px 10px; font-size: 13px; }
.resrow--head { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
                text-transform: uppercase; color: var(--ink-400); }
@media (max-width: 760px) {
  .resrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; }
  .resrow--head { display: none; }
}

/* Starting a certificate from the supplier's PDF. */
.coaread { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.coaread__state { font-size: 12.5px; color: var(--ink-600); flex: 1 1 260px; }

/* Paperwork grouped by supplier on the product page. */
.chips--sub { padding: 0 16px 10px; gap: 6px; }
.chips--sub .chip { font-size: 11.5px; min-height: 28px; padding: 5px 11px; }
.papergroup { border-bottom: 1px solid var(--line); }
.papergroup:last-child { border-bottom: 0; }
.papergroup[hidden] { display: none; }
.papergroup__head { display: flex; justify-content: space-between; align-items: center;
                    padding: 9px 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
                    text-transform: uppercase; color: var(--ink-400); background: #F7F9FC; }
.papergroup__head span { font-variant-numeric: tabular-nums; }

/* Writing a letter, a note or minutes. The text box is the screen: everything
   else is small, because the writing is the work. */
.writing__body { min-height: 440px; font-size: 14px; line-height: 1.6;
                 font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace; }
.writing__preview { min-height: 440px; }
.writing__preview[hidden] { display: none; }

/* A checkbox that sits on its own line in a form grid, label beside the box
   rather than under it. */
.checkfield { display: flex; flex-direction: row; align-items: center; gap: 10px;
              font-size: 13px; color: var(--ink-600); cursor: pointer; }
.checkfield input { width: 18px; height: 18px; accent-color: var(--ember); flex-shrink: 0; cursor: pointer; }

/* Transport requests — the route is the thing being scanned, so it gets the
   room, and the paperwork state rides on the right where the eye lands last. */
.trow { display: grid; align-items: center; gap: 12px; padding: 11px 16px;
        grid-template-columns: 74px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.9fr) 104px auto;
        border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.trow:last-child { border-bottom: 0; }
a.trow:hover { background: #F7F9FC; }
.trow--head { border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600;
              letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-400); }
.trow--head:hover { background: none; }
.trow__no { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.trow__route { display: flex; align-items: center; gap: 6px; min-width: 0; }
.trow__leg { font-size: 13px; font-weight: 600; color: var(--ink);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__arrow { color: #B4BCCB; display: flex; flex-shrink: 0; }
.trow__goods, .trow__who { font-size: 12.5px; color: var(--ink-600);
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__amt { font-size: 12.5px; color: var(--ink-600); text-align: right; white-space: nowrap; }
.trow__pills { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }

.pagehead__route { font-size: 13px; color: var(--ink-600); }

@media (max-width: 760px) {
  .trow { grid-template-columns: 1fr auto; row-gap: 5px; }
  .trow__no { grid-column: 1; }
  .trow__pills { grid-column: 2; grid-row: 1; }
  .trow__route { grid-column: 1 / -1; }
  .trow__goods { grid-column: 1 / -1; }
  .trow__who { grid-column: 1; }
  .trow__amt { grid-column: 2; }
  .trow--head { display: none; }
}

/* The document repository. One line per document: what it is, what it belongs
   to, and a way in. A superseded one stays legible but stops shouting. */
.lrow { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
        border-bottom: 1px solid var(--line-soft); }
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: #F7F9FC; }
.lrow--old { opacity: 0.62; }
.lrow__icon { color: #8C97AA; display: flex; flex-shrink: 0; }
.lrow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.lrow__title { font-size: 13.5px; font-weight: 600; color: var(--ink);
               display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lrow__meta, .lrow__about { font-size: 12px; color: var(--ink-600);
                            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow__about { color: var(--ink-400); }
.lrow__actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.lrow__nofile { font-size: 12px; }

.chip--quiet { margin-left: auto; }

@media (max-width: 560px) {
  .lrow { flex-wrap: wrap; }
  .lrow__actions { width: 100%; justify-content: flex-end; }
  .chip--quiet { margin-left: 0; }
}

/* Does the load need a hazchem vehicle? Shown the moment a product is chosen,
   because it decides what the courier sends. */
.hazbar { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
          margin-top: 14px; padding: 11px 14px; border-radius: 11px;
          font-size: 12.5px; line-height: 1.45; }
.hazbar--yes { background: var(--ember-bg); border: 1px solid #F5CDBB; color: var(--ember-dark); }
.hazbar--no { background: #EEF7F0; border: 1px solid #C6DFCE; color: #1F5C35; }
.hazbar--unknown { background: var(--amber-bg); border: 1px solid var(--amber-line); color: #6B4610; }
.hazbar__note { flex: 1 1 220px; min-width: 0; }

/* Paste a screenshot of an address rather than retyping it. */
.shot { margin-top: 13px; }
.shot__pick { display: flex; align-items: center; gap: 10px; cursor: pointer;
              padding: 11px 14px; border: 1px dashed var(--line); border-radius: 11px;
              font-size: 12.5px; color: var(--ink-600); background: var(--surface); }
.shot__pick:hover { border-color: var(--navy); color: var(--ink); }
.shot__pick svg { color: var(--ink-400); flex-shrink: 0; }
.shot__state { display: block; margin-top: 7px; font-size: 12px; color: var(--ink-600); }

/* Sourcing: candidates to judge. The judgement is the point, so the buttons
   that record it sit on every row rather than behind a menu. */
.srcbtns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.srcbtns__or { font-size: 12.5px; color: var(--ink-400); }
.srcbtns__region { width: auto; min-width: 150px; font-size: 12.5px; padding: 7px 10px; }
.srcstate { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-600); min-height: 1em; }
.srcsum { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft);
          font-size: 12.5px; color: var(--ink-600); }
.srcsum strong { display: block; font-size: 11px; letter-spacing: 0.05em;
                 text-transform: uppercase; color: var(--ink-400); margin-bottom: 5px; }
.srcsum p { margin: 0; line-height: 1.55; }

.lead { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); }
.lead:last-child { border-bottom: 0; }
.lead--disqualified, .lead--not_applicable { opacity: 0.6; }
.lead__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lead__name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lead__where { font-size: 12px; color: var(--ink-400); }
.lead__sum { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-600); }
.lead__ev { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-400); }
.lead__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
              font-size: 12px; color: var(--navy); text-decoration: none; }
.lead__link:hover { text-decoration: underline; }
.lead__link svg { color: var(--ink-400); flex-shrink: 0; }
.lead__note { margin: 7px 0 0; padding: 7px 10px; border-radius: 8px;
              background: var(--surface-alt); font-size: 12.5px; line-height: 1.5; color: var(--ink-600); }
.lead__acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.lead__acts .link { font-size: 11.5px; margin-left: 4px; }
.lead__by { margin: 7px 0 0; font-size: 11px; color: var(--ink-300); }
.chip--xs { font-size: 11px; padding: 4px 10px; }

.cov { display: grid; gap: 4px 12px; padding: 10px 18px;
       grid-template-columns: minmax(0, 150px) 120px minmax(0, 1fr);
       align-items: baseline; border-bottom: 1px solid var(--line-soft); }
.cov:last-child { border-bottom: 0; }
.cov--found { background: #F6FBF8; }
.cov__country { font-size: 13px; font-weight: 600; color: var(--ink); }
.cov__who { font-size: 12.5px; color: var(--ink-600); }
.cov__note { grid-column: 3; font-size: 11.5px; color: var(--ink-400); line-height: 1.45; }
.cov__caveat { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-400); }

@media (max-width: 620px) {
  .cov { grid-template-columns: minmax(0, 1fr) auto; }
  .cov__who, .cov__note { grid-column: 1 / -1; }
  .srcbtns__or { width: 100%; }
}

/* What the AI has cost. A billing table: numbers right-aligned so columns
   can be compared down the page rather than read across. */
.usage__head, .usage__row {
  display: grid; gap: 10px; padding: 10px 18px; align-items: baseline;
  grid-template-columns: minmax(0, 1.6fr) 60px 92px 92px 74px 84px 110px;
}
.usage__head { background: var(--surface-alt); border-bottom: 1px solid var(--line-faint);
               font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
               text-transform: uppercase; color: var(--ink-400); }
.usage__row { border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-600); }
.usage__row:last-child { border-bottom: 0; }
.usage__row--total { background: var(--surface-alt); border-top: 1px solid var(--line);
                     font-weight: 600; color: var(--ink); }
.usage__head > span:not(:first-child), .usage__row > span:not(:first-child) { text-align: right; }
.usage__what { font-weight: 600; color: var(--ink); text-align: left; }
.usage__cost { font-variant-numeric: tabular-nums; color: var(--ink); }
.usage__when { color: var(--ink-400); white-space: nowrap; }
.usage__note { margin: 12px 2px 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-400); }

@media (max-width: 760px) {
  .usage__head { display: none; }
  .usage__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .usage__what { grid-column: 1 / -1; }
  .usage__when { grid-column: 1 / -1; text-align: left; }
}

/* Picking a product to source. */
.srcpick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.srcpick .field__input { flex: 1 1 240px; min-width: 0; font-size: 13px; }
.srcpick__hint { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-400); }

/* Claiming a transfer that was booked without an order on it. */
.adopt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 11px; }
.adopt .link { font-size: 12.5px; }
.adopt__list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.adopt__row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 10px;
              width: 100%; text-align: left; padding: 9px 12px; cursor: pointer;
              background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.adopt__row:hover { border-color: var(--navy); background: var(--surface-alt); }
.adopt__no { font-size: 12px; font-weight: 600; color: var(--ink); }
.adopt__route { font-size: 12.5px; font-weight: 600; color: var(--ink);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adopt__meta { grid-column: 2; font-size: 11.5px; color: var(--ink-400); }

/* Which order a transfer belongs to, on the list. A transfer with no order
   never shows up on any order page, so the gap is worth seeing from here. */
.trow__po { display: block; font-size: 11px; color: var(--ink-400); }
.trow__po--none { font-style: italic; color: var(--amber-fg); }

/* Country presets: a starting point to edit, not a menu to obey. */
.srcpresets { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 12px; }

/* The enquiry: what the supplier will actually receive, visible before it is
   sent. A preview nobody can see is a promise, not a feature. */
.enqpeek { margin-top: 13px; }
.enqpeek summary { font-size: 12.5px; color: var(--navy); cursor: pointer; }
.enqpeek__body { margin: 10px 0 0; padding: 14px 16px; border-radius: 11px;
                 background: var(--surface); border: 1px solid var(--line);
                 font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
                 font-size: 11.5px; line-height: 1.6; color: var(--ink-600);
                 white-space: pre-wrap; word-break: break-word;
                 max-height: 340px; overflow-y: auto; }