/* artifacts.js: the panel tab, the #/artifacts page (its head is app.css's
 * .page-head), a project's gallery, the viewer. Cards are one fill step off
 * the page, no border. */

.artifacts-page .art-grid { padding: 0; }
.chats .c-artifacts .c-open { color: var(--sv-ink-secondary); }
.chats .c-artifacts .icon { color: var(--sv-ink-tertiary); }
.art-row .pn-time { flex: none; }
button.art-all { justify-self: start; font-size: var(--ui-meta); color: var(--sv-ink-tertiary); }
.art-dialog {
  width: min(72rem, calc(100vw - 2 * var(--sv-space-4)));
  height: min(52rem, calc(100dvh - 2 * var(--sv-space-4)));
  max-width: none;
  max-height: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: calc(var(--sv-radius) * 1.5);
  box-shadow: var(--sv-shadow-lg);
}
.art-dialog:not([open]) { display: none; }
.art-dialog::backdrop { background: rgb(0 0 0 / 0.32); }
.art-head { display: flex; align-items: center; gap: var(--sv-space-2); padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-3) var(--sv-space-4); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.art-titles { flex: 1; min-width: 0; }
.art-title { margin: 0; font-size: var(--ui-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-sub { margin: 2px 0 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-actions { display: flex; gap: var(--sv-space-1); }
.art-actions .ghost, .art-back { gap: var(--sv-space-1); }
.art-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sv-space-3); padding: var(--sv-space-4); align-content: start; }
.art-card {
  display: grid;
  gap: var(--sv-space-1);
  align-content: start;
  min-height: 8.5rem;
  padding: var(--sv-space-3);
  text-align: left;
  font: inherit;
  color: var(--sv-ink);
  background: var(--sv-fill-2);
  border: 0;
  border-radius: calc(var(--sv-radius) * 1.5);
  cursor: pointer;
  transition: background var(--sv-dur-instant) var(--sv-ease-out);
}
.art-card:hover { background: var(--sv-fill-3); }
.art-card:active { background: var(--sv-fill-4); }
/* Kept HTML at 4× the card's width, scaled to fit (artifacts.js shot()). */
.art-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  margin: calc(-1 * var(--sv-space-3)) calc(-1 * var(--sv-space-3)) var(--sv-space-2);
  overflow: hidden;
  background: var(--sv-fill-2);
  border-radius: calc(var(--sv-radius) * 1.5) calc(var(--sv-radius) * 1.5) 0 0;
}
.art-shot iframe {
  position: absolute;
  inset: 0 auto auto 0;
  width: 400%;
  height: 400%;
  border: 0;
  background: var(--sv-white);
  transform: scale(0.25);
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sv-dur-fast) var(--sv-ease-out);
}
.art-shot.loaded iframe { opacity: 1; }
.art-type { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.art-card-title { font-weight: 600; font-size: var(--ui-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-excerpt { color: var(--sv-ink-secondary); font-size: var(--ui-meta); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.art-meta { margin-top: auto; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kept HTML in the viewer: a preview block (preview.js), as wide as the reading column. */
.art-html { width: 100%; max-width: var(--reading); margin: 0 auto; padding: var(--sv-space-4) var(--sv-space-4) var(--sv-space-6); }
/* HTML with scripts: a mark, not a frame (artifacts.js shot()). */
.art-shot-code { display: flex; align-items: center; justify-content: center; }
.art-shot-note { color: var(--sv-ink-tertiary); font: 500 var(--ui-meta) / 1.3 var(--sv-font-mono); }
/* A published page: not framed, opened on its own site. */
.art-published { max-width: var(--reading); margin: 0 auto; padding: var(--sv-space-6) var(--sv-space-5); color: var(--sv-ink-secondary); }
.art-published p { margin: 0 0 var(--sv-space-2); }
.art-published-host { font-family: var(--sv-font-mono); color: var(--sv-ink); overflow-wrap: anywhere; }
.art-published-open { display: inline-flex; align-items: center; gap: var(--sv-space-1); margin-top: var(--sv-space-2); color: var(--sv-ink); }
.art-doc { width: 100%; max-width: var(--reading); margin: 0 auto; padding: var(--sv-space-5) var(--sv-space-5) var(--sv-space-8); }
.art-mail { display: grid; grid-template-columns: auto 1fr; gap: var(--sv-space-1) var(--sv-space-3); margin: 0 0 var(--sv-space-4); padding-bottom: var(--sv-space-3); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); font-size: var(--ui-meta); }
.art-mail dt { color: var(--sv-ink-tertiary); }
.art-mail dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .art-dialog { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .art-head { padding-left: var(--sv-space-3); }
  .art-actions .label, .art-back .label { display: none; }
  .art-actions .art-chat .label { display: inline; } /* the one way to the chat that made it: named */
  .art-grid { grid-template-columns: 1fr; padding: var(--sv-space-3); }
  .art-doc { padding: var(--sv-space-4) var(--sv-space-4) var(--sv-space-8); }
}

/* artifactsearch.js: the rail search's Artifacts mode, one row an artifact. */
.chats .art-hits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.chats button.art-hit { display: grid; gap: 1px; padding-block: var(--sv-space-1); }
.art-hit-title { color: var(--sv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-hit-meta { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-hit-title mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--sv-accent) 26%, transparent); color: var(--sv-ink); }
.chats button.art-all { width: auto; min-height: 32px; margin-top: var(--sv-space-1); }
.artifacts-page .board-search-wrap[hidden] { display: none; }
.art-tools { display: flex; gap: var(--sv-space-2); align-items: flex-start; }
.art-tools[hidden] { display: none; }
.art-tools .board-search-wrap { flex: 1; min-width: 0; }
.art-sort { flex: none; min-height: 40px; }
.art-group {
  grid-column: 1 / -1;
  margin: var(--sv-space-4) 0 0;
  color: var(--sv-ink-tertiary);
  font-size: var(--ui-meta);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}
.art-group:first-child { margin-top: 0; }