/* ═══════════════════════════════════════════════════════════════════════════
   pm-phone-cal.css — THE CALENDAR ON A PHONE (js/pm-phone-cal.js)   2026-09-28
   Google Calendar's proportions, bright always (Caleb: "very open and bright … not so thick,
   heavy-weight font"). The calendar is a fixed screen between the top and bottom bars with its
   own scrolling. Every rule is ≤760px and scoped to .pcal / html.pcal-on, so the desk calendar
   never sees one. Type is pinned with !important: the site's Font choice and the browser's bold
   <b> must not make it heavier.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

/* the desk calendars step aside on a phone (hidden, never changed) */
html.pcal-on #adminCalendar, html.pcal-on #legendStrip, html.pcal-on .pcal-replaced { display: none !important; }
/* the calendar is the screen: the page underneath does not scroll, the app's own bar and title step aside */
html.pcal-on:not(.pcal-page) { overflow: hidden !important; height: 100%; overscroll-behavior: none; }
html.pcal-on:not(.pcal-page) body { overflow: hidden !important; overscroll-behavior: none; }
html.pcal-app:not(.pcal-page) :is(.sapp-bar, .sapp-hero, .sapp-ptr) { display: none !important; }
html.pcal-page #pcalRoot.pcal { display: none !important; }

#pcalRoot.pcal {
  --p-ink: #1F1F1F; --p-ink2: #444746; --p-mute: #5F6368; --p-line: #DADCE0; --p-line2: #ECEEF1;
  --p-blue: #0B57D0; --p-today: #1A73E8; --p-soft: #D3E3FD; --p-raise: #F1F3F4;
  --p-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: fixed; z-index: 62; left: 0; right: 0; top: var(--pcal-top, 0px); bottom: var(--pcal-bot, 0px);
  display: flex; flex-direction: column; background: #FFFFFF; color: var(--p-ink);
  font-family: var(--p-font) !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
#pcalRoot.pcal :is(button, input, span, b, div, h3, a, label) { font-family: var(--p-font) !important; letter-spacing: normal; }
#pcalRoot.pcal button { -webkit-tap-highlight-color: transparent; border: 0; margin: 0; }

/* ── the header: ☰ · September ▾ · (search · today · bell) · you — fixed, never changes ── */
#pcalRoot .pcal-bar {
  flex: none; position: relative; z-index: 5; display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 10px; background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(60, 64, 67, .10), 0 2px 8px -2px rgba(60, 64, 67, .14);
}
html.pcal-app #pcalRoot .pcal-bar { padding-top: calc(var(--sapp-top, env(safe-area-inset-top, 0px)) + 6px); }
#pcalRoot .pcal-pill {
  flex: none; display: flex; align-items: center; height: 40px; border-radius: 20px; background: var(--t-pill, #F6F7F9);
  box-shadow: 0 1px 2px rgba(60, 64, 67, .14), 0 0 0 .5px rgba(60, 64, 67, .06);
}
#pcalRoot .pcal-menu { width: 52px; justify-content: center; color: var(--p-ink2); cursor: pointer; }
#pcalRoot .pcal-menu { position: relative; }
#pcalRoot .pcal-menu svg { width: 22px; height: 22px; }
/* ☰ and the back arrow share the button; one turns into the other (Google's) */
#pcalRoot .pcal-menu__m, #pcalRoot .pcal-menu__b { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s ease, transform .24s cubic-bezier(.2, .7, .2, 1); }
#pcalRoot .pcal-menu__b { opacity: 0; transform: rotate(90deg) scale(.6); }
#pcalRoot .pcal-menu.is-back .pcal-menu__m { opacity: 0; transform: rotate(-90deg) scale(.6); }
#pcalRoot .pcal-menu.is-back .pcal-menu__b { opacity: 1; transform: none; }
#pcalRoot .pcal-menu:active, #pcalRoot .pcal-ib:active { background: #E2E5E8; }
#pcalRoot .pcal-title {
  display: inline-flex; align-items: center; gap: 0; min-width: 0; height: 40px; padding: 0 4px 0 8px; border-radius: 20px; background: none; cursor: pointer; color: var(--p-ink);
  font-size: 19px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -.005em !important;
}
#pcalRoot .pcal-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit !important; }
#pcalRoot .pcal-title svg { flex: none; width: 18px; height: 18px; margin-left: 1px; color: #444746; transition: transform .25s ease; }
#pcalRoot.pcal.is-strip .pcal-title svg { transform: rotate(180deg); }
#pcalRoot .pcal-sp { flex: 1 1 auto; }
#pcalRoot .pcal-tools { padding: 0 2px; gap: 0; }
#pcalRoot .pcal-ib { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 20px; background: none; color: var(--p-ink2); cursor: pointer; }
#pcalRoot .pcal-ib[hidden] { display: none; }
#pcalRoot .pcal-ib svg { width: 21px; height: 21px; }
#pcalRoot .pcal-today svg text { font-size: 9.2px !important; font-weight: 700 !important; }
#pcalRoot .pcal-bell i { position: absolute; top: 6px; right: 6px; min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #D93025; color: #fff; font-style: normal; font-size: 9.5px !important; font-weight: 600 !important; line-height: 15px !important; text-align: center; box-shadow: 0 0 0 1.5px #fff; }
#pcalRoot .pcal-bell i[hidden] { display: none; }
/* Google's ring: a 3.5px blue with a soft gradient, a 2.5px white gap, then the photo */
#pcalRoot .pcal-me { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: linear-gradient(140deg, #8AB4F8 0%, #4285F4 45%, #1A73E8 100%); box-shadow: 0 1px 3px rgba(26, 115, 232, .25); }
#pcalRoot .pcal-me[hidden] { display: none; }
#pcalRoot .pcal-me span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #3A2A06; overflow: hidden;
  background: linear-gradient(145deg, #F4C95D, #E0A33A) center/cover no-repeat; box-shadow: 0 0 0 2.5px #fff;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important;
}
#pcalRoot .pcal-me span.has-photo { color: transparent; }
/* search replaces the title while it is open */
#pcalRoot .pcal-search { display: none; flex: 1 1 auto; align-items: center; gap: 4px; min-width: 0; }
#pcalRoot.pcal.is-search .pcal-search { display: flex; }
#pcalRoot.pcal.is-search :is(.pcal-menu, .pcal-title, .pcal-sp, .pcal-tools, .pcal-me) { display: none !important; }
#pcalRoot .pcal-search__in {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 20px; outline: none; background: var(--p-raise); color: var(--p-ink);
  font-size: 16px !important; font-weight: 400 !important; -webkit-appearance: none; appearance: none;
}
#pcalRoot .pcal-busy { position: relative; z-index: 6; height: 2px; margin-bottom: -2px; overflow: hidden; }
#pcalRoot .pcal-busy.is-busy::after { content: ''; position: absolute; left: -40%; width: 40%; height: 100%; background: var(--p-today); border-radius: 2px; animation: pcalBusy 1s ease-in-out infinite; }
@keyframes pcalBusy { to { left: 100%; } }

/* the month strip (tap the title) */
#pcalRoot .pcal-strip { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; overflow-x: auto; scrollbar-width: none; background: #fff; box-shadow: 0 1px 0 var(--p-line2); animation: pcalDrop .22s ease; }
#pcalRoot .pcal-strip::-webkit-scrollbar { display: none; }
@keyframes pcalDrop { from { opacity: 0; transform: translateY(-6px); } }
#pcalRoot .pcal-strip__m { flex: none; height: 32px; padding: 0 15px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--p-line); background: none; color: var(--p-ink2); cursor: pointer; font-size: 14px !important; font-weight: 500 !important; }
#pcalRoot .pcal-strip__m.is-on { background: var(--p-soft); box-shadow: none; color: #041E49; }
#pcalRoot .pcal-strip__y { flex: none; padding: 0 2px; color: var(--p-ink); font-size: 14px !important; font-weight: 500 !important; }

/* the scrolling part */
#pcalRoot .pcal-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; }
#pcalRoot .pcal-body.is-in-l { animation: pcalInL .26s cubic-bezier(.2, .8, .2, 1); }
#pcalRoot .pcal-body.is-in-r { animation: pcalInR .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes pcalInL { from { opacity: .4; transform: translateX(24px); } }
@keyframes pcalInR { from { opacity: .4; transform: translateX(-24px); } }

/* ── SCHEDULE ── */
#pcalRoot .pcal-sw { padding: 20px 16px 10px 62px; color: var(--p-mute); font-size: 12px !important; font-weight: 500 !important; letter-spacing: .07em !important; line-height: 1.2 !important; }
/* sizes are tokens, so the tuning panel (?pcaltune=1) can move them live; these are Google's proportions */
#pcalRoot.pcal { --t-rad: 4px; --t-name: 14.5px; --t-time: 13px; --t-num: 19px; --t-wd: 11px; --t-gap: 18px; --t-pad: 7px; --t-pillL: 96.5%; --t-line: 1.5px; --t-dot: 9px; --t-pill: hsl(216 14% var(--t-pillL)); }
#pcalRoot .pcal-sd { display: grid; grid-template-columns: 58px minmax(0, 1fr); padding: 0 10px var(--t-gap) 0; }
/* the weekday sits level with the top of the first card, the date beneath it, centred on the card */
#pcalRoot .pcal-sd__d { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 1px; }
#pcalRoot .pcal-sd__d span { color: #3C4043; font-size: var(--t-wd) !important; font-weight: 500 !important; letter-spacing: .04em !important; line-height: 1.25 !important; }
#pcalRoot .pcal-sd__d b { display: grid; place-items: center; min-width: calc(var(--t-num) * 1.7); height: calc(var(--t-num) * 1.55); margin-top: 1px; border-radius: 999px; color: #1F1F1F; font-size: var(--t-num) !important; font-weight: 400 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
/* the past in grey, what is coming in ink (Google) */
#pcalRoot .pcal-sd.is-past .pcal-sd__d :is(span, b) { color: #80868B; }
#pcalRoot .pcal-sd.is-today .pcal-sd__d span { color: var(--p-today); }
/* today's number: Google's is regular weight and a touch smaller than the plain dates, so the blue disc stays light */
#pcalRoot .pcal-sd.is-today .pcal-sd__d b { width: calc(var(--t-num) * 1.75); min-width: 0; height: calc(var(--t-num) * 1.75); background: var(--p-today); color: #FFFFFF; font-size: calc(var(--t-num) * 0.88) !important; font-weight: 400 !important; }
#pcalRoot .pcal-sd__evs { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 0; }
/* the now-line before today's first session floats above the card: the weekday stays level with the card, the date centred on it */
#pcalRoot .pcal-sd.line-first { padding-top: 14px; }
#pcalRoot .pcal-sd.line-first .pcal-sd__now { position: absolute; left: -8px; right: -4px; top: -9px; margin: 0; }
#pcalRoot .pcal-se {
  display: block; width: 100%; box-sizing: border-box; padding: var(--t-pad) 12px calc(var(--t-pad) + 1px); border-radius: var(--t-rad); background: var(--c); color: #FFFFFF; text-align: left; cursor: pointer;
  transition: filter .15s ease;
}
#pcalRoot .pcal-se:active { filter: brightness(.94); }
#pcalRoot .pcal-se b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: var(--t-name) !important; font-weight: 500 !important; line-height: 1.3 !important; }
#pcalRoot .pcal-se span { display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; opacity: .96; font-size: var(--t-time) !important; font-weight: 400 !important; line-height: 1.3 !important; }
#pcalRoot .pcal-se.is-x { background: #FFFFFF; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
#pcalRoot .pcal-se.is-x b { text-decoration: line-through; }
/* today: "No sessions", and Google's black line with its dot at the present moment */
#pcalRoot .pcal-sd__none { display: block; width: 100%; padding: 7px 0 2px; background: none; text-align: left; color: var(--p-mute); cursor: pointer; font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important; }
/* Google's now-line: a solid dark line from the date column across the cards, its dot sitting on the column's edge */
/* Google's: a fine line from just left of the card to a touch past its right edge, a small dot on its left end */
#pcalRoot .pcal-sd__now { position: relative; height: var(--t-line); margin: 8px -4px 8px -8px; background: #1F1F1F; border-radius: 1px; }
#pcalRoot .pcal-sd__now::before { content: ''; position: absolute; left: 0; top: calc((var(--t-dot) - var(--t-line)) / -2); width: var(--t-dot); height: var(--t-dot); border-radius: 50%; background: #1F1F1F; }
/* a picture heads each month (Caleb's own, when assets/calendar/months/01.jpg … 12.jpg are there);
   until then a soft seasonal wash — never generated art */
#pcalRoot .pcal-banner { position: relative; aspect-ratio: 2.65 / 1; height: auto; margin: 14px 0 6px; overflow: hidden; }
#pcalRoot .pcal-banner[data-named] span { display: none; }
#pcalRoot .pcal-banner.has-img { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
#pcalRoot .pcal-banner span { position: absolute; left: 62px; top: 16px; color: #3C4043; font-size: 22px !important; font-weight: 400 !important; line-height: 1.2 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
#pcalRoot .pcal-banner--winter { background: radial-gradient(120% 90% at 85% 110%, #C9DCF5 0%, transparent 60%), linear-gradient(160deg, #F2F7FD 0%, #E3EEFB 55%, #D5E5F8 100%); }
#pcalRoot .pcal-banner--spring { background: radial-gradient(120% 90% at 85% 110%, #C8E6C9 0%, transparent 60%), linear-gradient(160deg, #F4FAF2 0%, #E6F4E4 55%, #D6EDD4 100%); }
#pcalRoot .pcal-banner--summer { background: radial-gradient(120% 90% at 85% 110%, #FFE29A 0%, transparent 60%), linear-gradient(160deg, #FFFBEF 0%, #FFF3D1 55%, #FFE9B3 100%); }
#pcalRoot .pcal-banner--autumn { background: radial-gradient(120% 90% at 85% 110%, #F6C9A8 0%, transparent 60%), linear-gradient(160deg, #FFF6EE 0%, #FCE8D6 55%, #F8D8BC 100%); }
/* the first open, before anything is known: soft placeholder bars that breathe, in place of cards */
#pcalRoot .pcal-skel { display: block; height: 46px; border-radius: var(--t-rad); background: linear-gradient(90deg, #F1F3F4 0%, #E8EAED 50%, #F1F3F4 100%); background-size: 200% 100%; animation: pcalSkel 1.4s ease-in-out infinite; }
#pcalRoot .pcal-sd.is-skel .pcal-sd__d :is(span, b) { color: #BDC1C6; }
@keyframes pcalSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
#pcalRoot .pcal-start { margin: 18px 16px 4px 62px; padding-top: 10px; border-top: 1px solid var(--p-line2); color: var(--p-mute); font-size: 12.5px !important; font-weight: 500 !important; }
#pcalRoot .pcal-more-pad { height: 96px; }
#pcalRoot .pcal-hint { padding: 48px 28px; text-align: center; color: var(--p-mute); font-size: 15px !important; font-weight: 400 !important; line-height: 1.45 !important; }

/* ── MONTH (Google's) ── */
#pcalRoot .pcal-mwk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 34px; align-items: center; background: #fff; }
#pcalRoot .pcal-mwk span { text-align: center; color: #70757A; font-size: 12.5px !important; font-weight: 400 !important; }
#pcalRoot .pcal-mwk span.is-today { color: var(--p-today); }
/* the bar under the letters: light for the days already gone in the first row, solid from today on */
#pcalRoot .pcal-mbar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 2px; }
#pcalRoot .pcal-mbar span.is-on { background: #1A73E8; }
#pcalRoot .pcal-mbar span.is-past { background: #AECBFA; }
#pcalRoot .pcal-mwrap { position: relative; overflow: hidden; touch-action: pan-y; }
#pcalRoot .pcal-mtrack { display: flex; width: 300%; transform: translate3d(-33.3333%, 0, 0); will-change: transform; }
#pcalRoot .pcal-month { flex: none; width: 33.3333%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: var(--pcal-cell, 96px); }
#pcalRoot .pcal-mc { position: relative; min-width: 0; padding: 4px 0 0; border-right: 1px solid var(--p-line2); border-bottom: 1px solid var(--p-line2); overflow: hidden; cursor: pointer; }
#pcalRoot .pcal-mc:nth-child(7n) { border-right: 0; }
#pcalRoot .pcal-mc:active { background: #F8F9FA; }
#pcalRoot .pcal-mc__n { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto 3px; border-radius: 50%; color: #3C4043; font-size: 13px !important; font-weight: 400 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
#pcalRoot .pcal-mc.is-out .pcal-mc__n { color: #9AA0A6; }
#pcalRoot .pcal-mc.is-today .pcal-mc__n { background: var(--p-today); color: #fff; font-weight: 500 !important; }
#pcalRoot .pcal-mc__evs { display: flex; flex-direction: column; gap: 2px; padding: 0 3px; }
#pcalRoot .pcal-chip { position: relative; display: block; height: 17px; padding: 0 4px; border-radius: 4px; background: var(--c); color: #fff; white-space: nowrap; overflow: hidden; font-size: 11px !important; font-weight: 500 !important; line-height: 17px !important; }
#pcalRoot .pcal-mc.is-out .pcal-chip { opacity: .7; }
#pcalRoot .pcal-chip.is-x { background: #fff; color: var(--c); box-shadow: inset 0 0 0 1px var(--c); text-decoration: line-through; }
#pcalRoot .pcal-more { display: block; padding: 0 4px; color: var(--p-mute); font-size: 10.5px !important; font-weight: 500 !important; line-height: 15px !important; }
/* states, the same on every view: future = solid colour; completed = white with the colour as border and strike; cancelled = greyed out */
#pcalRoot :is(.pcal-se, .pcal-chip, .pcal-ev).is-done { background: #fff; color: var(--c); }
#pcalRoot :is(.pcal-se, .pcal-ev).is-done { box-shadow: inset 0 0 0 1.5px var(--c); }
#pcalRoot .pcal-chip.is-done { box-shadow: inset 0 0 0 1px var(--c); text-decoration: line-through; }
#pcalRoot :is(.pcal-se, .pcal-ev).is-done b { text-decoration: line-through; }
#pcalRoot :is(.pcal-se, .pcal-chip, .pcal-ev).is-x { --c: #9AA0A6; background: #fff; color: #80868B; text-decoration: none; }
#pcalRoot :is(.pcal-se, .pcal-ev).is-x { box-shadow: inset 0 0 0 1.5px #BDC1C6; }
#pcalRoot .pcal-chip.is-x { box-shadow: inset 0 0 0 1px #BDC1C6; }
#pcalRoot :is(.pcal-se, .pcal-ev).is-x b { text-decoration: none; }
#pcalRoot .pcal-se { position: relative; }

/* ── DAY · 3 DAY · WEEK ── */
#pcalRoot .pcal-gh { position: sticky; top: 0; z-index: 4; display: flex; background: #fff; box-shadow: 0 1px 0 var(--p-line), 0 3px 6px -4px rgba(60, 64, 67, .25); }
#pcalRoot .pcal-gh__gut { flex: none; width: 48px; }
#pcalRoot .pcal-gh__wrap { flex: 1 1 auto; min-width: 0; overflow: hidden; }
#pcalRoot .pcal-gh__track { display: flex; width: 300%; transform: translate3d(-33.3333%, 0, 0); will-change: transform; }
#pcalRoot .pcal-gh__page { flex: none; width: 33.3333%; display: flex; }
#pcalRoot .pcal-gh__d { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px; background: none; cursor: pointer; }
#pcalRoot.pcal[data-view="day"] .pcal-gh__d { align-items: flex-start; padding-left: 6px; }
#pcalRoot .pcal-gh__w { color: var(--p-mute); font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: .03em !important; }
#pcalRoot .pcal-gh__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #3C4043; font-size: 21px !important; font-weight: 400 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
#pcalRoot.pcal[data-view="week"] .pcal-gh__n { width: 30px; height: 30px; font-size: 17px !important; }
#pcalRoot .pcal-gh__d.is-today .pcal-gh__w { color: var(--p-today); }
#pcalRoot .pcal-gh__d.is-today .pcal-gh__n { background: var(--p-today); color: #fff; font-weight: 500 !important; }
#pcalRoot .pcal-grid { position: relative; display: flex; height: calc(var(--h) * 24); }
#pcalRoot .pcal-gut { position: relative; flex: none; width: 48px; }
#pcalRoot .pcal-gut span { position: absolute; right: 8px; transform: translateY(-50%); color: var(--p-mute); white-space: nowrap; font-size: 10.5px !important; font-weight: 400 !important; }
#pcalRoot .pcal-cwrap { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
#pcalRoot .pcal-ctrack { display: flex; width: 300%; height: 100%; transform: translate3d(-33.3333%, 0, 0); will-change: transform; }
#pcalRoot .pcal-cols { position: relative; flex: none; width: 33.3333%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); min-width: 0; }
#pcalRoot .pcal-col { position: relative; border-left: 1px solid var(--p-line2); cursor: pointer; background-image: linear-gradient(to bottom, var(--p-line2) 1px, transparent 1px); background-size: 100% var(--h); }
#pcalRoot .pcal-ev { position: absolute; z-index: 1; box-sizing: border-box; padding: 3px 6px; border-radius: 5px; overflow: hidden; background: var(--c); color: #fff; box-shadow: 0 0 0 1px #fff; cursor: pointer; transition: filter .15s ease; }
#pcalRoot .pcal-ev:active { filter: brightness(.92); }
#pcalRoot .pcal-ev b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.25 !important; }
#pcalRoot.pcal[data-view="week"] .pcal-ev { padding: 2px 3px; }
#pcalRoot.pcal[data-view="week"] .pcal-ev b { white-space: normal; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 11px !important; }
#pcalRoot .pcal-ev span { display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; opacity: .95; font-size: 11px !important; font-weight: 400 !important; }
#pcalRoot.pcal[data-view="week"] .pcal-ev span { display: none; }
#pcalRoot .pcal-ev.is-short span { display: none; }
#pcalRoot .pcal-ev.is-x { background: #fff; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 1px #fff; }
#pcalRoot .pcal-ev.is-x b { text-decoration: line-through; }
#pcalRoot .pcal-now { position: absolute; left: -1px; right: 0; z-index: 3; height: 2px; background: #EA4335; pointer-events: none; }
#pcalRoot .pcal-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #EA4335; }
#pcalRoot .pcal-ghost { position: absolute; left: 1px; right: 3px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 5px; background: var(--p-today); color: #fff; box-shadow: 0 6px 16px -6px rgba(26, 115, 232, .7); animation: pcalPop .2s ease; font-size: 12px !important; font-weight: 600 !important; }
#pcalRoot .pcal-ghost svg { width: 14px; height: 14px; }
@keyframes pcalPop { from { transform: scale(.9); opacity: 0; } }

/* the + for a family (ask for a session), like Google's */
#pcalRoot .pcal-fab { position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: #D3E3FD; color: #041E49; cursor: pointer; box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15); }
#pcalRoot .pcal-fab svg { width: 26px; height: 26px; }
#pcalRoot .pcal-fab:active { transform: scale(.95); }

/* the way back from the rest of the page */
#pcalBack.pcal-backpill { display: none; }
html.pcal-page #pcalBack.pcal-backpill {
  display: flex; align-items: center; gap: 8px; position: fixed; z-index: 64; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 22px;
  background: #1F1F1F; color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; font-size: 15px; font-weight: 500;
}
html.pcal-page #pcalBack.pcal-backpill svg { width: 20px; height: 20px; }

/* ── the drawer ── */
#pcalDrawer.pcal-drawer { --pf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; }
#pcalDrawer.pcal-drawer :is(button, span, label, div, input) { font-family: var(--pf) !important; }
#pcalDrawer .pcal-drawer__scrim { position: absolute; inset: 0; background: rgba(32, 33, 36, .4); opacity: 0; transition: opacity .25s ease; }
#pcalDrawer .pcal-drawer__panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(84vw, 330px); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 12px calc(env(safe-area-inset-bottom, 0px) + 20px) 0;
  background: #fff; color: #1F1F1F; border-radius: 0 16px 16px 0; box-shadow: 8px 0 30px rgba(0, 0, 0, .16);
  transform: translateX(-104%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
#pcalDrawer.pcal-drawer.is-open { pointer-events: auto; }
#pcalDrawer.pcal-drawer.is-open .pcal-drawer__scrim { opacity: 1; }
#pcalDrawer.pcal-drawer.is-open .pcal-drawer__panel { transform: none; }
#pcalDrawer .pcal-drawer__brand { display: flex; align-items: center; gap: 10px; padding: 6px 24px 16px; }
#pcalDrawer .pcal-drawer__brand img { width: 28px; height: 28px; object-fit: contain; }
#pcalDrawer .pcal-drawer__brand span { font-size: 21px !important; font-weight: 400 !important; color: #1F1F1F; }
#pcalDrawer .pcal-drawer__row {
  display: flex; align-items: center; gap: 18px; width: 100%; min-height: 48px; padding: 0 16px 0 24px; box-sizing: border-box; border: 0; border-radius: 0 24px 24px 0;
  background: none; color: #1F1F1F; text-align: left; cursor: pointer; font-size: 15px !important; font-weight: 500 !important;
}
#pcalDrawer .pcal-drawer__row span { font-size: inherit !important; font-weight: inherit !important; }
#pcalDrawer .pcal-drawer__row:active { background: rgba(60, 64, 67, .08); }
#pcalDrawer .pcal-drawer__view.is-on { background: #D3E3FD; color: #041E49; }
#pcalDrawer .pcal-drawer__ic { display: grid; place-items: center; width: 24px; height: 24px; color: #444746; }
#pcalDrawer .pcal-drawer__view.is-on .pcal-drawer__ic { color: #041E49; }
#pcalDrawer .pcal-drawer__ic svg { width: 22px; height: 22px; }
#pcalDrawer .pcal-drawer__sep { height: 1px; margin: 8px 0 8px 24px; background: #E3E3E3; }
#pcalDrawer .pcal-drawer__h { padding: 8px 24px 6px; color: #5F6368; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .06em !important; text-transform: uppercase; }
#pcalDrawer .pcal-drawer__toggle input { position: absolute; opacity: 0; pointer-events: none; }
#pcalDrawer .pcal-drawer__box { position: relative; flex: none; width: 18px; height: 18px; margin: 0 3px; box-sizing: border-box; border-radius: 3px; border: 2px solid var(--c, #1A73E8); transition: background .15s ease; }
#pcalDrawer .pcal-drawer__toggle input:checked + .pcal-drawer__box { background: var(--c, #1A73E8); }
#pcalDrawer .pcal-drawer__toggle input:checked + .pcal-drawer__box::after { content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#pcalDrawer .pcal-drawer__famrow { display: flex; align-items: center; }
#pcalDrawer .pcal-drawer__tick { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; cursor: pointer; }
#pcalDrawer .pcal-drawer__name { flex: 1 1 auto; min-width: 0; padding-left: 8px !important; padding-right: 12px !important; border-radius: 24px 0 0 24px !important; font-weight: 400 !important; }
#pcalDrawer .pcal-drawer__name > span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pcalDrawer .pcal-drawer__dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(60, 64, 67, .18); }
/* THE COLOUR SHEET — the family and its colour on top, then the colours as a grid of round swatches with their names */
#pcalSheet .pcal-csheet { padding: 2px 2px 8px; }
#pcalSheet .pcal-csheet__top { display: flex; align-items: center; gap: 14px; padding: 2px 4px 16px; margin-bottom: 6px; border-bottom: 1px solid #E8EAED; }
#pcalSheet .pcal-csheet__sw { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: background .25s ease; }
#pcalSheet .pcal-csheet__top b { display: block; color: #1F1F1F; font-size: 19px !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: -.01em; }
#pcalSheet .pcal-csheet__top div span { display: block; margin-top: 2px; color: #5F6368; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important; }
#pcalSheet .pcal-csheet__h { padding: 14px 4px 8px; color: #5F6368; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: .06em; text-transform: uppercase; line-height: 1 !important; }
#pcalSheet .pcal-cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 4px; }
#pcalSheet .pcal-cg { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 2px 6px; border: 0; border-radius: 14px; background: none; color: #3C4043; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease; }
#pcalSheet .pcal-cg:active { background: #F1F3F4; }
#pcalSheet .pcal-cg i { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease; }
#pcalSheet .pcal-cg i svg { width: 20px; height: 20px; opacity: 0; transform: scale(.5); transition: opacity .16s ease, transform .2s cubic-bezier(.2, .7, .2, 1); }
#pcalSheet .pcal-cg.is-on i { transform: scale(1.06); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
#pcalSheet .pcal-cg.is-on i svg { opacity: 1; transform: none; }
#pcalSheet .pcal-cg:active i { transform: scale(.94); }
#pcalSheet .pcal-cg span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px !important; font-weight: 400 !important; line-height: 1.2 !important; }
#pcalSheet .pcal-cg.is-on span { color: #1F1F1F; font-weight: 500 !important; }
#pcalDrawer .pcal-pal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 4px 16px 12px 24px; padding: 14px; border-radius: 16px; background: #F8F9FA; animation: pcalDrop .2s ease; }
#pcalDrawer .pcal-pal__c { width: 32px; height: 32px; margin: 0 auto; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; position: relative; }
#pcalDrawer .pcal-pal__c.is-on::after { content: ''; position: absolute; left: 11px; top: 7px; width: 7px; height: 13px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ── the details sheet ── */
#pcalSheet.pcal-sheet { --pf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; position: fixed; inset: 0; z-index: 2147482100; pointer-events: none; }
#pcalSheet.pcal-sheet :is(button, span, b, div, h2, h3, a, p, label, input, textarea) { font-family: var(--pf) !important; }
#pcalSheet .pcal-sheet__scrim { position: absolute; inset: 0; background: rgba(32, 33, 36, .4); opacity: 0; transition: opacity .25s ease; }
#pcalSheet .pcal-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 8px 20px calc(env(safe-area-inset-bottom, 0px) + 18px); border-radius: 24px 24px 0 0; background: #fff; color: #1F1F1F;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .16); transform: translateY(104%); transition: transform .34s cubic-bezier(.2, .8, .2, 1); will-change: transform; touch-action: pan-y;
}
#pcalSheet.pcal-sheet.is-open { pointer-events: auto; }
#pcalSheet.pcal-sheet.is-open .pcal-sheet__scrim { opacity: 1; }
#pcalSheet.pcal-sheet.is-open .pcal-sheet__panel { transform: none; }
#pcalSheet .pcal-sheet__grab { width: 32px; height: 4px; margin: 2px auto 16px; border-radius: 2px; background: #C4C7C5; }
#pcalSheet .pcal-sheet__head { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 12px; }
#pcalSheet .pcal-sheet__sw { flex: none; width: 16px; height: 16px; margin: 6px 4px 0; border-radius: 4px; background: var(--c); }
#pcalSheet .pcal-sheet__head h3 { margin: 0; color: #1F1F1F; font-size: 22px !important; font-weight: 400 !important; line-height: 1.25 !important; }
#pcalSheet .pcal-sheet__head h3.is-x { color: #80868B; }
#pcalSheet .pcal-sheet__head h3.is-done { text-decoration: line-through; }
#pcalSheet .pcal-sheet__row { display: flex; align-items: flex-start; gap: 18px; padding: 9px 0; }
#pcalSheet .pcal-sheet__ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: #444746; }
#pcalSheet .pcal-act__sw { flex: none; width: 18px; height: 18px; margin: 0 3px; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
#pcalSheet .pcal-sheet__ic svg { width: 22px; height: 22px; }
#pcalSheet .pcal-sheet__row b { display: block; color: #1F1F1F; font-size: 15px !important; font-weight: 400 !important; line-height: 1.35 !important; }
#pcalSheet .pcal-sheet__row span { display: block; margin-top: 1px; color: #5F6368; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.35 !important; }
#pcalSheet .pcal-sheet__acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid #E3E3E3; }
#pcalSheet .pcal-act {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; box-sizing: border-box;
  background: #F1F3F4; color: #1F1F1F; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease;
  font-size: 15px !important; font-weight: 500 !important;
}
#pcalSheet .pcal-act span { font-size: inherit !important; font-weight: inherit !important; }
#pcalSheet .pcal-act:active { transform: scale(.98); background: #E8EAED; }
#pcalSheet .pcal-act svg { width: 21px; height: 21px; flex: none; color: #0B57D0; }
#pcalSheet .pcal-act.is-danger, #pcalSheet .pcal-act.is-danger svg { color: #B3261E; }
#pcalSheet .pcal-act.is-primary { background: #0B57D0; color: #fff; }
#pcalSheet .pcal-act.is-primary svg { color: #fff; }
#pcalSheet .pcal-sheet__note { margin: 6px 2px 0; color: #5F6368; font-size: 13px !important; font-weight: 400 !important; line-height: 1.45 !important; }

/* ── the tuning panel (?pcaltune=1): Caleb moves the sizes live, reads the numbers back to Claude ── */
#pcalTune { position: fixed; z-index: 2147482200; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); max-height: 46vh; overflow-y: auto; padding: 10px 14px 12px; border-radius: 18px; background: rgba(32, 33, 36, .94); color: #fff; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#pcalTune.is-min .pcalTune__rows { display: none; }
#pcalTune .pcalTune__h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
#pcalTune .pcalTune__h span { flex: 1; color: #FFFFFF !important; font: 600 14px -apple-system, BlinkMacSystemFont, sans-serif !important; }
#pcalTune .pcalTune__row > span:first-child { color: #E8EAED !important; }
#pcalTune button { height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: rgba(255, 255, 255, .14); color: #fff; font: 600 12.5px -apple-system, sans-serif; }
#pcalTune .pcalTune__row { display: grid; grid-template-columns: 96px 1fr 50px; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; }
#pcalTune input[type="range"] { width: 100%; accent-color: #8AB4F8; }
#pcalTune .pcalTune__v { text-align: right; font-variant-numeric: tabular-nums; color: #8AB4F8; font-weight: 600; }
#pcalTune .pcalTune__out { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); font: 500 12px/1.4 ui-monospace, Menlo, monospace; color: #E8EAED; user-select: all; -webkit-user-select: all; }

/* ── the month picker (tap the month name): Google's little calendar with a dot per session, the months beneath ── */
#pcalRoot .pcal-pick { flex: none; position: relative; z-index: 4; background: #FFFFFF; box-shadow: 0 1px 0 rgba(60, 64, 67, .12), 0 4px 10px -6px rgba(60, 64, 67, .3); animation: pcalDrop .24s cubic-bezier(.2, .8, .2, 1); }
#pcalRoot .pcal-mini { padding: 6px 10px 2px; }
#pcalRoot .pcal-mini__wk, #pcalRoot .pcal-mini__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
#pcalRoot .pcal-mini__wk span { text-align: center; padding: 4px 0 8px; color: #3C4043; font-size: 12px !important; font-weight: 500 !important; }
#pcalRoot .pcal-mini__d { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 40px; padding: 0; background: none; cursor: pointer; }
#pcalRoot .pcal-mini__d b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #1F1F1F; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; transition: background .15s ease; }
#pcalRoot .pcal-mini__d:active b { background: var(--p-raise); }
#pcalRoot .pcal-mini__d.is-today b { background: var(--p-today); color: #FFFFFF; font-weight: 500 !important; }
#pcalRoot .pcal-mini__dots { position: absolute; left: 0; right: 0; bottom: 1px; display: flex; justify-content: center; align-items: center; gap: 2px; height: 5px; }
#pcalRoot .pcal-mini__d.is-today .pcal-mini__dots { display: none; }
#pcalRoot .pcal-mini__dots i { display: block; width: 5px; height: 5px; border-radius: 50%; }
#pcalRoot .pcal-mini__dots em { font-style: normal; color: #5F6368; font-size: 9px !important; font-weight: 600 !important; line-height: 5px !important; }
#pcalRoot .pcal-pick .pcal-strip { box-shadow: none; animation: none; padding: 10px 12px 12px; position: static; }
}

/* ── PHASE 85 · the session sheet, Google's event sheet: × and Done, the title, icon rows, the actions ── */
#pcalSheet .pce-head { display: flex; align-items: center; justify-content: space-between; margin: -2px -6px 10px; }
#pcalSheet .pce-ib { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #F1F3F4; color: #1F1F1F; cursor: pointer; }
#pcalSheet .pce-ib svg { width: 22px; height: 22px; }
#pcalSheet .pce-done { height: 40px; padding: 0 22px; border: 0; border-radius: 20px; background: #0B57D0; color: #fff; font-size: 15px !important; font-weight: 500 !important; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
#pcalSheet .pce-done:active { transform: scale(.97); }
#pcalSheet :is(.pce-done, .pce-act, .pce-mini).is-busy { opacity: .55; pointer-events: none; }
#pcalSheet .pce-title { display: block; width: 100%; margin: 4px 0 12px; padding: 4px 0 8px; border: 0 !important; border-bottom: 1px solid #E3E3E3 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #1F1F1F; font-size: 24px !important; font-weight: 400 !important; line-height: 1.25 !important; outline: none; -webkit-appearance: none; }
#pcalSheet .pce-title:focus { border-bottom-color: #0B57D0 !important; }
#pcalSheet .pce-title::placeholder { color: #9AA0A6; }
#pcalSheet .pce-title-ro { margin: 4px 0 12px; color: #1F1F1F; font-size: 24px !important; font-weight: 400 !important; line-height: 1.25 !important; }
#pcalSheet .pce-title-ro.is-x { color: #80868B; }
#pcalSheet .pce-title-ro.is-done { text-decoration: line-through; }
#pcalSheet .pce-kicker { display: flex; align-items: center; gap: 8px; margin: -6px 0 10px; color: #5F6368; font-size: 13.5px !important; font-weight: 400 !important; }
#pcalSheet .pce-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
#pcalSheet .pce-rows { margin: 0 -20px; }
#pcalSheet .pce-row { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 13px 20px; border-top: 1px solid #EEEEEE; }
#pcalSheet .pce-row[data-a] { cursor: pointer; }
#pcalSheet .pce-row[data-a]:active { background: #F8F9FA; }
#pcalSheet .pce-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: #444746; }
#pcalSheet .pce-ic svg { width: 22px; height: 22px; }
#pcalSheet .pce-ic.is-bolt { color: #E37400; }
#pcalSheet .pce-row__t { flex: 1; min-width: 0; }
#pcalSheet .pce-row__t b { display: block; color: #1F1F1F; font-size: 15.5px !important; font-weight: 400 !important; line-height: 1.35 !important; }
#pcalSheet .pce-row__t b.is-mute { color: #9AA0A6; }
#pcalSheet .pce-row__t > span, #pcalSheet .pce-lbl { display: block; margin-top: 2px; color: #5F6368; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.35 !important; }
#pcalSheet .pce-chev { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #BDC1C6; }
#pcalSheet .pce-chev svg { width: 20px; height: 20px; }
#pcalSheet .pce-sw { display: block; width: 18px; height: 18px; border-radius: 5px; background: var(--c); }
/* when: two lines like Google's — day on the left, time on the right; the phone's own pickers sit invisibly on top */
#pcalSheet .pce-when { border-top: 1px solid #EEEEEE; padding: 6px 0 4px; }
#pcalSheet .pce-when[data-a] { cursor: pointer; }
#pcalSheet .pce-when__r { display: flex; align-items: center; gap: 16px; padding: 7px 20px; }
#pcalSheet .pce-when__r--end { padding-top: 0; }
#pcalSheet .pce-when__f { position: relative; flex: 1; min-width: 0; display: block; }
#pcalSheet .pce-when__f--r { flex: none; text-align: right; }
#pcalSheet .pce-when__f b { display: block; color: #1F1F1F; font-size: 15.5px !important; font-weight: 400 !important; line-height: 1.35 !important; white-space: nowrap; }
#pcalSheet .pce-when__f b.is-mute { color: #80868B; }
#pcalSheet .pce-when__f input { position: absolute; inset: -6px -8px; width: calc(100% + 16px); height: calc(100% + 12px); opacity: 0; font-size: 16px; -webkit-appearance: none; appearance: none; border: 0; background: none; }
/* chips: length, how, kind, family */
#pcalSheet .pce-row--chips { align-items: flex-start; }
#pcalSheet .pce-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
#pcalSheet .pce-chip { height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: #F1F3F4; color: #1F1F1F; font-size: 13.5px !important; font-weight: 500 !important; cursor: pointer; white-space: nowrap; box-shadow: inset 0 0 0 1px transparent; transition: background .15s ease, box-shadow .15s ease; }
#pcalSheet .pce-chip.is-on { background: #D3E3FD; color: #041E49; box-shadow: inset 0 0 0 1px #A8C7FA; }
#pcalSheet .pce-row--kind .pce-chips { margin-top: 0; }
#pcalSheet .pce-row--kind .pce-lbl { margin-top: 8px; }
/* note + fields */
#pcalSheet .pce-note, #pcalSheet .pce-field { display: block; width: 100%; box-sizing: border-box; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; color: #1F1F1F; font-size: 15.5px !important; font-weight: 400 !important; line-height: 1.4 !important; resize: none; outline: none; -webkit-appearance: none; }
#pcalSheet .pce-note::placeholder, #pcalSheet .pce-field::placeholder { color: #9AA0A6; }
#pcalSheet .pce-field { margin: 12px 0 0 !important; padding: 12px 14px !important; border-radius: 12px !important; background: #F1F3F4 !important; }
#pcalSheet .pce-field:focus { box-shadow: inset 0 0 0 1.5px #0B57D0 !important; }
/* a request on this session */
#pcalSheet .pce-req { display: flex; gap: 16px; margin: 8px 12px; padding: 12px 14px; border-radius: 14px; background: #FEF7E0; }
#pcalSheet .pce-req__acts { display: flex; gap: 8px; margin-top: 10px; }
#pcalSheet .pce-mini { height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 1px #DADCE0; font-size: 13.5px !important; font-weight: 500 !important; cursor: pointer; }
#pcalSheet .pce-mini.is-primary { background: #0B57D0; color: #fff; box-shadow: none; }
#pcalSheet .pce-mini.is-danger { color: #B3261E; }
/* hints and warnings */
#pcalSheet .pce-hint { margin: 12px 2px 0; color: #5F6368; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.45 !important; }
#pcalSheet .pce-hint--tok, #pcalSheet .pce-warn { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; background: #E8F0FE; color: #174EA6; font-size: 13.5px !important; line-height: 1.4 !important; }
#pcalSheet .pce-warn { background: #FCE8E6; color: #A50E0E; }
#pcalSheet :is(.pce-hint--tok, .pce-warn) svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
#pcalSheet .pce-conf { margin: 10px 2px 0; color: #B3261E; font-size: 13.5px !important; font-weight: 500 !important; }
/* the cancel choices (staff) */
#pcalSheet .pce-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
#pcalSheet .pce-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px; background: #F8F9FA; box-shadow: inset 0 0 0 1px #E3E3E3; cursor: pointer; }
#pcalSheet .pce-opt.is-on { background: #E8F0FE; box-shadow: inset 0 0 0 1.5px #0B57D0; }
#pcalSheet .pce-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
#pcalSheet .pce-opt__r { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px #80868B; }
#pcalSheet .pce-opt.is-on .pce-opt__r { box-shadow: inset 0 0 0 6px #0B57D0; }
#pcalSheet .pce-opt__t b { display: block; color: #1F1F1F; font-size: 15px !important; font-weight: 500 !important; line-height: 1.3 !important; }
#pcalSheet .pce-opt__t span { display: block; color: #5F6368; font-size: 13px !important; font-weight: 400 !important; }
/* actions */
#pcalSheet .pce-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #E3E3E3; }
#pcalSheet .pce-act { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; box-sizing: border-box; background: #F1F3F4; color: #1F1F1F; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; font-size: 15px !important; font-weight: 500 !important; }
#pcalSheet .pce-act span { font-size: inherit !important; font-weight: inherit !important; }
#pcalSheet .pce-act:active { transform: scale(.98); background: #E8EAED; }
#pcalSheet .pce-act svg { width: 21px; height: 21px; flex: none; color: #0B57D0; }
#pcalSheet .pce-act.is-danger, #pcalSheet .pce-act.is-danger svg { color: #B3261E; }
#pcalSheet .pce-act.is-primary { background: #0B57D0; color: #fff; }
#pcalSheet .pce-act.is-primary svg { color: #fff; }
/* the toast */
.pce-toast { position: fixed; left: 50%; bottom: calc(var(--pcal-bot, 0px) + 22px); z-index: 2147482200; transform: translate(-50%, 16px); max-width: calc(100vw - 40px); padding: 12px 18px; border-radius: 12px; background: #202124; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); font: 500 14px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
.pce-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pce-toast.is-bad { background: #B3261E; }

/* phase 85e — a pending extra-session request: a dashed card in the family's colour, never solid until agreed */
#pcalRoot :is(.pcal-se, .pcal-chip, .pcal-ev).is-req { background: #fff !important; color: var(--c) !important; box-shadow: none !important; border: 1.5px dashed var(--c) !important; }
#pcalRoot .pcal-chip.is-req { border-width: 1px !important; }
#pcalRoot :is(.pcal-se, .pcal-ev).is-req b { text-decoration: none !important; }

/* 2026-10-02 — MOVED: the ghost on the old day (red outline, no fill, the name struck through; only with "Show cancelled")
   and the small pill on the session where it moved to */
#pcalRoot :is(.pcal-se, .pcal-chip, .pcal-ev).is-moved { --c: #D93025; background: transparent; color: #B3261E; box-shadow: inset 0 0 0 1.5px rgba(217, 48, 37, .62); }
#pcalRoot .pcal-chip.is-moved { box-shadow: inset 0 0 0 1px rgba(217, 48, 37, .62); text-decoration: line-through; }
#pcalRoot :is(.pcal-se, .pcal-ev).is-moved b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
#pcalRoot :is(.pcal-se, .pcal-ev).is-moved span { color: #B3261E; opacity: .9; }
#pcalRoot .pcal-mvpill { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 7px; height: 17px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .01em; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); vertical-align: 1px; }
#pcalSheet .pce-row--moved .pce-ic { color: #B3261E; }


/* 2026-10-02 — calendar NOTES (a Family Notebook task with a due day): quiet grey outline, no fill, a small note mark;
   never a coloured session block. All-day notes sit first in the list and, in the hour grids, under the day's number. */
#pcalRoot .pcal-notemark { flex: none; display: inline-block; vertical-align: -2px; margin-right: 5px; color: var(--p-mute); }
#pcalRoot :is(.pcal-se, .pcal-chip, .pcal-ev).is-note { --c: #80868B; background: var(--p-raise); color: var(--p-ink2); box-shadow: inset 0 0 0 1px var(--p-line); }
#pcalRoot .pcal-se.is-note b { color: var(--p-ink); font-weight: 500 !important; }
#pcalRoot .pcal-se.is-note span { color: var(--p-mute); }
#pcalRoot .pcal-se.is-note.is-allday { background: transparent; box-shadow: inset 0 0 0 1px var(--p-line), inset 3px 0 0 #9AA0A6; }
#pcalRoot .pcal-chip.is-note { background: transparent; color: var(--p-ink2); box-shadow: inset 0 0 0 1px #BDC1C6; }
#pcalRoot .pcal-ev.is-note { box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #BDC1C6; }
#pcalRoot .pcal-ev.is-note b { color: var(--p-ink); font-weight: 500 !important; }
#pcalRoot .pcal-ev.is-note span { color: var(--p-mute); }
#pcalRoot .pcal-ev.is-note .pcal-notemark { display: none; }
#pcalRoot .pcal-gh__note { display: block; max-width: calc(100% - 4px); margin-top: 3px; padding: 0 5px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px #BDC1C6; color: var(--p-ink2); font-size: 10.5px; font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
#pcalRoot .pcal-gh__note .pcal-notemark { width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px; }
#pcalRoot.pcal[data-view="week"] .pcal-gh__note .pcal-notemark { display: none; }
#pcalRoot.pcal[data-view="day"] .pcal-gh__note { max-width: calc(100% - 12px); height: 20px; line-height: 20px; padding: 0 8px; font-size: 12px; cursor: pointer; }
#pcalSheet :is(.pce-row, .pce-when__r, .pce-when__f)[hidden] { display: none !important; }
/* a note moved to the Trash: still on the record (staff, with Show cancelled) — dashed, faded, struck through */
#pcalRoot :is(.pcal-se, .pcal-chip, .pcal-ev).is-note.is-trashed { background: transparent; box-shadow: none; outline: 1px dashed #BDC1C6; outline-offset: -1px; opacity: .78; }
#pcalRoot :is(.pcal-se, .pcal-ev).is-note.is-trashed b, #pcalRoot .pcal-chip.is-note.is-trashed, #pcalRoot .pcal-gh__note.is-trashed { text-decoration: line-through; text-decoration-color: rgba(95, 99, 104, .7); }
#pcalRoot .pcal-gh__note.is-trashed { box-shadow: none; outline: 1px dashed #BDC1C6; outline-offset: -1px; opacity: .78; }