/* ════════════════════════════════════════════════
   PROTOCOLS PANEL (#protocols) — the shared live-session
   scheduler, rehomed from /practice. Inner scroll region with
   the house bottom-fade mask (the .ob-body pattern) fixes the
   no-scroll cut-off; index = a 3-card grid, drill-down = the
   booking machinery. pr-* rules are ported from practice.css.

   Extracted from developmental.css so this booking surface can be
   mounted on multiple pages (the /developmental Protocols panel and
   the state onboarding step) via window.createProtocolBooking.
═══════════════════════════════════════════════════ */

/* Inner scroll region — flex:1 within the fixed-height panel-card so
   long content scrolls instead of being clipped by overflow:hidden. */
.proto-scroll {
  flex: 1;
  min-height: 0;
  /* Query container so .proto-card can size to THIS scroll region's height
     (100cqh) rather than the viewport — see .proto-card max-height. Safe here
     because the region is extrinsically sized (flex:1), not content-sized. */
  container-type: size;
  overflow-y: auto;
  /* scrollbar gutter: bar sits in the card padding (see scrollbar.css) */
  margin-right: -36px;
  padding-right: 44px;
  /* Scrollbar comes from the sitewide standard (scrollbar.css / NAV_CSS).
     Do NOT set scrollbar-width/scrollbar-color here — in Chrome 121+ any
     non-auto value disables the standard's ::-webkit-scrollbar styling. */
  mask-image: linear-gradient(
    to bottom, black 0%, black calc(100% - 56px), transparent 100%);
  -webkit-mask-image: linear-gradient(
    to bottom, black 0%, black calc(100% - 56px), transparent 100%);
}
.proto-scroll.at-bottom { mask-image: none; -webkit-mask-image: none; }
.proto-scroll.no-fade { mask-image: none; -webkit-mask-image: none; }

#proto-root { width: 100%; max-width: 720px; margin: 0 auto; padding-top: 2px; }
/* The index (the big card grid) spans the full panel width; only the
   booking/detail views keep the 720px reading column. */
#proto-root.proto-root-wide { max-width: none; }

.proto-loading { display: flex; justify-content: center; padding: 60px 0; }
.proto-spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 3px solid var(--t4);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: proto-spin 0.7s linear infinite;
}
@keyframes proto-spin { to { transform: rotate(360deg); } }

/* ── panel header: back (left) · protocol name (center) · availability (right) ── */
.proto-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  min-height: 44px;
}
.proto-head-back { justify-self: start; }
.proto-head-title { justify-self: center; min-width: 0; }
.proto-head-actions { justify-self: end; }
.proto-head-name {
  font-family: var(--f-serif);
  font-size: var(--lc-4, 20px);
  font-weight: 500;
  color: var(--t1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.proto-head-actions { flex: none; }

/* Availability action — pronounced, pinned top-right of the panel. */
.proto-avail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--lc-2, 14px);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 18px;
  border-radius: 999px;
  transition: transform 0.06s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.proto-avail-btn:active { transform: translateY(1px); }
.proto-avail-btn .proto-avail-ic { flex: 0 0 auto; display: block; }
.proto-avail-btn.is-unset {
  color: var(--gold);
  background: linear-gradient(135deg,
    rgba(245, 216, 122, 0.12) 0%,
    rgba(245, 216, 122, 0.24) 50%,
    rgba(245, 216, 122, 0.10) 100%);
  border: 1px solid rgba(245, 216, 122, 0.35);
}
.proto-avail-btn.is-unset:hover { border-color: var(--gold); color: #ffeaa3; }
.proto-avail-btn.is-set {
  color: var(--gold);
  background: rgba(245, 216, 122, 0.08);
  border: 1px solid var(--b-gold);
}
.proto-avail-btn.is-set:hover { background: rgba(245, 216, 122, 0.14); }

/* ── index grid (3 large image-background protocol cards) ── */
.proto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.proto-card {
  appearance: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  /* Big, pronounced tiles: ~30% width each (3-up) and taller-than-wide so
     they read as feature cards, not chips. aspect-ratio scales the height
     with the column width across screen sizes; min-height is just a floor.
     min-width:0 is REQUIRED — without it the grid item's auto min-width is
     derived from min-height via aspect-ratio (360*4/5 = 288px), which makes
     cards overflow narrower columns and overlap. */
  aspect-ratio: 4 / 5;
  min-width: 0;
  min-height: 360px;
  /* Cap the height to the scroll region minus a fixed gap (100cqh = the
     .proto-scroll container's own height — see its container-type). This keeps
     the card as tall as the panel allows while always leaving ~44px for its
     shadow, so the shadow never clips at the card's foot and the cards never
     shrink more than needed — with no fragile viewport math. Cover bg crops.
     Reset on phones below, where cards are short and the body scrolls. */
  max-height: calc(100cqh - 50px);
  overflow: hidden;
  border: none;
  border-radius: var(--card-radius);
  /* Layered background: a legibility veil (top) over the photo (middle, set
     per-card via --proto-bg) over a per-protocol color tint (bottom,
     --proto-tint). A missing photo gracefully falls back to the tint. */
  background-image:
    linear-gradient(to top, rgba(8, 5, 12, 0.92) 0%, rgba(8, 5, 12, 0.5) 44%, rgba(8, 5, 12, 0.22) 100%),
    var(--proto-bg, none),
    var(--proto-tint, linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(109, 40, 217, 0.4)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Kept modest so the shadow fully clears the .proto-scroll bottom edge — a
     larger blur/offset gets clipped by the scroller (tall cards leave little
     room below), which reads as a shadow "cut off" at the card's foot. */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
  padding: 28px 26px;
  transition: transform 0.14s, box-shadow 0.18s, border-color 0.15s;
}
.proto-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.44);
}
.proto-card-name {
  font-family: var(--f-serif);
  font-size: var(--lc-5, 26px);
  font-weight: 500;
  color: #fff;
  line-height: 1.12;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.proto-card-blurb {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--lc-2, 14px);
  line-height: 1.5;
  flex: 0 0 auto;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.proto-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.proto-card-credits {
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
/* Per-protocol color tint (fallback when no photo is set). */
.proto-card-hle  { --proto-tint: linear-gradient(150deg, rgba(245, 216, 122, 0.42), rgba(139, 92, 246, 0.42)); }
.proto-card-inquiry  { --proto-tint: linear-gradient(150deg, rgba(168, 85, 247, 0.5), rgba(109, 40, 217, 0.45)); }
.proto-card-chat { --proto-tint: linear-gradient(150deg, rgba(74, 222, 128, 0.4), rgba(56, 189, 248, 0.4)); }
.proto-card-badge {
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
}
.proto-card-arrow { margin-left: auto; color: var(--gold); font-size: 16px; }

/* ── drill-down header ── */
.proto-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  cursor: pointer;
  font-size: var(--lc-2, 14px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--t2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 11px 18px;
  transition: transform 0.06s, background 0.15s, color 0.15s;
}
.proto-back:hover { color: var(--t1); background: rgba(255, 255, 255, 0.09); }
.proto-back:active { transform: translateY(1px); }
.proto-detail-head { margin-bottom: 18px; }
.proto-detail-name {
  font-family: var(--f-serif);
  font-size: var(--lc-5, 26px);
  font-weight: 500;
  color: var(--t1);
  margin: 0;
}

/* ── cards / titles / labels (ported from practice.css) ── */
.pr-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px rgba(0, 0, 0, 0.28);
  padding: 20px 20px;
  margin-bottom: 16px;
}
/* ── the three booking methods, side by side (protocol detail view) ── */
.pr-book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 20px 0 16px;
  align-items: stretch;
}
.pr-book-grid > .pr-card { margin-bottom: 0; min-width: 0; }

/* Detail view fills the panel vertically; the booking row takes the slack. */
#proto-root.proto-root-detail { display: flex; flex-direction: column; min-height: 100%; }
.proto-root-detail .pr-book-grid { flex: 1; grid-auto-rows: 1fr; }

/* Booking method cards — house glass tiles (inherit .pr-card's border,
   blur and layered shadow); content centered. */
.pr-book-grid > .pr-card.pr-book {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 24px 22px;
  background: #ffffff0a;
}
.pr-book .pr-btn-row { justify-content: center; }
.pr-card-title {
  font-family: var(--f-serif);
  font-size: var(--lc-4, 20px);
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--t1);
}
.pr-card-note { color: var(--lc-text-t3, var(--t3)); font-size: var(--lc-2, 14px); margin: 0 0 14px; line-height: 1.5; }
.pr-section-label {
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc-text-t3, var(--t3));
  margin: 26px 0 12px;
}
.pr-directions {
  white-space: pre-wrap;
  color: var(--t2);
  font-size: var(--lc-2, 14px);
  line-height: 1.6;
  border-left: 2px solid var(--gold-soft);
  padding-left: 14px;
}

/* collapsible "pick someone specific" */
.pr-details summary.pr-summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--f-serif);
  font-size: var(--lc-3, 16px);
  font-weight: 500;
  color: var(--t2);
}
.pr-details summary.pr-summary::-webkit-details-marker { display: none; }
.pr-details[open] summary.pr-summary { color: var(--t1); margin-bottom: 8px; }

/* ── buttons ── */
.pr-btn {
  appearance: none;
  font-family: var(--f-ui);
  font-size: var(--lc-2, 14px);
  font-weight: 500;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--t1);
  transition: transform 0.06s, background 0.15s, opacity 0.15s;
}
.pr-btn:active { transform: translateY(1px); }
.pr-btn:disabled { opacity: 0.5; cursor: default; }
/* Primary action — the house gradient-transparency standard
   (matches state.css .ob-complete-btn / .tm-manage-add). */
.pr-btn-primary {
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  background: linear-gradient(135deg,
    rgba(245, 216, 122, 0.12) 0%,
    rgba(245, 216, 122, 0.24) 50%,
    rgba(245, 216, 122, 0.10) 100%);
  border: 1px solid rgba(245, 216, 122, 0.35);
}
.pr-btn-primary:hover:not(:disabled) {
  border-color: var(--gold);
  color: #ffeaa3;
  transform: translateY(-1px);
}
.pr-btn-ghost { background: transparent; color: var(--t2); }
.pr-btn-ghost:hover:not(:disabled) { color: var(--t1); }
.pr-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

/* ── form controls ── */
.pr-field { display: block; margin-bottom: 14px; }
.pr-field-label { display: block; font-size: var(--lc-2, 14px); color: var(--t2); margin-bottom: 6px; }
.pr-input, .pr-select, .pr-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--t1);
  font-family: var(--f-ui);
  font-size: var(--lc-3, 16px);
  padding: 11px 13px;
  color-scheme: dark; /* dark native popups (select list, date picker) */
}
.pr-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.pr-input:focus, .pr-select:focus, .pr-textarea:focus {
  outline: none;
  border-color: var(--gold-soft);
}
/* Select — strip the OS chrome, add our own chevron + dark option list. */
.pr-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b9a8c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 13px;
  padding-right: 38px;
  cursor: pointer;
}
.pr-select option, .pr-select optgroup {
  background-color: #241528;
  color: #f4eef7;
}

/* ── Timezone: custom searchable dropdown. A native <select> popup breaks
   inside .proto-scroll's -webkit-mask-image bottom-fade on Chromium (the
   control was dead to click — KAF bug I-7), and its list is illegible on the
   dark field. This mirrors onboarding's picker and supports type-to-filter. ── */
.pr-tzbox { position: relative; max-width: 380px; }
.pr-tzbtn {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--t1);
  font-family: var(--f-ui);
  font-size: var(--lc-2, 14px);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.pr-tzbtn:hover,
.pr-tzbox.open .pr-tzbtn { border-color: var(--gold-soft); }
.pr-tzval { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-tzcaret { opacity: 0.6; flex: none; transition: transform 0.2s ease; }
.pr-tzbox.open .pr-tzcaret { transform: rotate(180deg); }
.pr-tzmenu {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  background: #241528;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.pr-tzsearch {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-bottom: 1px solid var(--card-border);
  color: var(--t1);
  font-family: var(--f-ui);
  font-size: var(--lc-2, 14px);
  padding: 11px 14px;
  outline: none;
}
.pr-tzlist { max-height: 260px; overflow-y: auto; }
.pr-tzopt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 9px 14px;
  font-family: var(--f-ui);
  font-size: var(--lc-2, 14px);
  color: var(--t1);
  cursor: pointer;
}
.pr-tzopt:hover { background: rgba(139, 92, 246, 0.18); }
.pr-tzopt.sel { color: #f5d87a; }
.pr-tzempty { padding: 12px 14px; font-size: var(--lc-2, 14px); color: var(--lc-text-t3, var(--t3)); }

/* ── member search picker ("pick someone specific") ── */
.pr-picklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 4px;
  max-height: 220px;
  overflow-y: auto;
}
.pr-pick-row {
  appearance: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: var(--lc-2, 14px);
  color: var(--t1);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 13px;
  transition: background 0.12s, border-color 0.12s;
}
.pr-pick-row:hover { background: rgba(245, 216, 122, 0.08); border-color: var(--b-gold); }
.pr-pick-empty { color: var(--lc-text-t3, var(--t3)); font-size: var(--lc-2, 14px); padding: 8px 2px; }
.pr-pick-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid var(--b-gold);
  border-radius: 10px;
  background: rgba(245, 216, 122, 0.06);
  margin-bottom: 12px;
}
.pr-pick-change {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--lc-text-t3, var(--t3));
  font-size: var(--lc-2, 14px);
  cursor: pointer;
  text-decoration: underline;
}
.pr-pick-change:hover { color: var(--t1); }

/* ── session rows ── */
.pr-session {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.pr-session:last-child { margin-bottom: 0; }
.pr-session-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.pr-session-partner { font-weight: 600; color: var(--t1); font-size: var(--lc-2, 14px); }
.pr-session-when { color: var(--lc-text-t3, var(--t3)); font-size: var(--lc-2, 14px); }
.pr-pill {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  color: var(--t2);
}
.pr-pill-active { color: var(--green); border-color: rgba(74, 222, 128, 0.4); }
.pr-pill-waiting { color: var(--amber); border-color: rgba(245, 184, 64, 0.4); }
.pr-join {
  display: inline-block;
  margin-top: 10px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--lc-2, 14px);
  word-break: break-all;
}
.pr-join:hover { text-decoration: underline; }
.pr-reflected { color: var(--lc-text-t3, var(--t3)); font-size: var(--lc-2, 14px); margin-top: 10px; line-height: 1.5; }
.pr-empty { color: var(--lc-text-t3, var(--t3)); font-size: var(--lc-2, 14px); padding: 4px 0; }
.pr-msg { font-size: var(--lc-2, 14px); margin: 10px 0 0; min-height: 18px; }
.pr-msg-err { color: var(--rose); }
.pr-msg-ok { color: var(--green); }
.pr-msg-note { color: var(--t2); }
.pr-waiting-box {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--t2);
  font-size: var(--lc-2, 14px);
}

/* ── availability editor (slot grid, ported from onboarding picker) ── */
.pr-av-days { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pr-av-day {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.pr-av-dayhead {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--t1);
  font-family: var(--f-ui);
  font-size: var(--lc-2, 14px);
}
.pr-av-dayname { font-weight: 500; }
.pr-av-daysum { color: var(--lc-text-t3, var(--t3)); font-size: var(--lc-2, 14px); margin-left: auto; }
.pr-av-day.has .pr-av-daysum { color: var(--gold); }
.pr-av-caret { color: var(--lc-text-t3, var(--t3)); transition: transform 0.18s; }
.pr-av-day.open .pr-av-caret { transform: rotate(180deg); }
.pr-av-strip { padding: 6px 14px 14px; }
/* Hour-label row. Same 30-track grid + gap as the cells below, so each
   2-column segment sits exactly over its pair of half-hour cells and each
   label's left edge lands on that hour's gridline. */
.pr-av-ticks {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 2px;
  position: relative;
  margin-bottom: 7px;
  height: 13px;
}
.pr-av-tick {
  grid-column: span 2;
  min-width: 0;
  position: relative;
  font-size: var(--lc-2, 14px);
  line-height: 13px;
  font-family: var(--f-mono);
  color: var(--lc-text-t3, var(--t3));
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pr-av-tick.lbl::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 1px;
  height: 4px;
  background: rgba(255, 255, 255, 0.28);
}
.pr-av-tick-end {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--lc-text-t3, var(--t3));
}
.pr-av-tick-end::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 1px;
  height: 4px;
  background: rgba(255, 255, 255, 0.28);
}
.pr-av-cells {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 2px;
  touch-action: none;
}
.pr-av-cell {
  height: 26px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.pr-av-cell.hour { background: rgba(255, 255, 255, 0.1); }
.pr-av-cell.on { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%); }
.pr-av-hint { color: var(--lc-text-t3, var(--t3)); font-size: var(--lc-2, 14px); margin-top: 8px; }

/* Mobile: panels stack and the body scrolls, so let the protocols
   content flow naturally instead of trapping it in an inner scroller. */
@media (max-width: 900px) {
  #protocols .panel-card { overflow: visible; }
  .proto-scroll {
    overflow: visible;
    /* no inner scroller on mobile → not a size container (it's content-sized
       here), so cards fall back to their natural aspect height and flow. */
    container-type: normal;
    /* undo the desktop scrollbar gutter — no inner scroller on mobile */
    margin-right: 0;
    padding-right: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .proto-detail-name { font-size: var(--lc-5, 26px); }
  .proto-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .proto-head-actions .proto-avail-btn { width: 100%; justify-content: center; }
  .proto-grid { grid-template-columns: 1fr; gap: 16px; }
  /* max-width is REQUIRED alongside aspect-ratio + min-height: the
     min-height transfers through the ratio to a 240*16/10 = 384px used
     width, which overflows any column narrower than that (every phone
     < ~432px viewport) and horizontally scrolled the whole panel. The
     clamp lets min-height win over the ratio; the cover background just
     crops, so nothing visibly distorts. */
  .proto-card { aspect-ratio: 16 / 10; min-height: 240px; max-width: 100%; max-height: none; }
  .pr-book-grid { grid-template-columns: 1fr; }
  #proto-root.proto-root-detail { display: block; min-height: 0; }
  .proto-root-detail .pr-book-grid { grid-auto-rows: auto; flex: none; }
  /* Header: back + availability on row 1, protocol name centered on row 2. */
  .proto-head { grid-template-columns: 1fr 1fr; }
  .proto-head-back { grid-row: 1; grid-column: 1; }
  .proto-head-actions { grid-row: 1; grid-column: 2; }
  .proto-head-title { grid-row: 2; grid-column: 1 / -1; }
}

/* Booking fields fill with black at 18% — a grey slab on a pale page.
   color-scheme: dark is the more subtle half: it tells the browser to paint
   its NATIVE widgets dark, so the select's popup list and the date picker
   came up dark over a light form. Both flip together. */
html[data-theme="light"] .pr-input,
html[data-theme="light"] .pr-select,
html[data-theme="light"] .pr-textarea {
  background: #ffffff;
  border-color: var(--surface-border);
  color-scheme: light;
}
html[data-theme="light"] .pr-input:focus,
html[data-theme="light"] .pr-select:focus,
html[data-theme="light"] .pr-textarea:focus {
  background: #ffffff;
  border-color: rgba(161, 98, 7, 0.55);
}

/* Timezone search is a 4% white wash — invisible on light. Its underline is
   already a token and flips on its own. */
html[data-theme="light"] .pr-tzsearch {
  background: #ffffff;
}

/* ── Light mode: session cards and their chrome ───────────────────────
   NOT converted, on purpose: .proto-card's text and its background veil.
   The card bakes its own legibility gradient into background-image, sitting
   ABOVE the photo and reaching rgba(8,5,12,0.92) at the bottom — so the
   white title and blurb stand on ground the card guarantees rather than
   ground the theme supplies. That is correct in both themes and touching it
   would only weaken it.

   1. The shadow is the exception: 0.34 black rising to 0.44 on hover, about
      three times the weight the light layer uses. It is what makes otherwise
      clean cards sit heavily on the panel. */
html[data-theme="light"] .proto-card {
  box-shadow: 0 8px 22px rgba(17, 17, 27, 0.12);
}
html[data-theme="light"] .proto-card:hover {
  box-shadow: 0 12px 30px rgba(17, 17, 27, 0.18);
}

/* 2. "Update your availability" reads fine at rest and then vanishes when
      you point at it: the hover swaps the label to #ffeaa3, a pale yellow
      meant to brighten against a dark page, which on the light pill is
      near-white on near-white. A button that disappears on hover is worse
      than one that is merely dull, so the hover deepens instead — the same
      move as the other gold buttons in light. */
html[data-theme="light"] .proto-avail-btn.is-unset {
  background: linear-gradient(135deg,
    rgba(161, 98, 7, 0.10) 0%,
    rgba(161, 98, 7, 0.20) 50%,
    rgba(161, 98, 7, 0.09) 100%);
  border-color: rgba(161, 98, 7, 0.40);
}
html[data-theme="light"] .proto-avail-btn.is-unset:hover {
  border-color: rgba(161, 98, 7, 0.65);
  background: linear-gradient(135deg,
    rgba(161, 98, 7, 0.16) 0%,
    rgba(161, 98, 7, 0.28) 50%,
    rgba(161, 98, 7, 0.15) 100%);
  color: #7a4a05;
}
html[data-theme="light"] .proto-avail-btn.is-set {
  background: rgba(161, 98, 7, 0.09);
}
html[data-theme="light"] .proto-avail-btn.is-set:hover {
  background: rgba(161, 98, 7, 0.16);
}

/* 3. The back button in the booking flow is a 4% white wash — a visible
      chip on black, nothing at all on a pale page. Inverted to ink at the
      same weights. */
html[data-theme="light"] .proto-back {
  background: rgba(17, 17, 27, 0.05);
}
html[data-theme="light"] .proto-back:hover {
  background: rgba(17, 17, 27, 0.10);
}

/* ══ LIGHT MODE: availability + booking ═══════════════════════════════

   ── 1. Timezone picker ──────────────────────────────────────────────
   The severe one. .pr-tzopt is var(--t1), which flips to near-black ink on
   light, sitting on .pr-tzmenu's hardcoded #241528, which does not — so the
   list rendered as near-black on near-black. Not "hard to read": unusable,
   and the copy on this page says outright that the timezone must be right.

   Same half-flip as the bloc card chip and the stage badge — a token text
   colour over a hardcoded dark surface — but the worst instance, because it
   blocks the task rather than just looking wrong. */
html[data-theme="light"] .pr-tzmenu {
  background: #ffffff;
  box-shadow:
    0 12px 34px rgba(17, 17, 27, 0.16),
    0 4px 12px rgba(17, 17, 27, 0.08);
}
html[data-theme="light"] .pr-tzbtn {
  background: #ffffff;
}
html[data-theme="light"] .pr-tzopt:hover {
  background: rgba(124, 58, 237, 0.12);
}
/* The selected row was pale gold — fine on #241528, gone on white. */
html[data-theme="light"] .pr-tzopt.sel {
  color: #a16207;
}
/* Native select popups are hardcoded dark too, so setting color-scheme on
   the field was not enough on its own. */
html[data-theme="light"] .pr-select option,
html[data-theme="light"] .pr-select optgroup {
  background-color: #ffffff;
  color: var(--t1);
}

/* ── 2. The availability grid ────────────────────────────────────────
   The part you actually came here to use. Every cell is a white wash —
   0.02 for the day row, 0.06 for a half-hour block, 0.10 for the hour
   marker, 0.28 for the ticks. All of it disappears on a pale page, which
   leaves you painting availability onto an invisible grid: only the gold
   "on" cells would show. Inverted to ink at the same relative weights so
   the grid keeps its structure — empty < hour marker < tick.

   .pr-av-cell.on is left alone: it fills with --gold/--gold-soft, which
   already resolve to the ink golds and read strongly against the new
   pale cells. */
html[data-theme="light"] .pr-av-day {
  background: rgba(17, 17, 27, 0.03);
}
html[data-theme="light"] .pr-av-cell {
  background: rgba(17, 17, 27, 0.08);
}
html[data-theme="light"] .pr-av-cell.hour {
  background: rgba(17, 17, 27, 0.14);
}
html[data-theme="light"] .pr-av-tick.lbl::before,
html[data-theme="light"] .pr-av-tick-end::after {
  background: rgba(17, 17, 27, 0.30);
}

/* ── 3. Booking chrome ───────────────────────────────────────────────
   .pr-btn-primary is the primary action of the booking flow and carries the
   same disappearing hover as the availability button: #ffeaa3 is a pale
   yellow built to brighten on black, near-white on a light pill. It deepens
   instead. The rest are white washes and a 0.28 black card shadow. */
html[data-theme="light"] .pr-btn-primary {
  background: linear-gradient(135deg,
    rgba(161, 98, 7, 0.10) 0%,
    rgba(161, 98, 7, 0.20) 50%,
    rgba(161, 98, 7, 0.09) 100%);
  border-color: rgba(161, 98, 7, 0.40);
}
html[data-theme="light"] .pr-btn-primary:hover:not(:disabled) {
  border-color: rgba(161, 98, 7, 0.65);
  color: #7a4a05;
}
html[data-theme="light"] .pr-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.60) inset,
    0 16px 40px rgba(17, 17, 27, 0.10);
}
html[data-theme="light"] .pr-book-grid > .pr-card.pr-book {
  background: rgba(255, 255, 255, 0.58);
}
html[data-theme="light"] .pr-pick-row,
html[data-theme="light"] .pr-session {
  background: rgba(255, 255, 255, 0.55);
}
html[data-theme="light"] .pr-pick-row:hover {
  background: rgba(161, 98, 7, 0.09);
}
html[data-theme="light"] .pr-pick-selected {
  background: rgba(161, 98, 7, 0.09);
}

/* Regression from #652: the marked blocks stopped showing gold.

   .pr-av-cell.on is (0,2,0). The light wash added for the empty cell is
   html[data-theme="light"] .pr-av-cell — (0,2,1) — so it OUTRANKS the on
   state and repainted every marked block as an empty one. Leaving .on
   "untouched" was the mistake: an unscoped state rule cannot survive a
   theme-scoped base rule, it has to be restated at matching depth.

   Placed after the .hour override so a cell that is both hour and on still
   resolves to gold, the way source order resolves it in dark. */
html[data-theme="light"] .pr-av-cell.on {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%);
}

/* ── Onto the shared value ladder ─────────────────────────────────────
   The rules from #652 predate the ladder that theme-light.css now defines
   — page (#d9dae4) < card (#f6f4fb) < readout (white) — so they were
   hand-rolled: literal shadows and translucent white fills that do not
   participate in it.

   Measured, the three booking cards sat 1.05:1 from the panel beneath them.
   That is fog, not hierarchy. And translucency cannot fix it: solid white
   only reaches 1.09:1, because the panel is already near-white and white is
   the ceiling.

   So the same conclusion the state tiles reached applies — on a light page
   the fill is not what draws the box, the edge is. The cards go to the
   readout tier (solid white, so they stop inheriting the panel they sit on),
   the border does the separating at 0.14 ink, and --elev-1 puts a second cue
   under it. Recipe and values copied from .tm-stat / .mp-stat rather than
   re-derived, so the two pages stay one system.

   .pr-card's own shadow moves to --elev-2: the outer card is a level above
   the readouts inside it, and the token is purple-tinted where the literal
   it replaces was neutral black — which is what made it read as a smear on
   lavender rather than as depth. */
html[data-theme="light"] .pr-card {
  box-shadow: var(--elev-2);
}
html[data-theme="light"] .pr-book-grid > .pr-card.pr-book,
html[data-theme="light"] .pr-pick-row,
html[data-theme="light"] .pr-session {
  background: #ffffff;
  border-color: rgba(17, 17, 27, 0.14);
  box-shadow: var(--elev-1);
}

/* Desktop: one strip. Phones: three rows of twelve half-hour blocks. */
#sessions .pr-session-availability .pr-av-cells {
  grid-template-columns: repeat(var(--availability-slots), minmax(0, 1fr));
}
.pr-session-availability .pr-av-savebar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  margin-bottom: 12px;
  background: var(--bg, #17121f);
}
.pr-session-availability .pr-av-save-status {
  color: var(--lc-text-t2, var(--t2));
  font-size: var(--lc-2, 14px);
}
.pr-session-availability .pr-av-savebar .pr-msg { flex-basis: 100%; margin: 0; }
.pr-session-availability .pr-av-savebar .pr-msg:empty { display: none; }
html[data-theme="light"] .pr-session-availability .pr-av-savebar { background: var(--bg, #faf9fc); }

#sessions .pr-av-back { margin: 8px 0 24px; align-self: flex-start; }
@media (min-width: 601px) {
  .pr-session-availability .pr-av-savebar {
    position: static;
    justify-content: flex-end;
    padding: 0;
    margin-bottom: 24px;
    background: transparent;
  }
  .pr-session-availability .pr-av-save-status { order: -1; }
  .pr-session-availability .pr-av-savebar .pr-msg { text-align: right; }
  html[data-theme="light"] .pr-session-availability .pr-av-savebar { background: transparent; }
}
@media (max-width: 600px) {
  #sessions .pr-session-availability .pr-av-cells {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: 8px;
  }
  #sessions .pr-session-availability .pr-av-cell { height: 44px; }
}

/* Match the glass at rest; obscure passing text only while pinned. */
@media (max-width: 600px) {
  html:not([data-theme="light"]) #sessions .pr-av-savebar {
    background: transparent;
    border-radius: 12px;
  }
  html:not([data-theme="light"]) #sessions .pr-av-savebar.is-stuck {
    background: #49315f;
  }
}

/* Sessions date/time picker: Invitations presentation, existing session rules. */
.pr-cal { width: 100%; }
.pr-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.pr-cal-month { font-size: var(--lc-2, 14px); font-weight: 600; color: var(--t1); letter-spacing: 0.3px; }
.pr-cal-nav {
  width: 27px; height: 27px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: var(--t2);
  cursor: pointer; font-size: var(--lc-2, 14px); line-height: 1;
  display: grid; place-items: center;
  transition: color 0.16s, border-color 0.16s;
}
.pr-cal-nav:hover:not(:disabled) { color: var(--t1); border-color: rgba(251, 113, 133, 0.45); }
.pr-cal-nav:disabled { opacity: 0.3; cursor: default; }
.pr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pr-cal-wd {
  text-align: center; font-family: var(--f-mono);
  font-size: var(--lc-2, 14px); letter-spacing: 0.5px; color: var(--lc-text-t3, var(--t3)); padding-bottom: 6px;
}
.pr-cal-day {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 8px;
  color: var(--t2); font-family: inherit; font-size: var(--lc-2, 14px); cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.pr-cal-day.is-blank { visibility: hidden; cursor: default; }
.pr-cal-day.is-past { color: var(--lc-text-t3, var(--t3)); opacity: 0.32; cursor: default; }
/* Days the sender isn't available — dimmer than past, and not clickable. */
.pr-cal-day.is-unavail { color: var(--lc-text-t3, var(--t3)); opacity: 0.2; cursor: default; }
.pr-cal-day:not(:disabled):not(.is-blank):not(.is-sel):hover { background: rgba(255, 255, 255, 0.12); color: var(--t1); }
.pr-cal-day:not(:disabled):not(.is-blank):active { transform: scale(0.94); box-shadow: inset 0 0 0 2px var(--rose); }
.pr-cal-day:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pr-cal-day:not(:disabled):active { transform: none; } }
.pr-cal-day.is-sel, .pr-cal-day.is-sel:hover { background: var(--rose); color: #fff; font-weight: 600; }

.pr-times { min-width: 0; }
.pr-times-hint { color: var(--lc-text-t3, var(--t3)); font-size: var(--lc-2, 14px); padding: 6px 2px; }
.pr-time-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px;
  max-height: 300px; overflow-y: auto; padding-right: 4px;
}
.pr-slot {
  padding: 9px 6px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px;
  background: transparent; color: var(--t2);
  font-family: inherit; font-size: var(--lc-2, 14px); cursor: pointer; white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.pr-slot:hover:not(.is-past) { border-color: rgba(251, 113, 133, 0.5); color: var(--t1); }
.pr-slot.is-sel {
  background: rgba(251, 113, 133, 0.16);
  border-color: rgba(251, 113, 133, 0.7); color: var(--t1); font-weight: 600;
}
.pr-slot.is-past { opacity: 0.3; cursor: default; }
html[data-theme="light"] .pr-cal-nav { border-color: rgba(17, 17, 27, 0.14); }
html[data-theme="light"] .pr-cal-day:not(:disabled):not(.is-blank):not(.is-sel):hover { background: rgba(17, 17, 27, 0.1); }
html[data-theme="light"] .pr-cal-day.is-sel,
html[data-theme="light"] .pr-cal-day.is-sel:hover { background: rgba(219, 39, 119, 0.92); }
html[data-theme="light"] .pr-slot { border-color: rgba(17, 17, 27, 0.14); }
html[data-theme="light"] .pr-slot.is-sel {
  background: rgba(219, 39, 119, 0.10);
  border-color: rgba(219, 39, 119, 0.55);
}

.pr-scheduler { display: grid; grid-template-columns: minmax(240px, 310px) minmax(0, 1fr); gap: 24px; margin: 16px 0; }
.pr-scheduler-day, .pr-scheduler-times { min-width: 0; }
.pr-scheduler .pr-cal-day { min-width: 0; }
.pr-scheduler .pr-cal-day:disabled, .pr-scheduler .pr-slot:disabled { opacity: .32; cursor: default; }
.pr-scheduler .pr-time-grid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); max-height: none; overflow: visible; padding-right: 0; }
.pr-custom-time { margin-top: 16px; min-width: 0; }
.pr-custom-time .pr-field-label { overflow-wrap: anywhere; }
.pr-custom-time .pr-input { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.pr-custom-time .pr-input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.pr-scheduler :is(.pr-slot, .pr-cal-nav):focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (max-width: 700px) {
  .pr-scheduler { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pr-scheduler .pr-cal-nav { width: 36px; height: 36px; }
  .pr-scheduler .pr-slot { min-height: 44px; }
  .pr-scheduler .pr-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep schedule context first, saving beside it, and shared-use guidance last. */
.pr-session-availability .pr-av-sharing-note {
  margin: 24px 0 0;
}
@media (min-width: 801px) {
  .pr-session-availability {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    gap: 24px 32px;
    align-items: end;
  }
  .pr-session-availability > .pr-field { margin: 0; min-width: 0; }
  .pr-session-availability .pr-tzbox { max-width: none; }
  .pr-session-availability .pr-av-savebar {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
  }
  .pr-session-availability .pr-av-save-status { min-height: 21px; }
  .pr-session-availability .pr-av-savebar .pr-msg {
    flex-basis: auto;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .pr-session-availability .pr-av-days,
  .pr-session-availability .pr-av-sharing-note { grid-column: 1 / -1; }
  .pr-session-availability .pr-av-sharing-note { margin: 0; }
}