/* Page snapshots: the public page chrome (page_snapshots/base.html), the share button and its dialog.
 * Built on ezpz-ui.css tokens; every rule is scoped under .ps-* or .ezui .ps-*. */

/* ── Public page: the site header and footer (theme3/elements) around the snapshot ── */
body.ps-body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; line-height: 1.5;
  background: var(--ezui-bg); color: var(--ezui-text); color-scheme: dark;
  --ezui-sticky-top: var(--ez-h, 0px);
  --ezui-z-drawer: 10000; /* drawer opens over the sticky site header (z-index 9990) */
}
body.ps-body *, body.ps-body *::before, body.ps-body *::after { box-sizing: border-box; }
/* The site header expects the theme's Bootstrap reboot, which this page doesn't load; zero specificity so its own rules win. */
:where(body.ps-body .site-header) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(body.ps-body .site-header, body.ps-body .ezf) :where(a) { color: inherit; text-decoration: none; }
:where(body.ps-body .site-header, body.ps-body .ezf) :where(button) { font: inherit; }
:where(body.ps-body .site-header, body.ps-body .ezf) :where(img, svg) { vertical-align: middle; }
/* snapshot ribbon */
.ezui.ps-ribbon {
  border-bottom: 1px solid var(--ezui-border);
  background: linear-gradient(90deg, rgba(148,103,254,.14), rgba(148,103,254,.04) 60%, transparent), var(--ezui-surface);
}
.ezui .ps-ribbon__inner {
  max-width: 1600px; margin: 0 auto; padding: 10px 40px; min-height: 48px;
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
}
.ezui .ps-ribbon__badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--ezui-p3); background: var(--ezui-p1); color: var(--ezui-primary-text);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ezui .ps-ribbon__badge svg { width: 14px; height: 14px; flex: none; }
.ezui .ps-ribbon__badge--delay { border-color: rgba(224,161,0,.45); background: rgba(224,161,0,.12); color: var(--ezui-amber-text); }
.ezui .ps-ribbon__text { margin: 0; min-width: 0; font-size: 13.5px; color: var(--ezui-text-muted); }
.ezui .ps-ribbon__text strong { font-weight: 600; color: var(--ezui-text-bright); }
.ezui .ps-ribbon__link {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none;
  font-size: 13.5px; font-weight: 600; color: var(--ezui-primary-text); text-decoration: none;
}
.ezui .ps-ribbon__link svg { width: 14px; height: 14px; transition: transform .15s; }
.ezui .ps-ribbon__link:hover { color: var(--ezui-text-bright); }
.ezui .ps-ribbon__link:hover svg { transform: translateX(2px); }
.ezui .ps-ribbon__link:focus-visible { outline: none; box-shadow: var(--ezui-focus); border-radius: 4px; }

.ps-main { flex: 1 0 auto; width: 100%; max-width: 1600px; margin: 0 auto; padding: 24px 40px 56px; }

@media (max-width: 1280px) {
  .ezui .ps-ribbon__inner { padding: 10px 24px; }
  .ps-main { padding: 20px 24px 48px; }
}
@media (max-width: 760px) {
  .ezui .ps-ribbon__inner { padding: 10px 12px; }
  .ezui .ps-ribbon__link { margin-left: 0; }
  .ps-main { padding: 12px 10px 40px; }
}

/* ── Share button ── */
.ezui .ps-share__icon { width: 14px; height: 14px; flex: none; }
.ezui .ps-share[aria-busy="true"] { cursor: progress; opacity: .8; }
.ezui .ps-share[aria-busy="true"] .ps-share__icon { animation: ps-spin 1s linear infinite; }
@keyframes ps-spin { to { transform: rotate(360deg); } }

/* ── Dialog ── */
dialog.ezui.ps-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--ezui-border-2); border-radius: var(--ezui-radius);
  background: var(--ezui-surface); color: var(--ezui-text); box-shadow: var(--ezui-shadow-drawer); color-scheme: dark;
}
dialog.ezui.ps-dialog::backdrop { background: var(--ezui-backdrop); }
.ezui .ps-dialog__body { display: grid; gap: 14px; padding: 20px; }
.ezui .ps-dialog__title { font-size: 17px; font-weight: 700; }
.ezui .ps-dialog__row { display: flex; gap: 8px; }
.ezui .ps-url {
  flex: 1 1 auto; min-width: 0; height: var(--ezui-control-h); padding: 0 10px; border-radius: var(--ezui-radius-sm);
  border: 1px solid var(--ezui-border-2); background: var(--ezui-bg); color: var(--ezui-text-bright);
  font: 500 12.5px/1 var(--ezui-mono);
}
.ezui .ps-url:focus-visible { outline: none; box-shadow: var(--ezui-focus); }
.ezui .ps-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ezui .ps-dialog__actions .ps-dialog__close { margin-left: auto; }
.ezui .ps-revoke[data-armed="true"] { background: var(--ezui-down-wash); border-color: var(--ezui-down); color: var(--ezui-down-text); }
.ezui .ps-dialog__status { min-height: 1.2em; font-size: 12.5px; color: var(--ezui-text-muted); }
.ezui .ps-dialog__status[data-tone="error"] { color: var(--ezui-down-text); }
.ezui .ps-dialog__status[data-tone="ok"] { color: var(--ezui-up-text); }
@media (prefers-reduced-motion: reduce) { .ezui .ps-share[aria-busy="true"] .ps-share__icon { animation: none; } }