/* Tag review — the tagger's notes (renderer/media/autotagger.js).
 *
 * Direction: THE KEEPER'S REGISTER. The same walnut-and-brass hand as the
 * Systems engine room (renderer/systems/systems.css): a dark wood page, brass
 * hairlines between entries, titles in the Iowan serif, everything else in
 * the app's own face. Each video is a written entry, not a card: thumbnail,
 * title, one line saying what the tagger read and how sure it is, then its
 * suggestions. No coloured pills, no purple gradients, no status dots.
 *
 * Every chip row stays on one line (horizontal scroll under a fade) so a
 * long list never breaks into ragged rows.
 *
 * MOTION. Entries are written in one after another when the dialog opens
 * (html.atr-motion only, set when reduced motion is off), and a struck tag
 * draws its line across rather than snapping.
 */

.atr {
  --atr-wood:      #171219;
  --atr-wood-2:    #1d1720;
  --atr-plate:     #241c25;
  --atr-brass:     #c9a24a;
  --atr-brass-hi:  #e8c681;
  --atr-brass-dim: #8a6f33;
  --atr-brass-rgb: 201, 162, 74;
  --atr-ember:     #ff9a3c;
  --atr-ember-rgb: 255, 154, 60;
  --atr-ink:       var(--text);
  --atr-ink-dim:   var(--text-dim);
  --atr-ink-mute:  var(--text-mute);
  --atr-line:      rgba(255, 206, 160, .10);
  --atr-line-hi:   rgba(255, 190, 130, .26);
  --atr-serif:     'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --atr-ease:      cubic-bezier(.16, 1, .3, 1);
}

/* ── the page ────────────────────────────────────────────────────────────── */

.modal-panel.atr {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--atr-line-hi);
  border-radius: 14px;
  background:
    radial-gradient(700px 220px at 0% 0%, rgba(var(--atr-ember-rgb), .08), transparent 70%),
    linear-gradient(180deg, var(--atr-wood-2), var(--atr-wood));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 236, 200, .05);
  color: var(--atr-ink);
}

.atr-head {
  position: relative;
  flex: none;
  padding: 24px 64px 18px 24px;
  border-bottom: 1px solid var(--atr-line-hi);
}
.atr-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--atr-brass);
}
.modal-panel .atr-title {
  margin: 0;
  font-family: var(--atr-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--atr-ink);
  text-wrap: balance;
}
.atr-sub {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--atr-ink-dim);
  text-wrap: pretty;
}
.atr-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--atr-line);
  border-radius: 10px;
  background: transparent;
  color: var(--atr-ink-dim);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.atr-close:hover { color: var(--atr-brass-hi); border-color: var(--atr-line-hi); background: rgba(var(--atr-brass-rgb), .06); }
.atr-close:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 2px; }

/* ── the register ────────────────────────────────────────────────────────── */

.atr-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--atr-brass-dim) transparent;
}
.atr-list::-webkit-scrollbar { width: 8px; }
.atr-list::-webkit-scrollbar-track { background: transparent; }
.atr-list::-webkit-scrollbar-thumb { background: rgba(var(--atr-brass-rgb), .35); border-radius: 8px; }
.atr-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--atr-brass-rgb), .55); }

.atr-empty {
  padding: 40px 0 44px;
  text-align: center;
  font-family: var(--atr-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--atr-ink-dim);
}

.atr-entry {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--atr-line);
}
.atr-entry:first-child { border-top: none; }

.atr-thumb {
  width: 128px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--atr-line);
  background: var(--atr-plate);
}

.atr-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.atr-name {
  min-width: 0;
  margin: 0;
  font-family: var(--atr-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--atr-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Read from frames · sure" — what the tagger saw, and how sure it is. */
.atr-reading {
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--atr-ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atr-reading b { font-weight: 600; color: var(--atr-ink-dim); }
.atr-reading .is-warn { color: var(--atr-ember); }
.atr-reading .is-match { color: var(--atr-brass-hi); }
.atr-reading .is-likely { color: var(--atr-brass); }
.atr-src {
  color: var(--atr-ink-dim);
  text-decoration: underline;
  text-decoration-color: rgba(var(--atr-brass-rgb), .45);
  text-underline-offset: 2px;
}
.atr-src:hover { color: var(--atr-brass-hi); text-decoration-color: var(--atr-brass); }
.atr-src:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 2px; border-radius: 2px; }
.atr-sure { font-variant: all-small-caps; letter-spacing: .06em; font-weight: 600; }
.atr-sure-high   { color: var(--atr-brass-hi); }
.atr-sure-medium { color: var(--atr-brass); }
.atr-sure-low    { color: var(--atr-ink-mute); }

.atr-skip {
  align-self: start;
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--atr-ink-dim);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s, opacity .15s;
}
.atr-skip:hover:not(:disabled) { color: var(--atr-ink); border-color: var(--atr-line-hi); }
.atr-skip:active:not(:disabled) { transform: translateY(1px); }
.atr-skip:disabled { opacity: .45; cursor: default; }
.atr-skip:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 1px; }

.atr-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* One labelled line per kind of suggestion: Rename / Stars / Tags. */
.atr-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.atr-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--atr-brass-dim);
}

/* ── rename ──────────────────────────────────────────────────────────────── */

.atr-rename {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.modal-panel .atr-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin: 0 -9px 0 -9px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.modal-panel .atr-tick:hover { background: rgba(var(--atr-brass-rgb), .08); }
.atr-rename input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--atr-brass);
  cursor: pointer;
}
.modal-panel .atr-rename input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--atr-line-hi);
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  color: var(--atr-ink);
  font-family: var(--atr-serif);
  font-size: 16px;
  text-overflow: ellipsis;
  transition: border-color .15s, opacity .15s;
}
.modal-panel .atr-rename input[type="text"]:focus { outline: none; border-color: var(--atr-brass); box-shadow: 0 0 0 3px rgba(var(--atr-brass-rgb), .14); }
.modal-panel .atr-rename.is-off input[type="text"] { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }

/* ── chips ───────────────────────────────────────────────────────────────── */

.atr-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 24px 2px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.atr-chips::-webkit-scrollbar { display: none; }

.atr-chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(var(--atr-brass-rgb), .38);
  border-radius: 8px;
  background: rgba(var(--atr-brass-rgb), .07);
  color: var(--atr-ink);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, opacity .2s;
}
.atr-chip:hover { border-color: var(--atr-brass); background: rgba(var(--atr-brass-rgb), .13); }
.atr-chip:active { transform: translateY(1px); }
.atr-chip:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 2px; }
/* The strike draws across instead of snapping on. */
.atr-chip::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; top: 50%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--atr-ease);
}
.atr-chip.off { opacity: .42; background: transparent; border-color: var(--atr-line); color: var(--atr-ink-dim); }
.atr-chip.off::after { transform: scaleX(1); }

.atr-chip-star { padding-left: 4px; border-color: rgba(var(--atr-ember-rgb), .34); background: rgba(var(--atr-ember-rgb), .06); }
.atr-chip-star:hover { border-color: rgba(var(--atr-ember-rgb), .7); background: rgba(var(--atr-ember-rgb), .11); }
.atr-face {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--atr-plate);
}
/* No picture yet: the star's initials on a brass plate, not a blank. */
.atr-initials {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(var(--atr-brass-rgb), .16);
  color: var(--atr-brass-hi);
  font-family: var(--atr-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.atr-new {
  font-style: normal;
  font-variant: all-small-caps;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: 12px;
  color: var(--atr-ember);
}
.atr-unlisted { color: var(--atr-ink-mute); }
.atr-chip-star:has(.atr-unlisted) { border-style: dashed; border-color: rgba(var(--atr-ember-rgb), .3); background: transparent; }
.atr-was { color: var(--atr-ink-mute); font-size: 12px; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.atr-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--atr-line-hi);
  background: rgba(0, 0, 0, .18);
}
.atr-count {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--atr-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atr-btn {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--atr-line-hi);
  border-radius: 10px;
  background: transparent;
  color: var(--atr-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.atr-btn:hover:not(:disabled) { border-color: var(--atr-brass); color: var(--atr-brass-hi); }
.atr-btn:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 2px; }
.atr-btn:disabled { opacity: .45; cursor: default; }
.atr-btn:active:not(:disabled) { transform: translateY(1px); }
/* While Apply / Dismiss is in flight the register is read-only. */
.atr-busy .atr-list { pointer-events: none; opacity: .7; transition: opacity .15s; }
.modal-panel.atr:focus { outline: none; }
.modal-panel.atr:focus-visible { outline: 2px solid rgba(var(--atr-brass-rgb), .5); outline-offset: -2px; }
.atr-btn-brass {
  border-color: var(--atr-brass);
  background: linear-gradient(180deg, var(--atr-brass-hi), var(--atr-brass));
  color: #20170c;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .5), 0 4px 14px rgba(var(--atr-brass-rgb), .18);
}
.atr-btn-brass:hover:not(:disabled) { color: #20170c; filter: brightness(1.06); }

/* ── the tagger's settings (#aitag-config) ───────────────────────────────── */

.modal-panel.atr.atr-config { width: min(520px, calc(100vw - 32px)); }
.atr-config-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Each way to start a run is one full-width row: what it does, then for
   which videos. Rows that do not apply right now are hidden, never greyed
   into a ragged grid. */
.atr-actions { display: flex; flex-direction: column; gap: 8px; }
.atr-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--atr-line-hi);
  border-radius: 10px;
  background: rgba(var(--atr-brass-rgb), .04);
  color: var(--atr-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.atr-action b { font-size: 14px; font-weight: 600; }
.atr-action span { font-size: 12px; color: var(--atr-ink-dim); }
.atr-action:hover:not(:disabled) { border-color: var(--atr-brass); background: rgba(var(--atr-brass-rgb), .10); }
.atr-action:active:not(:disabled) { transform: translateY(1px); }
.atr-action:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 2px; }
.atr-action:disabled { opacity: .45; cursor: default; }
#aitag-config-review { border-color: var(--atr-brass); background: linear-gradient(180deg, rgba(var(--atr-brass-rgb), .18), rgba(var(--atr-brass-rgb), .08)); }
#aitag-config-review b { color: var(--atr-brass-hi); }
.atr-action-stop { order: -2; border-color: rgba(var(--atr-ember-rgb), .45); }
/* What can be done right now goes first: Stop while running, else Review. */
#aitag-config-review { order: -1; }
.atr-action-stop b { color: var(--atr-ember); }

.atr-settings { display: flex; flex-direction: column; border-top: 1px solid var(--atr-line); }
.modal-panel .atr-setting {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--atr-line);
  color: var(--atr-ink);
  cursor: pointer;
}
.atr-setting > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atr-setting b { font-size: 14px; font-weight: 600; }
.atr-setting small { font-size: 12px; color: var(--atr-ink-dim); }
.atr-setting input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--atr-brass); cursor: pointer; flex: none; }
.modal-panel .atr-setting select {
  flex: none;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--atr-line-hi);
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  color: var(--atr-ink);
  font: inherit;
  font-size: 14px;
}
.modal-panel .atr-setting select:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 1px; }
.atr-last { margin: 0; font-size: 12px; color: var(--atr-ink-mute); }
/* "New videos": the standing setting under the one-off run's options. Its
   sub-options sit indented under the switch they belong to, shown only while
   it is on. */
.atr-newvids { display: flex; flex-direction: column; gap: 6px; }
.atr-newvids-opts { display: flex; flex-direction: column; border-left: 2px solid var(--atr-line); margin-left: 4px; padding-left: 12px; }
.atr-newvids-opts[hidden] { display: none; }

/* ── tidy stars (#star-tidy) ─────────────────────────────────────────────── */

.modal-panel .atr-tidy-group { margin: 0; padding: 2px 0 6px; } /* the generic .modal-panel section margin would open a gap */
.atr-tidy-group + .atr-tidy-group { border-top: 1px solid var(--atr-line); }
.modal-panel .atr-tidy-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--atr-brass);
}
.atr-tidy-h small { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--atr-ink-mute); }

.modal-panel .atr-tidy-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--atr-line);
  color: var(--atr-ink);
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.modal-panel .atr-tidy-h + .atr-tidy-row { border-top: none; }
.modal-panel .atr-tidy-row:hover { background: rgba(var(--atr-brass-rgb), .04); }
.atr-tidy-face { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--atr-plate); }
.atr-tidy-face.atr-initials { font-size: 14px; }
.atr-tidy-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atr-tidy-text b {
  font-family: var(--atr-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  /* Up to two lines: "Merge “Dylann Vox” into Skylar Vox" must keep both
     names on a phone; anything longer ends in an ellipsis (full text in the
     tooltip). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.atr-tidy-text small {
  font-size: 12px;
  color: var(--atr-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atr-tidy-row input[type="checkbox"] {
  justify-self: center;
  width: 20px; height: 20px;
  margin: 0;
  accent-color: var(--atr-brass);
  cursor: pointer;
}
.atr-tidy-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 3px; }
.modal-panel .atr-tidy-row.is-off { opacity: .5; }
/* Removing a star that is still on videos is the one irreversible choice
   here: it reads in ember, and starts unticked. */
.atr-tidy-row.is-risky .atr-tidy-text b { color: var(--atr-ember); }

/* ── motion: entries written in one after another ────────────────────────── */

@keyframes atrWrite {
  from { opacity: 0; transform: translateX(-10px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
html.atr-motion .atr-entry.is-new {
  animation: atrWrite .5s var(--atr-ease) both;
  animation-delay: calc(min(var(--i, 0), 8) * 55ms);
}
@media (prefers-reduced-motion: reduce) {
  .atr-chip::after { transition: none; }
}

/* ── phone: a sheet from the bottom ──────────────────────────────────────── */

@media (max-width: 640px) {
  .modal-panel.atr {
    top: auto; bottom: 0; left: 0;
    transform: none;
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
  .modal:not(.hidden) > .modal-panel.atr { animation: atrSheetIn .26s var(--atr-ease); }
  .atr-head { padding: 20px 60px 14px 16px; }
  .modal-panel .atr-title { font-size: 24px; }
  .atr-list { padding: 0 16px; }
  /* Thumb and title side by side, Skip on the right; the suggestions run the
     full width underneath so the chips get the room. */
  .atr-entry { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 2px 12px; }
  .atr-thumb { width: 96px; grid-column: 1; grid-row: 1 / span 2; }
  .atr-main { display: contents; }
  .atr-name { grid-column: 2; grid-row: 1; align-self: end; }
  .atr-reading { grid-column: 2 / span 2; grid-row: 2; align-self: start; }
  .atr-skip { grid-column: 3; grid-row: 1; height: 44px; padding: 0 4px 0 12px; }
  .atr-body { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
  .atr-line { grid-template-columns: 1fr; gap: 6px; }
  .atr-chip { height: 44px; }
  .atr-close { width: 44px; height: 44px; top: 14px; right: 12px; }
  .modal-panel .atr-tick { width: 44px; height: 44px; margin: 0 -13px 0 -13px; }
  .modal-panel .atr-rename input[type="text"] { height: 44px; }
  .atr-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .atr-count { display: none; }
  .atr-btn { flex: 1 1 0; height: 44px; }
  .modal-panel.atr.atr-config { width: 100%; }
  .atr-config-body { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .modal-panel .atr-setting select { height: 44px; }
}
@keyframes atrSheetIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .modal:not(.hidden) > .modal-panel.atr { animation: none; }
}

/* ══ Find sources for the library (autotagger.js, the sweep) ═══════════════
 *
 * Same register, three more pages: the tabs across the top of the review,
 * the Sources entries (a proposal per video: rename, performers, where it was
 * first posted), and the start sheet inside the tagger's settings. The
 * corner card reuses the tagger toast (styles.css .aitag-toast) with a brass
 * bar, so the two read as one family.
 *
 * MOTION. The tab marker slides between cells; tier headings rule their brass
 * line across as they arrive; an accepted entry is stamped (a brass wash) and
 * folds away, a skipped one just folds. Reduced motion: none of it, the
 * layout changes at once.
 */

/* ── tabs: one segmented control, three equal cells ──────────────────────── */

.atr-tabs {
  --i: 0;
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 24px 2px;
  padding: 3px;
  border: 1px solid var(--atr-line-hi);
  border-radius: 11px;
  background: rgba(0, 0, 0, .22);
}
/* The marker under the selected cell. */
.atr-tabs::before {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(var(--atr-brass-rgb), .22), rgba(var(--atr-brass-rgb), .10));
  box-shadow: inset 0 0 0 1px rgba(var(--atr-brass-rgb), .55);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform .32s var(--atr-ease);
}
.atr-tab {
  position: relative;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--atr-ink-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s;
}
.atr-tab-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atr-tab-n {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--atr-brass);
}
.atr-tab-n:empty { display: none; }
.atr-tab:hover { color: var(--atr-ink); }
.atr-tab[aria-selected="true"] { color: var(--atr-brass-hi); }
.atr-tab:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 1px; }

/* ── tier groups ─────────────────────────────────────────────────────────── */

.modal-panel .atr-tier-group { margin: 0; padding: 2px 0 4px; }
.atr-tier-group + .atr-tier-group { border-top: 1px solid var(--atr-line-hi); }
.modal-panel .atr-tier-h {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin: 14px 0 0;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--atr-brass);
}
.atr-tier-h span { flex: none; white-space: nowrap; }
.atr-tier-h small {
  min-width: 0;
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--atr-ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atr-tier-group[data-tier="identified"] .atr-tier-h { color: var(--atr-brass-hi); }
.atr-tier-group[data-tier="leads"] .atr-tier-h { color: var(--atr-brass-dim); }
/* Each heading rules its line in as the tab opens. */
.atr-tier-h::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--atr-brass-rgb), .5), transparent 80%);
  transform-origin: left;
}
html.atr-motion .atr-tier-h::after { animation: atrRule .7s var(--atr-ease) both; }
@keyframes atrRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.atr-tier-h + .atr-entry { border-top: none; }

/* ── a Sources entry ─────────────────────────────────────────────────────── */

.atr-row-acts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 96px;
}
.atr-row-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--atr-line-hi);
  border-radius: 8px;
  background: transparent;
  color: var(--atr-ink-dim);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, opacity .15s;
}
.atr-row-btn:hover:not(:disabled) { color: var(--atr-ink); border-color: var(--atr-brass); }
.atr-row-btn:active:not(:disabled) { transform: translateY(1px); }
.atr-row-btn:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 1px; }
.atr-row-btn:disabled { opacity: .5; cursor: default; }
.atr-row-accept {
  border-color: var(--atr-brass);
  background: linear-gradient(180deg, rgba(var(--atr-brass-rgb), .26), rgba(var(--atr-brass-rgb), .12));
  color: var(--atr-brass-hi);
  font-weight: 600;
}
.atr-row-accept:hover:not(:disabled) { color: #fff3d6; background: linear-gradient(180deg, rgba(var(--atr-brass-rgb), .36), rgba(var(--atr-brass-rgb), .18)); }
.atr-row-busy .atr-body { opacity: .6; pointer-events: none; transition: opacity .15s; }

/* Where it was first posted: favicon · site · uploader · length, one line. */
.atr-origin {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  color: var(--atr-ink-dim);
  font-size: 13px;
  text-decoration: none;
  border-radius: 6px;
}
a.atr-origin:hover .atr-origin-words b { color: var(--atr-brass-hi); text-decoration: underline; text-decoration-color: rgba(var(--atr-brass-rgb), .5); text-underline-offset: 2px; }
a.atr-origin:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: 2px; }
.atr-fav {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 5px;
  object-fit: contain;
  background: rgba(255, 255, 255, .06);
}
.atr-fav-plate {
  display: grid; place-items: center;
  background: rgba(var(--atr-brass-rgb), .16);
  color: var(--atr-brass-hi);
  font-family: var(--atr-serif);
  font-size: 11px;
  font-weight: 700;
}
.atr-fav-plate[hidden] { display: none; }
.atr-origin-words { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atr-origin-words b { font-weight: 600; color: var(--atr-ink); transition: color .15s; }

/* How a performer was found: credited, or a face only (starts off). */
.atr-how {
  font-style: normal;
  font-variant: all-small-caps;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--atr-brass-dim);
}
.atr-how-face { color: var(--atr-ink-mute); }
.atr-chip.is-read { cursor: default; }
.atr-chip.is-read:hover { border-color: rgba(var(--atr-ember-rgb), .34); background: rgba(var(--atr-ember-rgb), .06); }

/* "Show 40 more": the same button as the footer's, centred under the list. */
.modal-panel .atr-more { display: block; margin: 14px auto 18px; }

/* An empty tab: one sentence, and the way forward when there is one. */
.atr-empty p { margin: 0; }
.atr-empty .atr-btn { margin-top: 16px; font-family: inherit; font-style: normal; font-size: 14px; }

/* The count inside "Accept all Identified". */
.atr-btn-n {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(32, 23, 12, .18);
  font-variant-numeric: tabular-nums;
}
.atr-btn-n:empty { display: none; }

/* Accepted: a brass wash, then the entry folds away. Skipped: it just folds. */
@keyframes atrStamp {
  0%   { background: transparent; }
  30%  { background: rgba(var(--atr-brass-rgb), .14); }
  100% { background: rgba(var(--atr-brass-rgb), .06); }
}
@keyframes atrFold {
  from { max-height: var(--h, 240px); opacity: 1; }
  to   { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; }
}
html.atr-motion .atr-src-entry.is-stamped {
  overflow: hidden;
  animation: atrStamp .35s ease-out both, atrFold .38s var(--atr-ease) .32s both;
}
html.atr-motion .atr-src-entry.is-gone {
  overflow: hidden;
  animation: atrFold .32s var(--atr-ease) both;
}

/* ── the start sheet (#aitag-config, Find sources view) ──────────────────── */

.modal-panel.atr.atr-config.atr-config-sweep { width: min(600px, calc(100vw - 32px)); }

.modal-panel .atr-plan,
.modal-panel .atr-live { margin: 0; }
.atr-plan-lede {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  margin: 0 0 10px;
}
.atr-plan-n {
  flex: none;
  font-family: var(--atr-serif);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--atr-brass-hi);
  font-variant-numeric: tabular-nums;
}
.atr-plan-lede span {
  min-width: 0;
  font-family: var(--atr-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--atr-ink-dim);
}
.atr-plan[aria-busy="true"] .atr-plan-n { color: var(--atr-brass-dim); }

/* A two-column ledger: what, then how many, ruled between lines. */
.modal-panel .atr-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  border-top: 1px solid var(--atr-line);
}
.atr-ledger dt, .atr-ledger dd {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--atr-line);
  font-size: 14px;
  line-height: 1.3;
}
.atr-ledger dt { min-width: 0; color: var(--atr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atr-ledger dd { padding-left: 16px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--atr-ink); }
.atr-ledger .is-mute { color: var(--atr-ink-mute); font-weight: 400; }
.atr-ledger .is-match { color: var(--atr-brass-hi); }
.atr-ledger .is-likely { color: var(--atr-brass); }
.atr-ledger .is-warn { color: var(--atr-ember); }
.atr-plan-eta { margin: 10px 0 0; font-size: 13px; color: var(--atr-ink-dim); text-wrap: pretty; }

/* Scope: the plan's ledger doubles as the picker. One row per kind of
   video, its count on the right; the chosen row gets a brass rule down its
   left edge and brass words, not a radio dot. */
.atr-field-label {
  margin: 18px 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--atr-brass-dim);
}
.atr-scope { display: flex; flex-direction: column; border-top: 1px solid var(--atr-line); }
.atr-scope-row {
  position: relative;
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 4px 0 0;
  border: 0;
  border-bottom: 1px solid var(--atr-line);
  background: transparent;
  color: var(--atr-ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.atr-scope-mark {
  align-self: stretch;
  margin: 8px 0;
  border-radius: 2px;
  background: transparent;
  transform: scaleY(.3);
  transition: background .2s, transform .28s var(--atr-ease);
}
.atr-scope-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atr-scope-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.atr-scope-row:hover { background: rgba(var(--atr-brass-rgb), .05); }
.atr-scope-row[aria-checked="true"] { background: rgba(var(--atr-brass-rgb), .08); color: var(--atr-brass-hi); }
.atr-scope-row[aria-checked="true"] .atr-scope-mark { background: var(--atr-brass); transform: none; }
.atr-scope-row:focus-visible { outline: 2px solid var(--atr-brass); outline-offset: -2px; }

/* A run in progress, inside the sheet. */
.atr-live-bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.atr-live-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--atr-brass-dim), var(--atr-brass-hi));
  transition: width .5s var(--atr-ease);
}
.atr-live.is-paused .atr-live-bar i { background: linear-gradient(90deg, rgba(var(--atr-ember-rgb), .5), var(--atr-ember)); }
.atr-live-sub {
  margin: 10px 0 14px;
  min-height: 1.4em;
  font-size: 13px;
  color: var(--atr-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atr-live.is-paused .atr-live-sub { color: var(--atr-ember); }

.atr-sweep-foot .atr-count { text-align: right; }

/* The settings list's own rows for the sweep. */
.atr-action-review {
  order: -1;
  border-color: var(--atr-brass);
  background: linear-gradient(180deg, rgba(var(--atr-brass-rgb), .18), rgba(var(--atr-brass-rgb), .08));
}
.atr-action-review b { color: var(--atr-brass-hi); }
.atr-action-live { order: -2; border-color: var(--atr-brass); }
.atr-action-live b { color: var(--atr-brass-hi); }
.atr-action b, .atr-action span { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.atr-action-live span { white-space: nowrap; }

/* ── the corner card (#srcsweep-toast) ───────────────────────────────────── */

.srcsweep-toast { border-color: rgba(201, 162, 74, .38); }
.srcsweep-toast:hover { border-color: #c9a24a; }
.srcsweep-toast .aitag-toast-bar i { background: linear-gradient(90deg, #8a6f33, #e8c681); }
.srcsweep-toast .aitag-spin { border-top-color: #c9a24a; }
.srcsweep-toast.is-paused .aitag-toast-bar i { background: #ff9a3c; }
.srcsweep-toast.is-paused #srcsweep-sub { color: #ffb36b; }
/* Paused: two bars, the plainest pause sign there is. */
.srcsweep-pause {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: block;
  position: relative;
}
.srcsweep-pause::before, .srcsweep-pause::after {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px;
  width: 4px;
  border-radius: 1px;
  background: #ff9a3c;
}
.srcsweep-pause::before { left: 4px; }
.srcsweep-pause::after { right: 4px; }
.srcsweep-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  gap: 0 8px;
}
.srcsweep-counts dt {
  grid-row: 2;
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srcsweep-counts dd {
  grid-row: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.srcsweep-counts .is-match { color: #e8c681; }
.srcsweep-counts .is-likely { color: #c9a24a; }
.srcsweep-counts .is-mute { color: var(--text-mute); }
/* Stop / Pause / Review: one even row, and Review in brass, not the app's
   violet primary, so the card stays in the register's hand. */
.srcsweep-toast .aitag-toast-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin-top: 12px;
}
.srcsweep-toast .aitag-toast-actions .btn { min-height: 34px; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srcsweep-toast .btn.primary {
  border: 1px solid #c9a24a;
  background: linear-gradient(180deg, #e8c681, #c9a24a);
  color: #20170c;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .5);
}
.srcsweep-toast .btn.primary:hover { filter: brightness(1.06); }
@media (pointer: coarse) {
  .srcsweep-toast .aitag-toast-actions .btn { min-height: 44px; }
  .srcsweep-toast .aitag-toast-x { width: 44px; height: 44px; margin: -10px -8px -10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .atr-tabs::before, .atr-scope-mark, .atr-live-bar i { transition: none; }
}

/* ── phone ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .atr-tabs { margin: 12px 16px 0; }
  .atr-tab { height: 44px; padding: 0 6px; gap: 6px; }
  /* A Sources entry: thumb and title, the why under the title, suggestions
     full width, then Accept / Skip / Find source as one even row. */
  .atr-src-entry .atr-name { grid-column: 2 / -1; }
  .atr-row-acts {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    margin-top: 12px;
    min-width: 0;
  }
  .atr-row-acts:has(> :only-child) { --n: 1; }
  .atr-row-btn { height: 44px; }
  .atr-origin { min-height: 44px; }
  .atr-tier-h small { display: none; }
  .atr-plan-n { font-size: 38px; }
  .atr-ledger dt, .atr-ledger dd { padding: 11px 0; }
  .modal-panel.atr.atr-config.atr-config-sweep { width: 100%; }
}