:root {
  color-scheme: light;
  font: 87.5%/1.45 system-ui, sans-serif;
  color: #202124;
  background: #fff;
  --green: #174ea6;
  --soft: #e8f0fe;
  --line: #dadce0;
  --field: #f1f3f5;
  --menu-ink: #454a51;
  --menu-hover: #f1f2f3;
  --menu-selected: #e4e6e8;
}
* { box-sizing: border-box; }
body { margin: 0; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
a { color: var(--green); text-underline-offset: .18em; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 500; }
h1 { font-size: 1.7rem; line-height: 1.2; }
h2 { font-size: 1.3rem; line-height: 1.25; }
h3 { font-size: 1.08rem; font-weight: 400; }
strong, th { font-weight: inherit; }
p + p { margin-top: .28rem; }
.wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.skip { position: absolute; top: -5rem; left: 1rem; z-index: 1; background: white; padding: .7rem; }
.skip:focus { top: .4rem; }
.bar { background: #fff; border-bottom: 1px solid var(--line); }
.bar-inner, .bar nav, .brand {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
}
.bar-inner {
  width: calc(100% - 1.5rem); display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(45vw, 24rem)) minmax(0, 1fr);
  padding-block: .2rem; gap: .25rem;
}
.bar-inner .brand { justify-self: start; }
.bar-inner > nav { grid-column: 3; justify-self: end; }
.bar nav { gap: .1rem; }
.header-menu { position: relative; }
.header-popover {
  position: absolute; z-index: 5; inset-inline-end: 0; top: calc(100% + .35rem);
  padding: .4rem; border-radius: .65rem; background: #fff;
  box-shadow: 0 .35rem 1rem #20212424;
}
.account-popover { min-width: 10rem; display: grid; }
.account-popover > * { justify-content: start; margin: 0; }
.app-popover { width: min(19rem, calc(100vw - 4rem)); }
.app-popover p { padding: .4rem; }
#app-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem;
  max-height: 65vh; overflow: auto; list-style: none; padding: 0; margin: 0;
}
#app-tiles a {
  display: flex; flex-direction: column; gap: .35rem; padding: .45rem .25rem;
  color: inherit; text-align: center; text-decoration: none;
}
.app-tile-icon {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .45rem;
  background: var(--menu-selected); color: var(--menu-ink); font-size: 1.1rem;
}
.app-tile-image { width: 2rem; height: 2rem; border-radius: .45rem; object-fit: contain; }
.search-pill {
  grid-column: 2; grid-row: 1; display: flex; align-items: center; min-width: 0;
  border-radius: 999px; background: var(--field);
}
.search-pill:focus-within { box-shadow: 0 0 0 2px var(--green); }
.search-pill input[type="search"] {
  flex: 1; width: 0; min-height: 34px; padding: 0 0 0 .75rem;
  border: 0; border-radius: 0; background: transparent;
}
.search-pill input[type="search"]:focus { outline: none; }
.search-pill button {
  display: grid; place-items: center; flex: 0 0 34px; min-height: 34px; padding: 0;
  background: transparent; color: var(--menu-ink); border: 0; border-radius: 50%;
}
.search-pill button:hover { background: var(--menu-hover); }
.search-result { margin: 0 0 .5rem; }
.search-result a { margin-inline-start: .3rem; }
#app-tiles a:hover, .account-popover > :hover, .bar .icon-control:hover { background: var(--menu-hover); }
.account-popover a, .account-popover button, .bar .icon-control { color: var(--menu-ink); }
.brand { font-weight: 500; font-size: 1rem; text-decoration: none; min-height: 36px; gap: .4rem; color: inherit; }
.bar nav a, .plan-tabs a, .back, summary, button, .button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .45rem .7rem; border-radius: .65rem;
}
summary { display: list-item; }
.bar nav a, .bar nav button, .bar nav summary {
  min-height: 34px; padding: .25rem .5rem; font-size: .88rem;
}
.icon-control, .calendar-toolbar .icon-control, .task-toolbar .icon-control {
  display: grid; place-items: center; width: 36px; padding: 0; border-radius: 50%; list-style: none;
}
.icon-control::-webkit-details-marker { display: none; }
main { padding-block: 1.4rem 3rem; }
body:has(.board) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
body:has(.board) > .bar { flex: none; }
main:has(.board) {
  display: flex; flex: 1; flex-direction: column; min-height: 0;
  width: calc(100% - 1.5rem); padding-block: .6rem 0;
}
.form-panel h1 + p { margin-top: .5rem; }
.eyebrow { font-size: .79rem; letter-spacing: .08em; color: var(--green); }
.plan-tabs { display: none; }
.board {
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 2fr); gap: .65rem;
  grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0;
}
.board::before { content: ""; grid-column: 2; grid-row: 1; background: var(--line); }
.task-pane, .calendar-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; grid-row: 1; }
.task-pane { grid-column: 1; }
.calendar-pane { grid-column: 3; }
.panel { padding: clamp(.85rem, 3vw, 1.35rem); }
.calendar-toolbar .button, .task-toolbar .button, .week-controls a {
  min-height: 34px; padding: .3rem .65rem; font-size: .9rem; border-radius: .35rem;
}
.calendar-toolbar .icon-control, .task-toolbar .icon-control { padding: 0; border-radius: 50%; }
.task-toolbar .icon-control { margin-inline-start: auto; }
.task-toolbar summary.icon-control { min-height: 34px; }
.task-toolbar .icon-control, .calendar-toolbar .icon-control { color: var(--menu-ink); }
.task-toolbar .icon-control:hover, .calendar-toolbar .icon-control:hover { background: var(--menu-hover); }
.button, button {
  border: 0; background: var(--green); color: #fff; text-align: center;
  text-decoration: none; padding-inline: .8rem;
}
.button:hover, button:hover { background: #124386; }
.secondary, .quiet, .danger { background: transparent; color: var(--green); }
.secondary:hover, .quiet:hover { background: var(--soft); }
button:disabled { opacity: .65; cursor: wait; }
.danger { color: #9a2e25; }
.danger:hover { background: #fdebe7; }
.task-toolbar, .calendar-toolbar {
  display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem;
}
.category-filter { color: var(--menu-ink); }
.category-filter[data-active] summary, .task-toolbar details[open] summary { background: var(--menu-selected); }
.task-toolbar .header-popover {
  display: grid; inset-inline: 0 auto; width: max-content; min-width: 10rem;
  max-width: calc(100vw - 1.5rem); max-height: 60dvh; overflow: auto;
}
.task-toolbar .header-popover a {
  display: flex; align-items: center; min-height: 34px; padding: .25rem .65rem;
  border-radius: .35rem; color: var(--menu-ink); text-decoration: none;
}
.task-toolbar .header-popover a:hover { background: var(--menu-hover); }
.task-toolbar .header-popover [aria-current] { background: var(--menu-selected); }
.items { padding: 0; margin: 0; list-style: none; display: grid; gap: .55rem; }
.item {
  display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap;
  gap: .55rem; padding: .65rem 0; border-top: 1px solid var(--line);
}
.item > div:first-child { flex: 1 1 10rem; min-width: 0; }
.person-fill { position: absolute; inset: 0; display: flex; pointer-events: none; }
.person-fill span { flex: 1; background: var(--person-bg); }
.person-0 { --person-bg: #dcefee; --person-ink: #155958; }
.person-1 { --person-bg: #e2edff; --person-ink: #244b85; }
.person-2 { --person-bg: #fbe5ef; --person-ink: #8a295a; }
.person-3 { --person-bg: #fce9d1; --person-ink: #884510; }
.person-4 { --person-bg: #ece5fa; --person-ink: #5f3d86; }
.person-5 { --person-bg: #e6efda; --person-ink: #415c20; }
.person-6 { --person-bg: #fbe3de; --person-ink: #87352b; }
.person-7 { --person-bg: #dff0f8; --person-ink: #1d5671; }
.person-8 { --person-bg: #f3edcd; --person-ink: #685508; }
.person-9 { --person-bg: #e3ebf1; --person-ink: #3d5369; }
.person-10 { --person-bg: #f6e7dc; --person-ink: #754932; }
.person-11 { --person-bg: #dff3e2; --person-ink: #246136; }
.task-body {
  display: flex; flex: 1; flex-direction: column; min-height: 0;
  overflow-y: auto; scrollbar-width: none;
}
.task-body > * { flex: none; }
.task-list { display: grid; gap: .3rem; padding: 2px; margin: 0; list-style: none; }
.completed-tasks { margin-block-start: auto; padding-block: .75rem .5rem; }
.task-group h2 { margin: 0 .3rem .3rem; color: #5f6368; font-size: .85rem; font-weight: 400; }
.task-row, .event-card {
  position: relative; overflow: clip; border-radius: .7rem; background: #f4f5f7;
}
.task-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: 42px; padding: .45rem .65rem; color: inherit; text-decoration: none;
}
a.task-row:hover, a.event-card:hover { filter: brightness(.96); }
a.task-row:focus-visible { outline-offset: -2px; }
.task-context {
  position: fixed; inset: auto; margin: 0; padding: .25rem;
  border: 0; border-radius: .5rem; background: #fff; box-shadow: 0 .35rem 1rem #20212430;
}
.task-context button { min-height: 36px; }
.task-context button:hover { background: var(--menu-hover); }
.task-label, .task-progress, .event-content { position: relative; min-width: 0; }
.task-label { display: grid; gap: .1rem; }
.task-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .6rem;
  font-size: .85rem; color: #454a51;
}
.deadline-badge {
  padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; font-size: .78rem;
}
.deadline-badge.overdue { background: #72213c; color: #fff; }
.deadline-badge.due-today { background: #b3262f; color: #fff; }
.deadline-badge.due-soon { background: #ffe6a3; color: #61410b; }
.deadline-badge.due-later { background: #daf1de; color: #225430; }
.task-progress { flex-shrink: 0; color: var(--green); }
.task-progress-editor { margin-block-start: 1.25rem; padding-block-start: 1rem; border-top: 1px solid var(--line); }
.week-range { font-weight: 500; margin-inline-end: auto; }
.week-controls { display: flex; gap: .25rem; }
.week-controls a { display: inline-grid; place-items: center; text-decoration: none; color: inherit; }
.week-controls a:hover { background: var(--menu-hover); }
.week-controls [aria-current] { background: var(--menu-selected); color: var(--menu-ink); }
.calendar-scroll {
  position: relative; overflow: auto;
  border-block: 1px solid var(--line); padding-bottom: 32px;
}
.calendar-scroll, .month-scroll { flex: 1; min-height: 0; }
.month-scroll { overflow: auto; }
.week-grid {
  width: 100%; min-width: 33rem; table-layout: fixed; border-collapse: separate; border-spacing: 0;
}
.week-grid thead th {
  position: sticky; top: 0; z-index: 4; height: 48px; padding: .2rem;
  border-bottom: 1px solid var(--line); background: #fff; font-size: .9rem;
}
.week-grid thead [aria-current] { background: var(--menu-selected); color: var(--menu-ink); }
.weather-forecast {
  display: flex; align-items: center; justify-content: center; gap: .15rem;
  white-space: nowrap; font-size: .73rem; line-height: 1.25; color: var(--menu-ink);
}
.weather-emoji { flex: none; font-size: 1rem; line-height: 1; }
.weather-credit { padding: .15rem .3rem; text-align: end; font-size: .7rem; }
.weather-credit a { color: inherit; }
.week-grid tbody th, .week-grid td {
  height: 48px; padding: .15rem; vertical-align: top; border-bottom: 1px solid var(--line);
}
.week-grid .time-heading {
  position: sticky; inset-inline-start: 0; width: 4.25rem; padding: .25rem .4rem;
  border-inline-end: 1px solid var(--line); background: #fff; white-space: nowrap;
}
.week-grid thead .time-heading { z-index: 5; }
.zone-offset { display: block; font-size: .73rem; }
.week-grid tbody .time-heading { z-index: 3; text-align: end; color: #454a51; font-size: .8rem; }
.week-grid td + td, .week-grid .week-day + .week-day { border-inline-start: 1px solid var(--line); }
.week-grid td { position: relative; background: #fff; }
.week-grid td.today { background: #f5f5f6; }
.event-card {
  position: absolute; z-index: 1; top: var(--event-offset, 0);
  inset-inline-start: calc(var(--event-left, 0%) + 2px); width: calc(var(--event-width, 100%) - 4px);
  height: var(--event-height, 32px); display: block; padding: .12rem .3rem; color: inherit; text-decoration: none;
}
.event-content { display: grid; align-content: center; height: 100%; font-size: .85rem; line-height: 1.1; }
.event-content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.month-grid th, .month-grid td { border: 1px solid var(--line); }
.month-grid th { height: 36px; font-size: .9rem; }
.month-grid td { height: 76px; vertical-align: top; padding: .2rem; }
.month-grid td.today { background: #f5f5f6; }
.month-date { display: block; margin: 0 .15rem .2rem; }
.month-date[aria-current] { color: var(--menu-ink); }
.month-grid .event-card { position: relative; inset: auto; width: auto; height: auto; padding: .25rem; }
.month-grid .event-card + .event-card { margin-top: .2rem; }
.calendar-editor td[data-day] { cursor: pointer; }
.editor-dialog {
  width: min(29rem, calc(100% - 1.25rem)); max-width: none;
  padding: 1rem 1.15rem; border: 0; border-radius: .8rem;
  color: inherit; background: #fff; box-shadow: 0 .8rem 2.5rem #20212430;
}
.editor-dialog::backdrop { background: transparent; }
.editor-dialog-heading {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem;
  cursor: grab; touch-action: none; user-select: none;
}
.editor-dialog-heading.dragging { cursor: grabbing; }
.editor-dialog-heading button { min-height: 34px; color: #454a51; }
.editor-dialog-heading h2 { font-size: 1.15rem; }
.activity-fields, .activity-pair { display: grid; gap: .55rem; }
.activity-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recurrence-fields { display: grid; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.recurrence-pattern { min-width: 0; margin: 0; padding: 0; border: 0; }
.recurrence-pattern legend { padding: 0; margin-bottom: .2rem; }
.weekday-choices { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.weekday-choice { cursor: pointer; }
.weekday-choice span {
  display: grid; place-items: center; min-height: 32px; border-radius: 999px;
  background: var(--field); font-size: .85rem;
}
.weekday-choice input { min-height: 0; }
.weekday-choice input:checked + span { background: var(--soft); color: var(--green); box-shadow: inset 0 0 0 1px currentColor; }
.weekday-choice input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.monthly-pattern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.monthly-pattern:has([data-monthly-weekday]:not([hidden])) {
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
}
.monthly-pattern [data-monthly-weekday] { display: contents; }
.monthly-pattern label { font-size: .9rem; }
.activity-fields label { gap: .2rem; }
.activity-fields input:not([type="checkbox"]), .activity-fields select {
  min-height: 34px; padding: .25rem .55rem;
}
.participants { min-width: 0; padding: 0; margin: 0; border: 0; }
.participants legend { padding: 0; }
.participants .participant-switch {
  display: inline-flex; align-items: center; min-height: 32px;
  margin-inline-end: .3rem; cursor: pointer;
}
.participant-switch input { min-height: 0; }
.participant-pill {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 28px; padding: .2rem .65rem;
  border-radius: 999px; background: var(--field);
}
.participant-state {
  display: inline-grid; place-items: center; width: 12px; height: 12px; color: var(--person-ink, var(--green));
}
.participant-state::before {
  content: ""; grid-area: 1 / 1; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.participant-state svg { grid-area: 1 / 1; visibility: hidden; }
.participant-switch input:checked + .participant-pill { background: var(--person-bg, var(--soft)); }
.participant-switch input:checked + .participant-pill .participant-state::before { visibility: hidden; }
.participant-switch input:checked + .participant-pill svg { visibility: visible; }
.participant-switch input:focus-visible + .participant-pill { outline: 2px solid var(--green); outline-offset: 2px; }
.participant-switch:has(input:disabled) { opacity: .65; cursor: default; }
.editor-error { color: #86271c; }
.editor-dialog .fields { gap: .45rem; margin-top: 0; }
.editor-dialog .task-edit-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-edit-fields > :is(.task-name-field, small, fieldset, .save-editor) { grid-column: 1 / -1; }
.editor-dialog :is(input:not([type="checkbox"]), select, button, summary) { min-height: 34px; padding-block: .2rem; }
.editor-dialog .save-editor { justify-self: end; border-radius: 999px; }
.editor-dialog .task-progress-editor { margin-top: .65rem; padding-top: .6rem; }
.editor-dialog .task-progress-editor h2 { font-size: .95rem; margin-bottom: .3rem; }
.editor-dialog .task-progress-editor form {
  display: flex; align-items: end; flex-wrap: wrap; gap: .35rem;
}
.progress-slider { display: flex; align-items: center; gap: .55rem; }
.progress-slider input[type="range"] {
  width: min(12rem, 48vw); min-height: 34px; padding: 0; background: transparent; accent-color: var(--green);
}
.progress-slider span { min-width: 3.5ch; font-variant-numeric: tabular-nums; }
.editor-dialog .delete-area { margin: .3rem 0 0; }
.editor-dialog .delete-area summary { padding-inline: 0; color: #9a2e25; }
.now-marker {
  position: absolute; z-index: 2; inset-inline: 0; top: var(--now-offset);
  height: 2px; background: #666a70; pointer-events: none;
}
.now-marker::before {
  content: ""; position: absolute; inset-inline-start: 0; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: inherit;
}
.muted, .empty, small { color: #4d5b53; }
.empty { padding-block: .4rem; }
.form-panel { max-width: 38rem; margin: 0 auto 1rem; }
.fields { display: grid; gap: .85rem; margin-top: 1rem; }
label { display: grid; gap: .25rem; min-width: 0; }
input, select {
  background: var(--field); color: #202b25; border: 0; border-radius: .35rem;
  min-height: 48px; min-width: 0; width: 100%; padding: .48rem .65rem;
}
.notice {
  background: var(--soft); border-radius: .45rem; padding: .7rem;
  margin-block: 0 .8rem;
}
.notice.error { background: #fdebe7; color: #86271c; }
.form-panel .notice, .delete-area { margin-top: 1rem; }
.notice button, details button { margin-block: .45rem; }
.form-panel h2 { margin-bottom: .75rem; }
@media (max-width: 50rem) {
  .plan-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin-bottom: .6rem; }
  .plan-tabs a { min-height: 38px; text-align: center; text-decoration: none; }
  .plan-tabs [aria-current] { background: var(--menu-selected); color: var(--menu-ink); }
  .board { grid-template-columns: minmax(0, 1fr); }
  .board::before { display: none; }
  .calendar-pane { grid-column: 1; }
  .board[data-tab="tasks"] #activities, .board[data-tab="calendar"] #tasks { display: none; }
  .week-grid { min-width: 43rem; }
}
@media (max-width: 26rem) {
  .wrap { width: calc(100% - 1rem); }
  .bar nav { gap: .15rem; }
  .bar nav a, .bar nav button { padding-inline: .4rem; }
}
@media (max-width: 30rem) {
  .brand span { display: none; }
  .search-pill input[type="search"] { font-size: 16px; }
  .month-grid td { height: 58px; padding: .12rem; }
  .month-grid .event-card { padding-inline: .15rem; }
}
@media (max-height: 440px) {
  .editor-dialog { padding: .55rem; }
  .editor-dialog-heading { margin-bottom: .3rem; }
  .editor-dialog .fields { gap: .25rem; }
  .editor-dialog :is(input:not([type="checkbox"]), select, button, summary) { min-height: 29px; }
  .editor-dialog .participant-switch { min-height: 26px; }
}