/* ═══════════════════════════════════════════════════════════════════════
   M-A-S-T-E-R.ai — the bag and the cart drawer (inc/cart-drawer.php).
   Anchored, informative, dismissible. Nothing blocks the page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The bag ──────────────────────────────────────────────────────────── */

.master-drawer-button-wrap { display: flex; align-items: center; }

.master-drawer-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--master-color-plumb);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.master-drawer-button:hover,
.master-drawer-button:focus-visible { color: #d7374f; background: var(--master-color-tracing); }

/* The bag is drawn rather than shipped as an icon file: two lines and a box. */
.master-drawer-button__glyph {
  width: 17px;
  height: 15px;
  border: 1.9px solid currentColor;
  border-radius: 0 0 4px 4px;
  position: relative;
}

.master-drawer-button__glyph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  translate: -50% 0;
  width: 9px;
  height: 8px;
  border: 1.9px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.master-drawer-button__count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--master-color-index);
  color: var(--master-color-chalk);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* An empty bag is not news. */
.master-drawer-button:not(.is-filled) { display: none; }

.master-drawer-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── The drawer ───────────────────────────────────────────────────────── */

.master-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(17, 24, 39, 0.42);
  opacity: 0;
  transition: opacity 200ms ease;
}

.master-drawer-scrim.is-open { opacity: 1; }

/* `display: flex` below beats the `hidden` attribute, so a closed drawer was
   still in the page: two keyboard focus stops on every route that lead nowhere
   visible, and an aria-modal="true" dialog permanently exposed to assistive
   technology. The transition still runs — open() clears `hidden` first, then a
   rAF adds the class that animates it in, and close() only sets `hidden` back
   after the 260ms slide has finished. */
.master-drawer[hidden],
.master-drawer-scrim[hidden] {
  display: none !important;
}

.master-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  height: 100dvh;
  background: var(--master-color-chalk);
  border-left: 1px solid var(--master-color-scribe);
  box-shadow: -24px 0 60px rgba(17, 24, 39, 0.18);
  translate: 100% 0;
  transition: translate 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.master-drawer.is-open { translate: 0 0; }

.master-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(16px, 4vw, 22px);
  border-bottom: 1px solid var(--master-color-caliper);
}

.master-drawer__title {
  margin: 0;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--master-color-plumb);
}

.master-drawer__close {
  width: 36px; height: 36px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--master-color-graphite);
  cursor: pointer;
}

.master-drawer__close:hover,
.master-drawer__close:focus-visible { background: var(--master-color-tracing); color: #111827; }

.master-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

/* ── Lines ────────────────────────────────────────────────────────────── */

.master-drawer__lines {
  list-style: none;
  margin: 0;
  padding: clamp(12px, 3vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.master-drawer__line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.master-drawer__thumb {
  display: block;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--master-color-tracing);
}

.master-drawer__thumb img,
.master-drawer__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.master-drawer__line-main { min-width: 0; }

.master-drawer__line-name {
  margin: 0;
  color: var(--master-color-plumb);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* The cohort dates are this site's "size" — the thing you check you got right. */
.master-drawer__line-meta {
  margin: 3px 0 0;
  color: var(--master-color-index);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.master-drawer__line-blurb {
  margin: 4px 0 0;
  color: var(--master-color-graphite);
  font-size: 12.5px;
  line-height: 1.45;
}

.master-drawer__remove {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 0;
  color: var(--master-color-graphite);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.master-drawer__remove:hover,
.master-drawer__remove:focus-visible { color: var(--master-color-minium); }

.master-drawer__line-price {
  margin: 0;
  color: var(--master-color-plumb);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── The one honest upsell ────────────────────────────────────────────── */

.master-drawer__ladder {
  margin: 0 clamp(12px, 3vw, 18px) clamp(12px, 3vw, 18px);
  padding: 14px 16px;
  border: 1px solid var(--master-color-scribe);
  border-radius: 12px;
  background: var(--master-color-ochre-wash);
}

.master-drawer__ladder-eyebrow {
  margin: 0 0 6px;
  color: var(--master-color-ochre);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.master-drawer__ladder-line {
  margin: 0;
  color: var(--master-color-graphite);
  font-size: 13px;
  line-height: 1.5;
}

.master-drawer__ladder-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 0 2px;
  color: var(--master-color-index);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.master-drawer__ladder-price { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Foot ─────────────────────────────────────────────────────────────── */

.master-drawer__foot {
  margin-top: auto;
  padding: clamp(14px, 3vw, 18px);
  border-top: 1px solid var(--master-color-scribe);
  background: var(--master-color-chalk);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Thumb reach on a phone: the primary action is pinned, not scrolled to. */
  position: sticky;
  bottom: 0;
}

.master-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  color: var(--master-color-graphite);
  font-size: 14px;
}

.master-drawer__total strong {
  color: var(--master-color-plumb);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.master-drawer__checkout {
  display: block;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--master-color-index);
  color: var(--master-color-chalk);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.master-drawer__checkout:hover,
.master-drawer__checkout:focus-visible { background: var(--master-color-index); color: #fff; }

.master-drawer__view {
  display: block;
  padding: 8px;
  color: var(--master-color-graphite);
  font-size: 13.5px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.master-drawer__reassure {
  margin: 0;
  color: var(--master-color-graphite);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

/* ── Empty ────────────────────────────────────────────────────────────── */

.master-drawer__empty {
  padding: clamp(24px, 6vw, 40px) clamp(16px, 4vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.master-drawer__empty-title {
  margin: 0;
  color: var(--master-color-plumb);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.master-drawer__empty-note { margin: 0; color: var(--master-color-graphite); font-size: 13.5px; line-height: 1.5; }

.master-drawer__cta {
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: 8px;
  background: var(--master-color-index);
  color: var(--master-color-chalk);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .master-drawer, .master-drawer-scrim { transition: none; }
}

/* A refusal — "a seat is sold once" — shown in the cart, because the thing they
   asked for is already in it. Never a page reload to deliver bad news. */
.master-drawer__note {
  margin: 0;
  padding: 12px clamp(16px, 4vw, 22px);
  background: var(--master-color-ochre-wash);
  border-bottom: 1px solid var(--master-color-scribe);
  color: var(--master-color-ochre);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Return card ──────────────────────────────────────────────────────────
   Small, anchored, closable. Once per session, and a dismissal sticks for
   thirty days. It never covers the page or traps anyone. */
.master-return {
  position: fixed;
  right: clamp(12px, 3vw, 22px);
  bottom: clamp(12px, 3vw, 22px);
  z-index: 110;
  width: min(calc(100vw - 24px), 340px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--master-color-scribe);
  border-radius: 14px;
  background: var(--master-color-chalk);
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.18);
  opacity: 0;
  translate: 0 12px;
  transition: opacity 220ms ease, translate 220ms ease;
}

.master-return.is-in { opacity: 1; translate: 0 0; }

.master-return__thumb {
  flex: none;
  width: 54px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--master-color-tracing);
}

.master-return__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.master-return__main { min-width: 0; flex: 1 1 auto; }

.master-return__title {
  margin: 0;
  color: var(--master-color-plumb);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.master-return__name {
  margin: 2px 0 0;
  color: var(--master-color-graphite);
  font-size: 12.5px;
  line-height: 1.4;
}

.master-return__go {
  margin-top: 9px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--master-color-index);
  color: var(--master-color-chalk);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.master-return__go:hover, .master-return__go:focus-visible { background: var(--master-color-index-pressed); }

.master-return__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--master-color-graphite);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.master-return__close:hover, .master-return__close:focus-visible { background: var(--master-color-tracing); color: #111827; }

@media (prefers-reduced-motion: reduce) {
  .master-return { transition: none; }
}

/* ── What the cart noticed ────────────────────────────────────────────────
   Above the lines, never instead of them. The cart explains an overlap and
   offers the removal; it never performs one, because the containment between
   these programs is curricular and says nothing about cohorts, dates or who a
   seat is for. See plugin inc/enrollment-logic.php for the whole argument. */

.master-drawer__find {
  margin: 0 0 14px;
  padding: 14px 15px;
  border-radius: 12px;
  border: 1px solid var(--master-color-graphite);
  background: var(--master-color-tracing);
}

.master-drawer__find--clash,
.master-drawer__find--capacity {
  border-color: var(--master-color-minium);
  background: var(--master-color-minium-wash);
}

.master-drawer__find-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--master-color-ochre);
}

.master-drawer__find--clash .master-drawer__find-eyebrow,
.master-drawer__find--capacity .master-drawer__find-eyebrow { color: var(--master-color-minium); }

.master-drawer__find-title {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--master-color-plumb);
}

.master-drawer__find-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--master-color-graphite);
}

.master-drawer__find-do {
  display: inline-block;
  margin: 11px 0 0;
  padding: 9px 15px;
  min-height: 38px;
  border-radius: 999px;
  background: var(--master-color-pitch);
  color: var(--master-color-gesso);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.master-drawer__find-do:hover,
.master-drawer__find-do:focus-visible { background: var(--master-color-index); color: #fff; }

/* ── A line is an enrollment ─────────────────────────────────────────────── */

.master-drawer__line-who {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--master-color-plumb);
}

.master-drawer__line-inc {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.master-drawer__line-inc li {
  margin: 0;
  padding-left: 16px;
  position: relative;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--master-color-graphite);
}

/* A tick, not a bullet: these are things you are getting, not a list. */
.master-drawer__line-inc li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--master-color-index);
  font-weight: 700;
}

/* The findings on the cart page sit above the table, full width of the left
   column — the drawer's card, given room to breathe. */
.master-finds {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 22px;
}

.master-finds .master-drawer__find { margin: 0; }

.master-finds .master-drawer__find-title { font-size: 16.5px; }

.master-finds .master-drawer__find-body { font-size: 14.5px; max-width: 68ch; }

/* ── The fold ─────────────────────────────────────────────────────────────
   A seat that sat inside a bigger one has already been taken off. The removed
   line is drawn in full, holds for a beat so the eye catches it, then collapses
   and strikes through — the buyer watches it fold in rather than discovering a
   line has vanished. The card carries the number and what they are now in. */

.master-fold {
  margin: 0 0 16px;
  padding: 18px 17px 16px;
  border-radius: 14px;
  border: 1px solid var(--master-color-index);
  background: linear-gradient(180deg, #f2fbf6, var(--master-color-chalk) 62%);
  animation: master-fold-card 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes master-fold-card {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.master-fold__tick {
  width: 30px;
  height: 30px;
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--master-color-index);
  color: var(--master-color-chalk);
  font-size: 16px;
  line-height: 1;
  animation: master-fold-tick 420ms 160ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes master-fold-tick {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.master-fold__title {
  margin: 0 0 12px;
  font-family: var(--master-font-display, "Space Grotesk", sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--master-color-plumb);
  text-wrap: balance;
}

/* The line being folded away. grid-template-rows 1fr -> 0fr collapses a box of
   unknown height smoothly, which max-height cannot do without a magic number. */
.master-fold__ghost {
  display: grid;
  grid-template-rows: 1fr;
  animation: master-fold-collapse 620ms 1150ms cubic-bezier(0.6, 0, 0.3, 1) both;
}

.master-fold__ghost-in {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--master-color-chalk);
  border: 1px solid var(--master-color-caliper);
}

@keyframes master-fold-collapse {
  from { grid-template-rows: 1fr; opacity: 1; margin-bottom: 12px; }
  60%  { grid-template-rows: 1fr; opacity: 0.35; margin-bottom: 12px; }
  to   { grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; }
}

.master-fold__thumb {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  overflow: hidden;
}

.master-fold__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.master-fold__ghost-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--master-color-graphite);
  position: relative;
}

.master-fold__ghost-name span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--master-color-quiet);
}

/* The strike is drawn across the name as it goes — the visual grammar of
   "this is no longer being charged". */
.master-fold__ghost-name::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  height: 1.5px;
  width: 0;
  background: var(--master-color-quiet);
  animation: master-fold-strike 480ms 620ms ease-out both;
}

@keyframes master-fold-strike {
  from { width: 0; }
  to   { width: 100%; }
}

.master-fold__ghost-price {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--master-color-index);
  white-space: nowrap;
}

.master-fold__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--master-color-graphite);
}

.master-fold__now {
  margin: 9px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--master-color-plumb);
}

/* Nothing moves for anyone who has asked for that. The end state is the same
   state, so the story still reads — it just does not perform. */
@media (prefers-reduced-motion: reduce) {
  .master-fold,
  .master-fold__tick,
  .master-fold__ghost,
  .master-fold__ghost-name::after { animation: none; }

  .master-fold__ghost { grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; }
}

/* On the cart page the card gets the same treatment, at reading width. */
.master-finds .master-fold { max-width: none; }

/* ── Upgrade, without leaving the drawer ──────────────────────────────────
   The ladder card used to end in a link to a product page, which meant the
   buyer had to leave the cart, find the class, pick dates again and re-enter
   who the seat was for. The button does all of that in one press. */

/* GREEN, AND DELIBERATELY NOT CORAL.
   Coral (var(--master-color-index)) is spent on one thing in this drawer — .master-drawer__checkout,
   the button that takes the money. This one grew a colour problem: it sat at
   neutral ink and turned CORAL on hover, so it spent its resting state looking
   like a secondary control and its hover state impersonating the checkout. On
   a phone there is no hover at all, so most buyers only ever saw the neutral
   slab. A hue change is a change of MEANING; a state change should stay in one
   hue and only change value.

   Green is the site's existing vocabulary for gain rather than commitment, and
   it is the honest reading here: this button does not cost the whole programme,
   it costs the difference, and the days already held are credited either way.
   The figure itself is computed at the till and never written down here. Coral asks for
   payment; green offers more for less.

   The tone is measured, not chosen by eye. Brand green var(--master-color-index) carries white
   at only 3.01:1 and fails AA outright, which is why the obvious pick is the
   wrong one. var(--master-color-index-pressed) gives 6.27:1 for the label and 5.27:1 for the sub-label at
   88% white, reads 5.86:1 against the cream panel — clearing the 3:1 that
   WCAG 1.4.11 asks of a control's edge — and hovers DEEPER into the same hue
   rather than sideways into another. */

.master-drawer__upgrade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--master-color-index-pressed);
  color: var(--master-color-chalk);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.master-drawer__upgrade:hover:not(:disabled) { background: var(--master-color-index-pressed); }

/* A ring, not just a darker fill: a fill change alone is invisible to anyone
   who cannot compare it against the state it came from. */
.master-drawer__upgrade:focus-visible:not(:disabled) {
  background: var(--master-color-index);
  outline: 2px solid var(--master-color-index);
  outline-offset: 2px;
}

.master-drawer__upgrade:active:not(:disabled) { transform: translateY(1px); }
.master-drawer__upgrade:disabled { opacity: 0.65; cursor: default; }

.master-drawer__upgrade-do {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

/* The number is the argument, so it travels with the label rather than
   sitting somewhere else in the card. */
.master-drawer__upgrade-diff {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  /* 88%, not 82%. This line carries the actual number — the whole argument for
     pressing the button — and at 12.5px it needs 4.5:1 like any other body
     text. 82% cleared it on the old ink only because ink is nearly black; on
     the hover coral it was 3.56:1, so the number was hardest to read at the
     exact moment somebody was reaching for it. */
  color: rgba(255, 255, 255, 0.88);
}

.master-drawer__upgrade-when {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--master-color-graphite);
  text-align: center;
}

/* Demoted to the quiet option now that the button is the action. */
.master-drawer__ladder .master-drawer__ladder-link {
  margin-top: 10px;
  font-size: 13px;
}