/* The viewer of something a session published (views/session.mjs assetPage, /s/<id>/a/<object>): the bar of the
   picture page (turbo.css .t-picture), the note under it, the thing as large as the page lets it be. Sober: what an
   agent made is shown as it is, nothing drawn around it. */
.t-picture.as-view { grid-template-rows: auto auto minmax(0, 1fr); }
.t-picture.as-view:not(:has(.as-note)) { grid-template-rows: auto minmax(0, 1fr); }
.as-view .t-picture-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-view .as-copy { flex: none; margin-left: auto; }
.as-note { margin: 0; padding: 0 18px 10px; color: var(--muted); font-size: var(--t-sm); text-wrap: pretty; }
.as-stage { min-height: 0; display: flex; flex-direction: column; padding: 0 14px 14px; }
.as-stage[data-type="image"], .as-stage[data-type="video"], .as-stage[data-type="audio"], .as-stage[data-type="file"] { align-items: center; justify-content: center; }
/* The published page gets the room: a sheet with a hairline, edge to edge on a phone. */
.as-frame-box { position: relative; flex: 1; min-height: 0; border-radius: var(--r-sm); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); }
.as-frame-box > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.as-wait { margin: auto; padding: var(--s-6); color: var(--faint); font-size: var(--t-sm); }
.as-media { display: block; max-width: 100%; max-height: 100%; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line); }
audio.as-media { width: min(100%, 560px); box-shadow: none; }
video.as-media { background: #000; }
.as-file, .as-problem { max-width: 560px; padding: var(--s-5) var(--s-6); border-radius: var(--r-sm); background: var(--surface); }
.as-file { display: grid; gap: var(--s-2); justify-items: start; box-shadow: 0 0 0 1px var(--line-strong); }
.as-file-name { font: 500 var(--t-md)/1.3 var(--mono); overflow-wrap: anywhere; }
.as-problem { margin: auto; border: 1.5px dashed var(--line-strong); color: var(--muted); }
.as-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-2); padding: 0 1.3em; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-weight: 600; text-decoration: none; }
@media (max-width: 600px) {
  .as-stage[data-type="html"] { padding-inline: 0; padding-bottom: 0; }
  .as-frame-box { border-radius: 0; box-shadow: none; }
}