/*
  ── AP1 (D390): the designed poster card ─────────────────────────────────
  The drawn poster is a finished picture, so the card shows it as a sheet of
  paper put down on the answer: white, square-cut corners (2 px), a hairline
  and a long low shadow, at the paper's true shape (A4 and A3 share 1:1.414;
  landscape turns it). The printable card's frame is a CARD (12 px radius);
  this one is paper, which is the one thing that tells them apart at a glance.

  Beside it from a 700 px card up, under it otherwise (a phone, the 420 px
  popup, the Usage column), the panel: the printable card's cream well, in the
  same order of importance - what it is, Print (the one primary), the two
  downloads sharing a line, then "Change something" as one pill field with
  its Redraw button inside it. Buttons are the page's own (`.pcard-print`,
  `.pcard-download`, `.pcard-draw` in app.css "Controls"); this file only
  places them.

  While a draw runs, the exact draft sits under a white veil at 40 % with one
  calm line on it and a slow bar along the paper's foot - nothing spins.
  Tokens only; no colour of its own except the paper's white.
*/
.dposter {
  --dp-w: 400px;
  margin: 14px 0 4px; min-width: 0;
  container-type: inline-size;
}
.dposter[data-orientation="landscape"] { --dp-w: 600px; }
.dposter-desk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
@container (min-width: 700px) {
  .dposter-desk { grid-template-columns: minmax(0, var(--dp-w)) 280px; gap: 28px; align-items: start; }
}

/* The sheet. Under 700 px a portrait poster is held to 340 px so the panel starts within one screen. */
.dposter-frame {
  position: relative; overflow: hidden; box-sizing: border-box;
  width: 100%; max-width: var(--dp-w); aspect-ratio: 210 / 297;
  background: #fff; border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(29, 24, 19, 0.07),
    0 1px 2px rgba(29, 24, 19, 0.07),
    0 18px 34px -18px rgba(29, 24, 19, 0.42);
}
@container (max-width: 699px) {
  .dposter[data-orientation="portrait"] .dposter-frame { max-width: min(100%, 340px); }
}
/* The 420 px popup and a phone: 270 px, so the sheet, its title and Print share one screen (D205). */
@container (max-width: 419px) {
  .dposter[data-orientation="portrait"] .dposter-frame { max-width: min(100%, 270px); }
}
.dposter-img {
  display: block; width: 100%; height: 100%; object-fit: contain; background: #fff;
  transition: opacity 260ms ease-out, filter 260ms ease-out;
}
.dposter[data-busy="1"] .dposter-img { opacity: 0.4; filter: saturate(0.55); }

/* The drawing line: a quiet pill on the faded draft, and the bar along the paper's foot. */
.dposter-veil {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.dposter-veil-line {
  display: inline-flex; align-items: center; gap: 9px; margin: 0; max-width: 100%;
  padding: 9px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px -10px rgba(29, 24, 19, 0.35);
  font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); text-align: left;
}
.dposter-veil-line .dposter-glyph { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent-strong); animation: dposter-write 1.6s ease-in-out infinite; }
@keyframes dposter-write { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(2px, -1px) rotate(-8deg); } }
.dposter-veil-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden;
  background: var(--accent-wash);
}
.dposter-veil-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: var(--accent); border-radius: 3px;
  animation: dposter-bar 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* Polling gave up after 3 minutes: the line says when to look, so nothing on the paper keeps moving. */
.dposter[data-stalled="1"] .dposter-veil-bar { display: none; }
.dposter[data-stalled="1"] .dposter-veil-line .dposter-glyph { animation: none; }
@keyframes dposter-bar { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* A purged poster: the paper stays, empty, with the one line that says why. */
.dposter-gone {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--surface-2);
}
.dposter-gone[hidden] { display: none; }
.dposter-gone-text { margin: 0; max-width: 24ch; text-align: center; font-size: 13.5px; color: var(--muted); }

/* The panel: the printable card's cream well. */
.dposter-panel {
  min-width: 0; max-width: var(--dp-w);
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line);
}
/* Under the sheet it keeps the sheet's width, so the two read as one column. */
@container (max-width: 699px) {
  .dposter[data-orientation="portrait"] .dposter-panel { max-width: min(100%, 340px); }
}
@container (min-width: 700px) { .dposter-panel { max-width: none; } }
.dposter-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dposter-title {
  margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.3; color: var(--ink);
  overflow-wrap: anywhere;
}
.dposter-meta { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--muted); }

/* The fallback's reason: the page's warning (amber tint, deep amber rule). Failed: the page's red. */
.dposter-note, .dposter-failed {
  margin: 0; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink);
}
/* On the panel's cream the award tint all but vanishes, so the note sits on paper with the amber rule. */
.dposter-note { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--chip-award-fg); }
.dposter-failed { background: var(--danger-bg); border-left: 3px solid var(--danger); }

/* Print on its own line, the two downloads under it, half each - the printable card's arrangement. */
.dposter-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dposter-buttons[hidden] { display: none; }
.dposter-buttons > * { width: 100%; min-width: 0; padding: 0 12px; box-sizing: border-box; }
.dposter-buttons .dposter-print { grid-column: 1 / -1; }
.dposter-buttons .dposter-print[hidden] { display: none; }
/* One download alone takes the line rather than leaving a hole. */
.dposter-buttons .dposter-download:last-child:nth-child(2) { grid-column: 1 / -1; }
.dposter-download[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; transform: none; }
.dposter-retry { width: 100%; box-sizing: border-box; }

/* Change something: the label, one pill field with Redraw inside it, one line under it. */
.dposter-change {
  display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0;
  padding-top: 12px; border-top: 1px solid var(--line-strong);
}
.dposter-label {
  font-size: 11.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.dposter-field {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  min-height: calc(var(--ctl-h) + 6px); padding: 0 3px 0 14px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--ctl-radius);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.dposter-field:hover { border-color: var(--accent-soft); }
.dposter-field:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.dposter-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font: inherit; font-size: 14px; color: var(--ink);
  background: transparent; border: 0; outline: none; padding: 0;
  min-height: var(--ctl-h);
}
.dposter-input::placeholder { color: var(--muted); opacity: 0.75; }
.dposter-input:disabled { color: var(--muted); cursor: default; }
.dposter-field:has(.dposter-input:disabled) { background: var(--surface-2); border-color: var(--line); }
/* Redraw sits inside the pill, 6 px shorter than it, so the field reads as one control. Print stays the
   panel's one solid button: Redraw wears the coral wash (the page's pressed-toggle colours). */
.dposter-redraw {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ctl-h); padding: 0 16px; box-sizing: border-box;
  font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  color: var(--accent-strong); background: var(--accent-wash); border: 1px solid var(--accent-soft);
  border-radius: var(--ctl-radius); cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 80ms ease-out;
}
.dposter-redraw:hover:not(:disabled) { background: var(--you); border-color: var(--accent); }
.dposter-redraw:active:not(:disabled) { transform: translateY(1px); }
.dposter-redraw:focus-visible { outline: none; box-shadow: var(--ring); }
.dposter-redraw:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 640px), (pointer: coarse) {
  .dposter-input { font-size: 16px; } /* under 16 px iOS Safari zooms the page on focus */
}

.dposter-quiet { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.dposter-msg { margin: 0; font-size: 13.5px; color: var(--danger); }
.dposter-msg[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dposter-img, .dposter-field, .dposter-redraw { transition: none; }
  .dposter-veil-line .dposter-glyph { animation: none; }
  .dposter-veil-bar::after { animation: none; width: 40%; }
}

/* Print: the picture alone, filling the page the card asked for (`@page` is injected beside it). */
@media print {
  html.printing-card .dposter-print-page {
    position: relative; overflow: hidden; background: #fff;
    page-break-after: avoid; break-after: avoid;
  }
  html.printing-card .dposter-print-img { display: block; width: 100%; height: 100%; object-fit: contain; }
}