/* AI Systems Finder (R4): questions and controls, slides 1 to 5B. DOM: contracts-payload-and-dom.md section 6.
   Each tile holds its real input (fd-vh), so state is :has(input:checked). R5 sets --fill on each .fd-range. */

/* Pick counter, about line, prefill line */
.fd-counter {
  justify-self: start; max-width: 100%; margin: 0; padding: 6px 14px; border-radius: 14px;
  background: var(--bla-off-white); color: var(--bla-steel-grey); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
}
.fd-counter b { color: var(--bla-charcoal); font-weight: 600; }
.fd-about {
  display: grid; gap: 6px; padding: 14px 18px; border-radius: 16px; background: var(--fd-lb-45);
  border-left: 4px solid var(--bla-consulting-blue);
}
.fd-about p { margin: 0; font-size: 15px; line-height: 1.45; }
.fd-prefill { margin: 0; font-size: 15px; color: var(--bla-steel-grey); padding-left: 12px; border-left: 2px solid var(--bla-steel-grey); }

/* A question */
.fd-q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.fd-legend {
  display: block; float: left; width: 100%; padding: 0; margin: 0 0 4px; font-weight: 700; font-size: 21px; line-height: 1.25;
  text-wrap: balance;
}
.fd-legend + * { clear: both; }
/* A question in a group (job.roles) reads as one of its inputs. */
.fd-q .fd-q > .fd-legend { font-size: 15px; font-weight: 600; color: var(--bla-steel-grey); }
.fd-help { margin: -8px 0 0; font-size: 15px; color: var(--bla-steel-grey); }
.fd-err {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--bla-charcoal);
  padding-left: 10px; border-left: 3px solid var(--bla-consulting-blue);
}
.fd-q[aria-invalid="true"] :is(.fd-tile, .fd-chip, .fd-slider, .fd-sys, .fd-cal),
.fd-page :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--bla-steel-grey); }
/* A locked question: out of keyboard reach, words still readable. */
.fd-q:disabled .fd-legend, .fd-q:disabled .fd-help { color: var(--bla-steel-grey); }
.fd-q:disabled :is(.fd-tile, .fd-chip, .fd-slider) {
  cursor: not-allowed; background: rgba(250, 250, 248, 0.5); box-shadow: none; border: 2px dashed var(--fd-ink-16);
}
.fd-q:disabled .fd-ico { background: transparent; color: var(--bla-steel-grey); }
/* 1A's sub-type before it has options: empty tiles. */
.fd-q:disabled .fd-tile.fd-tile-ph { min-height: 52px; box-shadow: none; border: 2px solid transparent; background: rgba(250, 250, 248, 0.55); cursor: default; }

/* Tiles: radio or checkbox */
.fd-tiles { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-tiles[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-tile, .fd-chip, .fd-sys {
  position: relative; background: var(--bla-off-white); border: 2px solid transparent; box-shadow: 0 1px 2px var(--fd-ink-06);
  cursor: pointer; min-width: 0;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.fd-tile {
  display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center;
  padding: 18px 14px 16px; border-radius: 16px;
}
.fd-tile:not(:has(.fd-ico)) { padding: 14px 12px; align-content: center; }
.fd-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--bla-soft-stone); color: var(--bla-consulting-blue); display: grid; place-items: center; }
.fd-ico svg { width: 28px; height: 28px; display: block; }
.fd-tile-l { font-weight: 700; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.fd-tile-s { font-size: 14px; color: var(--bla-steel-grey); line-height: 1.3; }
:is(.fd-tile, .fd-chip, .fd-sys):has(input:checked) { border-color: var(--bla-consulting-blue); }
:is(.fd-tile, .fd-chip, .fd-sys):has(input:focus-visible) { outline: 2px solid var(--bla-consulting-blue); outline-offset: 3px; }
.fd-tile:has(input:checked) .fd-ico { background: var(--bla-consulting-blue); color: var(--bla-off-white); }
:is(.fd-tile, .fd-chip, .fd-sys):has(input:disabled) { cursor: not-allowed; background: rgba(250, 250, 248, 0.5); box-shadow: none; }
/* Tick badge on a chosen tile, chip or system */
:is(.fd-tile, .fd-chip, .fd-sys)::after {
  content: ""; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 6px; display: none;
  background: var(--bla-consulting-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FAFAF8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 2px 6px var(--fd-ink-10);
}
:is(.fd-tile, .fd-chip, .fd-sys):has(input:checked)::after { display: block; }
.fd-chip::after { top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 5px; background-size: 11px; }

/* Chips */
.fd-group-t { margin: 4px 0 -4px; font-size: 14px; font-weight: 600; color: var(--bla-steel-grey); }
.fd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fd-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 9px 16px;
  border-radius: 12px; font-weight: 600; font-size: 15px; line-height: 1.3;
}
.fd-chip .fd-ico { width: 28px; height: 28px; border-radius: 8px; }
.fd-chip .fd-ico svg { width: 20px; height: 20px; }

/* Text boxes: Other, custom title, contact */
.fd-other, .fd-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
:is(.fd-other, .fd-field) label { font-size: 14px; font-weight: 600; }
/* Boxed fields (design.md): Steel 40% at rest, Steel when wrong, Blue on focus. */
.fd-page :is(.fd-other, .fd-field, .fd-sys-other + div) :is(input, select, textarea) {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 2px solid var(--fd-steel-40); border-radius: var(--r-field);
  background: var(--bla-off-white); box-shadow: 0 1px 2px var(--fd-ink-06); font-size: 16px; font-weight: 400;
}
.fd-page :is(.fd-other, .fd-field, .fd-sys-other + div) [aria-invalid="true"] { border-color: var(--bla-steel-grey); }
.fd-page :is(.fd-other, .fd-field, .fd-sys-other + div) :focus { border-color: var(--bla-consulting-blue); }
.fd-page ::placeholder { color: var(--bla-steel-grey); opacity: 1; }
.fd-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.fd-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Slider with Not sure */
.fd-slider {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 12px;
  padding: 18px 20px 14px; border-radius: 16px; cursor: default;
  background: var(--bla-off-white); border: 2px solid transparent; box-shadow: 0 1px 2px var(--fd-ink-06);
}
.fd-slider + .fd-slider { margin-top: 2px; }
.fd-slider-l { font-size: 15px; font-weight: 600; color: var(--bla-steel-grey); }
.fd-slider-v { grid-column: -2 / -1; justify-self: end; font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.fd-slider > :is(.fd-range, .fd-ends, .fd-unsure, .fd-rate, .fd-plain, .fd-help) { grid-column: 1 / -1; }
.fd-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer;
}
.fd-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--bla-consulting-blue) var(--fill, 0%), var(--bla-soft-stone) var(--fill, 0%));
}
.fd-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--bla-soft-stone); }
.fd-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--bla-consulting-blue); }
.fd-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--bla-charcoal); border: 3px solid var(--bla-off-white); box-shadow: 0 1px 4px var(--fd-ink-16);
}
.fd-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--bla-charcoal); border: 3px solid var(--bla-off-white); }
.fd-range:focus-visible { outline: 2px solid var(--bla-consulting-blue); outline-offset: 4px; border-radius: 8px; }
.fd-slider:has(.fd-unsure input:checked) .fd-range::-webkit-slider-thumb { background: var(--bla-steel-grey); }
.fd-slider:has(.fd-unsure input:checked) .fd-range::-moz-range-thumb { background: var(--bla-steel-grey); }
.fd-slider:has(.fd-unsure input:checked) .fd-slider-v { color: var(--bla-steel-grey); }
.fd-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--bla-steel-grey); }
.fd-unsure {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.fd-unsure input, .fd-q input[type="checkbox"]:not(.fd-vh) { width: 20px; height: 20px; margin: 0; accent-color: var(--bla-consulting-blue); }
.fd-rate { margin: 0; font-size: 15px; color: var(--bla-steel-grey); }
.fd-rate b, .fd-rate [data-value] { color: var(--bla-charcoal); font-family: var(--font-mono); font-weight: 500; }

/* Live hours line */
.fd-live {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; padding: 14px 18px; border-radius: 16px;
  background: var(--bla-off-white); box-shadow: 0 1px 2px var(--fd-ink-06); font-size: 15px; color: var(--bla-steel-grey);
}
.fd-live-n { font-family: var(--font-mono); font-weight: 500; font-size: 24px; color: var(--bla-charcoal); font-variant-numeric: tabular-nums; }

/* 4A's tap answers (rework, 22 Oct 2026): chips, Not sure ticked at the start, and the link to the exact slider. */
.fd-pick-q { display: grid; gap: 12px; min-width: 0; }
.fd-chip-unsure:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--bla-consulting-blue); }
.fd-exact {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--bla-consulting-blue); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}

/* Systems list (slide 3) */
.fd-sys-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.fd-sec-t { grid-column: 1 / -1; margin: 8px 0 -4px; font-weight: 700; font-size: 16px; }
/* Each system (23 Oct 2026): a cell holding the card and its page link, inside the card's foot; cards 20px apart. */
.fd-sys-cell { position: relative; display: grid; min-width: 0; }
.fd-sys { display: grid; gap: 8px; align-content: start; padding: 20px 22px 60px; border-radius: 16px; text-align: left; }
.fd-sys-page {
  position: absolute; left: 22px; bottom: 10px; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600;
}
.fd-sys-t { font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; padding-right: 8px; }
.fd-sys-tag {
  justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--fd-lb-45); color: var(--bla-consulting-blue);
  font-size: 14px; font-weight: 600; line-height: 1.35;
}
.fd-sys-get { font-size: 15px; line-height: 1.4; }
.fd-more { justify-self: start; }
.fd-sys-other { padding-bottom: 20px; }

/* Start calendar (slide 5B) */
.fd-cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: none; padding: 18px 22px;
  border-radius: 16px; background: var(--bla-off-white); box-shadow: 0 1px 2px var(--fd-ink-06); text-align: center;
}
.fd-cal > :is(.fd-cal-head, .fd-cal-week, .fd-cal-grid) { grid-column: 1 / -1; }
.fd-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fd-cal-week, .fd-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fd-cal-m { margin: 0; align-self: center; font-weight: 700; font-size: 19px; }
:is([data-fd-cal-prev], [data-fd-cal-next]) {
  width: 44px; height: 44px; justify-self: center; display: grid; place-items: center; padding: 0;
  border: 1.5px solid var(--bla-soft-stone); border-radius: var(--r-button); background: var(--bla-off-white); font-weight: 600;
}
:is([data-fd-cal-prev], [data-fd-cal-next]):disabled { cursor: not-allowed; color: var(--bla-steel-grey); border-style: dashed; }
.fd-cal-dow { padding: 4px 0; font-size: 15px; color: var(--bla-steel-grey); }
.fd-day {
  width: 100%; min-height: 58px; padding: 0; border: 0; border-radius: 10px; background: transparent;
  font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--bla-charcoal); font-variant-numeric: tabular-nums;
}
.fd-day:disabled { cursor: not-allowed; color: var(--bla-steel-grey); font-weight: 400; }
.fd-day[aria-pressed="true"] { background: var(--bla-consulting-blue); color: var(--bla-off-white); }
/* 5B: an error line shows, under its field or the weeks below a day (64px each since the calendar grew, 22 Oct 2026). On a phone the page's scroll
   padding (finder.css) already clears the sticky footer, so this margin holds only the line. */
.fd-cal-week:nth-last-child(2) { --fd-wb: 1; }
.fd-cal-week:nth-last-child(3) { --fd-wb: 2; }
.fd-cal-week:nth-last-child(4) { --fd-wb: 3; }
.fd-cal-week:nth-last-child(5) { --fd-wb: 4; }
.fd-cal-week:nth-last-child(6) { --fd-wb: 5; }
:is(.fd-field:has(> .fd-err:not([hidden])) > :is(input, select), .fd-q:has(> .fd-err:not([hidden])) .fd-day) {
  scroll-margin-bottom: calc(76px + var(--fd-wb, 0) * 64px);
}

@media (hover: hover) and (pointer: fine) {
  .fd-tile:not(:has(input:disabled)):hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--fd-ink-10); }
  :is(.fd-chip, .fd-sys):not(:has(input:disabled)):hover { box-shadow: 0 6px 16px var(--fd-ink-10); }
  .fd-day:not(:disabled):not([aria-pressed="true"]):hover { background: var(--bla-soft-stone); }
  :is([data-fd-cal-prev], [data-fd-cal-next]):not(:disabled):hover { border-color: var(--bla-charcoal); }
}

@media (max-width: 820px) {
  .fd-tiles, .fd-tiles[data-cols] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fd-tiles:not(:has(.fd-ico)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-tile:has(.fd-ico) {
    grid-template-columns: 44px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left;
    column-gap: 14px; row-gap: 0; padding: 12px 14px;
  }
  .fd-tile:has(.fd-ico) .fd-ico { grid-row: 1 / span 2; }
  .fd-tile:has(.fd-ico) :is(.fd-tile-l, .fd-tile-s) { grid-column: 2; }
  .fd-tile:has(.fd-ico) .fd-tile-l:last-child { grid-row: 1 / span 2; }
  .fd-sys-sec { grid-template-columns: minmax(0, 1fr); }
  .fd-fields { grid-template-columns: minmax(0, 1fr); }
  /* 44px tap targets */
  .fd-cal { max-width: none; padding: 12px 4px; gap: 2px; }
  .fd-cal-week, .fd-cal-grid { gap: 2px; }
  .fd-slider { padding: 16px 16px 12px; }
  .fd-range { height: 44px; }
}
/* Narrow phones: no calendar gaps, so days stay 44px wide. The month row keeps an inset from the card's edge. */
@media (max-width: 400px) {
  .fd-cal { padding: 12px 0; column-gap: 0; }
  .fd-cal-head { padding-inline: 8px; }
  .fd-cal-week, .fd-cal-grid { column-gap: 0; }
  .fd-day:focus-visible { outline-offset: -2px; }
}
/* 320px to 363px: the calendar runs edge to edge, so seven days fit at 44px (308px). */
@media (max-width: 363px) {
  .fd-cal { margin-inline: -16px; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-tile, .fd-chip, .fd-sys { transition: none; }
  @media (hover: hover) and (pointer: fine){.fd-tile:hover{ transform: none; }}
}