/* camera chốn riêng, the result screen and the sticker editor. After Locket: the picture stays big in a rounded frame
   on the whole screen, the yellow round button in the middle shares it, save and take another sit on either side,
   stickers and the story card are chips under them. */

.sheet { width: 100%; max-width: 440px; height: 100dvh; max-height: 100dvh; margin: auto; padding: 0; border: 0; background: var(--bg); color: inherit; overflow: visible; }
.sheet::backdrop { background: var(--bg); }
.sheet__panel {
  display: flex; flex-direction: column; gap: var(--space-3); height: 100%;
  padding: max(6px, env(safe-area-inset-top)) var(--space-2) max(var(--space-3), env(safe-area-inset-bottom));
  overflow-y: auto;
}
@media (min-width: 600px) {
  .sheet { height: min(calc(100dvh - 32px), 880px); border-radius: 28px; box-shadow: 0 0 0 1px var(--line), 0 24px 60px oklch(8% 0.02 var(--hue) / 0.55); }
  .sheet::backdrop { background: oklch(8% 0.02 var(--hue) / 0.7); }
}
/* The close button reads after the title but sits on the left, where the back button of the camera was. */
.sheet__head { flex: none; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; }
.sheet__head h2 { flex: 1; text-align: center; font: 700 1.1rem / 1.2 var(--font-round); margin-right: 44px; }
.sheet__media {
  position: relative; flex: 1 1 auto; min-height: 160px; container-type: size; display: grid; place-items: center;
  overflow: hidden; touch-action: none;
}
.sheet__media img, .sheet__media video, .sheet__media canvas { display: block; max-width: 100cqw; max-height: 100cqh; width: auto; height: auto; object-fit: contain; border-radius: 32px; }
.sheet__actions { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; justify-items: center; gap: var(--space-3) var(--space-2); }
.act { display: grid; justify-items: center; gap: 6px; min-width: 72px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.act__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); color: var(--ink); transition: transform var(--dur-press) var(--ease-out), background var(--dur-state) var(--ease-out); }
.act:active .act__ico { transform: scale(0.94); }
.act:hover .act__ico { background: var(--line); }
/* The main action, "lưu": the big yellow round button in the middle; sharing and taking another are small beside it. */
.act--main { grid-column: 2; grid-row: 1; color: var(--ink); }
.act--main .act__ico { width: 80px; height: 80px; background: var(--lamp); color: var(--lamp-ink); box-shadow: 0 0 0 5px oklch(86% 0.13 88 / 0.25); }
.act--main:hover .act__ico { background: oklch(90% 0.12 88); }
.act--main .ico { width: 30px; height: 30px; stroke-width: 2.2; }
.act--retake { grid-column: 1; grid-row: 1; align-self: end; }
#act-share { grid-column: 3; grid-row: 1; align-self: end; }
/* Inside the Bàn học app (ui/app-exits.js). Opened for printing (/camera/#in) "In ở quán" is the big button, "lưu" takes
   the small place sharing had, and sharing steps aside. */
#act-save:not(.act--main) { grid-column: 3; grid-row: 1; align-self: end; }
.sheet.is-print-first #act-share { display: none; }
.sheet__actions > #app-exits { grid-row: 3; }
#chip-scan { text-decoration: none; }
.sheet.is-print-first #chip-scan { grid-column: 1 / -1; }
/* The colour kinds the picture can still be turned to, in a row under it. */
.regrade { flex: none; display: grid; gap: 2px; }
.regrade__label { font-size: var(--step--1); color: var(--ink-3); text-align: center; }
.regrade .chips { justify-content: safe center; }
.sheet__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sheet__actions > .sheet__row { grid-column: 1 / -1; grid-row: 2; width: 100%; }
.sheet__row--one { grid-template-columns: 1fr; }
.sheet__row .chip { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.2; } /* two long labels side by side wrap, never widen the screen */
.sheet .toast { bottom: auto; top: calc(max(6px, env(safe-area-inset-top)) + 54px); }
.sheet__note { flex: none; font-size: var(--step--1); color: var(--ink-3); min-height: 1.5em; text-align: center; }
.sheet__note:empty { display: none; }
#sheet-stop { text-wrap: balance; } /* why a video stopped: even lines, not a short tail like "đó nha." */

.editor { flex: none; display: grid; gap: var(--space-2); }
.editor__tray { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); }
.editor__tray::-webkit-scrollbar { display: none; }
.editor__tray button { flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; }
.editor__tray canvas { width: 46px; height: 46px; }
/* The text box takes what the button leaves. Its own width would be its 20 characters in the handwriting font, which a
   browser reckons from the font's widest glyph: 844px in Safari, wider than any phone, and the box and the screen with it
   would scroll sideways, "thêm chữ" and "xong" out of sight. */
.editor__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.editor__text input { min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 500 var(--step-0) var(--font-hand); }
.editor__text input::placeholder { color: var(--ink-3); }
.editor__hint { font-size: var(--step--1); color: var(--ink-3); container: editor-hint / inline-size; }
/* The hint never fits one line (453px of text, the editor at most 440px). It breaks after "xoay,", each half an
   inline-block, so the line under it is the whole "kéo xuống thùng rác để bỏ.", not "thùng rác để bỏ." or a lone "bỏ.";
   a half longer than the line (big text) breaks inside itself into even lines. Only while that second half fits a line:
   178px at the hint's 13.44px, 13.2em, and the query reads the hint's own width and size. When it does not (twice the
   size on a 320px phone) it is split anyway, and the break would only add a line and push "xong" out of sight, so the
   hint flows on as one sentence. */
@container editor-hint (min-width: 13.5em) { .editor__hint > span { display: inline-block; text-wrap: balance; } }
.sheet.is-editing .sheet__actions, .sheet.is-editing .sheet__note { display: none; }

/* A phone on its side: the result takes the whole screen like the camera, on the same columns (sizes on :root in
   camera.css): the picture centred on the left at full height, the heading at the top of the right column and the
   buttons at its bottom, where the shutter was, with the photobooth row just above them. The free space is a row of
   its own, at least as tall as anything in it. Rows are spaced by a margin on what shows, not by a gap, so the rows
   left empty (no stop note, no photobooth row, no editor) take no room. When the column is taller than the screen it
   scrolls and the picture stays where it is, the height of the screen. The picture's box stays a size container, as
   upright. */
@media (orientation: landscape) and (max-height: 500px) {
  .sheet { max-width: none; height: 100dvh; border-radius: 0; box-shadow: none; }
  .sheet__panel {
    display: grid; gap: 0; align-content: stretch;
    grid-template-columns: minmax(0, 1fr) var(--space-2) var(--controls-w);
    grid-template-rows: auto auto minmax(auto, 1fr) auto auto auto auto auto;
    padding: var(--space-2) var(--side-r) var(--side-b) var(--side-l);
  }
  .sheet__panel > * { grid-column: 3; }
  .sheet__panel > :not(.sheet__head, .sheet__media) { margin-top: var(--space-3); }
  .sheet__head { grid-row: 1; }
  #sheet-stop { grid-row: 2; }
  .sheet__media { grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; top: 0; height: var(--frame-h); min-height: 0; }
  .booth-out { grid-row: 4; }
  .regrade { grid-row: 5; }
  .sheet__actions { grid-row: 6; }
  .editor { grid-row: 7; }
  #sheet-note { grid-row: 8; }
  /* A row gets no more than the least its items may be when the column is full, and the 1.5em floor of a note is less
     than a note of two lines: the floor is the note itself, or its second line would spill out and add a scroll. */
  .sheet__note { min-height: auto; }
}
/* A photobooth result on a phone on its side less than 375px tall: the photobooth row and the buttons need the
   heading's row, so the heading is left to screen readers (as .sr) and the close button sits in the top left corner of
   the screen, level with the picture, on the dark beside it. It is placed on the dialog, so it stays put when the
   column scrolls. The picture keeps the 52px there clear (the 44px button and 8px): it is centred in its column when
   that leaves them anyway (a strip, the wallpaper), and as big as fits beside them otherwise (a 2×2 grid, the 10x15
   print), never under the button. The column starts at the top, level with both. */
@media (orientation: landscape) and (max-height: 374.98px) {
  .sheet:has(> .sheet__panel > #booth-out:not([hidden])) .sheet__head { position: absolute; top: var(--space-2); left: var(--side-l); z-index: 1; min-height: 0; }
  .sheet:has(> .sheet__panel > #booth-out:not([hidden])) .sheet__head h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sheet:has(> .sheet__panel > #booth-out:not([hidden])) :is(#sheet-stop, #sheet-stop:empty ~ #booth-out) { margin-top: 0; }
  .sheet:has(> .sheet__panel > #booth-out:not([hidden])) .sheet__media { grid-template-columns: minmax(52px, 1fr) auto minmax(0, 1fr); }
  .sheet:has(> .sheet__panel > #booth-out:not([hidden])) .sheet__media > :is(img, video, canvas) { grid-column: 2; max-width: calc(100cqw - 52px); }
}