/*
 * PSC v2 Phase 7.4 — Reusable PDF document viewer modal.
 *
 * Hosts an <embed type="application/pdf"> in a 90vw × 90vh card on desktop
 * and a fullscreen sheet on mobile. Backdrop, title bar with close, footer
 * hint, focus-visible ring. Token vocabulary only — no raw hex.
 *
 * Driven by static/workflow/js/psc_document_viewer.js. Toggled via the
 * `.is-open` class on `.psc-dv-backdrop` (added by the JS).
 */

/* ── Body lock when modal is open ──────────────────────────────────── */
html.psc-dv-locked,
html.psc-dv-locked body {
  overflow: hidden;
}

/* ── Backdrop ──────────────────────────────────────────────────────── */
.psc-dv-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bk-navy, #1a1a2e);
  background: color-mix(in srgb, var(--bk-navy, #1a1a2e) 60%, transparent);
  padding: var(--bk-space-4, 1rem);
}

.psc-dv-backdrop.is-open {
  display: flex;
}

/* ── Modal shell ───────────────────────────────────────────────────── */
.psc-dv-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90vw;
  height: 90vh;
  max-width: 1400px;
  background: var(--bk-card, #ffffff);
  border: 1px solid var(--bk-border, #e2e4e8);
  border-radius: var(--bk-radius-lg, 12px);
  box-shadow: var(--bk-shadow-lg, 0 24px 64px rgba(0, 0, 0, 0.28));
  overflow: hidden;
  outline: none;
}

.psc-dv-modal:focus-visible {
  box-shadow:
    var(--bk-shadow-lg, 0 24px 64px rgba(0, 0, 0, 0.28)),
    var(--bk-focus-ring, 0 0 0 3px rgba(194, 153, 84, 0.45));
}

/* ── Title bar ─────────────────────────────────────────────────────── */
.psc-dv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bk-space-3, 0.75rem);
  padding: var(--bk-space-3, 0.75rem) var(--bk-space-5, 1.25rem);
  background: var(--bk-parchment, #f8f8fa);
  border-bottom: 1px solid var(--bk-border, #e2e4e8);
  flex: 0 0 auto;
}

.psc-dv-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.psc-dv-title {
  margin: 0;
  font-family: var(--bk-font-serif, var(--bk-font-body, inherit));
  font-size: var(--bk-text-lg, 1.125rem);
  font-weight: 700;
  color: var(--bk-navy, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.psc-dv-subtitle {
  margin-top: 2px;
  font-size: var(--bk-text-sm, 0.85rem);
  color: var(--bk-text-muted, #72727e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Close button (44×44 hit target + focus-visible ring) ──────────── */
.psc-dv-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--bk-navy, #1a1a2e);
  border: 1px solid transparent;
  border-radius: var(--bk-radius-md, 8px);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.psc-dv-close:hover {
  background: var(--bk-gold-light, #f5eedd);
  border-color: var(--bk-gold, #c29954);
}

.psc-dv-close:active {
  background: var(--bk-gold, #c29954);
  color: var(--bk-card, #ffffff);
}

.psc-dv-close:focus-visible {
  outline: none;
  box-shadow: var(--bk-focus-ring, 0 0 0 3px rgba(194, 153, 84, 0.45));
}

/* ── Body — hosts the embed ────────────────────────────────────────── */
.psc-dv-body {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bk-parchment, #f8f8fa);
  position: relative;
}

.psc-dv-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bk-parchment, #f8f8fa);
}

.psc-dv-modal.is-loading .psc-dv-body::after {
  content: 'Loading document…';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bk-font-body, inherit);
  font-size: var(--bk-text-sm, 0.85rem);
  color: var(--bk-text-muted, #72727e);
  background: var(--bk-parchment, #f8f8fa);
  pointer-events: none;
}

.psc-dv-modal.is-error .psc-dv-body::after {
  content: 'The document could not be loaded.';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bk-font-body, inherit);
  font-size: var(--bk-text-sm, 0.85rem);
  color: var(--bk-status-rejected-text, var(--bk-text-muted, #72727e));
  background: var(--bk-parchment, #f8f8fa);
  pointer-events: none;
}

/* ── Footer hint ───────────────────────────────────────────────────── */
.psc-dv-foot {
  flex: 0 0 auto;
  padding: var(--bk-space-2, 0.5rem) var(--bk-space-5, 1.25rem);
  background: var(--bk-card, #ffffff);
  border-top: 1px solid var(--bk-border, #e2e4e8);
  font-size: var(--bk-text-xs, 0.75rem);
  color: var(--bk-text-muted, #72727e);
  text-align: center;
}

/* ── CTA button inside cinematic hero ──────────────────────────────── */
/*
 * Used by the "📄 View Invoice" button in _approval_cinematic_hero.html.
 * Aligned with the hero's gold accent vocabulary — never a primary action
 * (the verb row owns the single gold CTA), so this is a soft accent CTA.
 */
.ag-view-document-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-space-2, 0.5rem);
  min-height: 44px;
  padding: var(--bk-space-2, 0.5rem) var(--bk-space-5, 1.25rem);
  margin-top: var(--bk-space-4, 1rem);
  background: var(--bk-card, #ffffff);
  color: var(--bk-navy, #1a1a2e);
  border: 1.5px solid var(--bk-gold, #c29954);
  border-radius: var(--bk-radius-md, 8px);
  font-family: var(--bk-font-body, inherit);
  font-size: var(--bk-text-base, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.ag-view-document-cta:hover {
  background: var(--bk-gold-light, #f5eedd);
}

.ag-view-document-cta:active {
  background: var(--bk-gold, #c29954);
  color: var(--bk-card, #ffffff);
  transform: translateY(1px);
}

.ag-view-document-cta:focus-visible {
  outline: none;
  box-shadow: var(--bk-focus-ring, 0 0 0 3px rgba(194, 153, 84, 0.45));
}

.ag-view-document-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bk-card, #ffffff);
  color: var(--bk-text-muted, #72727e);
  border-color: var(--bk-border, #e2e4e8);
}

/* ── Mobile: fullscreen sheet ──────────────────────────────────────── */
@media (max-width: 768px) {
  .psc-dv-backdrop {
    padding: 0;
  }
  .psc-dv-modal {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    border: 0;
  }
  .psc-dv-title { font-size: var(--bk-text-base, 1rem); }
  .psc-dv-foot { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .psc-dv-close,
  .ag-view-document-cta {
    transition: none;
  }
  .ag-view-document-cta:active {
    transform: none;
  }
}