/*
 * Thumbnails: "Your face on thumbnails" on Brand > Photo & thumbnails, and the Thumbnails panel on a finished cut.
 * Shared tokens only (styles.css :root, re-pointed by css/looks.css): type roles (--type-*), spacing (--s*), the
 * measure, and --button as the one accent (the primary action and the current selection). No look-scoped rules:
 * both looks come out the same size.
 */

.tn-host { display: block; min-width: 0; }
.tn-host:empty { display: none; }

/* One plain line: a status, a practice note, a saved result. Never boxed. */
.tn-line { font: var(--type-body); color: var(--ink); max-width: var(--measure); text-wrap: pretty; margin: 0; }
.tn-line--quiet, .tn-hint, .tn-why { font: var(--type-meta); color: var(--muted); max-width: var(--measure); text-wrap: pretty; margin: 0; }
.tn-label { font: var(--type-meta); color: var(--muted); }

/* ---------- Brand: your face on thumbnails (one card, groups set off by a hairline) ---------- */
.tn-body { display: grid; gap: 0; }
.tn-sec { display: grid; gap: var(--s3); min-width: 0; margin: 0; padding: 0; border: 0; }
.tn-sec + .tn-sec { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }
.tn-sec-title { font: var(--type-body-strong); color: var(--ink-strong); padding: 0; margin: 0; }
/* a fieldset group: block flow (a legend never joins a grid), the same steps a grid group gets */
fieldset.tn-sec { display: block; min-inline-size: 0; }
/* floated, the legend is ordinary content: it sits inside the padding, under the hairline, not on it */
fieldset.tn-sec > legend { float: left; width: 100%; margin: 0 0 var(--s1); }
fieldset.tn-sec > legend + * { clear: both; }
fieldset.tn-sec > * + *:not(legend + *) { margin-top: var(--s3); }

.tn-creator { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s5); align-items: start; }
.tn-photo { width: 7rem; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; background: var(--tile); }
.tn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-creator-main { display: grid; gap: var(--s3); min-width: 0; }
.tn-status { font: var(--type-body); color: var(--ink); max-width: var(--measure); margin: 0; }
.tn-actions { margin: 0; flex-wrap: wrap; }
.tn-nophoto .estate { padding: 0; }
.tn-file { position: relative; cursor: pointer; }
.tn-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.tn-file[disabled] { opacity: .55; pointer-events: none; }
.tn-name { max-width: 28rem; margin-top: var(--s2); }

/* The three choices: rows split by a hairline, not boxes. The tick is the selection. */
.tn-choice-list { display: grid; }
.tn-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start;
  padding: var(--rhythm-rows) 0; cursor: pointer;
}
.tn-choice + .tn-choice { border-top: 1px solid var(--line); }
.tn-choice input { width: 1.125rem; height: 1.125rem; margin: var(--s1) 0 0; accent-color: var(--button); }
.tn-choice-text { display: grid; gap: var(--s1); min-width: 0; }
.tn-choice-text strong { font: var(--type-body-strong); color: var(--ink-strong); }
.tn-choice-text small { font: var(--type-meta); color: var(--muted); max-width: var(--measure); }
.tn-choice:has(input:disabled) { cursor: default; }
.tn-choice:has(input:disabled) .tn-choice-text { opacity: .6; }
.tn-who { display: flex; gap: var(--s2) var(--s5); flex-wrap: wrap; font: var(--type-body); color: var(--ink); }
.tn-who label { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }
.tn-who input { accent-color: var(--button); }
.tn-sec .form-actions { margin: 0; }
.tn-style .wstate { padding: 0; }

/* ---------- A finished cut: the Thumbnails panel ---------- */
.tn-card { min-width: 0; container-type: inline-size; }
.tn-group { min-width: 0; }
.tn-group .rv-group-text h3 { font: var(--type-body-strong); color: var(--ink-strong); margin: 0; }
.tn-main .rv-group-head > .btn { align-self: center; }
.tn-main .estate--card { padding: 0; }
.tn-practice { color: var(--muted); font: var(--type-meta); }

.tn-working { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.tn-working > .wstate { flex: 1 1 18rem; min-width: 0; padding: 0; }

.tn-grid { list-style: none; margin: 0; padding: 0; display: grid; }
.tn-grid.is-dim { opacity: .5; }
.tn-item { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s5); align-items: start; padding: var(--s4) 0; }
.tn-item:first-child { padding-top: 0; }
.tn-item + .tn-item { border-top: 1px solid var(--line); }
.tn-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--tile); }
.tn-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a thumbnail that did not pass its checks: quiet, with its reason, never red */
.tn-missing { height: 100%; display: grid; place-items: center; padding: var(--s4); text-align: center; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: var(--r-sm); }
.tn-missing p { font: var(--type-meta); color: var(--muted); max-width: 28ch; margin: 0; }
.tn-badge {
  position: absolute; left: var(--s2); top: var(--s2); padding: 0 var(--s2); border-radius: 999px;
  background: var(--ink-900); color: var(--pearl); font: var(--type-meta);
}
.tn-meta { display: grid; gap: var(--s1); min-width: 0; align-content: start; }
.tn-num { font: var(--type-meta); color: var(--muted); font-variant-numeric: var(--nums-tabular); margin: 0; }
.tn-title { font: var(--type-body-strong); color: var(--ink-strong); overflow-wrap: anywhere; text-wrap: balance; max-width: var(--measure); margin: 0; }
.tn-ops { display: flex; align-items: center; gap: var(--s2) var(--s5); flex-wrap: wrap; margin-top: var(--s2); }
.tn-links { display: inline-flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; }
.tn-redo { display: grid; gap: var(--s2); margin-top: var(--s3); max-width: 28rem; }
.tn-redo .form-actions { margin: 0; }
.tn-foot { display: grid; gap: var(--s1); }
.tn-foot .tn-line { font: var(--type-meta); color: var(--muted); }

/* Research notes: a quiet fold, things to weigh */
.tn-flags, .tn-lessons { font: var(--type-meta); color: var(--ink); max-width: var(--measure); }
.tn-flags summary, .tn-lessons summary { cursor: pointer; color: var(--muted); width: fit-content; }
.tn-flags ul, .tn-lessons ul, .tn-niche ul, .tn-sources { margin: var(--s2) 0; padding-left: var(--s5); display: grid; gap: var(--s1); max-width: var(--measure); }
.tn-flags .tn-why { margin-top: var(--s1); }

/* All six ideas: a calm grid; the picked ones carry the accent ring */
.tn-cand-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.tn-cand { display: grid; gap: var(--s1); min-width: 0; align-content: start; }
.tn-cand label { position: relative; display: grid; gap: var(--s2); min-width: 0; align-content: start; cursor: pointer; }
.tn-cand img, .tn-cand-text {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: var(--tile); object-fit: cover;
  transition: box-shadow var(--motion, 180ms) ease;
}
.tn-cand-text { display: grid; place-items: center; padding: var(--s3); text-align: center; color: var(--muted); font: var(--type-meta); box-shadow: inset 0 0 0 1px var(--line-2); }
.tn-cand label:hover img { box-shadow: 0 0 0 2px var(--line-2); }
.tn-cand.is-picked img, .tn-cand.is-picked .tn-cand-text { box-shadow: 0 0 0 2px var(--card, var(--tile)), 0 0 0 4px var(--button); }
/* the tick sits on the picture's corner, where the eye already is */
.tn-cand input[type="checkbox"] {
  position: absolute; left: var(--s2); top: var(--s2); z-index: 1; width: 1.125rem; height: 1.125rem; margin: 0;
  accent-color: var(--button); cursor: pointer;
}
.tn-cand input[type="checkbox"]:disabled { display: none; }
.tn-cand-words { font: var(--type-meta); color: var(--muted); overflow-wrap: anywhere; }
.tn-cand-words strong { color: var(--ink-strong); font-weight: var(--fw-strong); }
.tn-pickbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); flex-wrap: wrap; }
.tn-count { margin: 0; font: var(--type-body); color: var(--ink); font-variant-numeric: var(--nums-tabular); }
.tn-count strong { font-weight: var(--fw-strong); color: var(--ink-strong); }

/* The test */
.tn-test .form-actions { margin: 0; }
.tn-results { display: grid; gap: var(--s2); max-width: 28rem; }
.tn-results fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.tn-results legend { padding: 0; margin-bottom: var(--s1); }
.tn-results .form-actions { margin-top: var(--s2); }
.tn-share { display: flex; align-items: center; gap: var(--s2); font: var(--type-body); color: var(--ink); }
.tn-share > span:first-child { min-width: 6.5rem; }
.tn-share .input { width: 6rem; text-align: right; }

/* What works in your niche: one fold, the summary reads as the group's title */
.tn-niche-fold > summary { font: var(--type-body-strong); color: var(--ink-strong); cursor: pointer; width: fit-content; }
.tn-niche-body { display: grid; gap: var(--s2); margin-top: var(--s3); font: var(--type-meta); color: var(--ink); }
.tn-sources { font: var(--type-meta); }
.tn-linkbtn { background: none; border: 0; padding: var(--s1) 0; cursor: pointer; }
.tn-linkbtn[aria-expanded="true"] { color: var(--ink-strong); }

/* Narrow screens: one column, the picture first, buttons full width. */
@media (max-width: 719px) {
  .tn-creator { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s4); }
  .tn-photo { width: 5rem; }
  .tn-item { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .tn-redo .btn, .tn-actions .btn { flex: 1 1 auto; justify-content: center; }
  .tn-working .btn { flex: 1 1 100%; }
  .tn-cand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .tn-pickbar .btn { flex: 1 1 100%; justify-content: center; }
}

/* The panel's own width decides, not the window's: at 1024 it sits in a narrow column. Last, so it wins. */
@container (max-width: 36rem) {
  .tn-item { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .tn-cand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .tn-pickbar .btn { flex: 1 1 100%; justify-content: center; }
}