/* ============================================================
   Post-webinar recording card. Temporary, index only. LIVE.
   PacSpace Brand Guide v1.0 compliant.

   Sibling of webinar-popup.css/.js (the live registration card),
   not a replacement. That card promoted a future date and retired
   itself at the event; this one promotes something already
   committed to the record, so it wears the record's own surface:
   the dark ground used everywhere else on this site for the
   Shared Record artifact and the agent activity stream
   (.artifact, .astream both sit on --dcard). "Dark is not a
   theme. It is the record's own surface." (Brand Guide section 3)

   Independent component. Own element id (#wbrPromo), own class
   prefix (.wbr), own sessionStorage key, so it can never collide
   with webinar-popup.js if both are ever present during a
   handoff window.

   Same geometry, motion, and dismissal behavior as the light
   card: 322px, square, one hairline border, no edge stripe,
   bottom right, session-scoped dismissal, self-retires past its
   own end date. Authored mobile first.
   ============================================================ */

.wbr {
  position: fixed;
  z-index: 900;
  left: 14px;
  right: 14px;
  bottom: 14px;
  max-width: 420px;
  margin-left: auto;

  display: block;

  background: var(--dcard, #141413);
  border: 1px solid var(--dborder, rgba(243, 241, 235, 0.12));
  border-radius: 0;
  color: var(--dink, #F3F1EB);
  font-family: var(--sans, Archivo, Helvetica, Arial, sans-serif);

  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 550ms cubic-bezier(.25, 1, .5, 1),
    transform 550ms cubic-bezier(.25, 1, .5, 1),
    border-color 0s;
}

.wbr[hidden] { display: none; }
.wbr[data-corner="left"] { margin-left: 0; margin-right: auto; }

.wbr.is-in {
  opacity: 1;
  transform: none;
}

.wbr.is-out {
  opacity: 0;
  transform: none;
  transition: opacity 120ms linear;
}

.wbr-body { padding: 14px 16px 16px; min-width: 0; }

/* ---- rail label + close ---- */

.wbr-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wbr-rail {
  display: block;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfaint, #8A877F);
  line-height: 1.4;
}

.wbr-close {
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfaint, #8A877F);
  padding: 16px 10px;
  margin: -16px -10px -16px 0;
}

.wbr-close:hover { color: var(--dink, #F3F1EB); }
.wbr-close:focus-visible {
  outline: 1.5px solid var(--dink, #F3F1EB);
  outline-offset: -1.5px;
}

/* ---- portrait + title ---- */

.wbr-main {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  cursor: pointer;
}

.wbr-shot {
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--dbg, #0D0D0C);
}

.wbr-shot img {
  --wbr-zoom: 1.3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(var(--wbr-zoom));
  transform-origin: 50% 18%;
  transition: transform 500ms cubic-bezier(.25, 1, .5, 1);
}

/* The one motion the guide sanctions on hover, unchanged on dark. */
.wbr:hover .wbr-shot img { --wbr-zoom: 1.3455; }

.wbr-title {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  width: fit-content;
}

.wbr:hover .wbr-title { border-bottom-color: var(--dink, #F3F1EB); }

.wbr-sub {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dmuted, #A5A29A);
  margin-top: 6px;
  text-wrap: pretty;
}

.wbr-by {
  margin-top: 10px;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dfaint, #8A877F);
}

/* ---- checkpoint row ----
   Replaces the light card's DATE / TIME grid. This card is not
   announcing a future slot, it is stating that a recording is
   committed and for how long it stays reachable, so it borrows
   the exact language and componentry the homepage Shared Record
   artifact already uses for that: a bordered mono pill in
   Display blue, the one on-dark accent Brand Guide section 3
   sanctions for "checkpoint badges." Nothing else in this card
   is blue. */

.wbr-checkpoint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--dborder, rgba(243, 241, 235, 0.12));
}

.wbr-pill {
  display: inline-block;
  border: 1px solid var(--dborder, rgba(243, 241, 235, 0.12));
  color: var(--recdisp, #96BCEA);
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  white-space: nowrap;
}

.wbr-window {
  font-size: 11.5px;
  color: var(--dmuted, #A5A29A);
  font-variant-numeric: tabular-nums;
}

/* ---- watch bar ----
   Inverted relationship from the light card's register bar: there
   the button was solid ink on card stock. Here the record surface's
   own "ink" is F3F1EB (Brand Guide section 3: "Record ink | #F3F1EB
   | Text on record surfaces"), so the solid block uses that, with
   the record ground itself as the button's text color. Still
   monochrome chrome, just the surface's own tone relationship,
   inverted to match. */

.wbr-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  margin-top: 14px;
  padding: 0 16px;
  background: var(--dink, #F3F1EB);
  color: var(--dbg, #0D0D0C);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.wbr-cta:hover { background: #FFFFFF; }
.wbr-cta:focus-visible {
  outline: 1.5px solid var(--dink, #F3F1EB);
  outline-offset: 2px;
}

.wbr-arrow {
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

/* ---- yields to anything modal ---- */

body.locked .wbr,
body.nav-open .wbr {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms linear, visibility 0s linear 120ms;
}

/* ---- desktop: the 322px card, bottom right ---- */

@media (min-width: 641px) {
  .wbr {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 322px;
  }
  .wbr[data-corner="left"] {
    left: 24px;
    right: auto;
  }
  .wbr-body { padding: 18px 20px 20px; }
  .wbr-main { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; margin-top: 14px; }
  .wbr-shot { width: 72px; height: 72px; }
  .wbr-title { font-size: 17.5px; }
  .wbr-sub { margin-top: 7px; }
  .wbr-by { margin-top: 12px; }
  .wbr-checkpoint { margin-top: 14px; padding-top: 13px; }
  .wbr-cta { margin-top: 16px; }
}

/* ---- reduced motion: committed and still ---- */

@media (prefers-reduced-motion: reduce) {
  .wbr,
  .wbr.is-out,
  .wbr-shot img,
  .wbr-title { transition: none; }
  .wbr { transform: none; }
  .wbr:hover .wbr-shot img { --wbr-zoom: 1.3; }
}