/* Phone and installed-PWA refinements. Preserve the desktop board and data gates.
   Safe-area variables also let device QA exercise notches without a physical phone. */
:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
}
@media (max-width: 999px) {
  html { scroll-padding-block: calc(12px + var(--mobile-safe-top)) calc(96px + var(--mobile-safe-bottom)); }
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] > .app-main {
    padding: calc(12px + var(--mobile-safe-top)) max(14px, var(--mobile-safe-right)) calc(96px + var(--mobile-safe-bottom)) max(14px, var(--mobile-safe-left)) !important;
  }
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view > .page-header {
    display:grid !important; grid-template-columns:34px minmax(0,1fr) 96px;
    align-items:center !important; gap:10px !important; padding:0 !important; margin:0 0 16px !important;
  }
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view > .page-header::before {
    grid-column:1; grid-row:1; width:34px; height:34px; margin:0;
    background-image:url('/mindcoda-design-logo.png'); align-self:center;
  }
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .page-header > div:first-child {
    grid-column:2; grid-row:1; width:auto !important; min-width:0; max-width:none !important; padding:0 !important;
  }
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .page-header h1, html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-header h1 {
    font-size:22px !important; line-height:1.2 !important; letter-spacing:-.035em;
    margin:0 !important; max-width:none !important; overflow-wrap:anywhere;
  }
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .page-header .page-kicker {font-size:11px !important; line-height:1.4; margin:0 0 3px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .page-header .today-header__copy:empty {display:none;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .page-header > .page-header__actions {grid-column:1/-1; grid-row:auto; width:100%;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true]:not([data-keyboard-open=true]) .mc-nav--mobile:not([hidden]) {
    inset:auto max(8px,var(--mobile-safe-right)) calc(6px + var(--mobile-safe-bottom)) max(8px,var(--mobile-safe-left));
    width:auto; max-width:520px; margin-inline:auto; padding:4px; border-radius:22px;
    background:#f8fcfffa; box-shadow:0 8px 28px #15284820; border:1px solid #c8d5e8;
  }
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .mc-nav--mobile .mc-nav__item {min-height:54px; gap:3px; font-size:11px; line-height:1.25; color:#52637e;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .mc-nav--mobile .mc-nav__item.is-active {background:#e5f4ef; color:#0a155e; font-weight:800;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .mc-nav--mobile .mc-nav__item::after {display:none;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-keyboard-open=true] .mc-nav--mobile {display:none !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-keyboard-open=true] > .app-main {padding-bottom:16px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select) {font-size:16px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] :is(button,a,summary) {touch-action:manipulation;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .reference-plan-toolbar {grid-column:1/-1; gap:8px !important; margin:0 !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .reference-plan-toolbar .preview-plan-tabs {display:flex; width:100% !important; box-sizing:border-box;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-tabs [role=tab] {flex:1; min-width:0; min-height:44px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-tools {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:6px; margin:0;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-tool {min-width:0; min-height:44px; justify-content:center; padding:6px; gap:4px; font-size:12px; white-space:normal; line-height:1.3; border-radius:16px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-tool svg {flex-shrink:0; width:16px; height:16px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-day {padding:12px; gap:12px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-hero {min-height:120px; height:auto; padding:16px; border-radius:18px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-hero h2 {font-size:24px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-section-label .reference-plan-date summary {min-height:44px; display:flex; align-items:center;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .preview-plan-day .planner-timeline-row {min-height:54px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] .preview-coda-main {gap:12px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] .preview-coda-main > * {grid-row:auto !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] .ai-conversation-card {padding:16px !important; gap:10px; min-height:0;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] [data-coda-chat-intro] {gap:8px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] [data-coda-chat-intro] > .coda-flow {width:56px !important; height:56px !important; min-height:56px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] [data-coda-chat-intro] h2 {font-size:21px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] .coda-board-actions {gap:8px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] .coda-board-actions button {flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; min-height:64px !important; gap:8px !important; padding:12px !important; border-radius:16px !important; font-size:14px; line-height:1.35;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .reference-coda-chips {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .reference-coda-chips button {min-height:44px; padding:8px; font-size:12px; line-height:1.3;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] #ai-composer {padding:10px !important; border-radius:20px !important; gap:6px; scroll-margin-block:14px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] .ai-composer__bottom .mc-coda-talk {padding:10px 12px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] #ai-composer textarea {min-height:48px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] .preview-coda-soon {min-height:0; padding:12px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-keyboard-open=true] [data-preview-coda] #ai-composer {position:static !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-keyboard-open=true] [data-preview-coda] .ai-message-list {max-height:42dvh !important; overflow:auto !important; overscroll-behavior:contain;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true][data-active-view=focus] > .app-main {padding:calc(12px + var(--mobile-safe-top)) max(14px,var(--mobile-safe-right)) calc(96px + var(--mobile-safe-bottom)) max(14px,var(--mobile-safe-left)) !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] > .page-header {grid-template-columns:minmax(0,1fr) 96px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] > .page-header > :first-child {grid-column:1; padding:0; justify-self:start;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .nature-focus-stage {grid-template-columns:minmax(0,1fr) !important; gap:14px; min-height:0;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-clock {display:contents;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-timer-card {
    display:grid !important; grid-template-columns:132px minmax(0,1fr); gap:8px 14px; align-items:center;
    padding:14px !important; border:1px solid #b5d8e033 !important; border-radius:22px !important; background:#ffffff08 !important;
  }
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-timer-card__top {grid-column:1/-1; margin:0; justify-content:flex-start;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-clock .focus-ring:not([hidden]) {grid-column:1; grid-row:2/5; width:132px !important; max-width:132px !important; height:132px !important; margin:0 !important; padding:8px !important; border-width:4px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-clock .focus-clock {font-size:28px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-clock .focus-sanctuary {width:40px !important; height:40px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-actions {grid-column:2; display:flex; flex-direction:column; gap:6px; margin:0 !important; width:100%;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-actions .mc-button {min-width:0; width:100%; min-height:44px; padding:10px 8px !important; font-size:13px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .nature-timer-options {grid-column:2; margin:0 !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .nature-timer-options > summary {display:flex; align-items:center; justify-content:center; min-height:44px; padding:4px; font-size:12px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .nature-timer-options[open] {grid-column:1/-1;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .mc-scene-motion {grid-column:2; min-height:44px; margin:0; padding:6px; gap:5px; font-size:12px; justify-content:center;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .mc-scene-motion input {flex-shrink:0;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-timer-card > :is(.focus-breathing-live,.focus-break-suggestion,[data-focus-reflection],.focus-countdown-calm) {grid-column:1/-1;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-timer-card > p:empty {display:none;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-workspace {min-height:0 !important; padding:14px; border-radius:22px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-tabs {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; margin-bottom:14px; border-radius:18px !important; overflow:visible;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-tabs button {min-width:0; min-height:44px; padding:8px 4px; white-space:normal; line-height:1.2; font-size:12px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .focus-course-chips {gap:6px; margin:0 0 12px; padding:0;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=study] [data-study-hero] {padding:18px !important; margin-bottom:14px !important; border-radius:22px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-study-hero] h2 {font-size:23px !important;}
  .mobile-tabs-dialog {box-sizing:border-box; width:min(520px,calc(100% - 20px)); max-height:calc(100dvh - 20px - var(--mobile-safe-top) - var(--mobile-safe-bottom)); padding:20px; overscroll-behavior:contain;}
  .mobile-tabs-dialog select {font-size:16px;}
  .mobile-workspace-shortcuts {display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px;}
  .mobile-workspace-shortcuts button:first-child {grid-column:1/-1;}
  .mobile-account-actions {margin-top:18px;}
  html body #onboarding-sheet > .sheet-surface {padding:calc(20px + var(--mobile-safe-top)) max(20px,var(--mobile-safe-right)) calc(20px + var(--mobile-safe-bottom)) max(20px,var(--mobile-safe-left)) !important;}
  .design-customize {padding:calc(18px + var(--mobile-safe-top)) max(16px,var(--mobile-safe-right)) calc(30px + var(--mobile-safe-bottom)) max(16px,var(--mobile-safe-left));}
  html body dialog:not(#onboarding-sheet):not(#design-personalize) {max-height:calc(100dvh - 24px - var(--mobile-safe-top) - var(--mobile-safe-bottom));}
  html body dialog :is(input:not([type=checkbox]):not([type=radio]),textarea,select) {font-size:16px;}
}
@media (max-width:560px) {
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard > .today-next.mc-card {padding:18px 16px !important; grid-template-columns:48px minmax(0,1fr) !important; gap:10px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard .student-board-orbit {width:48px !important; height:60px !important; margin:0 !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard .today-next #today-next-heading {font-size:20px !important; line-height:1.25; margin-bottom:8px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next [data-next-copy] {font-size:13px !important; padding:10px 12px !important; line-height:1.45;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-next .mc-next-options {margin:0;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard .mc-home-focus-dock {gap:8px !important; margin:0 !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .mc-home-time-options {display:flex; width:100%;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .mc-home-time-options button {flex:1; min-height:44px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard .mc-home-time-controls {width:100%;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard__day {min-height:0;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard__courses .course-grid:has(.today-course) {grid-template-columns:1fr !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard__courses .today-course {grid-template-columns:minmax(0,1fr) !important; align-items:center; padding:14px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard__courses .today-course .mc-button {grid-column:auto !important; grid-row:auto !important; min-height:44px; padding:8px 12px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-course__actions {grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .today-dashboard__courses .today-course h3 {font-size:15px; overflow-wrap:anywhere;}
}
@media (max-width:359px) {
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .page-header {grid-template-columns:28px minmax(0,1fr) 94px !important; gap:8px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .page-header::before {width:28px; height:28px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .page-header h1 {font-size:19px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] #ai-composer {grid-template-columns:minmax(0,1fr) !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] #ai-composer textarea {grid-column:1 !important; grid-row:1 !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-preview-coda] .ai-composer__bottom {grid-column:1 !important; grid-row:2 !important; justify-content:flex-end;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-tool {font-size:11px;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .plan-tool svg {display:none;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-timer-card {grid-template-columns:112px minmax(0,1fr); gap:8px; padding:10px !important;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-clock .focus-ring:not([hidden]) {width:112px !important; height:112px !important; max-width:112px !important;}
}
@media (min-width:700px) and (max-width:999px) and (max-height:540px) {
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .nature-focus-stage {grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr) !important; align-items:start;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus] .focus-room-workspace {grid-column:2; grid-row:1/4;}
  html body.student-experience #app-shell#app-shell[data-preview-shell=true] .mc-nav--mobile .mc-nav__item {min-height:48px;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto !important;}
}

/* Google event connection and compact appointment sheet. */
.mc-sheet.mc-calendar-appointment{inset:0;margin:auto;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);height:fit-content;border-radius:24px;overflow:auto;transform:none;box-sizing:border-box;}
.mc-calendar-appointment>.sheet-surface{display:grid;gap:16px;padding:22px;width:100%;box-sizing:border-box;min-height:0;}
.mc-calendar-appointment label{display:grid;gap:6px;font-size:14px;font-weight:650;}
.mc-calendar-appointment input{width:100%;min-width:0;box-sizing:border-box;min-height:48px;padding:10px;border:1px solid var(--mc-line);border-radius:12px;background:var(--mc-surface);color:var(--mc-ink);font:inherit;font-size:16px;}
.mc-calendar-appointment .reference-inline-actions{display:flex;flex-wrap:wrap;gap:10px;}
.google-events-flow{margin:12px 0;}
html body.student-experience dialog.mc-sheet.mc-calendar-appointment{position:fixed!important;inset:0!important;margin:auto!important;min-height:0!important;height:fit-content!important;max-height:calc(100dvh - 32px)!important;width:min(380px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;transform:none!important;overflow:auto!important;box-sizing:border-box!important;}
html body.student-experience dialog.mc-sheet.mc-calendar-appointment .sheet-surface{min-height:0!important;height:auto!important;max-height:none!important;}
.google-events-flow [data-calendar-options]{display:grid;gap:8px;margin:12px 0;}
.google-events-flow [data-calendar-options] label{display:flex;gap:10px;align-items:center;min-height:44px;overflow-wrap:anywhere;}
.google-events-flow [data-calendar-options] input{width:20px;height:20px;flex:0 0 20px;}

/* External calendar deletion uses the same bounded, accessible mobile sheet. */
[data-agenda-items] li{display:flex;align-items:center;flex-wrap:wrap;gap:8px;overflow-wrap:anywhere}
[data-agenda-items] li>button{margin-inline-start:auto;min-height:44px;flex-shrink:0}
.mc-calendar-delete [data-delete-event]{font-weight:800;overflow-wrap:anywhere}
.mc-calendar-delete .mc-button--danger{background:#a52035!important;color:#fff!important;border-color:#a52035!important}
.mc-calendar-delete button:focus-visible{outline:3px solid #1465c0;outline-offset:3px}
html body.student-experience dialog.mc-calendar-delete .sheet-surface{gap:14px!important;align-content:start;}
.mc-calendar-delete .sheet-surface>:is(h2,p){margin:0!important;}
.mc-calendar-delete [data-delete-status]:empty{display:none;}
html.theme-dark body.student-experience :is(.google-events-flow,[data-event-agenda]){background:#202c48!important;border-color:#4b5d7c!important;color:#edf4ff!important;}
html.theme-dark body.student-experience :is(.google-events-flow,[data-event-agenda]) :is(p,h3,summary,li,label){color:#edf4ff!important;}
/* Optional visual task input; the existing task fields remain authoritative. */
.task-date-chips,.task-time-presets,.task-time-actions,.task-clock-display,.task-clock-periods{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.task-date-chips button,.task-visual-time button{min-height:44px;border:1px solid var(--mc-line,#c7d5e5);border-radius:14px;background:var(--mc-surface,#fff);color:var(--mc-ink,#102044);padding:8px 12px;font:inherit;cursor:pointer}
.task-date-chips button[aria-pressed=true],.task-visual-time button[aria-pressed=true]{background:#c4f8e3;color:#103b36;border-color:#78bea6}
.task-date-chips button{font-size:13px;flex:1;white-space:nowrap;padding-inline:8px}
.task-visual-time{display:grid;grid-template-columns:1fr auto;gap:8px;min-width:0}
.task-visual-time .task-time-trigger{text-align:left}.task-visual-time .task-time-remove{font-size:12px}
.task-clock-picker,.task-time-status{grid-column:1/-1}.task-time-status:empty{display:none}
.task-clock-picker{padding:16px;border-radius:20px;background:var(--mc-pearl,#edf5fb);border:1px solid var(--mc-line);display:grid;gap:12px}
.task-clock-picker[hidden],.task-visual-time [hidden]{display:none!important}
.task-clock-hint,.task-time-status{margin:0!important;font-size:13px;line-height:1.5}
.task-clock-display{justify-content:center}.task-clock-display>button{font-size:26px;font-weight:750;min-width:58px}.task-clock-periods{gap:4px}
.task-clock-face{position:relative;width:244px;max-width:100%;aspect-ratio:1;border-radius:50%;margin:auto;background:var(--mc-surface,#fff);border:1px solid var(--mc-line);box-shadow:inset 0 0 0 8px #8fcbd212}
.task-clock-face .task-clock-number{position:absolute;transform:translate(-50%,-50%);padding:0;width:44px;height:44px;min-height:44px;border:0;border-radius:50%;z-index:2;background:transparent}
.task-clock-face .task-clock-number[aria-pressed=true]{background:#143c79;color:#fff}
.task-clock-hand{position:absolute;bottom:50%;left:calc(50% - 2px);width:4px;height:33%;border-radius:8px;background:#2e78b6;transform-origin:50% 100%;pointer-events:none}
.task-clock-center{position:absolute;top:calc(50% - 6px);left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:#2e78b6}
.task-time-presets{justify-content:center}.task-time-presets button{font-size:11px;flex:1;padding:7px 4px}
.task-time-actions{justify-content:flex-end}.task-time-actions .task-time-apply{background:#103878;color:white;font-weight:750}
.task-time-exact{font-size:13px}.task-time-exact>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}.task-time-exact label{margin-top:8px}
.task-visual-time button:focus-visible,.task-date-chips button:focus-visible{outline:3px solid #2979ba;outline-offset:2px}
@media(max-width:420px){.task-clock-picker{padding:10px}.task-visual-time{grid-template-columns:1fr}.task-visual-time .task-time-remove{justify-self:start}.task-clock-display>button{font-size:23px}.task-clock-periods button{padding-inline:10px}}
/* Living Day and Calendar share the selected date and the same event data. */
.plan-day-mode-toolbar,.plan-day-switch,.plan-day-range{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.plan-day-mode-toolbar{justify-content:space-between;margin:12px 0}
.plan-day-mode-toolbar button{min-height:44px;padding:8px 12px;border:1px solid var(--board-line,#c9d7e7);border-radius:12px;background:var(--board-card,#fff);color:var(--board-ink,#102044);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.plan-day-mode-toolbar button[aria-pressed=true]{background:#133b7a;color:#fff;border-color:#133b7a}
.plan-day-mode-toolbar [hidden],.plan-day-hour-calendar[hidden]{display:none!important}
.preview-plan-progress[data-day-mode=calendar]>.plan-track-wrap,.preview-plan-progress[data-day-mode=calendar]>.plan-ticks{display:none!important}
.plan-day-window{margin:8px 0 14px!important;font-size:12px;line-height:1.5;color:var(--today-muted,#50617c)}
.plan-day-hour-grid{position:relative;margin:0 0 24px;min-width:0}
.plan-day-hour-line{position:absolute;left:0;right:0;border-top:1px solid var(--mc-line,#d0deeb);pointer-events:none}
.plan-day-hour-line>span{position:absolute;left:0;top:-8px;font-size:10px;color:var(--board-ink,#102044);background:var(--board-card,#fff);padding-right:4px}
.plan-day-calendar-event{position:absolute;z-index:2;text-align:left;overflow:hidden;border:1px solid #ffffffb3;border-radius:10px;padding:5px 8px;cursor:pointer;font:inherit;box-sizing:border-box;background:#bbd5f3;color:#163c63}
.plan-day-calendar-event[data-tone=study]{background:#91e3c2;color:#103c2e}.plan-day-calendar-event[data-tone=class]{background:#254aaa;color:#fff}.plan-day-calendar-event[data-tone=work]{background:#f2bf71;color:#50320c}
.plan-day-calendar-event strong,.plan-day-calendar-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.plan-day-calendar-event small{font-size:10px}
.plan-day-calendar-gap{position:absolute;left:58px;right:5px;z-index:1;min-height:28px;text-align:right;padding:4px 10px;border:1px dashed var(--mc-line,#b7c9df);border-radius:10px;color:var(--board-ink,#102044);background:transparent;font:inherit;font-size:12px;cursor:pointer}
.plan-day-hour-calendar button:focus-visible,.plan-day-mode-toolbar button:focus-visible{outline:3px solid #2889c5;outline-offset:2px;z-index:3}
@media(max-width:480px){.plan-day-mode-toolbar{display:grid;grid-template-columns:1fr}.plan-day-switch,.plan-day-range{display:flex}.plan-day-mode-toolbar button{flex:1}.plan-day-calendar-event{padding-inline:5px}}
.preview-plan-day:has(.preview-plan-progress[data-day-mode=calendar])>.planner-timeline-card{display:none!important}