.overview-body{max-width:1000px;margin-inline:auto;padding-top:34px}
.overview-body{position:relative}
.overview-pull-enabled{overscroll-behavior-y:contain}
.overview-pull-indicator{position:absolute;z-index:30;left:50%;top:0;transform:translate(-50%,var(--pull-distance,0px));display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:9px 14px;border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--muted);box-shadow:0 2px 8px #0002;font-size:13px;pointer-events:none;white-space:nowrap}
.overview-pull-indicator[hidden]{display:none}
.overview-pull-indicator .bi{display:inline-block}
.overview-pull-indicator[data-state="ready"] .bi{transform:rotate(180deg)}
.overview-pull-indicator[data-state="loading"] .bi{animation:overview-pull-spin .8s linear infinite}
.overview-pull-indicator[data-state="error"]{color:var(--error)}
@keyframes overview-pull-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.overview-pull-indicator[data-state="loading"] .bi{animation:none}}
.overview-appointment{display:flex;align-items:flex-start;gap:10px;padding:12px 8px;border-bottom:1px solid var(--line);font-size:14px}
.overview-appointment>i{color:var(--muted);margin-top:2px}
.appointment-time{min-width:88px;white-space:nowrap;font-size:13px;color:var(--muted)}
.appointment-content{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere;font-weight:400}
.appointment-location{font-size:12px;color:var(--muted)}
.calendar-load-error{grid-column:1/-1;font-size:13px;color:var(--muted)}
.overview-grid{grid-template-columns:minmax(0,1fr);row-gap:36px}
.overview-section[data-planning-section]{grid-column:1;grid-row:auto}
.overview-section:not([data-planning-section="radar"])>header>h2{font-size:20px}
.overview-config-trigger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;list-style:none;border-radius:6px;background:transparent;color:var(--ink);font-size:17px;cursor:pointer}
.overview-config-trigger::-webkit-details-marker{display:none}
.overview-config-trigger:hover{background:var(--hover);filter:none}
.overview-config-trigger[hidden],.overview-config-fallback[hidden]{display:none}
.overview-config-fallback{position:relative}
.overview-config-fallback>.overview-config-content{position:absolute;z-index:40;right:0;top:calc(100% + 8px);width:min(380px,calc(100vw - 32px));padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 4px 16px #0003}
.overview-config-dialog{width:min(380px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);overflow:auto}
.overview-config-dialog::backdrop{background:#0006}
.overview-config-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.overview-config-dialog h2{font-size:17px;margin:0}
.overview-config-dialog>header button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;color:var(--ink)}
.overview-config-content form>label,.overview-config-type legend{display:block;font-size:13px;font-weight:500;margin:18px 0 8px;color:var(--ink)}
.overview-config-type{min-width:0;margin:0;padding:0;border:0}
.overview-config-type legend{margin-top:0}
.overview-config-content .overview-scope-switch{width:100%}
.overview-config-content select{width:100%}
.overview-config-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px}
@media(max-width:600px){
    .overview-config-trigger,.overview-config-dialog>header button{width:44px;height:44px}
    .overview-config-dialog{padding:16px}
    .overview-config-content select,.overview-config-actions button{min-height:44px}
    .overview-config-content select{font-size:16px}
}
.overview-scope-switch input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.overview-scope-switch{position:relative;display:flex;align-items:stretch;width:264px;max-width:100%;min-width:0;margin:0;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--subtle)}
.overview-scope-highlight{position:absolute;left:3px;top:3px;bottom:3px;width:calc((100% - 6px)/3);border-radius:5px;background:var(--panel);box-shadow:0 1px 3px #0002;pointer-events:none;transform:translateX(200%);transition:transform .18s ease}
.overview-scope-switch:has(input[value="todo"]:checked) .overview-scope-highlight{transform:translateX(0)}
.overview-scope-switch:has(input[value="project"]:checked) .overview-scope-highlight{transform:translateX(100%)}
.overview-scope-switch>label{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:34px;padding:6px 8px;border-radius:5px;font-size:13px;cursor:pointer;color:var(--muted)}
.overview-scope-switch input:checked+span{color:var(--ink);font-weight:600}
.overview-scope-switch>label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* Keep popups and their ancestors fully opaque so fixed menus retain their normal stacking and contrast. */
.overview-section[data-planning-section="radar"]>header,
.overview-section[data-planning-section="radar"] .task-title-content,
.overview-section[data-planning-section="radar"] .task-badges,
.overview-section[data-planning-section="radar"] .empty-state{opacity:.75}
.overview-section[data-planning-section="radar"] .task-row{border-bottom-color:color-mix(in srgb,var(--line) 75%,transparent)}
@media(max-width:600px){
    .overview-scope-switch>label{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.overview-scope-highlight{transition:none}}
.overview-section .deadline-badge{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0;max-width:100%;padding:2px 5px;border:1px solid var(--line);border-radius:4px;background:var(--neutral);color:var(--muted);font-size:11px;font-weight:400;line-height:1.35;overflow-wrap:anywhere}
.overview-section .deadline-badge.is-deadline-day{color:var(--error);background:color-mix(in srgb,var(--error) 12%,var(--panel));border-color:color-mix(in srgb,var(--error) 45%,var(--line))}
.overview-section .deadline-badge .bi{flex-shrink:0}
.overview-section .deadline-badge time{min-width:0;overflow-wrap:anywhere}
/* Each day keeps its heading and count visible while its task list is folded. */
.overview-section>header{gap:12px}
.overview-section>header>h2{flex:1;min-width:0;margin:0}
.overview-section-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:4px 0;border-radius:4px;background:transparent;color:var(--ink);font:inherit;font-weight:inherit;text-align:left}
.overview-section-toggle:hover{filter:none}
.overview-section-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.overview-section-toggle:disabled{cursor:default;opacity:1}
.overview-section-toggle>.bi{flex-shrink:0;font-size:12px;color:var(--muted)}
.overview-section-toggle>.bi[hidden],.overview-section [data-overview-section-body][hidden],.overview-section [data-overview-hours][hidden]{display:none}
.overview-section-toggle .overview-heading{min-width:0}
.overview-section>header>.overview-summary{flex-shrink:0}
@media(max-width:600px){.overview-section-toggle{min-height:44px}.overview-section:not([data-planning-section="radar"])>header>h2{font-size:24px}}
.overview-section.is-overview-drop-target{outline:2px dashed var(--accent);outline-offset:8px;border-radius:4px}
.overview-section .is-overview-dragging .task-title-content,.overview-section .is-overview-saving-row .task-title-content{opacity:.5}
.overview-grid.is-overview-saving{cursor:progress}
.overview-move-error{grid-column:1/-1;margin:0;color:var(--error)}
.overview-move-error[hidden]{display:none}
.overview-drag-preview{position:fixed;left:-10000px;top:0;z-index:10000;display:flex;flex-direction:column;gap:10px;max-width:560px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);box-shadow:0 6px 20px #0003;pointer-events:none}
.overview-pointer-dragging,.overview-pointer-dragging *{cursor:grabbing!important;user-select:none}
.overview-drag-preview .task-title-content{min-width:0}
.overview-drag-preview .task-badges{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
/* Metadata stays with its title at every viewport width. */
.overview-section .compact-task-row .task-secondary .heading-type-badge{display:inline-flex}
.overview-section .compact-task-row .task-badges{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:nowrap;max-width:none;margin-left:0;padding-top:0}
.overview-section .compact-task-row .mobile-type-badge{display:none}
.overview-section .task-secondary .category-badge{max-width:100%}
.overview-section .task-secondary .task-context{flex-basis:100%}
.overview-section .compact-task-row .task-check .bi-circle{display:inline-block;width:18px;height:18px;border:2px solid currentColor;border-radius:50%;font-size:0}
.overview-section .compact-task-row .task-check .bi-circle::before{content:none}
.overview-section article[data-overview-draggable]{-webkit-touch-callout:none}
.overview-section .is-overview-held{user-select:none;-webkit-user-select:none}
.overview-config-content form>label.overview-location-choice{display:flex;align-items:center;gap:8px;min-height:36px}
.overview-config-content form>label.overview-location-choice[hidden]{display:none}
.overview-location-choice input{width:18px;height:18px;margin:0}
.overview-grid[data-hide-calendar-location] .appointment-location{display:none}

@media(max-width:900px){
    .overview-section .compact-task-row{grid-template-columns:minmax(0,1fr) auto 44px}
    .overview-section .compact-task-row .task-badges{grid-column:2;grid-row:1;order:0;align-self:start;padding-top:12px}
    .overview-section .compact-task-row .compact-actions{grid-column:3;grid-row:1}
}