/* Modern presentation for the .39 schedule shell: header, When/Show, Calendar, Table, utility bar
 * and bottom navigation. Approved references: DS-01 Calendar People and DS-02 Table People.
 * Presentation only. Every .39 element ID, class and handler is kept; this sheet loads last and is
 * scoped under #app so it wins over .39's earlier layered rules. Tokens follow the Modern Control
 * specification (shared tokens v4) and the .53 Modern build. */
:root{
  --mc-blue:#3877c8;--mc-blue-strong:#245fae;--mc-pill-blue:#5b8bd0;
  --mc-ink:#0c1831;--mc-text:#1d283c;--mc-muted:#68758a;--mc-faint:#9aa3b1;
  --mc-line:#cbd7e7;--mc-grid:#dfe5ee;--mc-surface:#fff;--mc-panel:#e7eef7;--mc-panel-line:#d6e0ec;
  --mc-row-alt:#f1f3f6;--mc-row-event:#e3eaf3;
  --mc-green:#27a96b;--mc-green-strong:#1f9a5c;--mc-red:#e0393e;--mc-yellow:#fff200;--mc-none:#d9dde3;
  --mc-radius-sm:8px;--mc-radius-md:12px;--mc-radius-lg:18px;--mc-tap:44px;
  --mc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mc-header-height:78px;
  /* .39 layout offsets (popovers, sticky rows, update banner) all derive from this variable. */
  --ya-phone-header-height:var(--mc-header-height)!important;
}

/* ---------- Header (CAL/TBL-01..06) ---------- */
html body #app .topbar.mc-header{
  position:relative!important;display:grid!important;grid-template-columns:56px minmax(0,1fr) 52px!important;align-items:center!important;gap:4px!important;
  flex:0 0 auto!important;min-height:var(--mc-header-height)!important;height:auto!important;overflow:visible!important;
  padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left))!important;
  background:var(--mc-surface)!important;color:var(--mc-ink)!important;border-bottom:1px solid #e3e8ef!important;box-shadow:none!important;
}
html body #app .topbar.mc-header .header-logo-wrap{position:relative!important;width:52px!important;height:52px!important;margin:0!important}
html body #app .topbar.mc-header .header-logo{width:52px!important;height:52px!important;object-fit:contain!important;filter:none!important}
html body #app .topbar.mc-header #testBuildBadge{position:absolute!important;left:34px!important;top:-2px!important;font-size:8px!important;line-height:10px!important}
html body #app .topbar.mc-header .brand{min-width:0!important;display:grid!important;justify-items:center!important;gap:3px!important;text-align:center!important;padding:0!important;margin:0!important}
html body #app .topbar.mc-header .group-title{
  min-width:0!important;max-width:100%!important;display:grid!important;justify-items:center!important;line-height:1.12!important;
  font:inherit!important;color:var(--mc-ink)!important;white-space:normal!important;overflow:visible!important;
}
html body #app .topbar.mc-header .group-title>*{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
html body #app .topbar.mc-header .mc-group-primary{font:800 17px/1.12 var(--mc-font);letter-spacing:-.01em;color:var(--mc-ink)}
html body #app .topbar.mc-header .mc-group-secondary{font:450 15px/1.12 var(--mc-font);color:var(--mc-text)}
html body #app .topbar.mc-header .header-alt-inline{display:none!important}
html body #app .topbar.mc-header .mc-header-tools{width:100%;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px}
html body #app .topbar.mc-header .mc-header-tagline{
  min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  margin:0!important;color:var(--mc-faint)!important;font:400 10.5px/1.2 var(--mc-font)!important;
}
html body #app .topbar.mc-header .mc-pill{
  position:relative;min-width:52px;min-height:22px;height:auto;margin:0;padding:2px 12px;border:0;border-radius:999px;
  background:var(--mc-pill-blue);color:#fff;font:600 11.5px/1.2 var(--mc-font);cursor:pointer;box-shadow:none;
}
html body #app .topbar.mc-header .mc-pill::after{content:"";position:absolute;inset:-11px -4px} /* 44px hit height, compact pill */
html body #app .topbar.mc-header .mc-pill:disabled{cursor:default;opacity:1}
html body #app .topbar.mc-header .mc-group-slot{display:flex;justify-content:flex-end;min-width:52px}
html body #app .topbar.mc-header .header-group-selector{
  position:relative!important;min-width:52px!important;max-width:120px!important;min-height:22px!important;height:auto!important;margin:0!important;padding:2px 12px!important;
  border:0!important;border-radius:999px!important;background:var(--mc-pill-blue)!important;color:#fff!important;
  font:600 11.5px/1.2 var(--mc-font)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;box-shadow:none!important;
}
html body #app .topbar.mc-header #moreBtn{
  position:relative!important;display:grid!important;justify-items:center!important;align-content:center!important;gap:2px!important;
  width:52px!important;min-width:44px!important;height:auto!important;min-height:44px!important;margin:0!important;padding:0!important;
  border:0!important;background:transparent!important;color:var(--mc-ink)!important;
}
html body #app .topbar.mc-header #userChip{
  display:grid!important;place-items:center!important;width:34px!important;height:34px!important;border-radius:50%!important;
  background:#f6c89e!important;color:transparent!important;font-size:0!important;line-height:0!important;overflow:hidden!important;position:relative!important;
}
html body #app .topbar.mc-header #userChip::before{content:attr(data-initials);color:#1a2438;font:700 12.5px/1 var(--mc-font)}
html body #app .topbar.mc-header #userChip:empty::before,html body #app .topbar.mc-header #userChip:not([data-initials])::before{content:""}
html body #app .topbar.mc-header #moreBtn img{width:24px!important;height:24px!important;margin:0!important;filter:brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(2170%) hue-rotate(198deg) brightness(92%)!important}
html body #app .topbar.mc-header .mc-people-toggle{background:var(--mc-pill-blue)!important;color:#fff!important;opacity:1!important;filter:none!important}

/* ---------- When / Show (CAL/TBL-07..10) ---------- */
html body #app #classicFilters{margin:0!important;padding:6px 6px 7px!important;background:var(--mc-panel)!important;border:0!important;border-bottom:1px solid var(--mc-panel-line)!important;box-shadow:none!important}
html body #app #classicFilters .mc-filter-shell{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html body #app #classicFilters .mc-filter-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:0}
html body #app #classicFilters .mc-filter{min-width:0!important;display:flex!important;flex-direction:column!important;grid-template-columns:none!important;gap:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
html body #app #classicFilters #filterTimeControl,html body #app #classicFilters #filterShowControl{
  all:unset;box-sizing:border-box;width:100%;min-width:0;display:grid;gap:3px;cursor:pointer;font-family:var(--mc-font);text-align:left;
}
html body #app #classicFilters .mc-filter-heading{min-width:0;display:grid;grid-template-columns:22px minmax(0,1fr) 16px;align-items:center;gap:6px;padding:1px 4px 0 6px;font:500 13.5px/1.2 var(--mc-font);color:#18243a}
html body #app #classicFilters .mc-filter-heading img:first-child{width:22px;height:22px;filter:brightness(0) saturate(100%) invert(46%) sepia(55%) saturate(620%) hue-rotate(182deg) brightness(93%) contrast(90%)}
html body #app #classicFilters .mc-filter-heading img:last-child{width:16px;height:16px;filter:brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(2170%) hue-rotate(198deg) brightness(92%)}
html body #app #classicFilters .mc-filter-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 12px 1px;border-radius:13px 13px 0 0;background:#fff;font:700 13px/1.25 var(--mc-font);color:var(--mc-ink)}
html body #app #classicFilters #filterDaysControl,html body #app #classicFilters .mc-filter .filter-summary{
  all:unset;box-sizing:border-box;display:block!important;width:100%;min-width:0;min-height:0!important;height:auto!important;margin:0!important;
  padding:2px 12px 8px!important;border:0!important;border-radius:0 0 13px 13px!important;background:#fff!important;box-shadow:none!important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11.5px/1.3 var(--mc-font)!important;color:#2b3547!important;text-align:left!important;cursor:pointer;
}
html body #app #classicFilters .filter-summary .filter-label{display:none!important}
html body #app #classicFilters .mc-filter .filter-summary>span{outline:0!important;border:0!important;background:transparent!important;padding:0!important;display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-height:1.3em!important;font:inherit!important;color:inherit!important}
html body #app #classicFilters #filterTimeControl:focus-visible .mc-filter-value,html body #app #classicFilters #filterShowControl:focus-visible .mc-filter-value,
html body #app #classicFilters #filterDaysControl:focus-visible{outline:2px solid var(--mc-blue);outline-offset:1px}

/* ---------- Calendar (CAL-11..16) ---------- */
html body #app #calendarView{background:var(--mc-panel)!important;padding:6px 6px 0!important}
html body #app #calendarView .calendar-toolbar{
  display:grid!important;grid-template-columns:minmax(0,1fr) 34px minmax(0,auto) 34px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;
  min-height:56px!important;margin:0!important;padding:4px 8px!important;border:1px solid var(--mc-grid)!important;border-bottom:0!important;border-radius:14px 14px 0 0!important;background:#f6f8fb!important;
}
html body #app #calendarView #calPrev{grid-column:2!important}
html body #app #calendarView #calPrev,html body #app #calendarView #calNext{
  position:relative!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;display:grid!important;place-items:center!important;
  border:1px solid #e3e8f0!important;border-radius:8px!important;background:#edf1f7!important;box-shadow:none!important;
}
html body #app #calendarView #calPrev::after,html body #app #calendarView #calNext::after{content:"";position:absolute;inset:-5px}
html body #app #calendarView #calPrev img,html body #app #calendarView #calNext img{width:18px!important;height:18px!important;filter:brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(2170%) hue-rotate(198deg) brightness(92%)!important}
html body #app #calendarView .calendar-title{display:grid!important;justify-items:center!important;gap:1px!important;min-width:0!important;text-align:center!important}
html body #app #calendarView .cal-month{font:800 21px/1.15 var(--mc-font)!important;color:#14254a!important;white-space:nowrap!important}
html body #app #calendarView .cal-band{font:500 11.5px/1.2 var(--mc-font)!important;color:#4c6a98!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #app #calendarView #calToday{
  justify-self:end!important;min-height:34px!important;height:34px!important;padding:0 12px!important;border:1px solid #e3e8f0!important;border-radius:8px!important;
  background:#edf1f7!important;color:#24324d!important;font:600 13px/1 var(--mc-font)!important;box-shadow:none!important;
}
html body #app #calendarView .cal-grid{gap:0!important;background:#fff!important;border:1px solid var(--mc-grid)!important;border-top:0!important;border-radius:0 0 14px 14px!important;overflow:hidden!important}
html body #app #calendarView .cal-dow{padding:6px 0!important;background:#f6f8fb!important;border-bottom:1px solid var(--mc-grid)!important;color:#4b5568!important;font:500 13px/1.2 var(--mc-font)!important;text-align:center!important}
html body #app #calendarView .cal-day{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:2px!important;
  padding:6px 5px 4px!important;margin:0!important;border:0!important;border-right:1px solid var(--mc-grid)!important;border-bottom:1px solid var(--mc-grid)!important;border-radius:0!important;
  background:#fff!important;color:var(--mc-ink)!important;text-align:left!important;box-shadow:none!important;overflow:hidden!important;
}
html body #app #calendarView .cal-day:nth-child(7n+7){border-right:0!important}
html body #app #calendarView .cal-day.out{background:#f6f8fb!important}
html body #app #calendarView .cal-day.out .cal-num{color:#aab3c0!important}
html body #app #calendarView .cal-num{font:500 14px/1.1 var(--mc-font)!important;color:#18243a!important;margin:0!important;padding:0!important;background:transparent!important}
html body #app #calendarView .calendar-open-label{font:600 12.5px/1.15 var(--mc-font)!important;color:var(--mc-green-strong)!important;margin:0!important;padding:0!important;background:transparent!important}
html body #app #calendarView .member-initials{display:flex!important;flex-wrap:wrap!important;gap:2px!important;margin-top:3px!important}
html body #app #calendarView .member-dot{width:19px!important;height:19px!important;min-width:19px!important;border-radius:50%!important;font:800 8px/19px var(--mc-font)!important;letter-spacing:-.02em!important;text-align:center!important;padding:0!important;color:#fff!important}
html body #app #calendarView .cal-day>.cal-num,html body #app #calendarView .cal-day>.calendar-open-label,html body #app #calendarView .cal-day>.member-initials{position:static!important;inset:auto!important;transform:none!important;text-align:left!important}

/* ---------- Table (TBL-11..15) ---------- */
html body #app .table-wrap{background:#fff!important}
html body #app .table-head{background:#f6f8fb!important;border-bottom:1px solid var(--mc-grid)!important}
html body #app .table-left-head .date,html body #app .table-left-head .event{display:flex!important;align-items:flex-end!important;padding:0 6px 6px!important;font:600 13px/1.2 var(--mc-font)!important;color:#18243a!important;background:transparent!important}
html body #app .table-left-head .date{font-weight:700!important}
html body #app .table-mid-head-inner>div{display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0 0 4px!important}
html body #app .table-mid-head-inner .header-count{
  all:unset;box-sizing:border-box;display:grid!important;justify-items:center!important;align-content:end!important;gap:2px!important;width:40px!important;min-height:44px!important;cursor:pointer;
}
html body #app .table-mid-head-inner .header-count .member-dot{width:26px!important;height:26px!important;min-width:26px!important;border-radius:50%!important;font:700 10px/26px var(--mc-font)!important;text-align:center!important;padding:0!important}
html body #app .table-mid-head-inner .header-count .mc-member-name{max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11.5px/1.15 var(--mc-font);color:#1d283c}
html body #app .table-mid-head-inner .header-count.off{opacity:.45!important}
/* Rows: open dates on soft grey, booked dates on white (DS-02). */
html body #app .table-left-row,html body #app .table-mid-row{background:var(--mc-row-alt)!important;border-bottom:1px solid #e3e7ed!important}
html body #app .table-left-row.booked,html body #app .table-mid-row.booked{background:#fff!important}
html body #app .table-left-row.table-date-header,html body #app .table-mid-row.table-date-header{background:var(--mc-row-event)!important}
html body #app .table-left-row .date{font:400 13.5px/1.2 var(--mc-font)!important;color:#4b5568!important;padding-left:6px!important;white-space:nowrap!important;background:transparent!important}
html body #app .table-left-row.table-event-time .date{justify-content:flex-end!important;text-align:right!important;padding-right:8px!important;font-size:12px!important;color:#4b5568!important}
html body #app .table-left-row.table-date-header .date{color:#4b5568!important;font-weight:500!important}
html body #app .table-left-row .event{background:transparent!important;border-left:1px solid #e3e7ed!important}
html body #app .table-left-row .event-pill{all:unset;box-sizing:border-box;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px;font:400 13.5px/1.2 var(--mc-font);color:#1d283c;cursor:pointer}
/* Availability cells (TBL-14): readonly = circles, your editable column = rounded squares, unknown = yellow square. */
html body #app .table-mid-row .status:not(.ya-mg-mixed):not(.member-dot){
  width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;padding:0!important;margin:auto!important;
  border:0!important;border-radius:50%!important;background-position:center!important;background-repeat:no-repeat!important;background-size:15px 15px!important;
  font:800 14px/24px var(--mc-font)!important;text-align:center!important;color:transparent!important;opacity:1;
}
html body #app .table-mid-row .status:not(.ya-mg-mixed):not(.member-dot):not(.ya-save-pending){box-shadow:none!important}
html body #app .table-mid-row .status.editable:not(.ya-mg-mixed){border-radius:5px!important;width:26px!important;height:26px!important}
html body #app .table-mid-row .status.y:not(.ya-mg-mixed){background-color:var(--mc-green)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")!important}
html body #app .table-mid-row .status.n:not(.ya-mg-mixed){background-color:var(--mc-red)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")!important;background-size:12px 12px!important}
html body #app .table-mid-row .status.q:not(.ya-mg-mixed){border-radius:4px!important;width:22px!important;height:22px!important;background:var(--mc-yellow)!important;color:#111!important;font:800 13px/22px var(--mc-font)!important}
html body #app .table-mid-row .status.editable.q:not(.ya-mg-mixed){width:24px!important;height:24px!important;line-height:24px!important}
html body #app .table-mid-row span[aria-label]:not(.status){display:grid!important;place-items:center!important;width:22px!important;height:22px!important;margin:auto!important;border-radius:50%!important;background:var(--mc-none)!important;color:#2b3547!important;font:800 13px/1 var(--mc-font)!important}
html body #app .table-head,html body #app .table-left-head,html body #app .table-mid-head-inner{height:52px!important}
html body #app .table-left-row.table-event-time .date{font-size:11px!important;letter-spacing:-.01em!important;padding-right:5px!important;overflow:hidden!important;text-overflow:clip!important}

/* ---------- Utility bar: Search Events, Undo, Redo (CAL-17..19 / TBL-16..18) ---------- */
html body #app #utilityBar{
  display:grid!important;grid-template-columns:minmax(0,1fr) 44px 44px!important;align-items:center!important;gap:6px!important;
  min-height:48px!important;height:auto!important;padding:4px 10px!important;background:#fff!important;border-top:1px solid #e3e8ef!important;box-shadow:none!important;
}
html body #app #utilityBar .search-wrap{min-width:0!important;width:100%!important}
html body #app #utilityBar #searchBtn{
  all:unset;box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:44px!important;height:auto!important;display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;align-items:center!important;gap:6px!important;padding:0!important;border:0!important;background:transparent!important;cursor:pointer;
}
html body #app #utilityBar #searchBtn>span:last-child{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html body #app #utilityBar #searchBtn::after{content:"";display:block;height:30px;border:1px solid #c9d1dc;border-radius:999px;background:#fff}
html body #app #utilityBar #searchBtn .search-ico svg,html body #app #utilityBar #searchInline .search-ico svg{width:24px!important;height:24px!important;stroke:var(--mc-ink)!important;stroke-width:2.2!important;fill:none!important}
html body #app #utilityBar #searchInline:not(.hidden){display:grid!important;grid-template-columns:28px minmax(0,1fr) 32px!important;align-items:center!important;gap:6px!important;min-width:0!important;grid-column:1!important}
html body #app #utilityBar #searchInline:not(.hidden)~#undoBtn,html body #app #utilityBar #searchInline:not(.hidden)~#redoBtn{display:grid!important}
html body #app #utilityBar #searchInput{min-height:32px!important;height:32px!important;padding:0 12px!important;border:1px solid #c9d1dc!important;border-radius:999px!important;font:400 16px/1.2 var(--mc-font)!important;background:#fff!important}
html body #app #utilityBar #undoBtn,html body #app #utilityBar #redoBtn{
  all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
}
html body #app #utilityBar #undoBtn>span:not(.history-ico),html body #app #utilityBar #redoBtn>span:not(.history-ico){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html body #app #utilityBar .history-ico{display:block;width:30px;height:30px;background:center/30px 30px no-repeat}
html body #app #utilityBar .history-ico svg{display:none!important}
html body #app #utilityBar #undoBtn .history-ico{background-image:url(/icons/heroicons/arrow-uturn-left.svg)}
html body #app #utilityBar #redoBtn .history-ico{background-image:url(/icons/heroicons/arrow-uturn-right.svg)}
html body #app #utilityBar #undoBtn.disabled,html body #app #utilityBar #redoBtn.disabled,html body #app #utilityBar #undoBtn:disabled,html body #app #utilityBar #redoBtn:disabled{opacity:.3!important;cursor:default!important}

/* ---------- Bottom navigation (CAL-20..24 / TBL-19..23) ---------- */
html body #app .bottomnav.mc-bottom-nav{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch!important;gap:0!important;
  min-height:64px!important;height:auto!important;padding:0 0 env(safe-area-inset-bottom)!important;background:#fff!important;border-top:1px solid #e3e8ef!important;box-shadow:none!important;
}
html body #app .bottomnav.mc-bottom-nav .navbtn{
  display:grid!important;justify-items:center!important;align-content:center!important;gap:3px!important;min-height:64px!important;height:auto!important;margin:0!important;padding:6px 2px!important;
  border:0!important;border-radius:0!important;background:transparent!important;color:#1e3557!important;box-shadow:none!important;
}
html body #app .bottomnav.mc-bottom-nav .navbtn.active{background:#edf1f7!important;color:#1e3557!important}
html body #app .bottomnav.mc-bottom-nav .navbtn .ico{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;margin:0!important;border-radius:0!important;background:transparent!important;font-size:0!important;box-shadow:none!important}
html body #app .bottomnav.mc-bottom-nav .mc-nav-icon{width:30px!important;height:30px!important;display:block!important;fill:none!important;stroke:currentColor!important;color:#1e3557}
html body #app .bottomnav.mc-bottom-nav .nav-label{font:500 12.5px/1.1 var(--mc-font)!important;color:#1e3557!important;white-space:nowrap!important}
html body #app #calendarView .cal-day{height:auto!important;min-height:78px!important;padding:5px 3px 4px 4px!important}
html body #app #calendarView .member-initials{gap:1px!important;margin-top:2px!important}
html body #app #calendarView .cal-day .member-dot{width:16px!important;height:16px!important;min-width:16px!important;font:800 7px/16px var(--mc-font)!important;letter-spacing:-.03em!important}
html body #app #calendarView .cal-day{padding:5px 2px 4px 3px!important}
html body #app #calendarView .cal-day .member-dot{width:15px!important;height:15px!important;min-width:15px!important;font:800 6.5px/15px var(--mc-font)!important}
html body #app #calendarView:not(.hidden){display:flex!important;flex-direction:column!important}
html body #app #calendarView .cal-grid{flex:1 1 auto!important;align-content:stretch!important}
html body #app #calendarView .cal-grid[data-weeks="4"]{grid-template-rows:auto repeat(4,minmax(78px,1fr))!important}
html body #app #calendarView .cal-grid[data-weeks="5"]{grid-template-rows:auto repeat(5,minmax(78px,1fr))!important}
html body #app #calendarView .cal-grid[data-weeks="6"]{grid-template-rows:auto repeat(6,minmax(72px,1fr))!important}
html body #app #calendarView .cal-day .member-dot{width:14px!important;height:14px!important;min-width:14px!important;font:800 6.5px/14px var(--mc-font)!important}
html body #app #calendarView .cal-month{font:700 19px/1.15 var(--mc-font)!important}
html body #app #calendarView .member-initials{gap:0!important}
html body #app #calendarView .cal-day .member-dot{width:15px!important;height:15px!important;min-width:15px!important;font:800 6.5px/15px var(--mc-font)!important;box-shadow:0 0 0 1px #fff!important}

/* ---------- Narrow phones (320–360 px) ---------- */
@media (max-width:360px){
  html body #app .topbar.mc-header .mc-group-primary{font-size:15px}
  html body #app .topbar.mc-header .mc-group-secondary{font-size:13px}
  html body #app #calendarView .calendar-toolbar{gap:6px!important;padding:4px 6px!important;grid-template-columns:minmax(0,.4fr) 32px minmax(0,auto) 32px minmax(0,1fr)!important}
  html body #app #calendarView #calPrev,html body #app #calendarView #calNext{width:32px!important;height:32px!important;min-width:32px!important}
  html body #app #calendarView .cal-month{font-size:16px!important}
  html body #app #calendarView #calToday{padding:0 8px!important;font-size:12px!important}
  html body #app .bottomnav.mc-bottom-nav .nav-label{font-size:11px!important}
  html body #app .bottomnav.mc-bottom-nav .mc-nav-icon{width:26px!important;height:26px!important}
}

/* ---------- Text selection (Gary, 17 Oct) ----------
 * No text selection or iOS long-press copy callout anywhere except where people type: text
 * fields, text areas, selects and editable text keep normal select / copy / paste. This keeps
 * drags (Event column resize, reorder handles) and taps from selecting text. */
html body,html body *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
html body input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=range]),
html body textarea,html body select,html body [contenteditable]:not([contenteditable=false]),html body [contenteditable]:not([contenteditable=false]) *{
  -webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important;
}

/* ---------- Gary, Oct 18: availability dots and initials avatars 30% smaller ---------- */
html body #app .table-mid-row .status:not(.ya-mg-mixed):not(.member-dot){width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;background-size:11px 11px!important;font:800 10px/17px var(--mc-font)!important;position:relative!important}
html body #app .table-mid-row .status.editable:not(.ya-mg-mixed){width:18px!important;height:18px!important;border-radius:4px!important}
html body #app .table-mid-row .status.n:not(.ya-mg-mixed){background-size:9px 9px!important}
html body #app .table-mid-row .status.q:not(.ya-mg-mixed){width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;border-radius:3px!important;font:800 10px/15px var(--mc-font)!important}
html body #app .table-mid-row .status.editable.q:not(.ya-mg-mixed){width:17px!important;height:17px!important;line-height:17px!important}
/* Smaller look, same finger target: an invisible ring keeps editable cells easy to tap. */
html body #app .table-mid-row .status.editable:not(.ya-mg-mixed)::before{content:"";position:absolute;inset:-10px}
html body #app .table-mid-row span[aria-label]:not(.status){width:15px!important;height:15px!important;font:800 10px/1 var(--mc-font)!important}
html body #app .table-mid-head-inner .header-count .member-dot{width:18px!important;height:18px!important;min-width:18px!important;font:700 8px/18px var(--mc-font)!important}

/* Show: the heading ("Show >") opens the default views; the white box opens Saved Views (Gary, Oct 18). */
html body #app #classicFilters #filterShowSaved{all:unset;box-sizing:border-box;width:100%;min-width:0;display:grid;gap:0;margin-top:3px;cursor:pointer;font-family:var(--mc-font);text-align:left;border-radius:13px}
html body #app #classicFilters #filterShowSaved .filter-summary{cursor:pointer}
html body #app #classicFilters #filterShowSaved:focus-visible{outline:2px solid var(--mc-blue);outline-offset:1px}
html body #app #classicFilters #filterShowControl .mc-filter-heading{min-height:23px}

/* Event column resize (Gary, Oct 18): 30px-wide touch target on the column edge (mostly over the Event header, so it
   does not cover the first member's initials), with a visible grip. */
html body #app .table-left-head .event .event-column-resize{right:-6px!important;width:30px!important;border:0!important;background:transparent!important;z-index:30!important}
html body #app .table-left-head .event .event-column-resize::before{content:"";position:absolute;top:0;bottom:0;left:23px;width:2px;background:#aab4c4}
html body #app .table-left-head .event .event-column-resize::after{content:"";position:absolute;top:50%;left:20px;width:8px;height:22px;margin-top:-11px;border-radius:4px;background:#fff;border:1.5px solid #8a99ae;box-sizing:border-box}
html body #app .table-left-head .event .event-column-resize:active::after,html body #app .table-left-head .event .event-column-resize:focus-visible::after{border-color:var(--mc-blue);background:#e3eefb}

/* Gary, Oct 18: Y and N letters instead of check / X in the Table. */
html body #app .table-mid-row .status.y:not(.ya-mg-mixed),html body #app .table-mid-row .status.n:not(.ya-mg-mixed){background-image:none!important;color:#fff!important;font:800 10.5px/17px var(--mc-font)!important}
html body #app .table-mid-row .status.editable.y:not(.ya-mg-mixed),html body #app .table-mid-row .status.editable.n:not(.ya-mg-mixed){line-height:18px!important;font-size:11px!important}
/* Fast Edit feedback: the new answer zooms to 5x the cell size for ~500 ms. */
html body .fast-edit-feedback.fast-edit-zoom{display:grid!important;place-items:center!important;padding:0!important;border-radius:22%!important;background:var(--mc-yellow,#fff200)!important;color:#111!important;font-family:var(--mc-font)!important;font-weight:800!important;box-shadow:0 10px 30px rgba(12,24,49,.35)!important;animation:ya-fast-zoom .5s ease-out forwards}
html body .fast-edit-feedback.fast-edit-zoom.y{background:var(--mc-green,#27a96b)!important;color:#fff!important}
html body .fast-edit-feedback.fast-edit-zoom.n{background:var(--mc-red,#e0393e)!important;color:#fff!important}
@keyframes ya-fast-zoom{0%{transform:translate(-50%,-50%) scale(.2);opacity:.6}25%{transform:translate(-50%,-50%) scale(1);opacity:1}80%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.05);opacity:0}}
@media (prefers-reduced-motion:reduce){html body .fast-edit-feedback.fast-edit-zoom{animation:ya-fast-fade .5s linear forwards}@keyframes ya-fast-fade{0%,80%{opacity:1}100%{opacity:0}}}

/* Gary, Oct 18: while Search Events is open, hide the closed-state search pill so only one search field shows. */
html body #app #utilityBar.search-open .search-wrap,html body #app #utilityBar:has(#searchInline:not(.hidden)) .search-wrap{display:none!important}

/* Gary, Oct 18: member cells fill their column (no gray strip between members) and show the row colour.
   The signed-in member's column is 10% wider (44px vs 40px), with a ~10% larger avatar and answer. */
html body #app .table-mid-head-inner>div,html body #app .table-mid-row>div{width:auto!important;min-width:0!important;max-width:none!important}
html body #app .table-mid-row>div{background:transparent!important;border-right:0!important}
html body #app .table-mid-row.booked>div{background:transparent!important}
/* Multi-event day: the date row above and the closing row below are one light-gray band across the whole table. */
html body #app .table-mid-row.table-date-header>.blank-slot,html body #app .table-mid-row.table-date-closing>.blank-slot{grid-column:1/-1!important;background:transparent!important;border:0!important}
html body #app .table-left-row.table-date-closing>div,html body #app .table-left-row.table-date-header>div{background:transparent!important}
html body #app .table-mid-head-inner>.ya-mine-col .header-count .member-dot{width:20px!important;height:20px!important;min-width:20px!important;font:700 9px/20px var(--mc-font)!important}
html body #app .table-mid-row>.ya-mine-col .status:not(.ya-mg-mixed):not(.member-dot){width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important;font-size:11.5px!important;line-height:19px!important}
html body #app .table-mid-row>.ya-mine-col .status.editable:not(.ya-mg-mixed){width:20px!important;height:20px!important;line-height:20px!important;font-size:12px!important}
html body #app .table-mid-row>.ya-mine-col .status.q:not(.ya-mg-mixed){width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;line-height:17px!important;font-size:11px!important}
html body #app .table-mid-row>.ya-mine-col .status.editable.q:not(.ya-mg-mixed){width:19px!important;height:19px!important;line-height:19px!important}

/* Positions View off (default): the People / Positions switch is hidden and the tagline takes its place. */
html body #app .topbar.mc-header .mc-people-toggle[hidden]{display:none!important}
html body #app .topbar.mc-header .mc-header-tools:has(.mc-people-toggle[hidden]){grid-template-columns:minmax(0,1fr) auto}

/* Gary, Oct 18: smaller user avatar with the initials centred (the hidden first-name text no longer
   takes a grid row above the initials). */
html body #app .topbar.mc-header #userChip{width:26px!important;height:26px!important;min-width:26px!important}
html body #app .topbar.mc-header #userChip::before{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;font:700 10px/1 var(--mc-font)!important;letter-spacing:.01em}
/* Narrower member columns (36px; Gary, Oct 18): first names a touch smaller so they fit. */
html body #app .table-mid-head-inner .header-count .mc-member-name{max-width:34px!important;font-size:11px!important;letter-spacing:-.01em}

/* Gary, Oct 18: Table header shows only each member's dot (no first name), with less space above it. */
html body #app .table-mid-head-inner .header-count .mc-member-name{display:none!important}
html body #app .table-head,html body #app .table-left-head,html body #app .table-mid-head-inner{height:34px!important}
html body #app .table-mid-head-inner>div{align-items:center!important;padding:0!important}
html body #app .table-mid-head-inner .header-count{width:100%!important;min-height:34px!important;align-content:center!important}
/* More members to the right (Gary, Oct 20): small black arrow over the right end of the member header. */
/* Gary, Oct 22: no white fade behind the arrow, so it never hides part of an avatar; just the small black arrow at the edge. */
html body #app .table-wrap>.ya-more-members{position:absolute;z-index:500;width:10px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#0c1831;display:grid;place-items:center;cursor:pointer;box-shadow:none}
html body #app .table-wrap>.ya-more-members svg{display:block;width:10px;height:10px;margin:0}

/* Gary, Oct 20: a member outside an event's band gets a truly empty cell (no grey dot or dash). */
html body #app .table-mid-row span.ya-mg-absent[aria-label]:not(.status){display:block!important;width:0!important;height:0!important;background:transparent!important;border:0!important}

/* Gary, Oct 20: weekdays turned off in When › Days grey out their whole calendar column (heading too). */
html body #app #calendarView .cal-day.ya-weekday-disabled:not(.out){background:#EEF1F5!important}
html body #app #calendarView .cal-day.ya-weekday-disabled:not(.out) .cal-num{color:#8A93A3!important}
html body #app #calendarView .cal-dow.ya-weekday-disabled{color:#A1A8B5!important}
/* Gary, Oct 22: year divider row where the dates cross into a new year */
html body #app .table-left-row.table-year-divider:not(#_),html body #app .table-mid-row.table-year-divider:not(#_){height:26px!important;min-height:26px!important;background:#E9EEF6!important;border-top:1px solid #C9D3E3!important}
html body #app .table-left-row.table-year-divider:not(#_){display:flex!important;align-items:center!important;grid-template-columns:none!important}
html body #app .table-left-row.table-year-divider .ya-year-divider-label:not(#_){flex:1 1 auto!important;width:auto!important;height:100%!important;display:flex!important;align-items:center!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 10px!important;font:700 13px/1 var(--mc-font,system-ui)!important;letter-spacing:.04em!important;color:#33415C!important}
html body #app .table-mid-row.table-year-divider>.blank-slot{grid-column:1/-1!important;background:transparent!important;border:0!important}
html body #app .table-left-row.table-year-divider:not(#_)::before,html body #app .table-left-row.table-year-divider:not(#_)::after{display:none!important}