/* ===========================================================================
   EMAAR — Instant Call
   instant-call.css — the header entry point and its full-screen experience.

   Linked on every page that carries the site header, and those pages do not
   share a stylesheet: the 45 interior pages load places.css, index.html does
   not. So the house tokens cannot be assumed — every one is read through a
   var() whose fallback is places.css's own literal, exactly as mobile-nav.css
   solves the same problem. Where places.css is present the component tracks
   any future token change; where it is absent it renders identically.

   Two rules this file will not break
   ----------------------------------
   · Nothing in the header changes size on hover. The label is always set, so
     no pointer movement can reflow the navigation beside it.
   · 2px is the only radius in this build, and grey is the only hover wash.
   =========================================================================== */

/* ————————————————————— 1 · the header entry point —————————————————————

   Instant Call is a third utility beside SEARCH and WHATSAPP and is built
   from the same class, so it inherits their metrics, their type and their
   44px target rather than restating them. Only the icon is its own. */

.em-hdr__call svg,
.site-header__call svg { width: 14px; height: 14px; display: block; flex: none; }

.em-hdr__call, .site-header__call { white-space: nowrap; }

.site-header__call {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 4px; min-height: 2.75rem;
  font-family: var(--font-nav), "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: inherit; text-decoration: none;
  transition: opacity .3s ease, color .5s ease;
}

/* The refined hover, and the reason the label is permanent.

   Both bars shipped `opacity: .65` on hover — the control RECEDES when you
   reach for it, which reads as a disabled state rather than a premium one.
   The utilities now rest a step back and arrive at full ink, with a hairline
   drawn under the word from the left on the house's own menu curve. It is the
   navigation's idiom at half the weight: under the label only, one pixel, so
   the utility answers a pointer without competing with the nav above it.

   Applied to the utilities together. A call control that hovered
   differently from the WhatsApp control beside it would be the actual bug.

   The header Search ([data-site-search], both bars) is the global site-search
   trigger and takes the same idiom — rest .82, full ink and the hairline on
   hover — from ONE definition in global-search.css, so it is excluded here.
   The exclusion is written :where(:not(…)) so it adds no specificity: every
   other rule in this file (the Instant Call tooltip's `content: none` above
   all) still wins exactly as it did. */
.em-hdr__util:where(:not([data-site-search])),
.site-header__wa,
.site-header__call { opacity: .82; position: relative; }

.em-hdr__util:where(:not([data-site-search])):hover,
.em-hdr__util:where(:not([data-site-search])):focus-visible,
.site-header__wa:hover, .site-header__wa:focus-visible,
.site-header__call:hover, .site-header__call:focus-visible { opacity: 1; }

.em-hdr__util-l,
.site-header__wa > span,
.site-header__call > span { position: relative; }

:where(.em-hdr__util:not([data-site-search])) .em-hdr__util-l::after,
.site-header__wa > span::after,
.site-header__call > span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--em-e-soft, cubic-bezier(.22,.61,.24,1));
}
.em-hdr__util:where(:not([data-site-search])):hover .em-hdr__util-l::after,
.em-hdr__util:where(:not([data-site-search])):focus-visible .em-hdr__util-l::after,
.site-header__wa:hover > span::after,
.site-header__wa:focus-visible > span::after,
.site-header__call:hover > span::after,
.site-header__call:focus-visible > span::after { transform: scaleX(1); }

/* The label ladder, set from measurement, not taste.

   With all three utilities labelled the actions row wants 490px of content
   plus five gaps. At 1440 that left ONE pixel of slack — and a flex item that
   cannot shrink any further wraps its text instead, so "Instant Call" became a
   two-line control and the row grew to 51px inside a 72px bar. It is the same
   trap places.css already records at 519px: a fit this tight is decided by
   font metrics, not by layout. Each band below keeps at least 30px of slack.

   .em-hdr (the places family, which loads this file):

     >= 1500    search + instant call + whatsapp, all labelled   (62px spare)
     1400-1499  search labelled, whatsapp icon only
     1200-1399  all three icon only, the CTA still labelled       (40px spare)
     < 1200     places.css takes the CTA, WhatsApp and language out;
                Instant Call stays, as a 44px icon

   1400-1499 traded WhatsApp's word for Search's on 2026-10-02, when Search
   became the global site search and had to say so. Measured in headless
   Chrome on emaar-community.html and emaar-places-to-discover.html with the
   word shown: 78 / 107 / 159px spare at 1400 / 1440 / 1499 (both words
   shown would leave 4.5px at 1400, so the trade, not an addition).

   index.html's .site-header: Search is labelled at every band from 600 up
   (global-search.css owns that one rule); only WhatsApp's word goes, at
   1200-1399, as before.

   nowrap above is the floor under all of it: whatever the arithmetic does
   later, this control can never become two lines tall inside the bar. */
@media (max-width: 1499px) and (min-width: 1200px) {
  .em-hdr__wa span { display: none; }
}
@media (max-width: 1399px) and (min-width: 1200px) {
  .em-hdr__util:not(.em-hdr__wa):not(.em-hdr__call) .em-hdr__util-l,
  .site-header__wa > span { display: none; }
}

/* Instant Call is the one control here whose icon names nothing on its own —
   a magnifier and the WhatsApp mark are read without a caption, a handset is
   not. So where the bar has no room for its word, the word is not deleted: it
   is lifted OUT OF FLOW and posed under the icon as a hover and focus reveal.

   That is the brief's "icon -> Instant Call", without the cost the reference
   recording pays for it — there, naming the icon widens the control and
   shoves the entire primary navigation left. Out of flow, the control stays
   exactly the icon's width and hovering it moves nothing.

   It is decoration, not information: the button carries its own aria-label,
   so a reader who cannot hover is never short of the name, and the reveal is
   never the only way to reach the experience — the tap opens it. */
@media (max-width: 1399px) {
  .em-hdr__call .em-hdr__util-l,
  .site-header__call > span {
    position: absolute; top: calc(100% - 4px); left: 50%; z-index: 4;
    transform: translate(-50%, -3px);
    padding: 7px 11px; pointer-events: none;
    background: var(--em-surface, #fdfcfa); color: var(--em-ink, #111112);
    border: 1px solid var(--em-line, rgba(17,17,17,.10));
    border-radius: var(--em-r, 2px);
    box-shadow: 0 10px 28px rgba(40,34,22,.13);
    font-size: 10px; font-weight: 600; letter-spacing: .16em; line-height: 1;
    text-transform: uppercase;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease,
                transform .2s var(--em-e-soft, cubic-bezier(.22,.61,.24,1)),
                visibility 0s linear .2s;
  }
  /* the hairline belongs to the word set in the bar, never to the reveal */
  .em-hdr__call .em-hdr__util-l::after,
  .site-header__call > span::after { content: none; }

  .em-hdr__call:hover .em-hdr__util-l,
  .em-hdr__call:focus-visible .em-hdr__util-l,
  .site-header__call:hover > span,
  .site-header__call:focus-visible > span {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition-delay: 0s, 0s, 0s;
  }

  /* Below 1200 the bar keeps the wordmark, search and the language picker and
     the dock carries the rest — but Instant Call stays. It is the one control
     in the row that opens a live conversation, and between 1024 and 1199
     there is no dock yet to carry it. A 44px square, opened by tap. */
  .em-hdr__call,
  .site-header__call {
    min-width: 44px; min-height: 44px;
    justify-content: center; padding: 9px;
  }
  .em-hdr__call svg,
  .site-header__call svg { width: 16px; height: 16px; }
}

/* ————————————————————— 2 · the full-screen experience ————————————————————— */

.ic {
  /* the house palette, with places.css's own literals as the fallback */
  --ic-ground:  var(--em-ground, #f6f2ea);
  --ic-surface: var(--em-surface, #fdfcfa);
  --ic-sunk:    var(--em-sunk, #f1ece2);
  --ic-ink:     var(--em-ink, #111112);
  --ic-ink-2:   var(--em-ink-2, #4d4d4f);
  --ic-body:    var(--em-ink-body, #5c5346);
  --ic-eyebrow: var(--em-ink-eyebrow, #6f6553);
  --ic-on-ink:  var(--em-on-ink, #f8f8f8);
  --ic-hover:   var(--em-ink-hover, #333335);
  --ic-line:    var(--em-line, rgba(17,17,17,.10));
  --ic-rule:    var(--em-line-rule, rgba(17,17,17,.14));
  --ic-ctl:     var(--em-line-ctl, rgba(17,17,17,.32));
  --ic-strong:  var(--em-line-strong, rgba(17,17,17,.46));
  --ic-danger:  var(--em-danger, #9a3b2e);
  --ic-r:       var(--em-r, 2px);
  --ic-display: var(--em-display, Optima, "Optima Nova", Candara, "Trebuchet MS", sans-serif);
  --ic-face:    var(--em-body, "Source Sans 3", "Segoe UI", system-ui, sans-serif);
  --ic-e:       var(--em-e-panel, cubic-bezier(.33,0,.15,1));
  --ic-e-soft:  var(--em-e-soft, cubic-bezier(.22,.61,.24,1));

  position: fixed; inset: 0; z-index: 150;
  font-family: var(--ic-face);
  color: var(--ic-ink);
  /* 150 clears the film modal (140), the search and explore panels (130), the
     More sheet (120) and the dock (90), and stays under the skip link (200) —
     which is unreachable anyway while this traps focus. */
}
.ic *, .ic *::before, .ic *::after { box-sizing: border-box; }
/* An author `display:` beats the hidden ATTRIBUTE, and several rules below set
   one on elements that ship hidden — which is why every field's error message
   painted on first render. The attribute gets its authority back here, once,
   rather than each rule remembering to guard itself. */
.ic [hidden] { display: none !important; }

.ic__scrim {
  position: absolute; inset: 0;
  background: rgba(10,10,9,.46);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .28s ease;
}
.ic.is-open .ic__scrim { opacity: 1; }

.ic__sheet {
  position: absolute; inset: 0;
  background: var(--ic-surface);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(18px);
  transition: opacity .3s ease, transform .38s var(--ic-e);
  overflow: hidden;
}
.ic.is-open .ic__sheet { opacity: 1; transform: none; }

.ic__x {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--ic-line); border-radius: var(--ic-r);
  background: var(--ic-surface); color: var(--ic-ink); cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.ic__x:hover { background: rgba(128,128,128,.14); border-color: var(--ic-ctl); }
.ic__x svg { width: 17px; height: 17px; display: block; }

.ic :focus-visible { outline: 2px solid var(--ic-ink); outline-offset: 3px; }

.ic__grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto 1fr; }

/* ——— the context rail ——— */

.ic__rail {
  background: var(--ic-ground);
  border-bottom: 1px solid var(--ic-line);
  padding: max(26px, env(safe-area-inset-top)) clamp(20px,5vw,40px) 24px;
  padding-left: max(clamp(20px,5vw,40px), env(safe-area-inset-left));
  padding-right: max(clamp(20px,5vw,40px), env(safe-area-inset-right));
}
.ic__mark { display: flex; align-items: flex-end; font-size: 17px; color: var(--ic-ink); }
.ic__mark svg { height: 1em; width: auto; display: block; fill: currentColor; }
.ic__mark svg + svg { margin-left: .0184em; }
.ic__mark svg:nth-child(2) { margin-left: .0497em; }
.ic__mark svg:nth-child(4) { margin-left: .0156em; }
.ic__mark svg:nth-child(5) { margin-left: .0288em; }

.ic__eyebrow {
  margin: 22px 0 0; font-size: 10.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ic-eyebrow);
}
.ic__h {
  margin: 10px 0 0; font-family: var(--ic-display); font-weight: 400;
  font-size: clamp(25px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.005em;
  text-wrap: balance; max-width: 15em;
}
.ic__lede {
  margin: 14px 0 0; max-width: 34em;
  font-size: 14.5px; line-height: 1.6; color: var(--ic-body); text-wrap: pretty;
}
.ic__facts { margin: 22px 0 0; padding: 0; }
.ic__fact {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--ic-rule);
}
.ic__fact dt {
  flex: none; min-width: 9.5em;
  font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ic-eyebrow);
}
.ic__fact dd { margin: 0; font-size: 14px; color: var(--ic-ink); }

/* ——— the scheduler ——— */

.ic__main {
  min-height: 0; display: flex; flex-direction: column;
  padding: 26px clamp(20px,5vw,40px) 0;
  padding-left: max(clamp(20px,5vw,40px), env(safe-area-inset-left));
  padding-right: max(clamp(20px,5vw,40px), env(safe-area-inset-right));
}

.ic__steps {
  flex: none; display: flex; gap: clamp(16px,3vw,34px);
  margin: 0 0 22px; padding: 0 0 14px; list-style: none;
  border-bottom: 1px solid var(--ic-rule);
}
.ic__step { display: flex; align-items: baseline; gap: 8px; opacity: .42; transition: opacity .3s ease; }
.ic__step.is-on, .ic__step.is-done { opacity: 1; }
.ic__step-n { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--ic-eyebrow); }
.ic__step-l {
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  white-space: nowrap;
}
.ic__step.is-on .ic__step-l { border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* The pane is the column, not the content: with a short step the action row
   belongs at the foot of the screen, not floating halfway up it with 400px of
   empty paper beneath. margin-top:auto does that and still lets the row stay
   sticky once a step is long enough to scroll. */
.ic__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ic-when, .ic-embed { flex: 0 0 auto; }
.ic-form, .ic-done { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ic__acts { margin-top: auto; }

/* ——— calendar ——— */

.ic-when { display: grid; gap: clamp(22px,3vw,34px); align-content: start; }

.ic-cal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ic-cal__m {
  flex: 1 1 auto; margin: 0; text-align: center;
  font-family: var(--ic-display); font-size: 18px; letter-spacing: .01em;
}
.ic-cal__nav {
  /* 44, like every other control in the build: the month arrows are the two
     smallest targets here and a thumb finds them on a phone */
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--ic-line); border-radius: var(--ic-r);
  background: transparent; color: var(--ic-ink); cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.ic-cal__nav:hover:not([disabled]) { background: rgba(128,128,128,.14); border-color: var(--ic-ctl); }
.ic-cal__nav[disabled] { opacity: .28; cursor: default; }
.ic-cal__nav svg { width: 16px; height: 16px; display: block; }

.ic-cal__dow, .ic-cal__grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ic-cal__dow {
  gap: 6px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--ic-rule);
}
.ic-cal__dow li {
  text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ic-eyebrow);
}
.ic-cal__grid { gap: 6px; }
.ic-cal__cell { display: block; min-width: 0; }

.ic-cal__d {
  width: 100%; min-height: 46px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--ic-r);
  font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ic-ink);
  background: transparent; position: relative; text-align: center;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
button.ic-cal__d { cursor: pointer; border-color: var(--ic-line); }
button.ic-cal__d:hover { background: rgba(128,128,128,.14); border-color: var(--ic-ctl); }
.ic-cal__d.is-off { color: var(--ic-ink); opacity: .26; }
.ic-cal__d.is-on,
.ic-cal__d.is-on:hover { background: var(--ic-ink); border-color: var(--ic-ink); color: var(--ic-on-ink); }
/* today is a mark under the numeral, never a second fill competing with the
   chosen day */
.ic-cal__d[data-ic-today]::after {
  content: ''; position: absolute; bottom: 7px; left: 50%; width: 3px; height: 3px;
  margin-left: -1.5px; border-radius: 50%; background: currentColor; opacity: .55;
}

/* ——— times ——— */

.ic-times { min-width: 0; }
.ic-times__h { margin: 0; font-family: var(--ic-display); font-size: 17px; line-height: 1.25; }
.ic-times__tz {
  margin: 4px 0 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ic-eyebrow);
}
.ic-times__wait { margin: 10px 0 0; font-size: 14px; color: var(--ic-body); max-width: 26em; }
.ic-times__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.ic-time {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px; cursor: pointer;
  border: 1px solid var(--ic-ctl); border-radius: var(--ic-r);
  background: transparent; color: var(--ic-ink);
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.ic-time:hover { background: rgba(128,128,128,.14); }
.ic-time__t { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ic-time__r { font-size: 11.5px; letter-spacing: .04em; color: var(--ic-body); font-variant-numeric: tabular-nums; }
.ic-time.is-on, .ic-time.is-on:hover {
  background: var(--ic-ink); border-color: var(--ic-ink); color: var(--ic-on-ink);
}
.ic-time.is-on .ic-time__r { color: rgba(248,248,248,.74); }

/* ——— the action foot ——— */

.ic__acts {
  position: sticky; bottom: 0; z-index: 2;
  /* auto, not a fixed gap: a short step puts the row on the floor of the pane
     instead of stranding it mid-screen over 400px of empty paper. Declared
     here, on the component's own rule, because a margin set earlier in the
     file would simply be overwritten by this one. */
  margin-top: auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 16px 0 max(16px, env(safe-area-inset-bottom));
  background: var(--ic-surface);
  border-top: 1px solid var(--ic-rule);
}
.ic__chosen { margin: 0 auto 0 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ic__chosen-d { font-size: 13.5px; font-weight: 600; }
.ic__chosen-t { font-size: 11.5px; color: var(--ic-body); font-variant-numeric: tabular-nums; }
.ic__chosen-w { font-size: 13px; color: var(--ic-body); }
/* asking, not scolding: the line the reader has not filled in draws attention
   to itself once rather than turning red */
.ic__chosen.is-asking .ic__chosen-w { color: var(--ic-ink); animation: icAsk .9s ease; }
@keyframes icAsk { 0%,100% { opacity: 1; } 30% { opacity: .25; } 65% { opacity: 1; } }

.ic-btn, .ic-btn-o {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; text-align: center; white-space: nowrap; min-height: 44px;
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; border-radius: var(--ic-r);
  padding: 12px 20px; border: 1px solid transparent; cursor: pointer;
}
.ic-btn { background: var(--ic-ink); color: var(--ic-on-ink); border-color: var(--ic-ink);
  transition: background .3s ease; }
.ic-btn:hover { background: var(--ic-hover); color: var(--ic-on-ink); }
.ic-btn-o { background: transparent; color: var(--ic-ink); border-color: var(--ic-ink);
  letter-spacing: .16em; padding: 12px 24px; transition: background .3s ease; }
.ic-btn-o:hover { background: rgba(128,128,128,.14); }
.ic-btn svg, .ic-btn-o svg { width: 14px; height: 14px; display: block; flex: none; }
.ic-arw { transition: transform .3s var(--ic-e-soft); }
.ic-btn:hover .ic-arw { transform: translateX(3px); }

/* places.css dims and DISABLES pointer events on anything aria-disabled. Here
   the attribute means "not yet", and the whole point of choosing it over
   [disabled] is that the control still answers — so the click handler can say
   what is missing instead of the reader guessing. Pointer events come back;
   the dimming stays. */
.ic-btn[aria-disabled="true"] { pointer-events: auto; opacity: .38; }
.ic-btn[aria-disabled="true"]:hover { background: var(--ic-ink); }

/* ——— details form ——— */

.ic-form__when {
  display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 24px;
  padding: 14px 16px; background: var(--ic-sunk); border-radius: var(--ic-r);
}
.ic-form__when-l {
  font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ic-eyebrow); width: 100%;
}
.ic-form__when-v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-form__edit {
  margin-left: auto; min-height: 44px; padding: 0 2px; cursor: pointer; background: none; border: 0;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ic-ink); border-bottom: 1px solid currentColor; align-self: center;
}
.ic-f { display: block; margin-bottom: 18px; }
.ic-f__l {
  display: block; margin-bottom: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ic-eyebrow);
}
.ic-f__opt { letter-spacing: .1em; opacity: .75; text-transform: none; font-weight: 400; }
.ic-f__i {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--ic-ink);
  background: var(--ic-surface); border: 1px solid var(--ic-ctl); border-radius: var(--ic-r);
  transition: border-color .25s ease;
}
.ic-f__i:hover { border-color: var(--ic-strong); }
.ic-f__i:focus { outline: none; border-color: var(--ic-ink); box-shadow: inset 0 0 0 1px var(--ic-ink); }
.ic-f__t { min-height: 88px; resize: vertical; line-height: 1.5; }
.ic-f__i.is-bad { border-color: var(--ic-danger); }
.ic-f__e { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ic-danger); }
.ic-form__note { margin: 0 0 4px; font-size: 12.5px; line-height: 1.55; color: var(--ic-body); max-width: 40em; }

/* ——— confirmation ——— */

.ic-done { padding-top: 6px; }
.ic-done__mark { display: block; width: 48px; height: 48px; color: var(--ic-ink); }
.ic-done__mark svg { width: 100%; height: 100%; display: block; }
.ic-done__ring { opacity: .3; }
.ic-done__tick { stroke-dasharray: 30; stroke-dashoffset: 30; animation: icTick .5s var(--ic-e-soft) .1s forwards; }
@keyframes icTick { to { stroke-dashoffset: 0; } }
.ic-done__eyebrow {
  margin: 20px 0 0; font-size: 10.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ic-eyebrow);
}
.ic-done__h { margin: 8px 0 0; max-width: 16em; font-family: var(--ic-display); font-weight: 400;
  font-size: clamp(24px,3vw,32px); line-height: 1.15; }
.ic-done__l { margin: 16px 0 0; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ic-done__note { margin: 14px 0 0; max-width: 34em; font-size: 14px; line-height: 1.6; color: var(--ic-body); }

/* ——— the embedded provider, when the seam is filled ——— */

.ic-embed { min-height: 620px; width: 100%; }
/* the host stays blank until the provider has confirmed a real event type —
   a half-mounted 404 never gets to paint inside the shell */
.ic-embed iframe { opacity: 0; transition: opacity .25s ease; }
.ic-embed.is-live iframe { opacity: 1; }
.ic-embed__wait { margin: 0; padding: 40px 0; font-size: 14px; color: var(--ic-body); }

/* ————————————————————— 3 · shape at each size —————————————————————

   Mobile first: one column and ONE scroller, so the sheet never nests a
   scroll region inside another and the soft keyboard cannot strand a field
   inside an inner box. */
.ic__grid { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ic__main { overflow: visible; }

@media (min-width: 1024px) {
  /* Two columns, each with its own scroller: the rail is the standing
     context and must not travel up the screen while the reader works
     through the calendar beside it. */
  .ic__grid {
    grid-template-rows: 1fr; grid-template-columns: minmax(330px, 33%) minmax(0, 1fr);
    overflow: hidden;
  }
  .ic__rail {
    border-bottom: 0; border-right: 1px solid var(--ic-line);
    padding: clamp(40px,4.4vw,60px) clamp(32px,3.4vw,52px);
    overflow-y: auto; min-height: 0;
    /* a title page, set in the middle of its own column. `safe` is what keeps
       a short viewport honest: centred content taller than its box would
       otherwise overflow upward, past the scroller's own top edge. */
    display: grid; align-content: center; align-content: safe center;
  }
  .ic__rail > * { min-width: 0; }
  .ic__main { overflow-y: auto; padding-top: clamp(40px,4.4vw,60px); }
  .ic__mark { font-size: 19px; }
  .ic-when { grid-template-columns: minmax(0, 1fr) minmax(208px, 248px); align-items: start; }
  .ic__x { top: 20px; right: 20px; }
  .ic-times__l { max-height: none; }
}

@media (min-width: 1440px) {
  .ic__rail { padding: 68px clamp(44px,3.6vw,64px); }
  .ic__main { padding: 68px clamp(44px,3.6vw,64px) 0; }
  .ic-when { grid-template-columns: minmax(0, 1fr) 268px; gap: 44px; }
}

/* Landscape phones: the rail is a band, not half the screen. */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  .ic__rail { padding-top: 18px; padding-bottom: 16px; }
  .ic__h { font-size: 22px; }
  .ic__lede, .ic__facts { display: none; }
}

@media (max-width: 1023px) {
  /* the close control sits over the rail, so the heading must not run under it */
  .ic__rail { padding-right: max(72px, env(safe-area-inset-right)); }

  /* The three facts are a standing reference, not a table. Stacked as
     definition rows they cost 130px of a 844px screen before the calendar is
     even reached — desktop furniture carried onto a phone. On one line they
     cost 20px and still say all three things; the labels go because each
     value already names itself, and the times pane repeats the timezone at
     the point it matters. */
  .ic__facts {
    display: flex; flex-wrap: wrap; gap: 4px 0;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ic-rule);
  }
  .ic__fact { display: inline; padding: 0; border-top: 0; }
  .ic__fact dt { display: none; }
  .ic__fact dd { display: inline; font-size: 12.5px; color: var(--ic-body); }
  .ic__fact + .ic__fact dd::before { content: '·'; padding: 0 .5em; opacity: .55; }

  /* the rail is the same three labels wide; the numerals are what tips it
     into a scroll that clips the last word in half */
  .ic__step-n { display: none; }
  .ic__steps { gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .ic__steps::-webkit-scrollbar { display: none; }

  /* Plain column, not reverse: the reader's eye goes status line -> choices ->
     act, and the primary lands last, nearest the thumb. Reversed, the line
     saying what had been chosen ended up UNDER the button it explains. */
  .ic__acts { flex-direction: column; align-items: stretch; }
  .ic__acts .ic-btn, .ic__acts .ic-btn-o { width: 100%; }
  .ic__chosen { margin: 0 0 4px; align-items: flex-start; }
  .ic-embed { min-height: 560px; }
}

@media (max-width: 380px) {
  .ic-cal__d { min-height: 42px; font-size: 13px; }
  .ic__fact { flex-wrap: wrap; gap: 2px; }
  .ic__fact dt { min-width: 0; width: 100%; }
}

/* ————————————————————— 4 · motion cancels here —————————————————————

   Every transition and keyframe in this component is answered in one place,
   so a reduced-motion reader cannot be left with one animation the rest of
   the file forgot. State still changes; it simply arrives without travel. */
@media (prefers-reduced-motion: reduce) {
  .ic__scrim, .ic__sheet, .ic__x, .ic-cal__d, .ic-cal__nav, .ic-time,
  .ic-btn, .ic-btn-o, .ic-arw, .ic-f__i, .ic__step,
  .em-hdr__util:where(:not([data-site-search])),
  :where(.em-hdr__util:not([data-site-search])) .em-hdr__util-l::after,
  .site-header__wa, .site-header__wa > span::after,
  .site-header__call, .site-header__call > span::after { transition: none !important; }
  .ic__sheet { transform: none; }
  .ic-done__tick { animation: none; stroke-dashoffset: 0; }
  .ic__chosen.is-asking .ic__chosen-w { animation: none; }
  .ic-btn:hover .ic-arw { transform: none; }
}

/* The experience is a live control surface and prints as nothing. */
@media print { .ic { display: none !important; } }