/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC BOOKING PAGE
   ───────────────────────────────────────────────────────────────────────────
   Standalone on purpose. This runs on a customer's own domain, and inside an
   iframe on somebody else's site, so it cannot depend on the console's
   stylesheets — a booking page that needs bv3-toolkit.css to be reachable is a
   booking page that breaks when the console changes.

   `--mk` is the account's color, set inline by index.php. Everything tints
   from it, so one field in the designer re-skins the whole page.

   THE HOUSE RULES STILL APPLY. No left accent bar on a rounded element
   anywhere (feedback-no-left-border-radius-cards). Color is carried by fills,
   rings and dots.

   Four layouts, one set of parts. `.mk-l-*` on the body rearranges the same
   three regions — about, pick, form — because a layout that needs its own
   components is four products to maintain.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

:root{
  --mk:#7367f0;
  --mk-rgb:115,103,240;

  --bg:#f4f4f7;
  --card:#ffffff;
  --ink:#16161c;
  --ink-2:#5c5c68;
  --ink-3:#9a9aa8;
  --line:rgba(0,0,0,.09);
  --line-2:rgba(0,0,0,.05);

  --r:12px;
  --r-lg:18px;
  --r-pill:100px;
  --shadow:0 1px 2px rgba(20,20,45,.04),0 8px 28px rgba(20,20,45,.07);
  --shadow-lift:0 2px 6px rgba(20,20,45,.06),0 14px 40px rgba(20,20,45,.11);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Dark mode follows the visitor's system UNLESS the embed pinned a theme —
   `data-theme` wins, because a customer who chose dark chose dark. */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --bg:#0f0f14; --card:#17171f; --ink:#f2f2f7; --ink-2:#a6a6b4; --ink-3:#6e6e7e;
    --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.06);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.45);
    --shadow-lift:0 2px 6px rgba(0,0,0,.45),0 14px 40px rgba(0,0,0,.55);
  }
}
html[data-theme="dark"]{
  --bg:#0f0f14; --card:#17171f; --ink:#f2f2f7; --ink-2:#a6a6b4; --ink-3:#6e6e7e;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.45);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45),0 14px 40px rgba(0,0,0,.55);
}

html,body{margin:0;min-height:100%}
body.mk-body{
  background:
    radial-gradient(90% 60% at 50% 0%,rgba(var(--mk-rgb),.07),transparent 60%),
    var(--bg);
  color:var(--ink);
  font:400 15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
  padding:32px 20px 56px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
/* Inside somebody else's page there is no room for our margins, and the host
   page owns the background. */
body.is-embed{padding:0;background:var(--bg)}

.mk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══ the shell ═════════════════════════════════════════════════════════ */
.mk-shell{
  width:100%;
  max-width:1080px;
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:visible;
  display:grid;
  align-self:flex-start;
}
body.is-embed .mk-shell{border-radius:0;box-shadow:none;max-width:none;min-height:100vh}

/* ── classic: details left, picking right ─────────────────────────────── */
.mk-l-classic .mk-shell{grid-template-columns:minmax(0,310px) minmax(0,1fr)}
.mk-l-classic .mk-about{border-right:1px solid var(--line-2)}
.mk-l-classic .mk-body-pick,
.mk-l-split .mk-body-pick{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,258px);
  align-items:start;min-height:0;
}
.mk-l-classic .mk-times,
.mk-l-split .mk-times{border-left:1px solid var(--line-2);align-self:stretch}

/* ── split: the calendar leads, the details are a header over it ──────── */
.mk-l-split .mk-shell{grid-template-columns:minmax(0,1fr);max-width:1120px}
.mk-l-split .mk-about{
  border-bottom:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 18px;padding:22px 28px;
}
.mk-l-split .mk-who{margin:0}
.mk-l-split .mk-id{flex:1 1 220px;min-width:0}
.mk-l-split .mk-title{margin:0;font-size:21px}
.mk-l-split .mk-facts{margin:0}
.mk-l-split .mk-durs{margin:0}
.mk-l-split .mk-desc,.mk-l-split .mk-logo,.mk-l-split .mk-soon{display:none!important}
.mk-l-split .mk-times{min-width:0}
.mk-l-split .mk-body-pick{grid-template-columns:minmax(0,1fr) minmax(0,300px)}

/* ── strip: days across, times under. Short enough for an embed ────────── */
.mk-l-strip .mk-shell{grid-template-columns:minmax(0,1fr);max-width:780px}
.mk-l-strip .mk-about{
  border-bottom:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:18px 22px;
}
.mk-l-strip .mk-who{margin:0}
.mk-l-strip .mk-av{width:40px;height:40px;flex-basis:40px}
.mk-l-strip .mk-id{flex:1 1 200px;min-width:0}
.mk-l-strip .mk-title{margin:0;font-size:18px}
.mk-l-strip .mk-desc,.mk-l-strip .mk-logo,.mk-l-strip .mk-soon,.mk-l-strip .mk-views{display:none!important}
.mk-l-strip .mk-facts{margin:0}
.mk-l-strip .mk-durs{margin:0;flex-basis:100%}
.mk-l-strip .mk-dow{display:none}
.mk-l-strip .mk-grid{
  display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.mk-l-strip .mk-day{
  flex:0 0 70px;max-width:none;height:84px;max-height:none;aspect-ratio:auto;scroll-snap-align:start;
  flex-direction:column;gap:1px;border-radius:14px;
}
.mk-l-strip .mk-day::after{display:none}
.mk-l-strip .mk-day > span:nth-child(2){font-size:19px;font-weight:720;line-height:1.1}
.mk-l-strip .mk-day-dow{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.mk-l-strip .mk-day-n{display:block;font-size:10.5px;font-weight:600;opacity:.75}
.mk-l-strip .mk-day.is-on .mk-day-dow,.mk-l-strip .mk-day.is-on .mk-day-n{color:#fff;opacity:.9}
.mk-l-strip .mk-grid .mk-empty{flex:1 1 auto}
.mk-l-strip .mk-times{border-top:1px solid var(--line-2)}

/* ── focus: one question at a time. Best on a phone ───────────────────── */
.mk-l-focus .mk-shell{grid-template-columns:minmax(0,1fr);max-width:540px}
.mk-l-focus .mk-about{text-align:center;border-bottom:1px solid var(--line-2)}
.mk-l-focus .mk-who,.mk-l-focus .mk-facts,.mk-l-focus .mk-durs{justify-content:center}
.mk-l-focus .mk-soon{text-align:left}
.mk-l-focus .mk-views{display:none!important}
.mk-l-focus .mk-cal-wrap{padding-bottom:6px}
.mk-l-focus .mk-times{border-top:1px solid var(--line-2)}
/* the times REPLACE the month once somebody has picked a day */
.mk-l-focus.has-day .mk-cal-wrap,.mk-l-focus.has-day .mk-pick-hd{display:none}
.mk-l-focus.has-day .mk-times{border-top:0}

/* ── the steps: details and done take the picking column's place ───────── */
.mk-form{padding:26px 28px 30px;min-width:0;grid-column:1/-1}
.mk-form[hidden],.mk-done[hidden],.mk-pick[hidden]{display:none!important}
.mk-l-classic .mk-form{grid-column:2/-1}
.no-details .mk-form{grid-column:1/-1}
.mk-l-classic.st-form .mk-form{max-width:560px}

/* ═══ about ═════════════════════════════════════════════════════════════ */
.mk-about{padding:28px 26px 30px;min-width:0}
.no-details .mk-about{display:none}
.no-details .mk-shell{grid-template-columns:minmax(0,1fr)!important}

.mk-logo{display:block;max-width:132px;max-height:48px;width:auto;height:auto;margin-bottom:20px;object-fit:contain}

.mk-who{display:flex;align-items:center;margin-bottom:14px}
.mk-av{
  width:52px;height:52px;border-radius:50%;flex:0 0 52px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--mk),rgba(var(--mk-rgb),.62));
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em;
  overflow:hidden;position:relative;
  box-shadow:0 0 0 3px var(--card);
}
/* The photo sits ON TOP of the initials, which are always in the markup. A
   photo that 404s therefore reveals the initials rather than its own alt
   text. No onerror handler: the fallback is the absence of a paint. */
.mk-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:linear-gradient(140deg,var(--mk),rgba(var(--mk-rgb),.62))}
.mk-av-i{position:relative;z-index:0}
.mk-av.is-stacked{margin-left:-14px}
.mk-av.is-more{background:var(--line);color:var(--ink-2);font-size:12px}

.mk-id{min-width:0}
.mk-host{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.mk-title{margin:0 0 16px;font-size:25px;font-weight:700;line-height:1.2;letter-spacing:-.022em;overflow-wrap:break-word}

.mk-facts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.mk-fact{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(var(--mk-rgb),.08);
  color:var(--ink-2);font-size:12.5px;font-weight:600;
}
.mk-fact .mk-ic{color:var(--mk);opacity:.85}
/* The `hidden` ATTRIBUTE only works while nothing sets display, and .mk-fact
   sets inline-flex, so the "when" pill rendered as an empty tinted blob until
   this existed. Worth remembering for every hidden element with a display. */
.mk-fact[hidden]{display:none}
.mk-ic{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.mk-durs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.mk-dur{
  padding:7px 14px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:transparent;
  font:600 12.5px var(--font);color:var(--ink-2);cursor:pointer;
  transition:all .16s var(--ease);
}
.mk-dur:hover{border-color:rgba(var(--mk-rgb),.5);color:var(--ink)}
.mk-dur.is-on{background:var(--mk);border-color:var(--mk);color:#fff}

.mk-desc{font-size:14px;line-height:1.65;color:var(--ink-2);overflow-wrap:break-word}
.mk-desc p{margin:0 0 10px}
.mk-desc p:last-child{margin-bottom:0}
.mk-desc a{color:var(--mk)}
.mk-desc ul,.mk-desc ol{margin:0 0 10px;padding-left:20px}
.mk-desc img{max-width:100%;height:auto;border-radius:var(--r)}

/* ── the soonest times ─────────────────────────────────────────────────── */
.mk-soon{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2)}
.mk-soon[hidden]{display:none}
.mk-soon-hd{
  display:flex;align-items:center;gap:6px;margin:0 0 10px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.mk-soon-hd .mk-ic{color:var(--mk);opacity:.9}
.mk-soon-list{display:flex;flex-direction:column;gap:7px}
.mk-soon-b{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 13px;border-radius:var(--r);
  border:1.5px solid rgba(var(--mk-rgb),.22);background:rgba(var(--mk-rgb),.04);
  font:500 13.5px var(--font);color:var(--ink);cursor:pointer;text-align:left;
  transition:all .15s var(--ease);
}
.mk-soon-b:hover{border-color:var(--mk);background:rgba(var(--mk-rgb),.1);transform:translateY(-1px)}
.mk-soon-d{flex:1 1 auto;color:var(--ink-2);font-weight:600}
.mk-soon-t{font-weight:720;color:var(--mk);font-variant-numeric:tabular-nums}
.mk-soon-b .mk-ic{color:var(--mk);opacity:.7;transition:transform .15s var(--ease)}
.mk-soon-b:hover .mk-ic{transform:translateX(2px);opacity:1}

/* ═══ picking ═══════════════════════════════════════════════════════════ */
.mk-pick{min-width:0;display:flex;flex-direction:column}
.mk-pick-hd{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:22px 24px 6px;
}
.mk-mon{display:flex;align-items:center;gap:2px}
.mk-mon-t{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;min-width:168px;text-align:center}
.mk-nav{
  width:34px;height:34px;border-radius:10px;border:0;background:transparent;
  color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .14s;
}
.mk-nav:hover:not(:disabled){background:rgba(var(--mk-rgb),.1);color:var(--mk)}
.mk-nav:disabled{opacity:.3;cursor:default}
.mk-nav .mk-ic{width:16px;height:16px}

/* Two small segmented switches: month or week, 12 or 24 hour. */
.mk-views,.mk-clock{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border-radius:var(--r-pill);background:var(--line-2);
}
.mk-views{margin-left:auto}
.mk-view,.mk-ck{
  border:0;background:transparent;border-radius:var(--r-pill);
  padding:6px 13px;font:650 12px var(--font);color:var(--ink-2);cursor:pointer;
  transition:all .15s var(--ease);
}
.mk-ck{padding:6px 10px}
.mk-view:hover,.mk-ck:hover{color:var(--ink)}
.mk-view.is-on,.mk-ck.is-on{background:var(--card);color:var(--mk);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.mk-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 24px 14px}

/* ── the time zone picker ─────────────────────────────────────────────── */
.mk-tz{position:relative;min-width:0}
.mk-tzb{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:7px 12px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--card);
  font:500 12.5px var(--font);color:var(--ink-2);cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.mk-tzb:hover,.mk-tzb[aria-expanded="true"]{border-color:rgba(var(--mk-rgb),.5)}
.mk-tzb[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(var(--mk-rgb),.12)}
.mk-tzb .mk-ic{color:var(--ink-3)}
.mk-tzb-t{display:inline-flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-tzb-t strong{font-weight:680;color:var(--ink)}
.mk-tzb-now{color:var(--ink-3);font-variant-numeric:tabular-nums}
.mk-tzb-car{width:12px;height:12px;flex-basis:12px}

.mk-tzp{
  position:absolute;z-index:40;top:calc(100% + 8px);left:0;
  width:360px;max-width:calc(100vw - 32px);
  background:var(--card);border-radius:14px;
  box-shadow:0 0 0 1px var(--line),var(--shadow-lift);
  padding:8px;
}
.mk-tzp[hidden]{display:none}
/* s3booktz2 (#4100): the picker under "Pick a time" (month view); its list opens toward the page, never off the edge */
.mk-tz--times{margin:-4px 0 14px}
.mk-tz--times .mk-tzb{width:100%}
.mk-tz--times .mk-tzb-car{margin-left:auto}
.mk-tz--times .mk-tzp{left:auto;right:0}
.mk-tzp-q{
  width:100%;padding:10px 12px;margin-bottom:6px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--card);
  font:400 14px var(--font);color:var(--ink);
}
.mk-tzp-q:focus{outline:0;border-color:var(--mk);box-shadow:0 0 0 3px rgba(var(--mk-rgb),.14)}
.mk-tzp-list{max-height:300px;overflow-y:auto;overscroll-behavior:contain}
.mk-tzo{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border:0;border-radius:9px;background:transparent;
  font:500 13px var(--font);color:var(--ink);text-align:left;cursor:pointer;
}
.mk-tzo:hover,.mk-tzo.is-active{background:rgba(var(--mk-rgb),.08)}
.mk-tzo.is-on{background:rgba(var(--mk-rgb),.13)}
.mk-tzo-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.mk-tzo-c{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-tzo-r{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-tzo-r em{font-style:normal;font-weight:650;color:var(--mk)}
.mk-tzo-t{font-size:12.5px;font-weight:650;color:var(--ink-2);font-variant-numeric:tabular-nums;flex-shrink:0}
.mk-tzp-none{margin:0;padding:18px 10px;text-align:center;font-size:13px;color:var(--ink-3)}

/* ── the month ─────────────────────────────────────────────────────────── */
.mk-body-pick{min-width:0}
.mk-cal-wrap{padding:0 24px 22px;min-width:0}
.v-week .mk-cal-wrap,.v-week .mk-times{display:none!important}
.v-week .mk-body-pick{display:block!important}
.mk-dow{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;
}
.mk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;transition:opacity .2s}
.is-loading .mk-grid,.is-loading .mk-week{opacity:.45;pointer-events:none}

.mk-day{
  /* Square, but capped. `aspect-ratio:1` alone means a wide card gets 110px
     day cells - a month grid 700px tall that is mostly empty space. */
  position:relative;aspect-ratio:1;min-height:40px;max-height:56px;
  /* Capped and square means narrower than its column, and a grid item
     defaults to the start of its track - so without this the dates sit left
     of the weekday headings above them. */
  justify-self:center;width:100%;max-width:56px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;
  font:600 14px var(--font);color:var(--ink);cursor:pointer;
  transition:all .14s var(--ease);
}
.mk-day.is-pad{visibility:hidden;pointer-events:none}
/* A day with times reads as available at a glance: a tinted fill, and a dot
   for anyone who cannot rely on the color. */
.mk-day.is-open{background:rgba(var(--mk-rgb),.1);color:var(--mk);font-weight:720}
.mk-day.is-open::after{
  content:'';position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;
}
.mk-day.is-open:hover{background:rgba(var(--mk-rgb),.2)}
.mk-day.is-shut{color:var(--ink-3);cursor:default;font-weight:500}
.mk-day.is-shut:hover{background:transparent}
.mk-day.is-today{box-shadow:inset 0 0 0 1.5px var(--line)}
.mk-day.is-on{background:var(--mk);color:#fff;box-shadow:0 6px 16px rgba(var(--mk-rgb),.34)}
.mk-day.is-on::after{background:#fff;opacity:.9}
.mk-day:focus-visible,.mk-t:focus-visible,.mk-dur:focus-visible,.mk-nav:focus-visible,
.mk-go:focus-visible,.mk-back:focus-visible,.mk-view:focus-visible,.mk-ck:focus-visible,
.mk-tzb:focus-visible,.mk-soon-b:focus-visible,.mk-jump:focus-visible,.mk-sum-chg:focus-visible,
.mk-cal-add a:focus-visible,.mk-cal-add button:focus-visible,.mk-act:focus-visible{
  outline:2px solid var(--mk);outline-offset:2px;
}

/* ── the times ─────────────────────────────────────────────────────────── */
.mk-times{padding:4px 22px 24px;min-width:0}
.mk-times[hidden]{display:none}
.mk-times-hd{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 14px;font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.mk-times-n{
  margin-left:auto;padding:2px 9px;border-radius:var(--r-pill);
  background:rgba(var(--mk-rgb),.1);color:var(--mk);font-size:11.5px;font-weight:700;
}
.mk-gone{color:#d9480f;font-size:13.5px}
.mk-alldays{
  display:inline-flex;align-items:center;gap:5px;margin-right:4px;
  border:0;background:var(--line-2);border-radius:var(--r-pill);
  padding:5px 11px 5px 7px;font:650 12px var(--font);color:var(--ink-2);cursor:pointer;
}
.mk-alldays:hover{color:var(--mk)}
.mk-times-list{max-height:430px;overflow-y:auto;padding:2px;margin:-2px;scrollbar-width:thin}
.mk-l-classic .mk-times-list,.mk-l-split .mk-times-list{max-height:400px}
.mk-tg + .mk-tg{margin-top:14px}
.mk-tg-hd{
  display:flex;align-items:center;gap:6px;margin:0 0 8px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.mk-tg-hd span{font-weight:600;letter-spacing:0;color:var(--ink-3);opacity:.8}
.mk-tg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.mk-l-classic .mk-tg-list,.mk-l-split .mk-tg-list{grid-template-columns:1fr}

.mk-t{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:11px 10px;border-radius:var(--r);
  border:1.5px solid rgba(var(--mk-rgb),.3);
  background:transparent;color:var(--mk);
  font:680 14px/1.1 var(--font);font-variant-numeric:tabular-nums;
  cursor:pointer;transition:all .14s var(--ease);
}
.mk-t:hover{background:rgba(var(--mk-rgb),.1);border-color:var(--mk)}
.mk-t.is-on{background:var(--mk);border-color:var(--mk);color:#fff}
.mk-t-seat{font-size:10.5px;font-weight:600;color:var(--ink-3)}
.mk-t:hover .mk-t-seat{color:var(--mk)}

/* ── the week ──────────────────────────────────────────────────────────── */
.mk-week{padding:2px 24px 24px;min-width:0}
.mk-week[hidden]{display:none}
.mk-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.mk-wk-col{min-width:0;display:flex;flex-direction:column;gap:8px}
.mk-wk-hd{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:10px 4px;border-radius:12px;background:var(--line-2);
}
.mk-wk-col.is-open .mk-wk-hd{background:rgba(var(--mk-rgb),.08)}
.mk-wk-col.is-today .mk-wk-hd{box-shadow:inset 0 0 0 1.5px rgba(var(--mk-rgb),.45)}
.mk-wk-dow{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mk-wk-d{font-size:20px;font-weight:720;line-height:1.15;color:var(--ink)}
.mk-wk-col.is-open .mk-wk-d{color:var(--mk)}
.mk-wk-n{font-size:10.5px;font-weight:600;color:var(--ink-3)}
.mk-wk-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto;padding:1px;scrollbar-width:thin}
.mk-wk-list .mk-t{padding:9px 4px;font-size:13px}
.mk-wk-none{display:block;height:2px;margin:14px auto 0;width:18px;border-radius:2px;background:var(--line)}
.mk-week .mk-empty{margin-top:14px}

/* ── nothing free ──────────────────────────────────────────────────────── */
.mk-empty{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:28px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.5;
  border-radius:14px;background:rgba(var(--mk-rgb),.035);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.mk-empty-ic{
  width:40px;height:40px;border-radius:50%;margin-bottom:4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--mk-rgb),.1);color:var(--mk);
}
.mk-empty-ic .mk-ic{width:18px;height:18px;flex-basis:18px}
.mk-empty strong{display:block;color:var(--ink);font-size:14.5px;font-weight:680}
.mk-jump{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:9px 16px;border-radius:var(--r-pill);border:0;
  background:var(--mk);color:#fff;font:650 13px var(--font);cursor:pointer;
  box-shadow:0 4px 14px rgba(var(--mk-rgb),.3);transition:all .15s var(--ease);
}
.mk-jump:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* loading: bars where the times will be, not a spinner over nothing */
.mk-skel{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.mk-l-classic .mk-skel,.mk-l-split .mk-skel{grid-template-columns:1fr}
.mk-skel-b{height:41px;border-radius:var(--r);background:var(--line-2);
  animation:mkPulse 1.3s ease-in-out infinite}
.mk-skel-b:nth-child(2){animation-delay:.08s}
.mk-skel-b:nth-child(3){animation-delay:.16s}
.mk-skel-b:nth-child(4){animation-delay:.24s}
.mk-skel-b:nth-child(5){animation-delay:.32s}
.mk-skel-b:nth-child(6){animation-delay:.4s}
@keyframes mkPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ═══ the details ═══════════════════════════════════════════════════════ */
.mk-back{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;
  border:0;background:none;padding:6px 10px 6px 4px;border-radius:var(--r-pill);
  color:var(--ink-2);font:600 12.5px var(--font);cursor:pointer;
}
.mk-back:hover{background:var(--line-2);color:var(--ink)}

/* The chosen time, as a card worth reading: a calendar leaf, the day and
   the time range, and the facts that matter for it. */
.mk-chosen{margin-bottom:24px}
.mk-sum{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;
  background:rgba(var(--mk-rgb),.07);
  box-shadow:inset 0 0 0 1px rgba(var(--mk-rgb),.16);
}
.mk-leaf{
  width:52px;flex:0 0 52px;border-radius:11px;overflow:hidden;text-align:center;
  background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.mk-leaf-m{display:block;padding:3px 0;background:var(--mk);color:#fff;
  font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.mk-leaf-d{display:block;padding:4px 0 5px;font-size:21px;font-weight:750;line-height:1.1;color:var(--ink)}
.mk-sum-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mk-sum-main strong{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mk-sum-main span{font-size:14px;font-weight:600;color:var(--mk);font-variant-numeric:tabular-nums}
.mk-sum-chg{
  flex-shrink:0;border:1.5px solid rgba(var(--mk-rgb),.35);background:var(--card);
  border-radius:var(--r-pill);padding:7px 14px;
  font:650 12.5px var(--font);color:var(--mk);cursor:pointer;transition:all .15s var(--ease);
}
.mk-sum-chg:hover{background:rgba(var(--mk-rgb),.1)}
.mk-sum-rows{list-style:none;margin:12px 2px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.mk-sum-rows li{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.mk-sum-rows .mk-ic{color:var(--ink-3)}

.mk-form-hd{margin:0 0 16px;font-size:17px;font-weight:700;letter-spacing:-.01em}

.mk-field{margin-bottom:15px}
.mk-field label{
  display:block;margin-bottom:6px;
  font-size:12.5px;font-weight:650;color:var(--ink-2);
}
.mk-opt{font-weight:500;color:var(--ink-3)}
/* Text-like boxes only. Checkboxes, radios and uploads have their own look
   below; this rule used to catch them too and stretched each checkbox into a
   full-width empty box. */
.mk-field input,.mk-field textarea,.mk-dataform input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),.mk-dataform textarea,.mk-dataform select{
  width:100%;padding:11px 13px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--card);
  font:400 14.5px var(--font);color:var(--ink);
  transition:border-color .14s,box-shadow .14s;
}
.mk-field textarea{resize:vertical;min-height:76px}
.mk-field input:focus,.mk-field textarea:focus,
.mk-dataform input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):focus,.mk-dataform textarea:focus,.mk-dataform select:focus{
  outline:0;border-color:var(--mk);box-shadow:0 0 0 3px rgba(var(--mk-rgb),.14);
}
.mk-field input[aria-invalid="true"],.mk-dataform [aria-invalid="true"]:not([type=checkbox]):not([type=radio]){border-color:#e2464a;box-shadow:0 0 0 3px rgba(226,70,74,.12)}

.mk-hint{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-3)}
.mk-err{display:block;margin-top:5px;font-size:12px;font-weight:600;color:#e2464a;min-height:0}
.mk-err:empty{display:none}
.mk-err-top{margin:12px 0 0}

.mk-guests{margin:0 0 18px}
.mk-guests summary{
  cursor:pointer;font-size:12.5px;font-weight:650;color:var(--mk);
  padding:6px 0;list-style:none;
}
.mk-guests summary::-webkit-details-marker{display:none}
.mk-guests summary::before{content:'+ ';font-weight:700}
.mk-guests[open] summary::before{content:'\2212 '}

/* The account's own form keeps its fields and loses its own submit: there is
   one submit on this page and it sends everything. */
.mk-dataform{margin-bottom:6px}
.mk-dataform.is-empty{display:none}
/* The account's form builder writes list items and inline-block name halves.
   Neither belongs on this page: no bullets, one field per row. */
.mk-dataform li{list-style:none;margin:0 0 15px;padding:0}
.mk-dataform .name-field{display:block!important;margin-bottom:15px}
.mk-dataform .mk-df-dup{display:none!important}
.mk-dataform [type="submit"],.mk-dataform button[type="submit"],
.mk-dataform .btn-submit,.mk-dataform .form-submit{display:none!important}
.mk-dataform label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.mk-dataform .form-group,.mk-dataform .field{margin-bottom:15px}

.mk-go{
  width:100%;padding:14px 18px;border:0;border-radius:var(--r);
  background:var(--mk);color:#fff;
  font:700 15px var(--font);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 6px 18px rgba(var(--mk-rgb),.28);
  transition:filter .14s,box-shadow .14s,transform .14s var(--ease);
}
.mk-go:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 10px 26px rgba(var(--mk-rgb),.36);transform:translateY(-1px)}
.mk-go:disabled{opacity:.62;cursor:default}
.mk-spin{
  width:15px;height:15px;border-radius:50%;display:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:mkSpin .7s linear infinite;
}
.mk-go.is-busy .mk-spin{display:inline-block}
@keyframes mkSpin{to{transform:rotate(360deg)}}
.mk-assure{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:12px 0 0;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.45;
}
.mk-assure .mk-ic{color:var(--ink-3)}

/* ═══ done ══════════════════════════════════════════════════════════════ */
.mk-done{padding:52px 28px 56px;text-align:center;grid-column:1/-1}
.mk-tick{
  width:64px;height:64px;border-radius:50%;margin:0 auto 20px;
  background:rgba(40,199,111,.14);
  display:flex;align-items:center;justify-content:center;
  animation:mkPop .45s var(--ease) both;
}
@keyframes mkPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.mk-tick svg{width:30px;height:30px;fill:none;stroke:#1fa85c;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mk-tick svg path{stroke-dasharray:32;stroke-dashoffset:32;animation:mkDraw .5s .15s var(--ease) forwards}
@keyframes mkDraw{to{stroke-dashoffset:0}}
.mk-done h2{margin:0 0 8px;font-size:24px;font-weight:720;letter-spacing:-.022em}
.mk-done-when{margin:0 0 16px;font-size:16px;font-weight:650;color:var(--mk)}
.mk-done-card{
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
  margin:0 auto 18px;padding:12px 18px;border-radius:14px;
  background:rgba(var(--mk-rgb),.06);box-shadow:inset 0 0 0 1px var(--line-2);
}
.mk-done-card:empty{display:none}
.mk-dc-row{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.mk-dc-row .mk-ic{color:var(--ink-3)}
.mk-done-body{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:440px;margin:0 auto}
.mk-done-body strong{color:var(--ink);font-weight:650}

.mk-cal-add{margin:26px auto 0;max-width:480px}
.mk-cal-add[hidden]{display:none}
.mk-cal-add-hd{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mk-cal-add-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mk-cal-add a,.mk-cal-add button{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--card);
  color:var(--ink);font:650 13px var(--font);text-decoration:none;cursor:pointer;
  transition:all .14s var(--ease);
}
.mk-cal-add a:hover,.mk-cal-add button:hover{border-color:rgba(var(--mk-rgb),.5);color:var(--mk);transform:translateY(-1px)}

.mk-done-acts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.mk-done-acts:empty{display:none}
.mk-act{
  padding:10px 18px;border-radius:var(--r-pill);
  border:0;background:transparent;
  color:var(--ink-2);font:650 13px var(--font);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);
}
.mk-act:hover{color:var(--mk);text-decoration-color:currentColor}

.mk-redir{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:22px auto 0;padding:10px 14px;max-width:420px;border-radius:var(--r-pill);
  background:var(--line-2);font-size:13px;color:var(--ink-2);
}
.mk-redir[hidden]{display:none}
.mk-redir button{
  border:0;border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;
  font:650 12.5px var(--font);background:transparent;color:var(--ink-2);
}
.mk-redir #mkRedirGo{background:var(--mk);color:#fff}

/* ═══ narrow ════════════════════════════════════════════════════════════
   Every layout becomes one column. The month keeps 44px tap targets, the
   times go two-up, and the zone picker takes the full width. */
@media (max-width:780px){
  body.mk-body{padding:0}
  .mk-shell{border-radius:0;box-shadow:none;max-width:none;min-height:100vh;
    grid-template-columns:minmax(0,1fr)!important}
  .mk-about{
    border-right:0!important;border-bottom:1px solid var(--line-2);
    padding:22px 18px;display:block!important;text-align:left!important;
  }
  .mk-l-focus .mk-who,.mk-l-focus .mk-facts,.mk-l-focus .mk-durs{justify-content:flex-start}
  .mk-l-strip .mk-who,.mk-l-split .mk-who{margin-bottom:12px}
  .mk-title{font-size:22px;margin-bottom:12px}
  .mk-l-split .mk-facts,.mk-l-strip .mk-facts{margin-top:10px}
  .mk-l-split .mk-durs,.mk-l-strip .mk-durs{margin-top:12px}
  .mk-desc{display:none}
  .mk-soon{margin-top:18px;padding-top:16px}
  .mk-views{display:none}
  .mk-pick-hd{padding:16px 14px 4px;justify-content:center}
  .mk-mon{width:100%;justify-content:space-between}
  .mk-tools{padding:6px 16px 12px}
  .mk-tz{flex:1 1 auto}
  .mk-tzb{width:100%;min-height:44px}
  .mk-tzb-car{margin-left:auto}
  .mk-tzp{width:100%;max-width:none}
  .mk-ck{min-height:44px;min-width:48px}
  .mk-body-pick{display:block!important}
  .mk-cal-wrap{padding:0 14px 16px}
  .mk-times{padding:16px 16px 24px;border-top:1px solid var(--line-2);border-left:0!important}
  .mk-times-list{max-height:none!important}
  .mk-tg-list,.mk-l-classic .mk-tg-list,.mk-l-split .mk-tg-list{grid-template-columns:1fr 1fr!important}
  .mk-form,.mk-l-classic .mk-form{padding:20px 16px 28px;grid-column:1/-1!important;max-width:none!important}
  .mk-sum{padding:12px 13px}
  .mk-done{padding:40px 18px 44px}

  /* ── 44px, everywhere a thumb lands ─────────────────────────────────
     min-height rather than more padding: padding has to be recalculated
     every time the font changes, and a height cannot be argued with.
     Measured by tools/bv3_console/verify_meet/verify_meet_public.js. */
  .mk-day{min-height:44px;max-height:52px}
  .mk-t{padding:13px 10px;min-height:48px}
  .mk-nav{width:44px;height:44px}
  .mk-dur{min-height:44px}
  .mk-soon-b{min-height:48px}
  .mk-go{padding:15px 18px;min-height:52px}
  .mk-back,.mk-sum-chg,.mk-alldays{min-height:44px}
  .mk-guests > summary{min-height:44px;display:flex;align-items:center}
  .mk-cal-add a,.mk-cal-add button,.mk-jump{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .mk-tick svg path{stroke-dashoffset:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE MANAGE PAGE  —  /api/meet/manage/{token}
   ───────────────────────────────────────────────────────────────────────────
   One narrow column. Somebody arrives here from an email with one question in
   mind ("is it still Tuesday at ten?") and at most one thing to do about it,
   so the facts come first at a size you can read on a phone in a corridor,
   and the two actions sit under them in the order people want them: move it,
   then, behind a disclosure, cancel it.

   Cancelling is the destructive one, so it is NOT a bare button. It is a
   details/summary that opens a short form — one deliberate extra tap, and
   room to say why, which is the thing the host actually wants to know.

   No left accent bar anywhere (feedback-no-left-border-radius-cards): the
   status notes carry their meaning in a tinted fill, a ring and an icon.
   ═══════════════════════════════════════════════════════════════════════════ */

body.mk-manage{align-items:flex-start}

.mk-mg{
  max-width:520px;
  display:block;
  padding:30px 30px 34px;
}

/* ── who it is with ───────────────────────────────────────────────────── */
.mk-mg-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.mk-mg .mk-logo{margin:0;max-width:44px;border-radius:10px}
/* "With Sarah Chen", not "SARAH CHEN". Uppercase turns a person's name into
   a field label, and this is the one line on the page that says who the
   meeting is with. */
.mk-mg-with{margin:0;font-size:14px;color:var(--ink-3)}
.mk-mg-with strong{font-weight:650;color:var(--ink-2)}

/* ── what just happened ───────────────────────────────────────────────── */
.mk-mg-note{
  display:flex;align-items:flex-start;gap:10px;
  margin:0 0 20px;padding:12px 14px;
  border-radius:var(--r);
  font-size:13.5px;line-height:1.5;font-weight:550;
}
.mk-mg-note .mk-ic{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
/* Meaning from the fill and the ring, both drawn from one hue so a tenant
   color never collides with a status color. */
.mk-mg-note--done{
  background:rgba(22,163,74,.09);
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.22);
  color:#15803d;
}
.mk-mg-note--stop{
  background:rgba(220,38,38,.08);
  box-shadow:inset 0 0 0 1px rgba(220,38,38,.2);
  color:#b91c1c;
}
html[data-theme="dark"] .mk-mg-note--done{color:#4ade80}
html[data-theme="dark"] .mk-mg-note--stop{color:#fca5a5}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .mk-mg-note--done{color:#4ade80}
  html:not([data-theme="light"]) .mk-mg-note--stop{color:#fca5a5}
}

/* ── the meeting ──────────────────────────────────────────────────────── */
.mk-mg-title{
  margin:0 0 6px;font-size:23px;font-weight:680;letter-spacing:-.022em;
  line-height:1.25;color:var(--ink);
}
.mk-mg-sub{margin:0 0 4px;font-size:14px;color:var(--ink-2)}
body.is-cancelled .mk-mg-title{color:var(--ink-2);text-decoration:line-through;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(220,38,38,.5)}

.mk-mg-facts{margin:20px 0 0;padding:0;display:grid}
.mk-mg-fact{
  display:grid;grid-template-columns:132px minmax(0,1fr);
  align-items:start;gap:14px;
  padding:13px 0;
  border-bottom:1px solid var(--line-2);
}
/* No trailing rule AND no trailing space: the actions below bring their own
   divider, so a gap here reads as a missing row. */
.mk-mg-fact:last-child{border-bottom:0;padding-bottom:0}
.mk-mg-fact dt{
  display:flex;align-items:center;gap:7px;
  margin:0;font-size:12.5px;font-weight:600;color:var(--ink-3);
}
.mk-mg-fact dt .mk-ic{color:var(--mk);opacity:.8}
.mk-mg-fact dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.mk-mg-fact dd strong{font-weight:650;letter-spacing:-.01em}
.mk-mg-tz{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}

/* ── joining ──────────────────────────────────────────────────────────── */
.mk-mg-join{
  display:block;margin:22px 0 0;padding:14px 18px;
  border-radius:var(--r-pill);
  background:linear-gradient(140deg,var(--mk),rgba(var(--mk-rgb),.62));
  color:#fff;font:660 15px var(--font);text-align:center;text-decoration:none;
  box-shadow:0 4px 16px rgba(var(--mk-rgb),.28);
  transition:all .14s var(--ease);
}
.mk-mg-join:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(var(--mk-rgb),.34)}

/* ── the two things you can do ────────────────────────────────────────── */
.mk-mg-acts{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)}

.mk-mg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 18px;
  border-radius:var(--r-pill);
  border:1.5px solid rgba(var(--mk-rgb),.4);
  background:transparent;color:var(--mk);
  font:650 14px var(--font);text-decoration:none;cursor:pointer;
  transition:all .14s var(--ease);
}
.mk-mg-btn:hover{background:rgba(var(--mk-rgb),.1);transform:translateY(-1px)}
.mk-mg-btn--go,.mk-mg-btn--go:hover{background:rgb(var(--mk-rgb));border-color:rgb(var(--mk-rgb));color:#fff}   /* s8confirm */
.mk-mg-btn .mk-ic{width:16px;height:16px;flex:0 0 16px}

/* Cancelling is not the tenant's color - it is the one action on this page
   that destroys something, and it should not look like the primary one. */
.mk-mg-btn--stop{
  margin-top:12px;
  border-color:rgba(220,38,38,.42);color:#b91c1c;
}
.mk-mg-btn--stop:hover{background:rgba(220,38,38,.08)}
html[data-theme="dark"] .mk-mg-btn--stop{color:#fca5a5}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .mk-mg-btn--stop{color:#fca5a5}
}

/* ── cancelling, one tap further in ───────────────────────────────────── */
.mk-mg-cancel{margin-top:12px}
.mk-mg-cancel > summary{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 14px;border-radius:var(--r-pill);
  font:600 13.5px var(--font);color:var(--ink-3);
  cursor:pointer;list-style:none;
  transition:color .14s var(--ease),background .14s var(--ease);
}
.mk-mg-cancel > summary::-webkit-details-marker{display:none}
.mk-mg-cancel > summary:hover{color:#b91c1c;background:rgba(220,38,38,.06)}
.mk-mg-cancel > summary .mk-ic{width:14px;height:14px;flex:0 0 14px}
.mk-mg-cancel[open] > summary{color:var(--ink-2)}
.mk-mg-cancel form{
  margin-top:10px;padding:16px;
  border-radius:var(--r);
  background:rgba(var(--mk-rgb),.045);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.mk-mg-cancel label{
  display:block;margin-bottom:6px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
}
.mk-mg-cancel textarea{
  display:block;width:100%;padding:11px 12px;
  border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--ink);
  font:400 14px/1.5 var(--font);resize:vertical;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.mk-mg-cancel textarea:focus{
  outline:0;border-color:var(--mk);box-shadow:0 0 0 3px rgba(var(--mk-rgb),.14);
}
.mk-mg-cancel .mk-hint{text-align:center}

/* Why an action is missing, said rather than silently dropped. */
.mk-mg-why{
  margin:0;padding:12px 14px;
  border-radius:var(--r);
  background:rgba(var(--mk-rgb),.05);
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:13px;line-height:1.55;color:var(--ink-2);
}
.mk-mg-why + .mk-mg-why,.mk-mg-btn + .mk-mg-why{margin-top:12px}

@media (max-width:780px){
  .mk-mg{max-width:none;border-radius:0;box-shadow:none;min-height:100vh;
    padding:24px 18px 34px}
  .mk-mg-title{font-size:21px}
  /* Label above value: 132px of label next to a date is a two-word column
     on a 360px screen. */
  .mk-mg-fact{grid-template-columns:minmax(0,1fr);gap:5px}
  /* 44px of height for every tap target, including the disclosure. */
  .mk-mg-btn,.mk-mg-cancel > summary{min-height:46px}
}

/* ═══ moving an existing meeting ════════════════════════════════════════
   Above the card, the same width as it, and it reads as information rather
   than a warning: nothing has gone wrong, the page is just doing something
   slightly different from usual. Tinted fill and a ring, no accent bar.

   `is-moving` comes from the server rather than from :has() on the banner,
   because the layout of the whole page depends on it and a booking page
   should not need a 2022 browser to be centred. */
body.mk-body.is-moving{flex-direction:column;align-items:center}

.mk-moving{
  width:100%;max-width:920px;
  margin:0 auto 14px;
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;
  border-radius:var(--r);
  background:rgba(var(--mk-rgb),.08);
  box-shadow:inset 0 0 0 1px rgba(var(--mk-rgb),.2);
  color:var(--ink);
  font-size:13.5px;line-height:1.5;
}
.mk-moving .mk-ic{width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:var(--mk)}
.mk-moving strong{font-weight:650}
/* The layouts have different card widths, so the banner matches whichever one
   it is sitting above rather than floating at its own width. */
.mk-l-split .mk-moving{max-width:1040px}
.mk-l-focus .mk-moving{max-width:560px}
body.is-embed .mk-moving{max-width:none;margin:0;border-radius:0;
  box-shadow:inset 0 -1px 0 var(--line-2)}

@media (max-width:780px){
  .mk-moving{max-width:none!important;margin:0;border-radius:0;
    box-shadow:inset 0 -1px 0 var(--line-2);font-size:13px}
}

/* ═══ one header row on a wide screen ════════════════════════════════════
   Month, zone and clock, then the view switch on the right, in one line
   instead of two. `display:contents` lifts the header's own children into
   the same row as the tools, so the markup stays one header for readers. */
@media (min-width:781px){
  .mk-l-classic .mk-pick,.mk-l-split .mk-pick,.mk-l-strip .mk-pick{
    flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start;
    padding-top:18px;row-gap:12px;
  }
  .mk-l-classic .mk-pick-hd,.mk-l-split .mk-pick-hd,.mk-l-strip .mk-pick-hd{display:contents}
  .mk-l-classic .mk-mon,.mk-l-split .mk-mon,.mk-l-strip .mk-mon{order:1;margin-left:18px}
  .mk-l-classic .mk-tools,.mk-l-split .mk-tools,.mk-l-strip .mk-tools{order:2;padding:0 0 0 6px}
  .mk-l-classic .mk-views,.mk-l-split .mk-views{order:3;margin:0 24px 0 auto}
  .mk-l-strip .mk-tools{margin-right:22px;margin-left:auto}
  .mk-l-classic .mk-body-pick,.mk-l-split .mk-body-pick,.mk-l-strip .mk-body-pick{order:4;flex:1 1 100%;min-width:0}
  .mk-l-strip .mk-cal-wrap{padding-top:0}
  .mk-l-classic .mk-times,.mk-l-split .mk-times{padding-top:4px}
}

/* The details sit centred in the space the calendar had, at a width a form
   reads well at, and the confirmation takes the same place in classic so it
   never drops below the details column. */
.mk-l-classic .mk-form,.mk-l-classic .mk-done{grid-column:2/-1}
.mk-l-classic.st-form .mk-form{max-width:600px;width:100%;justify-self:center}
.no-details .mk-done{grid-column:1/-1}
/* Once a time is chosen, the soonest times have done their job. */
.st-form .mk-soon,.st-done .mk-soon{display:none!important}


/* ═══ fields ════════════════════════════════════════════════════════════
   One field system for our own three questions and for every type the
   account's form builder can produce. page.js (enhanceDataForm) rebuilds
   the builder's markup into these parts; the builder's own theme is not
   loaded here.

   Every box is the same 48px, the same radius and the same quiet fill, so a
   long form reads as one thing. Colour comes from the page's own `--mk`. */
:root{--field:#fafafc;--field-hover:rgba(0,0,0,.18);--err:#e2464a}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){--field:rgba(255,255,255,.035);--field-hover:rgba(255,255,255,.26)}
}
html[data-theme="dark"]{--field:rgba(255,255,255,.035);--field-hover:rgba(255,255,255,.26)}

/* ── labels ────────────────────────────────────────────────────────────── */
.mk-field label,.mk-dataform .form-field-label,.mk-dataform .mk-group-l,.mk-dataform .name-field > label{
  display:block;margin:0 0 8px;font-size:13px;font-weight:650;color:var(--ink);letter-spacing:-.005em}
.mk-dataform .form-field-label span:not(.mk-req),.mk-dataform .mk-group-l span:not(.mk-req){
  margin-left:6px;font-weight:500;color:var(--ink-3)}
.mk-req{margin-left:3px;color:var(--mk);font-weight:750}
.mk-dataform li{list-style:none;margin:0 0 18px;padding:0}
.mk-field{margin-bottom:18px}

/* ── the box ───────────────────────────────────────────────────────────── */
.mk-field input,.mk-field textarea,
.mk-dataform input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.mk-dataform textarea,.mk-sel-btn{
  width:100%;min-height:48px;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--line);background-color:var(--field);
  font:400 14.5px/1.4 var(--font);color:var(--ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.mk-field textarea,.mk-dataform textarea{min-height:96px;resize:vertical}
.mk-field input:hover,.mk-field textarea:hover,
.mk-dataform input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,
.mk-dataform textarea:hover,.mk-sel-btn:hover{border-color:var(--field-hover)}
.mk-field input:focus,.mk-field textarea:focus,
.mk-dataform input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
.mk-dataform textarea:focus,.mk-sel-btn:focus-visible,.mk-sel.is-open .mk-sel-btn{
  outline:0;border-color:var(--mk);background-color:var(--card);box-shadow:0 0 0 4px rgba(var(--mk-rgb),.13)}
.mk-field input::placeholder,.mk-field textarea::placeholder,
.mk-dataform input::placeholder,.mk-dataform textarea::placeholder{color:var(--ink-3)}
.mk-field [aria-invalid="true"],.mk-dataform [aria-invalid="true"]:not([type=checkbox]):not([type=radio]){
  border-color:var(--err)!important;box-shadow:0 0 0 4px rgba(226,70,74,.11)!important}

/* an icon inside the box */
.mk-inp{position:relative;display:block}
.mk-inp > .mk-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--ink-3);pointer-events:none;transition:color .15s}
.mk-inp > input{padding-left:42px!important}
.mk-inp:focus-within > .mk-ic{color:var(--mk)}
.mk-cur{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:15px;font-weight:650;color:var(--ink-3);pointer-events:none}
.mk-money:focus-within .mk-cur{color:var(--mk)}
.mk-money > input{padding-left:32px!important;font-variant-numeric:tabular-nums}

/* dates: the browser's own picker, in the page's scheme */
.mk-dataform input[type=date]{color-scheme:light;cursor:pointer}
html[data-theme="dark"] .mk-dataform input[type=date]{color-scheme:dark}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .mk-dataform input[type=date]{color-scheme:dark}}
/* Ours is the icon; the browser's is kept for its click target but not drawn. */
.mk-dataform input[type=date]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
.mk-dataform input[type=date]:invalid,.mk-dataform input[type=date]:not(:focus)[value=""]{color:var(--ink-3)}

/* ── a section of the form ─────────────────────────────────────────────── */
.mk-dataform h2.cfLabel{
  display:flex;align-items:center;gap:12px;margin:26px 0 16px;padding:0;border:0;
  font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--mk)}
.mk-dataform h2.cfLabel::after{content:'';flex:1 1 auto;height:1px;background:var(--line)}
.mk-dataform > h2.cfLabel:first-child{margin-top:6px}

/* ── choices: one of (radio), any of (ticks) ───────────────────────────
   A card per option. The real input is kept for the keyboard and for the
   answer; the card is the label, so the whole of it is the target. */
.mk-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.mk-choice{position:relative;min-width:0}
.mk-choice > input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mk-choice-l{
  display:flex!important;align-items:center;gap:12px;margin:0!important;
  min-height:52px;padding:13px 14px;border-radius:14px;
  border:1.5px solid var(--line);background:var(--field);
  font-size:14px!important;font-weight:550!important;color:var(--ink)!important;line-height:1.35;
  cursor:pointer;user-select:none;
  transition:border-color .15s,background .15s,box-shadow .15s,transform .15s var(--ease);
}
.mk-choice-l:hover{border-color:rgba(var(--mk-rgb),.5);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(var(--mk-rgb),.1)}
.mk-choice.is-on .mk-choice-l{
  border-color:var(--mk);background:rgba(var(--mk-rgb),.07);font-weight:650!important;
  box-shadow:0 0 0 3px rgba(var(--mk-rgb),.1)}
.mk-choice > input:focus-visible + .mk-choice-l{outline:2px solid var(--mk);outline-offset:2px}

/* the mark */
.mk-ind{
  position:relative;flex:0 0 22px;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.8px solid var(--field-hover);background:var(--card);
  transition:all .18s var(--ease)}
.mk-choice--check .mk-ind{border-radius:7px}
.mk-choice--radio .mk-ind{border-radius:50%}
.mk-tk{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .22s .04s var(--ease)}
.mk-dot{width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .2s var(--ease)}
.mk-choice-l:hover .mk-ind{border-color:var(--mk)}
.mk-choice.is-on .mk-ind{background:var(--mk);border-color:var(--mk);box-shadow:0 2px 8px rgba(var(--mk-rgb),.35)}
.mk-choice.is-on .mk-tk{stroke-dashoffset:0}
.mk-choice.is-on .mk-dot{transform:scale(1)}

/* a single tick box (consent, opt-in): a line of fine print, not a card */
.mk-dataform .mk-one{margin:4px 0 12px}
.mk-choice--single .mk-choice-l{
  align-items:flex-start;min-height:0;padding:12px 14px;border-style:dashed;background:transparent;
  font-size:13px!important;font-weight:500!important;color:var(--ink-2)!important;line-height:1.5}
.mk-choice--single .mk-ind{margin-top:0}
.mk-choice--single.is-on .mk-choice-l{border-style:solid;background:rgba(var(--mk-rgb),.05);
  font-weight:500!important;color:var(--ink)!important;box-shadow:none}
.mk-choice--single .mk-choice-l:hover{transform:none;box-shadow:none}

/* ── the dropdown ──────────────────────────────────────────────────────── */
.mk-sel{position:relative}
.mk-sel-native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;
  min-height:0!important;opacity:0;pointer-events:none;padding:0!important;border:0!important}
.mk-sel-btn{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}
.mk-sel-btn:disabled{cursor:default;opacity:.6}
.mk-sel-t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-sel-t.is-ph{color:var(--ink-3)}
.mk-sel.has-val .mk-sel-t{font-weight:550}
.mk-sel-car{width:16px;height:16px;flex:0 0 16px;color:var(--ink-3);transition:transform .2s var(--ease)}
.mk-sel.is-open .mk-sel-car{transform:rotate(180deg);color:var(--mk)}
.mk-sel-pop{
  position:absolute;z-index:35;left:0;right:0;top:calc(100% + 6px);
  background:var(--card);border-radius:14px;padding:6px;
  box-shadow:0 0 0 1px var(--line),var(--shadow-lift);
  animation:mkPopIn .16s var(--ease)}
.mk-sel-pop[hidden]{display:none}
@keyframes mkPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mk-sel-qw{position:relative;margin-bottom:6px}
.mk-sel-qw .mk-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.mk-sel-q{width:100%;padding:10px 12px 10px 34px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--field);font:400 14px var(--font);color:var(--ink)}
.mk-sel-q:focus{outline:0;border-color:var(--mk)}
.mk-sel-list{max-height:264px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mk-sel-o{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:0;border-radius:9px;background:transparent;
  font:500 14px var(--font);color:var(--ink);text-align:left;cursor:pointer}
.mk-sel-o span{flex:1 1 auto;min-width:0}
.mk-sel-o .mk-tk{flex:0 0 14px;stroke:var(--mk);stroke-dashoffset:16}
.mk-sel-o:hover,.mk-sel-o.is-active,.mk-sel-o:focus-visible{background:rgba(var(--mk-rgb),.08);outline:0}
.mk-sel-o.is-on{color:var(--mk);font-weight:650}
.mk-sel-o.is-on .mk-tk{stroke-dashoffset:0}
.mk-sel-none{margin:0;padding:14px;text-align:center;font-size:13px;color:var(--ink-3)}

/* ── uploads ───────────────────────────────────────────────────────────── */
.mk-drop{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:22px 16px;border-radius:14px;text-align:center;
  border:1.5px dashed rgba(var(--mk-rgb),.38);background:rgba(var(--mk-rgb),.03);
  transition:border-color .15s,background .15s,box-shadow .15s}
/* The real input covers the zone, invisible: a click opens the picker and a
   dropped file lands on it, with nothing to emulate. */
.mk-drop > input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  border:0!important;padding:0!important;min-height:0!important}
.mk-drop:hover,.mk-drop.is-over{border-color:var(--mk);border-style:solid;background:rgba(var(--mk-rgb),.07)}
.mk-drop:focus-within{box-shadow:0 0 0 4px rgba(var(--mk-rgb),.13);border-color:var(--mk)}
.mk-drop-ic{width:42px;height:42px;border-radius:50%;margin-bottom:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--mk-rgb),.12);color:var(--mk);transition:transform .2s var(--ease)}
.mk-drop-ic .mk-ic{width:20px;height:20px;flex-basis:20px;stroke-width:1.7}
.mk-drop:hover .mk-drop-ic,.mk-drop.is-over .mk-drop-ic{transform:translateY(-2px)}
.mk-drop-t{font-size:13.5px;color:var(--ink-2)}
.mk-drop-t strong{color:var(--mk);font-weight:680}
.mk-drop-s{font-size:11.5px;color:var(--ink-3)}
.mk-drop.has-files{padding:14px 16px}
.mk-drop.has-files .mk-drop-ic{width:32px;height:32px;margin-bottom:2px}
.mk-files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.mk-files:empty{display:none}
.mk-file{
  display:flex;align-items:center;gap:9px;padding:8px 8px 8px 12px;border-radius:11px;
  border:1.5px solid var(--line);background:var(--field);font-size:13px;color:var(--ink);
  animation:mkPopIn .18s var(--ease)}
.mk-file > .mk-ic{color:var(--mk)}
.mk-file-n{flex:1 1 auto;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-file-s{flex-shrink:0;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mk-file-x{flex-shrink:0;width:30px;height:30px;border:0;border-radius:50%;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);cursor:pointer}
.mk-file-x:hover{background:rgba(226,70,74,.1);color:var(--err)}

/* ── a missing required answer, said beside it ─────────────────────────── */
.mk-dataform .has-err .mk-choice-l{border-color:rgba(226,70,74,.55)}
.mk-dataform .has-err .mk-drop{border-color:rgba(226,70,74,.6)}
.mk-dataform .mk-df-err{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--err)}
.mk-dataform .mk-df-err::before{content:'!';display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--err);color:#fff;font-size:11px;font-weight:800}

@media (max-width:780px){
  .mk-choices{grid-template-columns:1fr}
  .mk-choice-l{min-height:54px}
  .mk-sel-list{max-height:52vh}
}


/* ── dates: BV3DatePicker on this page ─────────────────────────────────
   The console's picker reads the console's colour tokens. Here they are the
   page's own, so the calendar wears the account's colour; the popover is
   drawn on <body>, so these sit on :root. */
:root{
  --brand-primary:var(--mk);--brand-primary-rgb:var(--mk-rgb);
  --ll-primary:var(--mk);--ll-primary-rgb:var(--mk-rgb);
  --ll-text-primary:var(--ink);--ll-text-secondary:var(--ink-2);--ll-text-muted:var(--ink-3);
  --ll-ease:var(--ease)}
/* The picker's calendar glyph, restated: this page's field rules set the
   `background` shorthand, which would otherwise wipe it. */
.mk-dataform input.bv3-dtp-input{
  cursor:pointer;padding-right:42px!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>")!important;
  background-repeat:no-repeat!important;background-position:right 15px center!important;background-size:16px 16px!important}
.bv3-dtp-pop{font-family:var(--font)}
/* dark: the picker only ships a light face */
html[data-theme="dark"] .bv3-dtp-pop{background:var(--card);border-color:var(--line);
  box-shadow:0 0 0 1px var(--line),var(--shadow-lift)}
html[data-theme="dark"] .bv3-dtp-chip,html[data-theme="dark"] .bv3-dtp-tick-val,
html[data-theme="dark"] .bv3-dtp-ampm-btn.active{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .bv3-dtp-head,html[data-theme="dark"] .bv3-dtp-quick,
html[data-theme="dark"] .bv3-dtp-time,html[data-theme="dark"] .bv3-dtp-foot,
html[data-theme="dark"] .bv3-dtp-year-pick{border-color:var(--line)}
html[data-theme="dark"] .bv3-dtp-head-x,html[data-theme="dark"] .bv3-dtp-nav-btn,
html[data-theme="dark"] .bv3-dtp-year,html[data-theme="dark"] .bv3-dtp-tick-btn,
html[data-theme="dark"] .bv3-dtp-ampm{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .bv3-dtp-day:hover:not(.bv3-dtp-day--disabled):not(.bv3-dtp-day--selected){background:rgba(255,255,255,.07)}
html[data-theme="dark"] .bv3-dtp-day--out{color:rgba(255,255,255,.25)}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .bv3-dtp-pop{background:var(--card);border-color:var(--line);
    box-shadow:0 0 0 1px var(--line),var(--shadow-lift)}
  html:not([data-theme="light"]) .bv3-dtp-chip,html:not([data-theme="light"]) .bv3-dtp-tick-val,
  html:not([data-theme="light"]) .bv3-dtp-ampm-btn.active{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--ink)}
  html:not([data-theme="light"]) .bv3-dtp-head,html:not([data-theme="light"]) .bv3-dtp-quick,
  html:not([data-theme="light"]) .bv3-dtp-time,html:not([data-theme="light"]) .bv3-dtp-foot,
  html:not([data-theme="light"]) .bv3-dtp-year-pick{border-color:var(--line)}
  html:not([data-theme="light"]) .bv3-dtp-head-x,html:not([data-theme="light"]) .bv3-dtp-nav-btn,
  html:not([data-theme="light"]) .bv3-dtp-year,html:not([data-theme="light"]) .bv3-dtp-tick-btn,
  html:not([data-theme="light"]) .bv3-dtp-ampm{background:rgba(255,255,255,.05)}
  html:not([data-theme="light"]) .bv3-dtp-day:hover:not(.bv3-dtp-day--disabled):not(.bv3-dtp-day--selected){background:rgba(255,255,255,.07)}
  html:not([data-theme="light"]) .bv3-dtp-day--out{color:rgba(255,255,255,.25)}
}

/* ── scrolling lists of times ──────────────────────────────────────────
   The scrollbar sat ON the buttons' right border. The list keeps a gutter
   of its own for it, and the bar is slim, rounded and quiet until hovered. */
.mk-times-list,.mk-wk-list,.mk-tzp-list,.mk-sel-list{
  scrollbar-width:thin;scrollbar-color:rgba(var(--mk-rgb),.28) transparent}
.mk-times-list{scrollbar-gutter:stable;padding:2px 10px 2px 2px;margin:-2px -10px -2px -2px}
.mk-wk-list{scrollbar-gutter:stable;padding:1px 6px 1px 1px;margin-right:-6px}
.mk-times-list::-webkit-scrollbar,.mk-wk-list::-webkit-scrollbar,
.mk-tzp-list::-webkit-scrollbar,.mk-sel-list::-webkit-scrollbar{width:6px}
.mk-times-list::-webkit-scrollbar-track,.mk-wk-list::-webkit-scrollbar-track,
.mk-tzp-list::-webkit-scrollbar-track,.mk-sel-list::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.mk-times-list::-webkit-scrollbar-thumb,.mk-wk-list::-webkit-scrollbar-thumb,
.mk-tzp-list::-webkit-scrollbar-thumb,.mk-sel-list::-webkit-scrollbar-thumb{
  background:rgba(var(--mk-rgb),.22);border-radius:10px}
.mk-times-list:hover::-webkit-scrollbar-thumb,.mk-wk-list:hover::-webkit-scrollbar-thumb,
.mk-tzp-list:hover::-webkit-scrollbar-thumb,.mk-sel-list:hover::-webkit-scrollbar-thumb{background:rgba(var(--mk-rgb),.45)}
@media (max-width:780px){.mk-times-list{padding-right:2px;margin-right:-2px}}

/* ── the week scrolls as ONE ───────────────────────────────────────────
   Seven columns each with their own scrollbar put seven bars over seven
   rows of time buttons. The whole week scrolls together now, the day
   headings stay pinned, and there is one slim bar at the edge. */
.mk-wk{max-height:500px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(var(--mk-rgb),.28) transparent;scrollbar-gutter:stable;
  padding-right:8px;margin-right:-8px;align-items:start}
.mk-wk::-webkit-scrollbar{width:6px}
.mk-wk::-webkit-scrollbar-track{background:transparent;margin:66px 0 4px}
.mk-wk::-webkit-scrollbar-thumb{background:rgba(var(--mk-rgb),.22);border-radius:10px}
.mk-wk:hover::-webkit-scrollbar-thumb{background:rgba(var(--mk-rgb),.45)}
.mk-wk-list{max-height:none!important;overflow:visible!important;padding:1px;margin:0}
.mk-wk-hd{position:sticky;top:0;z-index:2;
  box-shadow:0 6px 10px -6px rgba(0,0,0,.08);backdrop-filter:blur(6px)}
/* the pinned heading needs a solid face over the times scrolling beneath */
.mk-wk-col .mk-wk-hd{background:var(--card);background-image:linear-gradient(var(--line-2),var(--line-2))}
.mk-wk-col.is-open .mk-wk-hd{background-image:linear-gradient(rgba(var(--mk-rgb),.08),rgba(var(--mk-rgb),.08))}

/* A soft fade where a list continues below, instead of a row sliced in half.
   The bottom padding lets the last time scroll clear of the fade. */
@media (min-width:781px){
  .mk-wk,.mk-l-classic .mk-times-list,.mk-l-split .mk-times-list{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
    padding-bottom:24px}
}

/* The fade belongs to a list that scrolls, and only then (page.js fitLists
   marks it). A list that fits shows its last time plainly. */
@media (min-width:781px){
  .mk-wk:not(.is-scroll),
  .mk-l-classic .mk-times-list:not(.is-scroll),.mk-l-split .mk-times-list:not(.is-scroll){
    -webkit-mask-image:none;mask-image:none;padding-bottom:2px}
}

/* ── the join link on the confirmation ──────────────────────────────────
   The one thing they will need at the meeting's start, so it is the one
   solid button on this screen. */
.mk-join{
  display:inline-flex;align-items:center;gap:9px;margin:4px auto 6px;
  padding:13px 22px;border-radius:var(--r-pill);
  background:var(--mk);color:#fff;font:700 14.5px var(--font);text-decoration:none;
  box-shadow:0 8px 22px rgba(var(--mk-rgb),.3);transition:filter .15s,transform .15s var(--ease)}
.mk-join:hover{filter:brightness(1.07);transform:translateY(-1px)}
.mk-join .mk-ic{width:17px;height:17px;flex-basis:17px}
.mk-join-note{margin:0 0 16px;font-size:12px;color:var(--ink-3)}

/* s1svc #4776: add-ons, the vehicle and the policy */
.mk-addons{border:0;margin:0 0 18px;padding:0}
.mk-addons legend,.mk-veh legend{font-size:12.5px;font-weight:650;color:var(--ink-2);margin-bottom:8px;padding:0}
.mk-addon{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:6px;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .14s}
.mk-addon:hover{border-color:rgba(var(--mk-rgb),.5)}
.mk-addon input{width:16px;height:16px;accent-color:var(--mk);flex:none}
.mk-addon-n{flex:1;font-size:13.5px;color:var(--ink)}
.mk-addon-m{font-size:12px;color:var(--ink-3);white-space:nowrap}
.mk-addon:has(input:checked){border-color:var(--mk);background:rgba(var(--mk-rgb),.06)}
.mk-veh{border:0;margin:0 0 6px;padding:0}
.mk-veh-row{display:grid;grid-template-columns:90px 1fr 1fr;gap:10px}
@media (max-width:520px){.mk-veh-row{grid-template-columns:1fr 1fr}.mk-veh-row .mk-field:first-child{grid-column:1 / -1}}
.mk-field select{width:100%;padding:11px 13px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--card);font:400 14.5px var(--font);color:var(--ink)}
.mk-policy{margin:4px 0 16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--line-2)}
.mk-policy-t{font-size:12.5px;line-height:1.55;color:var(--ink-2);max-height:140px;overflow:auto}
.mk-policy-ok{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.mk-policy-ok input{width:16px;height:16px;margin-top:1px;accent-color:var(--mk);flex:none}

/* #5451 s2waitlist: the waitlist link under the times */
.mk-wl-link{margin:14px 0 0;text-align:center;font-size:13.5px}
.mk-wl-link a{color:var(--mk);font-weight:600;text-decoration:none}
.mk-wl-link a:hover{text-decoration:underline}

/* #3155b s2series: How often? on the details form (reuses the add-on rows) and its hint */
.mk-repeat .mk-hint{display:block;margin-top:4px;font-size:12px;color:var(--ink-2)}
.mk-series{margin:14px 0;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-size:13.5px;color:var(--ink)}
.mk-series p{margin:0 0 8px}
.mk-series-acts{display:flex;flex-wrap:wrap;gap:8px}