/* Calendar, creation and invitation screens. Same language as the homepage:
   quiet canvas, large light headings, 3.125rem controls, black primary, rules instead of boxes. */

.plan-page {
  --p-text: #111827;
  --p-muted: #6B7280;
  --p-faint: #9CA3AF;
  --p-line: #E5E7EB;
  --p-border: #E5E7EB;
  --p-hover: #F3F4F6;
  --p-control: 3.125rem;
  min-height: calc(100vh - var(--header-h));
  padding: clamp(2.5rem, 7vh, 4.5rem) 1.5rem 5rem;
  background: #F4F5F7;
  color: var(--p-text);
}
.plan-page h1 {
  margin: 0;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.17;
  letter-spacing: -.045em;
  font-weight: 500;
}
.plan-lead { margin: .75rem 0 0; color: var(--p-muted); font-size: 1rem; line-height: 1.6; }
.plan-narrow { max-width: 43.5rem; margin: 0 auto; }
.plan-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 96rem;
  margin: 0 auto 2rem;
}

/* Controls */
.plan-button,
.plan-icon-button,
.plan-view-switch button,
.plan-mode-switch button,
.plan-steps button { font: inherit; cursor: pointer; }
.plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  height: var(--p-control);
  padding: 0 1.125rem;
  border: 1px solid var(--p-border);
  border-radius: 4px;
  background: #fff;
  color: var(--p-text);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.plan-button:hover { border-color: #A9AFB8; }
.plan-button.primary { border-color: #000; background: #000; color: #fff; }
.plan-button.primary:hover { background: #15181D; border-color: #15181D; }
.plan-button.ghost { border-color: transparent; background: transparent; padding-inline: .75rem; }
.plan-button.ghost:hover { background: var(--p-hover); }
.plan-button.selected { border-color: #000; }
.plan-button:disabled { opacity: .35; cursor: default; }
.plan-icon-button {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--p-muted);
  font-size: 1rem;
}
.plan-icon-button:hover { background: var(--p-hover); color: var(--p-text); }
.plan-text-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--p-text);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}
.plan-text-link:hover { text-decoration: underline; }
.plan-field { min-width: 0; }
.plan-field > label,
.plan-link-label { display: block; margin-bottom: .5rem; color: var(--p-text); font-size: .875rem; font-weight: 500; }
.plan-input {
  width: 100%;
  height: var(--p-control);
  padding: 0 .875rem;
  border: 1px solid var(--p-border);
  border-radius: 4px;
  background: #fff;
  color: var(--p-text);
  font: .875rem/1.4 inherit;
  outline: 0;
}
.plan-input::placeholder { color: #7B818B; opacity: 1; }
.plan-input:hover { border-color: #A9AFB8; }
.plan-input:focus { border-color: #9CA3AF; box-shadow: none; }
.plan-input[aria-invalid="true"] { border-color: #B45353; }
textarea.plan-input { height: auto; padding: .875rem; resize: vertical; }
.plan-field-note,
.plan-note { margin: .75rem 0 0; color: var(--p-muted); font-size: .8125rem; line-height: 1.55; }
.plan-form-error { margin: 1.25rem 0 0; color: #A33636; font-size: .8125rem; line-height: 1.5; }
.plan-form-error[hidden] { display: none; }
.plan-page :focus-visible { outline: 2px solid #596371; outline-offset: 4px; }
.plan-big-title:focus,
.plan-big-title:focus-visible {
  outline: none;
  box-shadow: none;
}

/* People rows */
.plan-person { min-height: 3.5rem; display: flex; align-items: center; gap: .875rem; padding: .5rem 0; border-bottom: 1px solid var(--p-line); font-size: .875rem; }
.plan-person .avatar { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 4px; font-size: .75rem; }
.plan-person > div,
.plan-person > span { min-width: 0; flex: 1; }
.plan-person strong,
.plan-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-person strong { font-weight: 500; }
.plan-person small { margin-top: .1rem; color: var(--p-muted); font-size: .75rem; }
.plan-person-role { flex: none !important; color: var(--p-muted); font-size: .8125rem; text-align: right; }
.plan-organizer { border-bottom: 1px solid var(--p-line); }
.plan-people-search { position: relative; margin-top: 1rem; }
.plan-people-search > i { position: absolute; z-index: 2; left: .875rem; top: 50%; transform: translateY(-50%); color: #838993; font-size: 1.1rem; }
.plan-people-search > input { padding-left: 2.625rem; }
.plan-people-results { position: absolute; z-index: 20; top: calc(100% + .5rem); left: 0; right: 0; max-height: min(70vh, 36rem); overflow-y: auto; padding: .375rem; border: 1px solid #E0E3E7; border-radius: 0; background: #fff; box-shadow: 0 .5rem 1.5rem #20263312; }
.plan-people-results[hidden] { display: none; }
.plan-people-results .plan-person { width: 100%; min-height: 3.25rem; padding: .375rem .75rem; border: 0; border-radius: 0; background: #fff; text-align: left; cursor: pointer; }
.plan-people-results .plan-person:hover,
.plan-people-results .plan-person:focus { background: #F3F4F6; outline: 0; }
.plan-search-empty { margin: 0; padding: .875rem .75rem; color: var(--p-muted); font-size: .8125rem; line-height: 1.5; }
.plan-toggle-row { display: flex; align-items: flex-start; gap: .875rem; cursor: pointer; }
.plan-toggle-row input { width: 1.125rem; height: 1.125rem; flex: none; margin: .15rem 0 0; accent-color: #000; }
.plan-toggle-row span { flex: 1; }
.plan-toggle-row strong,
.plan-toggle-row small { display: block; }
.plan-toggle-row strong { font-size: .875rem; font-weight: 500; }
.plan-toggle-row small { margin-top: .2rem; color: var(--p-muted); font-size: .8125rem; line-height: 1.5; }

/* ---------- Calendar ---------- */
/* The calendar page is exactly one viewport tall: the header and sidebar stay put,
   only the grid scrolls, and the page itself never gets a scrollbar. */
.plan-calendar-page {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 4vh, 3rem) 1.5rem 1.5rem;
  overflow: hidden;
}
.meet-service-app:has(.plan-calendar-page) { overflow: hidden; }
.meet-service-app:has(.plan-calendar-page) #view {
  height: calc(100svh - var(--header-h));
  min-height: 0;
  overflow: hidden;
}
.plan-calendar-page .plan-page-head { flex: none; width: 100%; margin-bottom: 1.5rem; }
.plan-calendar-layout {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 96rem;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  margin: 0 auto;
}
.plan-calendar-sidebar { min-height: 0; overflow-y: auto; scrollbar-width: none; padding-right: .5rem; }
.plan-calendar-sidebar::-webkit-scrollbar { display: none; }
.plan-mini-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; }
.plan-mini-head strong { font-size: .875rem; font-weight: 500; text-transform: capitalize; }
.plan-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: .75rem; }
.plan-mini-grid > span { height: 1.5rem; display: grid; place-items: center; color: var(--p-faint); font-size: .6875rem; }
.plan-mini-grid button {
  position: relative;
  height: 1.875rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--p-text);
  font: .75rem inherit;
  cursor: pointer;
}
.plan-mini-grid button:hover { background: var(--p-hover); }
.plan-mini-grid button.outside { color: #B9BEC6; }
.plan-mini-grid button.selected { background: #E1E4E8; }
.plan-mini-grid button.today { background: #000; color: #fff; }
.plan-date-dot { position: absolute; left: 50%; bottom: .2rem; width: 3px; height: 3px; margin-left: -1px; border-radius: 50%; background: currentColor; }
.plan-calendar-filters { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--p-line); }
.plan-calendar-filters h2 { margin: 0 0 .5rem; color: var(--p-muted); font-size: .75rem; font-weight: 500; }
.plan-calendar-filter { display: flex; align-items: center; gap: .625rem; min-height: 2.125rem; font-size: .875rem; cursor: pointer; }
.plan-calendar-filter input { width: 1rem; height: 1rem; margin: 0; accent-color: #000; }
.plan-calendar-filter::before { content: ""; order: -1; width: .5rem; height: .5rem; margin-right: -.125rem; border-radius: 50%; background: var(--dot, #111); }
.plan-guests-filter { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--p-line); }
.plan-guests-filter::before { display: none; }
.plan-timezone { display: flex; align-items: center; gap: .375rem; margin-top: 1rem; color: var(--p-faint); font-size: .75rem; }
.plan-calendar-main { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--p-line); border-radius: 4px; background: #fff; overflow: hidden; }
.plan-calendar-toolbar { min-height: 3.75rem; display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem; border-bottom: 1px solid var(--p-line); }
.plan-calendar-toolbar .plan-button { height: 2.5rem; padding-inline: .875rem; }
.plan-calendar-toolbar h2 { margin: 0 0 0 .25rem; overflow: hidden; font-size: 1rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.plan-range-arrows { display: flex; }
.plan-view-switch { display: flex; margin-left: auto; border: 1px solid var(--p-border); border-radius: 4px; overflow: hidden; }
.plan-view-switch button { height: 2.5rem; padding: 0 .875rem; border: 0; border-left: 1px solid var(--p-border); background: #fff; color: var(--p-muted); font-size: .8125rem; }
.plan-view-switch button:first-child { border-left: 0; }
.plan-view-switch button:hover { background: #F4F5F7; color: var(--p-text); }
.plan-view-switch button[aria-pressed="true"] { background: #E9EBEE; color: var(--p-text); font-weight: 500; }
.plan-calendar-scroll,
.plan-month-scroll { min-height: 0; flex: 1; overflow: auto; }
.plan-week-grid { --cal-days: 7; min-width: 58rem; }
.plan-week-grid.is-day { min-width: 0; }
.plan-week-head { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: 3.75rem repeat(var(--cal-days), 1fr); height: 3.5rem; border-bottom: 1px solid var(--p-line); background: #fff; }
.plan-time-corner { display: grid; place-items: center; color: var(--p-faint); }
.plan-week-day { display: flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-left: 1px solid var(--p-line); background: #fff; cursor: pointer; }
.plan-week-day span { color: var(--p-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.plan-week-day strong { font-size: 1rem; font-weight: 500; }
.plan-week-day.today strong { width: 2rem; height: 2rem; display: grid; place-items: center; background: #000; color: #fff; border-radius: 50%; }
/* Top padding keeps the 00:00 label clear of the sticky day header; bottom padding lets 23:00–24:00 breathe. */
.plan-week-body { display: grid; grid-template-columns: 3.75rem repeat(var(--cal-days), 1fr); min-height: 84rem; padding: 1rem 0 1.5rem; }
.plan-week-grid.is-day .plan-week-day span { text-transform: capitalize; letter-spacing: 0; font-size: .875rem; }
.plan-time-rail,
.plan-day-column { position: relative; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(3.5rem - 1px), #EEF0F2 calc(3.5rem - 1px), #EEF0F2 3.5rem); }
.plan-time-rail span { position: absolute; right: .625rem; transform: translateY(-.5rem); color: var(--p-faint); font-size: .6875rem; }
.plan-time-rail span:first-child { transform: none; }
.plan-day-column { border-left: 1px solid var(--p-line); }
.plan-day-column.today { background-color: #FAFBFC; }
.plan-time-slot { position: absolute; left: 0; right: 0; width: 100%; height: 1.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.plan-time-slot:hover,
.plan-time-slot:focus-visible { background: #0000000A; outline: 0; }
.plan-cal-event {
  position: absolute;
  z-index: 3;
  min-width: 0;
  padding: .375rem .5rem;
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--dot, #111);
  border-radius: 3px;
  background: color-mix(in srgb, var(--dot, #111) 12%, #fff);
  color: var(--p-text);
  text-align: left;
  cursor: pointer;
}
.plan-cal-event:hover { z-index: 5; box-shadow: 0 .25rem .75rem #20263318; }
.plan-cal-event strong,
.plan-cal-event span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-cal-event strong { font-size: .75rem; font-weight: 500; }
.plan-cal-event span { margin-top: .125rem; color: var(--p-muted); font-size: .6875rem; }
.plan-cal-event.ended { opacity: .6; }
.plan-cal-event.compact { padding-block: .25rem; }
.plan-cal-event.compact span { display: none; }
.plan-now-line { position: absolute; left: 0; right: 0; z-index: 4; height: 1px; background: #C94F4F; pointer-events: none; }
.plan-now-line::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #C94F4F; }
.plan-month-weekdays { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(7, minmax(7rem, 1fr)); min-width: 54rem; border-bottom: 1px solid var(--p-line); background: #fff; }
.plan-month-weekdays span { padding: .75rem; border-left: 1px solid var(--p-line); color: var(--p-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.plan-month-weekdays span:first-child { border-left: 0; }
.plan-month-grid { display: grid; grid-template-columns: repeat(7, minmax(7rem, 1fr)); grid-template-rows: repeat(6, minmax(6.75rem, 1fr)); min-width: 54rem; min-height: 40rem; }
.plan-month-day { position: relative; padding: 2.5rem .375rem .375rem; border-left: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); }
.plan-month-day:nth-child(7n + 1) { border-left: 0; }
.plan-month-day.outside { background: #FAFBFC; }
.plan-month-day.outside .plan-month-date { color: #B9BEC6; }
.plan-month-date { position: absolute; top: .5rem; left: .5rem; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--p-text); font: .8125rem inherit; cursor: pointer; }
.plan-month-date:hover { background: var(--p-hover); }
.plan-month-date.today { background: #000; color: #fff; }
.plan-month-add { position: absolute; top: .5rem; right: .375rem; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 4px; background: transparent; color: var(--p-muted); opacity: 0; cursor: pointer; }
.plan-month-day:hover .plan-month-add { opacity: 1; }
.plan-month-add:hover { background: var(--p-hover); }
.plan-month-event { width: 100%; display: block; margin-bottom: .2rem; padding: .3rem .45rem; overflow: hidden; border: 0; border-left: 3px solid var(--dot, #111); border-radius: 3px; background: color-mix(in srgb, var(--dot, #111) 12%, #fff); color: var(--p-text); font: .75rem inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.plan-month-event span { color: var(--p-muted); }
.plan-month-more { padding: .2rem .45rem; border: 0; background: transparent; color: var(--p-muted); font: .75rem inherit; cursor: pointer; }
.plan-calendar-empty { margin: 1.25rem; color: var(--p-muted); font-size: .875rem; }

/* Event dialog */
.plan-dialog { width: min(28rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--p-line); border-radius: 4px; color: var(--p-text); box-shadow: 0 1.5rem 3rem #20263326; }
.plan-dialog::backdrop { background: #292D3366; }
.plan-dialog-head { display: flex; align-items: center; }
.plan-dialog-head .plan-icon-button { margin-left: auto; }
.plan-context { display: inline-flex; align-items: center; gap: .45rem; color: var(--p-muted); font-size: .8125rem; }
.plan-dialog h2 { margin: .75rem 0 .5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.plan-event-date { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--p-muted); font-size: .875rem; }
.plan-event-owner,
.plan-event-people { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; font-size: .875rem; }
.plan-event-owner small { display: block; margin-top: .1rem; color: var(--p-muted); font-size: .75rem; }
.plan-event-agenda { margin: 1rem 0 0; color: var(--p-muted); font-size: .8125rem; line-height: 1.55; }
.plan-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--p-line); }
.plan-dialog-actions .plan-button { height: 2.75rem; }

html.plan-create-lock,
body.plan-create-lock { overflow: hidden; height: 100%; }
.meet-service-app:has(.plan-create-page) { overflow: hidden; }
.meet-service-app:has(.plan-create-page) #view {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--header-h));
  min-height: 0;
  overflow: hidden;
}

/* ---------- Creation form (prototype 04, one sheet) ---------- */
.plan-create-page.plan-page {
  --p-control: 2.75rem;
  --r: 2px;
  --create-pad: 2rem;
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--create-pad) 1.5rem 1.25rem;
  overflow: hidden;
  background: #F4F5F7;
}
.plan-create-shell {
  width: min(62rem, 100%);
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
  background: transparent;
  overflow: hidden;
}
.plan-create-sidebar {
  position: static;
  align-self: stretch;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.plan-create-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.plan-create-back:hover { color: var(--p-text); }
.plan-create-nav { display: grid; gap: .25rem; margin-top: 1.75rem; }
.plan-create-nav button {
  width: 100%;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plan-create-nav button:hover { background: #fff; color: var(--p-text); }
.plan-create-nav button[aria-current="step"] { background: #fff; border-color: var(--p-line); color: var(--p-text); }
.plan-create-nav button > i {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--p-line);
  border-radius: 50%;
  background: #fff;
  font-style: normal;
  font-size: .75rem;
}
.plan-create-nav button[aria-current="step"] > i { border-color: #111827; background: #111827; color: #fff; }
.plan-create-nav button.done > i { border-color: #111827; color: #111827; }
.plan-create-nav button.done > i::before { font-family: "tabler-icons"; content: "\ea5e"; font-size: .875rem; }
.plan-create-nav button.done > i span { display: none; }
.plan-create-nav strong,
.plan-create-nav small { display: block; }
.plan-create-nav strong { font-size: .875rem; font-weight: 600; }
.plan-create-nav small { margin-top: .125rem; color: var(--p-muted); font-size: .75rem; }
.plan-side-preview { margin: 1.75rem .75rem 0; padding-top: 1.5rem; border-top: 1px solid var(--p-line); }
.plan-side-preview .day { display: block; color: var(--p-muted); font-size: .75rem; }
.plan-side-preview .day::first-letter { text-transform: uppercase; }
.plan-side-event {
  margin-top: .625rem;
  padding: .5rem .625rem;
  border-left: 3px solid var(--dot, #111);
  border-radius: 3px;
  background: color-mix(in srgb, var(--dot, #111) 12%, #fff);
}
.plan-side-event strong,
.plan-side-event span { display: block; }
.plan-side-event strong { font-size: .8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-side-event strong.is-empty { color: var(--p-faint); font-weight: 400; }
.plan-side-event span { margin-top: .125rem; color: var(--p-muted); font-size: .75rem; }
.plan-side-meta { display: grid; gap: .5rem; margin-top: 1rem; color: var(--p-muted); font-size: .75rem; line-height: 1.4; }
.plan-side-meta > span { display: flex; align-items: flex-start; gap: .5rem; }
.plan-side-meta i { flex: none; margin-top: .05rem; font-size: .875rem; color: var(--p-faint); }

.plan-sheet {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: var(--r);
  overflow: hidden;
}
.plan-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2rem 2.5rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: #C5CAD3 transparent;
}
.plan-sheet-body::-webkit-scrollbar {
  width: 8px;
}
.plan-sheet-body::-webkit-scrollbar-track {
  background: transparent;
  margin: .5rem 0;
}
.plan-sheet-body::-webkit-scrollbar-thumb {
  background: #D0D4DA;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
.plan-sheet-body::-webkit-scrollbar-thumb:hover {
  background: #B4BAC4;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.plan-sheet-body::-webkit-scrollbar-corner { background: transparent; }
.plan-sheet [data-sec] { scroll-margin-top: 1.5rem; }
.plan-sheet-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 0;
  padding: 1.25rem 2.5rem;
  border-top: 1px solid var(--p-line);
}
.plan-sheet-foot .foot-note { margin-right: auto; color: var(--p-muted); font-size: .8125rem; }
.plan-sheet-foot [hidden] { display: none !important; }
.plan-sheet-foot [data-form-back]:not([hidden]) { margin-right: 0; }
.plan-sheet [data-sec][hidden] { display: none !important; }
.plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
  color: var(--p-text);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.plan-btn:hover { border-color: #A9AFB8; }
.plan-btn.primary { border-color: #000; background: #000; color: #fff; }
.plan-btn.primary:hover { background: #15181D; border-color: #15181D; }
.plan-btn.primary:disabled { opacity: .5; cursor: default; }
.plan-btn.ghost { border-color: transparent; }
.plan-btn.ghost:hover { background: var(--p-hover); }

.plan-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--p-line);
}
.plan-row.first { border-top: 0; }
.plan-row.stack { grid-template-columns: 1fr; gap: 1rem; }
.plan-row.stack .plan-row-label { display: flex; align-items: baseline; gap: .75rem; }
.plan-row.stack .plan-row-label small { margin-top: 0; }
.plan-row-label strong { display: block; font-size: .875rem; font-weight: 500; }
.plan-row.is-invalid .plan-row-label strong::after {
  content: '*';
  margin-left: .28rem;
  color: #B45353;
  font-weight: 700;
}
.plan-row-label small { display: block; margin-top: .25rem; color: var(--p-muted); font-size: .75rem; line-height: 1.45; }
.plan-row-body { min-width: 0; }
.plan-hint { margin-top: .625rem; color: var(--p-muted); font-size: .75rem; line-height: 1.5; }
.plan-hint.inline { display: flex; align-items: center; gap: .375rem; }

.plan-big-title {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.03em;
  outline: 0;
}
.plan-big-title::placeholder { color: #B0B5BD; }
.plan-big-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .5rem;
  margin: .625rem 0 1.5rem;
  color: var(--p-muted);
  font-size: .875rem;
}
.plan-big-sub .dot { width: .4375rem; height: .4375rem; }
.plan-big-sub .sep { color: #C5CAD1; }
.plan-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--dot, #111);
  flex: none;
}

.plan-ctl {
  height: var(--p-control);
  padding: 0 .875rem;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: .875rem;
  outline: 0;
}
.plan-ctl:hover { border-color: #C5CAD1; }
.plan-ctl:focus { border-color: #111827; }
.plan-ctl::placeholder { color: #8A909A; }
textarea.plan-ctl { width: 100%; height: auto; min-height: 6.5rem; padding: .75rem .875rem; resize: vertical; line-height: 1.5; }

.plan-when { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; }
.plan-when .plan-dtp-btn { display: inline-flex; align-items: center; width: 9.5rem; flex: none; cursor: pointer; font-variant-numeric: tabular-nums; text-align: left; }
.plan-when-box {
  min-width: 0;
  flex: 1;
  max-width: 100%;
  height: var(--p-control);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 1.75rem 1.75rem minmax(2.25rem, max-content);
  align-items: center;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
  overflow: hidden;
}
.plan-when-box:focus-within { border-color: #707782; }
.plan-when-box.is-invalid,
.plan-when.is-invalid .plan-when-box,
.plan-when.is-invalid .plan-dtp-btn {
  border-color: #B45353;
  box-shadow: 0 0 0 1px #B45353;
  animation: plan-when-flash .65s ease 2;
}
.plan-when-time {
  min-width: 0;
  height: 100%;
  padding: 0 .35rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.plan-time-menu {
  position: fixed;
  z-index: 12050;
  max-height: 11.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: .25rem 0;
  background: #fff;
  border: .0625rem solid #D1D5DB;
  border-radius: .5rem;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
  box-sizing: border-box;
}
.plan-time-menu-opt {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.plan-time-menu-opt:hover { background: #F3F4F6; }
.plan-time-menu-opt.is-on { background: #E5E7EB; color: #374151; font-weight: 500; }
.plan-when-box .dash { color: var(--p-faint); }
.plan-when-step {
  width: 1.875rem;
  height: 100%;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--p-line);
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.plan-when-step:hover { background: var(--p-hover); color: var(--p-text); }
.plan-when-mins {
  min-width: 0;
  max-width: 3.75rem;
  padding: 0 .25rem;
  color: var(--p-muted);
  font-size: .6875rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-when-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin-top: .5rem;
}
.plan-when-quick > span { margin-right: .15rem; color: var(--p-faint); font-size: .6875rem; }
.plan-when-quick button {
  height: 1.625rem;
  padding: 0 .5rem;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-size: .6875rem;
  cursor: pointer;
}
.plan-when-quick button:hover { background: var(--p-hover); color: var(--p-text); }
.plan-when-error {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin: .55rem 0 0;
  color: #A33636;
  font-size: .8125rem;
  line-height: 1.45;
}
.plan-when-error[hidden] { display: none; }
.plan-when-star { flex: none; font-weight: 700; }
@keyframes plan-when-flash {
  0%, 100% { box-shadow: 0 0 0 1px #B45353; }
  45% { box-shadow: 0 0 0 4px #B4535333; }
}
.plan-create-nav button.is-error > i { border-color: #B45353; color: #B45353; }
.plan-create-nav button.is-error[aria-current="step"] > i { background: #B45353; border-color: #B45353; color: #fff; }
.plan-when .arrow { color: var(--p-faint); font-size: .875rem; padding: 0 .25rem; flex: none; }
.plan-when .end { color: var(--p-muted); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.plan-seg { display: inline-flex; border: 1px solid var(--p-line); border-radius: 4px; overflow: hidden; }
.plan-seg button {
  height: var(--p-control);
  padding: 0 .875rem;
  border: 0;
  border-left: 1px solid var(--p-line);
  background: #fff;
  color: var(--p-muted);
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
}
.plan-seg button:first-child { border-left: 0; }
.plan-seg button:hover { background: var(--p-hover); color: var(--p-text); }
.plan-seg button[aria-pressed="true"] { background: #111827; color: #fff; }
.plan-seg.small button { height: 2.25rem; padding: 0 .75rem; }

.plan-create-page .plan-ctl:focus,
.plan-create-page .plan-ctl:focus-visible,
.plan-create-page select:focus,
.plan-create-page select:focus-visible,
.plan-create-page input:focus,
.plan-create-page input:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--p-line);
}
.plan-pick { position: relative; width: min(100%, 13.5rem); }
.plan-pick-btn {
  width: 100%;
  height: var(--p-control);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .75rem;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
}
.plan-pick-btn:hover { border-color: #C5CAD1; }
.plan-pick-btn:focus,
.plan-pick-btn:focus-visible,
.plan-pick-btn[aria-expanded="true"] { border-color: #111827; outline: 0; }
.plan-pick-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-pick-btn .ti {
  margin-left: auto;
  color: #9CA3AF;
  font-size: 1rem;
}
.plan-pick-menu {
  position: fixed;
  z-index: 12050;
  overflow: auto;
  padding: .2rem 0;
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
  box-sizing: border-box;
}
.plan-pick-opt {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .8125rem;
  text-align: left;
  cursor: pointer;
}
.plan-pick-opt:hover,
.plan-pick-opt.is-on { background: #F3F4F6; }
.plan-pick.is-compact { width: auto; min-width: 5.75rem; }
.plan-pick.is-compact .plan-pick-btn {
  height: 1.75rem;
  padding: 0 .5rem;
  border: 0;
  border-radius: 5px;
  background: #f1f2f4;
  color: #525860;
  font-size: .6875rem;
}
.plan-pick.is-compact .plan-pick-btn .ti { font-size: .75rem; }
.plan-repeat-select { width: min(100%, 13.5rem); }
.plan-repeat-until .plan-pick { width: min(100%, 13.5rem); }
.plan-repeat-until .plan-dtp-btn {
  width: 9.5rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.plan-repeat-until .plan-dtp-btn[hidden] { display: none !important; }
.plan-repeat-days { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .625rem; }
.plan-repeat-days[hidden] { display: none !important; }
.plan-repeat-day {
  min-width: 2.25rem;
  height: 1.875rem;
  padding: 0 .55rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-size: .6875rem;
  cursor: pointer;
}
.plan-repeat-day:hover { background: #F1F3F5; color: var(--p-text); }
.plan-repeat-day[aria-pressed="true"] {
  border-color: #E4E7EC;
  background: #F1F3F5;
  color: var(--p-text);
}
.plan-repeat-until {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.plan-repeat-until[hidden] { display: none !important; }
.plan-repeat-until .zone { color: var(--p-muted); font-size: .75rem; }
.plan-repeat-until input.plan-ctl { height: 2.125rem; }
.plan-occ-preview {
  margin-top: .75rem;
  padding-left: .625rem;
  border-left: 2px solid #D8DCE2;
  color: var(--p-muted);
  font-size: .6875rem;
  line-height: 1.5;
}
.plan-occ-preview[hidden] { display: none; }
.plan-choice {
  width: 100%;
  display: grid;
  gap: .15rem;
  margin-top: .625rem;
  padding: .625rem .75rem;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.plan-choice:hover { border-color: #C5CAD1; }
.plan-choice.is-on { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.plan-choice strong { font-size: .8125rem; font-weight: 500; }
.plan-choice small { color: var(--p-muted); font-size: .6875rem; }

.plan-scope-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr)); gap: .5rem; }
.plan-scope-card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: .625rem;
  min-height: 0;
  padding: .625rem .7rem;
  border: 1px solid var(--p-line);
  border-radius: 5px;
  background: #fff;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.plan-scope-card:hover { border-color: #C5CAD1; }
.plan-scope-card[aria-checked="true"] {
  border-color: #111;
  background: #fff;
  box-shadow: none;
}
.plan-scope-card .tile {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #F1F3F5;
  color: var(--scope-color, #111);
  font-size: 1rem;
}
.plan-scope-card[aria-checked="true"] .tile {
  background: var(--scope-color, #111);
  color: #fff;
}
.plan-scope-card strong { display: block; font-size: .6875rem; font-weight: 600; }
.plan-scope-card small { display: block; margin-top: .125rem; color: var(--p-muted); font-size: .5625rem; line-height: 1.35; }
.plan-scope-card .ti-check { color: transparent; }
.plan-scope-card[aria-checked="true"] .ti-check { color: #111; }

.plan-av {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #E5E7EB;
  color: #4B5563;
  font-size: .6875rem;
  font-weight: 600;
}
.plan-av img { width: 100%; height: 100%; object-fit: cover; }
.plan-people-pane { max-width: 36rem; }
.plan-people-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
.plan-people-lead {
  max-width: 28rem;
  margin: .625rem 0 0;
  color: var(--p-muted);
  font-size: .875rem;
  line-height: 1.55;
}
.plan-audience-context {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  padding: .625rem .75rem;
  border: 1px solid var(--p-line);
  background: #F4F5F7;
  color: var(--p-muted);
  font-size: .75rem;
}
.plan-audience-context b { color: var(--p-text); font-weight: 500; }
.plan-audience-context button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--p-text);
  font: inherit;
  font-size: .75rem;
  text-decoration: underline;
  cursor: pointer;
}
.plan-audience-need {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--p-line);
  background: #fff;
}
.plan-audience-need strong { display: block; font-size: .875rem; font-weight: 600; }
.plan-audience-need p {
  margin: .4rem 0 .85rem;
  color: var(--p-muted);
  font-size: .8125rem;
  line-height: 1.45;
}
.plan-audience-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .375rem;
  margin-top: 1rem;
  min-height: 2.625rem;
  padding-bottom: .75rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--p-line);
  scrollbar-width: none;
}
.plan-audience-tabs[hidden] { display: none !important; }
.plan-audience-tabs::-webkit-scrollbar { display: none; }
.plan-audience-tabs button {
  flex: none;
  height: 1.875rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0 .625rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.plan-audience-tabs button.is-on {
  border-color: #E0E3E7;
  background: #F4F5F7;
  color: #111827;
}
.plan-audience-tabs button i { font-size: .95rem; }
.plan-audience-company { margin-top: 1rem; }
.plan-audience-company label {
  display: block;
  margin-bottom: .35rem;
  color: var(--p-muted);
  font-size: .75rem;
}
.plan-audience-company .plan-pick { width: min(100%, 18rem); }
.plan-audience-slot {
  height: 3.5rem;
  margin-top: 1.25rem;
}
.plan-audience-slot .plan-people-search {
  height: 3.5rem;
  margin-top: 0;
}
.plan-audience-team[hidden] { display: none !important; }
.plan-team-card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .625rem;
  box-sizing: border-box;
  height: 3.5rem;
  padding: 0 .75rem;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
}
.plan-team-card strong,
.plan-team-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-team-card strong { font-size: .8125rem; font-weight: 500; }
.plan-team-card small { margin-top: .15rem; color: var(--p-muted); font-size: .6875rem; }
.plan-team-card .plan-btn {
  height: 2rem;
  padding: 0 .75rem;
  font-size: .75rem;
}
.plan-rule-block {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
}
.plan-rule {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .625rem;
  box-sizing: border-box;
  min-height: 3.25rem;
  padding: .5rem .75rem;
  border: 0;
  border-radius: 0;
  background: #fff;
}
.plan-rule-block.is-open .plan-rule {
  border-bottom: 1px solid var(--p-line);
}
.plan-rule-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #F4F5F7;
  color: #4B5563;
  font-size: .95rem;
}
.plan-rule-main strong,
.plan-rule-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-rule-main strong { font-size: .8125rem; font-weight: 500; }
.plan-rule-main small { margin-top: .15rem; color: var(--p-muted); font-size: .6875rem; }
.plan-rule-actions { display: flex; align-items: center; gap: .15rem; }
.plan-rule-actions button {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--p-muted);
  cursor: pointer;
}
.plan-rule-actions button:hover { color: var(--p-text); }
.plan-rule-members {
  margin: 0;
  padding: .45rem .75rem .55rem 2.75rem;
  border: 0;
  border-radius: 0;
  background: #F4F5F7;
}
.plan-rule-members-cap {
  margin: 0 0 .35rem;
  color: var(--p-faint);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.plan-rule-members > div {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 1.5rem;
  color: var(--p-muted);
  font-size: .75rem;
}
.plan-rule-members i { flex: none; color: var(--p-faint); }
.plan-dynamic {
  margin-left: .4rem;
  color: #26734d;
  font-size: .625rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.plan-people-search[hidden] { display: none !important; }
.plan-people-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  height: 2.875rem;
  margin-top: 1.75rem;
  padding: 0 2px;
  border-bottom: 1px solid #CFD3D8;
}
.plan-people-search:focus-within { border-color: #CFD3D8; }
.plan-people-search > i {
  position: static;
  flex: none;
  transform: none;
  color: #8a9099;
  font-size: 1.15rem;
  pointer-events: none;
}
.plan-people-search > input.plan-people-input,
.plan-people-input,
.plan-people-input:focus,
.plan-people-input:focus-visible {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .875rem;
  outline: none;
  box-shadow: none;
}
.plan-page .plan-people-input:focus-visible,
.plan-page .plan-people-search:focus-within {
  outline: none;
}
.plan-people-input::placeholder { color: #989da5; }
.plan-people-tools {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: auto;
  gap: .1rem;
}
.plan-field-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a9099;
  cursor: pointer;
}
.plan-field-ico:hover { color: #111318; }
.plan-field-ico.is-on { color: #111318; }
.plan-field-ico[hidden] { display: none !important; }
.plan-field-ico:disabled { color: #c5c9cf; cursor: default; }
.plan-field-ico i { font-size: 1.05rem; }
.plan-people-find {
  height: 1.75rem;
  padding: 0;
}
.plan-people-hint {
  min-height: 3.375rem;
  margin: .55rem 0 0;
  color: var(--p-muted);
  font-size: .75rem;
  line-height: 1.45;
}
#plan-selected-people {
  display: grid;
  gap: .5rem;
}
#plan-selected-people .plan-person {
  min-height: 3.25rem;
  padding: .5rem .75rem;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
}
#plan-selected-people .plan-person + .plan-person::before { display: none; }
.plan-people-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + .5rem);
  left: -.75rem;
  right: -.75rem;
  max-height: min(70vh, 36rem);
  overflow-y: auto;
  padding: .25rem 0;
  border: 1px solid #E0E3E7;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 18px 50px #20242b1f, 0 2px 8px #20242b12;
}
.plan-people-results[hidden] { display: none; }
.plan-people-group { margin-top: 1.75rem; }
.plan-people-group-head {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
  margin-bottom: .25rem;
}
.plan-people-group-head h2 {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
}
.plan-people-group-head span { margin-left: auto; color: var(--p-faint); font-size: .75rem; }
.plan-people-pane .plan-person {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 3.5rem;
  padding: .4rem 0;
  border: 0;
  background: transparent;
  font-size: .875rem;
}
.plan-person + .plan-person::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.25rem;
  right: 0;
  height: 1px;
  background: var(--p-line);
}
.plan-person .identity,
.plan-person > div { min-width: 0; }
.plan-person strong,
.plan-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-person strong { font-weight: 500; }
.plan-person small { margin-top: .2rem; color: var(--p-muted); font-size: .75rem; }
.plan-person .role { color: var(--p-muted); font-size: .75rem; white-space: nowrap; }
.plan-person .add { color: var(--p-muted); font-size: .75rem; }
.plan-person .x {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8c929a;
  cursor: pointer;
}
.plan-person .x:hover { background: #f0f1f2; color: #a33c3c; }
.plan-people-results .plan-person {
  width: 100%;
  min-height: 3.25rem;
  padding: .5rem 1.25rem .5rem .75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.plan-people-results .plan-person + .plan-person::before { display: none; }
.plan-people-results .plan-person:hover { background: var(--p-hover); }
.plan-people-empty,
.plan-people-results .empty {
  margin: 0;
  padding: .75rem 0;
  color: var(--p-muted);
  font-size: .75rem;
  line-height: 1.5;
}
.plan-people-empty[hidden] { display: none; }

/* Agenda pane */
.plan-agenda-composer {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  height: 3rem;
  margin-top: 1.75rem;
  padding: 0 2px;
  border-bottom: 1px solid #CFD3D8;
}
.plan-agenda-composer:focus-within { border-color: #CFD3D8; }
.plan-agenda-composer > i {
  position: static;
  flex: none;
  transform: none;
  color: #8a9099;
  font-size: 1.15rem;
  pointer-events: none;
}
.plan-agenda-input,
.plan-agenda-input:focus,
.plan-agenda-input:focus-visible {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .875rem;
  outline: none;
  box-shadow: none;
}
.plan-page .plan-agenda-input:focus-visible,
.plan-page .plan-agenda-composer:focus-within {
  outline: none;
}
.plan-agenda-input::placeholder { color: #989da5; }
.plan-agenda-add {
  height: 1.875rem;
  padding: 0 .75rem;
  border: 0;
  border-radius: 5px;
  background: #111318;
  color: #fff;
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}
.plan-agenda-add:disabled { background: #d6d9de; color: #8c9199; cursor: default; }
.plan-agenda-help {
  margin: .5rem 0 0;
  color: var(--p-muted);
  font-size: .6875rem;
}
.plan-agenda-head {
  display: flex;
  align-items: center;
  margin-top: 1.75rem;
  padding-bottom: .4rem;
}
.plan-agenda-head h2 {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
}
.plan-agenda-head > span { margin-left: .4rem; color: var(--p-faint); font-size: .75rem; }
.plan-agenda-budget {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
  color: var(--p-muted);
  font-size: .6875rem;
}
.plan-agenda-budget.is-over { color: #a33c3c; }
.plan-agenda-track {
  width: 4.5rem;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceef0;
}
.plan-agenda-track i {
  display: block;
  width: 0;
  height: 100%;
  background: #5f6f63;
  font-style: normal;
  transition: width .18s;
}
.plan-agenda-budget.is-over i { background: #b05050; }
.plan-agenda-list { min-height: 4.75rem; }
.plan-agenda-empty {
  margin: 0;
  padding: 1.125rem 0;
  color: var(--p-muted);
  font-size: .75rem;
  line-height: 1.5;
}
.plan-agenda-empty[hidden] { display: none; }
.plan-agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .625rem;
  min-height: 3.625rem;
  padding: .5rem 0;
}
.plan-agenda-item + .plan-agenda-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.25rem;
  right: 0;
  height: 1px;
  background: var(--p-line);
}
.plan-agenda-drag {
  width: 1.625rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #adb1b7;
  cursor: grab;
}
.plan-agenda-drag i { font-size: 1rem; }
.plan-agenda-topic,
.plan-agenda-topic:focus {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  text-overflow: ellipsis;
}
.plan-agenda-mins { justify-self: end; }
.plan-agenda-remove {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #969ba3;
  cursor: pointer;
}
.plan-agenda-remove:hover { background: #f0f1f2; color: #a33c3c; }
.plan-agenda-notes {
  margin-top: 1.625rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--p-line);
}
.plan-agenda-notes label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
}
.plan-agenda-notes span {
  display: block;
  margin-top: .2rem;
  color: var(--p-muted);
  font-size: .6875rem;
  font-weight: 400;
}
.plan-agenda-notes textarea,
.plan-agenda-notes textarea:focus {
  width: 100%;
  min-height: 4.25rem;
  margin-top: .625rem;
  padding: 0;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.5;
}
.plan-agenda-notes textarea::placeholder { color: #989da5; }
.plan-guest-setting {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem .75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--p-line);
}
.plan-guest-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef2f4;
  color: #526873;
}
.plan-guest-setting strong { display: block; font-size: .8125rem; font-weight: 500; }
.plan-guest-setting p { margin: .25rem 0 0; color: var(--p-muted); font-size: .6875rem; line-height: 1.45; }
.plan-guest-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--p-line);
}
.plan-guest-row > div { flex: 1; }
.plan-guest-row strong { display: block; font-size: .875rem; font-weight: 500; }
.plan-guest-row p { margin-top: .2rem; color: var(--p-muted); font-size: .75rem; }
.plan-guest-details {
  display: none;
  grid-column: 1 / -1;
  gap: 1rem;
  margin: 0;
  padding: .5rem 0 0;
}
.plan-guest-setting.is-on .plan-guest-details { display: grid; }
.plan-guest-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.plan-guest-option {
  min-width: 0;
  padding: .875rem;
  border: 1px solid var(--p-line);
  border-radius: 6px;
  background: #fafafa;
}
.plan-guest-option-head {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .625rem;
}
.plan-guest-option-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef0f2;
  color: #59616c;
}
.plan-guest-option strong,
.plan-guest-option small { display: block; }
.plan-guest-option strong { font-size: .8125rem; font-weight: 600; }
.plan-guest-option small {
  margin-top: .15rem;
  color: var(--p-muted);
  font-size: .6875rem;
  line-height: 1.35;
}
.plan-guest-option > p {
  margin: .75rem 0 0;
  color: var(--p-muted);
  font-size: .6875rem;
  line-height: 1.4;
}
.plan-guest-pin-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--p-line);
}
.plan-guest-details.is-pass-off .plan-guest-pin-row,
.plan-guest-pin-row[hidden] { display: none !important; }
.plan-guest-pin-row > span {
  color: var(--p-muted);
  font-size: .6875rem;
}
.plan-guest-pin-row code {
  overflow: hidden;
  font: .8125rem ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-guest-emails {
  display: grid;
  gap: .625rem;
  padding-top: 1rem;
  border-top: 1px solid var(--p-line);
}
.plan-guest-emails-head strong,
.plan-guest-emails-head small { display: block; }
.plan-guest-emails-head strong { font-size: .8125rem; font-weight: 600; }
.plan-guest-emails-head small {
  margin-top: .2rem;
  color: var(--p-muted);
  font-size: .6875rem;
}
.plan-guest-email-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  height: 2.875rem;
  padding: 0 2px;
  border-bottom: 1px solid #CFD3D8;
}
.plan-guest-email-row:focus-within { border-color: #CFD3D8; }
.plan-guest-email-row > i {
  flex: none;
  color: #8a9099;
  font-size: 1.15rem;
  pointer-events: none;
}
.plan-guest-email-row input,
.plan-guest-email-row input:focus,
.plan-guest-email-row input:focus-visible {
  min-width: 0;
  flex: 1;
  height: 100%;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-size: .875rem;
  outline: none;
  box-shadow: none;
}
.plan-guest-email-row input::placeholder { color: #989da5; }
.plan-guest-email-add {
  flex: none;
  height: 1.75rem;
  padding: 0 .625rem;
  border: 0;
  border-radius: 5px;
  background: #E8EAED;
  color: #5B616A;
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}
.plan-guest-email-add:hover { background: #dde0e4; color: #3d424a; }
.plan-guest-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.plan-guest-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  padding: .2rem .35rem .2rem .55rem;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  background: #f6f7f8;
  font-size: .75rem;
  line-height: 1.3;
  word-break: break-all;
}
.plan-guest-chip .x {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  background: transparent;
  color: var(--p-muted);
  cursor: pointer;
}
.plan-guest-line {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem .75rem;
  font-size: .8125rem;
}
.plan-guest-line .k { color: var(--p-muted); font-size: .75rem; }
.plan-guest-line code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: .8125rem ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
.plan-guest-line small { grid-column: 2 / -1; color: var(--p-faint); font-size: .6875rem; line-height: 1.4; }
.plan-guest-pass { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.plan-mini {
  height: 1.75rem;
  padding: 0 .625rem;
  border: 0;
  border-radius: 5px;
  background: #f1f2f4;
  color: #3d424a;
  font: inherit;
  font-size: .6875rem;
  font-weight: 500;
  cursor: pointer;
}
.plan-mini:hover { background: var(--p-hover); color: var(--p-text); }
.plan-switch-btn {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 1rem;
  background: #CFD3D9;
  cursor: pointer;
  transition: background .15s;
}
.plan-switch-btn::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px #00000026;
  transition: transform .15s;
}
.plan-switch-btn[aria-checked="true"] { background: #9AA0A8; }
.plan-switch-btn[aria-checked="true"]::after { transform: translateX(1rem); }
.plan-form-error { margin: .75rem 2.5rem 0; color: #A33636; font-size: .8125rem; }
.plan-form-error[hidden] { display: none; }

/* Instant-create cabinet chooser still uses radio cards */
.plan-instant-scope .plan-scope-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr)); gap: .5rem; }
.plan-instant-scope .plan-scope-cards label { position: relative; display: block; width: 100%; min-width: 0; cursor: pointer; }
.plan-instant-scope .plan-scope-cards input { position: absolute; opacity: 0; }
.plan-instant-scope .plan-scope-cards label > span {
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: .625rem;
  padding: .625rem .7rem;
  border: 1px solid var(--p-border);
  border-radius: 5px;
  background: #fff;
}
.plan-instant-scope .plan-scope-cards label:hover > span { border-color: #C5CAD1; }
.plan-instant-scope .plan-scope-cards input:checked + span {
  border-color: #111;
  background: #fff;
  box-shadow: none;
}
.plan-instant-scope .plan-scope-cards input:checked + span > i:first-child { background: #111; color: #fff; }
.plan-instant-scope .plan-scope-cards label > span > i:first-child {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #F1F3F5;
  color: #4B5563;
  font-size: 1rem;
}
.plan-instant-scope .plan-scope-cards label > span > i:last-child { color: transparent; }
.plan-instant-scope .plan-scope-cards input:checked + span > i:last-child { color: #111; }
.plan-instant-scope .plan-scope-cards strong,
.plan-instant-scope .plan-scope-cards small { display: block; overflow-wrap: anywhere; }
.plan-instant-scope .plan-scope-cards strong { font-size: .6875rem; font-weight: 600; }
.plan-instant-scope .plan-scope-cards small { margin-top: .125rem; color: var(--p-muted); font-size: .5625rem; line-height: 1.35; }

/* ---------- Created ---------- */
.plan-instant-scope h1,
.plan-created-page h1 { margin-top: 1.75rem; }
.plan-instant-scope .plan-scope-cards { margin-top: 2rem; }
.plan-instant-actions { display: flex; justify-content: center; margin-top: 1.5rem; }
.plan-create-wait {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  background: #F4F5F7;
}
.plan-create-wait-inner { text-align: center; color: #111827; }
.plan-create-mark { width: 4.5rem; height: 4.5rem; color: #111; }
.plan-create-ring {
  transform-origin: 36px 36px;
  animation: plan-create-spin 1.1s linear infinite;
  stroke-dasharray: 44 132;
}
@keyframes plan-create-spin { to { transform: rotate(360deg); } }
.plan-create-wait p { margin: 1.15rem 0 0; color: #6B7280; font-size: 1rem; }
.plan-created-main { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); }
.plan-created-main > div { min-width: 0; flex: 1; }
.plan-created-main h2,
.plan-created-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 .125rem;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  outline: none;
}
.plan-created-title:hover,
.plan-created-title:focus { border-bottom-color: var(--p-line); }
.plan-code { display: inline-block; margin-top: .375rem; color: var(--p-muted); font: .875rem var(--mono); letter-spacing: .06em; }
.plan-block { padding: 2rem 0 0; }
.plan-block + .plan-block { margin-top: 2rem; border-top: 1px solid var(--p-line); }
.plan-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.plan-block-head h2 { margin: 0; font-size: 1rem; font-weight: 500; }
.plan-block-head span { color: var(--p-muted); font-size: .8125rem; }
.plan-list { border-top: 1px solid var(--p-line); }
.plan-copy-row { display: flex; gap: .5rem; margin-top: 1rem; }
.plan-copy-row .plan-input { font-size: .8125rem; color: var(--p-muted); }
.plan-row-links { display: flex; align-items: center; gap: 1.25rem; margin-top: .75rem; }
.plan-row-links .plan-button { height: 2.75rem; margin-left: -.75rem; }
.plan-credentials { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem; margin-top: 1.25rem; }
.plan-credentials > div > span:first-child { display: block; margin-bottom: .375rem; color: var(--p-muted); font-size: .8125rem; }
.plan-credentials strong { display: block; height: 2.25rem; line-height: 2.25rem; font: 500 1.125rem/2.25rem var(--mono); letter-spacing: .08em; }
.plan-password-row { display: flex; align-items: center; gap: .125rem; height: 2.25rem; }
.plan-password-row input { min-width: 0; height: 2.25rem; flex: 1; padding: 0; border: 0; background: transparent; color: var(--p-text); font: 500 1.125rem var(--mono); letter-spacing: .08em; outline: 0; }
.plan-footnote { margin: 3rem 0 0; color: var(--p-faint); font-size: .75rem; line-height: 1.5; }
.plan-copy-fallback { position: fixed; left: 1rem; bottom: 1rem; z-index: 99; width: min(38rem, calc(100vw - 2rem)); height: 8rem; }

/* ---------- Public (guest / invitation) ---------- */
.plan-public-view { --header-h: 0px; }
.plan-public-view .meet-shell { display: none; }
.plan-public-page { min-height: 100vh; background: #F4F5F7; color: #292D33; }
.plan-public-header { height: 3rem; display: flex; align-items: center; padding: 0 1.25rem; background: #000; color: #fff; }
.plan-public-header .plan-text-link { margin-left: auto; color: #9CA3AF; }
.plan-public-header .plan-text-link:hover { color: #fff; }
.plan-public-content { width: min(30rem, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(3rem, 12vh, 7rem) 0 4rem; }
.plan-public-eyebrow { color: #727882; font-size: .875rem; }
.plan-public-content > h1 { margin: .5rem 0 .5rem; font-size: 2rem; line-height: 1.17; letter-spacing: -.045em; font-weight: 500; }
.plan-public-date { margin: 0; color: #727882; font-size: 1rem; }
.plan-public-organizer { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 2.5rem; font-size: .875rem; }
.plan-public-organizer .avatar { border-radius: 4px; }
.plan-public-organizer span { display: flex; flex-direction: column; }
.plan-public-organizer small { margin-top: .1rem; color: #727882; }
.plan-public-form { padding-top: 2rem; border-top: 1px solid #E3E6EA; }
.plan-public-form h2 { margin: 0; font-size: 1.125rem; font-weight: 500; }
.plan-public-form > p { margin: .375rem 0 1.5rem; color: #727882; font-size: .875rem; }
.plan-public-form .plan-field + .plan-field { margin-top: 1.25rem; }
.plan-public-form > .plan-button { width: 100%; margin-top: 1.5rem; }
.plan-invitation-state { margin: 1.5rem 0; padding: 1.5rem 0; border-top: 1px solid #E3E6EA; border-bottom: 1px solid #E3E6EA; }
.plan-invitation-state i { color: #727882; font-size: 1.5rem; }
.plan-invitation-state h2 { margin: .5rem 0 0; }
.plan-invitation-state p { margin: .5rem 0 0; color: #727882; font-size: .875rem; line-height: 1.55; }
.plan-invitation-response { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.plan-guest-device { padding-top: 2rem; border-top: 1px solid #E3E6EA; }
.plan-guest-video { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 4px; background: #17191D; color: #fff; }
.plan-guest-video > span { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 50%; background: #3B4149; font-size: 1.25rem; }
.plan-guest-video > small { position: absolute; left: .875rem; bottom: .75rem; color: #D9DCDF; font-size: .8125rem; }
.plan-guest-video > div { position: absolute; right: .75rem; bottom: .625rem; display: flex; gap: .5rem; }
.plan-device-toggle { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: #fff; color: #111; cursor: pointer; }
.plan-device-toggle[aria-pressed="false"] { background: #B33B3B; color: #fff; }
.plan-guest-device h2 { margin: 1.5rem 0 .375rem; font-size: 1.125rem; font-weight: 500; }
.plan-guest-device > p { margin: 0 0 1.25rem; color: #727882; font-size: .875rem; line-height: 1.55; }
.plan-prototype-note { margin: 1.5rem 0 0; color: #9EA4AD; font-size: .75rem; line-height: 1.5; }
.plan-not-found { max-width: 32rem; margin: 0 auto; padding-top: clamp(4rem, 15vh, 9rem); text-align: center; }
.plan-not-found p { margin: .75rem 0 2rem; color: var(--p-muted); font-size: 1rem; }

@media (max-width: 70rem) {
  .plan-calendar-layout { grid-template-columns: 1fr; }
  .plan-calendar-sidebar { display: none; }
  .plan-create-page.plan-page { --create-pad: 1.5rem; padding: var(--create-pad) 1.25rem; }
  .plan-create-shell { width: min(54rem, 100%); grid-template-columns: 15rem minmax(0, 1fr); }
}

.plan-calendar-choice {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.plan-calendar-choice .plan-ctl {
  width: min(22rem, 100%);
}
.plan-calendar-choice .plan-ctl:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.plan-cal-pick {
  position: relative;
  min-width: 0;
  flex: 1;
  max-width: 22rem;
}
.plan-cal-pick.is-off .plan-cal-pick-btn {
  opacity: .5;
  pointer-events: none;
}
.plan-cal-pick-btn {
  width: 100%;
  height: var(--p-control);
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0 .75rem 0 .7rem;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plan-cal-pick-btn:hover { border-color: #C5CAD1; }
.plan-cal-pick-btn:focus,
.plan-cal-pick-btn:focus-visible { border-color: #111827; outline: 0; }
.plan-cal-pick-btn[aria-expanded="true"] { border-color: #111827; }
.plan-cal-pick-color {
  width: .5rem;
  height: 1.75rem;
  border-radius: 1px;
  background: #111827;
  flex: none;
}
.plan-cal-pick-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
}
.plan-cal-pick-btn .ti {
  margin-left: auto;
  color: #9CA3AF;
  font-size: 1rem;
}
.plan-cal-pick-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  overflow: auto;
  max-height: 16rem;
}
.plan-cal-pick-opt {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 2.85rem;
  padding: .45rem .7rem;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plan-cal-pick-opt:last-child { border-bottom: 0; }
.plan-cal-pick-opt:hover,
.plan-cal-pick-opt.is-on { background: #fafbfc; }
.plan-cal-pick-opt .plan-cal-pick-color { height: 1.7rem; }
.plan-cal-pick-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.plan-cal-pick-label b {
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-cal-pick-label em {
  flex: none;
  padding: .1rem .3rem;
  background: #eef0f2;
  color: #747d88;
  font-size: .5rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 2px;
}

@media (max-width: 50rem) {
  .plan-page { padding: 1.5rem 1.25rem 3rem; }
  .plan-page-head { flex-direction: column; align-items: stretch; margin-bottom: 1.25rem; }
  .plan-calendar-page { padding: 1.25rem 1.25rem 1rem; }
  .plan-calendar-page .plan-page-head { margin-bottom: 1rem; }
  .plan-calendar-toolbar h2 { display: none; }
  .plan-create-page.plan-page { --create-pad: 1.25rem; padding: var(--create-pad) 1rem 1rem; }
  .plan-when { flex-wrap: wrap; }
  .plan-when-box { min-width: 100%; }
  .plan-create-shell { display: flex; flex-direction: column; width: 100%; min-height: 0; height: 100%; }
  .plan-create-sidebar { position: static; flex: none; width: 100%; height: auto; max-height: none; padding: 0 0 1rem; overflow: visible; }
  .plan-sheet { flex: 1; min-height: 0; height: auto; }
  .plan-guest-options { grid-template-columns: 1fr; }
  .plan-create-nav { grid-template-columns: repeat(3, 1fr); gap: .25rem; margin-top: 1rem; }
  .plan-create-nav button { grid-template-columns: 1.75rem 1fr; padding: .5rem; }
  .plan-create-nav small,
  .plan-side-preview { display: none; }
  .plan-sheet-body,
  .plan-sheet-foot { padding-left: 1.25rem; padding-right: 1.25rem; }
  .plan-row { grid-template-columns: 1fr; gap: .75rem; }
  .plan-scope-cards { grid-template-columns: 1fr; }
  .plan-guest-details { margin-left: 0; }
  .plan-agenda-item { grid-template-columns: 1.375rem minmax(0, 1fr) auto; }
  .plan-agenda-mins { grid-column: 2; justify-self: start; }
  .plan-agenda-remove { grid-column: 3; grid-row: 1; }
  .plan-guest-line { grid-template-columns: 1fr auto; }
  .plan-guest-line .k { grid-column: 1 / -1; }
  .plan-form-error { margin-left: 1.25rem; margin-right: 1.25rem; }
  .plan-credentials,
  .plan-invitation-response { grid-template-columns: 1fr; }
  .plan-created-main { align-items: stretch; flex-direction: column; }
  .plan-copy-row { flex-direction: column; }
  .plan-row-links { flex-wrap: wrap; gap: .75rem; }
}