/* AI Systems Finder: basket (5A), offers, package check, suggestions, the estimate (6): totals, charts, gap and
   mistake lines, pick cards with folds, the next step, the video (rework, 22 Oct 2026), and the draft marker (R4). DOM: docs/finder/contracts-payload-and-dom.md
   section 6. Figures use IBM Plex Mono; every money figure comes from the server reply. */

/* ---------- Basket (5A) ---------- */
.fd-bk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fd-bk-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 4px 18px;
  padding: 14px 18px; border-radius: 16px; background: var(--bla-off-white); box-shadow: 0 1px 2px var(--fd-ink-06);
}
.fd-bk-t { grid-column: 1 / 4; font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.fd-bk-m { grid-column: 1 / 4; font-size: 14px; color: var(--bla-steel-grey); }
/* Words in Source Sans 3 600 as in the mock-up; only the figure (in <b>) is Plex Mono. */
.fd-bk-h {
  grid-column: 4; grid-row: 1 / span 2; justify-self: end; text-align: right; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums;
}
.fd-bk-h b { font-family: var(--font-mono); font-weight: 500; }
/* 44px tall on every screen, so Change answers and Remove are easy to hit (fix round 2; was 32px on the computer). */
.fd-bk-row > .fd-plain { grid-row: 3; justify-self: start; min-height: 44px; font-size: 14px; }
.fd-bk-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: 0; padding: 4px 6px 0; font-weight: 700; }
.fd-bk-total :is(b, [data-value]) { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Notices: same-family check, package check, sense checks. A Light Blue field with a Consulting Blue rule. */
.fd-checks { display: grid; gap: 10px; }
.fd-checks:empty { display: none; }
.fd-same, .fd-pkcheck, .fd-warn {
  display: grid; gap: 10px; margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--fd-lb-45);
  border-left: 4px solid var(--bla-consulting-blue); font-size: 15px;
}
:is(.fd-same, .fd-pkcheck, .fd-offer, .fd-pkoffer, .fd-sug) p { margin: 0; }
:is(.fd-same, .fd-pkcheck) > div, .fd-acts { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* The joined-up offer: a Charcoal box, the one dark moment before the estimate. */
.fd-offer {
  display: grid; gap: 10px; padding: 18px 20px; border-radius: 16px; background: var(--bla-charcoal); color: var(--bla-off-white);
}
.fd-offer :is(.fd-help, small, .fd-muted) { color: var(--bla-soft-stone); }
.fd-offer :focus-visible { outline-color: var(--bla-light-blue); }
.fd-offer a { color: var(--bla-light-blue); }
.fd-pkoffer {
  display: grid; gap: 10px; padding: 18px 20px; border-radius: 16px; background: var(--bla-off-white);
  border: 2px solid var(--bla-consulting-blue); box-shadow: 0 1px 2px var(--fd-ink-06);
}
.fd-pkoffer > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
/* Buttons inside the basket blocks: outlined, Charcoal; on the dark offer, Off-White. */
:is(.fd-same, .fd-pkcheck, .fd-pkoffer, .fd-sug) button:not(.fd-plain):not(.fd-go),
.fd-offer button:not(.fd-plain) {
  justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--bla-charcoal); border-radius: var(--r-button); background: transparent; color: var(--bla-charcoal);
  font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.fd-offer button:not(.fd-plain) { border-color: var(--bla-off-white); background: var(--bla-off-white); color: var(--bla-charcoal); }
.fd-offer .fd-plain { color: var(--bla-light-blue); }

/* Suggestions */
.fd-sugs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.fd-sugs > :not(.fd-sug) { grid-column: 1 / -1; }
.fd-sugs > p:first-child { margin: 0; font-weight: 700; font-size: 16px; }
.fd-sug {
  display: grid; gap: 8px; align-content: space-between; padding: 14px 16px; border-radius: 16px;
  background: var(--bla-off-white); box-shadow: 0 1px 2px var(--fd-ink-06); min-width: 0;
}
.fd-sug :is(b, strong, .fd-sug-t) { font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.fd-sug :is(small, .fd-sug-why) { font-size: 14px; color: var(--bla-steel-grey); }

/* ---------- The estimate (slide 6) ---------- */
.fd-est { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.fd-est h2 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.fd-who { margin: 0; color: var(--bla-steel-grey); font-size: 16px; }
.fd-totals {
  margin: 0; padding: 22px; border-radius: 20px; background: var(--bla-charcoal); color: var(--bla-off-white);
  display: flex; flex-wrap: wrap; gap: 18px 22px;
}
/* Each total takes its natural width, so a long price stays on one line and the row wraps instead. */
.fd-totals > div { flex: 1 1 auto; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; }
.fd-totals dt { font-size: 14px; color: var(--bla-soft-stone); }
.fd-num, .fd-totals dd {
  margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 24px; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.fd-totals :focus-visible { outline-color: var(--bla-light-blue); }

/* A whole process among a package's parts, on 4Q (controls.ts) and the estimate, as the detail page marks it (review, 20 Oct 2026). */
.fd-part-tag {
  display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--fd-lb-45); color: var(--bla-consulting-blue);
  font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
li > .fd-part-tag { margin-left: 8px; }

/* The two charts (rework, 22 Oct 2026): a label, a bar on one scale, the figure. Bars are drawn only; each row reads as text. */
.fd-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fd-chart {
  display: grid; gap: 12px; min-width: 0; padding: 18px 20px; border-radius: 16px; background: var(--bla-off-white); box-shadow: 0 1px 2px var(--fd-ink-06);
}
.fd-chart h3 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 19px; line-height: 1.3; }
.fd-chart-pick { display: grid; gap: 8px; }
.fd-chart-pick + .fd-chart-pick { padding-top: 12px; border-top: 1px solid var(--bla-soft-stone); }
.fd-chart-k { margin: 0; font-size: 14px; color: var(--bla-steel-grey); line-height: 1.35; }
.fd-bars { display: grid; gap: 10px; }
.fd-bar-r { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 15px; }
.fd-bar-l { color: var(--bla-steel-grey); line-height: 1.25; }
.fd-bar-t { display: block; height: 22px; border-radius: 6px; background: var(--fd-ink-06); overflow: hidden; }
.fd-bar-f { display: block; height: 100%; width: var(--w, 0%); border-radius: 6px; background: var(--bla-charcoal); }
.fd-bar-after { background: var(--bla-light-blue); }
.fd-bar-worth { background: var(--bla-consulting-blue); }
.fd-bar-v { font-family: var(--font-mono); font-weight: 500; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The gap line, the cost of a mistake and related systems: a Light Blue field with a Consulting Blue rule. */
.fd-gap { display: grid; gap: 10px; padding: 14px 18px; border-radius: 0 14px 14px 0; border-left: 4px solid var(--bla-consulting-blue); background: var(--fd-lb-45); }
.fd-gap > p, .fd-mistake p { margin: 0; font-size: 16px; line-height: 1.5; }
.fd-gap-m { padding: 0; border: 0; background: none; }
.fd-mistake { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: var(--bla-off-white); }
.fd-gap-m .fd-mistake { box-shadow: 0 1px 2px var(--fd-ink-06); }
.fd-mistake p { font-size: 15px; }
.fd-mistake-n { font-family: var(--font-mono); font-weight: 500; color: var(--bla-consulting-blue); white-space: nowrap; }
.fd-rel { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bla-off-white); }
.fd-rel span { font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.fd-rel button {
  flex: none; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--bla-charcoal); border-radius: var(--r-button);
  background: var(--bla-off-white); color: var(--bla-charcoal); font-weight: 600; font-size: 15px;
}

/* One card per pick, in the server's order: the name, its figures, then two folds. */
.fd-ej {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 20px;
  border-radius: 16px; background: var(--bla-off-white); box-shadow: 0 1px 2px var(--fd-ink-06); min-width: 0;
}
.fd-ej h3 { margin: 0; font-family: var(--font-body); font-weight: 700; overflow-wrap: anywhere; }
.fd-ej:has([data-fd-line="covered"]) { box-shadow: none; border: 2px dashed var(--fd-ink-16); }
.fd-figs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 14px; color: var(--bla-steel-grey); }
.fd-figs b { margin-right: 4px; font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--bla-charcoal); font-variant-numeric: tabular-nums; }
/* A price stays on one line, on the cards and in the totals, at every width. */
:is([data-fd-fig="price"], [data-fd-total="price"]) { white-space: nowrap; overflow-wrap: normal; }
.fd-fold { border-top: 1px solid var(--fd-ink-10); padding-top: 10px; }
.fd-fold summary { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-block: -10px; cursor: pointer; color: var(--bla-consulting-blue); font-weight: 600; font-size: 15px; }
.fd-fold summary::-webkit-details-marker { display: none; }
.fd-fold summary::before { content: '\25B6'; font-size: 10px; }
.fd-fold[open] > summary::before { transform: rotate(90deg); }
.fd-fold-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 14px 0 4px; }
.fd-fold-b > :not(.fd-blk) { grid-column: 1 / -1; }

/* The offer: what we take off their hands, what they get, what it starts from, what their team checks. */
.fd-blk { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--bla-soft-stone); font-size: 15px; line-height: 1.4; min-width: 0; }
.fd-blk > * { margin: 0; }
.fd-blk > :first-child { font-size: 14px; font-weight: 600; color: var(--bla-consulting-blue); font-family: var(--font-body); }
:is(ol, ul)[data-fd-block] { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; line-height: 1.4; }
:is(ol, ul)[data-fd-block] + p, .fd-ej > p:not([class]) { margin: 0; font-size: 15px; color: var(--bla-steel-grey); }
.fd-ej > :is(h4, p:not([class])):has(+ :is(ol, ul)[data-fd-block]) { margin: 0; font-size: 15px; font-weight: 600; color: var(--bla-charcoal); }
.fd-line { margin: 0; padding-left: 12px; border-left: 2px solid var(--bla-steel-grey); font-size: 15px; color: var(--bla-steel-grey); }
.fd-also { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--fd-lb-45); font-size: 15px; line-height: 1.45; }
.fd-note { margin: 0; max-width: 72ch; font-size: 14px; color: var(--bla-steel-grey); }
/* The estimate's own sizes and gaps (review, 19 Oct 2026). The h2 stays smaller than the page's h1, as design.md
   section 4 asks of a section H2 (review round 2, 19 Oct 2026). Plain rules since the finder stopped loading
   site-taste.css (23 Oct 2026). */
.fd-est h2 { font-size: 28px; line-height: 1.1; }
.fd-est .fd-ej h3 { font-size: 19px; line-height: 1.3; }
.fd-est > * { margin: 0; }

/* The draft marker: preview only, wording not yet approved */
.fd-draft {
  justify-self: start; display: inline-block; padding: 1px 8px; border: 1px dashed var(--bla-consulting-blue); border-radius: 6px;
  color: var(--bla-consulting-blue); font-size: 14px; font-weight: 600; line-height: 1.4;
}
html:not([data-fd-preview]) .fd-draft { display: none; }

/* ---------- Next step ---------- */
.fd-next {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; padding: 22px 24px; border-radius: 20px;
  border: 1.5px solid var(--bla-charcoal); background: var(--bla-off-white);
}
.fd-next > *, .fd-next-col > * { margin: 0; }
.fd-next :is(h3, .fd-next-t) { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; }
.fd-next p { max-width: 62ch; }
.fd-next .fd-alt + .fd-err { margin-top: -6px; }
.fd-next .fd-go { margin-top: 4px; max-width: 100%; white-space: normal; text-align: left; text-decoration: none; }
/* The lighter next step (design.md .bl-alt): a Steel lead line, then a Consulting Blue underlined link. */
.fd-next p:has(+ .fd-alt) { color: var(--bla-steel-grey); }
.fd-next-col > .fd-alt {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: -10px; padding: 0; border: 0; background: none;
  color: var(--bla-consulting-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}

/* Kristian's video: 4:5, its poster first, at most 400px wide. */
.fd-video { display: grid; gap: 10px; }
.fd-video h3 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.3; }
.fd-video video { display: block; width: 100%; max-width: 400px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: var(--bla-charcoal); }

@media (hover: hover) and (pointer: fine) {
  .fd-rel button:hover { background: var(--bla-charcoal); color: var(--bla-off-white); }
  :is(.fd-same, .fd-pkcheck, .fd-pkoffer, .fd-sug) button:not(.fd-plain):not(.fd-go):hover { background: var(--bla-charcoal); color: var(--bla-off-white) !important; }
  .fd-next-col > .fd-alt:hover { color: var(--bla-blue-hover); }
  .fd-offer button:not(.fd-plain):hover { background: var(--bla-light-blue); border-color: var(--bla-light-blue); color: var(--bla-charcoal); }
}


@media (max-width: 820px) {
  .fd-sugs { grid-template-columns: minmax(0, 1fr); }
  .fd-est h2 { font-size: 24px; }
  .fd-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; padding: 18px; }
  .fd-totals dd, .fd-num { font-size: 21px; }
  /* The price takes a full row below the other three figures, as in the approved mock-up: a price has no top limit. */
  .fd-totals > div:has(> [data-fd-total="price"]) { grid-column: 1 / -1; }
  .fd-ej, .fd-chart { padding: 16px; }
  .fd-fold-b { grid-template-columns: minmax(0, 1fr); }
  .fd-bar-r { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) auto; gap: 8px; font-size: 14px; }
  .fd-rel { flex-wrap: wrap; }
  .fd-next { padding: 18px 16px; }
  /* Phone: hours drop under the name, the two text buttons share the last row. */
  .fd-bk-row { grid-template-columns: auto auto minmax(0, 1fr); padding: 12px 14px; gap: 4px 16px; }
  .fd-bk-t, .fd-bk-m, .fd-bk-h { grid-column: 1 / -1; }
  .fd-bk-h { grid-row: auto; justify-self: start; text-align: left; }
  .fd-bk-row > .fd-plain { grid-row: auto; white-space: nowrap; min-height: 44px; }
  .fd-pkoffer a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* At 320px a little less side padding keeps the deposit button on one line (labels never wrap). */
@media (max-width: 359px) {
  .fd-next { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.fd-same, .fd-pkcheck, .fd-pkoffer, .fd-sug, .fd-offer) button { transition: none; }
}