/* THE CARD'S IMAGE AREA for every artifact (card redesign, COO hands
   2026-10-12). templates/cards/_artifact_thumb.html. The figure fills the
   width it is given and keeps its ratio; everything inside is clipped to
   it. Colours come from the site tokens with quiet fallbacks; the audio and
   video faces are dark like the versions card (Steven's screenshot 21). */
.at {
  --at-ink: var(--text-primary, #1f2433);
  --at-soft: var(--text-secondary, #5b6375);
  --at-paper: var(--surface-primary, #fff);
  --at-tint: var(--color-gray-100, #f1f3f7);
  --at-line: var(--color-gray-200, #e5e7eb);
  --at-purple: var(--highlight-purple, #4a2bbf);
  --at-live: #12b5c2;
  --at-night: #07081a;
  --at-radius: 18px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--at-radius);
  background: var(--at-tint);
  color: var(--at-ink);
  font-family: 'Plus Jakarta Sans', var(--interface-font, var(--font-sans, system-ui, sans-serif));
  isolation: isolate;
}
.at--r-square { aspect-ratio: 1 / 1; }
.at--r-wide { aspect-ratio: 16 / 9; }
.at--r-tall { aspect-ratio: 3 / 4; }
.at > * { position: absolute; inset: 0; }
.at > .at-badge { inset: auto; top: 14px; left: 14px; }

.at__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.at-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(7, 8, 26, .72);
  color: #fff;
  font: 600 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* play button, shared by audio and video */
.at-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(7, 8, 26, .62);
  border: 1.5px solid rgba(255, 255, 255, .7);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}
.at-play:focus-visible { outline: 3px solid var(--at-live); outline-offset: 3px; }
.at-play--still { cursor: default; }
.at-play__glyph { width: 28px; height: 28px; fill: currentColor; }
.at-play__pause { display: none; }
.at-play[aria-pressed="true"] .at-play__tri { display: none; }
.at-play[aria-pressed="true"] .at-play__pause { display: inline; }

/* waveform */
.at-wave { display: block; width: 100%; height: 28px; }
.at-wave__bar { fill: rgba(255, 255, 255, .45); }
.at-wave__bar.is-played { fill: var(--at-live); }

/* AUDIO: cover art, play, waveform */
.at--audio { background: var(--at-night); color: #fff; }
.at-audio__art { position: absolute; inset: 0; }
.at-audio__disc,
.at-audio__disc > .agent-art,
.at-audio__disc svg { display: block; width: 100%; height: 100%; }
.at-audio__fallback {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 45%, rgba(91, 61, 245, .9) 0 14%, transparent 15%),
    repeating-radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .05) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 50% 45%, #1b1446 0 45%, var(--at-night) 70%);
}
.at-audio__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 26, .55) 0%, transparent 32%, transparent 55%, rgba(7, 8, 26, .82) 100%);
}
.at-audio__words {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 26px;
}
.at-audio__label { font: 800 22px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.01em; }
.at-audio__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.at-audio__by { font-size: 13px; opacity: .8; }
.at-audio__bar {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.at-audio__bar .at-wave { flex: 1; }
.at-audio__time { flex: none; font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; opacity: .85; }
.at-audio__el { display: none; }
.at--audio .at-badge { display: none; }

/* PDF: the first page on a tinted desk */
.at--pdf { background: linear-gradient(160deg, #eef0f6, #dfe3ee); }
.at-sheet { display: grid; place-items: center; padding: 14px 14px 0; }
.at-sheet__page,
.at-sheet__blank {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 62%;
  max-width: 260px;
  height: calc(100% - 16px);
  transform: translateX(-50%);
  object-fit: cover;
  object-position: top center;
  border-radius: 4px 4px 0 0;
  background: #fff;
  box-shadow: 0 6px 22px rgba(20, 24, 40, .18), 0 0 0 1px rgba(20, 24, 40, .06);
}
.at-sheet__page { z-index: 2; }
.at-sheet__blank { z-index: 1; display: flex; align-items: flex-start; padding: 22px 16px; }
.at-sheet__blank-title { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--at-ink); }
.at [data-at-fallback].is-broken { display: none; }
.at-audio__cover { position: absolute; inset: 0; }
.at-tile__art > .at-tile__img { position: absolute; inset: 0; }
.at-tile__glyph--under { position: absolute; }
.at-tile__glyph--n { font: 800 20px/1 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--at-purple); }

/* DOCUMENT: a styled excerpt that fades out */
.at--document { background: linear-gradient(160deg, #f6f3ea, #ece6d6); }
.at-doc { padding: 14px 14px 0; }
.at-doc__paper {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 0;
  overflow: hidden;
  padding: 34px 16px 0;
  border-radius: 10px 10px 0 0;
  background: #fffdf8;
  box-shadow: 0 4px 18px rgba(60, 48, 20, .12);
}
.at-doc__paper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0), #fffdf8 85%);
}
.at-doc__title { margin: 0 0 6px; font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.at-doc__h { margin: 8px 0 2px; font-weight: 700; font-size: 14px; line-height: 1.3; }
.at-doc__p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--at-soft); font-family: 'Source Serif 4', Georgia, serif; }
.at-doc__li { margin: 0 0 4px; padding-left: 14px; position: relative; font-size: 13px; line-height: 1.4; color: var(--at-soft); }
.at-doc__li::before { content: ''; position: absolute; left: 3px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--at-purple); }
.at-doc__day { margin: 8px 0 2px; font: 600 11px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--at-purple); }

/* VIDEO: a poster frame */
.at--video { background: var(--at-night); color: #fff; }
.at-video__fallback { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, #2a2160, var(--at-night) 70%); }
.at-video__title {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(7, 8, 26, .85));
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

/* LINK: a preview card */
.at--link { background: linear-gradient(160deg, #eaf3ff, #dce8fb); }
.at-link__shot { position: absolute; inset: 0 0 38% 0; display: grid; place-items: center; overflow: hidden; }
.at-link__mono {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #fff;
  color: var(--at-purple);
  font-weight: 800;
  font-size: 30px;
  box-shadow: 0 4px 14px rgba(20, 40, 90, .14);
}
.at-link__card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  background: #fff;
  border-top: 1px solid var(--at-line);
}
.at-link__host { font: 500 11px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--at-soft); text-transform: lowercase; }
.at-link__title { font-weight: 700; font-size: 15px; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.at-link__sum { font-size: 12px; line-height: 1.35; color: var(--at-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* TEXT: the answer, set large */
.at--text { background: linear-gradient(160deg, #f0edff, #e3ddff); }
.at-text { margin: 0; display: flex; align-items: center; padding: 40px 20px 18px; }
.at-text::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  right: 16px;
  font: 800 64px/1 Georgia, serif;
  color: var(--at-purple);
  opacity: .35;
}
.at-text__body {
  margin: 0;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -.005em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/* CHOICES: stacked tiles, the versions card's rows */
.at--choices { background: var(--at-paper); }
.at-choices { display: flex; flex-direction: column; padding: 12px; gap: 8px; }
.at-choices__prompt { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.3; }
.at-choices__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }
.at-tile {
  flex: 1;
  min-height: 0;
  max-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--at-line);
  border-radius: 14px;
  background: var(--at-tint);
}
.at-tile__art {
  position: relative;
  flex: none;
  height: 100%;
  aspect-ratio: 1 / 1;
  max-height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #dfe3ee;
}
.at-tile__art svg:not(.at-play__glyph),
.at-tile__art .agent-art { display: block; width: 100%; height: 100%; }
.at-tile__img { width: 100%; height: 100%; object-fit: cover; }
.at-tile__img--page { object-position: top; }
.at-tile__glyph { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--at-soft); }
.at-tile__play {
  position: absolute;
  inset: 22%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(7, 8, 26, .6);
  color: #fff;
}
.at-tile__play .at-play__glyph { width: 60%; height: 60%; }
.at-tile__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.at-tile__label { font-weight: 800; font-size: 16px; line-height: 1.1; }
.at-tile__sub { font-size: 12px; line-height: 1.3; color: var(--at-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.at-wave--tile { height: 18px; }
.at-wave--tile .at-wave__bar { fill: #c9ced9; }
.at-tile__radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #a3aab8; }
.at-choices__more { margin: 0; font-size: 12px; color: var(--at-soft); text-align: right; }

/* FILE: the extension, large */
.at--file { background: linear-gradient(160deg, #eef1f4, #e1e6ec); }
.at-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; }
.at-file__ext {
  display: grid;
  place-items: center;
  min-width: 78px;
  height: 96px;
  padding: 0 10px;
  border-radius: 8px 22px 8px 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 24, 40, .12);
  font: 800 18px/1 'JetBrains Mono', ui-monospace, monospace;
  color: var(--at-purple);
}
.at-file__name { max-width: 100%; font-weight: 700; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.at-file__size { font-size: 12px; color: var(--at-soft); }

/* EMPTY: the fill slot */
.at--empty { background: var(--at-tint); }
.at-empty__art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(74, 43, 191, .10), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(18, 181, 194, .10), transparent 55%),
    repeating-linear-gradient(135deg, rgba(31, 36, 51, .035) 0 8px, transparent 8px 16px);
}
.at-empty__line {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--at-soft);
}

@media (prefers-reduced-motion: reduce) {
  .at-play { backdrop-filter: none; }
}

/* ONE VERSION AS A ROW (ratio='row'; the versions card, Steven's screenshot
   21, LAYOUT_CARDS step 8): a light row, the small square on the left with
   the play button on it, the label and time, the waveform, the radio. */
.at.at--row {
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 18px;
  background: #f1f4f8;
  border: 1.5px solid #e3e7ee;
  color: #1f2433;
}
.at.at--row > * { position: static; }
.at-row {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr 30px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 10px;
  cursor: pointer;
}
.at-row__art {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--at-night);
}
.at-row__art > .at-row__disc,
.at-row__art > .at-audio__fallback,
.at-row__art > .at-row__img { position: absolute; inset: 0; }
.at-row__disc > .agent-art, .at-row__disc svg { display: block; width: 100%; height: 100%; }
.at-row__img.is-broken { display: none; }
.at-row__glyph {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: #e6e9ef; color: #3b4250;
  font: 700 14px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em;
}
.at-play.at-play--row {
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-width: 1.5px;
}
.at-play--row .at-play__glyph { width: 20px; height: 20px; }
.at-row__words { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.at-row__head { display: flex; align-items: baseline; gap: 10px; }
.at-row__label { font: 800 26px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.02em; color: #262b36; }
.at-row__time { font: 500 15px/1 'JetBrains Mono', ui-monospace, monospace; color: #5b6372; }
.at-wave--row { height: 34px; }
.at-wave--row .at-wave__bar { fill: #d3d7de; }
.at-wave--row .at-wave__bar.is-played { fill: #7b6cf6; }
.at-row__sub { font-size: 14px; line-height: 1.3; color: #5b6372; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-row__open { font-size: 14px; font-weight: 600; color: #4a2bbf; text-decoration: underline; text-underline-offset: 3px; }
.at-row__radio {
  appearance: none; -webkit-appearance: none;
  justify-self: end; align-self: start;
  width: 28px; height: 28px; margin: 6px 0 0;
  border: 2px solid #9aa1ad; border-radius: 50%;
  background: #fff; cursor: pointer;
}
.at-row__radio:checked { border-color: #7b6cf6; box-shadow: inset 0 0 0 5px #fff; background: #7b6cf6; }
.at-row__radio:focus-visible { outline: 3px solid #7b6cf6; outline-offset: 2px; }
.at.at--row:has(.at-row__radio:checked) { border-color: #7b6cf6; background: #f4f2ff; }
@media (max-width: 360px) {
  .at-row { grid-template-columns: 64px 1fr 28px; gap: 10px; }
  .at-row__art { width: 64px; height: 64px; }
  .at-row__label { font-size: 22px; }
}