/*
 * ForecourtIQ.
 *
 * The palette is the brand's own, taken from the ForecourtIQ site: navy chrome,
 * lime as the one loud colour, cyan alongside it. Everything else is quiet, on
 * purpose — this gets read on a phone in daylight at a sale, so contrast
 * matters more than personality and the recommendation should be the only thing
 * on the page that shouts.
 *
 * One thing the brand cannot do unaltered: lime on white is about 1.5:1, which
 * is fine behind dark text on a button and unreadable as text or a link. So
 * lime is a surface here and never a foreground, and the olive beside it —
 * --accent — is what carries links, active states and figures.
 */

:root {
  /* Read back by a tiny inline script so the pages can notice they are being
     styled by a cached copy of an older release and say so, rather than just
     looking broken. Bump alongside Assets::CSS_VERSION. */
  --sp-css: 43;

  /* The brand, as the site uses them. Surfaces and marks — never text. */
  --navy: #07131d;
  --navy-2: #0b202c;
  --navy-3: #102936;
  --lime: #c8f35b;
  --cyan: #59d9ec;

  --ink: #10212a;
  --ink-soft: #43545c;
  --ink-faint: #6b7b82;
  --line: #dbe3e5;
  --line-strong: #c2cfd2;
  --page: #f2f6f5;
  --panel: #ffffff;

  /* The readable half of the lime. Every link, every active state, every
     figure that needs to be brand-coloured rather than merely dark. */
  --accent: #5c7a0b;
  --accent-dark: #47600a;
  --accent-wash: #f4fae0;

  /* The buy tiers. These are the only strong colours in the product. */
  --strong-buy: #157f4a;
  --strong-buy-wash: #eaf8f0;
  --worth-a-look: #a8620a;
  --worth-a-look-wash: #fdf6e7;
  --avoid: #b3271e;
  --avoid-wash: #fdf1f0;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(7, 19, 29, .05), 0 10px 30px -14px rgba(7, 19, 29, .22);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The dark theme is the brand's own hero, which is where it started. Lime
       is legible on navy, so here it can be the accent it is on the site. */
    --ink: #e8f1f2;
    --ink-soft: #b9cad0;
    --ink-faint: #8ba0a8;
    --line: #17303c;
    --line-strong: #2b4652;
    --page: #07131d;
    --panel: #0b202c;
    --accent: #c8f35b;
    --accent-dark: #d9f88f;
    --accent-wash: #162a1c;
    --strong-buy: #5ddc9a;
    --strong-buy-wash: #0c2a20;
    --worth-a-look: #f3c04b;
    --worth-a-look-wash: #2b2110;
    --avoid: #f28b84;
    --avoid-wash: #2c1614;
  }
}

* { box-sizing: border-box; }

/* Inter where the machine already has it, the system stack where it does not.
   Named rather than fetched: a webfont request from a dealer's phone on auction
   wi-fi buys a slightly different "e" at the cost of the page appearing at all. */
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

/* --- Navigation -----------------------------------------------------------
   Sticky, because a dealer working a 300-lot sale scrolls a long way and
   should never have to go back to the top to reach anything. */

/* The header.
   One row, and it stays one row. It used to be a wrapping flex box, so on any
   screen narrower than the nine links "Sign out" dropped onto a line of its own
   underneath — which is what a header looks like when nobody has looked at it.
   The links scroll sideways instead; a row that scrolls reads as a row, and a
   row that wraps reads as a mistake. */
.nav { position: sticky; top: 0; z-index: 50; color: #fff;
       background: linear-gradient(135deg, var(--navy), var(--navy-2) 70%, #0a2630);
       border-bottom: 1px solid rgba(255, 255, 255, .09); }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px;
             display: flex; align-items: stretch; gap: 22px; min-height: 56px; }

.nav-brand { display: flex; align-items: center; gap: 10px; flex: none;
             font-weight: 700; font-size: 17px; letter-spacing: -.03em;
             text-decoration: none; color: #fff; }
.nav-brand b { color: var(--lime); font-weight: 700; }
.brand-mark { width: 30px; height: 30px; flex: none; }

/* Sideways where it has to be, and without a scrollbar cutting through the
   underline of the page you are on. */
.nav-links { display: flex; align-items: stretch; gap: 2px; flex: 1 1 auto;
             overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav-links::-webkit-scrollbar { display: none; }

.nav-link { display: flex; align-items: center; font-size: 14px; text-decoration: none;
            color: rgba(255, 255, 255, .72); padding: 0 12px; white-space: nowrap;
            border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-link--on { color: var(--lime); border-bottom-color: var(--lime); font-weight: 600; }

.nav-out { flex: none; margin: 0; display: flex; align-items: center; }

/* Keyboard users get to see where they are. The outline sits inside the header
   rather than being clipped by it. */
.nav-link:focus-visible, .nav-brand:focus-visible {
  outline: 2px solid var(--lime); outline-offset: -3px; border-radius: 6px;
}

/* On the navy, the quiet button has to be quiet against navy. */
.nav-out button { background: transparent; color: rgba(255, 255, 255, .8);
                  border-color: rgba(255, 255, 255, .22); }
.nav-out button:hover { background: rgba(255, 255, 255, .1); color: #fff;
                        border-color: rgba(255, 255, 255, .35); }

/* Straight past nine links to the page itself. Off-screen until it is focused,
   which is the one time anybody wants it. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
        background: var(--accent); color: #fff; padding: 10px 16px;
        border-radius: 0 0 8px 0; font-size: 14px; font-weight: 600; text-decoration: none; }
.skip:focus { left: 0; }

/* Narrow enough that the row is certainly scrolling, so the last link fades out
   rather than being sliced down the middle. Only here: a fade applied at every
   width would dim the final link on a screen with room to spare, which says
   "there is more" when there is not. */
@media (max-width: 1100px) {
  .nav-links {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* The mark carries the brand on its own once the row gets tight. Nine links
   and a wordmark do not both fit, and the links are what the header is for. */
/* Eleven links, a wordmark, a platform link and a sign-out do not fit on a
   laptop. The mark carries the brand on its own from here down. */
@media (max-width: 1280px) {
  .nav-brand span { display: none; }
}

@media (max-width: 720px) {
  .nav-inner { gap: 12px; padding: 0 14px; min-height: 52px; }
  .nav-link { padding: 0 10px; font-size: 13.5px; }
}

/* The page heading.
   The page, not the product: the tab, the header and the address bar have all
   said ForecourtIQ already, and the thing the dealer clicked on was in grey at
   14px beside it. */
.page-head { margin-bottom: 22px; }
.page-brand { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.03em;
              color: var(--ink); }
.page-brand b { color: var(--accent); font-weight: 700; }
.page-head h1 { font-size: 26px; margin: 0; letter-spacing: -.022em; line-height: 1.2; }
.page-lede { margin: 5px 0 0; color: var(--ink-faint); font-size: 14.5px; max-width: 60ch; }

/* Settings. */
/* Settings.
   One row per figure, label and explanation on the left, the box on the right.
   It was a table with the field in a 42% column, which on a wide screen put a
   pound sign and an input an inch and a half from the words they belonged to. */
.settings { display: flex; flex-direction: column; }
.setting { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 24px;
           padding: 15px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-label { flex: 1 1 300px; min-width: 0; }
.setting-label label { display: block; margin: 0; font-weight: 600; font-size: 14.5px; }
.setting .hint { display: block; margin-top: 3px; font-weight: 400; font-size: 13px;
                 line-height: 1.5; color: var(--ink-faint); max-width: 62ch; }

/* The unit sits inside the box. A pound sign beside a field reads as part of
   the label; inside it, it reads as part of the number. */
/* Every box the same width and the same right edge, whether it has a pound
   sign in front or "months" after. A column of inputs that each start
   somewhere different reads as a form nobody laid out. */
.setting-field { position: relative; flex: none; width: 150px; }
.setting-field input { margin: 0; width: 100%; text-align: right; padding-left: 26px;
                       font-variant-numeric: tabular-nums; }
.setting-unit { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
                color: var(--ink-faint); font-weight: 600; pointer-events: none; }
/* Outside the box, so it does not shorten the field it belongs to. */
.setting-suffix { position: absolute; left: calc(100% + 9px); top: 50%;
                  transform: translateY(-50%); font-size: 13px; color: var(--ink-faint);
                  white-space: nowrap; }

/* The one setting on the page that is not a number. An email address in a
   150px box right-aligned reads as a mistake, so it gets room and reads
   left to right like the text it is. */
.setting-field--wide { width: 300px; max-width: 100%; }
.setting-field--wide input { text-align: left; padding-left: 11px; }

@media (max-width: 600px) {
  .setting-field--wide { width: 100%; }
}

/* Testing the email.
   The three facts first — who it goes as, how, and where to — because half the
   time reading those is the whole diagnosis and nothing needs sending. */
.mail-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
              margin: 0 0 16px; font-size: 13.5px; }
.mail-facts dt { color: var(--ink-faint); }
.mail-facts dd { margin: 0; font-weight: 600; word-break: break-all; }

.mail-test { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mail-test label { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.mail-test input { margin: 0; flex: 1 1 240px; min-width: 0; }
.mail-test button { flex: none; }

textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: 13px; line-height: 1.7; resize: vertical; }

/* Auction cards. The one actually held is marked, because every fee on the buy
   list depends on which it is. */
.cards { display: grid; gap: 12px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
        background: var(--panel); }
.card--on { border-color: var(--strong-buy); border-left-width: 4px; }
.card-head { display: flex; gap: 12px; align-items: center; justify-content: space-between;
             flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 15px; }
.card-cost { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.card-cost--better { color: var(--strong-buy); }
.card-cost--worse { color: var(--ink-faint); }
.card details { margin-top: 12px; }
.card summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.card .reasons { margin-top: 10px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

.wrap { max-width: 780px; margin: 0 auto; padding: 32px 20px 64px; }
.wrap--wide { max-width: 1180px; }

.brand { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.brand h1 { font-size: 24px; margin: 0; letter-spacing: -.02em; }
.brand span { color: var(--ink-faint); font-size: 14px; }

.lede { color: var(--ink-soft); margin: 0 0 28px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.panel h2 { font-size: 17px; margin: 0 0 4px; }
.panel h2 + p { margin-top: 0; color: var(--ink-faint); font-size: 14px; }

.steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.steps li {
  font-size: 13px; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; background: var(--panel);
}
.steps li[data-state="done"] { color: var(--strong-buy); border-color: var(--strong-buy); }
.steps li[data-state="current"] { color: var(--panel); background: var(--accent); border-color: var(--accent); }

label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 6px; }
label .hint { display: block; font-weight: 400; color: var(--ink-faint); font-size: 13px; margin-top: 2px; }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1 1 220px; }

/* Lime with dark text on it, which is how the brand does a button. Lime cannot
   carry white text — it is a pale colour — so the pairing is the other way
   round from most of the product and the text goes dark. */
button, .button {
  display: inline-block; margin-top: 22px; padding: 11px 20px;
  font: inherit; font-weight: 700; text-decoration: none;
  /* Literal, not the ink token: lime is a light surface in both themes, so its
     text must not follow the theme. Tokenised, the label turned pale on pale
     the moment the page went dark. */
  color: #10212a;
  background: var(--lime); border: 1px solid var(--lime); border-radius: 8px; cursor: pointer;
}
button:hover, .button:hover { background: #b9e845; border-color: #b9e845; }
button:focus-visible, .button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.button--quiet { background: transparent; color: var(--accent); border-color: var(--line-strong); }
.button--quiet:hover { background: var(--accent-wash); border-color: var(--accent); }

/* The tier buttons keep white on a strong colour, which the base rule no
   longer provides now that it is dark-on-lime. */
.mini--buy, .button--buy, .mini--buy:hover, .button--buy:hover { color: #fff; }

.note { border-radius: 8px; padding: 12px 14px; font-size: 14px; margin: 0 0 18px; border: 1px solid; }
.note--bad { background: var(--avoid-wash); border-color: var(--avoid); color: var(--avoid); }
.note--warn { background: var(--worth-a-look-wash); border-color: var(--worth-a-look); color: var(--worth-a-look); }
.note--good { background: var(--strong-buy-wash); border-color: var(--strong-buy); color: var(--strong-buy); }
.note--info { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-dark); }
.note strong { display: block; margin-bottom: 2px; }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.checks .mark { flex: none; width: 20px; font-weight: 700; }
.checks .ok .mark { color: var(--strong-buy); }
.checks .warn .mark { color: var(--worth-a-look); }
.checks .bad .mark { color: var(--avoid); }
.checks .name { font-weight: 600; font-size: 14px; }
.checks .detail, .checks .fix { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
/* The catalogue rows carry live controls — change the auction, delete the sale
   — and a flex form is block-level, so without this each one drops onto its own
   line and a list of four sales runs a screen deep. */
.checks .detail { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.checks .detail form { display: inline-flex; gap: 6px; align-items: center; }
.checks .fix { color: var(--ink-soft); }

pre {
  background: var(--page); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px; overflow-x: auto; font-size: 13px; line-height: 1.5;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.tier { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em;
        padding: 3px 9px; border-radius: 99px; border: 1px solid; }
.tier--strong { color: var(--strong-buy); background: var(--strong-buy-wash); border-color: var(--strong-buy); }
.tier--look { color: var(--worth-a-look); background: var(--worth-a-look-wash); border-color: var(--worth-a-look); }
.tier--avoid { color: var(--avoid); background: var(--avoid-wash); border-color: var(--avoid); }

.foot { color: var(--ink-faint); font-size: 13px; margin-top: 28px; }

/* The column-mapping table. */
table.map { width: 100%; border-collapse: collapse; }
table.map th {
  text-align: left; font-size: 14px; font-weight: 600; vertical-align: top;
  padding: 12px 14px 12px 0; width: 46%; border-bottom: 1px solid var(--line);
}
table.map td { padding: 10px 0; border-bottom: 1px solid var(--line); }
table.map select { width: 100%; }
table.map .hint { display: block; font-weight: 400; color: var(--ink-faint); font-size: 13px; margin-top: 3px; }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.preview { border-collapse: collapse; font-size: 13px; white-space: nowrap; }
table.preview th, table.preview td {
  padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: left;
}
table.preview th { font-weight: 600; color: var(--ink-faint); background: var(--page); position: sticky; top: 0; }

label input[type=radio], label input[type=checkbox] { margin-right: 8px; }
input[type=file] {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px dashed var(--line-strong); border-radius: 8px;
}

/* A card that leads somewhere, used for the dashboard's next steps. */
.cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.cta p { margin: 0; }
.cta .button { margin-top: 0; }

/* Headline figures. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.stat-value { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.stat-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
.stat-note { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 6px; }

.sweet { font-size: 18px; font-weight: 600; margin: 0 0 22px; color: var(--ink); }

.band-heading { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin: 22px 0 10px; }
.bands { display: grid; gap: 7px; }
.band { display: grid; grid-template-columns: minmax(120px, 26%) 1fr minmax(84px, auto); gap: 12px; align-items: center; }
.band-label { font-size: 13px; color: var(--ink-soft); }
.band-track { background: var(--page); border-radius: 99px; height: 20px; overflow: hidden; }
.bar { display: block; height: 100%; border-radius: 99px; background: var(--line-strong); }
/* The dealer's best band is the only bar that gets a colour. */
.bar--best { background: var(--strong-buy); }
.bar--thin { background: repeating-linear-gradient(45deg, var(--line-strong) 0 5px, transparent 5px 10px); }
.band-value { font-size: 13px; font-weight: 600; text-align: right; }
.band-units { display: block; font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.thin-note { font-size: 11px; color: var(--ink-faint); font-weight: 400; }

.panel-sub { margin: -2px 0 16px; color: var(--ink-faint); font-size: 14px; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.tab {
  font-size: 13px; line-height: 1.2; text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 99px; padding: 7px 14px;
  background: var(--panel); white-space: nowrap;
}
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab--on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tab--on:hover { color: #fff; }

table.league {
  width: 100%; border-collapse: collapse; font-size: 14px;
  /* Digits line up in columns, which is the whole point of a table of money. */
  font-variant-numeric: tabular-nums;
}
table.league th, table.league td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line);
}
table.league thead th {
  vertical-align: bottom; border-bottom: 2px solid var(--line-strong);
  padding-bottom: 9px; font-weight: 600;
}
table.league .col-label { display: block; font-size: 13px; color: var(--ink); }
table.league .col-note { display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint); margin-top: 2px; }
table.league td.num, table.league th.num { text-align: right; white-space: nowrap; }
table.league th.rank, table.league td.rank {
  width: 34px; padding-right: 0; color: var(--ink-faint); font-size: 12px; text-align: right;
}
table.league td.model { font-weight: 600; white-space: nowrap; }
/* The column the table is sorted by, so the order is never a mystery. */
table.league .col--on { background: var(--accent-wash); font-weight: 700; }
table.league thead .col--on { color: var(--accent-dark); }
table.league tbody tr:hover td { background: var(--page); }
table.league tbody tr:hover td.col--on { background: var(--accent-wash); }
table.league tbody tr:last-child td { border-bottom: 0; }

/* --- The buy list ---------------------------------------------------------
   The tier is the only thing allowed to shout. Everything else stays quiet so
   the recommendation reads first. */

.wrap--buylist { max-width: 1000px; }

.buylist-head { display: flex; gap: 18px; align-items: flex-end; justify-content: space-between;
                flex-wrap: wrap; margin-bottom: 18px; }
.buylist-title { font-size: 20px; margin: 0; }
.switcher label { margin: 0; font-size: 13px; color: var(--ink-faint); }
.switcher select { min-width: 220px; margin-top: 4px; }

.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 6px; }
.filters label { margin: 0; flex: 1 1 150px; font-size: 13px; }
.filters input { margin-top: 4px; }
.filters button { margin-top: 0; flex: 0 0 auto; }

.choices { display: grid; gap: 10px; margin: 8px 0 4px; }
.choice { display: block; margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong);
          border-radius: 8px; font-weight: 400; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choice strong { font-weight: 700; }
.choice .hint { display: block; margin-top: 4px; }

.lots { display: grid; gap: 14px; }

.lot { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
       border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.lot--strong { border-left-color: var(--strong-buy); }
.lot--look { border-left-color: var(--worth-a-look); }
.lot--avoid { border-left-color: var(--avoid); opacity: .82; }

.lot-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.lot-id h3 { margin: 7px 0 3px; font-size: 17px; }
.derivative { font-weight: 400; color: var(--ink-faint); font-size: 14px; }
.lot-facts { margin: 0; font-size: 13px; color: var(--ink-faint); }

.lot-score { text-align: right; flex: none; }
.score { display: block; font-size: 27px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
         font-variant-numeric: tabular-nums; }
.score-label { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 3px; }

.lot-headline { margin: 13px 0; font-size: 14px; color: var(--ink-soft); }

.lot-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
             padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.money-label { display: block; font-size: 12px; color: var(--ink-faint); }
.money { display: block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; }
.money--good { color: var(--strong-buy); }
.money--bad { color: var(--avoid); }
.money-note { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* MOT, service history, DVSA record — the checks made before bidding. Facts,
   not judgements, so they sit quietly until one is worth looking at: a red
   MOT should be findable while scrolling without reading a word. */
.lot-condition { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 13px;
                 font-size: 12.5px; color: var(--ink-soft); }
.fact { display: inline-flex; align-items: baseline; gap: 5px; }
.fact b { font-weight: 600; }
.fact span { color: var(--ink-faint); }
.fact--warn, .fact--warn b { color: var(--worth-a-look); }
.fact--bad, .fact--bad b { color: var(--avoid); }
.fact--warn, .fact--bad { padding: 1px 8px; border-radius: 4px; }
.fact--warn { background: var(--worth-a-look-wash); }
.fact--bad { background: var(--avoid-wash); }
.fact--warn span, .fact--bad span { color: inherit; opacity: .85; }
.fact--kit { color: var(--ink-faint); }

@media (prefers-color-scheme: dark) {
  /* The tier reds and ambers are set for headings and chips, and at 12.5px on
     their own wash they fall just under 4.5:1. Lightened here only, rather than
     shifting the shared tokens and every tier colour with them. */
  .fact--bad, .fact--bad b { color: #fca5a5; }
  .fact--warn, .fact--warn b { color: #fcd34d; }
}

/* Attached inspection reports.
   The point of the block is the faults, not the filenames: a dealer scrolling a
   sale should be able to see that a car has a poor previous repair on the front
   bumper without opening anything. So the document is a quiet line and the
   findings are the loud part, coloured the way BCA colour them. */
.reports { margin-top: 13px; border-top: 1px dashed var(--line); padding-top: 11px;
           display: flex; flex-direction: column; gap: 11px; }
.report { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
          background: var(--page); }
.report-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
               font-size: 12.5px; color: var(--ink-faint); }
.report-name { font-weight: 700; color: var(--ink); font-size: 13px; }
.report-grade { font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line-strong);
                border-radius: 4px; padding: 0 6px; }
.report-note { color: var(--worth-a-look); }

.report-flaws { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 8px; font-size: 12.5px; }
.flaw { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 8px; border-radius: 4px; }
.flaw b { font-weight: 600; }
.flaw span { opacity: .85; }
.flaw--warn { background: var(--worth-a-look-wash); color: var(--worth-a-look); }
/* Solid, not a wash. On BCA's own reports this is a red exclamation in a
   filled circle, and a car with an engine smoking mark on it should be the
   thing a dealer's eye lands on when the card comes into view. */
.flaw--bad { background: var(--avoid); color: #fff; font-weight: 500; }
.flaw--bad b { color: #fff; }

.report-tread { margin-top: 9px; font-size: 12.5px; color: var(--ink-soft); }
.tread-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
               color: var(--ink-faint); font-weight: 600; }
.tread { display: inline-flex; gap: 5px; padding: 1px 7px; border-radius: 4px; }
.tread b { font-weight: 600; }
.tread--warn { background: var(--worth-a-look-wash); color: var(--worth-a-look); }
.tread--bad { background: var(--avoid); color: #fff; }

/* The prep list. Set apart from everything else on the card on purpose: it is
   the one block of money on the page that is an estimate rather than a
   calculation, and it has to look it. */
.read--prep { border-left: 3px solid var(--worth-a-look); padding-left: 12px; }
.prep { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.prep li { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0;
           border-bottom: 1px dotted var(--line); }
.prep li:last-child { border-bottom: 0; }
.prep li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prep-total { margin: 7px 0 0; font-weight: 700; }
.prep-verdict { margin: 5px 0 0; }

/* Bought cars. The other half of the buy list: that page is a judgement made
   before a sale, this is the record of what happened, and the green edge says
   which one you are looking at without reading a word. */
.lot--bought { border-left: 4px solid var(--strong-buy); }
.lot--bought .lot-head { align-items: flex-start; }

/* Money that is worked out rather than typed — the VAT, chiefly. Quieter than
   the figures either side of it so it does not read as something to argue with. */
.money--soft { opacity: .72; }

/* The invoice against what was typed. Only ever shown once an invoice has been
   attached and read, so it is always saying something. */
.invoice-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
                 margin-top: 12px; padding: 10px 12px; border-radius: var(--radius);
                 background: var(--page); border: 1px solid var(--line); }
.invoice-check .money { font-size: 17px; font-weight: 700; }
.invoice-check .hint { flex: 1 1 220px; font-size: 12px; color: var(--ink-faint); }
.hint--warn { color: var(--worth-a-look); }

/* The bill, on the report card itself.
   Bigger than anything else on the card because it is the only figure in the
   product that is a fact rather than an estimate. */
.invoice-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
                 margin-top: 10px; }
.invoice-figure { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

/* Emailed on to the document import. Said on the card so nobody forwards it twice
   by hand, which is exactly the work this was meant to save. */
.report-sent { font-size: 11.5px; font-weight: 600; color: var(--strong-buy);
               background: var(--strong-buy-wash); padding: 2px 8px; border-radius: 999px; }

/* A note that is a warning rather than a fact: an expired MOT, or a list of
   checks the inspector never carried out. Silence about those reads as a
   pass, which is the one thing a report must never do. */
.report-note--warn { color: var(--avoid); font-weight: 600; }

/* People — on a dealership, and waiting on an invitation.
   One list rather than two, because "who can get in" is one question and
   splitting it into members and pending invitations makes you ask it twice. */
.people { list-style: none; margin: 14px 0 0; padding: 0; }
.people li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
             gap: 8px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.people li:last-child { border-bottom: 0; }
.people .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.people .who b { font-size: 14.5px; }
.people .who .foot { margin: 0; }
.people .what { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* The row that adds somebody. Deliberately a form and not a modal: a dealer
   principal adding their buyer should not have to find a button first. */
.invite-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin: 14px 0 0; }
.invite-row label { margin: 0; flex: 1 1 190px; max-width: 280px; font-size: 11px;
                    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
                    font-weight: 600; }
.invite-row label .hint { text-transform: none; letter-spacing: 0; font-size: 11px; }
.invite-row input, .invite-row select { margin-top: 3px; }
.invite-row button { margin: 0; }

/* The invitation link, shown once and never again — only its hash is kept.
   Big, selectable, and impossible to mistake for decoration. */
.panel--link { border-color: var(--accent); }
.invite-link { margin: 8px 0 0; padding: 12px 14px; border: 1px dashed var(--line-strong);
               border-radius: 8px; background: var(--page); font-family: ui-monospace,
               SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
               word-break: break-all; user-select: all; }

.dealer-head { display: flex; flex-wrap: wrap; align-items: flex-start;
               justify-content: space-between; gap: 10px 18px; }
.dealer-head h2 { margin: 0; }

/* A dealership's standing. The two that let somebody work read calm; the three
   that do not read as something to act on. */
.tier--ACTIVE { color: var(--strong-buy); border-color: var(--strong-buy); }
.tier--TRIALING { color: var(--accent); border-color: var(--accent); }
.tier--PAST_DUE { color: var(--worth-a-look); border-color: var(--worth-a-look); }
.tier--SUSPENDED, .tier--CANCELLED { color: var(--avoid); border-color: var(--avoid); }

/* The platform link. Outside the scrolling run of links and beside Sign out,
   because it belongs to whoever runs ForecourtIQ rather than to the dealership
   whose pages those are. */
.nav-platform { flex: none; display: flex; align-items: center; padding: 0 12px;
                font-size: 13.5px; font-weight: 600; text-decoration: none;
                color: var(--lime); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-platform:hover { background: rgba(255, 255, 255, .07); }
.nav-platform--on { border-bottom-color: var(--lime); }

@media (max-width: 720px) {
  /* The mark says which one it is; at this width the word is what has to go. */
  .nav-platform { font-size: 0; padding: 0 8px; }
  .nav-platform:after { content: "\2699"; font-size: 17px; }
}
/* The retail panel — rating, days to sell, how the model moves.
   Laid out like the block Auto Trader print on an advert, because that is the
   shape a dealer already reads without thinking about it. What is inside it is
   this dealership's own trading record, and the panel says so. */
.retail-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
                background: var(--page); flex: 1 1 100%; margin-top: 4px; }
.retail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.retail-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
                color: var(--ink-faint); font-weight: 700; }
.retail-score { font-size: 21px; font-weight: 700; line-height: 1; }
.retail-score span { font-size: 12px; font-weight: 400; color: var(--ink-faint); }
.retail-none { font-size: 12.5px; color: var(--ink-faint); }

/* Five segments rather than one bar: a continuous fill makes 61 and 68 look
   like the same number, and they are not the same car. */
.rate-bar { display: flex; gap: 3px; margin-top: 8px; }
.rate-seg { flex: 1; height: 9px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rate-fill { display: block; height: 100%; background: var(--strong-buy); }

.retail-grid { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 12px;
               padding-top: 11px; border-top: 1px solid var(--line); }
.retail-cell { flex: 1 1 190px; display: flex; flex-direction: column; gap: 3px; }
.retail-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
                color: var(--ink-faint); font-weight: 600; }
.retail-figure { font-size: 19px; font-weight: 700; line-height: 1.1; }
.retail-figure span { font-size: 12px; font-weight: 400; color: var(--ink-faint); }
.retail-figure--none { color: var(--ink-faint); font-weight: 400; }
.retail-note { font-size: 12px; color: var(--ink-soft); }

/* Where the model sits against the rest of the book. Left is slow, right is
   quick, the same direction as every other scale on the card. */
.gauge { position: relative; display: block; height: 9px; margin: 4px 0 2px; }
.gauge-track { position: absolute; inset: 0; border-radius: 3px;
               background: linear-gradient(to right, var(--avoid), var(--worth-a-look), var(--strong-buy)); }
.gauge-pin { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px;
             background: #000; box-shadow: 0 0 0 1.5px #fff; border-radius: 1px; }
.gauge--empty { height: 9px; border-radius: 3px; background: var(--line); }

.retail-trend { font-size: 12px; color: var(--ink-faint); }
.retail-trend--good { color: var(--strong-buy); }
.retail-trend--bad { color: var(--worth-a-look); }
.retail-panel .foot { margin-top: 10px; }

@media (prefers-color-scheme: dark) {
  .retail-trend--bad { color: #fcd34d; }
  /* The dark-theme tier greens are pale enough to want dark text on them, the
     same way the lime button does. */
  .mini--buy, .button--buy, .mini--buy:hover, .button--buy:hover { color: #06231a; }
}
/* Over the stock limit. The count is shown on every card whatever it is —
   knowing you already have two before buying a third is worth as much as being
   stopped at the fourth — and only turns red when it is a problem. */
.retail-figure--over { color: var(--avoid); }
.retail-note--over { color: var(--avoid); font-weight: 600; }

/* Scales: battery state of health, and tyre tread.
   Both say the same thing the same way — a coloured run of bands with a marker
   on it — because a dealer should not have to learn two visual languages on
   one card. Left is bad, right is good, on both. */
.scale-row { display: flex; align-items: center; gap: 9px; margin-top: 7px; font-size: 12.5px; }
.scale-label { min-width: 52px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
               color: var(--ink-faint); font-weight: 600; }
.scale-figure { min-width: 46px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scale { position: relative; flex: 1 1 120px; min-width: 110px; height: 12px; }
.scale-bands { position: absolute; inset: 0; display: flex; border-radius: 3px; overflow: hidden; }
.scale-band { display: flex; align-items: center; justify-content: center; }
.scale-band b { font-size: 8px; color: #fff; font-weight: 700; opacity: .9; letter-spacing: .04em; }
/* The marker is a notch through the bands rather than a dot on top of them, so
   it stays readable whichever colour it lands on. Solid black with a white
   collar either side: on a dark green band a grey line at three pixels is
   nearly invisible, and this is the one part of the scale anybody looks at. */
.scale-pin { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px;
             background: #000; box-shadow: 0 0 0 1.5px #fff; border-radius: 1px; }
.scale-note { color: var(--ink-faint); font-size: 11.5px; }
.scale-note--said { color: var(--avoid); font-weight: 600; }

.report-grade--battery { color: #fff; border: 0; font-weight: 700; }

@media (max-width: 620px) {
  /* On a phone the bar is the first thing to lose. The figure and its colour
     carry the meaning on their own. */
  .scale { display: none; }
  .scale-row { gap: 7px; }
}
.report-clear, .report-unread { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.report-unread { color: var(--worth-a-look); }

.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 9px; }
.report-open { font-size: 12.5px; }
.report-remove { display: inline-flex; }
/* A button that has to read as a link: removing a report is destructive enough
   to want the confirmation a form gives, and small enough that a button beside
   "Open the PDF" would shout. */
.linkish { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 12.5px;
           color: var(--ink-faint); text-decoration: underline; cursor: pointer; }
.linkish:hover { color: var(--avoid); }

.report-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.report-file { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600;
               font-size: 12.5px; }
.report-file input[type=file] { font-size: 12px; max-width: 230px; }
.report-attach .hint { flex: 1 1 240px; font-size: 12px; color: var(--ink-faint); font-weight: 400; }

@media (prefers-color-scheme: dark) {
  /* The dark red is light enough to take dark text, which keeps the solid
     badge as loud as it is in daylight without glaring. */
  .flaw--bad, .flaw--bad b, .tread--bad { background: #b91c1c; color: #fff; }
  .flaw--warn, .tread--warn, .report-note, .report-unread { color: #fcd34d; }
  /* Black on a dark page disappears; the marker inverts rather than fades. */
  .scale-pin, .gauge-pin { background: #fff; box-shadow: 0 0 0 1.5px #111; }
}
/* Two real trading periods side by side, and the month in progress beside them
   so its small number reads as "nine days in" rather than as a collapse. */
.periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px;
           margin-top: 18px; }
.period { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
          background: var(--page); }
.period h3 { margin: 0 0 2px; font-size: 14px; }
.period h4 { margin: 14px 0 5px; font-size: 11px; text-transform: uppercase;
             letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; }
.period .panel-sub { margin: 0; font-size: 13px; }
.tally { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tally li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0;
            color: var(--ink-soft); }
.tally li.muted { color: var(--ink-faint); }

/* One section of the read on a car. Headed, so the report can be skimmed for
   the part that matters rather than read end to end. */
.read { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.read h4 { margin: 0 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
           color: var(--ink-faint); font-weight: 600; }
.read p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.read--watch { border-left-color: var(--worth-a-look); }
.read--watch h4 { color: var(--worth-a-look); }

/* A read shown inside a buy list card rather than on its own page. Set apart,
   because everything else on the card is computed and this is an opinion. */
.ai-inline { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius);
             border: 1px solid var(--accent); background: var(--accent-wash); }
.ai-inline .lot-headline { margin-top: 0; }
.ai-inline .read { border-left-color: var(--accent); }
.ai-done { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-faint); }

/* The real figures, on the card, under the estimate. Laid out to be filled in
   one-handed on a phone at a sale — which is where these numbers are actually
   known, and where a week-late entry becomes a guess. */
.actual-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
              margin: 0; padding: 12px 0 2px; }
.actual-row label { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
                    color: var(--ink-faint); font-weight: 600; flex: 1 1 120px; max-width: 170px; }
.actual-row label .hint { text-transform: none; letter-spacing: 0; font-size: 11px; margin-top: 1px; }
.actual-row input { margin-top: 3px; padding: 7px 10px; font-size: 15px;
                    font-variant-numeric: tabular-nums; }
.actual-row button { margin: 0; }
.actual-margin { flex: 1 1 110px; }
.actual-margin .money-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
                              font-weight: 600; }
.actual-margin .money { font-size: 19px; }
/* A margin worked out with the standing fees figure rather than this car's own.
   Drawn lighter and with the reason under it, because the difference between it
   and the real thing is six hundred pounds and no visible clue. */
.actual-margin .money--soft { opacity: .72; }
.actual-margin .hint { display: block; font-size: 11px; line-height: 1.3; margin-top: 2px;
                       color: var(--ink-faint); font-weight: 400; }

/* The VAT the margin scheme takes out, under the margin rather than inside it.
   The dealer works in the figure above; this is what is left once HMRC have
   had their sixth of the gap between the sale and the purchase. */
.margin-vat { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 3px;
              color: var(--ink-soft); font-weight: 400; }
.margin-vat b { font-weight: 700; color: var(--ink); }

/* Scoring a sale again, offered where the sale is being read rather than
   three pages away in Settings. */
.rescore-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
               margin: 10px 0 0; }
.rescore-bar .foot { margin: 0; flex: 1 1 320px; }

/* Clearing out the hidden pile. The one destructive control in the product,
   so it is red, it asks first, and it only exists on the view where the
   dealer is already looking at what they have dismissed. */
.remove-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
              margin: 10px 0 0; }
.remove-bar .foot { margin: 0; flex: 1 1 320px; }
.lot-pick { display: inline-flex; align-items: center; gap: 6px; float: right;
            font-size: 12px; color: var(--ink-faint); margin: 0 0 0 10px; }
.lot-pick input { margin: 0; width: 16px; height: 16px; accent-color: var(--avoid); }
.mini--danger { color: var(--avoid); border-color: var(--avoid); }
.mini--danger:hover { background: var(--avoid-wash); }
.pick-all { float: none; margin: 0; font-size: 13px; color: var(--ink-soft); }
.remove-bar button[disabled] { opacity: .5; cursor: default; }

/* The two ends, under the typical figure. Small and grey: it is context for
   the number above it, not a number of its own. */
.spread { display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint);
          font-variant-numeric: tabular-nums; margin-top: 1px; }
.actual-empty { display: block; font-size: 19px; font-weight: 700; color: var(--ink-faint); margin-top: 1px; }

/* The retail rating and how long it really took. A second line under the money
   because they are recorded at a different time — the rating when appraising,
   the days once it has gone. */
.actual-extra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
                flex-basis: 100%; padding-top: 6px; }
.actual-extra label { flex: 0 1 150px; }

/* Drawn but never judged: no threshold here decides what a good rating is,
   because that is Auto Trader's scale and not ours. */
.rating { flex: 1 1 150px; display: flex; align-items: center; gap: 9px; padding-bottom: 6px; }
.rating-track { flex: 1 1 auto; height: 9px; border-radius: 99px; background: var(--line);
                overflow: hidden; }
.rating-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.rating-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
                white-space: nowrap; }
.rating-value span { font-size: 11px; font-weight: 400; color: var(--ink-faint); }
.rating-note { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }

/* Only on a button that destroys something, and only after a confirmation
   page that has already said what goes. */
.button--danger { background: var(--avoid); border-color: var(--avoid); }
.button--danger:hover { background: var(--avoid); border-color: var(--avoid); filter: brightness(.9); }

.actual-link { flex: 1 1 220px; max-width: none; }
.source-link { margin-top: 0; margin-bottom: 6px; white-space: nowrap; }

/* The valuation itself. The one figure on the page a dealer came for, so it is
   allowed to be the size it is — everything around it is the working. */
.valuation { margin: 6px 0 2px; font-size: 40px; font-weight: 700; letter-spacing: -.02em;
             line-height: 1.1; font-variant-numeric: tabular-nums; }

.print-bar { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.print-bar .button { margin-top: 0; }
.print-bar .foot { margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line-strong);
        color: var(--ink-soft); background: var(--page); }
.chip--warn { border-color: var(--worth-a-look); color: var(--worth-a-look); background: var(--worth-a-look-wash); }
.chip--bad { border-color: var(--avoid); color: var(--avoid); background: var(--avoid-wash); }

.lot-why { margin-top: 13px; }
.lot-why summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.lot-why ul { margin: 11px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-soft); }
.lot-why li { margin-bottom: 5px; }
.lot-why .foot { margin-top: 11px; }

.lot-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
               margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }

.mini { margin-top: 0; padding: 6px 13px; font-size: 13px; font-weight: 600; border-radius: 7px; }
/* A dropdown sitting in a row of buttons, not filling a form column: the base
   select rule is width:100%, which pushes everything beside it onto its own
   line. */
select.mini { width: auto; padding: 5px 9px; font-weight: 500; }
.mini--quiet { background: transparent; color: var(--ink-faint); border-color: var(--line-strong); }
.mini--quiet:hover { background: var(--page); color: var(--ink); border-color: var(--line-strong); }
.mini--buy, .button--buy { background: var(--strong-buy); border-color: var(--strong-buy); }
.mini--buy:hover, .button--buy:hover { background: #036349; border-color: #036349; }

.decided { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 99px; border: 1px solid; }
.decided--shortlisted { color: var(--accent); background: var(--accent-wash); border-color: var(--accent); }
.decided--bought { color: var(--strong-buy); background: var(--strong-buy-wash); border-color: var(--strong-buy); }
.decided--hidden { color: var(--ink-faint); background: var(--page); border-color: var(--line-strong); }

/* The lot detail page. */
table.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.ledger th { text-align: left; font-weight: 600; font-size: 14px; padding: 10px 0; }
table.ledger td { padding: 10px 0; }
table.ledger td.num { text-align: right; font-weight: 700; font-size: 16px; white-space: nowrap; }
table.ledger td.why { padding-left: 16px; font-size: 13px; color: var(--ink-faint); font-weight: 400;
                      text-align: right; width: 45%; }
table.ledger tr.subtotal th, table.ledger tr.subtotal td { border-top: 1px solid var(--line); }
table.ledger tr.total th, table.ledger tr.total td { border-top: 2px solid var(--line-strong); font-size: 17px; }
table.ledger tr.total td.num { font-size: 20px; }

ul.reasons { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-soft); }
ul.reasons li { margin-bottom: 7px; }

.decision-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.decision-buttons button { margin-top: 0; }

/* Anything generated rather than computed is visually separated, on purpose.
   A dealer must never have to wonder which numbers came from their own sales. */
.panel--ai { border-style: dashed; border-color: var(--line-strong); background: var(--page); }
.ai-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; vertical-align: middle;
          padding: 2px 7px; border-radius: 99px; margin-left: 6px;
          color: var(--ink-faint); background: var(--panel); border: 1px solid var(--line-strong); }
.ai-body { font-size: 14px; color: var(--ink-soft); }
.ai-body p { margin: 0 0 10px; }
.ai-body .band-heading { margin-top: 16px; }

/* The narrower filters, folded away until wanted and opened whenever any is in
   use — a filtered list that looks unfiltered is how a dealer concludes half
   the sale is missing. */
.more-filters { flex-basis: 100%; margin-top: 4px; border-top: 1px solid var(--line);
                padding-top: 12px; }
.more-filters summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent);
                        list-style: none; }
.more-filters summary::-webkit-details-marker { display: none; }
.more-filters summary::before { content: "▸ "; }
.more-filters[open] summary::before { content: "▾ "; }
.more-filters summary span { font-weight: 400; color: var(--ink-faint); }
.more-filters button { margin-top: 14px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
               gap: 0 14px; margin-top: 4px; }
.filter-grid label { margin-top: 12px; }
.filter-grid .hint { display: inline; margin-left: 4px; }