/* The artifact page (#54).

   Two containers and only two, the same two the kit gives a persona inside the
   frame: a 76-character reading column, and a band up to 1280px that a figure
   may take whole. Everything the page knows about the artifact is printed at
   the top and the bottom of the document and scrolls away with it — there is
   no side column and no header band any more. */

.artifact-band {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 40px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 76ch) minmax(0, 1fr);
}
.artifact-band > * { grid-column: 2; min-width: 0; }
.artifact-band > .artifact-full { grid-column: 1 / -1; }
.artifact-col { grid-column: 2; }

@media (max-width: 860px) {
  .artifact-band { display: block; padding: 22px 16px 0; }
}

/* A figure in a Markdown artifact: the page renders the body itself, so the
   full-screen control is wired here rather than in the kit. Same promise —
   the whole figure goes, and it goes to the screen. */
.af-fig {
  border: 1px solid rgb(var(--c-edge));
  background: rgb(var(--c-pane));
  border-radius: 14px;
  padding: 10px 14px 12px;
  margin: 0 0 1.1em;
}
.af-fig-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.af-fig-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: rgb(var(--c-muted));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-fig-full {
  margin-left: auto;
  border: 1px solid rgb(var(--c-edge));
  background: rgb(var(--c-pane));
  color: rgb(var(--c-fg2));
  border-radius: 9px; padding: 4px 10px;
  font: inherit; font-size: 12px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
}
.af-fig-full:hover { border-color: rgb(var(--c-strong)); color: rgb(var(--c-fg)); }
.af-fig-full:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 1px; }
.af-fig-note { margin: 8px 0 0; font-size: 12px; color: rgb(var(--c-amber)); }

.af-fig:fullscreen {
  border: 0; border-radius: 0; margin: 0;
  background: rgb(var(--c-chat));
  padding: 18px clamp(16px, 3vw, 40px);
  display: flex; flex-direction: column;
}
.af-fig:fullscreen > :not(.af-fig-head):not(.af-fig-note) {
  flex: 1; min-height: 0; overflow: auto;
}
.af-fig:fullscreen img { max-height: 100%; width: auto; }
.af-fig:fullscreen .md-table { font-size: 1.05em; }

/* #64: the Send section at the end of an artifact lights up as it scrolls
   into view, so reaching the end reads as "now send". */
.send-card { transition: box-shadow .4s ease, transform .4s ease; }
.send-card.send-lit { animation: send-lit 2.2s ease-out 1; }
@keyframes send-lit {
  0%   { box-shadow: 0 0 0 0 rgb(var(--c-accent) / .55); transform: translateY(6px); }
  20%  { box-shadow: 0 0 0 10px rgb(var(--c-accent) / .30); transform: translateY(0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .send-card.send-lit { animation: none; box-shadow: 0 0 0 3px rgb(var(--c-accent) / .45); }
}

/* A thumb, not a pointer (#56 5.3) — the Markdown artifact's controls, the
   same promise the kit makes inside an HTML artifact's frame: under 768px
   every option, field and button is at least 44px tall, and a field's text is
   16px so an iPhone does not zoom in on it. Scoped to the document, so the
   page's own bar is left to artifact.html. */
@media (max-width: 767px) {
  .artifact-band button,
  .artifact-band input[type="text"],
  .artifact-band textarea { min-height: 44px; }
  .artifact-band input[type="text"],
  .artifact-band textarea { font-size: 16px; }
  .artifact-band label { min-height: 44px; align-items: center; font-size: 15px; }
  .artifact-band input[type="radio"],
  .artifact-band input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; flex: none; }
  .af-fig-full { min-height: 44px; padding: 8px 14px; font-size: 14px; }
}