/* Modern UI theme (Gary, Oct 18): Midnight Navy header and bottom bar, softer Y / N / ? markers,
 * avatar colours away from red and green, larger table text and taller rows, label styling.
 * Loads last. Colours follow "A · Midnight Navy" from the colour & type options review. */
:root{
  --ya-navy:#14213D;--ya-navy-2:#1C2C4F;--ya-navy-line:#2A3550;--ya-on-navy:#FFFFFF;--ya-on-navy-muted:#B4C0D6;
  --ya-accent:#2F5FC4;--ya-accent-soft:#DCE6F8;--ya-label:#5D6B85;
  --ya-yes-bg:#DCF1E4;--ya-yes-ink:#1C6A42;--ya-no-bg:#F9E0DD;--ya-no-ink:#A2372E;--ya-maybe-bg:#FCF0D2;--ya-maybe-ink:#865F0E;
}

/* ---------- Header: Midnight Navy ---------- */
html body #app .topbar.mc-header{background:var(--ya-navy)!important;color:var(--ya-on-navy)!important;border-bottom:0!important}
html body #app .topbar.mc-header .group-title,html body #app .topbar.mc-header .mc-group-primary,html body #app .topbar.mc-header .group-title *{color:var(--ya-on-navy)!important}
html body #app .topbar.mc-header .mc-group-secondary{color:var(--ya-on-navy-muted)!important}
html body #app .topbar.mc-header .mc-header-tagline{color:var(--ya-on-navy-muted)!important}
html body #app .topbar.mc-header .mc-pill,html body #app .topbar.mc-header .header-group-selector,html body #app .topbar.mc-header .mc-people-toggle{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important}
html body #app .topbar.mc-header #moreBtn{color:#fff!important}
html body #app .topbar.mc-header #moreBtn img{filter:brightness(0) invert(1)!important}
html body #app .topbar.mc-header .header-logo-wrap{background:rgba(255,255,255,.10);border-radius:12px}

/* ---------- Bottom navigation: Midnight Navy, active tab = colour + small pill behind the icon ---------- */
html body #app .bottomnav.mc-bottom-nav{background:var(--ya-navy)!important;border-top:0!important}
html body #app .bottomnav.mc-bottom-nav .navbtn,html body #app .bottomnav.mc-bottom-nav .navbtn.active{background:transparent!important;color:var(--ya-on-navy-muted)!important}
html body #app .bottomnav.mc-bottom-nav .navbtn .ico{width:52px!important;height:30px!important;border-radius:15px!important}
html body #app .bottomnav.mc-bottom-nav .mc-nav-icon{width:24px!important;height:24px!important;color:var(--ya-on-navy-muted)!important}
html body #app .bottomnav.mc-bottom-nav .nav-label{font:600 11.5px/1.1 var(--mc-font)!important;color:var(--ya-on-navy-muted)!important}
html body #app .bottomnav.mc-bottom-nav .navbtn.active .ico{background:rgba(255,255,255,.16)!important}
html body #app .bottomnav.mc-bottom-nav .navbtn.active .mc-nav-icon{color:#fff!important}
html body #app .bottomnav.mc-bottom-nav .navbtn.active .nav-label{color:#fff!important;font-weight:800!important}
html body #app .bottomnav.mc-bottom-nav .navbtn:disabled,html body #app .bottomnav.mc-bottom-nav .navbtn.disabled{opacity:.45!important}

/* ---------- Section labels: WHEN, SHOW, EVENT, year ---------- */
html body #app #classicFilters .mc-filter-heading>span{font:700 11px/1.2 var(--mc-font)!important;text-transform:uppercase!important;letter-spacing:.07em!important;color:var(--ya-label)!important}
html body #app .table-left-head>div,html body #app .table-left-head .event{font:700 11px/1.2 var(--mc-font)!important;text-transform:uppercase!important;letter-spacing:.07em!important;color:var(--ya-label)!important}
html body #app .table-left-head>div:first-child{font-variant-numeric:tabular-nums!important}

/* ---------- Table body: 14.5px text, semibold aligned dates, ~42px rows ---------- */
html body #app .table-left-row,html body #app .table-mid-row{height:42px!important}
html body #app .table-left-row.table-date-header,html body #app .table-mid-row.table-date-header,
html body #app .table-left-row.table-date-closing,html body #app .table-mid-row.table-date-closing{height:30px!important}
html body #app .table-left-row .date{font:600 14px/1.2 var(--mc-font)!important;font-variant-numeric:tabular-nums!important;color:var(--ya-navy)!important;letter-spacing:-.01em!important}
html body #app .table-left-row.table-event-time .date{font:500 12px/1.2 var(--mc-font)!important;font-variant-numeric:tabular-nums!important;color:var(--ya-label)!important}
html body #app .table-left-row .event-pill{font:400 14.5px/1.25 var(--mc-font)!important;color:var(--ya-navy)!important}

/* ---------- Y / N / ? : soft tints with dark letters (letter + lightness + colour) ---------- */
html body #app .table-mid-row .status:not(.ya-mg-mixed):not(.member-dot){width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;border-radius:50%!important;background-image:none!important;font:800 11px/20px var(--mc-font)!important;text-align:center!important;box-shadow:none!important}
html body #app .table-mid-row .status.editable:not(.ya-mg-mixed){width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;border-radius:6px!important;line-height:22px!important;font-size:11.5px!important}
html body #app .table-mid-row .status.y:not(.ya-mg-mixed){background-color:var(--ya-yes-bg)!important;color:var(--ya-yes-ink)!important}
html body #app .table-mid-row .status.n:not(.ya-mg-mixed){background-color:var(--ya-no-bg)!important;color:var(--ya-no-ink)!important}
html body #app .table-mid-row .status.q:not(.ya-mg-mixed){background-color:var(--ya-maybe-bg)!important;color:var(--ya-maybe-ink)!important}
html body #app .table-mid-row .status.editable.y:not(.ya-mg-mixed){box-shadow:inset 0 0 0 1px rgba(28,106,66,.35)!important}
html body #app .table-mid-row .status.editable.n:not(.ya-mg-mixed){box-shadow:inset 0 0 0 1px rgba(162,55,46,.35)!important}
html body #app .table-mid-row .status.editable.q:not(.ya-mg-mixed){box-shadow:inset 0 0 0 1px rgba(134,95,14,.35)!important}
/* Signed-in member's column: about 10% larger. */
html body #app .table-mid-row>.ya-mine-col .status:not(.ya-mg-mixed):not(.member-dot){width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;line-height:22px!important;font-size:12px!important}
html body #app .table-mid-row>.ya-mine-col .status.editable:not(.ya-mg-mixed){width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;line-height:24px!important;font-size:12.5px!important}
/* Availability picker and Fast Edit zoom use the same soft colours. */
html body .availability-choice-picker>button.y{background-color:var(--ya-yes-bg)!important;color:var(--ya-yes-ink)!important}
html body .availability-choice-picker>button.n{background-color:var(--ya-no-bg)!important;color:var(--ya-no-ink)!important}
html body .availability-choice-picker>button.q{background-color:var(--ya-maybe-bg)!important;color:var(--ya-maybe-ink)!important}
html body .fast-edit-feedback.fast-edit-zoom{background:var(--ya-maybe-bg)!important;color:var(--ya-maybe-ink)!important}
html body .fast-edit-feedback.fast-edit-zoom.y{background:var(--ya-yes-bg)!important;color:var(--ya-yes-ink)!important}
html body .fast-edit-feedback.fast-edit-zoom.n{background:var(--ya-no-bg)!important;color:var(--ya-no-ink)!important}

/* ---------- Search: 16px text so iPhone does not zoom ---------- */
html body #app #utilityBar #searchInput,html body #app #utilityBar input{font-size:16px!important}

/* ---------- Member avatars: indigo, plum, teal, amber family (no red or green) ---------- */
html body .member-dot.c0,html body #app .member-dot.c0{background:#707DD1!important;color:#fff!important}
html body .member-dot.c1,html body #app .member-dot.c1{background:#956CB6!important;color:#fff!important}
html body .member-dot.c2,html body #app .member-dot.c2{background:#368492!important;color:#fff!important}
html body .member-dot.c3,html body #app .member-dot.c3{background:#B9732D!important;color:#fff!important}
html body .member-dot.c4,html body #app .member-dot.c4{background:#4B6CAB!important;color:#fff!important}
html body .member-dot.c5,html body #app .member-dot.c5{background:#A45C94!important;color:#fff!important}
html body .member-dot.c6,html body #app .member-dot.c6{background:#29747D!important;color:#fff!important}
html body .member-dot.c7,html body #app .member-dot.c7{background:#9D7A26!important;color:#fff!important}
html body .member-dot.c8,html body #app .member-dot.c8{background:#7C69C0!important;color:#fff!important}
html body .member-dot.c9,html body #app .member-dot.c9{background:#57728F!important;color:#fff!important}
html body .member-dot.c10,html body #app .member-dot.c10{background:#836AA8!important;color:#fff!important}
html body .member-dot.c11,html body #app .member-dot.c11{background:#398EA1!important;color:#fff!important}
html body .member-dot.c12,html body #app .member-dot.c12{background:#A8673B!important;color:#fff!important}
html body .member-dot.c13,html body #app .member-dot.c13{background:#5E6EB5!important;color:#fff!important}
html body .member-dot.c14,html body #app .member-dot.c14{background:#8D5D9A!important;color:#fff!important}
html body .member-dot.c15,html body #app .member-dot.c15{background:#3A748A!important;color:#fff!important}
html body .member-dot.c16,html body #app .member-dot.c16{background:#907028!important;color:#fff!important}
html body .member-dot.c17,html body #app .member-dot.c17{background:#6C60AE!important;color:#fff!important}
html body .member-dot.c18,html body #app .member-dot.c18{background:#4982A1!important;color:#fff!important}
html body .member-dot.c19,html body #app .member-dot.c19{background:#9E6685!important;color:#fff!important}
/* Date column 94px so semibold 14px dates fit (JS uses the same TABLE_DATE_COL). */
html body #app .table-head,html body #app .split-table-body{grid-template-columns:calc(94px + var(--event-column-width,126px)) minmax(0,1fr)!important}
html body #app .table-left-head,html body #app .table-left-row{grid-template-columns:94px var(--event-column-width,126px)!important}
html body #app .topbar.mc-header .header-logo-wrap{background:transparent!important}

/* Gary, Oct 18: "?" is just the question mark, with no circle. Only an editable "?" keeps a square box (tap target cue). */
html body #app .table-mid-row .status.q:not(.ya-mg-mixed):not(.editable){background:transparent!important;box-shadow:none!important;color:var(--ya-maybe-ink)!important;font-size:13px!important}
html body #app .table-mid-row .status.editable.q:not(.ya-mg-mixed){background:transparent!important;box-shadow:inset 0 0 0 1.5px rgba(134,95,14,.45)!important;color:var(--ya-maybe-ink)!important;font-size:13px!important}

/* Gary, Oct 18: read-only Y / N / ? are just the coloured letter (no circle). Only editable answers
   keep a square box, so you can tell which ones you can tap. */
html body #app .table-mid-row .status:not(.ya-mg-mixed):not(.member-dot):not(.editable){background:transparent!important;box-shadow:none!important;font-size:13px!important}
html body #app .table-mid-row>.ya-mine-col .status:not(.ya-mg-mixed):not(.member-dot):not(.editable){font-size:14px!important}

/* Gary, Oct 19: shorter rows so more days fit; the row closing a multi-event day is ~30% of a row. */
html body #app .table-left-row,html body #app .table-mid-row{height:34px!important}
html body #app .table-left-row.table-date-header,html body #app .table-mid-row.table-date-header{height:28px!important}
html body #app .table-left-row.table-date-closing,html body #app .table-mid-row.table-date-closing{height:10px!important;min-height:0!important}
html body #app .table-left-row.table-date-closing>*,html body #app .table-mid-row.table-date-closing>*{min-height:0!important;height:10px!important;padding-top:0!important;padding-bottom:0!important;overflow:hidden!important}

/* Gary, Oct 19: faint circle around read-only Y / N, faint box around editable Y / N. "?" stays plain. */
html body #app .table-mid-row .status.y:not(.ya-mg-mixed):not(.member-dot):not(.editable){box-shadow:inset 0 0 0 1px rgba(28,106,66,.30)!important;border-radius:50%!important}
html body #app .table-mid-row .status.n:not(.ya-mg-mixed):not(.member-dot):not(.editable){box-shadow:inset 0 0 0 1px rgba(162,55,46,.30)!important;border-radius:50%!important}
html body #app .table-mid-row .status.editable.y:not(.ya-mg-mixed){background-color:rgba(220,241,228,.55)!important;box-shadow:inset 0 0 0 1px rgba(28,106,66,.35)!important;border-radius:6px!important}
html body #app .table-mid-row .status.editable.n:not(.ya-mg-mixed){background-color:rgba(249,224,221,.55)!important;box-shadow:inset 0 0 0 1px rgba(162,55,46,.35)!important;border-radius:6px!important}

/* Gary, Oct 19: table rows 30px; the date row of a multi-event day 28px; the row closing it ~30% of a row (9px). */
html body #app .table-left-row,html body #app .table-mid-row{height:30px!important}
html body #app .table-left-row.table-date-header,html body #app .table-mid-row.table-date-header{height:28px!important}
html body #app .table-left-row.table-date-closing,html body #app .table-mid-row.table-date-closing{height:9px!important}
html body #app .table-left-row.table-date-closing>*,html body #app .table-mid-row.table-date-closing>*{height:9px!important}
/* Multi-event day: the date uses the same type style as any other date (only the row is shorter). */
html body #app .table-left-row.table-date-header .date{font:600 14px/1.2 var(--mc-font)!important;font-variant-numeric:tabular-nums!important;color:var(--ya-navy)!important;letter-spacing:-.01em!important}

/* Gary, Oct 19: a multi-event day reads as one group. A thin accent bar runs down the left edge from the
   date row through its event rows; the closing strip is no longer needed. The date row also says how
   many events the day has (easy to remove: delete the ::after rule). */
html body #app .table-left-row.table-date-header>.date,html body #app .table-left-row.table-event-time>.date{box-shadow:inset 4px 0 0 var(--ya-accent)!important}
html body #app .table-left-row.table-date-closing,html body #app .table-mid-row.table-date-closing{display:none!important}
html body #app .table-left-row.table-date-header>.event{display:flex!important;align-items:center!important}
html body #app .table-left-row.table-date-header>.event::after{content:attr(data-event-count);display:block;padding:0 6px;font:600 11px/1 var(--mc-font);letter-spacing:.02em;color:var(--ya-label)}
html body #app .table-left-row.table-date-header>.date,html body #app .table-left-row.table-event-time>.date{box-shadow:inset 3px 0 0 var(--ya-accent)!important;padding-left:8px!important}
html body #app .table-left-row.table-event-time>.date{font-size:11.5px!important;letter-spacing:-.02em!important;padding-right:4px!important}

/* ---------- Header layout (Gary, Oct 19): two compact lines ----------
   Line 1: small logo + BETA + tagline ......... avatar + ••• at the right edge
   Line 2: group name (large, left) ............ People pill (if on) + group pill */
html body #app .topbar.mc-header{
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto!important;
  grid-template-areas:"logo tag tag more" "title title people pill"!important;
  align-items:center!important;column-gap:8px!important;row-gap:2px!important;
  min-height:0!important;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))!important;
}
html body #app .topbar.mc-header .brand,html body #app .topbar.mc-header .mc-header-tools{display:contents!important}
html body #app .topbar.mc-header .header-logo-wrap{grid-area:logo!important;display:flex!important;align-items:center!important;gap:6px!important;width:auto!important;height:30px!important;margin:0!important}
html body #app .topbar.mc-header .header-logo{width:28px!important;height:28px!important}
html body #app .topbar.mc-header #testBuildBadge{position:static!important;font-size:9px!important;line-height:14px!important}
html body #app .topbar.mc-header .mc-header-tagline{grid-area:tag!important;justify-self:start!important;font:500 11.5px/1.2 var(--mc-font)!important;color:var(--ya-on-navy-muted)!important}
html body #app .topbar.mc-header #groupTitle{grid-area:title!important;justify-items:start!important;justify-self:stretch!important;text-align:left!important;min-width:0!important}
html body #app .topbar.mc-header .mc-group-primary{font:800 20px/1.15 var(--mc-font)!important;letter-spacing:-.015em!important;text-align:left!important}
html body #app .topbar.mc-header .group-title>*{text-align:left!important}
html body #app .topbar.mc-header .mc-people-toggle{grid-area:people!important}
html body #app .topbar.mc-header .mc-group-slot{grid-area:pill!important;min-width:0!important;justify-content:flex-end!important}
html body #app .topbar.mc-header #moreBtn{grid-area:more!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;width:auto!important;min-width:0!important;min-height:36px!important;margin:0 -4px 0 0!important}
html body #app .topbar.mc-header #userChip{width:28px!important;height:28px!important;min-width:28px!important}
html body #app .topbar.mc-header #moreBtn img{width:22px!important;height:22px!important}
:root{--mc-header-height:75px;--ya-phone-header-height:75px!important}

/* Gary, Oct 19: avatar is its own button (opens Account); the ••• More button sits under it, larger.
   BETA is a small tilted stamp over the logo. Account and Log Out leave the More menu (Log Out is in Account). */
html body #app .topbar.mc-header{grid-template-areas:"logo tag tag acct" "title title pill more"!important}
html body #app .topbar.mc-header .ya-avatar-btn{grid-area:acct!important;justify-self:end!important;all:unset;box-sizing:border-box;display:grid;place-items:center;width:36px;height:32px;cursor:pointer;border-radius:50%}
html body #app .topbar.mc-header .ya-avatar-btn:focus-visible{outline:2px solid #8FD9B6;outline-offset:1px}
html body #app .topbar.mc-header .ya-avatar-btn #userChip{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;min-width:30px!important;border-radius:50%!important;background:#f6c89e!important;position:relative!important;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
html body #app .topbar.mc-header #moreBtn{grid-area:more!important;justify-self:end!important;display:grid!important;place-items:center!important;width:36px!important;min-width:36px!important;height:30px!important;min-height:30px!important;margin:0!important;border-radius:15px!important;background:rgba(255,255,255,.14)!important}
html body #app .topbar.mc-header #moreBtn img{width:26px!important;height:26px!important;filter:brightness(0) invert(1)!important}
html body #app .topbar.mc-header #moreBtn:active{background:rgba(255,255,255,.24)!important}
html body #app .topbar.mc-header .header-logo-wrap{position:relative!important;gap:0!important;width:34px!important;height:32px!important}
html body #app .topbar.mc-header .header-logo{width:32px!important;height:32px!important}
html body #app .topbar.mc-header #testBuildBadge:not(:empty){position:absolute!important;left:14px!important;top:auto!important;bottom:-2px!important;transform:rotate(-14deg)!important;padding:0 3px!important;border:1px solid #14213D!important;border-radius:3px!important;font:800 6.5px/9px var(--mc-font)!important;letter-spacing:.06em!important;box-shadow:0 1px 2px rgba(0,0,0,.35)!important;z-index:2}
html body #app .topbar.mc-header .mc-header-tagline{padding-left:4px!important}
#moreMenu #accountBtn,#moreMenu #logoutBtn{display:none!important}
html body #overlayRoot .ya-account-logout{display:block!important;width:100%!important;min-height:46px!important;margin:16px 0 4px!important;border:1px solid #e5b7b2!important;border-radius:12px!important;background:#fff!important;color:#a2372e!important;font:700 16px/1 var(--mc-font)!important}
/* Band pill on the top line (next to the avatar) so the band name gets the whole second line. */
html body #app .topbar.mc-header{grid-template-columns:auto minmax(0,1fr) auto auto!important;grid-template-areas:"logo tag pill acct" "title title title more"!important}
html body #app .topbar.mc-header .mc-people-toggle{grid-area:pill!important}
html body #overlayRoot #accountLogout{border:1px solid #e5b7b2!important;background:#fff!important;color:#a2372e!important;font:700 16px/1 var(--mc-font)!important}

/* When / Show (Gary, Oct 19): one white rounded bar split into When | Show on the light gray page colour.
   Small gray labels, the value beneath, light chevrons, no big icons. Same tap targets as before. */
html body #app #classicFilters:not(#_){padding:8px 10px!important;background:#F2F2F7!important;border-bottom:.5px solid #D1D1D6!important}
html body #app #classicFilters:not(#_) .mc-filter-panel{gap:0!important;background:#fff!important;border-radius:16px!important;box-shadow:0 0 0 .5px rgba(60,60,67,.14),0 1px 2px rgba(15,23,42,.05)!important;overflow:hidden!important}
html body #app #classicFilters:not(#_) .mc-filter{position:relative!important;padding:8px 12px 9px 14px!important}
html body #app #classicFilters:not(#_) .mc-filter-show::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:#E5E5EA}
html body #app #classicFilters:not(#_) #filterTimeControl,html body #app #classicFilters:not(#_) #filterShowControl{gap:2px!important}
html body #app #classicFilters:not(#_) .mc-filter-heading{grid-template-columns:minmax(0,1fr) 12px!important;gap:4px!important;padding:0!important;min-height:14px!important}
html body #app #classicFilters:not(#_) .mc-filter-heading img:first-child{display:none!important}
html body #app #classicFilters:not(#_) .mc-filter-heading img:last-child{width:12px!important;height:12px!important;opacity:.45!important;filter:none!important}
html body #app #classicFilters:not(#_) .mc-filter-heading>span{font:600 11px/14px var(--mc-font)!important;letter-spacing:.06em!important;color:#8E8E93!important}
html body #app #classicFilters:not(#_) .mc-filter-value{padding:0!important;border-radius:0!important;background:transparent!important;font:600 15px/20px var(--mc-font)!important;color:#0B1220!important}
html body #app #classicFilters:not(#_) #filterDaysControl,html body #app #classicFilters:not(#_) .mc-filter .filter-summary{padding:1px 0 0!important;border-radius:0!important;background:transparent!important;font:400 13px/17px var(--mc-font)!important;color:#6D6D72!important}
html body #app #classicFilters:not(#_) #filterShowSaved{margin-top:2px!important;border-radius:0!important}
html body #app #classicFilters:not(#_) #filterShowControl .mc-filter-heading{min-height:14px!important}

/* Table header member dots fill more of the column (Gary, Oct 19): 26px, the current user's 28px. */
html body #app .table-mid-head-inner .header-count .member-dot:not(#_){width:26px!important;height:26px!important;min-width:26px!important;font:700 10.5px/26px var(--mc-font)!important;letter-spacing:-.01em!important}
html body #app .table-mid-head-inner>.ya-mine-col .header-count .member-dot:not(#_){width:28px!important;height:28px!important;min-width:28px!important;font:700 11px/28px var(--mc-font)!important}

/* When menu: Days as a row of check boxes in Week Starts On order (beta.4 style, Gary Oct 19). */
.anchored-choice-menu.when-choice-menu .menu-days-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:4px 6px 8px}
.anchored-choice-menu.when-choice-menu .menu-day{display:grid;justify-items:center;gap:5px;min-width:0;margin:0;padding:4px 0;border:0;border-radius:8px;background:transparent;font:600 12px/1.1 var(--mc-font);color:#3C3C43;cursor:pointer;-webkit-tap-highlight-color:transparent}
.anchored-choice-menu.when-choice-menu .menu-day:active{background:#F2F2F7}
.anchored-choice-menu.when-choice-menu .menu-day>i{display:block;width:28px;height:28px;box-sizing:border-box;border:1.5px solid #C7C7CC;border-radius:8px;background:#fff center/18px no-repeat}
.anchored-choice-menu.when-choice-menu .menu-day.on>i{border-color:#2F5FC4;background-color:#2F5FC4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.anchored-choice-menu.when-choice-menu .menu-day:focus-visible{outline:2px solid #2F5FC4;outline-offset:1px}

/* Header, Oct 19 (Gary): band name beside the logo under the tagline so the banner is shorter;
   People/Positions pill to the left of the Band pill; round More button centred under the avatar;
   larger initials; BETA stamp across the upper middle of the logo. */
html body #app .topbar.mc-header:not(#_){grid-template-columns:auto minmax(0,1fr) auto auto 34px!important;grid-template-areas:"logo tag people pill acct" "logo title title title more"!important;align-items:center!important;column-gap:7px!important;row-gap:0!important;padding-top:max(6px,env(safe-area-inset-top))!important;padding-bottom:7px!important}
html body #app .topbar.mc-header:not(#_) .header-logo-wrap{grid-area:logo!important;align-self:center!important;width:40px!important;height:40px!important}
html body #app .topbar.mc-header:not(#_) .header-logo{width:40px!important;height:40px!important}
html body #app .topbar.mc-header:not(#_) #testBuildBadge:not(:empty){left:50%!important;top:9px!important;bottom:auto!important;transform:translateX(-50%) rotate(-14deg)!important}
html body #app .topbar.mc-header:not(#_) .mc-header-tagline{grid-area:tag!important;align-self:center!important;justify-self:stretch!important;width:auto!important;max-width:100%!important;min-width:0!important;padding-left:0!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;font:500 11.5px/1.2 var(--mc-font)!important}
html body #app .topbar.mc-header:not(#_) #groupTitle{grid-area:title!important;align-self:start!important;min-width:0!important}
html body #app .topbar.mc-header:not(#_) .mc-group-primary{font:800 19px/1.15 var(--mc-font)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
html body #app .topbar.mc-header:not(#_) .mc-group-secondary{font-size:13.5px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
html body #app .topbar.mc-header:not(#_) .mc-people-toggle{grid-area:people!important;justify-self:end!important}
html body #app .topbar.mc-header:not(#_) .mc-group-slot{grid-area:pill!important;justify-self:end!important;min-width:0!important}
html body #app .topbar.mc-header:not(#_) :is(.mc-people-toggle,.header-group-selector,.mc-pill){min-height:26px!important;height:26px!important;padding:0 10px!important;font:700 12px/24px var(--mc-font)!important;white-space:nowrap!important;border-radius:13px!important}
html body #app .topbar.mc-header:not(#_) .ya-avatar-btn{grid-area:acct!important;justify-self:center!important;width:34px!important;height:34px!important}
html body #app .topbar.mc-header:not(#_) .ya-avatar-btn #userChip{width:32px!important;height:32px!important;min-width:32px!important}
html body #app .topbar.mc-header:not(#_) #userChip::before{font:800 14px/1 var(--mc-font)!important;letter-spacing:-.02em!important}
html body #app .topbar.mc-header:not(#_) #moreBtn{grid-area:more!important;justify-self:center!important;align-self:center!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important}
html body #app .topbar.mc-header:not(#_) #moreBtn img{width:22px!important;height:22px!important;margin:0!important}
html body #app .topbar.mc-header:not(#_){min-height:0!important}

/* When / Show, Oct 19 (Gary): less space above the table; the Show summary may use two lines. */
html body #app #classicFilters:not(#_){padding:6px 10px 4px!important}
html body #app #classicFilters:not(#_) .mc-filter{padding:7px 12px 8px 14px!important}
html body #app #classicFilters:not(#_) .mc-filter .filter-summary{white-space:normal!important}
html body #app #classicFilters:not(#_) .mc-filter .filter-summary>span{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;max-height:2.7em!important;overflow:hidden!important;overflow-wrap:anywhere!important}
.anchored-choice-menu .menu-summary{margin:4px 8px 6px;padding:8px 10px;border-radius:10px;background:#F2F2F7;font:400 13px/1.35 var(--mc-font);color:#3C3C43;overflow-wrap:anywhere}
.anchored-choice-menu .menu-summary>span{display:block;margin-bottom:2px;font:700 11px/1.2 var(--mc-font);letter-spacing:.06em;text-transform:uppercase;color:#8E8E93}

/* Menu command icons (Gary, Oct 19): app line icons in the accent blue instead of emoji glyphs. */
html body .anchored-choice-menu .menu-item.menu-command[data-menu-icon]::before{content:""!important;width:20px!important;height:20px!important;margin:0 2px!important;background-color:var(--ya-accent,#2F5FC4)!important;-webkit-mask:var(--menu-icon) center/20px no-repeat;mask:var(--menu-icon) center/20px no-repeat}
html body .anchored-choice-menu .menu-item.menu-command[data-menu-icon="👁︎"]{--menu-icon:url(/icons/heroicons/eye.svg)}
html body .anchored-choice-menu .menu-item.menu-command[data-menu-icon="⚙︎"]{--menu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.3c.4-1.7 3-1.7 3.4 0a1.7 1.7 0 0 0 2.6 1.1c1.5-.9 3.3.8 2.4 2.4a1.7 1.7 0 0 0 1 2.5c1.8.4 1.8 3 0 3.4a1.7 1.7 0 0 0-1 2.6c.9 1.5-.9 3.3-2.4 2.4a1.7 1.7 0 0 0-2.6 1c-.4 1.8-3 1.8-3.4 0a1.7 1.7 0 0 0-2.5-1c-1.6.9-3.3-.9-2.4-2.4a1.7 1.7 0 0 0-1.1-2.6c-1.7-.4-1.7-3 0-3.4a1.7 1.7 0 0 0 1.1-2.5C4.9 5.2 6.7 3.5 8.2 4.4a1.7 1.7 0 0 0 2.1-1.1z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
html body .anchored-choice-menu .menu-item.menu-command[data-menu-icon="＋"]{--menu-icon:url(/icons/heroicons/plus-circle.svg)}
html body .anchored-choice-menu .menu-item.menu-command[data-menu-icon="✎"]{--menu-icon:url(/icons/heroicons/pencil.svg)}
html body .anchored-choice-menu .menu-item.menu-command[data-choice-value="preview-save"]{--menu-icon:url(/icons/heroicons/save.svg)}
html body .anchored-choice-menu .menu-divider:empty{gap:0!important;min-height:12px!important}
html body .anchored-choice-menu .menu-divider:empty::after{display:none!important}
html body #app .topbar.mc-header:not(#_){column-gap:5px!important}
html body #app .topbar.mc-header:not(#_) .mc-header-tagline{text-align:left!important;font:500 11px/1.2 var(--mc-font)!important;margin-right:2px!important}
html body #app .topbar.mc-header:not(#_) #groupTitle{margin-left:2px!important}
html body #app .topbar.mc-header:not(#_) :is(.mc-people-toggle,.header-group-selector,.mc-pill){padding:0 8px!important;font:700 11.5px/24px var(--mc-font)!important}

/* Oct 19 (Gary): More = three solid dots, larger and exactly centred in the round button. */
html body #app .topbar.mc-header:not(#_) #moreBtn{background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='5' cy='12' r='2.3'/%3E%3Ccircle cx='12' cy='12' r='2.3'/%3E%3Ccircle cx='19' cy='12' r='2.3'/%3E%3C/svg%3E") center/22px 22px no-repeat!important}
html body #app .topbar.mc-header:not(#_) #moreBtn:active{background-color:rgba(255,255,255,.28)!important}
html body #app .topbar.mc-header:not(#_) #moreBtn>img{display:none!important}
/* Oct 19 (Gary): BETA sits under the logo instead of across it. */
html body #app .topbar.mc-header:not(#_) .header-logo-wrap{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;width:40px!important;height:auto!important}
html body #app .topbar.mc-header:not(#_) .header-logo{width:34px!important;height:34px!important}
html body #app .topbar.mc-header:not(#_) #testBuildBadge:not(:empty){position:static!important;transform:none!important;left:auto!important;top:auto!important;bottom:auto!important;margin:0!important;padding:0 4px!important;border:0!important;border-radius:3px!important;box-shadow:none!important;font:800 7.5px/11px var(--mc-font)!important;letter-spacing:.08em!important}
/* Oct 19 (Gary): avatar the same size as More, no ring; More a little lower for space between them. */
html body #app .topbar.mc-header:not(#_) .ya-avatar-btn{width:32px!important;height:32px!important}
html body #app .topbar.mc-header:not(#_) .ya-avatar-btn #userChip{width:32px!important;height:32px!important;min-width:32px!important;box-shadow:none!important;border:0!important;outline:0!important}
html body #app .topbar.mc-header:not(#_) #userChip::before{font:800 13px/1 var(--mc-font)!important}
html body #app .topbar.mc-header:not(#_) #moreBtn{margin-top:6px!important}
/* Oct 19 (Gary): the When/Show box grows to two lines only when the Show description needs them. */
html body #app #classicFilters:not(#_) .mc-filter .filter-summary,html body #app #classicFilters:not(#_) .mc-filter .filter-summary>span{height:auto!important;min-height:0!important}

/* Offline Members (Gary, Oct 19) */
html body .offline-member-add{display:grid!important;justify-items:start;gap:4px;margin:8px 0 12px!important}
html body .offline-member-add .btn{min-height:38px!important;padding:0 14px!important;border-radius:19px!important;font:600 14px/1 var(--mc-font)!important;color:var(--ya-accent,#2F5FC4)!important;background:#EEF3FB!important;border:0!important}
html body .offline-member-add .meta{margin:0 2px!important;font:400 12.5px/1.35 var(--mc-font)!important;color:#6D6D72!important}
html body .ya-offline-meta{display:block;font:400 12.5px/1.3 var(--mc-font)!important;color:#8E8E93!important}
html body .ya-takeover-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
html body .ya-takeover-row .meta{font-size:12.5px!important;color:#6D6D72!important}

/* Gary, Oct 20: the account avatar (top right) uses the same color as the person's own circle in Members (they are listed
   first there, so the first member color). */
html body #app .topbar.mc-header:not(#_):not(#__) .ya-avatar-btn #userChip{background:var(--ya-me-color,#707DD1)!important}
html body #app .topbar.mc-header:not(#_):not(#__) #userChip::before{color:#fff!important}
/* Gary, Oct 22: bottom bar icons about 20% larger (24 → 29px). The pill grows into negative margins so the bar keeps its height. */
html body #app .bottomnav.mc-bottom-nav .mc-nav-icon:not(#_){width:29px!important;height:29px!important}
html body #app .bottomnav.mc-bottom-nav .navbtn .ico:not(#_){width:58px!important;height:34px!important;border-radius:17px!important;margin-top:-2px!important;margin-bottom:-2px!important}

/* Header, Oct 22 (Gary): band names beside the logo on top, avatar top right; tagline along the bottom left with the
   Bands pill and ••• on the right. BETA is a small flat pill at the logo's upper right. Bands pill has squarer corners. */
html body #app .topbar.mc-header:not(#_):not(#__){grid-template-columns:auto minmax(0,1fr) auto auto 34px!important;grid-template-areas:"logo title title title acct" "tag tag people pill more"!important;column-gap:8px!important;row-gap:4px!important;align-items:center!important}
html body #app .topbar.mc-header:not(#_):not(#__) .header-logo-wrap{grid-area:logo!important;align-self:center!important;position:relative!important;display:block!important;width:40px!important;height:40px!important}
html body #app .topbar.mc-header:not(#_):not(#__) .header-logo{width:40px!important;height:40px!important}
html body #app .topbar.mc-header:not(#_):not(#__) #testBuildBadge:not(:empty){position:absolute!important;left:auto!important;right:-11px!important;top:-1px!important;bottom:auto!important;transform:none!important;padding:0 2.5px!important;border-radius:3px!important;font:800 5.5px/8px var(--mc-font)!important;letter-spacing:.05em!important}
html body #app .topbar.mc-header:not(#_):not(#__) #groupTitle{grid-area:title!important;align-self:center!important;padding-left:14px!important}
html body #app .topbar.mc-header:not(#_):not(#__) .mc-header-tagline{grid-area:tag!important;align-self:center!important}
html body #app .topbar.mc-header:not(#_):not(#__) .ya-avatar-btn{grid-area:acct!important;align-self:center!important}
html body #app .topbar.mc-header:not(#_):not(#__) #moreBtn{grid-area:more!important}
html body #app .topbar.mc-header:not(#_):not(#__) .mc-group-slot{grid-area:pill!important}
html body #app .topbar.mc-header:not(#_):not(#__) :is(.header-group-selector,.mc-pill){border-radius:7px!important}
/* Header, Oct 22 (Gary): logo 20% larger; tagline bottom-aligned with the Bands pill; band names sized to fit (yaFitHeaderTitle). */
html body #app .topbar.mc-header:not(#_):not(#__) .header-logo-wrap{width:48px!important;height:48px!important}
html body #app .topbar.mc-header:not(#_):not(#__) .header-logo{width:48px!important;height:48px!important}
html body #app .topbar.mc-header:not(#_):not(#__) :is(.mc-header-tagline,.mc-group-slot,.mc-people-toggle,#moreBtn){align-self:end!important}
html body #app .topbar.mc-header:not(#_):not(#__) #groupTitle{overflow:visible!important}
html body #app .topbar.mc-header:not(#_):not(#__) :is(.mc-group-primary,.mc-group-secondary){display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #app .topbar.mc-header:not(#_):not(#__) .mc-group-primary{line-height:1.12!important}
/* Header, Oct 22 (Gary): avatar at the top so the gap to ••• stays as before (16px); Bands pill centred on •••;
   tagline's bottom level with the pill's bottom. */
html body #app .topbar.mc-header:not(#_):not(#__){row-gap:0!important;grid-template-rows:auto 32px!important}
html body #app .topbar.mc-header:not(#_):not(#__) .mc-group-slot{display:flex!important;align-items:center!important;height:32px!important}
html body #app .topbar.mc-header:not(#_):not(#__) .ya-avatar-btn{align-self:start!important}
html body #app .topbar.mc-header:not(#_):not(#__) :is(.mc-group-slot,.mc-people-toggle,#moreBtn){align-self:center!important}
html body #app .topbar.mc-header:not(#_):not(#__) .mc-header-tagline{align-self:end!important;margin-bottom:3px!important;line-height:13px!important}
html body #app .topbar.mc-header:not(#_):not(#__) .ya-avatar-btn{margin-top:0!important}
html body #app .topbar.mc-header:not(#_):not(#__) #moreBtn{margin:0!important}
html body #app .topbar.mc-header:not(#_):not(#__) .mc-group-slot>#mgScheduleGroups{align-self:center!important;margin:0!important}
/* Header, Oct 22 (Gary): exactly the production header's height (83px on a 393px phone) and spacing: avatar 32px on
   the top row, ••• 6px below it, Bands pill centred on •••. Two fixed 32px rows; the larger logo and the band names
   overflow downward from the top row without making it taller; the tagline sits under the logo, level with the
   bottom of the Bands pill. */
html body #app .topbar.mc-header:not(#_):not(#__){grid-template-rows:32px 32px!important;row-gap:6px!important;padding-bottom:7px!important}
html body #app .topbar.mc-header:not(#_):not(#__) .header-logo-wrap{grid-area:logo!important;align-self:start!important;height:32px!important;overflow:visible!important}
html body #app .topbar.mc-header:not(#_):not(#__) #groupTitle{align-self:start!important}
html body #app .topbar.mc-header:not(#_):not(#__) .mc-group-primary{line-height:1.05!important}
html body #app .topbar.mc-header:not(#_):not(#__) .mc-group-secondary{line-height:1.15!important}
html body #app .topbar.mc-header:not(#_):not(#__) .ya-avatar-btn{align-self:center!important;margin:0!important}
html body #app .topbar.mc-header:not(#_):not(#__) #groupTitle:not(:has(.mc-group-secondary)){margin-top:12px!important}