/* ============================================================
   TED Digital - system finder (loads only where ted/system-finder renders)
   The kit's spec-dot table (06c), copied, set in a white card on stone, with the questions beside it
   in the form grammar (forms.css: circle ticks, tracked labels). Every value a token.
   ============================================================ */
.finder__head { margin-bottom: var(--gap-lg); }
.finder__lede { color: var(--ink-70); max-width: 60ch; }
.finder__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--gap-xl); align-items: start; }
.finder__body:has(.finder__ask[hidden]) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .finder__body { grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); } }

/* ---- the questions ---- */
.finder__ask[hidden] { display: none; }
.finder__ask { display: grid; gap: var(--gap-md); position: sticky; top: var(--gap-md); }
@media (max-width: 1100px) { .finder__ask { position: static; } }
.finder__q { border: 0; margin: 0; padding: 0; display: grid; gap: var(--gap-xs); min-width: 0; }
.finder__q[hidden] { display: none; }
.finder__q legend { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); margin-bottom: var(--gap-xs); padding: 0; }
.finder__hint { font-size: var(--text-sm); color: var(--ink-50); margin-bottom: var(--gap-3xs); }
.finder__row { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.finder__wishes { display: grid; gap: var(--gap-xs); }
.finder .check { display: flex; gap: var(--gap-xs); align-items: flex-start; cursor: pointer; font-size: var(--text-sm); color: var(--ink-70); }
.finder .check span { padding-top: var(--gap-3xs); }
.finder .check:has(input:checked) { color: var(--ink); }
.finder__reset { justify-self: start; }

/* ---- the answer ---- */
.finder__result { display: grid; gap: var(--gap-sm); min-width: 0; }
.finder__summary { font-family: var(--font-heading); font-weight: 300; font-size: var(--text-xl); line-height: 1.3; text-wrap: pretty; }
.finder__none[hidden], .finder__fits[hidden], .finder-card[hidden] { display: none; }
.finder__fits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap-sm); }
.finder-card { display: flex; flex-direction: column; gap: var(--gap-xs); align-items: flex-start; background: var(--surface-raised); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: var(--gap-sm); transition: border-color 0.2s var(--ease); }
.finder-card:hover, .finder-card:focus-within, .finder-card.is-best { border-color: var(--ted-teal); }
.finder-card img { flex: none; width: 72px; height: 72px; object-fit: contain; }
.finder-card h3 { font-size: var(--text-base); font-weight: 500; letter-spacing: 0; text-transform: none; }
.finder-card h3 span { font-family: var(--font-body); font-weight: 400; color: var(--ink-50); font-size: var(--text-sm); }
.finder-card__note { font-size: var(--text-sm); color: var(--ink-70); margin-top: var(--gap-3xs); }
.finder-card__note:empty { display: none; }
.finder-card .btn { margin-top: var(--gap-2xs); white-space: nowrap; }

/* ---- the table: the kit's spec-dot grammar, in a white card; scrolls sideways under ~720px.
        position: relative keeps the cells' visually-hidden Yes/No inside the scroller (they are absolute) ---- */
.finder__table { position: relative; background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--gap-sm); overflow-x: auto; scrollbar-width: thin; }
.finder__table:focus-visible { outline: 2px solid var(--ted-teal); outline-offset: 2px; }
.spec-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.spec-table thead th { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-50); text-align: center; vertical-align: top; padding: var(--gap-xs); border-bottom: 1px solid var(--line); }
.spec-table thead td { border-bottom: 1px solid var(--line); }
.spec-table thead img { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto var(--gap-xs); }
.spec-table__name { display: block; color: var(--ink); }
.spec-table__meta { display: block; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: var(--gap-3xs); }
.spec-table tbody th { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); color: var(--ink-70); text-align: left; padding: var(--gap-xs); border-bottom: 1px solid var(--line-soft); }
.spec-table td { padding: var(--gap-xs); border-bottom: 1px solid var(--line-soft); text-align: center; font-size: var(--text-sm); color: var(--ink-70); }
.spec-table tbody tr:last-child > * { border-bottom: none; }
.spec-table td small { display: block; font-size: var(--text-xs); color: var(--ink-50); margin-top: var(--gap-3xs); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-circle); vertical-align: middle; }
.dot--yes { background: var(--ted-teal); }
.dot--no { border: 1px solid var(--line); }
/* Sticky row labels so a phone keeps its bearings while the systems scroll past */
@media (max-width: 720px) {
  .spec-table tbody th { position: sticky; left: 0; z-index: 1; background: inherit; min-width: 140px; }
  .spec-table tbody tr { background: var(--surface-raised); }
  .spec-table tbody tr.is-asked { background: var(--surface-warm); }
}

/* Answers: rows asked about carry a teal marker; systems that do not fit step back */
.spec-table tr.is-asked th { color: var(--ink); box-shadow: inset 2px 0 0 var(--ted-teal); }
.spec-table tr.is-asked { background: var(--surface-warm); }
/* A system that does not fit: its dots and picture step back, its header says why in legible ink */
.spec-table .is-out > :not(.spec-table__out) { opacity: 0.3; }
.spec-table [data-col] > * { transition: opacity 0.3s var(--ease); }
.spec-table__out { display: block; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink); margin-top: var(--gap-3xs); }
.spec-table__out[hidden] { display: none; }
/* A phone shows two systems at a time: once answered, the ones that do not fit leave the table */
@media (max-width: 720px) { .spec-table .is-out { display: none; } .spec-table:has(.is-out) { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .spec-table [data-col] > *, .finder-card { transition: none; } }