/* The store poster (store-poster.js): one printable A5 sheet per branch, the
   same drawing in the brand portal's Locations and the admin's brand card.
   Moved here from portal.css, unchanged, so the two can never draw it apart.
   The overlay is a direct child of body, which is what the print rules below
   rely on to print the sheet alone. */

/* ---------- Poster ----------
   On screen: a workbench holding the sheet. On paper: the sheet alone. All of
   the sheet's internal sizes are container-query units against its own width,
   so the screen preview and the printed A5 are the same drawing. */

body.pt-poster-open { overflow: hidden; }

.pt-poster {
  position: fixed;
  inset: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--tud-color-bg-canvas);
}

.pt-poster-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tud-space-4);
  padding: var(--tud-space-3) var(--tud-space-5);
  border-bottom: var(--tud-border-hairline) solid var(--tud-color-border-default);
  background: var(--tud-color-bg-surface);
  flex-wrap: wrap;
}

.pt-poster-note {
  margin: 0;
  color: var(--tud-color-text-muted);
  font-family: var(--tud-font-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pt-poster-stage {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: var(--tud-space-8) var(--tud-space-4);
}

/* Paper is paper in both themes: the ramp colors, never the theme aliases.
   Every size inside the sheet is a cqw against the sheet's own width, so the
   screen preview and the printed A5 are one drawing. The sheet's own box must
   stay clear of cqw: an element is never its own query container, so a length
   written here would silently resolve against the viewport instead. That is
   why the paper margin lives on the child as a margin.

   The single stretched grid row is what lets the child fill the paper minus
   that margin. Giving the child `height: 100%` as well as a margin is what
   pushed the footer off the bottom edge. */
.pt-sheet {
  container-type: inline-size;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: min(92vw, 460px);
  aspect-ratio: 148 / 210;
  background: var(--tud-color-ramp-neutral-0);
  color: var(--tud-color-ramp-neutral-950);
  box-shadow: var(--tud-elevation-e3);
}

.pt-sheet-wait {
  margin: var(--tud-space-8) auto;
  padding: 0 var(--tud-space-5);
  color: var(--tud-color-ramp-neutral-700);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.pt-sheet-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 4.2cqw;
  padding: 4.4cqw 5cqw 4cqw;
  border: 1cqw solid var(--tud-color-ramp-neutral-950);
  border-radius: 3.4cqw;
  /* The last defence for a branch name nobody predicted: it crops inside the
     drawn rule rather than bleeding onto the paper's edge. */
  overflow: hidden;
}

.pt-sheet-brand {
  margin: 0;
  font-family: var(--tud-font-secondary);
  font-size: 3.6cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pt-sheet-head {
  margin: 2.4cqw 0 0;
  font-family: var(--tud-font-primary);
  font-size: 12cqw;
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.pt-sheet-dot { color: var(--tud-color-accent-base); }

/* The QR and the reader share a baseline; the row is the poster's centre of
   gravity and takes whatever slack the sheet has left. */
.pt-sheet-qr-row { display: flex; align-items: flex-end; gap: 3.4cqw; margin-top: 4.4cqw; }

.pt-sheet-qr {
  flex: 0 0 auto;
  width: 39cqw;
  padding: 2cqw;
  border: 1cqw solid var(--tud-color-ramp-neutral-950);
  border-radius: 2.4cqw;
  background: var(--tud-color-ramp-neutral-0);
}

.pt-sheet-qr svg { display: block; width: 100%; height: auto; }

.pt-sheet-doodle { display: block; width: 27cqw; height: auto; margin-left: auto; }

.pt-sheet-how {
  margin: 4cqw 0 0;
  max-width: 30ch;
  font-size: 4.2cqw;
  line-height: 1.38;
  font-weight: 600;
}

.pt-sheet-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3cqw;
  margin-top: auto;
  padding-top: 3cqw;
  border-top: 0.55cqw solid var(--tud-color-ramp-neutral-950);
}

/* Two lines is the branch line's budget. A merchant who names a branch after
   its whole postal address gets the front of it, not a poster that reflows. */
.pt-sheet-loc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  min-width: 0;
  font-family: var(--tud-font-secondary);
  font-size: 4.2cqw;
  line-height: 1.25;
  font-weight: 700;
  overflow: hidden;
  overflow-wrap: break-word;
}

.pt-sheet-site { margin: 0; flex: 0 0 auto; font-size: 3.6cqw; font-weight: 700; color: var(--tud-color-accent-text-on-light); }

@media (max-width: 620px) {
  /* The poster bar is a toolbar, not a caption: the two controls stay on one
     line at thumb size and the sheet label steps out of their way. */
  .pt-poster-bar { gap: var(--tud-space-3); }
  .pt-poster-note { order: -1; width: 100%; }
  .pt-poster-stage { padding: var(--tud-space-5) var(--tud-space-3); }
}

/* ---------- Print ----------
   Only the poster prints, and only while it is open: a merchant who hits print
   anywhere else in the portal or the admin gets the page they are looking at. The sheet is
   sized in millimetres here rather than viewport units, so the container-query
   units inside it resolve against a real A5 and the paper is the same drawing
   as the preview. */

@media print {
  @page { size: A5 portrait; margin: 0; }

  body.pt-poster-open { background: var(--tud-color-ramp-neutral-0); }
  body.pt-poster-open > *:not(.pt-poster) { display: none; }

  body.pt-poster-open .pt-poster {
    position: static;
    display: block;
    background: none;
  }

  body.pt-poster-open .pt-poster-bar { display: none; }

  body.pt-poster-open .pt-poster-stage {
    display: block;
    padding: 0;
    overflow: visible;
  }

  /* Ink the merchant paid for: the QR, the rule and the accent dot are the
     poster, not decoration, so they must survive "background graphics off". */
  body.pt-poster-open .pt-sheet {
    width: 148mm;
    height: 210mm;
    aspect-ratio: auto;
    box-shadow: none;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.pt-poster-open .pt-sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}