/* overlays.css. Owner: package P2 (overlays). The in-page site viewer (#7)
   and the booking panel (#14). See BUILD-PLAN.md section P2.3. */

/* ── the viewer (#7) ── */
.viewer { position: fixed; inset: 0; z-index: 300; color: var(--ground); outline: none; }
.viewer[hidden] { display: none; }
.viewer-plate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ink-lift); border: 2px solid var(--white); }
.viewer-body { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ink); }
.viewer-bar { flex: none; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 12px; background: var(--ink); border-bottom: 2px solid var(--red); }
.viewer-back {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  font-family: var(--font); font-weight: 800; font-size: 0.9375rem; line-height: 1;
  background: var(--ink); color: var(--ground); border: 2px solid rgba(243, 242, 242, 0.4); cursor: pointer;
}
.viewer-back:hover, .viewer-back:focus-visible { background: var(--ink-lift); color: var(--white); border-color: var(--white); }
.viewer-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; line-height: 1.4; }
.viewer-name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); }
.viewer-ind { color: rgba(243, 242, 242, 0.78); }
.viewer-ind:not(:empty)::before { content: " \00B7  "; }
/* A concept's label (Conner, 2026-09-28), after the industry, the same way. */
.viewer-tag { color: rgba(243, 242, 242, 0.78); }
.viewer-tag::before { content: " \00B7  "; }
.viewer-newtab { flex: none; font-size: 0.875rem; font-weight: 800; color: var(--ground); text-underline-offset: 4px; }
.viewer-newtab:hover, .viewer-newtab:focus-visible { color: var(--red-300); }
.viewer-cta { flex: none; }
.viewer-cta:focus-visible { outline-offset: 0; }
.viewer-frame { flex: 1; display: block; width: 100%; min-height: 0; border: 0; background: var(--white); }
.viewer :focus-visible { outline-color: var(--white); }
@media (max-width: 640px) { .viewer-ind, .viewer-tag, .viewer-newtab { display: none; } }
@media (max-width: 420px) { .viewer-title { display: none; } .viewer-bar { justify-content: space-between; } }
:root[data-motion="full"] .viewer-body { opacity: 0; transition: opacity 250ms ease; }
:root[data-motion="full"] .viewer.is-shown .viewer-body { opacity: 1; }
:root[data-motion="full"] .viewer-frame { opacity: 0; transition: opacity 200ms ease; }
:root[data-motion="full"] .viewer.is-loaded .viewer-frame { opacity: 1; }

/* ── the booking panel (#14) ── */
.booking {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); background: rgba(32, 30, 29, 0.72); outline: none;
}
.booking[hidden] { display: none; }
.booking-panel { display: flex; flex-direction: column; width: min(1000px, 100%); height: min(780px, 100%); background: var(--white); border: 2px solid var(--ink); }
.booking-bar { flex: none; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 12px 0 20px; border-bottom: 2px solid var(--ink); }
.booking-title { margin-right: auto; font-weight: 800; font-size: 1rem; color: var(--ink); }
.booking-newtab { font-size: 0.875rem; font-weight: 800; color: var(--red-700); text-underline-offset: 4px; }
.booking-close {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px 14px;
  font-family: var(--font); font-weight: 800; font-size: 0.9375rem; line-height: 1;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); cursor: pointer;
}
.booking-close span { font-size: 1.4em; line-height: 0.7; }
.booking-close:hover, .booking-close:focus-visible { background: var(--ink); color: var(--white); }
.booking-frame { flex: 1; display: block; width: 100%; min-height: 0; border: 0; background: var(--white); }
@media (max-width: 700px), (max-height: 600px) {
  .booking { padding: 0; }
  .booking-panel { width: 100%; height: 100%; border: 0; }
}
:root[data-motion="full"] .booking { opacity: 0; transition: opacity 200ms ease; }
:root[data-motion="full"] .booking.is-shown { opacity: 1; }
:root[data-motion="full"] .booking-panel { transform: translateY(16px); transition: transform 300ms cubic-bezier(.2, .7, .2, 1); }
:root[data-motion="full"] .booking.is-shown .booking-panel { transform: none; }
.viewer-frame:focus-within, .booking-frame:focus-within { outline: 3px solid var(--red); outline-offset: -3px; }