/* panel.css: owned by the panel worker (065/004), design package §8 (What it handles). */

/*
  Calendly's pinned panel. Under .js a tall wrapper holds a sticky stage; the panel's box is
  always the expanded one (12px from every edge) and its expansion e is drawn with clip-path, so
  nothing inside it is laid out again while it grows. The slides are laid out once, for e = 1:
  across the expanded panel, from 24px under the tab bar to 24px above the panel's foot, so the
  MacBook is as large as the screen allows and its screens can be read. While the panel is
  short they are scaled down with it (transform only), so at e = 0 they fit the rails-wide,
  76svh panel under its tab bar.
  scenes/panel.js writes, on [data-panel]: --e, --tab, and on measuring --px and --py (the
  clip's insets at e = 0), --tb (the tab bar's foot) and --s0 (the slides' scale at e = 0). On
  the renewals view it writes --today-k, the cards' scale, so they fill the MacBook's screen
  (§8.3: "at a scale that fits the screen"). It sets aria-selected, tabindex and inert, .is-on
  on the active slide, .is-growing on the slides while e is between 0 and 1, and
  <html data-immersive> once the rising tab bar nears the nav.
  Without JS the tab bar is hidden and the five slides stack as plain blocks.

  Each slide is its copy and the MacBook (devices.css) in the desktop chrome, its screen a
  screenshot or, on Renewals, the phone kit's cards (phone.css) at the MacBook's scale.
*/

.today__intro .h2 {
  margin-block-end: 0;
}

/* ---------- Without JS: one panel, five stacked slides ---------- */
.today__panel {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--surface-1);
}
html:not(.js) .today__wrap {
  width: 100%;
  max-width: var(--rails);
  margin-inline: auto;
  padding: 3rem var(--gutter) var(--section-pad);
}
html:not(.js) .today__tabs {
  display: none;
}
.today__slide {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
html:not(.js) .today__slide + .today__slide {
  border-block-start: 1px solid var(--hairline);
}
.today__copy .h-slide {
  margin-block-end: 1rem;
}

/* ---------- With JS: the pinned scene ---------- */
.js .today__wrap {
  position: relative;
  height: 560vh;
  height: 560svh;
}
.js .today__stage {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
}
.js .today__panel {
  --e: 0;
  --tab: 0;
  --ext: 0px; /* the large viewport's reach below the small one (@supports below) */
  position: absolute;
  inset: 12px;
  border: 0;
  border-radius: 0;
  /* The hairline: the panel's own fill shows as a 1px ring around .today__bg. */
  background: color-mix(in srgb, var(--ivory) 10%, var(--night));
  clip-path: inset(
    calc(var(--py, 12vh) * (1 - var(--e))) calc(var(--px, 0px) * (1 - var(--e)))
      calc((var(--py, 12vh) + var(--ext)) * (1 - var(--e))) round
      calc(28px - 8px * var(--e))
  );
}
.js .today__bg {
  position: absolute;
  inset: 0;
  background: var(--surface-1);
  clip-path: inset(
    calc(var(--py, 12vh) * (1 - var(--e)) + 1px)
      calc(var(--px, 0px) * (1 - var(--e)) + 1px)
      calc((var(--py, 12vh) + var(--ext)) * (1 - var(--e)) + 1px) round
      calc(27px - 8px * var(--e))
  );
}
/* Where a toolbar can collapse (iOS Safari, Chrome on Android) the large viewport is taller
   than the small one. The stage and everything on it stay in the small viewport, so nothing
   sits under a toolbar, but the expanded panel's box reaches 12px above the large viewport's
   foot, so it meets the bottom with the toolbar collapsed too; at e = 0 the extra is clipped
   away and the short panel is the same as before. Both are static units: nothing resizes as
   the toolbar moves. Elsewhere the two are equal and --ext is 0. */
@supports (height: 1lvh) and (overflow: clip) {
  .js .today__stage {
    overflow: visible;
    overflow-x: clip; /* the panel's box reaches past the stage's foot */
  }
  .js .today__panel {
    --ext: calc(100lvh - 100svh);
    bottom: calc(12px - var(--ext));
  }
}
/* Compositing hints only while the scene is near (scenes/panel.js, .is-live). */
.js .today__wrap.is-live .today__panel {
  will-change: clip-path;
}

/* ---------- Tabs: a glass pill at the panel's top centre, a gold indicator under the active ----------
   max-content, because an absolute box at left: 50% may otherwise only shrink to the half of the
   panel to its right, and below about 1210px that squeezes five tabs over one another. */
.today__tabs {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 50%;
  display: grid;
  width: max-content;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 5px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-float);
  transform: translate(-50%, calc(var(--py, 0px) * (1 - var(--e))));
}
.today__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 7rem;
  height: 38px;
  padding-inline: 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ash);
  font: 500 0.875rem / 1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}
.today__tab:hover {
  color: var(--ivory);
}
.today__tab[aria-selected='true'] {
  color: var(--night);
}
.today__tab svg {
  flex: none;
  width: 17px;
  height: 17px;
}
.today__ind {
  position: absolute;
  top: 5px;
  bottom: 5px;
  inset-inline-start: 5px;
  width: calc((100% - 10px) / 5);
  border-radius: var(--radius-pill);
  background: var(--gold);
  transform: translateX(calc(var(--tab) * 100% * var(--dir)));
  transition: transform 0.5s var(--ease-out);
}

/* ---------- Slides: across the expanded panel, scaled with e ----------
   The box ends 24px above the panel's foot in the small viewport, however far the panel's box
   reaches (--ext). Its centre is also the centre of the room under the tab bar at e = 0 (the bar
   and the clip's foot both move in by --py), so scaling about it keeps the slide in that room
   at every e: at e = 0 by --s0, the smaller of the two insets' ratios. */
.js .today__slides {
  position: absolute;
  top: calc(var(--tb, 72px) + 24px);
  bottom: calc(24px + var(--ext));
  inset-inline: clamp(24px, 4vw, 64px);
  transform: scale(calc(var(--s0, 0.8) + (1 - var(--s0, 0.8)) * var(--e)));
}
.js .today__slides.is-growing {
  will-change: transform;
}
.js .today__slide {
  position: absolute;
  inset: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out),
    visibility 0s 0.5s;
}
.js .today__slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.today__slide:focus-visible {
  outline-offset: 6px;
  border-radius: 12px;
}
.js .today__media {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 0;
  container-type: size;
}
/* Wide: a narrower copy column, so the MacBook takes the room. */
@media (min-width: 1024px) and (orientation: landscape) {
  .js .today__slide {
    grid-template-columns: minmax(320px, 0.6fr) minmax(0, 1.4fr);
  }
}
/* The MacBook (3648 × 2204) as large as the cell allows. */
.js .today__mac {
  width: min(100cqw, 100cqh * 3648 / 2204);
}
@container (max-height: 80px) {
  .js .today__mac {
    display: none;
  }
}

/* ---------- Renewals (§8.3): the app's cards on the MacBook's screen ----------
   The phone kit's card anatomy (§6.5), sized in --ph-u as on the phone, but here --ph-u is a
   multiple of the MacBook's own unit (--mac-u, devices.css): --today-k, which scenes/panel.js
   sets so the header and the three cards fill the window's height. Without JS it stays 1.8,
   which fits the English. The view follows the page's direction; the macOS chrome around it
   stays left to right (§6.3). */
.today__renew {
  --today-k: 1.8;
  --ph-u: calc(var(--mac-u) * var(--today-k));
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: calc(13 * var(--ph-u));
  line-height: 1.3;
  text-align: start;
}
:root[dir='rtl'] .today__renew {
  direction: rtl;
}
.today__renew-col {
  width: calc(393 * var(--ph-u));
  max-width: 100%;
  margin-inline: auto;
  padding-block-end: calc(16 * var(--ph-u));
}
.today__renew .ph-head {
  padding-block-start: calc(22 * var(--ph-u));
}
.today__renew .ph-list {
  padding-block-start: calc(14 * var(--ph-u));
}

/* ---------- Medium and narrow: the copy stacks above the MacBook ---------- */
@media (max-width: 1023.98px), (orientation: portrait) {
  .today__slide {
    grid-template-columns: minmax(0, 1fr);
  }
  .js .today__slide {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .js .today__media {
    flex: 1 1 0;
  }
  .today__copy .h-slide {
    margin-block-end: 0.6rem;
  }
  .today__copy .para {
    font-size: 0.9688rem;
  }
}
@media (max-width: 720px) {
  .today__tab {
    min-width: 52px;
    height: 44px;
    padding-inline: 0;
  }
  .today__tab span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .today__tab svg {
    width: 19px;
    height: 19px;
  }
  /* The MacBook reaches 8px into the slide's 24px padding, so it is no narrower than when the
     slides kept the rails' width (326px at 390px). */
  .js .today__media {
    margin-inline: -8px;
  }
  .today__copy .eyebrow {
    margin-block-end: 0.5rem;
  }
  .today__copy .h-slide {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.8rem);
  }
  .today__copy .para {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}
/* A short screen: tighter spacing and the copy a step smaller, so the MacBook keeps its room. */
@media ((max-width: 1023.98px) or (orientation: portrait)) and (max-height: 700px) {
  .js .today__slide {
    gap: 0.75rem;
  }
  .today__copy .eyebrow {
    margin-block-end: 0.25rem;
  }
  .today__copy .h-slide {
    margin-block-end: 0.4rem;
    font-size: 1.375rem;
  }
  .today__copy .para {
    font-size: 0.875rem;
    line-height: 1.45;
  }
}