@import './forever-canvas-cards.css';
@import './forever-canvas-menu.css';
@import './forever-canvas-editor.css';
@import './theme-picture-contrast.css';
@import './planner-card-backgrounds.css';
@import './premium-menus.css';
@import './premium-space.css';
@import './planner-theme-motion.css';
@import './task-preference-motion.css';

:root {
    --planner-topbar: 76px;
    --planner-frame-radius: 0px;
    --planner-backdrop:var(--paper);
    --planner-font: var(--yako-font);
    --planner-heading: var(--yako-font);
    --ink-soft:var(--ink);
    --ink-faint:var(--ink);
    --muted:var(--ink);
    --focus: var(--ink-soft,var(--muted,#66685f));
    --task-complete:#278653;
    /* Premium is deep space in YakoPlan's black and orange (premium-space.css).
       The historic names stay: "peach" is the orange accent, "lilac"/"gold"
       are warm highlights, "pink" is ember red and "blue" deep ember. */
    --premium-card-a:#070506;
    --premium-card-b:#241008;
    --premium-card-text:#fff8f2;
    --premium-card-muted:#eadbd0;
    --premium-card-border:#ff8a3d;
    --premium-card-shadow:rgba(0,0,0,.45);
    --premium-rose:#ffb07a;
    --premium-glow-peach:#ff8a3d;
    --premium-glow-pink:#ff6a3d;
    --premium-glow-mint:#68dfcd;
    --premium-glow-lilac:#ffc28c;
    --premium-glow-gold:#ffd08a;
    --premium-glow-blue:#3b1a0c;
}

html[data-theme="light"] { color-scheme: only light; }
html[data-theme="system"] { color-scheme: light; }
html[data-theme="dark"], html[data-theme="sakura"], html[data-theme="premium"] {
    color-scheme: dark;
    --phone-section-heading:#fff;
    --paper:#1c1c1c;
    --paper-deep:#232323;
    --surface:#262626;
    --surface-raised:#303030;
    --surface-muted:#303030;
    --ink:#ffffff;
    --ink-soft:#ffffff;
    --muted:#ffffff;
    --line:#3d3d3d;
    --accent:#e58768;
    --accent-deep:#f2a286;
    --accent-soft:#4a2e26;
    --sage:#9fb3a0;
    --task-complete:#36a66b;
    --board-blue-ink:#8bb7ff;
    --danger:#ff9b92;
    --shadow:0 28px 70px rgba(0,0,0,.28);
}
html[data-accent="sage"] { --accent:#55745b; --accent-deep:#37543d; --accent-soft:#dce7dc; }
html[data-accent="harbor"] { --accent:#5272a1; --accent-deep:#35557f; --accent-soft:#dce5f2; }
html[data-accent="iris"] { --accent:#8b5f98; --accent-deep:#6a4376; --accent-soft:#eadfee; }
html[data-theme="dark"][data-accent="sage"] { --accent:#91ae96; --accent-deep:#b4cbb8; --accent-soft:#2c3d30; }
html[data-theme="dark"][data-accent="harbor"] { --accent:#91add3; --accent-deep:#b4c9e5; --accent-soft:#29394f; }
html[data-theme="dark"][data-accent="iris"] { --accent:#c0a0cb; --accent-deep:#d8bce0; --accent-soft:#413047; }

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --phone-section-heading:#fff;
        --paper:#1c1c1c;
        --paper-deep:#232323;
        --surface:#262626;
        --surface-raised:#303030;
        --surface-muted:#303030;
        --surface-hover:#3d3d3d;
        --ink:#ffffff;
        --ink-soft:#ffffff;
        --muted:#ffffff;
        --line:#3d3d3d;
        --accent:#e58768;
        --accent-deep:#f2a286;
        --accent-soft:#4a2e26;
        --sage:#9fb3a0;
        --task-complete:#36a66b;
        --board-blue-ink:#8bb7ff;
        --danger:#ff9b92;
        --shadow:0 28px 70px rgba(0,0,0,.28);
    }
    html[data-theme="system"][data-accent="sage"] { --accent:#91ae96; --accent-deep:#b4cbb8; --accent-soft:#2c3d30; }
    html[data-theme="system"][data-accent="harbor"] { --accent:#91add3; --accent-deep:#b4c9e5; --accent-soft:#29394f; }
    html[data-theme="system"][data-accent="iris"] { --accent:#c0a0cb; --accent-deep:#d8bce0; --accent-soft:#413047; }
}

/* YakoGaku's Sakura palette is a complete dark appearance. Keep this after
   accent choices so the saved accent can return when Sakura is switched off. */
:root[data-theme="sakura"] {
    color-scheme:dark;
    --paper:#19141c;
    --paper-deep:#231b27;
    --surface:#231b27;
    --surface-raised:#302335;
    --surface-muted:#302335;
    --surface-hover:#3d2b43;
    --ink:#ffffff;
    --ink-soft:var(--ink);
    --muted:var(--ink);
    --line:#4b3652;
    --accent:#d9739e;
    --accent-hover:#c75e8a;
    --accent-deep:#f0a6c4;
    --accent-strong:#f0a6c4;
    --accent-soft:rgba(217,115,158,.14);
    --accent-glow:rgba(217,115,158,.28);
    --focus:#f0a6c4;
    --shadow:0 28px 70px rgba(0,0,0,.28);
    --premium-card-a:#231b27;
    --premium-card-b:#302335;
    --premium-card-text:#ededf0;
    --premium-card-muted:#f0a6c4;
    --premium-card-border:#d9739e;
    --premium-rose:#f0a6c4;
    --premium-glow-peach:#d9739e;
    --premium-glow-pink:#f0a6c4;
    --premium-glow-lilac:#c75e8a;
    --premium-glow-blue:#4b3652;
}

/* Theme overrides end each selector in its subject class so the style engine
   files it under that class; a subject :is() list is tested against every
   element on each restyle. Where list members differ in specificity, the
   original :is() stays behind a zero-specificity :where() subject class. */
html[data-theme="sakura"] .avatar, html[data-theme="sakura"] .topbar-avatar,
html[data-theme="sakura"] .settings-picture-preview, html[data-theme="sakura"] .auth-primary,
html[data-theme="sakura"] .month-cell.today .month-date-mobile > span:first-child { color:#19141c; }

:root[data-theme="sakura"] .month-cell .inline-task-entry .inline-add:not(:disabled),
:root[data-theme="sakura"] :where(.month-add):is(.month-cell .inline-task-entry .inline-add, .month-add):not(:disabled),
:root[data-theme="sakura"] .search-box input::placeholder { opacity:1; }

/* The Premium theme puts the planner in the same still deep space as the main
   menu (premium-space.css). Warm near-black surfaces stay opaque so planner
   content reads the same over the dark sky and over the orange planet. */
:root[data-theme="premium"] {
    /* Shown before the space atmosphere mounts. */
    --planner-backdrop:linear-gradient(135deg,#000 0%,#050304 55%,#241008 85%,#6b2508 100%);
    color-scheme:dark;
    --paper:#0b0909;
    --paper-deep:#1b1515;
    --surface:#141011;
    --surface-raised:#211a1a;
    --surface-muted:#231b1b;
    --surface-hover:#2e2424;
    --ink:#ffffff;
    --ink-soft:var(--ink);
    --ink-faint:var(--ink);
    --muted:var(--ink-soft);
    --line:rgba(255,255,255,.15);
    --line-strong:rgba(255,255,255,.3);
    --border:var(--line);
    --canvas:#0b0909;
    --panel:#171213;
    --accent:var(--premium-glow-peach);
    --accent-hover:#ffa466;
    --accent-deep:#ffc49a;
    --accent-strong:var(--accent-deep);
    --accent-soft:rgba(255,138,61,.16);
    --accent-glow:rgba(255,138,61,.28);
    --focus:#ffb27a;
    --task-complete:var(--premium-glow-mint);
    --success:var(--premium-glow-mint);
    --sage:var(--premium-glow-mint);
    --board-blue-ink:#a2c5ff;
    --danger:#ffaaa1;
    --shadow:0 28px 70px rgba(0,0,0,.5);
}

html[data-theme="premium"] .avatar, html[data-theme="premium"] .topbar-avatar,
html[data-theme="premium"] .settings-picture-preview, html[data-theme="premium"] .auth-primary,
html[data-theme="premium"] .month-cell.today .month-date-mobile > span:first-child { color:#0b0909; }

:root[data-theme="custom"] {
    color-scheme:var(--custom-color-scheme,dark);
    --paper:var(--custom-background,#151a26);
    --paper-deep:color-mix(in srgb,var(--custom-surface,#20283b) 94%,var(--custom-text,#f4f2fa));
    --surface:var(--custom-surface,#20283b);
    --surface-raised:color-mix(in srgb,var(--surface) 92%,var(--custom-text,#f4f2fa));
    --surface-muted:color-mix(in srgb,var(--surface) 96%,var(--custom-text,#f4f2fa));
    --surface-hover:color-mix(in srgb,var(--surface) 90%,var(--custom-text,#f4f2fa));
    --ink:var(--custom-text,#f4f2fa);
    --ink-soft:var(--ink);
    --ink-faint:var(--ink-soft);
    --muted:var(--ink-soft);
    --line:var(--custom-border,#48536a);
    --line-strong:color-mix(in srgb,var(--line) 75%,var(--ink));
    --border:var(--line);
    --canvas:var(--paper);
    --panel:var(--surface);
    --accent:var(--custom-accent,#b9a5ff);
    --accent-deep:color-mix(in srgb,var(--accent) 75%,var(--ink));
    --accent-strong:var(--accent-deep);
    --accent-hover:var(--accent-deep);
    --accent-soft:color-mix(in srgb,var(--accent) 15%,var(--surface));
    --accent-glow:color-mix(in srgb,var(--accent) 28%,transparent);
    --focus:var(--accent);
    --task-complete:var(--custom-success,#80cda8);
    --success:var(--task-complete);
    --sage:var(--task-complete);
    --danger:var(--custom-danger,#ff9da8);
    --board-blue-ink:var(--accent);
    --planner-font:var(--custom-font,var(--yako-font));
    --planner-heading:var(--planner-font);
    --shadow:0 28px 70px color-mix(in srgb,var(--paper) 50%,transparent);
    --premium-card-a:var(--surface);
    --premium-card-b:var(--custom-background-secondary,#29213d);
    --premium-card-text:var(--ink);
    --premium-card-muted:var(--ink-soft);
    --premium-card-border:var(--accent);
    --premium-glow-peach:var(--accent);
    --premium-glow-pink:var(--custom-danger,#ff9da8);
    --premium-glow-lilac:var(--accent);
    --premium-glow-mint:var(--success);
    --premium-glow-blue:var(--custom-background-secondary,#29213d);
}

/* Restore the complete saved backdrop before the interactive atmosphere mounts. */
:root[data-theme="custom"][data-custom-background="gradient"] {
    --planner-backdrop:linear-gradient(135deg,var(--custom-background,#151a26),var(--custom-background-secondary,#29213d));
}
:root[data-theme="custom"][data-custom-background="aurora"] {
    --planner-backdrop:radial-gradient(ellipse at 15% 10%,color-mix(in srgb,var(--custom-accent,#b9a5ff) 24%,transparent),transparent 65%),linear-gradient(135deg,var(--custom-background,#151a26),var(--custom-background-secondary,#29213d));
}

html[data-theme="custom"] .avatar,html[data-theme="custom"] .topbar-avatar,html[data-theme="custom"] .settings-picture-preview,html[data-theme="custom"] .auth-primary,
html[data-theme="custom"] .month-cell.today .month-date-mobile > span:first-child { color:var(--custom-accent-ink,#000); }
html[data-theme="custom"] .primary-button,html[data-theme="custom"] .accent-button { background:var(--accent); color:var(--custom-accent-ink,#000); }
html[data-theme="custom"] .planner-popup-dialog,html[data-theme="custom"] .task-details-dialog,html[data-theme="custom"] .note-dialog,html[data-theme="custom"] .event-dialog,
html[data-theme="custom"] .plan-dialog,html[data-theme="custom"] .quick-add-dialog { border-radius:var(--custom-radius,16px); }
html[data-theme="custom"] .secondary-button,html[data-theme="custom"] .primary-button,html[data-theme="custom"] .settings-input,html[data-theme="custom"] .search-box,html[data-theme="custom"] .profile-nav-link,
html[data-theme="custom"] .profile-premium-entry,html[data-theme="custom"] .notification-popover,html[data-theme="custom"] .task-menu,html[data-theme="custom"] .planner-select-menu { border-radius:var(--custom-radius,16px); }
html[data-theme="custom"] .topbar-actions > button,
html[data-theme="custom"] :where(.view-options-toggle):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block),
html[data-theme="custom"] :where(.quick-add-input):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block),
html[data-theme="custom"] :where(.planner-event):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block),
html[data-theme="custom"] :where(.month-event):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block),
html[data-theme="custom"] :where(.timeline-block):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block) { border-radius:min(var(--custom-radius,16px),8px); }

.planner-shell { min-height:100dvh; padding-inline:env(safe-area-inset-left) env(safe-area-inset-right); display:grid; grid-template-columns:minmax(0,1fr); background:var(--planner-backdrop,var(--paper,#f7f5ef)); color:var(--ink,#262823); font-family:var(--planner-font); font-size:1rem; font-weight:400; line-height:1.5; }
.planner-shell button, .planner-shell input, .planner-shell textarea, .planner-shell select { font:inherit; color:inherit; }
.planner-shell button, .planner-shell a { -webkit-tap-highlight-color:transparent; }
.planner-shell button { cursor:pointer; }
.planner-shell h1, .planner-shell h2, .planner-shell h3 { margin:0; line-height:1.15; }
.planner-shell h1, .planner-shell h2 { font-family:var(--planner-heading); font-weight:500; letter-spacing:-.025em; }
.planner-shell p { margin:0; }
.planner-shell .sr-only, .planner-popup-dialog .sr-only, .task-details-dialog .sr-only, .task-quick-settings .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
:where(.planner-shell, .planner-popup-dialog, .quick-add-overlay, .task-drawer, .task-details-dialog, .note-dialog, .event-dialog, .plan-dialog, .focus-mode) :focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:2px; }
:where(.planner-shell, .planner-popup-dialog, .quick-add-overlay, .task-drawer, .task-details-dialog, .note-dialog, .event-dialog, .plan-dialog, .focus-mode) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select, [contenteditable="true"]):focus-visible { outline:0; border-color:var(--focus,#66685f); }
:where(.planner-shell, .planner-popup-dialog, .quick-add-overlay, .task-drawer, .task-details-dialog, .note-dialog, .event-dialog, .plan-dialog, .focus-mode) :focus:not(:focus-visible), :where([role="dialog"][tabindex="-1"]):focus { outline:0; }
:where(.planner-shell, .planner-popup-dialog) [data-modal-return-focus-quiet]:focus { outline:0; }
.planner-popup-dialog :where(button, input, textarea, select) { font-family:var(--planner-font); }
.planner-popup-dialog, .planner-popup-dialog * { box-sizing:border-box; }
.planner-popup-dialog button { cursor:pointer; }
.planner-popup-dialog p { margin:0; }
.planner-popup-dialog :where(h1, h2, h3) { margin:0; font-family:var(--planner-heading); }
.planner-popup-dialog .settings-nav, .planner-popup-dialog .settings-mobile-nav { top:0; }
.planner-shell [aria-invalid="true"], .quick-add-overlay [aria-invalid="true"], .task-drawer [aria-invalid="true"], .task-details-dialog [aria-invalid="true"] { border-width:2px; border-style:dashed; border-color:var(--danger,#a33a34); }
.planner-shell kbd, .profile-menu kbd { padding:2px 5px; border:1px solid var(--line,#dcd8ce); border-bottom-width:2px; border-radius:4px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font:600 .66rem/1.2 var(--planner-font); }
.week-task-paste-menu { position:fixed; z-index:110; min-width:180px; max-width:calc(100vw - 16px); padding:5px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface,#fffdf8); color:var(--ink,#262823); box-shadow:0 10px 30px rgba(20,18,15,.2); font:inherit; transform-origin:top left; animation:week-task-paste-enter 220ms cubic-bezier(.22,.8,.25,1); }
.week-task-paste-item { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:6px; background:transparent; color:inherit; font:inherit; text-align:start; cursor:pointer; }
.week-task-paste-item:hover:where(:not([data-touch-input] *)), .week-task-paste-item:focus-visible { background:var(--paper-deep,#eeebe2); }
.week-task-paste-item:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:-2px; }
.week-task-paste-shortcut { color:var(--ink-soft,#66685f); font:600 .75rem/1.2 var(--planner-font); white-space:nowrap; }
.week-task-paste-menu[data-closing] { pointer-events:none; animation:week-task-paste-exit 140ms ease-in forwards; }
@keyframes week-task-paste-enter { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
@keyframes week-task-paste-exit { to { opacity:0; transform:scale(.97); } }
@media (prefers-reduced-motion:reduce), (forced-colors:active) { .week-task-paste-menu, .week-task-paste-menu[data-closing] { animation:none; } }
@media (forced-colors:active) { .week-task-paste-menu { background:Canvas; color:CanvasText; border-color:CanvasText; } .week-task-paste-item:focus-visible { outline-color:Highlight; } }
@media print { .week-task-paste-menu { display:none; } }

.planner-brand { min-height:46px; margin:0 8px 17px; display:flex; align-items:center; gap:10px; color:var(--ink,#262823); font-weight:700; letter-spacing:-.025em; text-decoration:none; }
.planner-brand .brand-mark { flex:0 0 27px; }
.avatar, .topbar-avatar { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; overflow:hidden; border-radius:50%; background:var(--accent,#c76345); color:#fff; font-weight:700; }
.avatar { width:34px; height:34px; font-size:.75rem; }
/* Align the font's visible capital with the center of the avatar. */
.profile-avatar-initial { display:block; font-family:var(--planner-font); font-size:inherit; font-weight:700; line-height:1; letter-spacing:0; text-align:center; transform:translateY(-1px); }
.profile-picture { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; object-position:center; border-radius:inherit; }
.avatar:has(> .profile-picture), .topbar-avatar:has(> .profile-picture) { background:transparent; }

.planner-main { position:relative; min-width:0; min-height:100dvh; }
.planner-topbar { position:sticky; top:calc(env(safe-area-inset-top) + var(--planner-topbar-viewport-top,0px)); z-index:25; min-height:var(--planner-topbar); padding:11px 22px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; border-bottom:1px solid var(--line,#dcd8ce); background:transparent; }
.planner-shell[data-view] > .planner-main > .planner-topbar { border-top-left-radius:var(--planner-frame-radius); border-top-right-radius:var(--planner-frame-radius); }
.topbar-navigation { min-width:0; display:flex; align-items:center; gap:14px; }
.planner-home-link { flex:none; min-height:40px; display:inline-flex; align-items:center; gap:8px; color:var(--ink,#262823); font-size:.94rem; font-weight:700; letter-spacing:-.025em; text-decoration:none; transition:color 140ms ease,transform 140ms ease; }
.planner-home-logo { position:relative; flex:none; width:40px; height:40px; overflow:visible; border-radius:10px; }
.planner-home-logo img { position:absolute; top:50%; left:50%; width:60px; max-width:none; height:60px; display:block; object-fit:cover; transform:translate(-50%,-50%); }
.planner-home-label { min-width:0; }
.planner-home-link:hover:where(:not([data-touch-input] *)) { color:var(--accent-deep,#9f422b); }
.planner-home-link:active { transform:scale(.98); }
.topbar-actions { display:flex; align-items:center; gap:7px; }
.topbar-actions > button, .notification-trigger, .view-controls button, .view-options-toggle, .quiet-button { min-height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font-size:.78rem; }
.topbar-actions > button:hover:where(:not([data-touch-input] *)), .notification-trigger:hover:where(:not([data-touch-input] *)), .view-controls button:hover:where(:not([data-touch-input] *)), .view-options-toggle:hover:where(:not([data-touch-input] *)), .quiet-button:hover:where(:not([data-touch-input] *)) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 65%,var(--line,#dcd8ce)); color:var(--ink,#262823); }
.range-title { min-width:0; display:grid; gap:4px; text-align:center; }
.period-title-phone { display:none; }
.range-title h1 { font-size:clamp(1.2rem,1.9vw,1.8rem); font-weight:700; line-height:1.2; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:anywhere; }
.range-title > span { color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.35; }
/* The period title briefly identifies a return to the current week or month. */
.range-title[data-today-return] { --today-return-orange:light-dark(#ad5b24,#ffb07a); }
.range-title[data-today-return] h1 { animation:today-return-a 3.6s ease-in-out; }
.range-title[data-today-return="b"] h1 { animation-name:today-return-b; }
.range-title[data-today-return] .week-picker-trigger > svg { color:inherit; }
@keyframes today-return-a { 0%,68% { color:var(--today-return-orange); } 100% { color:var(--ink,#262823); } }
@keyframes today-return-b { 0%,68% { color:var(--today-return-orange); } 100% { color:var(--ink,#262823); } }
@media (prefers-reduced-motion:reduce) {
    .range-title[data-today-return] h1 { animation:today-return-still-a 3s step-end; animation-duration:3s!important; }
    .range-title[data-today-return="b"] h1 { animation-name:today-return-still-b; }
    @keyframes today-return-still-a { from { color:var(--today-return-orange); } to { color:var(--ink,#262823); } }
    @keyframes today-return-still-b { from { color:var(--today-return-orange); } to { color:var(--ink,#262823); } }
}
@media (forced-colors:active), print { .range-title[data-today-return] h1 { animation:none!important; } }
/* Keep the tighter header density specific to Week. */
.planner-shell[data-view="week"] { --planner-topbar:56px; }
.planner-shell[data-view="week"] .planner-topbar { min-height:var(--planner-topbar); padding:4px 8px; }
.planner-shell[data-view="week"] .range-title h1 { font-size:clamp(1.2rem,1.6vw,1.5rem); }
.topbar-actions { justify-content:flex-end; }
.topbar-actions kbd { margin-left:2px; }
.topbar-avatar, .profile-navigation .topbar-avatar { width:44px; height:44px; padding:0; border:0; color:#fff; font-size:1rem; }
.profile-navigation { position:relative; flex:none; }
.planner-topbar:has(.profile-menu), .planner-topbar:has(.notification-popover) { z-index:100; }
.profile-menu-trigger { position:relative; overflow:visible; transition:box-shadow 160ms ease, transform 160ms ease; }
.profile-notification-badge, .profile-menu-link .profile-notification-count, .notification-popover-count { box-sizing:border-box; display:flex; flex:none; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 4px; border:2px solid var(--surface,#fffdf8); border-radius:999px; background:#f3a091; color:#302128; font:700 10px/1 var(--planner-font); font-variant-numeric:tabular-nums; letter-spacing:0; }
.profile-notification-badge { position:absolute; right:-3px; bottom:-3px; z-index:1; pointer-events:none; }
@media (forced-colors:active) { .profile-notification-badge, .profile-menu-link .profile-notification-count, .notification-popover-count { background:Highlight; color:HighlightText; border-color:Canvas; } }
.profile-menu-trigger .notification-dot { top:0; right:0; margin:0; }
.profile-menu-trigger:hover:where(:not([data-touch-input] *)), .profile-menu-trigger[aria-expanded="true"] { box-shadow:0 0 0 3px var(--accent-soft,#f1d9cf); }
.profile-menu-trigger:active { transform:scale(.95); }
.profile-menu { position:absolute; z-index:80; top:calc(100% + 12px); right:0; width:min(336px,calc(100vw - 24px)); max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:10px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line,#dcd8ce); border-radius:18px; background:var(--surface,#fffdf8); box-shadow:0 20px 60px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.08); color:var(--ink,#262823); font-size:.83rem; text-align:left; transform-origin:top right; animation:profile-menu-enter 180ms cubic-bezier(.2,.8,.2,1); }
.profile-menu nav { display:grid; gap:8px; }
.profile-menu-identity { min-height:70px; padding:7px 9px; display:flex; align-items:center; gap:11px; border-radius:12px; background:color-mix(in srgb,var(--paper-deep,#eeebe2) 68%,transparent); }
.profile-menu-identity > span:not(.avatar), .profile-menu-identity > div { display:grid; min-width:0; gap:2px; }
.profile-menu-identity strong { overflow-wrap:anywhere; font-size:.9rem; }
.profile-menu-identity small { color:var(--ink-soft,#66685f); font-size:.73rem; }
.profile-menu-identity .avatar { flex:none; width:56px; height:56px; font-size:1.25rem; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft,#f1d9cf) 76%,transparent); }
.profile-menu-identity .avatar:has(> .profile-picture) { box-shadow:none; }
.profile-nav-group { display:grid; gap:3px; padding:5px; border:1px solid color-mix(in srgb,var(--line,#dcd8ce) 84%,transparent); border-radius:14px; background:color-mix(in srgb,var(--paper-deep,#eeebe2) 34%,var(--surface,#fffdf8)); }
.profile-nav-primary, .profile-nav-calendars, .profile-nav-utilities { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-nav-calendars .profile-calendars-link { grid-column:1 / -1; }
.profile-nav-primary .profile-wrap-toggle { grid-column:2; }
@media (max-width:700px) {
    .profile-nav-primary .profile-search-link { grid-column:1 / -1; }
}
.profile-menu :is(.profile-completed-toggle,.profile-wrap-toggle) { display:flex; }
.profile-menu :is(.profile-completed-toggle,.profile-wrap-toggle) input { flex:none; width:22px; height:22px; margin:0; accent-color:var(--accent,#c76345); cursor:pointer; }
.task-display-controls { display:grid; gap:2px; }
@media (max-width:800px) {
    .profile-nav-primary .profile-search-link kbd { display:none; }
    .planner-topbar .completed-toggle { display:none; }
}
.profile-menu-link, .profile-menu button:not(.profile-menu-trigger,.profile-premium-menu-effects), .profile-menu summary { width:100%; min-height:38px; padding:4px 7px; display:flex; align-items:center; gap:9px; border:0; border-radius:10px; background:transparent; color:var(--ink-soft,#66685f); font:inherit; text-align:left; text-decoration:none; cursor:pointer; transition:background-color 140ms ease,color 140ms ease,transform 140ms ease; }
.profile-navigation .profile-nav-section { display:grid; gap:7px; padding:10px 0 0; border:0; border-top:1px solid color-mix(in srgb,var(--line,#dcd8ce) 88%,transparent); border-radius:0; background:transparent; }
.profile-navigation .profile-menu-link:not(.profile-premium-card), .profile-navigation .profile-menu button:not(.profile-menu-trigger,.profile-premium-menu-effects), .profile-navigation .profile-menu summary { border:1px solid color-mix(in srgb,var(--line,#dcd8ce) 84%,transparent); border-radius:11px; background:color-mix(in srgb,var(--paper-deep,#eeebe2) 34%,var(--surface,#fffdf8)); box-shadow:0 1px 2px rgba(24,22,18,.04); transition:background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease,color 140ms ease,transform 140ms ease; }
.profile-menu-link > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.profile-menu-link .icon, .profile-menu button .icon { flex:none; }
.profile-nav-group .profile-menu-link > .icon, .profile-menu-account > .profile-menu-link > .icon { box-sizing:content-box; width:18px; height:18px; padding:6px; border-radius:9px; background:color-mix(in srgb,var(--line,#dcd8ce) 42%,transparent); color:var(--ink-soft,#66685f); transition:background-color 140ms ease,color 140ms ease; }
.profile-menu-link:not(.profile-premium-card):hover:where(:not([data-touch-input] *)), .profile-menu button:where(:not(.profile-premium-menu-effects)):hover:where(:not([data-touch-input] *)), .profile-menu summary:hover:where(:not([data-touch-input] *)) { background:color-mix(in srgb,var(--paper-deep,#eeebe2) 82%,var(--surface,#fffdf8)); color:var(--ink,#262823); }
.profile-navigation .profile-menu-link:not(.profile-premium-card):hover:where(:not([data-touch-input] *)), .profile-navigation .profile-menu button:where(:not(.profile-premium-menu-effects)):hover:where(:not([data-touch-input] *)), .profile-navigation .profile-menu summary:hover:where(:not([data-touch-input] *)) { border-color:color-mix(in srgb,var(--line,#dcd8ce) 58%,var(--ink-soft,#66685f)); box-shadow:0 3px 10px rgba(24,22,18,.06); }
.profile-menu-link:not(.profile-premium-card).active { background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 52%,var(--surface,#fffdf8)); box-shadow:none; color:var(--ink,#262823); font-weight:700; }
.profile-navigation .profile-menu-link:not(.profile-premium-card).active { border-color:color-mix(in srgb,var(--accent,#c76345) 42%,var(--line,#dcd8ce)); }
.profile-menu-link:not(.profile-premium-card).active > .icon { background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.profile-menu-link small { min-width:22px; padding:1px 6px; border-radius:999px; background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); text-align:center; font-size:.7rem; }
/* The card is painted by premium-space.css: the same still deep space as the Premium menu. */
.profile-premium-card { position:relative; isolation:isolate; min-height:132px; padding:8px 10px; display:grid; grid-template-columns:108px minmax(0,1fr) 24px; align-items:center; gap:8px; overflow:hidden; border:1px solid transparent; border-radius:19px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px var(--premium-card-shadow); color:var(--premium-card-text); }
.profile-premium-card:focus-visible { outline:2px solid var(--premium-card-text); outline-offset:-4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 3px color-mix(in srgb,var(--premium-glow-peach) 30%,transparent),0 12px 30px var(--premium-card-shadow); color:var(--premium-card-text); }
.profile-premium-card.active { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--premium-glow-peach) 45%,transparent),0 12px 30px var(--premium-card-shadow); }
.profile-premium-card > span { flex:none; }
.profile-premium-card > :where(.profile-premium-art,.profile-premium-copy,.profile-premium-arrow) { position:relative; z-index:3; }
/* The fox rests in a warm, still halo of planet light. */
.profile-premium-art { grid-column:1; grid-row:1; position:relative; isolation:isolate; width:108px; height:116px; display:grid; place-items:center; justify-self:center; }
.profile-premium-art::before { content:""; position:absolute; z-index:0; top:10px; left:5px; width:98px; height:98px; border-radius:50%; background:radial-gradient(circle,rgb(255 150 70 / .42) 0,rgb(255 110 40 / .2) 42%,rgb(255 110 40 / .06) 62%,transparent 71%); pointer-events:none; }
.profile-premium-fox { position:relative; z-index:2; height:116px; aspect-ratio:1; display:block; filter:drop-shadow(0 5px 6px rgba(0,0,0,.5)); }
.profile-premium-fox > img { display:block; width:100%; height:100%; object-fit:contain; }
.profile-premium-copy { grid-column:2; grid-row:1; min-width:0; display:grid; align-content:center; gap:5px; }
.profile-premium-copy strong { color:var(--premium-card-text); font-size:1.03rem; line-height:1.2; letter-spacing:-.012em; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.profile-premium-copy small { min-width:0; padding:0; overflow-wrap:anywhere; border-radius:0; background:transparent; color:var(--premium-card-muted); font-size:.72rem; font-weight:400; line-height:1.42; text-align:left; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.profile-premium-arrow { box-sizing:content-box; grid-column:3; grid-row:1; width:18px; height:18px; padding:3px; align-self:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(10,7,7,.6); color:var(--premium-card-text); filter:none; transition:background-color 160ms ease,transform 160ms ease; }
.profile-premium-card:focus-visible .profile-premium-arrow { transform:translateX(2px); }
/* A link cannot contain a button, so the Premium menu effects toggle is the card's sibling, laid
   over its lower edge. The shell mirrors the card's inset, fox column and gap in every layout,
   so the toggle's text starts where the description does. It reads as text until hovered. */
.profile-premium-card-shell { --premium-card-inset:11px; --premium-card-art:108px; --premium-card-gap:8px; position:relative; min-width:0; }
.profile-premium-card-shell[data-menu-effects-toggle] .profile-premium-copy { padding-bottom:24px; }
.profile-premium-menu-effects { --premium-copy-start:calc(var(--premium-card-inset) + var(--premium-card-art) + var(--premium-card-gap)); position:absolute; z-index:4; left:calc(var(--premium-copy-start) - 9px); bottom:7px; max-width:calc(100% - var(--premium-copy-start) - 24px); min-height:22px; margin:0; padding:3px 8px; display:block; overflow:hidden; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--premium-card-muted); font:inherit; font-size:.72rem; font-weight:600; line-height:1.2; text-align:left; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,.55); white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,transform 140ms ease; }
.profile-premium-card-shell > .profile-premium-menu-effects:focus-visible { outline:2px solid var(--premium-card-text); outline-offset:2px; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:var(--premium-card-text); }
.profile-premium-menu-effects:disabled { opacity:.55; cursor:default; }
/* A finger gets a taller target; the text stays exactly where it was. */
@media (pointer:coarse) { .profile-premium-menu-effects { bottom:2px; padding-block:8px; } }
.profile-menu-account { margin-top:8px; padding:5px; display:grid; gap:3px; border:1px solid color-mix(in srgb,var(--line,#dcd8ce) 84%,transparent); border-radius:14px; background:color-mix(in srgb,var(--paper-deep,#eeebe2) 34%,var(--surface,#fffdf8)); }
.profile-menu > .profile-menu-account.profile-nav-section { margin-top:8px; }
.profile-menu-company { padding:14px 8px 4px; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.4; text-align:center; }
.profile-menu-company a { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:8px; color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); text-underline-offset:4px; }
.profile-menu-company a:hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); text-decoration-color:currentColor; }
.profile-menu details { padding:0; border:0; }
.profile-menu summary { list-style:none; }
.profile-menu summary::-webkit-details-marker { display:none; }
.profile-menu summary > span { flex:1; }
.profile-menu summary > .icon:last-child { transition:transform 160ms ease; }
.profile-menu details[open] summary > .icon:last-child { transform:rotate(180deg); }
.profile-workspace-options { display:grid; gap:2px; padding-top:4px; }
.profile-workspace-option > span { flex:1; overflow-wrap:anywhere; }
.profile-menu details button { padding-left:7px; }
.profile-menu button:where(:not(.profile-premium-menu-effects))[aria-pressed="true"] { background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.profile-menu button > span { min-width:0; display:grid; gap:1px; }
.profile-menu button > span small { font-size:.7rem; }
.profile-menu p { padding:7px 10px; color:var(--danger,#a33a34); font-size:.75rem; }
.profile-menu :focus-visible { outline-offset:-3px; }
@keyframes profile-menu-enter { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
@media (hover:hover) and (pointer:fine) {
    .profile-premium-card:hover:where(:not([data-touch-input] *)) { transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px var(--premium-card-shadow); }
    .profile-premium-card:hover:where(:not([data-touch-input] *)) .profile-premium-arrow { transform:translateX(2px); }
    .profile-premium-card:hover:where(:not([data-touch-input] *)) + .profile-premium-menu-effects { transform:translateY(-1px); }
    .profile-premium-menu-effects:not(:disabled):hover:where(:not([data-touch-input] *)) { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.35); color:var(--premium-card-text); }
}
@media (prefers-reduced-motion:reduce) {
    .profile-menu { animation:none; }
    .profile-premium-card, .profile-premium-arrow, .profile-premium-menu-effects { transition:none; }
    .profile-premium-card:hover:where(:not([data-touch-input] *)) + .profile-premium-menu-effects { transform:none; }
    .profile-premium-card:is(:hover:where(:not([data-touch-input] *)),:focus-visible) { transform:none; }
    .profile-premium-card:is(:hover:where(:not([data-touch-input] *)),:focus-visible) .profile-premium-arrow { transform:none; }
}
@media (forced-colors:active) { .profile-premium-card, .profile-premium-card:hover:where(:not([data-touch-input] *)), .profile-premium-card:focus-visible, .profile-premium-card.active, .profile-nav-group, .profile-menu-account { border-color:CanvasText; background:Canvas; box-shadow:none; color:CanvasText; } .profile-premium-art::before { display:none; } .profile-premium-fox { filter:none; } .profile-premium-copy strong, .profile-premium-copy small { color:CanvasText; text-shadow:none; } .profile-premium-arrow { border:1px solid LinkText; background:Canvas; color:LinkText; filter:none; } .profile-premium-menu-effects { background:Canvas; color:LinkText; text-shadow:none; } .profile-premium-menu-effects:disabled { color:GrayText; } }
@media (forced-colors:active) { .profile-navigation .profile-nav-section { border-top-color:CanvasText; background:transparent; } .profile-navigation .profile-menu-link:not(.profile-premium-card), .profile-navigation .profile-menu button:not(.profile-menu-trigger,.profile-premium-menu-effects), .profile-navigation .profile-menu summary { border-color:ButtonText; background:Canvas; box-shadow:none; } }
.notification-navigation { position:relative; flex:none; }
.notification-trigger { position:relative; width:36px; padding:0; cursor:pointer; transition:background 150ms ease,border-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 150ms ease; }
.notification-trigger:hover:where(:not([data-touch-input] *)), .notification-trigger[aria-expanded="true"] { border-color:color-mix(in srgb,var(--accent,#c76345) 34%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 62%,var(--surface,#fffdf8)); color:var(--accent-deep,#9f422b); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft,#f1d9cf) 74%,transparent); }
.notification-trigger:active { transform:scale(.94); }
.notification-trigger .notification-dot { top:4px; right:4px; margin:0; border-color:var(--surface,#fffdf8); }
.notification-popover { position:absolute; z-index:80; top:calc(100% + 12px); right:-49px; width:min(410px,calc(100vw - 24px)); max-height:calc(100dvh - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:18px; background:var(--surface,#fffdf8); box-shadow:0 18px 54px rgba(24,22,18,.2),0 2px 8px rgba(24,22,18,.06); color:var(--ink,#262823); text-align:left; transform-origin:top right; animation:notification-popover-enter 180ms cubic-bezier(.2,.8,.2,1); }
.notification-popover-header { min-height:58px; padding:11px 12px 10px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line,#dcd8ce); }
.notification-popover-header > div { min-width:0; display:flex; align-items:center; gap:8px; }
.notification-popover-header h2 { font:700 1rem/1.2 var(--planner-heading); letter-spacing:-.012em; }
.notification-popover-header-actions { flex:none; }
.notification-popover-header-actions button { min-height:32px; border:0; border-radius:8px; background:transparent; color:var(--ink-soft,#66685f); cursor:pointer; transition:background 140ms ease,color 140ms ease,transform 140ms ease; }
.notification-popover-header-actions button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.notification-popover-header-actions button:active:not(:disabled) { transform:scale(.96); }
.notification-popover-header-actions button:disabled { opacity:.45; cursor:default; }
.notification-mark-all { padding:0 8px; font-size:.72rem; font-weight:650; }
.notification-popover-close { width:32px; padding:0; display:grid; place-items:center; }
.notification-popover-body { min-height:0; max-height:min(520px,calc(100dvh - 176px)); overflow:auto; overscroll-behavior:contain; }
.notification-popover-conflicts { margin:10px; overflow:hidden; border:1px solid color-mix(in srgb,var(--danger,#a33a34) 30%,var(--line,#dcd8ce)); border-radius:12px; background:color-mix(in srgb,var(--danger,#a33a34) 5%,var(--surface,#fffdf8)); }
.notification-popover-conflicts > h3 { padding:10px 11px; display:flex; align-items:center; gap:7px; border-bottom:1px solid color-mix(in srgb,var(--danger,#a33a34) 18%,var(--line,#dcd8ce)); color:var(--danger,#a33a34); font-size:.78rem; }
.notification-popover-conflict { min-width:0; padding:10px; display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; align-items:start; }
.notification-popover-conflict + .notification-popover-conflict { border-top:1px solid color-mix(in srgb,var(--danger,#a33a34) 14%,var(--line,#dcd8ce)); }
.notification-popover-conflict .notification-conflict-action { grid-column:2; width:max-content; max-width:100%; min-height:30px; padding:5px 8px; border:1px solid color-mix(in srgb,var(--danger,#a33a34) 30%,var(--line,#dcd8ce)); border-radius:7px; background:var(--surface,#fffdf8); color:var(--danger,#a33a34); font-size:.68rem; font-weight:700; cursor:pointer; }
.notification-popover-conflict .notification-conflict-action:hover:where(:not([data-touch-input] *)):not(:disabled) { background:color-mix(in srgb,var(--danger,#a33a34) 8%,var(--surface,#fffdf8)); }
.notification-popover-conflict .notification-conflict-action:disabled { opacity:.5; cursor:default; }
.notification-popover-list { display:grid; gap:10px; padding:10px; }
.notification-popover-item { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--surface,#fffdf8); transition:background 150ms ease; animation:notification-item-enter 180ms cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--notification-delay,0ms); }
.notification-popover-item.is-unread { background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 24%,var(--surface,#fffdf8)); }
.notification-popover-item[data-notification-id] { touch-action:pan-y pinch-zoom; translate:var(--notification-swipe-offset,0px) 0; transition:background 150ms ease,translate 160ms ease,opacity 160ms ease; }
.notification-popover-item[data-notification-swiping] { transition:none; user-select:none; }
.notification-popover-item[data-notification-dismissing] { opacity:0!important; pointer-events:none; }
.notification-snooze-container { grid-column:1 / -1; }
@media (prefers-reduced-motion:reduce) { .notification-popover-item[data-notification-id] { transition:none; } }
.notification-popover-item:hover:where(:not([data-touch-input] *)) { background:color-mix(in srgb,var(--paper-deep,#eeebe2) 72%,var(--surface,#fffdf8)); }
.notification-popover-content { min-width:0; min-height:70px; padding:11px 5px 11px 12px; display:grid; grid-template-columns:32px minmax(0,1fr) 8px; gap:10px; align-items:start; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.notification-popover-content:disabled { cursor:default; opacity:.62; }
.notification-popover-kind { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.notification-popover-kind.is-conflict { background:color-mix(in srgb,var(--danger,#a33a34) 10%,var(--surface,#fffdf8)); color:var(--danger,#a33a34); }
.notification-popover-copy { min-width:0; display:grid; gap:3px; }
.notification-popover-copy strong { font-size:.82rem; font-weight:700; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
.notification-popover-copy small { color:var(--ink-soft,#66685f); font-size:.72rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.notification-popover-copy time { color:var(--ink-faint,#8e8f87); font-size:.65rem; line-height:1.3; }
.notification-unread-indicator { width:7px; height:7px; margin-top:5px; border-radius:50%; background:var(--accent,#c76345); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft,#f1d9cf) 72%,transparent); }
.notification-popover-actions { min-width:0; padding:10px 12px 10px 0; display:flex; flex-wrap:nowrap; justify-content:flex-end; align-items:center; gap:6px; }
.notification-popover-item:hover:where(:not([data-touch-input] *)) .notification-popover-actions, .notification-popover-item:focus-within .notification-popover-actions { opacity:1; }
.notification-popover-actions button { max-width:100%; min-width:44px; min-height:44px; padding:7px 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font-size:.72rem; line-height:1.35; white-space:normal; overflow-wrap:anywhere; cursor:pointer; transition:background 140ms ease,color 140ms ease,transform 140ms ease; }
.notification-popover-actions button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--surface,#fffdf8); color:var(--accent-deep,#9f422b); box-shadow:0 1px 5px rgba(24,22,18,.08); }
.notification-popover-actions button:active:not(:disabled) { transform:scale(.92); }
.notification-popover-actions button svg { flex:none; }
.notification-popover-actions button:focus-visible { outline:2px solid var(--accent-deep,#9f422b); outline-offset:2px; }
.notification-popover-actions button:disabled { opacity:.4; cursor:default; }
.notification-popover-empty { min-height:150px; padding:25px 22px; display:flex; align-items:center; justify-content:center; gap:13px; text-align:left; }
.notification-popover-empty > span { flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); }
.notification-popover-empty h3 { font-size:.86rem; }
.notification-popover-empty p { margin-top:4px; max-width:250px; color:var(--ink-soft,#66685f); font-size:.72rem; line-height:1.45; }
.notification-popover-loading { padding:12px; display:grid; gap:8px; }
.notification-popover-loading > span:not(.sr-only) { height:70px; border-radius:11px; background:linear-gradient(90deg,var(--paper-deep,#eeebe2),var(--surface,#fffdf8),var(--paper-deep,#eeebe2)); background-size:200% 100%; animation:planner-shimmer 1.2s ease-in-out infinite; }
.notification-popover-footer { min-height:48px; padding:7px 9px 7px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line,#dcd8ce); background:color-mix(in srgb,var(--paper,#f7f5ef) 62%,var(--surface,#fffdf8)); }
.notification-popover-footer button { min-height:32px; padding:0 8px; display:inline-flex; align-items:center; gap:7px; border:0; border-radius:8px; background:transparent; color:var(--ink-soft,#66685f); font-size:.72rem; font-weight:650; cursor:pointer; transition:background 140ms ease,color 140ms ease,transform 140ms ease; }
.notification-popover-footer button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.notification-popover-footer button:active:not(:disabled) { transform:scale(.96); }
.notification-popover-footer button:disabled { opacity:.4; cursor:default; }
.notification-popover-footer .notification-refresh { width:32px; padding:0; justify-content:center; }
.notification-navigation-embedded { width:100%; height:100%; min-height:0; min-width:0; }
.notification-navigation-embedded .notification-popover { position:static; inset:auto; width:100%; height:100%; min-height:0; max-height:none; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; border:0; border-radius:0; background:transparent; box-shadow:none; animation:none; }
.notification-navigation-embedded .notification-popover-body { max-height:none; overflow:auto; padding:2px; scrollbar-gutter:stable; }
.notification-navigation-embedded .notification-embedded-toolbar { display:flex; justify-content:flex-end; padding:0 0 10px; }
.notification-navigation-embedded .notification-popover-conflicts { margin:0 0 12px; }
.notification-navigation-embedded .notification-popover-list { padding:0; }
.notification-navigation-embedded .notification-popover-footer { margin-top:14px; padding:9px 0 0; background:transparent; }
.notification-read-drawer { margin:10px; animation:notification-item-enter 220ms ease both; }
.notification-navigation-embedded .notification-read-drawer { margin:12px 0 0; }
.notification-read-toggle { width:100%; min-height:44px; display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); font:500 .8125rem/1.4 var(--planner-font); text-align:left; cursor:pointer; }
.notification-read-toggle:focus-visible { outline:2px solid var(--accent,#c76345); outline-offset:2px; }
.notification-read-toggle > svg { flex:none; }
.notification-read-toggle > svg:last-child { margin-left:auto; transition:transform 220ms ease; }
.notification-read-count { color:var(--ink-soft,#66685f); font-variant-numeric:tabular-nums; }
.notification-read-drawer[data-open="true"] .notification-read-toggle > svg:last-child { transform:rotate(180deg); }
.notification-read-panel { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows 240ms ease,opacity 180ms ease,visibility 240ms; }
.notification-read-drawer[data-open="true"] .notification-read-panel { grid-template-rows:1fr; opacity:1; visibility:visible; }
.notification-read-content { min-height:0; overflow:hidden; }
.notification-read-content > .notification-popover-list { padding-top:10px; }
@media (prefers-reduced-motion:reduce) { .notification-read-drawer, .notification-read-panel, .notification-read-toggle > svg:last-child { animation:none; transition:none; } }
@keyframes notification-popover-enter { from { opacity:0; transform:translateY(-7px) scale(.975); } to { opacity:1; transform:none; } }
@keyframes notification-item-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.notification-dot { position:absolute; width:7px; height:7px; margin:-19px 0 0 12px; border:2px solid var(--surface,#fffdf8); border-radius:50%; background:var(--accent,#c76345); }

.view-options { min-width:0; }
.view-options-toggle, .view-options-backdrop { display:none; }
.view-controls { min-width:0; display:flex; align-items:center; gap:9px; white-space:nowrap; }
.view-controls > * { flex:none; }
.view-controls .filter-select { min-height:36px; padding:0 8px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); }
.view-controls .filter-select:is(:focus-visible,:has(:focus-visible)) { border-color:var(--accent,#496a45); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#496a45) 18%,transparent); }
.view-controls .filter-select select { max-width:180px; border:0; outline:0; background:transparent; color:inherit; font:inherit; }
.calendar-filter { position:relative; min-width:0; }
.calendar-filter-trigger > span { min-width:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.calendar-filter-trigger > .icon { flex:none; }
.calendar-filter-trigger > .icon:last-child { transition:transform 140ms ease; }
.calendar-filter-trigger[aria-expanded="true"] > .icon:last-child { transform:rotate(180deg); }
.view-controls .calendar-filter-trigger[aria-expanded="true"] { border-color:var(--accent,#c76345); background:var(--accent-soft,#f4dfd6); }
.calendar-filter-menu { top:calc(100% + 7px); left:0; right:auto; width:min(260px,calc(100vw - 60px)); padding:6px; border-radius:12px; font-size:.9375rem; white-space:normal; transform-origin:top left; animation-duration:140ms; }
.calendar-filter-options { display:grid; gap:2px; }
.calendar-filter-menu .calendar-filter-option { min-height:40px; justify-content:flex-start; }
.calendar-filter-details { display:grid; gap:3px; min-width:0; text-align:left; }
.calendar-filter-name { display:flex; align-items:center; gap:8px; min-width:0; }
.calendar-filter-name > svg { flex:none; }
.calendar-filter-name > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-filter-menu .calendar-filter-check { flex:0 0 17px; width:17px; height:17px; display:grid; place-items:center; border:1px solid var(--line,#dcd8ce); border-radius:5px; transition:background-color 140ms ease,border-color 140ms ease; }
.calendar-filter-option[aria-pressed="true"] .calendar-filter-check { border-color:var(--accent,#c76345); background:var(--accent,#c76345); color:var(--paper,#f7f5ef); }
.calendar-filter-menu .calendar-filter-actions { margin-top:6px; padding:3px 0; }
.calendar-filter-menu .calendar-filter-create { min-height:40px; color:var(--accent-deep,#9f422b); }
@media (prefers-reduced-motion:reduce) { .calendar-filter-menu { animation:none; } .calendar-filter-trigger > .icon:last-child, .calendar-filter-menu .calendar-filter-check { transition:none; } }
@media (min-width:2100px) {
    .planner-topbar { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
}
@media (max-width:1199px) {
    .view-options-toggle { width:36px; padding:0; display:inline-flex; }
    .view-options-toggle[aria-expanded="true"] { border-color:var(--ink-soft,#66685f); }
    .view-options .view-controls { position:absolute; z-index:2; top:calc(100% - 1px); left:22px; width:max-content; max-width:calc(100% - 44px); padding:12px; display:flex; flex-wrap:wrap; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--surface,#fffdf8); box-shadow:0 8px 24px rgba(0,0,0,.12); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.98); transform-origin:top left; transition:opacity 180ms ease,transform 220ms cubic-bezier(.22,1,.36,1),visibility 0s linear 220ms; }
    .view-options.is-open .view-controls { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
    .view-options-backdrop { position:fixed; z-index:24; inset:0; display:block; background:transparent; }
}
@media (prefers-reduced-motion:reduce) { .view-options .view-controls { transition:none; } }
.paused-series { margin:8px 22px 0; padding:9px 12px; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:color-mix(in srgb,var(--surface,#fffdf8) 88%,var(--panel,#f4f1e9)); color:var(--ink-soft,#66685f); font-size:.82rem; }
.paused-series summary { cursor:pointer; font-weight:650; color:var(--ink,#262823); }
.paused-series > div { display:flex; flex-wrap:wrap; gap:7px; padding-top:9px; }
.paused-series button { min-height:34px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink,#262823); }
.completed-toggle { display:flex; align-items:center; gap:7px; padding:0 7px; color:var(--ink-soft,#66685f); font-size:.76rem; }

/* Topbar controls share the planner backdrop and one quiet outline treatment. */
.planner-topbar {
    --topbar-control-fill:color-mix(in srgb,var(--ink,#262823) 4%,transparent);
    --topbar-control-hover:color-mix(in srgb,var(--ink,#262823) 10%,transparent);
    --topbar-control-border:color-mix(in srgb,var(--ink,#262823) 23%,transparent);
}
/* Center the letters rather than the font's extra ascent space. Keep room for
   accents and descenders inside the calendar label's ellipsis clipping box. */
.planner-topbar .topbar-control-label {
    text-box:trim-both cap alphabetic;
    padding-block:.25em;
}
.planner-topbar .view-controls .calendar-filter-trigger,
.planner-topbar .view-options-toggle {
    min-height:38px;
    padding-inline:10px;
    border:1px solid var(--topbar-control-border);
    border-radius:10px;
    background:var(--topbar-control-fill);
    color:var(--ink,#262823);
    box-shadow:none;
    font-size:.8125rem;
    transition:background-color 140ms ease,border-color 140ms ease;
}
.planner-topbar .view-controls .calendar-filter-trigger:hover:where(:not([data-touch-input] *)),
.planner-topbar .view-controls .calendar-filter-trigger[aria-expanded="true"],
.planner-topbar .view-options-toggle:hover:where(:not([data-touch-input] *)),
.planner-topbar .view-options-toggle[aria-expanded="true"] {
    border-color:color-mix(in srgb,var(--ink,#262823) 45%,transparent);
    background:var(--topbar-control-hover);
}
.planner-topbar .view-options-toggle { padding:0; }
.topbar-planning-controls { display:flex; align-items:center; gap:10px; min-width:0; }
.planner-view-switch { flex:0 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px; padding:3px; border:1px solid var(--topbar-control-border); border-radius:10px; background:var(--topbar-control-fill); }
.planner-view-switch a { min-height:30px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:600; line-height:1.2; white-space:nowrap; text-decoration:none; transition:background-color 140ms ease,color 140ms ease,box-shadow 140ms ease; }
.planner-view-switch a:hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); background:var(--topbar-control-hover); }
.planner-view-switch a[aria-current="page"] { color:var(--ink,#262823); background:color-mix(in srgb,var(--accent,#c76345) 18%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 45%,transparent); }
.planner-view-switch a:focus-visible { outline:2px solid var(--focus,#225ecc); outline-offset:2px; }
/* Phones anchor the arrows to the view-switch row; desktop uses the date track below. */
.planner-topbar .week-edge-navigation { position:absolute; top:calc(100% + .5px); transform:translateY(-50%); z-index:1; display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid var(--line,#dcd8ce); border-radius:50%; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.week-edge-previous { left:4px; }
.week-edge-next { right:4px; }
.week-edge-navigation:hover:where(:not([data-touch-input] *)), .week-edge-navigation:focus-visible { border-color:var(--accent,#c76345); background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
/* A held task pages the range from these arrows (Premium). A wider invisible
   target is easier to hold on; the hold fills the arrow with a scale-only fill. */
.planner-shell[data-planner-task-pointer-drag] .week-edge-navigation::before { position:absolute; inset:-12px; border-radius:50%; content:""; }
.week-edge-navigation[data-task-drag-range] { border-color:var(--accent,#c76345); color:var(--accent-deep,#9f422b); }
.week-edge-navigation:is([data-task-drag-range="armed"],[data-task-drag-range="repeat"],[data-task-drag-range="moving"])::after { position:absolute; inset:0; z-index:-1; border-radius:50%; background:var(--accent-soft,#f1d9cf); content:""; }
/* Durations match taskDragRangeDelay and taskDragRangeRepeat in task-drag-range.js. */
.week-edge-navigation[data-task-drag-range="armed"]::after { animation:task-drag-range-hold 650ms linear both; }
.week-edge-navigation[data-task-drag-range="repeat"]::after { animation:task-drag-range-hold 1000ms linear both; }
.week-edge-navigation[data-task-drag-range="locked"] { border-color:var(--line,#dcd8ce); color:var(--ink-soft,#66685f); opacity:.72; }
.task-drag-range-hint { pointer-events:none; }
.task-drag-layer[data-task-drag-range-over] .task-drag-proxy { opacity:.45!important; }
@keyframes task-drag-range-hold { from { transform:scale(0); } to { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .week-edge-navigation[data-task-drag-range]::after { animation:none; } }
/* Equal side tracks center the date and its dropdown arrow as one visible control. */
.planner-topbar:has(.planner-view-switch) { grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(44px,1fr); }
@media (min-width:801px) and (max-width:1149px) {
    .planner-topbar:has(.planner-view-switch) { --period-title-width:280px; --period-navigation-space:32px; column-gap:6px; padding-inline:8px; }
    .planner-topbar:has(.planner-view-switch) .planner-home-label { display:none; }
    .planner-topbar:has(.planner-view-switch) .period-title-full { display:none; }
    .planner-topbar:has(.planner-view-switch) .period-title-phone { display:inline; }
}
@media (max-width:800px) {
    .planner-shell:has(.planner-view-switch) { --planner-topbar:114px; }
    .planner-topbar:has(.planner-view-switch) { row-gap:6px; column-gap:8px; }
    .planner-topbar:has(.planner-view-switch) .topbar-navigation { grid-column:1; grid-row:1; }
    .planner-topbar:has(.planner-view-switch) .range-title { grid-column:2; grid-row:1; }
    .planner-topbar:has(.planner-view-switch) .topbar-actions { display:contents; }
    .planner-topbar:has(.planner-view-switch) .profile-navigation { grid-column:3; grid-row:1; justify-self:end; }
    .planner-topbar .topbar-planning-controls { position:relative; grid-column:1 / -1; grid-row:2; justify-content:center; gap:8px; width:100%; min-height:44px; }
    .planner-topbar .week-edge-navigation { top:50%; bottom:auto; width:44px; height:44px; transform:translateY(-50%); }
    .planner-topbar .week-edge-previous { left:0; }
    .planner-topbar .week-edge-next { right:0; }
    .planner-topbar .planner-view-switch a { padding-inline:8px; }
    .planner-topbar .planner-view-switch { max-width:calc(100% - 104px); }
}
@media (max-width:360px) {
    .planner-topbar .planner-view-switch a { padding-inline:6px; font-size:.75rem; }
    .planner-topbar .topbar-planning-controls { gap:6px; }
}
@media (prefers-reduced-motion:reduce) { .planner-view-switch a { transition:none; } }
/* Keep scrolled content behind an opaque, theme-matched phone header. */
@media (max-width:800px) and (forced-colors:none) {
    .planner-topbar { background:var(--paper,#f7f5ef); }
}
@media (forced-colors:active) {
    .planner-view-switch a[aria-current="page"] { outline:1px solid Highlight; outline-offset:-1px; color:HighlightText; background:Highlight; box-shadow:none; }
}
.planner-topbar .completed-toggle {
    min-height:38px;
    gap:8px;
    padding:0 10px;
    border-radius:10px;
    color:var(--ink,#262823);
    font-size:.8125rem;
    cursor:pointer;
    transition:background-color 140ms ease;
}
.planner-topbar .completed-toggle:hover:where(:not([data-touch-input] *)) { background:var(--topbar-control-hover); }
.planner-topbar .task-display-controls .completed-toggle { min-height:24px; padding-inline:7px; border-radius:6px; }
.planner-topbar .completed-toggle input {
    appearance:none;
    flex:none;
    display:grid;
    place-content:center;
    width:16px;
    height:16px;
    margin:0;
    border:1.5px solid color-mix(in srgb,var(--ink,#262823) 55%,transparent);
    border-radius:5px;
    background:transparent;
    color:inherit;
    cursor:pointer;
}
.planner-topbar .completed-toggle input:checked { border-color:currentColor; background:var(--topbar-control-hover); }
.planner-topbar .completed-toggle input::after {
    content:"";
    width:8px;
    height:5px;
    margin-top:-2px;
    border:solid currentColor;
    border-width:0 0 1.5px 1.5px;
    transform:rotate(-45deg);
    opacity:0;
}
.planner-topbar .completed-toggle input:checked::after { opacity:1; }
@media (prefers-reduced-motion:reduce) {
    .planner-topbar :is(.calendar-filter-trigger,.view-options-toggle,.completed-toggle) { transition:none; }
}
@media (forced-colors:active) {
    .planner-topbar .completed-toggle input { appearance:auto; }
    .planner-topbar .completed-toggle input::after { display:none; }
}
/* Reserve a stable center track so period text cannot move the paging arrows. */
@media (min-width:801px) {
    .planner-topbar:has(.planner-view-switch) { grid-template-columns:minmax(44px,1fr) minmax(0,var(--period-title-width,440px)) minmax(44px,1fr); }
    .planner-topbar .view-controls .calendar-filter { flex:0 1 auto; }
    .planner-topbar .view-controls .calendar-filter-trigger { max-width:100%; }
    .planner-topbar:has(.planner-view-switch) .topbar-actions,
    .planner-topbar:has(.planner-view-switch) .topbar-planning-controls { display:contents; }
    .planner-topbar:has(.planner-view-switch) .topbar-navigation { grid-column:1; grid-row:1; }
    .planner-topbar:has(.planner-view-switch) .range-title { grid-column:2; grid-row:1; padding-inline:var(--period-navigation-space,36px); }
    .planner-topbar:has(.planner-view-switch) .planner-view-switch { grid-column:3; grid-row:1; justify-self:end; margin-right:51px; }
    .planner-topbar:has(.planner-view-switch) .profile-navigation { grid-column:3; grid-row:1; justify-self:end; }
    /* Keep drag target extensions and the hold indicator anchored to each arrow. */
    .planner-topbar:has(.planner-view-switch) .week-edge-navigation { position:relative; inset:auto; grid-column:2; grid-row:1; align-self:center; width:32px; height:32px; margin-inline:-2px; transform:none; }
    .planner-topbar:has(.planner-view-switch) .week-edge-navigation svg { width:20px; height:20px; }
    .planner-topbar:has(.planner-view-switch) .week-edge-previous { justify-self:start; }
    .planner-topbar:has(.planner-view-switch) .week-edge-next { justify-self:end; }
}
.planner-content { min-width:0; padding:18px 12px 40px; }
/* Keep animation clipping stronger than the desktop calendar's overflow:auto rule. */
.planner-shell[data-view][data-week-animating] .planner-content { overflow-x:clip; }
.planner-shell[data-view][data-view-animating] .planner-content { overflow-x:clip; }
.app-loading {
    --loading-dot:#e58768;
    position:fixed;
    inset:0;
    z-index:210;
    min-width:0;
    min-height:100dvh;
    display:grid;
    place-items:center;
    background:var(--planner-backdrop,var(--paper,#1c1c1c));
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity 220ms ease-out,visibility 0s linear 0s;
}
.app-loading.is-inline {
    position:absolute;
    inset:var(--planner-topbar) 0 0;
    z-index:20;
    min-height:calc(100dvh - var(--planner-topbar));
    /* Keep the mounted theme and its animation visible throughout loading. */
    background:transparent;
}
.app-boot-loading { z-index:220; }
.app-loading.is-leaving {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 220ms ease-out,visibility 0s linear 220ms;
}
.app-loading-dots { display:flex; align-items:center; justify-content:center; gap:8px; }
.app-loading-dot {
    width:10px;
    height:10px;
    display:block;
    border-radius:50%;
    background:var(--loading-dot);
    animation:app-loading-jump 780ms cubic-bezier(.33,1,.68,1) infinite;
}
.app-loading-dot:nth-child(2) { animation-delay:120ms; }
.app-loading-dot:nth-child(3) { animation-delay:240ms; }
.app-loading-label {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}
@keyframes app-loading-jump {
    0%,60%,100% { transform:translateY(0); }
    30% { transform:translateY(-9px); }
}

/* Week and month share one in-flow row, leaving calendar cells unobstructed. */
.planner-bottom-row { position:relative; flex:none; min-width:0; min-height:160px; display:grid; grid-template-columns:repeat(6,minmax(130px,1fr)); margin:0; overflow-x:auto; }
.planner-bottom-row.no-weekends { grid-template-columns:repeat(5,minmax(130px,1fr)); }
.planner-bottom-row[hidden] { display:none; }
.planner-bottom-row > .unscheduled-tray { grid-column:1; grid-row:1; contain:size; }
.planner-bottom-row > .forever-board { grid-column:2 / -1; grid-row:1; margin:0; }
.planner-bottom-row .forever-board-header { padding-left:11px; }
.planner-utilities { display:contents; }
.planner-utilities[hidden] { display:none; }
.unscheduled-tray { position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; padding:12px 8px 9px; border-top:1px solid var(--line,#dcd8ce); border-right:1px solid var(--line,#dcd8ce); background:transparent; transition:background-color 160ms ease,box-shadow 160ms ease; }
.unscheduled-tray[hidden] { display:none; }
.unscheduled-tray[data-drop-active] { background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 46%,var(--surface,#fffdf8)); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent,#c76345) 72%,transparent); }
.unscheduled-tray[data-drop-active] h2 { color:var(--accent-deep,#9f422b); }
.unscheduled-tray:focus-visible { outline:1px solid var(--ink-soft,#66685f); outline-offset:-3px; }
.unscheduled-tray > header { flex:none; min-width:0; padding:0 3px 8px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.unscheduled-tray h2 { min-width:0; margin:0; font:500 1rem/1.4 var(--planner-heading); letter-spacing:0; overflow-wrap:anywhere; }
.unscheduled-count { min-width:23px; min-height:23px; padding:2px 5px; display:grid; place-items:center; border-radius:7px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); font-size:.75rem; font-variant-numeric:tabular-nums; }
.unscheduled-content { flex:1; min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.unscheduled-content :focus-visible { outline-offset:-3px; }
.unscheduled-tasks { --task-row-spacing:5px; display:grid; gap:0; }
.unscheduled-tray .planner-task { margin:0; }
.unscheduled-tasks > .planner-task { margin-bottom:var(--task-row-spacing); }
.unscheduled-tray .planner-task[draggable="true"] .task-body { user-select:none; -webkit-user-select:none; }
.unscheduled-tray .planner-task[data-dragging] { opacity:.3; }
.unscheduled-tray .inline-add { width:100%; min-height:40px; }
.unscheduled-tray .inline-task-draft { margin-top:7px; }
.forever-notes-card { flex:none; min-width:0; margin:0 22px 18px; border:0; border-radius:0; background:transparent; }
.forever-notes-card[hidden] { display:none; }
.forever-notes-card > header { padding:0 11px 8px; }
.forever-notes-card h2 { margin:0; font:700 .84rem/1.3 var(--planner-heading); }
.forever-notes-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.forever-note-column { min-width:0; padding:0 8px 9px; }
.forever-note-column + .forever-note-column { border-left:1px solid var(--line,#dcd8ce); }
.forever-note-title, .forever-note-body { width:100%; border:0; border-radius:0; background:transparent; color:var(--ink,#262823); font-family:var(--planner-font); }
.forever-note-title { min-height:32px; padding:5px 3px; border-bottom:1px solid var(--line,#dcd8ce); font-size:.8rem; font-weight:700; }
.forever-note-body { display:block; height:clamp(72px,12dvh,138px); min-height:72px; padding:9px 3px 0; overflow:auto; resize:none; font-size:.78rem; line-height:1.5; }
.forever-note-title::placeholder, .forever-note-body::placeholder { color:var(--ink-soft,#66685f); opacity:1; }
.forever-note-feedback { margin-top:8px; display:grid; gap:5px; color:var(--danger,#a33a34); font-size:.7rem; }
.forever-note-feedback button { justify-self:start; min-height:30px; padding:3px 9px; border:1px solid var(--line,#dcd8ce); border-radius:7px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); }
.forever-board { position:relative; flex:none; display:flex; flex-direction:column; height:var(--board-height,220px); min-width:0; min-height:0; margin:0 22px 18px; border:0; border-radius:0; background:transparent; --board-blue:var(--board-blue-ink,#5272a1); --board-red:var(--danger,#b24b45); }
.forever-board[hidden] { display:none; }
.forever-board[data-board-animating] { will-change:transform; }
.forever-board[data-board-animating] .forever-board-canvas,
.forever-board[data-board-animating] .forever-board-divider { pointer-events:none; }
.forever-board-divider, .weekend-resize-handle { position:relative; z-index:4; flex:none; height:9px; border-top:1px solid var(--line,#dcd8ce); cursor:ns-resize; touch-action:none; -webkit-tap-highlight-color:transparent; }
.forever-board-divider::before, .weekend-resize-handle::before { content:""; position:absolute; top:var(--divider-hit-top,-35px); left:50%; width:112px; height:44px; transform:translateX(-50%); }
.forever-board-divider::after, .weekend-resize-handle::after { content:""; position:absolute; top:1px; left:50%; width:40px; height:3px; border-radius:3px; background:var(--ink-soft,#66685f); opacity:.38; transform:translateX(-50%) scaleX(calc(1 + var(--handle-grow,0) + var(--board-magnet-pull,0) * .65)) scaleY(calc(1 - var(--board-magnet-pull,0) * .22)); pointer-events:none; transition:transform 240ms cubic-bezier(.22,1.4,.36,1),background-color 160ms ease,box-shadow 160ms ease,opacity 160ms ease; }
/* Hover and keyboard focus only widen the handle a little; the line keeps its colour. */
.forever-board-divider:hover:where(:not([data-touch-input] *)), .forever-board-divider:focus-visible, .weekend-resize-handle:hover:where(:not([data-touch-input] *)), .weekend-resize-handle:focus-visible { --handle-grow:.2; }
.forever-board-divider:hover:where(:not([data-touch-input] *))::after, .forever-board-divider:focus-visible::after, .weekend-resize-handle:hover:where(:not([data-touch-input] *))::after, .weekend-resize-handle:focus-visible::after { opacity:.62; }
.forever-board-divider:focus-visible, .weekend-resize-handle:focus-visible { outline:0; }
.forever-board-divider:focus-visible::after, .weekend-resize-handle:focus-visible::after { outline:2px solid var(--focus,#225ecc); outline-offset:4px; }
.planner-bottom-divider { display:none; position:absolute; top:0; inset-inline:0; }
@media (min-width:801px) {
    .planner-utilities .planner-bottom-row:has(> .forever-board:not(.is-contained):not(.is-expanded)) > .planner-bottom-divider { display:block; }
    .planner-bottom-row:has(> .planner-bottom-divider) > .forever-board > .forever-board-divider { visibility:hidden; pointer-events:none; }
    .planner-bottom-row[data-board-resizing] > .unscheduled-tray { user-select:none; -webkit-user-select:none; }
    .planner-bottom-row:has(> .forever-board[data-board-animating]) > .planner-bottom-divider { pointer-events:none; }
}
.forever-board-header { position:relative; display:flex; align-items:center; gap:8px; min-width:0; padding:0 3px 8px; flex:none; }
.forever-board-header h2 { flex:none; margin:0; font:500 1rem/1.4 var(--planner-heading); letter-spacing:0; }
.forever-board-toolbar { display:flex; flex:none; align-items:center; gap:5px; margin-left:auto; min-width:0; }
.forever-board-primary-tools, .forever-board-actions, .forever-board-view-tools { display:flex; flex:none; align-items:center; gap:2px; }
.forever-board-actions { padding-left:5px; border-left:1px solid var(--line,#dcd8ce); }
.forever-board-more-panel { display:flex; flex:1; align-items:center; gap:6px; min-width:0; }
.forever-board-extra-tools { display:flex; align-items:center; gap:2px; min-width:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain; }
.forever-board-toolbar button, .forever-board-extra-tools button, .forever-board-expand { flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); }
.forever-board-toolbar button:hover:where(:not([data-touch-input] *)):not(:disabled), .forever-board-extra-tools button:hover:where(:not([data-touch-input] *)):not(:disabled), .forever-board-expand:hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); background:var(--paper-deep,#eeebe2); }
.forever-board-toolbar button[aria-pressed="true"], .forever-board-extra-tools button[aria-pressed="true"] { border-color:var(--line,#dcd8ce); background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.forever-board-toolbar button:disabled, .forever-board-extra-tools button:disabled { opacity:1; cursor:default; background:var(--surface,#fffdf8); color:color-mix(in srgb,var(--ink-soft,#66685f) 35%,var(--surface,#fffdf8)); }
.forever-board-header button:focus-visible, .forever-board-header select:focus-visible { outline:2px solid var(--focus,#225ecc); outline-offset:2px; }
.forever-board-extra-tools label { flex:none; }
.forever-board-extra-tools select { max-width:88px; height:30px; border:1px solid var(--line,#dcd8ce); border-radius:4px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font-size:.72rem; }
.forever-board-extra-tools .forever-board-zoom { width:45px; font-size:.7rem; font-variant-numeric:tabular-nums; }
.forever-board-button-label, .forever-board-more-toggle { display:none; }
.forever-board-tool-divider { flex:none; height:18px; margin:0 4px; border-left:1px solid var(--line,#dcd8ce); }
.forever-board-properties { flex:none; display:flex; align-items:center; gap:6px; }
.forever-board-selection-notice { flex:none; margin:0 3px 7px; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.35; }
.forever-board-text-toolbar-anchor { position:relative; z-index:5; flex:0 0 0; height:0; min-height:0; min-width:0; pointer-events:none; }
.forever-board-text-toolbar { position:absolute; top:0; inset-inline-start:3px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:6px 8px; width:fit-content; max-width:calc(100% - 6px); box-sizing:border-box; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--surface,#fffdf8); box-shadow:0 6px 18px rgba(24,22,18,.1); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px) scale(.98); transform-origin:top left; transition:opacity 140ms ease,transform 200ms cubic-bezier(.22,1,.36,1),visibility 0s linear 200ms; }
.forever-board-text-toolbar-anchor[data-visible="true"] > .forever-board-text-toolbar { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-duration:180ms,220ms,0s; transition-delay:0s; }
@media (prefers-reduced-motion:reduce) { .forever-board-text-toolbar { transition:none!important; transform:none!important; } }
.forever-board-font-size { display:flex; align-items:center; gap:6px; color:var(--ink-soft,#66685f); font-size:.75rem; white-space:nowrap; }
.forever-board-font-size-field, .forever-board-stroke-field { display:inline-flex; align-items:center; gap:3px; height:30px; box-sizing:border-box; padding:0 8px 0 4px; border:1px solid var(--line,#dcd8ce); border-radius:5px; background:var(--paper,#f7f5ef); cursor:text; }
.forever-board-font-size-field:focus-within, .forever-board-stroke-field:focus-within { outline:2px solid var(--focus,#225ecc); outline-offset:2px; }
.forever-board-font-size-field:has(input[aria-invalid="true"]) { border:2px dashed var(--danger,#a33a34); }
.forever-board-font-size input[aria-invalid="true"] { border:0; }
.forever-board-font-size-field:has(input:disabled), .forever-board-stroke-field:has(input:disabled) { opacity:.4; cursor:default; }
.forever-board-font-size input, .forever-board-stroke-field input { width:7ch; min-width:0; height:100%; padding:0; border:0; background:transparent; color:var(--ink,#262823); font:400 .8rem var(--planner-font); font-variant-numeric:tabular-nums; text-align:right; }
.forever-board-font-size-field { gap:4px; padding:0 8px; font:500 .8125rem/1.4 var(--planner-font); }
.forever-board-font-size input { width:5.5ch; height:auto; margin:0; font:inherit; text-align:center; }
.forever-board-font-size input:placeholder-shown { width:7ch; }
.forever-board-font-size-field > span { flex:none; font:inherit; font-weight:400; }
.forever-board-text-toolbar .forever-board-font-size input:is(:focus-visible,:disabled), .forever-board-stroke-field input:is(:focus-visible,:disabled) { outline:none; opacity:1; }
.forever-board-stroke-field input { width:4ch; }
.forever-board-text-formats, .forever-board-text-alignment { display:flex; gap:2px; padding-left:8px; border-left:1px solid var(--line,#dcd8ce); }
.forever-board-text-toolbar button { display:grid; place-items:center; flex:none; width:30px; height:30px; padding:0; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--ink-soft,#66685f); }
.forever-board-text-toolbar button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.forever-board-text-toolbar button[aria-pressed="true"] { border-color:color-mix(in srgb,var(--accent,#c76345) 50%,transparent); background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.forever-board-text-toolbar button[aria-pressed="mixed"] { border-style:dashed; border-color:var(--ink-soft,#66685f); }
.forever-board-text-toolbar :disabled { opacity:.4; cursor:default; }
.forever-board-text-toolbar :is(button,input):focus-visible { outline:2px solid var(--focus,#225ecc); outline-offset:2px; }
.forever-board-font-error { flex-basis:100%; max-width:100%; color:var(--danger,#b7473b); font-size:.75rem; }
.board-color-picker { min-width:0; }
.board-color-trigger { display:flex; align-items:center; gap:7px; min-width:0; min-height:34px; padding:5px 9px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:transparent; color:var(--ink,#262823); font-size:.8125rem!important; transition:background 140ms ease,border-color 140ms ease; }
.board-color-trigger:hover:where(:not([data-touch-input] *)):not(:disabled), .board-color-trigger[aria-expanded="true"] { background:var(--surface,#fffdf8); border-color:var(--ink-soft,#66685f); }
.board-color-trigger:disabled { opacity:.4; cursor:default; }
.forever-board .board-color-trigger { background:var(--surface,#fffdf8); }
.forever-board .board-color-trigger:disabled { opacity:1; color:color-mix(in srgb,var(--ink-soft,#66685f) 35%,var(--surface,#fffdf8)); }
.board-color-trigger > .icon { flex:none; margin-left:auto; color:var(--ink-soft,#66685f); }
.forever-board-swatch { flex:none; display:inline-block; width:17px; height:17px; border:1px solid color-mix(in srgb,var(--ink,#262823) 25%,transparent); border-radius:5px; background:var(--ink,#262823); }
.forever-board-swatch[data-color="accent"] { background:var(--accent,#cb775b); }
.forever-board-swatch[data-color="sage"] { background:var(--sage,#809783); }
.forever-board-swatch[data-color="blue"] { background:var(--board-blue,#5272a1); }
.forever-board-swatch[data-color="red"] { background:var(--danger,#b7473b); }
.forever-board-swatch[data-color="none"] { background:linear-gradient(135deg,transparent 44%,var(--ink-soft,#66685f) 45%,var(--ink-soft,#66685f) 55%,transparent 56%); }
.forever-board-swatch[data-color="mixed"] { background:linear-gradient(135deg,var(--ink-soft,#66685f) 50%,var(--surface,#fffdf8) 50%); }
.board-color-popover { position:fixed; z-index:500; inset:auto; display:none; width:320px; max-width:calc(100vw - 24px); margin:0; padding:16px; gap:14px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line,#dcd8ce); border-radius:18px; background:var(--surface,#fffdf8); color:var(--ink,#262823); box-shadow:0 16px 48px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.08); font-family:var(--planner-font); font-size:.875rem; line-height:1.4; }
.board-color-popover:popover-open, .board-color-popover[data-fallback]:not([hidden]) { display:grid; animation:board-color-enter 150ms cubic-bezier(.22,1,.36,1); }
.board-color-popover::backdrop { background:transparent; }
.board-color-popover [hidden] { display:none!important; }
.board-color-popover:focus { outline:none; }
.board-color-popover[data-compact="true"] { gap:9px; padding:14px; }
.board-color-popover[data-compact="true"] .board-color-wheel { width:min(152px,26dvh); margin:0 0 2px; }
.board-color-popover[data-compact="true"] .board-saved-colors { gap:5px; padding-top:8px; }
.board-color-popover-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.board-color-popover-header h3 { margin:0; color:var(--ink,#262823); font:600 .9375rem/1.4 var(--planner-font); letter-spacing:0; }
.board-color-close { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--ink-soft,#66685f)!important; font:400 24px/1 var(--planner-font)!important; }
.board-color-close:hover:where(:not([data-touch-input] *)) { background:var(--paper-deep,#eeebe2); }
/* Paint brightness and color together so the circular edge is clipped once. */
.board-color-wheel { position:relative; justify-self:center; width:min(204px,36dvh); aspect-ratio:1; margin:2px 0 4px; border-radius:50%; background:linear-gradient(rgba(0,0,0,var(--wheel-shade,0)),rgba(0,0,0,var(--wheel-shade,0))),radial-gradient(circle closest-side,#fff 0%,#fff0 100%),conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); cursor:crosshair; touch-action:none; user-select:none; -webkit-user-select:none; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.board-color-wheel:has(input:focus-visible) { outline:3px solid var(--focus,#225ecc); outline-offset:5px; }
.board-color-wheel-handle { position:absolute; width:17px; height:17px; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 1px 5px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.18); pointer-events:none; }
.board-color-brightness { display:grid; gap:2px; }
.board-color-brightness > label { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink-soft,#66685f); font-size:.8125rem; }
.board-color-brightness > label > span:last-child { font-variant-numeric:tabular-nums; }
/* Native sliders retain keyboard, touch and assistive-technology support. */
.planner-setting-control { display:block; position:relative; min-width:0; }
.planner-setting-readout { position:absolute; z-index:3; top:44px; left:0; display:grid; place-items:center; box-sizing:border-box; min-width:68px; height:34px; padding:4px 10px; border:1px solid color-mix(in srgb,var(--accent) 65%,var(--line)); border-radius:9px; background:var(--surface); color:var(--ink); font:650 .9rem/1.2 var(--planner-font,system-ui); font-variant-numeric:tabular-nums; box-shadow:0 5px 16px #0003; pointer-events:none; visibility:hidden; opacity:0; transform:translateX(clamp(0px,calc(var(--slider-readout-x,34px) - 50%),calc(var(--slider-width,68px) - 100%))); translate:0 -4px; scale:.94; transition:opacity 120ms ease,translate 160ms cubic-bezier(.2,.8,.2,1),scale 160ms cubic-bezier(.2,.8,.2,1),visibility 0s 160ms; }
.planner-setting-control[data-slider-active] .planner-setting-readout { visibility:visible; opacity:1; translate:0 0; scale:1; transition-delay:0s; }
.planner-setting-control[data-slider-active] .planner-setting-slider::-webkit-slider-runnable-track { box-shadow:0 0 9px color-mix(in srgb,var(--accent) 22%,transparent); }
.planner-setting-control[data-slider-active] .planner-setting-slider::-moz-range-progress { box-shadow:0 0 9px color-mix(in srgb,var(--accent) 22%,transparent); }
.planner-setting-slider { --slider-rail:color-mix(in srgb,var(--ink) 22%,var(--surface)); display:block; box-sizing:border-box; appearance:none; -webkit-appearance:none; width:100%; height:48px; min-width:0; margin:0; padding:0 2px; border:0; border-radius:8px; background:transparent; accent-color:var(--accent); cursor:ew-resize; touch-action:pan-y pinch-zoom; }
.planner-setting-slider::-webkit-slider-runnable-track { height:6px; border:0; border-radius:999px; background:linear-gradient(to right,var(--accent) 0 var(--slider-progress,0%),var(--slider-rail) var(--slider-progress,0%) 100%); }
.planner-setting-slider::-moz-range-track { height:6px; border:0; border-radius:999px; background:var(--slider-rail); }
.planner-setting-slider::-moz-range-progress { height:6px; border-radius:999px; background:var(--accent); }
.planner-setting-slider::-webkit-slider-thumb { box-sizing:border-box; appearance:none; -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border:4px solid var(--accent); border-radius:50%; background:#262626; background:rgb(from var(--surface) r g b / 1); box-shadow:0 0 0 3px color-mix(in srgb,var(--surface) 70%,transparent),0 2px 5px #0003; transition:box-shadow 150ms ease,background-color 150ms ease,scale 150ms ease; }
.planner-setting-slider::-moz-range-thumb { box-sizing:border-box; width:26px; height:26px; border:4px solid var(--accent); border-radius:50%; background:#262626; background:rgb(from var(--surface) r g b / 1); box-shadow:0 0 0 3px color-mix(in srgb,var(--surface) 70%,transparent),0 2px 5px #0003; transition:box-shadow 150ms ease,background-color 150ms ease,scale 150ms ease; }
.planner-setting-slider:hover:where(:not([data-touch-input] *)):not(:disabled)::-webkit-slider-thumb,.planner-setting-slider:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent),0 2px 5px #0003; }
.planner-setting-slider:hover:where(:not([data-touch-input] *)):not(:disabled)::-moz-range-thumb,.planner-setting-slider:focus-visible::-moz-range-thumb { box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent),0 2px 5px #0003; }
.planner-setting-slider:active:not(:disabled)::-webkit-slider-thumb { scale:1.12; background:var(--accent); }
.planner-setting-slider:active:not(:disabled)::-moz-range-thumb { scale:1.12; background:var(--accent); }
.planner-setting-slider:focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:2px; }
.planner-setting-slider:disabled { cursor:default; opacity:.5; }
.planner-setting-value { display:inline-flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; min-width:3.4rem; padding:.2rem .55rem; border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius:7px; background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--ink); font-size:.84rem; font-weight:600; line-height:1.5; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce) {
    .planner-setting-readout { transition:none; translate:none; scale:1; }
    .planner-setting-slider::-webkit-slider-thumb { transition:none; }
    .planner-setting-slider::-moz-range-thumb { transition:none; }
}
@media (forced-colors:active) {
    .planner-setting-readout { border-color:Highlight; background:Canvas; color:CanvasText; }
    .planner-setting-slider::-webkit-slider-runnable-track { background:GrayText; }
    .planner-setting-slider::-moz-range-track { background:GrayText; }
    .planner-setting-slider::-moz-range-progress { background:Highlight; }
    .planner-setting-slider::-webkit-slider-thumb { border-color:Highlight; background:Canvas; }
    .planner-setting-slider::-moz-range-thumb { border-color:Highlight; background:Canvas; }
    .planner-setting-value { border-color:ButtonText; background:Canvas; color:CanvasText; }
}

.board-color-hex-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line,#dcd8ce); border-radius:11px; background:var(--paper,#f7f5ef); }
.board-color-preview { flex:none; width:34px; height:34px; border:1px solid color-mix(in srgb,var(--ink,#262823) 16%,transparent); border-radius:8px; }
.board-color-hex-row label { flex:1; min-width:0; color:var(--ink-soft,#66685f); font-size:.6875rem; }
.board-color-hex-row input { display:block; width:100%; height:24px; padding:0; border:0; border-radius:3px; background:transparent; color:var(--ink,#262823); font:500 .875rem/1.4 var(--planner-font); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.board-color-error { margin:0; color:var(--danger,#b7473b); font-size:.75rem; }
.board-color-error[hidden] { display:none; }
.board-color-footer { display:grid; gap:6px; padding-top:1px; }
.board-color-theme-section { display:grid; gap:5px; min-width:0; }
.board-color-section-heading { margin:0; color:var(--ink-soft,#66685f); font:500 .8125rem/1.4 var(--planner-font); }
.board-color-theme-section button:focus-visible { outline:2px solid var(--focus,#225ecc); outline-offset:2px; }
.board-color-presets { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
.board-color-presets .board-color-preset { display:grid; place-items:center; width:100%; height:36px; min-width:0; cursor:pointer; }
.board-color-presets .board-color-preset::before { width:20px; height:20px; }
.board-color-presets[data-theme-tokens="false"] { grid-template-columns:repeat(6,minmax(0,1fr)); }
.forever-board .board-color-presets { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (hover:none), (pointer:coarse), (max-width:380px) {
    .board-color-presets { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .board-color-presets .board-color-preset { height:44px; }
}
.board-color-preset { position:relative; flex:none; width:27px; height:29px; padding:4px; border:1px solid transparent; border-radius:8px; background:transparent; }
.board-color-preset::before { content:""; display:block; width:17px; height:17px; border:1px solid rgba(0,0,0,.12); border-radius:50%; background:var(--swatch-color); }
.board-color-preset:hover:where(:not([data-touch-input] *)), .board-color-preset[aria-pressed="true"] { border-color:var(--ink-soft,#66685f); }
.board-color-none { display:flex; align-items:center; justify-content:center; gap:5px; min-height:29px; padding:3px 6px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink-soft,#66685f); font-size:.75rem!important; white-space:nowrap; }
.board-color-none .forever-board-swatch { width:15px; height:15px; border-radius:4px; }
.board-color-none:hover:where(:not([data-touch-input] *)), .board-color-none[aria-pressed="true"] { border-color:var(--line,#dcd8ce); background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.board-color-probe { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.board-saved-colors { display:grid; gap:9px; padding-top:12px; border-top:1px solid var(--line,#dcd8ce); }
.board-saved-colors-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 10px; }
.board-saved-colors-header > :first-child { margin:0; color:var(--ink-soft,#66685f); font:500 .8125rem/1.4 var(--planner-font); }
.board-saved-colors-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; max-width:100%; margin-left:auto; }
.board-color-save { display:inline-flex; align-items:center; justify-content:center; flex:none; gap:5px; min-height:30px; padding:4px 7px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--accent,#c76345); font:600 .75rem/1.4 var(--planner-font)!important; cursor:pointer; transition:background-color 140ms ease,color 140ms ease; }
.board-color-save:hover:where(:not([data-touch-input] *)):not(:disabled) { background:color-mix(in srgb,var(--accent,#c76345) 12%,transparent); }
.board-color-save:disabled { color:var(--ink-soft,#66685f); opacity:.6; cursor:default; }
.board-color-save[data-saved="true"] { color:var(--sage,#809783); opacity:1; }
.board-color-save[data-saved="true"] > span:first-child { animation:board-color-saved 180ms ease-out; }
.board-save-card-style { position:relative; display:inline-flex; align-items:center; gap:6px; min-width:0; min-height:30px; padding:2px 0; border-radius:5px; color:var(--ink-soft,#66685f); cursor:pointer; transition:color 160ms ease; }
.board-save-card-style[hidden] { display:none; }
.board-save-card-style:hover:where(:not([data-touch-input] *)):not(:has(input:disabled)), .board-save-card-style:has(input:checked) { color:var(--ink,#262823); }
.board-save-card-style:has(input:focus-visible) { outline:2px solid var(--focus,#225ecc); outline-offset:2px; }
.board-save-card-style:has(input:disabled) { opacity:.55; cursor:default; }
.board-save-card-style > input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.board-save-card-style-copy { min-width:0; font:500 .6875rem/1.4 var(--planner-font); }
.board-save-card-style-switch { position:relative; flex:none; width:32px; height:19px; border:1px solid var(--line,#dcd8ce); border-radius:20px; background:var(--paper-deep,#eeebe2); transition:background-color 160ms ease,border-color 160ms ease; }
.board-save-card-style-switch::before { content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--ink-soft,#66685f); transition:transform 160ms cubic-bezier(.22,1,.36,1),background-color 160ms ease; }
.board-save-card-style input:checked ~ .board-save-card-style-switch { background:var(--accent,#c76345); border-color:var(--accent,#c76345); }
.board-save-card-style input:checked ~ .board-save-card-style-switch::before { background:#fff; transform:translateX(13px); }
.board-saved-colors-delete-toggle:has(input:checked) { color:var(--danger,#b7473b); }
.board-saved-colors-delete-toggle input:checked ~ .board-save-card-style-switch { background:var(--danger,#b7473b); border-color:var(--danger,#b7473b); }
.board-saved-color-list { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.board-saved-color-list:empty, .board-saved-color-list[hidden] { display:none; }
.board-saved-color { position:relative; width:36px; height:36px; animation:board-saved-color-enter 180ms cubic-bezier(.22,1,.36,1); }
.board-saved-color-use { width:36px; height:36px; display:grid; place-items:center; padding:4px; border-radius:9px; transition:background-color 140ms ease,border-color 140ms ease,transform 140ms ease; }
.board-saved-color-use::before { width:24px; height:24px; border-color:color-mix(in srgb,var(--ink,#262823) 18%,transparent); }
.board-saved-color-use[data-card-style]::before { display:none; }
.board-saved-color-use:active:not(:disabled) { transform:scale(.94); }
.board-saved-color-swatch { --task-glow-near:3px; --task-glow-far:7px; --task-glow-spread:0px; position:relative; display:block; width:24px; height:24px; border:1px solid color-mix(in srgb,var(--ink,#262823) 18%,transparent); border-radius:50%; background:var(--task-color); pointer-events:none; }
.board-saved-color-swatch.task-card-finish--glow { box-shadow:var(--task-glow-shadow); }
.board-saved-color-use:disabled { opacity:.45; cursor:default; }
.board-saved-color-remove { position:absolute; z-index:1; top:-5px; right:-5px; display:grid; place-items:center; box-sizing:border-box; width:20px; height:20px; min-width:0; min-height:0; aspect-ratio:1; padding:0; border:1px solid var(--line,#dcd8ce); border-radius:50%; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font:500 14px/1 var(--planner-font)!important; opacity:0; cursor:pointer; transition:opacity 120ms ease,color 120ms ease; }
.board-saved-color:hover:where(:not([data-touch-input] *)) .board-saved-color-remove, .board-saved-color:focus-within .board-saved-color-remove { opacity:1; }
.board-saved-color-list[data-delete-mode="true"] .board-saved-color-remove { opacity:1; }
.board-saved-color-remove[hidden] { display:none; }
.board-saved-color-remove:hover:where(:not([data-touch-input] *)):not(:disabled) { color:var(--danger,#b7473b); border-color:currentColor; }
.board-saved-color-remove:disabled { cursor:default; }
.board-saved-colors-status { margin:0; color:var(--danger,#b7473b); font-size:.75rem; }
.board-saved-colors-status[hidden] { display:none; }
.board-saved-colors button:focus-visible { outline:2px solid var(--focus,#225ecc); outline-offset:2px; }
@keyframes board-saved-color-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes board-color-saved { from { opacity:.35; transform:translateY(2px); } to { opacity:1; transform:none; } }
@media (hover:none), (pointer:coarse), (max-width:540px) { .board-saved-color-remove { opacity:1; } .board-saved-color-list { gap:10px; } .board-saved-color, .board-saved-color-use { width:44px; height:44px; } .board-saved-color-remove { width:22px; height:22px; } .board-save-card-style, .board-color-save { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .board-saved-color, .board-color-save[data-saved="true"] > span:first-child { animation:none; } .board-color-save, .board-saved-color-use, .board-saved-color-remove, .board-save-card-style, .board-save-card-style-switch, .board-save-card-style-switch::before { transition:none; } .board-saved-color-use:active:not(:disabled) { transform:none; } }
@media (forced-colors:active) { .board-save-card-style input:checked ~ .board-save-card-style-switch { background:Highlight; border-color:Highlight; } .board-save-card-style input:checked ~ .board-save-card-style-switch::before { background:HighlightText; } .board-saved-color-use[aria-pressed="true"] { outline:2px solid Highlight; } }
@keyframes board-color-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.forever-board-canvas { position:relative; flex:1; min-height:0; min-width:0; overflow:clip; touch-action:none; isolation:isolate; }
.forever-board-canvas:focus-visible { outline:1px solid var(--line,#dcd8ce); outline-offset:-1px; }
.forever-board-canvas[data-tool="hand"] { cursor:grab; }
.forever-board-canvas[data-tool="text"], .forever-board-canvas[data-tool="sticky"] { cursor:text; }
.forever-board-canvas[data-tool="pen"], .forever-board-canvas[data-tool="rectangle"], .forever-board-canvas[data-tool="ellipse"], .forever-board-canvas[data-tool="line"], .forever-board-canvas[data-tool="arrow"] { cursor:crosshair; }
/* Viewport dimensions belong to the outer frame; stop keyboard updates cascading through every card. */
.forever-board-world { position:absolute; top:0; left:0; width:0; height:0; transform-origin:0 0; --board-visual-height:0px; --board-visual-top:0px; }
/* Divider frames move the canvas edge, and the notes attached to it, on screen. A layer
   makes that a compositor move instead of re-rastering every note on each frame. */
.forever-board:is([data-board-resizing],[data-board-settling]) .forever-board-world { will-change:transform; }
/* Zoom frames (pinch, wheel, buttons, Fit) scale the layer's existing raster instead of
   re-rastering notes and images at each scale; it re-rasters once the camera rests. */
.forever-board-canvas[data-canvas-motion="zoom"] .forever-board-world { will-change:transform; }
@media (hover:none), (pointer:coarse) {
    /* At phone pixel densities a world layer makes every overflowing preview its own scroll
       layer, which costs more per frame than re-rastering. So released divider springs, glides, zoom
       eases, wheel pans and the settle tail stay unpromoted; previews there stay scrollable. */
    .forever-board:is([data-board-resizing],[data-board-settling]) .forever-board-world,
    .forever-board-canvas[data-canvas-motion] .forever-board-world { will-change:auto; }
    /* The divider owns pointer capture during a held resize. Clip preview
       scrolling for those frames so the world can move as one layer, without
       promoting every overflowing preview. Restore scrolling on release. */
    .forever-board[data-board-resizing] .forever-board-world { will-change:transform; }
    /* A held pan or pinch clips previews (forever-canvas-cards.css), so the world moves as a
       layer then; touch screens have no LCD text to keep. */
    .forever-board-canvas[data-canvas-gesture] .forever-board-world { will-change:transform; }
}
.forever-board-svg { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
.forever-board-item { position:absolute; user-select:none; -webkit-user-select:none; }
.forever-board-item[data-kind="text"], .forever-board-item[data-kind="sticky"], .forever-board-item[data-kind="image"] { cursor:move; }
.forever-board-item img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.forever-board-text { display:flex; flex-direction:column; overflow:hidden; background:transparent; border:0; padding:4px; }
.forever-board-text textarea { display:block; width:100%; margin:0; padding:0; border:0; border-radius:0; outline:none; resize:none; background:transparent; color:inherit; font-family:var(--planner-font); line-height:1.5; cursor:inherit; }
.forever-board-text textarea:not([readonly]) { cursor:text; user-select:text; -webkit-user-select:text; }
.forever-board-text textarea:focus-visible { outline:none; }
.forever-board-text-title { flex:none; height:28px; font-size:16px; font-weight:500; overflow:hidden; }
.forever-board-text-body { flex:1; min-height:0; font-size:16px; font-weight:400; }
.forever-board-text textarea::placeholder { color:var(--ink-soft,#66685f); opacity:1; }
.forever-board-sticky {
    padding:26px 18px 22px;
    border-radius:2px 2px 22px 2px;
    background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 45%,rgba(0,0,0,.025)),var(--sticky-paper,#f4dc83);
    box-shadow:0 2px 3px rgba(0,0,0,.12),2px 9px 16px -5px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.18);
    transform-origin:50% 12%;
    animation:board-sticky-enter 180ms cubic-bezier(.22,1,.36,1);
    transition:box-shadow 140ms ease;
}
.forever-board-sticky::after {
    content:""; position:absolute; right:0; bottom:0; width:22px; height:22px; pointer-events:none;
    border-radius:3px 0 22px 0;
    background:linear-gradient(135deg,rgba(0,0,0,.09),rgba(255,255,255,.38) 52%,rgba(255,255,255,.12)),var(--sticky-paper,#f4dc83);
    box-shadow:-2px -2px 3px rgba(0,0,0,.08);
}
.forever-board-sticky.is-selected, .forever-board-sticky.is-editing { box-shadow:0 3px 5px rgba(0,0,0,.13),3px 12px 22px -5px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.2); }
.forever-board-sticky textarea { position:relative; line-height:1.55; }
.forever-board-sticky textarea::placeholder { color:inherit; opacity:1; }
.forever-board-sticky[data-fill="none"] { background:transparent; box-shadow:none; border-radius:2px; }
.forever-board-sticky[data-fill="none"]::after { display:none; }
@keyframes board-sticky-enter { from { opacity:0; transform:translateY(5px) scale(.98); } to { opacity:1; transform:none; } }
.forever-board-selection-box { position:absolute; pointer-events:none; border:1px solid var(--focus,#66685f); }
.forever-board-handle { position:absolute; width:8px; height:8px; padding:0; border:1px solid var(--focus,#66685f); border-radius:1px; background:var(--paper,#f7f5ef); pointer-events:auto; }
.forever-board-marquee { position:absolute; pointer-events:none; border:1px solid var(--focus,#66685f); background:color-mix(in srgb,var(--focus,#66685f) 10%,transparent); }
/* Shown while too many files are dragged over the canvas, before the drop is rejected. */
.forever-board-drop-hint { position:absolute; z-index:3; left:50%; top:50%; box-sizing:border-box; width:max-content; max-width:min(65ch,calc(100% - 24px)); margin:0; padding:8px 12px; transform:translate(-50%,-50%); border:1px solid var(--line,#d8d4ca); border-radius:9px; background:var(--surface,#fffdf8); color:var(--ink,#262823); box-shadow:0 6px 18px rgb(24 22 18 / 10%); font-size:.8rem; line-height:1.4; text-align:center; pointer-events:none; }
.forever-board-empty { position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:var(--ink-soft,#66685f); font-size:.8rem; text-align:center; pointer-events:none; }
.forever-board-image-loading { display:grid; place-items:center; height:100%; color:var(--ink-soft,#66685f); font-size:.8rem; }
.forever-board-error { flex:none; display:flex; align-items:center; gap:8px; padding:0 4px 7px; color:var(--danger,#a33a34); font-size:.75rem; }
.forever-board-error button { border:0; padding:2px 4px; background:transparent; text-decoration:underline; }
.forever-board-loading { position:absolute; inset:50% 0 auto; text-align:center; color:var(--ink-soft,#66685f); font-size:.8rem; }
/* The keyboard overlays the full-screen surface. Only the camera follows its
   visible bounds; shrinking this frame also reveals the planner underneath. */
.forever-board.is-expanded { position:fixed; inset:0; top:var(--board-visual-top,0); z-index:190; width:100%; height:100dvh!important; margin:0!important; padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); background:var(--board-expanded-background,var(--paper,#f7f5ef)); }
@media screen and (forced-colors:none) {
    /* Reuse the live theme layers so expanding never restarts their color animation. */
    .planner-shell:has(> :is(.premium-atmosphere,.custom-theme-atmosphere)) .forever-board { --board-expanded-background:transparent; }
    .planner-shell:has(.forever-board:is(.is-expanded,[data-board-animating])) > :is(.premium-atmosphere,.custom-theme-atmosphere) { z-index:189; }
    .planner-shell:has(.forever-board:is(.is-expanded,[data-board-animating])) > :is(.premium-atmosphere-frame,.custom-theme-frame,.sakura-atmosphere) { z-index:191; }
}
.forever-board.is-expanded .forever-board-divider { display:none; }
html:has(.forever-board.is-expanded), body:has(.forever-board.is-expanded) { overflow:hidden; }
@media (max-width:800px) {
    .forever-board { --board-height:440px; margin:0 12px 20px; }
    .forever-board:not(.is-expanded):not(.is-contained) { min-height:min(440px,max(160px,calc(100dvh - 136px))); }
    .forever-board-header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; padding:0 0 7px; }
    .forever-board-header h2 { grid-column:1; grid-row:1; min-width:0; font-size:.94rem; }
    .forever-board-more-toggle { grid-column:2; grid-row:1; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; max-width:130px; padding:5px 8px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:transparent; color:var(--ink,#262823); font:500 .75rem/1.2 var(--planner-font); }
    .forever-board-expand { grid-column:3; grid-row:1; }
    .forever-board-toolbar { grid-column:1/-1; grid-row:2; display:grid; gap:6px; width:100%; margin:0; }
    .forever-board-primary-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
    .forever-board-actions { display:grid; grid-template-columns:44px 44px minmax(0,1fr) minmax(0,1fr); gap:5px; padding:0; border:0; }
    .forever-board-toolbar button { width:100%; min-width:44px; height:44px; gap:5px; border-color:var(--line,#dcd8ce); border-radius:8px; }
    .forever-board-primary-tools button { flex-direction:column; gap:2px; }
    .forever-board-button-label { display:block; font-size:.72rem; line-height:1.15; }
    .forever-board-toolbar button[aria-pressed="true"] { border-color:var(--accent,#c76345); background:var(--accent-soft,#f1d9cf); color:var(--ink,#262823); }
    .forever-board .forever-board-more-panel { display:flex; flex-direction:column; align-items:stretch; gap:10px; position:absolute; z-index:10; top:100%; right:0; left:0; max-height:min(340px,var(--board-tools-height,calc(100dvh - 220px))); overflow-y:auto; overscroll-behavior:contain; padding:12px; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--surface,#fffdf8); box-shadow:0 10px 24px rgba(24,22,18,.14); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px) scale(.98); transform-origin:top right; transition:opacity 160ms ease,transform 200ms cubic-bezier(.22,1,.36,1),visibility 0s linear 200ms; }
    .forever-board.tools-open .forever-board-more-panel { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-duration:220ms,220ms,0s; transition-delay:0s; }
    .forever-board-extra-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; overflow:visible; }
    .forever-board-extra-tools > button { width:100%; height:auto; min-height:44px; flex-direction:column; gap:3px; padding:5px; border-color:var(--line,#dcd8ce); border-radius:8px; }
    .forever-board-extra-tools .forever-board-button-label { font-size:.66rem; }
    .forever-board-stroke { grid-column:1/span 2; display:flex; align-items:center; gap:8px; min-width:0; }
    .forever-board-stroke .forever-board-button-label { flex:1; }
    .forever-board-extra-tools select { min-width:64px; height:44px; border:1px solid var(--line,#dcd8ce); padding:5px; font-size:16px; }
    .forever-board-view-tools { grid-column:1/-1; display:grid; grid-template-columns:44px minmax(44px,1fr) 44px minmax(0,1.5fr); gap:5px; }
    .forever-board-view-tools button, .forever-board-extra-tools .forever-board-zoom { width:100%; height:44px; gap:4px; border-color:var(--line,#dcd8ce); border-radius:8px; }
    .forever-board-properties { flex:none; min-width:0; width:100%; }
    .forever-board-properties .board-color-picker { flex:1; }
    .board-color-trigger { width:100%; min-height:44px; }
    .board-color-hex-row input { font-size:16px; }
    .forever-board-expand { width:44px; height:44px; }
    .forever-board-handle::before { content:""; position:absolute; left:50%; top:50%; width:var(--board-handle-target-size,36px); height:var(--board-handle-target-size,36px); transform:translate(-50%,-50%); }
    .forever-board-text-toolbar { inset-inline:0; gap:6px; width:100%; max-width:100%; max-height:max(44px,calc(var(--board-visual-height,100dvh) - 220px)); padding:6px; overflow-y:auto; overscroll-behavior:contain; box-shadow:0 8px 22px rgba(24,22,18,.16); }
    .forever-board.tools-open .forever-board-text-toolbar { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px) scale(.98); transition-duration:140ms,200ms,0s; transition-delay:0s,0s,200ms; }
    .forever-board-text-toolbar button { width:36px; height:40px; }
    .forever-board-font-size-field { height:40px; font-size:16px; }
    .forever-board-stroke-field { height:44px; }
    .forever-board-font-size input, .forever-board-stroke-field input { font-size:16px; }
    .forever-board-text-formats, .forever-board-text-alignment { padding-left:6px; }
}
/* The divider stays attached to the header while the board's height follows the magnetic spring. */
.forever-board:is([data-board-docked],[data-board-resizing],[data-board-settling]):not(.is-expanded):not(.is-contained) { min-height:0; }
.forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) { height:56px; }
.forever-board[data-board-resizing] { user-select:none; -webkit-user-select:none; }
.forever-board[data-board-resizing] .forever-board-divider::after, .planner-bottom-row[data-board-resizing] .planner-bottom-divider::after { transition:background-color 160ms ease,box-shadow 160ms ease,opacity 160ms ease; }
.forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) .forever-board-divider::before, .planner-bottom-row[data-board-docked] .planner-bottom-divider::before { top:-1px; }
.forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) .forever-board-divider::after, .planner-bottom-row[data-board-docked] .planner-bottom-divider::after { opacity:calc(.58 + var(--board-magnet-pull,0) * .42); background:var(--accent,#c76345); box-shadow:0 0 calc(var(--board-magnet-pull,0) * 12px) color-mix(in srgb,var(--accent,#c76345) 35%,transparent); }
.forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) .forever-board-header { min-height:0; }
.forever-board-toolbar, .forever-board-more-panel, .forever-board-canvas, .unscheduled-content { transition:opacity 140ms ease,visibility 0s linear; }
.forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) :is(.forever-board-toolbar,.forever-board-more-panel,.forever-board-more-toggle,.forever-board-canvas) { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 140ms ease,visibility 0s linear 140ms; }
/* The magnet's spring reaches the strip layout about 70 ms after capture on a short panel; the
   rows and notes it keeps in place fade out before then. */
.forever-board[data-board-docked][data-board-docking]:not(.is-expanded):not(.is-contained) :is(.forever-board-toolbar,.forever-board-more-panel,.forever-board-more-toggle,.forever-board-canvas) { transition:opacity 60ms ease-out,visibility 0s linear 60ms; }
/* Name the hidden children: a featureless subject would restyle every canvas item whenever the
   docked or docking flag changes. Floating and zero-height children hide at the capture without
   moving the canvas; the in-flow notice fades and keeps its space while the spring docks the panel. */
.forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) > :is(.forever-board-text-toolbar-anchor,.forever-board-notices,.forever-board-loading,.planner-snackbar) { display:none; }
.forever-board[data-board-docked]:not([data-board-docking]):not(.is-expanded):not(.is-contained) > .forever-board-selection-notice { display:none; }
.forever-board[data-board-docking]:not(.is-expanded):not(.is-contained) > .forever-board-selection-notice { opacity:0; visibility:hidden; transition:opacity 60ms ease-out,visibility 0s linear 60ms; }
/* Undocking on touch shows the canvas at once: a fade would add a group-opacity pass over its
   layers during the first, heaviest frames of the pull. Docking fades it out in place, attached
   to the top edge; phone Timeline hides it at the snap, because the strip moves beside Someday. */
@media (hover:none), (pointer:coarse) { .forever-board-canvas { transition:none; } }
.planner-bottom-row:is([data-board-docked],[data-board-resizing],[data-board-settling]) { min-height:0; }
@media (min-width:801px) {
    .planner-bottom-row[data-board-docked] > .unscheduled-tray > .unscheduled-content { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 140ms ease,visibility 0s linear 140ms; }
}
@media (max-width:800px) {
    .forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) { height:72px; }
    .planner-bottom-row[data-view="timeline"] > .forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) { height:44px; }
    .planner-bottom-row[data-view="timeline"] > .forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) :is(.forever-board-toolbar,.forever-board-more-panel,.forever-board-more-toggle,.forever-board-canvas) { transition:none; }
    .forever-board[data-board-docked]:not([data-board-docking]):not(.is-expanded):not(.is-contained) .forever-board-header { display:flex; min-height:63px; }
    .forever-board[data-board-docked]:not([data-board-docking]):not(.is-expanded):not(.is-contained) .forever-board-header h2 { flex:1; }
    .forever-board[data-board-docked]:not([data-board-docking]):not(.is-expanded):not(.is-contained) :is(.forever-board-toolbar,.forever-board-more-toggle) { display:none; }
    /* The phone More panel floats over the canvas, so it closes at the capture without moving it. */
    .forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) .forever-board-more-panel { display:none; }
}
.week-grid { min-height:calc(100dvh - 160px); display:grid; grid-template-columns:repeat(7,minmax(130px,1fr)); overflow:auto; border:0; border-radius:0; background:transparent; }
.week-grid.combine-weekend { grid-template-columns:repeat(6,minmax(130px,1fr)); grid-template-rows:1fr 1fr; }
.week-grid.no-weekends { grid-template-columns:repeat(5,minmax(130px,1fr)); }
.weekend-resize-handle { display:none; }
.week-grid.combine-weekend .combined-weekday { grid-row:1 / span 2; }
.week-grid.combine-weekend .combined-saturday { grid-column:6; grid-row:1; border-right:0; }
.week-grid.combine-weekend .combined-sunday { grid-column:6; grid-row:2; border-top:1px solid var(--line,#dcd8ce); border-right:0; }
.week-grid.combine-weekend.starts-sunday .combined-sunday { grid-column:1; grid-row:1; border-top:0; border-right:1px solid var(--line,#dcd8ce); }
.week-grid.combine-weekend.starts-sunday .combined-saturday { grid-column:1; grid-row:2; border-top:1px solid var(--line,#dcd8ce); border-right:1px solid var(--line,#dcd8ce); }
.week-grid.combine-weekend.starts-sunday .combined-weekday.is-friday { border-right:0; }
.day-column { position:relative; min-width:0; padding:0 6px 9px; display:flex; flex-direction:column; border-right:1px solid var(--line,#dcd8ce); background:transparent; }
.day-column:last-child { border-right:0; }
.day-header { position:sticky; top:0; z-index:2; min-height:65px; padding:10px 3px; display:flex; align-items:center; justify-content:space-between; gap:5px; border-bottom:1px solid var(--line,#dcd8ce); background:transparent; }
:is(.week-view,.month-mobile-agenda) .day-header:focus-within { z-index:7; }
.day-label { cursor:default; min-width:44px; min-height:44px; margin:0 0 0 -4px; padding:4px; display:flex; align-items:baseline; justify-content:flex-start; gap:6px; border:0; border-radius:7px; background:transparent; color:inherit; text-align:left; white-space:nowrap; }
.day-label > span { color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:500; line-height:1.4; letter-spacing:0; text-transform:none; }
.day-header strong { font:500 1.625rem/1.15 var(--planner-heading); }
.week-view .day-header { min-height:48px; padding:3px; gap:0; }
.week-view .day-label { flex:none; min-width:0; min-height:36px; padding:2px 4px; }
/* Equal offsets preserve the weekday and date's shared text baseline. */
.week-view .day-label > :is(span,strong) { position:relative; top:-.0625rem; }
.day-column.is-today .day-header { border-bottom-color:var(--accent,#c76345); }
.day-column.is-today .day-label { background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 25%,transparent); }
.day-column.is-today .day-label > span { color:inherit; }
.day-events { padding:9px 0 2px; display:grid; gap:5px; }
.event-chip { width:100%; min-height:31px; padding:5px 7px; display:grid; grid-template-columns:3px auto minmax(0,1fr); align-items:start; gap:6px; overflow:hidden; border:0; border-radius:5px; background:color-mix(in srgb,var(--sage,#687b69) 9%,transparent); color:var(--ink,#262823); text-align:left; font-size:.67rem; }
.event-chip.wide { grid-template-columns:3px 48px minmax(0,1fr); }
.event-chip > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-line { width:3px; min-height:19px; border-radius:4px; background:var(--sage,#687b69); }
.event-chip time { color:var(--ink-soft,#66685f); }
/* Row-owned spacing collapses with deletion/completion instead of vanishing
   one frame later when Blazor removes an empty grid track. */
.day-tasks { --task-row-spacing:5px; padding-top:6px; display:grid; gap:0; }
.day-tasks > .planner-task { margin-bottom:var(--task-row-spacing); }
/* Rows with details keep a footer; plain tasks share one row with their actions. */
.planner-task { position:relative; min-width:0; padding:6px 3px; display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:8px; border:1px solid transparent; border-bottom-color:color-mix(in srgb,var(--line,#dcd8ce) 45%,transparent); border-radius:var(--custom-radius,7px); background:transparent; cursor:default; transition:background-color 180ms ease; }
.planner-task[data-task-deleting] { pointer-events:none; }
.planner-task:hover:where(:not([data-touch-input] *)), .planner-task.inline-task-draft { background:color-mix(in srgb,var(--surface,#fffdf8) 55%,transparent); }
/* A chosen task color is the surface itself, with shared contrasting ink. */
:is(.planner-task,.month-mobile-task,.timeline-block.task,.timeline-unscheduled-task,.suggestion).is-colored { --ink:var(--task-color-ink); --ink-soft:var(--task-color-ink); --muted:var(--task-color-ink); --focus:var(--task-color-ink); color:var(--task-color-ink); }
.planner-task.is-colored { border-color:var(--task-color); background:var(--task-color); box-shadow:none; transition:background-color 180ms ease,border-color 150ms ease,outline-color 150ms ease; }
@media (prefers-reduced-motion:reduce) { .planner-task, .planner-task.is-colored { transition:none; } }
.planner-task.is-complete .task-content { opacity:.8; }
.planner-task.is-complete .task-title { opacity:.85; }
.task-check { width:24px; height:24px; display:grid; place-items:center; align-self:center; padding:0; border:1px solid var(--ink-soft,#66685f); border-radius:50%; background:transparent; touch-action:manipulation; transition:filter 150ms ease,border-color 180ms ease; }
.task-check:hover:where(:not([data-touch-input] *)) { border-color:var(--task-complete,#278653); background:color-mix(in srgb,var(--task-complete,#278653) 12%,transparent); }
/* Keep the hit area fixed so pressing the rim still releases on the button. */
.task-check:active { filter:brightness(.85); transition-duration:65ms; }
.task-check-ring { display:contents; }
.task-check svg { width:14px; }
.is-complete .task-check { border-color:var(--task-complete,#278653); background:var(--task-complete,#278653); color:#fff; }
:is(.planner-task,.task-details-title-row).is-colored .task-check { border-color:var(--ink); }
.task-completion-layer { position:fixed; inset:0; z-index:108; overflow:hidden; pointer-events:none; }
.task-completion-layer * { pointer-events:none; }
.task-completion-feedback { position:absolute; display:grid; place-items:center; border:1px solid var(--ink-soft,#66685f); border-radius:50%; background:var(--paper,#f7f5ef); }
.task-completion-feedback.is-complete { border-color:var(--task-complete,#278653); background:var(--task-complete,#278653); }
.task-completion-feedback svg { width:65%; height:65%; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.task-completion-burst { position:absolute; width:0; height:0; }
.task-completion-ring, .task-completion-badge { position:absolute; width:var(--completion-size); height:var(--completion-size); left:calc(var(--completion-size) / -2); top:calc(var(--completion-size) / -2); border-radius:50%; }
.task-completion-ring { border:2px solid currentColor; }
.task-completion-ray { position:absolute; left:0; top:-1.25px; width:0; height:2.5px; transform-origin:0 50%; }
.task-completion-dash { position:absolute; width:20px; height:2.5px; border-radius:999px; transform-origin:0 50%; }
.task-completion-spark-track { position:absolute; left:0; top:0; width:0; height:0; }
.task-completion-spark { position:absolute; left:-2.5px; top:-2.5px; width:5px; height:5px; border-radius:1px; }
.task-completion-badge { display:grid; place-items:center; background:var(--completion-color); box-shadow:0 0 18px color-mix(in srgb,var(--completion-color) 35%,transparent); }
.task-completion-badge svg { width:65%; height:65%; overflow:visible; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.task-completion-badge path { stroke-dasharray:24; stroke-dashoffset:0; }
/* A static emblem serves the native feedback, burst and settled checkbox. */
html[data-theme="sakura"] { --task-completion-art:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M14.47 12.40C12.27 7.14 13.57-1.04 18.09 1.80L20 4L21.91 1.80C26.43-1.04 27.73 7.14 25.53 12.40C29.84 8.68 38.02 7.38 36.72 12.56L35.22 15.06L37.90 16.20C42 19.62 34.62 23.37 28.94 22.90C33.81 25.86 37.57 33.24 32.25 33.60L29.40 32.94L29.15 35.85C27.16 40.80 21.31 34.94 20 29.40C18.69 34.94 12.84 40.80 10.85 35.85L10.60 32.94L7.75 33.60C2.43 33.24 6.19 25.86 11.06 22.90C5.38 23.37-2 19.62 2.10 16.20L4.78 15.06L3.28 12.56C1.98 7.38 10.16 8.68 14.47 12.40Z' fill='%23f2b3cd' stroke='%23d9739e' stroke-width='1'/%3E%3C/svg%3E"); --task-completion-ink:#482039; }
html[data-theme="premium"] { --task-completion-art:radial-gradient(circle closest-side,#ffe0a3 0%,#ffc574 38%,#ffab55 56%,#fd9444 70%,#ec6a2d 88%,transparent 100%); --task-completion-ink:#371c11; }
html:is([data-theme="sakura"],[data-theme="premium"]) .is-complete .task-check { border-color:transparent; background:transparent; color:var(--task-completion-ink); }
html:is([data-theme="sakura"],[data-theme="premium"]) :is(.planner-task,.task-details-title-row).is-complete .task-check-ring { position:relative; display:grid; place-items:center; width:24px; height:24px; border:0; background:transparent; }
html:is([data-theme="sakura"],[data-theme="premium"]) .month-view .planner-task.is-complete .task-check-ring { width:20px; height:20px; }
html:is([data-theme="sakura"],[data-theme="premium"]) .planner-task.timeline-drag-proxy.is-complete .task-check-ring { width:15px; height:15px; }
html:is([data-theme="sakura"],[data-theme="premium"]) .is-complete .task-check-ring::before { content:""; position:absolute; inset:0; background:var(--task-completion-art) center/contain no-repeat; pointer-events:none; }
html:is([data-theme="sakura"],[data-theme="premium"]) .is-complete .task-check svg { position:relative; color:var(--task-completion-ink); }
html:is([data-theme="sakura"],[data-theme="premium"]) .task-completion-feedback.is-complete { border:0; background:var(--task-completion-art) center/contain no-repeat; }
html:is([data-theme="sakura"],[data-theme="premium"]) .task-completion-feedback.is-complete svg { width:58%; height:58%; stroke:var(--task-completion-ink); }
html:is([data-theme="sakura"],[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status { border:0; background:var(--task-completion-art) center/contain no-repeat; }
html:is([data-theme="sakura"],[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status svg { stroke:var(--task-completion-ink); }
.task-completion-burst--sakura .task-completion-ring, .task-completion-burst--premium .task-completion-ring { border-width:1px; }
.task-completion-burst--sakura .task-completion-badge, .task-completion-burst--premium .task-completion-badge { background:var(--task-completion-art) center/contain no-repeat; box-shadow:none; }
.task-completion-burst--sakura .task-completion-badge svg, .task-completion-burst--premium .task-completion-badge svg { width:58%; height:58%; stroke:var(--task-completion-ink); }
.task-completion-petal { position:absolute; left:-5px; top:-7px; width:10px; height:14px; fill:currentColor; }
.task-completion-solar-ray { position:absolute; left:0; top:-.75px; width:20px; height:1.5px; border-radius:999px; transform-origin:0 50%; background:linear-gradient(90deg,transparent,currentColor 30%,currentColor 80%,transparent); }
@media (prefers-reduced-motion:reduce), (forced-colors:active), print { .task-completion-burst { display:none; } .task-check { transition:none; } }
@media (forced-colors:active) {
    html:is([data-theme="sakura"],[data-theme="premium"]) .is-complete .task-check-ring::before { display:none; }
    html:is([data-theme="sakura"],[data-theme="premium"]) :is(.planner-task,.task-details-title-row).is-complete .task-check-ring { border:1px solid ButtonText; border-radius:50%; background:Highlight; }
    html:is([data-theme="sakura"],[data-theme="premium"]) .is-complete .task-check svg { color:HighlightText; }
    html:is([data-theme="sakura"],[data-theme="premium"]) .task-completion-feedback.is-complete, html:is([data-theme="sakura"],[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status { border:1px solid ButtonText; background:Highlight; }
    html:is([data-theme="sakura"],[data-theme="premium"]) .task-completion-feedback.is-complete svg, html:is([data-theme="sakura"],[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status svg { stroke:HighlightText; }
}
@media print {
    html:is([data-theme="sakura"],[data-theme="premium"]) .is-complete .task-check-ring::before { display:none; }
    html:is([data-theme="sakura"],[data-theme="premium"]) :is(.planner-task,.task-details-title-row).is-complete .task-check-ring, html:is([data-theme="sakura"],[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status { border:1px solid currentColor; border-radius:50%; background:transparent; }
    html:is([data-theme="sakura"],[data-theme="premium"]) .is-complete .task-check svg { color:inherit; }
    html:is([data-theme="sakura"],[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status svg { stroke:currentColor; }
}
.task-content { min-width:0; display:grid; gap:2px; }
.task-body { min-width:0; width:100%; display:grid; text-align:left; }
button.task-body { padding:0; border:0; background:transparent; cursor:inherit; }
.task-title { position:relative; top:-2px; overflow:hidden; color:var(--ink,#262823); font-size:1rem; font-weight:500; line-height:1.5; overflow-wrap:anywhere; text-overflow:ellipsis; white-space:pre-line; }
.planner-shell .task-secondary-meta { min-width:0; display:flex; align-items:center; gap:4px 7px; }
.planner-shell .task-secondary-meta > :first-child { min-width:0; }
.planner-shell .task-description-indicator, .planner-shell .task-attachment-indicator { flex:0 0 14px; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; overflow:visible; color:var(--ink-soft,#66685f); line-height:1; vertical-align:middle; }
.task-description-indicator svg, .task-attachment-indicator svg { display:block; flex:none; }
.task-footer { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.task-meta { flex:1 1 60px; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:400; line-height:1.45; overflow-wrap:anywhere; }
button.task-meta { padding:0; border:0; background:transparent; color:var(--ink-soft,#66685f); font:400 .8125rem/1.45 var(--planner-font); text-align:left; cursor:inherit; }
.task-meta--calendar-only { min-height:15px; }
.planner-task[draggable="true"] .task-meta { user-select:none; -webkit-user-select:none; }
.task-actions { position:absolute; top:50%; right:1px; z-index:2; display:flex; align-items:center; transform:translateY(-50%); }
.planner-task.no-metadata .task-content { grid-template-columns:minmax(0,1fr); gap:0; align-items:center; }
.planner-task.no-metadata .task-meta { display:none; }
.planner-task.no-metadata .task-footer { display:none; }
.task-time { color:var(--accent-deep,#9f422b); font-weight:500; }
.task-creator { display:inline-flex; flex:none; align-items:center; gap:8px; max-width:100%; vertical-align:middle; }
.task-meta > .task-creator, .task-secondary-meta > .task-creator { order:-1; }
.task-creator-picture { display:inline-flex; flex:0 0 1.25rem; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; overflow:hidden; border-radius:50%; background:#ececec; color:#262823; box-shadow:0 0 0 1px #bfc0c0; font:600 .625rem/1 var(--planner-font); }
.task-creator-picture img { display:block; width:100%; height:100%; object-fit:cover; }
.task-creator-picture svg { display:block; flex:none; }
.task-creator-detail { margin-top:10px; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; }
.task-creator-detail .task-creator-picture { flex-basis:2rem; width:2rem; height:2rem; font-size:.75rem; }
.task-creator-label { min-width:0; overflow-wrap:anywhere; }
.task-assignee { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; color:var(--ink-soft,#66685f); vertical-align:middle; }
.task-assignee-label { font:400 .6875rem/1.35 var(--planner-font); }
.task-assignee-picture { display:inline-flex; flex:0 0 1.25rem; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; overflow:hidden; border-radius:50%; background:#ececec; color:#262823; box-shadow:0 0 0 1px #bfc0c0; font:600 .625rem/1 var(--planner-font); }
.task-assignee-picture img { display:block; width:100%; height:100%; object-fit:cover; }
.task-assignee-picture svg { display:block; flex:none; }
.planner-shell button.task-assignee-open { display:inline-flex; flex:none; align-items:center; justify-content:flex-end; min-width:0; max-width:100%; margin-inline-start:auto; padding:0; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.task-assignee-open:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:3px; }
.task-footer:has(.task-assignee-open) .task-meta { flex-basis:auto; }
.task-secondary-meta:has(.task-assignee) { flex-wrap:wrap; }
.task-secondary-meta > .task-assignee { margin-inline-start:auto; }
.task-assignee-detail { gap:8px; flex-wrap:wrap; }
.task-assignee-detail .task-assignee-picture { flex-basis:2rem; width:2rem; height:2rem; font-size:.75rem; }
.task-assignee-detail .task-assignee-label { font-size:.8125rem; }
.task-assignee-name { min-width:0; overflow-wrap:anywhere; color:var(--ink,#262823); font:500 .875rem/1.4 var(--planner-font); }
.task-details-assignee { margin:0; }
.task-assignee-group { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; max-width:100%; }
.task-assignee-group > .task-assignee:not(:first-child) .task-assignee-label { display:none; }
.deadline-mark { color:var(--danger,#a33a34); }
.planner-task.is-colored :is(.task-time,.deadline-mark) { color:var(--ink); }
.task-more { width:26px; height:26px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--ink-soft,#66685f); opacity:0; transition:opacity 120ms ease,color 120ms ease,transform 200ms cubic-bezier(.22,1.4,.36,1); }
.planner-task:hover:where(:not([data-touch-input] *)) .task-more, .planner-task:focus-within .task-more, .task-more:focus-visible, .task-more[aria-expanded="true"] { opacity:1; }
.planner-task:not(:hover:where(:not([data-touch-input] *))):has([data-modal-return-focus-quiet]:focus) .task-more:not(:focus-visible):not([aria-expanded="true"]) { opacity:0; }
.task-more:hover:where(:not([data-touch-input] *)), .task-more[aria-expanded="true"] { color:var(--accent,#c76345); transform:scale(1.12); }
.planner-task.is-colored .task-more { color:var(--ink); }
/* The dots float over the end of long titles. While they show, only the text right around them fades, not the full height of the card. */
.planner-task:is(:hover:where(:not([data-touch-input] *)), :focus-within:not(:has([data-modal-return-focus-quiet]:focus)), [data-task-options-revealed], :has(.task-more:is(:focus-visible,[aria-expanded="true"]))) .task-content { --task-more-hole:radial-gradient(calc(var(--task-more-cover,26px) / 2 + 12px) calc(var(--task-more-cover,26px) / 2 + 2px) at right calc(var(--task-more-cover,26px) / 2 - 3px) top 50%,transparent 55%,#000 100%); -webkit-mask-image:var(--task-more-hole); mask-image:var(--task-more-hole); }
.task-action-bar { flex-wrap:wrap; position:fixed; inset:auto; z-index:130; margin:0; padding:5px; width:max-content; max-width:calc(100vw - 16px); display:none; align-items:center; justify-content:flex-end; gap:4px; overflow:visible; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); box-shadow:0 8px 28px #0003,0 2px 5px #0002; transform-origin:80% 0; }
.task-action-bar:popover-open, .task-action-bar[data-open="true"] { display:flex; animation:task-action-bar-in 150ms cubic-bezier(.22,1,.36,1) both; }
.task-action-bar::backdrop { background:transparent; pointer-events:none; }
.task-action-bar button { position:relative; flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:inherit; transition:color 120ms ease,background-color 120ms ease,transform 120ms ease; }
.task-action-bar button:hover:where(:not([data-touch-input] *)), .task-action-bar button:focus-visible, .task-action-bar button[aria-checked="true"], .task-action-bar button[aria-expanded="true"] { background:color-mix(in srgb,var(--accent,#c76345) 14%,transparent); color:var(--accent,#c76345); }
.task-action-bar button:focus-visible { outline:2px solid var(--accent,#c76345); outline-offset:1px; }
.task-action-bar button:active { transform:scale(.92); }
.task-action-bar button:disabled { opacity:.3; cursor:default; background:transparent; color:inherit; transform:none; }
.task-action-bar [data-task-action="delete"]:hover:where(:not([data-touch-input] *)) { color:var(--danger,#a33a34); background:color-mix(in srgb,var(--danger,#a33a34) 12%,transparent); }
@keyframes task-action-bar-in { from { opacity:0; } to { opacity:1; } }
@supports (transition-behavior:allow-discrete) {
    .task-action-bar { opacity:0; transition:opacity 150ms ease,display 150ms allow-discrete,overlay 150ms allow-discrete; }
    .task-action-bar:popover-open, .task-action-bar[data-open="true"] { animation:none; opacity:1; }
    @starting-style { .task-action-bar:popover-open, .task-action-bar[data-open="true"] { opacity:0; } }
}
@media (prefers-reduced-motion:reduce) { .task-action-bar:popover-open, .task-action-bar[data-open="true"] { animation:none; } .task-action-bar, .task-action-bar button, .task-more { transition:none; } .task-action-bar button:active { transform:none; } }
.week-view .planner-task[draggable="true"] .task-body { user-select:none; -webkit-user-select:none; }
.planner-task[data-task-touch-drag] { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.planner-task[data-task-touch-drag] :is(.task-body,.task-meta) { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.week-view .planner-task[data-dragging] { opacity:.3; }
.task-drag-layer { position:fixed; inset:0; z-index:105; pointer-events:none; overflow:hidden; }
.task-drag-proxy { position:absolute; margin:0!important; pointer-events:none; border-color:var(--line,#dcd8ce); border-radius:6px; background:var(--surface,#fffdf8); box-shadow:0 8px 24px rgba(0,0,0,.2); opacity:1!important; will-change:transform; }
.planner-task.task-drag-proxy.is-colored { border-color:var(--task-color); background:var(--task-color); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.task-drag-proxy .task-actions { visibility:hidden; }
.planner-task.timeline-drag-proxy { min-height:0; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:5px; padding:6px 5px; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-left:3px solid var(--accent,#c76345); border-radius:7px; }
.timeline-drag-proxy .task-content { min-height:0; gap:3px; align-content:center; }
.timeline-drag-proxy .task-title { top:0; font-size:.76rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.timeline-drag-proxy .task-check { width:20px; min-height:20px; height:20px; margin:0; }
.timeline-drag-proxy .task-check-ring { width:15px; height:15px; }
.timeline-drag-proxy .task-meta { font-size:.61rem; gap:5px; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; }
.planner-task.timeline-drag-proxy.is-compact { grid-template-columns:15px minmax(0,1fr); padding:1px 5px; gap:4px; align-items:center; }
.timeline-drag-proxy.is-compact .task-check { width:14px; min-height:14px; height:14px; }
.timeline-drag-proxy.is-compact .task-content { min-height:0; }
.timeline-drag-proxy.is-compact .task-title { top:0; font-size:.7rem; line-height:1.3; -webkit-line-clamp:1; }
.timeline-drag-proxy.is-compact .task-footer { display:none; }
.task-drag-gap { position:absolute; pointer-events:none; border:1px solid color-mix(in srgb,var(--accent,#c76345) 35%,transparent); border-radius:6px; background:color-mix(in srgb,var(--accent,#c76345) 5%,transparent); }
.planner-shell[data-planner-task-drag-active], .planner-shell[data-planner-task-drag-active] * { cursor:grabbing!important; }
.planner-shell[data-planner-task-pointer-drag], .planner-shell[data-planner-task-pointer-drag] * { user-select:none; -webkit-user-select:none; }
.week-view[data-task-pointer-drag] .day-column[data-drop-active], .month-view[data-task-pointer-drag] .month-cell[data-drop-active] { background:transparent; }
.week-view[data-task-pointer-drag] [data-drop-before]::before, .week-view[data-task-pointer-drag] [data-drop-after]::after,
.month-view[data-task-pointer-drag] [data-drop-before]::before, .month-view[data-task-pointer-drag] [data-drop-after]::after { display:none; }
.week-view[data-task-drop-pending] .planner-task[draggable="true"], .week-view[data-task-drop-pending] .planner-task[draggable="true"] .task-body,
.month-view[data-task-drop-pending] .planner-task[draggable="true"], .month-view[data-task-drop-pending] .planner-task[draggable="true"] .task-body { cursor:progress; }
.week-view .day-column { transition:background-color 160ms ease; }
.week-view .day-column[data-drop-active] { background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 42%,var(--surface,#fffdf8)); }
.planner-task[data-drop-before]::before, .planner-task[data-drop-after]::after,
.inline-task-entry[data-drop-before]::before {
    content:""; position:absolute; z-index:4; right:0; left:0; height:3px; border-radius:3px;
    background:var(--accent,#c76345); pointer-events:none; transform-origin:left center;
    animation:planner-drop-marker 160ms cubic-bezier(.22,1,.36,1) both;
}
.planner-task[data-drop-before]::before { top:-4px; }
.planner-task[data-drop-after]::after { bottom:-4px; }
.inline-task-entry[data-drop-before]::before { top:2px; }
.inline-task-entry { position:relative; --task-motion-duration:180ms; --task-motion-ease:cubic-bezier(.22,.8,.25,1); }
/* Overlay keyboards need scroll range below a focused draft at the page end. */
[data-inline-task-scroll-room]::after { content:""; display:block; grid-column:1 / -1; flex:none; height:var(--inline-task-scroll-room,0px); pointer-events:none; }
/* Make room smoothly while the editor fades in at its natural size. */
.inline-task-reveal { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr; animation:planner-task-unfold var(--task-motion-duration) var(--task-motion-ease) both; }
.inline-task-reveal[data-inline-continuing] { animation:none; }
.inline-task-reveal[data-inline-closing] { height:0; grid-template-rows:0fr; opacity:0; overflow:hidden; pointer-events:none; animation:none; }
/* Contain the opening row, with paint clearance at the scrollport's fractional right edge. */
.inline-task-reveal-body { min-width:0; min-height:0; padding-inline-end:2px; overflow:clip; }
.planner-shell .inline-add { width:100%; min-height:40px; margin-top:7px; padding:6px 2px; display:grid; grid-template-columns:16px 1fr; align-items:center; gap:4px; border:0; background:transparent; color:var(--ink-soft,#66685f); font-size:1rem; font-weight:400; line-height:1.5; text-align:left; opacity:1; transition:color 160ms ease; }
.planner-shell .inline-add:is(:focus-visible,:has(:focus-visible)), .planner-shell .inline-add:hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); }
.inline-task-entry .inline-add[data-quiet-focus]:focus-visible { outline:none; }
.inline-add-icon { display:inline-block; }
.inline-task-draft { margin-top:7px; grid-template-columns:24px minmax(0,1fr); row-gap:0; align-items:center; border-radius:6px; animation:planner-task-reveal var(--task-motion-duration) var(--task-motion-ease) both; }
.inline-task-draft:focus-within { border-color:var(--accent,#c76345); }
.inline-task-title { min-width:0; overflow:clip; align-self:start; }
.task-draft-check { width:24px; height:24px; display:grid; place-items:center; align-self:center; border:1px solid var(--ink-soft,#66685f); border-radius:50%; }
.planner-shell .inline-task-draft textarea { width:100%; min-width:0; padding:5px 0; border:0; background:transparent; color:var(--ink,#262823); font-size:1rem; font-weight:500; line-height:1.5; }
.inline-task-draft textarea:focus { outline:0; }
.inline-task-draft textarea { resize:none; overflow:hidden; display:block; }
.inline-task-calendar-picker { grid-column:1 / -1; min-width:0; }
.inline-task-feedback { margin-top:5px; display:flex; flex-wrap:wrap; align-items:center; gap:3px 6px; color:var(--danger,#a33a34); font-size:.7rem; }
.inline-task-feedback button { min-height:28px; padding:2px 0; border:0; background:transparent; color:inherit; font:inherit; text-decoration:underline; }
.inline-task-reveal-body .inline-task-feedback button:focus-visible { outline-offset:-2px; }
/* Week and Someday share the saved row's text and checkbox tracks while Add
   becomes the editor in place. Month and timed entries keep their own layout. */
.inline-task-entry[data-inline-task-replace] .inline-add { min-height:38px; margin-top:0; padding:6px 3px; border:1px solid transparent; grid-template-columns:24px minmax(0,1fr); gap:8px; }
.inline-task-entry[data-inline-task-replace] .inline-add-icon { width:24px; height:24px; display:grid; place-items:center; }
.inline-task-entry[data-inline-task-replace] .inline-add > span:last-child { position:relative; top:-2px; }
.inline-task-entry[data-inline-task-replace] .inline-task-reveal { animation:none; }
.inline-task-entry[data-inline-task-replace] .inline-task-reveal-body { padding-inline-end:0; }
.inline-task-entry[data-inline-task-replace] .inline-task-draft { min-height:38px; margin-top:0; row-gap:0; border-color:transparent; background:transparent; animation:none; }
.inline-task-entry[data-inline-task-replace] .inline-task-title { align-self:center; }
.inline-task-entry[data-inline-task-replace] textarea { position:relative; top:-2px; padding:0; }
.inline-task-entry[data-inline-task-replace] textarea::placeholder { color:var(--ink-soft,#66685f); opacity:1; font-weight:400; }
.inline-task-entry[data-inline-task-replace] .task-draft-check { border:0; color:var(--ink-soft,#66685f); }
.inline-task-entry[data-inline-task-replace] .inline-task-draft > :not(.inline-task-box) { position:relative; z-index:1; }
.inline-task-box { position:absolute; inset:-1px; border:1px solid var(--accent,#c76345); border-radius:inherit; background:color-mix(in srgb,var(--surface,#fffdf8) 55%,transparent); pointer-events:none; animation:inline-task-outline-in var(--task-motion-duration) var(--task-motion-ease) both; }
.inline-task-glyph { width:24px; height:24px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; }
.inline-task-glyph :is(circle,path) { vector-effect:non-scaling-stroke; }
.inline-task-glyph :is(circle,g) { transform-box:fill-box; transform-origin:center; }
.inline-task-glyph-circle { opacity:0; transform:scale(.35); }
.inline-task-glyph-plus { opacity:1; transform:none; }
.inline-task-draft .inline-task-glyph-circle { opacity:1; transform:none; animation:inline-task-circle-in var(--task-motion-duration) var(--task-motion-ease) both; }
.inline-task-draft .inline-task-glyph-plus { opacity:0; transform:rotate(90deg) scale(.35); animation:inline-task-plus-out var(--task-motion-duration) var(--task-motion-ease) both; }
[data-inline-entry-closing] textarea { caret-color:transparent; }
[data-inline-entry-closing] .inline-task-box { animation:inline-task-outline-in var(--task-motion-duration) var(--task-motion-ease) reverse both; }
[data-inline-entry-closing] .inline-task-glyph-circle { animation:inline-task-circle-in var(--task-motion-duration) var(--task-motion-ease) reverse both; }
[data-inline-entry-closing] .inline-task-glyph-plus { animation:inline-task-plus-out var(--task-motion-duration) var(--task-motion-ease) reverse both; }
.inline-task-reveal[data-inline-continuing]:not([data-inline-entry-closing]) :is(.inline-task-draft,.inline-task-box,.inline-task-glyph-circle,.inline-task-glyph-plus) { animation:none; }
@keyframes inline-task-outline-in { from { opacity:0; } to { opacity:1; } }
@keyframes inline-task-circle-in { from { opacity:0; transform:scale(.35); } to { opacity:1; transform:none; } }
@keyframes inline-task-plus-out { from { opacity:1; transform:none; } to { opacity:0; transform:rotate(90deg) scale(.35); } }
@media (prefers-reduced-motion:reduce) {
    .inline-task-box, .inline-task-glyph-circle, .inline-task-glyph-plus { animation:none!important; }
    [data-inline-entry-closing] .inline-task-box, [data-inline-entry-closing] .inline-task-glyph-circle { opacity:0; }
    [data-inline-entry-closing] .inline-task-glyph-plus { opacity:1; transform:none; }
}
.inline-day-note { flex:none; min-width:0; width:100%; margin-top:0; padding-top:0; display:flex; flex-direction:column; }
.inline-day-note-details { order:1; }
.inline-day-note-input { order:2; }
:is(.week-view,.month-mobile-agenda) .day-header > .inline-day-note { position:relative; flex:1 1 72px; align-self:center; min-width:0; width:auto; margin:0; padding:0; }
:is(.week-view,.month-mobile-agenda) .day-header .inline-day-note-details { position:absolute; z-index:8; top:calc(100% + 5px); left:0; right:auto; display:none; width:min(210px,calc(100vw - 24px)); padding:6px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); box-shadow:0 8px 24px rgba(0,0,0,.16); }
.week-grid:not(.starts-sunday) .day-column:is(.combined-saturday,.combined-sunday) .inline-day-note-details,
.week-grid.starts-sunday .day-column.is-friday .inline-day-note-details { right:0; left:auto; }
:is(.week-view,.month-mobile-agenda) .day-header .inline-day-note:has(.inline-day-note-feedback) .inline-day-note-details { display:block; }
.planner-shell .inline-day-note-input { display:block; width:100%; min-width:0; min-height:40px; height:40px; max-height:40px; padding:4px 5px; resize:none; overflow-x:auto; overflow-y:hidden; white-space:nowrap; border:0; border-radius:3px; background:transparent; color:var(--ink,#262823); font:inherit; font-size:1rem; font-weight:400; line-height:1.5; }
.inline-day-note-input::placeholder { color:var(--ink-soft,#66685f); opacity:1; }
/* Center the capitals without reducing the existing note editor's hit area. */
.planner-shell :is(.week-view,.month-mobile-agenda) .inline-day-note-input { --day-note-input-height:40px; box-sizing:border-box; padding:calc((var(--day-note-input-height) - 1lh) / 2 - .125em) 5px calc((var(--day-note-input-height) - 1lh) / 2 + .125em); }
/* A transparent resting outline lets the focus color fade in (app-foundation.css).
   Forced colors would paint that transparent outline, so it stays off there. */
.inline-day-note-input { outline:1px solid transparent; outline-offset:-1px; }
.inline-day-note-input:focus { outline:1px solid color-mix(in srgb,var(--accent,#c76345) 55%,transparent); outline-offset:-1px; }
@media (forced-colors:active) { .inline-day-note-input:not(:focus) { outline:none; } }
.inline-day-note-input:disabled { cursor:not-allowed; opacity:.55; }
.inline-day-note-feedback { margin:0 5px 4px; display:flex; flex-wrap:wrap; align-items:center; gap:3px 6px; color:var(--danger,#a33a34); font-size:.8125rem; line-height:1.45; }
.inline-day-note-feedback button { min-height:28px; padding:2px 0; border:0; background:transparent; color:inherit; font:inherit; text-decoration:underline; }
.inline-day-note:focus { outline:none; }
.day-header:focus-within { z-index:9; }
.day-note-calendar-name { order:3; padding-inline:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft,#66685f); font:400 .6875rem/1.4 var(--planner-font); }
.day-note-calendar-picker { position:absolute; z-index:9; top:calc(100% + 6px); left:0; display:none; box-sizing:border-box; width:min(260px,calc(100vw - 100px)); max-height:14rem; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; padding:6px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--paper,#f8f5ed); box-shadow:0 8px 24px rgba(0,0,0,.16); }
.inline-day-note:focus-within .day-note-calendar-picker { display:grid; gap:4px; transform-origin:top left; animation:profile-menu-enter 140ms cubic-bezier(.2,.8,.2,1); }
.week-grid:not(.starts-sunday) .day-column:is(.combined-saturday,.combined-sunday) .day-note-calendar-picker,
.week-grid.starts-sunday .day-column.is-friday .day-note-calendar-picker { right:0; left:auto; transform-origin:top right; }
@media (prefers-reduced-motion:reduce) { .inline-day-note:focus-within .day-note-calendar-picker { animation:none; } }
.day-note-calendar-choice { display:flex; align-items:center; gap:10px; box-sizing:border-box; min-width:0; min-height:44px; padding:9px 10px; border-radius:8px; cursor:pointer; color:var(--ink,#262823); font:400 .875rem/1.4 var(--planner-font); }
.day-note-calendar-copy { display:grid; flex:1; gap:5px; min-width:0; }
.day-note-calendar-title { display:flex; align-items:center; gap:7px; min-width:0; }
.day-note-calendar-title > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.day-note-calendar-icon { display:flex; flex:none; color:var(--calendar-color,var(--ink-soft,#66685f)); }
.day-note-calendar-icon svg { width:16px; height:16px; }
.planner-shell .day-note-calendar-choice input[type="radio"] { order:1; flex:none; width:17px; height:17px; min-height:0; margin:0; padding:0; accent-color:var(--accent,#c76345); }
.day-note-calendar-choice:has(input:checked) { background:var(--surface,#fffdf8); }
.day-note-calendar-choice:has(input:checked) .day-note-calendar-title { font-weight:600; }
.day-note-calendar-choice:hover:where(:not([data-touch-input] *)) { background:var(--paper-deep,#eeebe2); }
.day-note-calendar-choice:has(input:focus-visible) { outline:2px solid var(--focus,#66685f); outline-offset:-2px; }
.day-note-calendar-preview { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; color:var(--ink-soft,#66685f); font-size:.75rem; }
.day-note-calendar-readonly { color:var(--ink-soft,#66685f); font-size:.6875rem; }
:is(.week-view,.month-mobile-agenda) .day-header .inline-day-note:has(.day-note-calendar-picker) .inline-day-note-details { position:static; order:4; width:auto; box-shadow:none; }
@media (max-width:600px), (pointer:coarse) {
    .day-note-calendar-choice { min-height:48px; padding-block:10px; }
}
@media (forced-colors:active) {
    .day-note-calendar-picker { border-color:ButtonText; }
    .day-note-calendar-choice:has(input:checked) { outline:1px solid Highlight; }
}

.today-view { max-width:1180px; margin:0 auto; }
.today-summary { padding:12px 2px 25px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.today-summary > div:first-child { display:flex; align-items:center; gap:14px; }
.progress-ring { --progress:0; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--accent,#c76345) calc(var(--progress)*1%),var(--line,#dcd8ce) 0); }
.progress-ring::before { content:""; width:38px; height:38px; border-radius:50%; background:var(--paper,#f7f5ef); }
.today-summary strong { font-size:.9rem; }
.today-summary p { color:var(--ink-soft,#66685f); font-size:.76rem; }
.today-columns { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:30px; }
.today-section, .today-aside > section { margin-bottom:25px; padding:20px; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--surface,#fffdf8); }
.today-section > header, .today-aside section > header { margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.today-section h2, .today-aside h2 { font:650 1rem/1.25 var(--planner-font); letter-spacing:-.01em; }
.today-capture, .collection-capture { display:flex; gap:8px; margin-top:12px; }
.today-capture input, .collection-capture input { flex:1; min-width:0; min-height:40px; padding:8px 11px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--paper,#f7f5ef); }
.today-capture button, .collection-capture button { width:40px; border:0; border-radius:8px; background:var(--ink,#262823); color:var(--paper,#f7f5ef); }
.overdue-section { border-color:color-mix(in srgb,var(--danger,#a33a34) 30%,var(--line,#dcd8ce)); }
.today-events { display:grid; gap:6px; }
.today-section .planner-task { margin-top:5px; }
.suggestion { padding:10px 0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px; border-bottom:1px solid var(--line,#dcd8ce); text-align:left; }
.suggestion:last-child { border-bottom:0; }
.suggestion strong { font-size:.76rem; }
.suggestion p { color:var(--ink-soft,#66685f); font-size:.67rem; }
.suggestion button { border:0; background:transparent; color:var(--accent-deep,#9f422b); font-size:.69rem; font-weight:650; }
.offline-changes { padding:10px; border-radius:8px; background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); font-size:.7rem; }
.calm-empty { padding:18px 8px; color:var(--ink-soft,#66685f); text-align:center; font-size:.75rem; }
.calm-empty.large { min-height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.calm-empty h2 { font-size:1.65rem; color:var(--ink,#262823); }
.calm-empty p { max-width:420px; margin-top:10px; }
.timeline-unscheduled { padding:20px; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--surface,#fffdf8); }
.timeline-unscheduled h3 { font:650 .85rem/1.3 var(--planner-font); }
.timeline-unscheduled > p { margin-top:6px; color:var(--ink-soft,#66685f); font-size:.69rem; }
.timeline-wrap { display:grid; grid-template-columns:minmax(420px,1fr) 240px; gap:18px; }
.timeline { --minute-height:1.25px; position:relative; min-height:calc(var(--timeline-hours) * 60 * var(--minute-height)); margin-left:48px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface,#fffdf8); overflow:hidden; }
.timeline-hour { position:absolute; top:calc(var(--top) * var(--minute-height)); right:0; left:0; border-top:1px solid var(--line,#dcd8ce); }
.timeline-hour time { position:absolute; right:calc(100% + 8px); top:-8px; color:var(--ink-soft,#66685f); font-size:.63rem; }
.timeline-block { position:absolute; z-index:2; top:calc(var(--top) * var(--minute-height)); left:12px; width:calc(50% - 18px); min-height:calc(var(--height) * var(--minute-height)); padding:6px 8px; overflow:hidden; border:0; border-left:3px solid var(--sage,#687b69); border-radius:5px; background:color-mix(in srgb,var(--sage,#687b69) 13%,var(--surface,#fffdf8)); text-align:left; }
.timeline-block.task { left:50%; border-left-color:var(--accent,#c76345); background:color-mix(in srgb,var(--accent,#c76345) 12%,var(--surface,#fffdf8)); }
:is(.month-mobile-task,.timeline-block.task,.timeline-unscheduled-task,.suggestion).is-colored { border:1px solid var(--task-color); border-radius:7px; background:var(--task-color); box-shadow:none; }
:is(.month-mobile-task,.suggestion).is-colored { padding-inline:8px; }
.suggestion.is-colored button { color:var(--ink); }
.month-mobile-task.is-colored.is-complete .month-mobile-task-status { border-color:var(--ink); }
.timeline-block strong, .timeline-block span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline-block strong { font-size:.67rem; }
.timeline-block span { color:var(--ink-soft,#66685f); font-size:.58rem; }
.current-time { position:absolute; z-index:4; top:calc(var(--top) * var(--minute-height)); right:0; left:0; border-top:2px solid var(--danger,#a33a34); pointer-events:none; }
.current-time span { position:absolute; width:8px; height:8px; top:-5px; left:-1px; border-radius:50%; background:var(--danger,#a33a34); }
.timeline-unscheduled { height:max-content; }
.timeline-unscheduled article { padding:9px 0; border-bottom:1px solid var(--line,#dcd8ce); }
.timeline-unscheduled article > button { width:100%; padding:0; display:grid; gap:2px; overflow:hidden; border:0; background:transparent; text-align:left; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }
.timeline-unscheduled article > button.is-colored { padding:5px 6px 5px 8px; }
.timeline-unscheduled article > button > span:first-child { overflow:hidden; text-overflow:ellipsis; }
.timeline-unscheduled article > div { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }
.timeline-unscheduled article > div button { padding:3px 5px; border:1px solid var(--line,#dcd8ce); border-radius:5px; background:transparent; color:var(--ink-soft,#66685f); font-size:.59rem; }
@media (forced-colors:active) {
    :is(.planner-task,.month-mobile-task,.timeline-block.task,.timeline-unscheduled-task,.suggestion).is-colored { --ink:CanvasText; --ink-soft:CanvasText; --muted:CanvasText; --focus:Highlight; border:1px solid CanvasText; background:Canvas; color:CanvasText; box-shadow:none; }
    .planner-task.is-colored .task-more { background:Canvas; }
}

.month-view { min-width:0; display:flex; flex-direction:column; }
.month-weekdays { flex:none; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--line,#dcd8ce); }
.month-weekdays.no-weekends { grid-template-columns:repeat(5,minmax(0,1fr)); }
.month-weekdays span { padding:8px 9px 9px; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:500; line-height:1.4; text-transform:none; }
.month-grid { min-height:620px; display:grid; grid-template-columns:repeat(7,minmax(105px,1fr)); grid-template-rows:repeat(var(--month-week-count,5),minmax(108px,1fr)); overflow:hidden; background:transparent; }
.month-grid.no-weekends { grid-template-columns:repeat(5,minmax(105px,1fr)); }
.month-cell { position:relative; min-width:0; min-height:0; padding:5px 6px 6px; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--line,#dcd8ce); border-bottom:1px solid var(--line,#dcd8ce); background:transparent; transition:background-color 160ms ease,opacity 160ms ease; }
/* Keep an open draft and its calendar choices reachable within a short day cell. */
.month-cell:has(> .inline-task-entry .inline-task-draft) { overflow-y:auto; overscroll-behavior-y:contain; }
.month-cell-add-target { position:absolute; inset:0; z-index:0; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; cursor:default; }
.month-cell-add-mobile, .month-date-mobile, .month-mobile-agenda { display:none; }
.month-cell-header, .month-tasks { pointer-events:none; }
.month-date, .month-date-mobile, .month-items, .month-view .planner-task, .month-event, .month-cell > .inline-task-entry, .month-cell > .month-add { position:relative; z-index:1; pointer-events:auto; }
.month-view[data-task-drag-active] .month-cell-add-target, .month-view[data-task-pointer-drag] .month-cell-add-target { pointer-events:none; }
.month-grid:not(.no-weekends) .month-cell:nth-child(7n), .month-grid.no-weekends .month-cell:nth-child(5n) { border-right:0; }
.month-cell.outside { color:var(--ink-soft,#66685f); opacity:.48; }
.month-cell:hover:where(:not([data-touch-input] *)), .month-cell:has(:focus-visible) { background:color-mix(in srgb,var(--surface,#fffdf8) 42%,transparent); }
.month-cell[data-drop-active] { background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 42%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 32%,transparent); }
.month-cell-header { flex:none; min-height:max(34px,calc(1.3rem + 4px)); display:flex; align-items:flex-start; justify-content:space-between; gap:4px; }
.month-date { width:32px; height:32px; margin:-1px 0 0 -1px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:inherit; font:500 .875rem/1 var(--planner-heading); cursor:default; }
.month-cell.today { opacity:1; }
.month-cell.today .month-date { background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 25%,transparent); }
.month-activity { display:none; }
.month-items { flex:0 1 auto; min-width:0; min-height:0; display:grid; align-content:start; gap:2px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:auto; }
.month-tasks { --task-row-spacing:1px; min-width:0; display:grid; gap:0; }
.month-tasks > .planner-task { margin-bottom:var(--task-row-spacing); }
.month-view .planner-task { min-height:27px; padding:2px 1px; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:5px; }
.month-view .planner-task .task-check { width:20px; height:20px; }
.month-view .planner-task .task-title { display:block; overflow:hidden; font-size:1rem; line-height:1.35; overflow-wrap:normal; text-overflow:ellipsis; white-space:pre; }
.planner-shell[data-wrap-task-text="true"] .month-view .planner-task .task-title { overflow-wrap:anywhere; white-space:pre-line; }
.planner-shell[data-wrap-task-text="false"] .planner-task .task-title { display:block; overflow:hidden; overflow-wrap:normal; text-overflow:ellipsis; white-space:nowrap; -webkit-line-clamp:unset; }
.planner-shell[data-wrap-task-text="false"] .month-mobile-task .month-mobile-agenda-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.month-view .planner-task .task-content { display:block; overflow:hidden; }
.month-view .planner-task .task-footer { display:none; }
.month-view .planner-task .task-footer:has(.task-description-indicator,.task-attachment-indicator,.task-reminder-indicator,.task-creator,.task-assignee) { display:flex; margin-top:2px; }
/* Compact month rows also keep calendar logos and unread comment alerts visible. TaskRow
   marks these footers, so rows carry no isolated-CSS attribute and need no :has() scan.
   These rules follow the compact hide rules they override and yield to the Timeline's
   compact entries. Drag copies drop data attributes, which clears the alert marker as it
   cleared the former [data-task-comment-alert] match. */
.planner-task .task-footer.task-footer--calendar, .planner-task .task-footer[data-task-footer-alerts] { display:flex; }
.month-view .planner-task :is(.task-creator-picture,.task-assignee-picture) { flex-basis:1rem; width:1rem; height:1rem; font-size:.5rem; }
.month-view .planner-task.no-metadata .task-content { display:block; }
.month-view .planner-task[draggable="true"] .task-body { user-select:none; -webkit-user-select:none; }
.month-view .planner-task[data-dragging] { opacity:.3; }
.month-event { width:100%; min-height:25px; padding:3px 3px; display:grid; grid-template-columns:3px auto minmax(0,1fr); align-items:center; gap:5px; overflow:hidden; border:0; border-radius:4px; background:color-mix(in srgb,var(--sage,#687b69) 8%,transparent); color:var(--ink,#262823); text-align:left; font-size:.7rem; }
.month-event > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.month-event time { color:var(--ink-soft,#66685f); font-variant-numeric:tabular-nums; }
.month-cell > .inline-task-entry, .month-cell > .month-add { flex:none; margin-top:auto; }
.month-cell .inline-task-entry .inline-add, .month-add { min-height:28px; margin-top:2px; padding:2px 1px; display:grid; grid-template-columns:15px minmax(0,1fr); align-items:center; gap:3px; border:0; background:transparent; color:var(--ink-soft,#66685f); font-size:1rem; line-height:1.3; text-align:left; opacity:1; }
/* Share the date's row, leaving the cell body available for tasks and drafts. */
.month-cell > .inline-task-entry { position:static; }
.month-cell > .inline-task-entry > .inline-add, .month-cell > .month-add { position:absolute; top:5px; right:6px; left:43px; z-index:1; width:auto; min-width:0; margin-top:0; grid-template-columns:12px minmax(0,1fr); gap:2px; }
.month-cell > .inline-task-entry > .inline-add > span:last-child, .month-cell > .month-add > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.month-cell .inline-task-entry .inline-add:hover:where(:not([data-touch-input] *)), .month-cell .inline-task-entry .inline-add:focus-visible, .month-add:hover:where(:not([data-touch-input] *)), .month-add:focus-visible { color:var(--ink,#262823); opacity:1; }
.month-cell .inline-task-draft { min-height:28px; margin-top:2px; padding:2px 1px; grid-template-columns:20px minmax(0,1fr); }
.month-cell .task-draft-check { width:20px; height:20px; }
.month-cell .inline-task-draft textarea { padding:2px 0; font-size:1rem; line-height:1.35; }

.collection-view, .search-view, .settings-view { max-width:1040px; margin:0 auto; }
.collection-toolbar { min-height:48px; margin-bottom:14px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.collection-view > p { margin:0 0 18px; color:var(--ink-soft,#66685f); font-size:.83rem; }
.collection-capture { max-width:680px; margin:0 0 22px; }
.collection-toolbar { justify-content:space-between; border-bottom:1px solid var(--line,#dcd8ce); }
.collection-list { display:grid; gap:0; }
.collection-list > .planner-task { margin-bottom:5px; }
.collection-list .planner-task { padding:6px 3px; grid-template-columns:24px minmax(0,1fr); }
.collection-list .task-title { font-size:1rem; }

.search-view { --search-width:880px; width:100%; max-width:1100px; padding:clamp(10px,3vh,30px) 0 56px; animation:search-view-enter 170ms cubic-bezier(.22,1,.36,1) both; }
.search-view > .offline-feature-note { width:min(100%,var(--search-width)); margin-inline:auto; }
.search-box { position:relative; width:min(100%,var(--search-width)); margin:0 auto; }
.search-box input { width:100%; min-height:62px; padding:12px 54px 12px 4px; border:0; border-bottom:1px solid var(--line,#dcd8ce); border-radius:0; background:transparent; color:var(--ink,#262823); font-size:1.15rem; font-weight:500; line-height:1.4; letter-spacing:-.01em; transition:border-color 150ms ease,box-shadow 150ms ease; }
.search-box input::placeholder { color:var(--ink-soft,#66685f); opacity:1; }
.search-box:focus-within input { border-bottom-color:var(--accent,#c76345); box-shadow:inset 0 -1px 0 var(--accent,#c76345); outline:0; }
.search-submit { position:absolute; top:50%; right:2px; width:40px; height:40px; padding:0; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--ink-soft,#66685f); transform:translateY(-50%); transition:background-color 140ms ease,color 140ms ease,transform 80ms ease; }
.search-submit:hover:where(:not([data-touch-input] *)), .search-submit:focus-visible { background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.search-submit:active { transform:translateY(-50%) scale(.92); }
.search-submit-icon { display:block; }
.search-filters { width:min(100%,var(--search-width)); margin:14px auto 8px; display:flex; flex-wrap:wrap; gap:7px; }
.search-filters button { min-height:34px; padding:0 12px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--ink-soft,#66685f); font-size:.78rem; font-weight:500; transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,transform 80ms ease; }
.search-filters button:hover:where(:not([data-touch-input] *)) { border-color:var(--line,#dcd8ce); color:var(--ink,#262823); }
.search-filters button:active { transform:scale(.96); }
.search-filters button.active { border-color:color-mix(in srgb,var(--accent,#c76345) 24%,transparent); background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); font-weight:650; }
.search-advanced { width:min(100%,var(--search-width)); margin:0 auto; border:0; background:transparent; }
.search-advanced > summary { width:max-content; min-height:38px; padding:7px 5px; display:flex; align-items:center; gap:7px; border-radius:7px; color:var(--ink-soft,#66685f); cursor:pointer; font-size:.78rem; font-weight:600; list-style:none; transition:background-color 140ms ease,color 140ms ease; }
.search-advanced > summary::-webkit-details-marker { display:none; }
.search-advanced > summary::after { content:""; width:6px; height:6px; margin-left:2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-1px) rotate(45deg); transition:transform 150ms ease; }
.search-advanced > summary:hover:where(:not([data-touch-input] *)) { background:color-mix(in srgb,var(--surface,#fffdf8) 65%,transparent); color:var(--ink,#262823); }
.search-advanced[open] > summary { color:var(--ink,#262823); }
.search-advanced[open] > summary::after { transform:translateY(2px) rotate(225deg); }
.search-filter-icon { flex:none; }
.search-advanced-body { margin-top:4px; padding:17px 0 18px; border-top:1px solid var(--line,#dcd8ce); border-bottom:1px solid var(--line,#dcd8ce); animation:search-filters-enter 170ms cubic-bezier(.22,1,.36,1) both; }
.search-filter-grid { padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px 12px; }
.search-filter-grid label { min-width:0; display:grid; align-content:start; gap:6px; color:var(--ink-soft,#66685f); font-size:.75rem; font-weight:600; }
.search-filter-grid input, .search-filter-grid select { width:100%; min-height:42px; padding:8px 10px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font:500 .78rem/1.3 var(--planner-font); }
.search-filter-grid .planner-date-picker { min-width:0; }
.search-filter-grid .planner-date-trigger { width:100%; min-height:42px; }
.search-filter-grid .search-filter-checkbox { align-self:end; min-height:42px; padding:0 11px; display:flex; align-items:center; gap:9px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink,#262823); cursor:pointer; }
.search-filter-grid .search-filter-checkbox input { width:16px; height:16px; min-height:0; margin:0; padding:0; accent-color:var(--accent,#c76345); }
.search-filter-actions { margin-top:17px; padding-top:14px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid color-mix(in srgb,var(--line,#dcd8ce) 70%,transparent); }
.search-results { width:min(100%,var(--search-width)); margin:25px auto 0; display:grid; }
.search-results-heading { min-height:34px; padding:0 6px 8px; display:flex; align-items:end; border-bottom:1px solid var(--line,#dcd8ce); color:var(--ink-soft,#66685f); font-size:.78rem; }
.search-result { min-width:0; min-height:72px; padding:11px 6px; display:grid; grid-template-columns:36px minmax(0,1fr) 28px; gap:11px; align-items:center; border:0; border-bottom:1px solid color-mix(in srgb,var(--line,#dcd8ce) 78%,transparent); border-radius:6px; background:transparent; color:var(--ink,#262823); text-align:left; transition:background-color 150ms ease; animation:search-result-enter 170ms cubic-bezier(.22,1,.36,1) both; }
.search-result:hover:where(:not([data-touch-input] *)), .search-result:focus-visible { background:color-mix(in srgb,var(--surface,#fffdf8) 62%,transparent); }
.result-kind { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); font-size:.88rem; font-weight:650; line-height:1; }
.search-result-copy { min-width:0; display:grid; gap:2px; }
.search-result strong { overflow:hidden; color:var(--ink,#262823); font-size:1rem; font-weight:550; line-height:1.4; overflow-wrap:anywhere; text-overflow:ellipsis; }
.search-result small { display:-webkit-box; overflow:hidden; color:var(--ink-soft,#66685f); font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.search-result-meta { margin-top:2px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:var(--ink-soft,#66685f); font-size:.73rem; line-height:1.4; }
.search-result-arrow { justify-self:end; color:var(--ink-soft,#66685f); opacity:.45; transform:translateX(-2px); transition:opacity 140ms ease,transform 140ms ease; }
.search-result:hover:where(:not([data-touch-input] *)) .search-result-arrow, .search-result:focus-visible .search-result-arrow { opacity:1; transform:none; }
.search-empty { width:min(100%,var(--search-width)); margin:26px auto 0; padding:24px 6px; border-top:1px solid var(--line,#dcd8ce); color:var(--ink-soft,#66685f); font-size:.84rem; text-align:center; }
.search-pagination { margin-top:15px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--ink-soft,#66685f); font-size:.72rem; }
.loading-lines { width:min(100%,var(--search-width)); margin:25px auto 0; display:grid; }
.loading-lines span { height:68px; border-bottom:1px solid var(--line,#dcd8ce); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface,#fffdf8) 72%,transparent),transparent); background-size:220% 100%; animation:planner-shimmer 1.25s ease-in-out infinite; }
@keyframes search-view-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes search-filters-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes search-result-enter { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .search-view, .search-advanced-body, .search-result, .loading-lines span { animation:none; } }

.settings-view { width:100%; max-width:1040px; margin:0 auto; display:grid; grid-template-columns:220px minmax(0,1fr); gap:30px; align-items:start; }
.settings-mobile-nav { display:none; }
.settings-nav { position:sticky; top:calc(var(--planner-topbar) + env(safe-area-inset-top) + 18px); height:max-content; padding:8px; display:grid; gap:3px; border:1px solid var(--line,#dcd8ce); border-radius:14px; background:var(--surface,#fffdf8); }
.settings-nav button { width:100%; min-height:44px; padding:9px 12px; border:0; border-radius:9px; background:transparent; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:500; line-height:1.4; text-align:left; transition:background-color 140ms ease,color 140ms ease,transform 140ms ease; }
.settings-nav button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.settings-nav button:active:not(:disabled) { transform:scale(.985); }
.settings-nav button:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:1px; }
.settings-nav button[aria-current="page"] { background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); font-weight:700; }
.settings-nav button[aria-current="page"]:hover:where(:not([data-touch-input] *)):not(:disabled) { background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 82%,var(--accent,#c76345)); color:color-mix(in srgb,var(--accent-deep,#9f422b) 84%,var(--ink,#262823)); }
.settings-content { min-width:0; }
.settings-form { min-width:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.settings-panel { min-width:0; }
.settings-panel:not([hidden]) { animation:settings-section-enter 180ms cubic-bezier(.22,1,.36,1); }
.settings-panel[hidden], .settings-form[hidden] { display:none; }
@keyframes settings-section-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.settings-form > .settings-panel { min-height:360px; margin:0; padding:24px; border:0; }
.settings-section-heading { padding-bottom:19px; border-bottom:1px solid color-mix(in srgb,var(--line,#dcd8ce) 82%,transparent); }
.settings-section-heading h2 { font:500 1.6rem/1.2 var(--planner-heading); letter-spacing:0; }
.settings-section-heading p { max-width:640px; margin-top:7px; color:var(--ink-soft,#66685f); font-size:.875rem; line-height:1.6; }
.settings-fields { margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.settings-fields label, .settings-fields .settings-field, .settings-fields .settings-field-title { min-width:0; display:grid; gap:7px; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:500; line-height:1.45; }
.settings-fields input, .settings-fields select { width:100%; min-width:0; min-height:44px; padding:9px 11px; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); font:400 .875rem/1.5 var(--planner-font); transition:border-color 140ms ease,background-color 140ms ease; }
.settings-fields input:hover:where(:not([data-touch-input] *)):not(:disabled), .settings-fields select:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 52%,var(--line,#dcd8ce)); }
.settings-fields input:disabled, .settings-fields select:disabled { cursor:not-allowed; opacity:.58; }
.settings-field-wide { grid-column:1 / -1; }
.settings-subsection { margin-top:24px; padding-top:22px; border-top:1px solid color-mix(in srgb,var(--line,#dcd8ce) 76%,transparent); }
.settings-subsection > h3 { font:500 1rem/1.45 var(--planner-heading); letter-spacing:0; }
.settings-subsection > p { max-width:620px; margin-top:6px; color:var(--ink-soft,#66685f); font-size:.875rem; font-weight:400; line-height:1.6; }
.settings-choice-group { margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; border:0; }
.settings-choice-group > legend { grid-column:1 / -1; width:100%; margin-bottom:1px; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:500; }
.settings-choice-option { position:relative; min-width:0; min-height:104px; padding:13px; display:grid; grid-template-rows:1fr auto; gap:10px; border:1px solid var(--line,#dcd8ce); border-radius:11px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); font-size:.875rem; font-weight:700; text-align:left; cursor:pointer; transition:border-color 140ms ease,background-color 140ms ease,transform 140ms ease; }
.settings-choice-option:hover:where(:not([data-touch-input] *)):not(:disabled):not(:has(input:disabled)) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 55%,var(--line,#dcd8ce)); background:var(--paper-deep,#eeebe2); }
.settings-choice-option:active:not(:disabled):not(:has(input:disabled)) { transform:scale(.99); }
.settings-choice-option > input { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.settings-choice-option:has(input:focus-visible) { outline:2px solid var(--focus,#66685f); outline-offset:2px; }
.settings-choice-option:has(input:checked), .settings-choice-option[aria-pressed="true"] { border-color:color-mix(in srgb,var(--accent,#c76345) 58%,var(--line,#dcd8ce)); background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.settings-choice-option:disabled, .settings-choice-option:has(input:disabled) { cursor:not-allowed; opacity:.55; }
.settings-choice-preview { --settings-preview-paper:#f7f5ef; --settings-preview-surface:#fffdf8; --settings-preview-muted:#eeebe2; --settings-preview-line:#dcd8ce; position:relative; min-height:54px; overflow:hidden; display:grid; grid-template-columns:28% 1fr; border:1px solid var(--settings-preview-line); border-radius:8px; background:var(--settings-preview-surface); box-shadow:inset 0 10px 0 var(--settings-preview-muted); }
.settings-choice-preview::before { content:""; border-right:1px solid var(--settings-preview-line); background:var(--settings-preview-paper); }
.settings-choice-preview::after { content:""; position:absolute; top:20px; right:10px; left:40%; height:5px; border-radius:999px; background:color-mix(in srgb,var(--settings-preview-line) 78%,transparent); box-shadow:0 10px 0 color-mix(in srgb,var(--settings-preview-line) 58%,transparent),0 20px 0 color-mix(in srgb,var(--settings-preview-line) 58%,transparent); }
.settings-choice-option[data-theme="light"] .settings-choice-preview { --settings-preview-paper:#f7f5ef; --settings-preview-surface:#fffdf8; --settings-preview-muted:#eeebe2; --settings-preview-line:#dcd8ce; }
.settings-choice-option[data-theme="dark"] .settings-choice-preview { --settings-preview-paper:#1c1c1c; --settings-preview-surface:#262626; --settings-preview-muted:#303030; --settings-preview-line:#3d3d3d; }
.settings-choice-option[data-theme="system"] .settings-choice-preview { --settings-preview-line:#77746d; background:linear-gradient(110deg,#fffdf8 0 50%,#262626 50%); box-shadow:inset 0 10px 0 #303030; }
.settings-choice-option[data-theme="system"] .settings-choice-preview::before { background:linear-gradient(110deg,#f7f5ef 0 50%,#1c1c1c 50%); }
.settings-accent-option { position:relative; min-height:52px; padding:10px 12px; display:flex; align-items:center; gap:10px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); font-size:.875rem; font-weight:500; cursor:pointer; transition:border-color 140ms ease,background-color 140ms ease,transform 140ms ease; }
.settings-accent-option:hover:where(:not([data-touch-input] *)):not(:disabled):not(:has(input:disabled)) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 55%,var(--line,#dcd8ce)); background:var(--paper-deep,#eeebe2); }
.settings-accent-option:active:not(:disabled):not(:has(input:disabled)) { transform:scale(.99); }
.settings-accent-option > input { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.settings-accent-option:has(input:focus-visible) { outline:2px solid var(--focus,#66685f); outline-offset:2px; }
.settings-accent-option:has(input:checked), .settings-accent-option[aria-pressed="true"] { border-color:color-mix(in srgb,var(--settings-accent-color,var(--accent,#c76345)) 55%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--settings-accent-color,var(--accent,#c76345)) 12%,var(--surface,#fffdf8)); }
.settings-accent-option:disabled, .settings-accent-option:has(input:disabled) { cursor:not-allowed; opacity:.55; }
.settings-accent-option[data-accent="foxglove"] { --settings-accent-color:#c76345; }
.settings-accent-option[data-accent="sage"] { --settings-accent-color:#55745b; }
.settings-accent-option[data-accent="harbor"] { --settings-accent-color:#5272a1; }
.settings-accent-option[data-accent="iris"] { --settings-accent-color:#8b5f98; }
.settings-accent-choices { grid-template-columns:repeat(4,minmax(0,1fr)); }
.settings-accent-swatch { width:24px; height:24px; flex:none; border:4px solid var(--surface,#fffdf8); border-radius:50%; background:var(--settings-accent-color,var(--accent,#c76345)); box-shadow:0 0 0 1px color-mix(in srgb,var(--settings-accent-color,var(--accent,#c76345)) 55%,var(--line,#dcd8ce)); }
.settings-accent-option:has(input:checked) .settings-accent-swatch, .settings-accent-option[aria-pressed="true"] .settings-accent-swatch { box-shadow:0 0 0 2px var(--surface,#fffdf8),0 0 0 4px var(--settings-accent-color,var(--accent,#c76345)); }
.settings-toggle-grid { margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.settings-toggle-grid .toggle-field { min-width:0; min-height:52px; padding:11px 13px; display:flex; align-items:center; gap:10px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); font-size:.8rem; line-height:1.4; cursor:pointer; transition:border-color 140ms ease,background-color 140ms ease,transform 140ms ease; }
.settings-toggle-grid .toggle-field:hover:where(:not([data-touch-input] *)):not(:has(input:disabled)) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 55%,var(--line,#dcd8ce)); background:var(--paper-deep,#eeebe2); }
.settings-toggle-grid .toggle-field:active:not(:has(input:disabled)) { transform:scale(.99); }
.settings-toggle-grid .toggle-field:has(input:checked) { border-color:color-mix(in srgb,var(--accent,#c76345) 48%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 64%,var(--surface,#fffdf8)); }
.settings-toggle-grid .toggle-field:has(input:disabled) { cursor:not-allowed; opacity:.58; }
.settings-toggle-grid input { width:18px; height:18px; flex:none; margin:0; accent-color:var(--accent,#c76345); }
.settings-background-motion { grid-column:1 / -1; display:grid; align-content:start; gap:.4rem; min-width:0; }
.settings-background-motion > p, .settings-background-motion .hint { margin:0 2px; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; }
.settings-background-motion [data-theme-tilt-permission] { justify-self:start; max-width:100%; white-space:normal; }
.settings-background-motion [hidden] { display:none!important; }
.settings-planning-preview { margin-top:22px; padding-top:20px; border-top:1px solid var(--line,#dcd8ce); }
.settings-planning-preview > header { margin-bottom:9px; }
.settings-planning-preview > header h3 { color:var(--ink,#262823); font-size:.82rem; font-weight:700; letter-spacing:-.01em; }
.settings-planning-preview-frame { contain:layout paint; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:11px; background:var(--paper,#f7f5ef); }
.settings-preview-range { min-height:52px; padding:7px 12px; display:grid; justify-items:center; align-content:center; gap:2px; border-bottom:1px solid var(--line,#dcd8ce); background:var(--surface,#fffdf8); text-align:center; }
.settings-preview-range strong { max-width:100%; overflow:hidden; color:var(--ink,#262823); font-size:.78rem; font-weight:700; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.settings-preview-range > span { color:var(--ink-soft,#66685f); font-size:.62rem; line-height:1.2; }
.settings-preview-week { height:138px; display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); }
.settings-preview-week.with-weekends { grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1fr); }
.settings-preview-week.separate-weekends { grid-template-columns:repeat(7,minmax(0,1fr)); }
.settings-preview-week.separate-weekends > .settings-preview-day:last-child { border-right:0; }
.settings-preview-week.without-weekends { grid-template-columns:repeat(5,minmax(0,1fr)); }
.settings-preview-day { min-width:0; padding:8px 6px; overflow:hidden; }
.settings-preview-week > .settings-preview-day { grid-row:1 / -1; border-right:1px solid var(--line,#dcd8ce); }
.settings-preview-week.without-weekends > .settings-preview-day:last-child { border-right:0; }
.settings-preview-day.is-today { background:color-mix(in srgb,var(--accent-soft,#f1d9cf) 30%,transparent); box-shadow:inset 0 2px 0 var(--accent,#c76345); }
.settings-preview-day-heading { min-width:0; display:flex; align-items:baseline; gap:3px; overflow:hidden; color:var(--ink-soft,#66685f); font-size:.56rem; font-weight:700; line-height:1.2; text-transform:uppercase; }
.settings-preview-day-heading span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-preview-day-heading strong { flex:none; color:var(--ink,#262823); font-size:.66rem; font-weight:650; }
.settings-preview-weekend { min-width:0; display:grid; grid-column:6; grid-row:1 / -1; grid-template-rows:repeat(2,minmax(0,1fr)); background:color-mix(in srgb,var(--paper-deep,#eeebe2) 55%,transparent); }
.settings-preview-weekend .settings-preview-day:first-child { border-bottom:1px solid var(--line,#dcd8ce); }
.settings-preview-week.with-weekends.starts-sunday .settings-preview-weekend { grid-column:1; border-right:1px solid var(--line,#dcd8ce); }
.settings-preview-week.with-weekends.starts-sunday > .settings-preview-day:nth-child(5) { border-right:0; }
.settings-preview-item { width:100%; min-width:0; min-height:24px; margin-top:7px; padding:4px 2px; display:grid; align-items:center; gap:4px; overflow:hidden; border-bottom:1px solid color-mix(in srgb,var(--line,#dcd8ce) 62%,transparent); color:var(--ink,#262823); font-size:.58rem; line-height:1.15; }
.settings-preview-item > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-preview-task { grid-template-columns:11px minmax(0,1fr); }
.settings-preview-check { width:11px; height:11px; display:grid; place-items:center; border:1px solid var(--ink-soft,#66685f); border-radius:50%; color:#fff; font-size:.48rem; font-weight:700; line-height:1; }
.settings-preview-task.is-complete { opacity:.68; }
.settings-preview-task.is-complete .settings-preview-check { border-color:var(--task-complete,#278653); background:var(--task-complete,#278653); }
.settings-preview-event { grid-template-columns:2px auto minmax(0,1fr); }
.settings-preview-event i { width:2px; height:14px; border-radius:999px; background:var(--accent,#c76345); }
.settings-preview-event time { color:var(--ink-soft,#66685f); font-size:.54rem; }
@media (max-width:540px) {
    .settings-preview-range { min-height:48px; padding-inline:8px; }
    .settings-preview-range strong { font-size:.7rem; }
    .settings-preview-week { height:124px; }
    .settings-preview-day { padding:7px 3px; }
    .settings-preview-day-heading { gap:2px; font-size:.5rem; }
    .settings-preview-day-heading strong { font-size:.6rem; }
    .settings-preview-item { gap:3px; padding-inline:1px; font-size:.53rem; }
    .settings-preview-task { grid-template-columns:9px minmax(0,1fr); }
    .settings-preview-check { width:9px; height:9px; font-size:.42rem; }
    .settings-preview-event { grid-template-columns:2px minmax(0,1fr); }
    .settings-preview-event time { display:none; }
}
.settings-actions { margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.settings-data-panel { display:grid; gap:18px; }
.settings-data-summary, .settings-danger-card { padding:24px; }
.settings-danger-card { border:1px solid var(--line,#dcd8ce); border-radius:14px; background:var(--surface,#fffdf8); }
.settings-data-summary > header h2, .settings-danger-card > header h2, .settings-danger-card > header h3 { font:500 1.4rem/1.25 var(--planner-heading); letter-spacing:0; }
.settings-data-summary > header p, .settings-danger-card > header p { max-width:640px; margin-top:7px; color:var(--ink-soft,#66685f); font-size:.8rem; line-height:1.5; }
.settings-data-links { margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.settings-data-links :is(.button,.secondary-button) { min-height:40px; padding-inline:16px; font-size:.78rem; }
.settings-danger-card { border-color:color-mix(in srgb,var(--danger,#a33a34) 30%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--danger,#a33a34) 5%,var(--surface,#fffdf8)); }
.settings-danger-card { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.settings-danger-card > header :is(h2,h3) { color:var(--danger,#a33a34); }
.settings-data-panel > .guest-local-data { margin:0; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:14px; background:var(--surface,#fffdf8); }
.guest-local-data-summary { min-width:0; padding:19px 20px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; }
.guest-local-data-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--danger,#a33a34) 20%,var(--line,#dcd8ce)); border-radius:12px; background:color-mix(in srgb,var(--danger,#a33a34) 8%,var(--surface,#fffdf8)); color:var(--danger,#a33a34); }
.guest-local-data-summary > header { min-width:0; }
.guest-local-data-summary > header h2 { color:var(--ink,#262823); font:650 .9rem/1.35 var(--planner-font); letter-spacing:-.01em; }
.guest-local-data-summary > header p { max-width:620px; margin-top:3px; color:var(--ink-soft,#66685f); font-size:.72rem; line-height:1.5; }
.guest-clear-trigger { min-height:40px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid color-mix(in srgb,var(--danger,#a33a34) 38%,var(--line,#dcd8ce)); border-radius:999px; background:transparent; color:var(--danger,#a33a34)!important; font-size:.72rem!important; font-weight:680!important; white-space:nowrap; transition:border-color 140ms ease,background 140ms ease; }
.guest-clear-trigger:hover:where(:not([data-touch-input] *)) { border-color:var(--danger,#a33a34); background:color-mix(in srgb,var(--danger,#a33a34) 8%,var(--surface,#fffdf8)); }
.guest-clear-trigger[aria-expanded="true"] { border-color:var(--danger,#a33a34); background:color-mix(in srgb,var(--danger,#a33a34) 9%,var(--surface,#fffdf8)); }
.guest-local-data > .form-message { margin:0; border:0; border-top:1px solid var(--line,#dcd8ce); border-radius:0; }
.settings-panel > .account-security, .settings-panel > .calendar-management, .settings-panel > .portability-view, .settings-panel > .guest-feature-notice, .settings-panel > .guest-local-data, .settings-data-panel > .portability-view { margin-top:0; }
.editor-grid label { display:grid; gap:6px; color:var(--ink-soft,#66685f); font-size:.7rem; font-weight:650; }
.editor-grid input, .editor-grid select, .task-editor textarea { width:100%; min-height:41px; padding:8px 10px; border:1px solid var(--line,#dcd8ce); border-radius:7px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font-weight:450; }
.danger-link, .danger-text-button { color:var(--danger,#a33a34); }
.danger-link { align-self:center; font-size:.76rem; font-weight:650; }
.event-editor-drawer { width:min(100%,590px); }
.read-only-event { padding:8px 4px 28px; }
.read-only-event h2 { margin-top:12px; font-size:2rem; }
.read-only-event > p { margin-top:14px; color:var(--ink-soft,#66685f); }
.read-only-event > .secondary-button { margin-top:18px; }
.read-only-event-metadata { display:grid; gap:8px; margin:18px 0 0; }
.read-only-event-metadata > div { display:grid; grid-template-columns:minmax(90px,auto) 1fr; gap:12px; }
.read-only-event-metadata dt { color:var(--ink-soft,#66685f); font-size:.75rem; font-weight:600; }
.read-only-event-metadata dd { margin:0; overflow-wrap:anywhere; }
.read-only-attendees { margin-top:18px; }
.read-only-attendees h3 { font-size:.82rem; }
.read-only-attendees ul { margin:8px 0 0; padding-left:20px; color:var(--ink-soft,#66685f); }
.recurrence-form { margin-top:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.recurrence-form > :is(label,.task-form-field) { display:grid; gap:5px; color:var(--ink-soft,#66685f); font-size:.66rem; }
.recurrence-form input, .recurrence-form select { min-height:38px; padding:7px 8px; border:1px solid var(--line,#dcd8ce); border-radius:7px; background:var(--surface,#fffdf8); color:var(--ink,#262823); }
.recurrence-days { grid-column:1 / -1; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:5px; border:0; }
.recurrence-days legend { width:100%; margin-bottom:3px; color:var(--ink-soft,#66685f); font-size:.66rem; }
.recurrence-days label { position:relative; }
.recurrence-days input { position:absolute; opacity:0; }
.recurrence-days span { width:34px; height:32px; display:grid; place-items:center; border:1px solid var(--line,#dcd8ce); border-radius:7px; color:var(--ink-soft,#66685f); font-size:.62rem; text-transform:uppercase; }
.recurrence-days input:checked + span { border-color:var(--accent,#c76345); background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.recurrence-days input:focus-visible + span { outline:2px solid var(--focus,#66685f); outline-offset:2px; }
@media (max-width:560px) { .recurrence-form { grid-template-columns:1fr; } .recurrence-days { grid-column:auto; } }
.settings-loading { min-height:400px; padding:24px; display:grid; gap:12px; align-content:start; border:1px solid var(--line,#dcd8ce); border-radius:14px; background:var(--surface,#fffdf8); }
.settings-loading span { height:92px; border-radius:10px; background:linear-gradient(90deg,var(--surface-muted,#eeece5),var(--surface,#fffdf8),var(--surface-muted,#eeece5)); background-size:200% 100%; animation:planner-shimmer 1.2s ease-in-out infinite; }
.settings-load-state { min-height:300px; align-content:center; }
.settings-load-warning { margin-bottom:18px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid color-mix(in srgb,var(--danger,#a33a34) 30%,var(--line,#dcd8ce)); border-radius:10px; background:color-mix(in srgb,var(--danger,#a33a34) 7%,var(--surface,#fffdf8)); color:var(--danger,#a33a34); }
.settings-load-warning .secondary-button { flex:none; }
.settings-days { margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px; border:0; }
.settings-days legend { width:100%; margin-bottom:7px; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:500; }
.settings-days label { position:relative; }
.settings-days input { position:absolute; opacity:0; }
.settings-days span { width:48px; min-height:44px; display:grid; place-items:center; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--paper,#f7f5ef); color:var(--ink-soft,#66685f); font-size:.75rem; font-weight:500; text-transform:uppercase; transition:border-color 140ms ease,background-color 140ms ease,color 140ms ease,transform 140ms ease; }
.settings-days label:hover:where(:not([data-touch-input] *)) span { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 55%,var(--line,#dcd8ce)); background:var(--paper-deep,#eeebe2); }
.settings-days label:active span { transform:scale(.97); }
.settings-days input:checked + span { border-color:var(--accent,#c76345); background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.settings-days input:focus-visible + span { outline:2px solid var(--focus,#66685f); outline-offset:2px; }
.quiet-hours { margin-top:14px; }
.settings-name-field { min-width:0; display:grid; gap:7px; }
.settings-name-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:stretch; }
.settings-profile-picture { display:flex; align-items:center; gap:18px; margin:0 0 24px; }
.settings-picture-preview { display:grid; place-items:center; flex:0 0 76px; width:76px; height:76px; overflow:hidden; border-radius:50%; background:var(--accent,#c76345); color:#fff; font-size:1.6rem; font-weight:700; box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#c76345) 14%,transparent); }
.settings-picture-preview:has(> img) { background:transparent; box-shadow:none; }
.settings-picture-preview img { width:100%; height:100%; object-fit:cover; }
.settings-picture-content { min-width:0; flex:1; }
.settings-picture-content > strong { font-size:.88rem; }
.settings-picture-content > p { margin:5px 0 0; color:var(--ink-soft,#66685f); font-size:.78rem; line-height:1.5; }
.settings-picture-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:11px; }
.settings-picture-actions .secondary-button, .settings-picture-actions .button { min-height:40px; padding:8px 14px; font-size:.78rem; }
.settings-profile-picture button:focus-visible { outline:2px solid var(--accent,#c76345); outline-offset:3px; }
.settings-profile-picture button:disabled { opacity:.5; cursor:default; transform:none; }
.settings-picture-status .text-button { padding:0 4px; border:0; background:transparent; color:var(--ink,#262823); font:inherit; text-decoration:underline; text-underline-offset:.2em; }
.settings-picture-file { position:relative; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; }
.settings-picture-file input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.settings-picture-file:has(:focus-visible) { outline:2px solid var(--accent,#c76345); outline-offset:3px; }
.settings-picture-file.is-disabled { opacity:.5; cursor:default; }
.settings-picture-file.is-disabled input { cursor:default; }
.settings-picture-filename { overflow-wrap:anywhere; }
.settings-picture-content > .settings-picture-status.is-error { color:var(--danger,#a53636); }
@media (max-width:480px) { .settings-profile-picture { gap:14px; } .settings-picture-preview { flex-basis:58px; width:58px; height:58px; font-size:1.3rem; } }
.settings-fields .settings-name-row .settings-name-save { min-height:44px; padding-inline:17px; font-size:.78rem; white-space:nowrap; }
.settings-fields .settings-name-row .settings-name-save:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none; }
.settings-save-status { min-height:1em; margin:0; padding:0 24px 18px; color:var(--ink-soft,#66685f); font-size:.72rem; line-height:1.4; }
@media (prefers-reduced-motion:reduce) {
    .settings-nav button, .settings-fields input, .settings-fields select, .settings-choice-option,
    .settings-accent-option, .settings-toggle-grid .toggle-field, .settings-days span { transition:none!important; transform:none!important; }
    .settings-panel:not([hidden]), .settings-loading span { animation:none!important; }
}

.secondary-view, .in-app-help { max-width:720px; margin:45px auto; text-align:center; }
.secondary-symbol { width:58px; height:58px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.secondary-view h2, .in-app-help h2 { font-size:2.15rem; }
.secondary-intro, .in-app-help > div > p { margin:12px auto 0; color:var(--ink-soft,#66685f); }
.secondary-body { margin-top:28px; padding:22px; border:1px solid var(--line,#dcd8ce); border-radius:11px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font-size:.8rem; text-align:left; }
.security-note { margin-top:17px; display:flex; gap:9px; color:var(--sage,#687b69); }
.shortcut-grid { margin:28px 0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; text-align:left; }
.shortcut-grid span { padding:12px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); font-size:.76rem; }
.in-app-help > a { margin:5px; }


.overlay-backdrop, .drawer-backdrop { position:fixed; inset:0; z-index:100; background:rgba(24,24,21,.43); backdrop-filter:blur(2px); }
.quick-add-overlay, .note-dialog, .event-dialog, .plan-dialog { position:fixed; z-index:110; top:max(12vh,env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right)); left:max(18px,env(safe-area-inset-left)); width:min(calc(100% - 36px - env(safe-area-inset-left) - env(safe-area-inset-right)),640px); max-height:min(78dvh,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px)); margin:auto; overflow:auto; border:1px solid var(--line,#dcd8ce); border-radius:15px; background:var(--surface,#fffdf8); box-shadow:0 30px 100px rgba(20,18,15,.28); }
.quick-add-overlay { padding:22px; }
.quick-add-overlay > header, .note-dialog > header, .event-dialog > header, .plan-dialog > header, .task-drawer > header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.quick-add-overlay header h2, .note-dialog h2, .event-dialog h2, .plan-dialog h2 { font-size:1.5rem; }
.quick-add-overlay header button, .note-dialog header button, .event-dialog header button, .plan-dialog header button, .task-drawer > header button { padding:5px; border:0; background:transparent; }
.dialog-close { display:flex; align-items:center; gap:7px; }
.dialog-close button { width:32px; height:32px; display:grid; place-items:center; border-radius:7px!important; }
.dialog-close button:hover:where(:not([data-touch-input] *)) { background:var(--paper-deep,#eeebe2); }
.quick-add-entry { min-width:0; margin-top:20px; padding:0 12px 8px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--paper,#f7f5ef); }
.quick-add-entry:focus-within { border-color:var(--focus,#66685f); }
.quick-add-entry:has(textarea[aria-invalid="true"]) { border:2px dashed var(--danger,#a33a34); }
.quick-add-overlay .quick-add-entry textarea { display:block; width:100%; min-height:92px; margin:0; padding:12px 2px; border:0; border-radius:0; background:transparent; resize:vertical; font-size:1rem; }
.quick-add-overlay > p { margin-top:7px; color:var(--ink-soft,#66685f); font-size:.76rem; }
.quick-add-overlay > input { width:100%; min-height:58px; margin-top:20px; padding:10px 14px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--paper,#f7f5ef); font-size:1rem; }
.parsed-preview { margin-top:15px; padding:12px; display:flex; flex-wrap:wrap; gap:7px; border-radius:9px; background:var(--paper-deep,#eeebe2); }
.parsed-title { width:100%; font-weight:650; }
.parsed-preview span:not(.parsed-title), .deadline-chip { padding:3px 7px; border-radius:999px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font-size:.65rem; }
.quick-add-error { margin-top:10px; color:var(--danger,#a33a34); font-size:.75rem; }
.quick-add-overlay > footer, .note-dialog footer, .plan-dialog footer { margin-top:20px; display:flex; justify-content:flex-end; gap:8px; }
.planner-shell .button, .planner-shell .secondary-button, :where(.settings-profile-picture) :is(.button,.secondary-button), .quick-add-overlay .button, .quick-add-overlay .secondary-button, :is(.task-drawer, .task-details-dialog) .button, :is(.task-drawer, .task-details-dialog) .secondary-button, .note-dialog .button, .note-dialog .secondary-button, .plan-dialog .button, .plan-dialog .secondary-button, .in-app-help .secondary-button { min-height:41px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:999px; font-weight:670; text-decoration:none; }
.planner-shell .button, :where(.settings-profile-picture) .button, .quick-add-overlay .button, :is(.task-drawer, .task-details-dialog) .button, .note-dialog .button, .plan-dialog .button { background:var(--ink,#262823); color:var(--paper,#f7f5ef); }
.planner-shell .secondary-button, :where(.settings-profile-picture) .secondary-button, .quick-add-overlay .secondary-button, :is(.task-drawer, .task-details-dialog) .secondary-button, .note-dialog .secondary-button, .plan-dialog .secondary-button, .in-app-help .secondary-button { border-color:var(--line,#dcd8ce); background:var(--surface,#fffdf8); color:var(--ink,#262823); }

.task-drawer { position:fixed; z-index:110; top:env(safe-area-inset-top); right:env(safe-area-inset-right); bottom:env(safe-area-inset-bottom); width:min(calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)),480px); overflow:auto; border-left:1px solid var(--line,#dcd8ce); background:var(--surface,#fffdf8); box-shadow:-20px 0 65px rgba(22,20,17,.18); }
.task-drawer > header { min-height:61px; padding:11px 18px; border-bottom:1px solid var(--line,#dcd8ce); }
.task-kind, .event-kind { color:var(--accent-deep,#9f422b); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.task-editor { padding:20px; }
.title-input { width:100%; padding:6px 0 12px; border:0; border-bottom:1px solid var(--line,#dcd8ce); background:transparent; font:500 1.65rem/1.2 var(--planner-heading)!important; }
.title-input:focus { border-bottom-color:var(--accent,#c76345); outline:0; }
.task-editor > textarea { margin-top:14px; resize:vertical; }
.editor-grid { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.editor-toggles { margin:18px 0; display:grid; gap:8px; }
.editor-toggles label { display:flex; align-items:center; gap:8px; font-size:.74rem; }
.editor-section { padding:17px 0; border-top:1px solid var(--line,#dcd8ce); }
.editor-section h3 { font:650 .82rem/1.3 var(--planner-font); }
.recurrence-scope { margin:4px 0 12px; padding:13px; border:1px solid color-mix(in srgb,var(--accent,#496a45) 24%,var(--line,#dcd8ce)); border-radius:9px; background:color-mix(in srgb,var(--accent,#496a45) 5%,var(--surface,#fffdf8)); }
.recurrence-scope p { margin:5px 0 10px; color:var(--ink-soft,#66685f); font-size:.82rem; line-height:1.45; }
.recurrence-scope label { display:grid; gap:5px; font-size:.78rem; font-weight:650; }
.section-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.section-heading-row p { margin-top:5px; color:var(--ink-soft,#66685f); font-size:.68rem; line-height:1.45; }
.inline-action { margin-top:8px; padding:5px 0; border:0; background:transparent; color:var(--accent-deep,#9f422b); font-size:.72rem; }
.checklist-row { margin-top:8px; display:flex; align-items:center; gap:8px; font-size:.74rem; }
.checklist-row > input[type="checkbox"] { flex:0 0 auto; }
.checklist-title-input { min-width:0; flex:1; border:0!important; border-bottom:1px solid transparent!important; border-radius:0!important; padding:5px 2px!important; background:transparent!important; }
.checklist-title-input:focus { outline:0; border-bottom-color:var(--accent,#c76345)!important; }
.checklist-row > button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--ink-soft,#66685f); }
.checklist-row > button:hover:where(:not([data-touch-input] *)) { background:var(--surface-muted,#eeece5); color:var(--ink,#262720); }
.reminder-row { margin-top:8px; display:flex; align-items:stretch; gap:6px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface-muted,#eeece5); }
.reminder-summary { min-width:0; flex:1; padding:9px 10px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:0; background:transparent; text-align:left; }
.reminder-summary strong { font-size:.72rem; }
.reminder-summary span { color:var(--ink-soft,#66685f); font-size:.64rem; }
.reminder-remove { width:34px; border:0; border-left:1px solid var(--line,#dcd8ce); background:transparent; color:var(--ink-soft,#66685f); }
.reminder-form { margin-top:10px; padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px; border:1px solid var(--line,#dcd8ce); border-radius:11px; background:var(--surface-muted,#eeece5); }
.reminder-form label { display:grid; gap:5px; color:var(--ink-soft,#66685f); font-size:.65rem; }
.reminder-form fieldset { grid-column:1/-1; padding:0; display:flex; flex-wrap:wrap; gap:8px 14px; border:0; }
.reminder-form legend { margin-bottom:6px; color:var(--ink-soft,#66685f); font-size:.65rem; }
.reminder-form fieldset label { display:flex; align-items:center; gap:5px; color:var(--ink,#262720); }
.reminder-form .form-message,.reminder-actions { grid-column:1/-1; }
.reminder-actions { display:flex; justify-content:flex-end; gap:7px; }
.notifications-view { max-width:860px; margin:0 auto; padding:28px 24px 80px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; }
.section-heading h2 { font:600 1.65rem/1.1 var(--planner-heading); }
.section-heading p { margin-top:6px; color:var(--ink-soft,#66685f); font-size:.78rem; }
.notification-device-card { margin-top:18px; padding:15px 16px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--surface,#fffdf8); }
.notification-device-card h3 { font-size:.88rem; }
.notification-device-card p { margin-top:4px; max-width:610px; color:var(--ink-soft,#66685f); font-size:.7rem; line-height:1.5; }
.notification-device-card .form-error { color:var(--danger,#a33a34); }
.notification-device-card .form-success { color:var(--success,#3e7953); }
.account-security { min-width:0; margin:0; }
.account-security-sections { display:grid; gap:30px; margin-top:24px; }
.account-security-section { min-width:0; }
.account-security-section-heading { display:flex; align-items:center; gap:9px; }
.account-security-section-heading h3 { margin:0; font:650 1.05rem/1.4 var(--planner-font); }
.account-security-count { min-width:24px; padding:2px 7px; border-radius:7px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); font-size:.75rem; font-weight:600; text-align:center; }
.account-security-section-description { margin:7px 0 0; color:var(--ink-soft,#66685f); font-size:.875rem; line-height:1.6; }
.account-security-list { margin:13px 0 0; padding:0; overflow:hidden; list-style:none; border:1px solid var(--line,#dcd8ce); border-radius:13px; }
.account-security-list li { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:start; gap:12px; padding:16px; }
.account-security-list li + li { border-top:1px solid var(--line,#dcd8ce); }
.account-security-list .account-security-device { grid-template-columns:38px minmax(0,1fr) auto; }
.account-security-session.is-current { background:color-mix(in srgb,var(--accent,#c76345) 5%,var(--surface,#fffdf8)); }
.account-security-row-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); }
.account-security-session.is-current .account-security-row-icon { border-color:color-mix(in srgb,var(--accent,#c76345) 22%,var(--line,#dcd8ce)); background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.account-security-row-content { min-width:0; align-self:center; }
.account-security-row-content > strong, .account-security-row-heading strong { font-size:.9rem; font-weight:650; line-height:1.45; overflow-wrap:anywhere; }
.account-security-row-heading { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.account-security-current-badge { display:inline-flex; flex:none; align-items:center; gap:4px; padding:2px 7px; border-radius:6px; color:var(--accent-deep,#9f422b); background:var(--accent-soft,#f1d9cf); font-size:.7rem; font-weight:600; line-height:1.5; }
.account-security-meta { display:flex; flex-wrap:wrap; gap:3px 16px; margin-top:4px; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; overflow-wrap:anywhere; }
.account-security-session-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; }
.account-security-session-actions > p { flex:1 1 180px; margin:0; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; }
.account-security .account-security-signout { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 14px; font-size:.8125rem; }
.account-security-signout svg { flex:none; }
.account-security .account-security-remove { align-self:center; min-height:44px; padding:8px 12px; border-radius:9px; background:transparent; color:var(--ink-soft,#66685f); font-size:.8125rem; }
.account-security .account-security-remove:hover:where(:not([data-touch-input] *)):not(:disabled) { color:var(--danger,#a33a34); border-color:color-mix(in srgb,var(--danger,#a33a34) 40%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--danger,#a33a34) 5%,transparent); }
.account-security-note { display:flex; align-items:flex-start; gap:7px; margin:11px 0 0; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.5; }
.account-security-note svg { flex:none; margin-top:2px; }
.account-security-empty { display:flex; align-items:center; gap:12px; margin-top:13px; padding:22px 16px; border:1px solid var(--line,#dcd8ce); border-radius:13px; color:var(--ink-soft,#66685f); }
.account-security-empty svg { flex:none; }
.account-security-empty p { margin:0; font-size:.875rem; line-height:1.6; }
.account-security .form-message { margin-top:16px; }
.account-security-loading { display:grid; gap:12px; margin-top:24px; }
.account-security-loading > div { display:grid; gap:10px; padding:22px; border:1px solid var(--line,#dcd8ce); border-radius:13px; }
.account-security-loading > div span { display:block; width:68%; height:12px; border-radius:4px; background:var(--paper-deep,#eeebe2); }
.account-security-loading > div span:last-child { width:44%; }
.account-security-load-state { display:grid; justify-items:start; gap:12px; margin-top:24px; padding:22px; border:1px solid var(--line,#dcd8ce); border-radius:13px; }
.account-security-state-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:color-mix(in srgb,var(--danger,#a33a34) 9%,transparent); color:var(--danger,#a33a34); }
.account-security-load-state p { margin:0; color:var(--ink-soft,#66685f); font-size:.875rem; line-height:1.6; }
@media (max-width:540px) {
    .account-security-sections { gap:26px; margin-top:22px; }
    .account-security-list li { padding:14px 12px; gap:10px; grid-template-columns:34px minmax(0,1fr); }
    .account-security-row-icon { width:34px; height:36px; }
    .account-security-meta { display:grid; gap:3px; }
    .account-security-list .account-security-device { grid-template-columns:34px minmax(0,1fr); }
    .account-security-remove { grid-column:2; justify-self:start; }
    .account-security-session-actions { align-items:stretch; }
    .account-security-session-actions > p { flex-basis:100%; }
    .account-security-signout { width:100%; }
}
.notification-list { margin-top:22px; display:grid; gap:9px; }
.sync-conflicts { margin-top:22px; padding:16px; border:1px solid color-mix(in srgb,var(--danger,#a33a34) 38%,var(--line,#dcd8ce)); border-radius:13px; background:color-mix(in srgb,var(--danger,#a33a34) 5%,var(--surface,#fffdf8)); }
.sync-conflicts > div:first-child h3 { font-size:.92rem; }
.sync-conflicts > div:first-child p { margin-top:4px; max-width:680px; color:var(--ink-soft,#66685f); font-size:.7rem; line-height:1.5; }
.sync-conflict-list { margin-top:13px; display:grid; gap:9px; }
.sync-conflict-card { padding:12px; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,320px); gap:18px; align-items:center; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface,#fffdf8); }
.sync-conflict-summary { min-width:0; display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:start; }
.sync-conflict-summary > span:last-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.sync-conflict-summary strong { font-size:.78rem; }
.sync-conflict-summary small,.sync-conflict-summary time { color:var(--ink-soft,#66685f); font-size:.66rem; }
.sync-conflict-resolution { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.sync-conflict-resolution p { margin:0; color:var(--ink-soft,#66685f); font-size:.65rem; line-height:1.45; text-align:right; }
.sync-conflict-resolution .danger-button { white-space:nowrap; }
.notification-card { overflow:hidden; display:grid; grid-template-columns:1fr auto; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--surface,#fffdf8); }
.notification-card.is-unread { border-left:4px solid var(--accent,#c76345); }
.notification-content { min-width:0; padding:13px 14px; display:grid; grid-template-columns:32px 1fr; gap:10px; border:0; background:transparent; text-align:left; }
.notification-content > span:last-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.notification-content strong { font-size:.78rem; overflow-wrap:anywhere; }
.notification-content small { color:var(--ink-soft,#66685f); font-size:.7rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.notification-content time { color:var(--ink-faint,#8e8f87); font-size:.62rem; }
.notification-kind { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--accent-soft,#f3ddd4); color:var(--accent-deep,#9f422b); }
.notification-actions { padding:9px; display:flex; align-items:center; gap:5px; }
.notification-actions button { padding:7px 8px; border:0; border-radius:7px; background:transparent; color:var(--ink-soft,#66685f); font-size:.63rem; }
.notification-actions button:hover:where(:not([data-touch-input] *)) { background:var(--surface-muted,#eeece5); color:var(--ink,#262720); }
.notification-skeleton { height:74px; border-radius:12px; background:linear-gradient(90deg,var(--surface-muted,#eeece5),var(--surface,#fffdf8),var(--surface-muted,#eeece5)); background-size:200% 100%; animation:planner-shimmer 1.2s infinite; }
@media (max-width:700px) { .notifications-view { padding:18px 14px 90px; } .notification-device-card { align-items:flex-start; flex-direction:column; } .notification-device-card button { width:100%; } .notification-card,.sync-conflict-card { grid-template-columns:1fr; } .notification-actions { padding-top:0; justify-content:flex-end; } .sync-conflict-resolution { align-items:flex-start; } .sync-conflict-resolution p { text-align:left; } }
.sharing-view { width:min(100%,1180px); margin:0 auto; padding:20px 18px 92px; }
.sharing-refresh { flex:none; width:42px; height:42px; padding:0; display:grid; place-items:center; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); transition:border-color 140ms ease,color 140ms ease,transform 140ms ease; }
.sharing-refresh:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 62%,var(--line,#dcd8ce)); color:var(--ink,#262823); }
.sharing-refresh:active:not(:disabled) { transform:scale(.95); }
.sharing-refresh:disabled,.sharing-view button:disabled { opacity:.46; cursor:default; }
.sharing-view .online-feature-controls { min-width:0; }
.sharing-loading { margin-top:14px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.sharing-loading > span:not(.sr-only) { grid-column:span 3; height:218px; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:linear-gradient(95deg,var(--paper-deep,#eeebe2),var(--surface,#fffdf8),var(--paper-deep,#eeebe2)); background-size:220% 100%; animation:planner-shimmer 1.25s ease-in-out infinite; }
.sharing-loading > span:nth-child(n+3):not(.sr-only) { grid-column:span 2; height:132px; }
.sharing-form input:not([type="checkbox"]),.sharing-form select,.sharing-calendar-picker select { width:100%; min-width:0; min-height:42px; padding:8px 11px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface,#fffdf8); color:var(--ink,#262720); font-size:.9375rem; }
.created-share-list { margin-top:10px; display:grid; gap:8px; }
.created-share { min-width:0; padding:11px 12px; display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:11px; align-items:center; border:1px solid color-mix(in srgb,var(--task-complete,#278653) 38%,var(--line,#dcd8ce)); border-radius:10px; background:color-mix(in srgb,var(--task-complete,#278653) 10%,var(--surface,#fffdf8)); animation:sharing-enter 180ms cubic-bezier(.22,1,.36,1); }
.created-share-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:color-mix(in srgb,var(--task-complete,#278653) 18%,transparent); color:var(--task-complete,#278653); }
.created-share > div { min-width:0; }
.created-share strong { display:block; font-size:.8125rem; }
.created-share p { margin:2px 0 5px; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.4; }
.created-share code { display:block; max-width:100%; overflow-x:auto; color:var(--ink,#262720); font-size:.75rem; white-space:nowrap; }
.created-share button { min-height:34px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font-size:.75rem; }
.created-share button:hover:where(:not([data-touch-input] *)) { border-color:color-mix(in srgb,var(--task-complete,#278653) 55%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--task-complete,#278653) 12%,var(--surface,#fffdf8)); color:var(--task-complete,#278653); }
.sharing-create-card { margin-top:12px; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:color-mix(in srgb,var(--surface,#fffdf8) 54%,var(--paper,#f7f5ef)); }
.sharing-create-switch { padding:6px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; border-bottom:1px solid var(--line,#dcd8ce); background:var(--paper,#f7f5ef); }
.sharing-create-option { min-width:0; min-height:42px; padding:8px 12px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:650; cursor:pointer; transition:background 140ms ease,border-color 140ms ease,color 140ms ease,transform 140ms ease; }
.sharing-create-option:hover:where(:not([data-touch-input] *)):not(:disabled):not([aria-pressed="true"]) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); box-shadow:inset 0 0 0 1px var(--line,#dcd8ce); }
.sharing-create-option:active:not(:disabled) { transform:scale(.99); }
.sharing-create-option[aria-pressed="true"] { border-color:transparent; background:var(--accent-soft,#f4dfd6); color:var(--accent-deep,#9f422b); box-shadow:none; }
.sharing-create-option[aria-pressed="true"]:hover:where(:not([data-touch-input] *)):not(:disabled) { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 55%,transparent); }
.sharing-create-panel { min-width:0; padding:20px; display:grid; grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr); gap:28px; align-items:start; animation:sharing-enter 160ms cubic-bezier(.22,1,.36,1); }
.sharing-action-heading { display:grid; grid-template-columns:38px minmax(0,1fr); gap:11px; align-items:start; }
.sharing-action-heading > span { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--accent-soft,#f3ddd4); color:var(--accent-deep,#9f422b); }
.sharing-action-heading h2 { font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.sharing-action-heading p { margin-top:4px; max-width:470px; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.45; }
.sharing-form { display:grid; gap:12px; }
.sharing-field { min-width:0; display:grid; gap:6px; }
.sharing-field > span { color:var(--ink-soft,#66685f); font-size:.75rem; font-weight:650; }
.sharing-field-grid { min-width:0; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(230px,1fr); gap:9px; align-items:end; }
.sharing-recipient-row, .sharing-public-fields { grid-template-columns:minmax(0,1fr); }
.sharing-calendar-control { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:8px; align-items:end; }
.sharing-calendar-picker { min-width:0; }
.sharing-visibility { min-width:0; padding:0; border:0; }
.sharing-visibility legend { padding:0; color:var(--ink,#262823); font-size:.8125rem; font-weight:700; }
.sharing-visibility > p { margin-top:4px; color:var(--ink-soft,#66685f); font-size:.72rem; line-height:1.45; }
.sharing-visibility-options { margin-top:9px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.sharing-visibility-option { min-width:0; min-height:70px; padding:10px; display:grid; grid-template-columns:16px minmax(0,1fr); gap:9px; align-items:start; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface,#fffdf8); color:var(--ink,#262823); cursor:pointer; transition:background 140ms ease,border-color 140ms ease,transform 140ms ease; }
.sharing-visibility-option:hover:where(:not([data-touch-input] *)) { border-color:var(--line-strong,#b9b5aa); background:var(--paper-deep,#eeebe2); }
.sharing-visibility-option:active { transform:scale(.99); }
.sharing-visibility-option:has(input:checked) { border-color:color-mix(in srgb,var(--accent,#c76345) 56%,var(--line,#dcd8ce)); background:var(--accent-soft,#f3ddd4); }
.sharing-visibility-option input[type="checkbox"] { width:16px; height:16px; margin:2px 0 0; accent-color:var(--accent,#c76345); }
.sharing-visibility-option > span { min-width:0; display:grid; gap:3px; }
.sharing-visibility-option strong { font-size:.75rem; font-weight:680; line-height:1.25; }
.sharing-visibility-option small { color:var(--ink-soft,#66685f); font-size:.66rem; line-height:1.35; }
.sharing-access-reminder { display:flex; align-items:flex-start; gap:7px; color:var(--ink-soft,#66685f); font-size:.72rem; line-height:1.45; }
.sharing-access-reminder .icon { flex:none; margin-top:2px; }
.sharing-submit { justify-self:start; min-height:39px!important; margin-top:1px; padding:0 15px!important; display:inline-flex; align-items:center; gap:7px; font-size:.8125rem!important; }
.sharing-validation { color:var(--danger,#a33a34); font-size:.8125rem; line-height:1.4; }
.sharing-records { margin-top:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:color-mix(in srgb,var(--surface,#fffdf8) 28%,var(--paper,#f7f5ef)); }
.sharing-record-card { min-width:0; }
.sharing-record-card + .sharing-record-card { border-left:1px solid var(--line,#dcd8ce); }
.sharing-record-heading { min-height:58px; padding:11px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line,#dcd8ce); background:color-mix(in srgb,var(--surface,#fffdf8) 58%,transparent); }
.sharing-record-heading > div { min-width:0; display:flex; align-items:center; gap:9px; }
.sharing-record-heading > div > span { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); }
.sharing-record-heading h2 { overflow:hidden; font-size:.875rem; font-weight:700; letter-spacing:-.01em; text-overflow:ellipsis; white-space:nowrap; }
.sharing-record-count { flex:none; min-width:24px; height:24px; padding:0 7px; display:grid; place-items:center; border-radius:999px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); font-size:.75rem; font-variant-numeric:tabular-nums; }
.sharing-record-list { padding:0 12px 8px; }
.sharing-record-list article { min-height:62px; padding:8px 0; display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:9px; align-items:center; border-bottom:1px solid color-mix(in srgb,var(--line,#dcd8ce) 70%,transparent); }
.sharing-record-list article:last-child { border-bottom:0; }
.sharing-record-copy { min-width:0; display:grid; gap:2px; }
.sharing-record-copy strong { overflow:hidden; font-size:.8125rem; font-weight:680; text-overflow:ellipsis; white-space:nowrap; }
.sharing-record-copy span { overflow-wrap:anywhere; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.35; }
.sharing-avatar,.sharing-record-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--accent-soft,#f3ddd4); color:var(--accent-deep,#9f422b); font-size:.75rem; font-weight:700; }
.sharing-avatar { flex:none; overflow:hidden; }
.sharing-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.sharing-record-actions { display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.sharing-record-action { min-height:30px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; gap:4px; border:0; border-radius:7px; background:transparent; color:var(--ink-soft,#66685f); font-size:.6875rem; }
.sharing-record-action:hover:where(:not([data-touch-input] *)):not(:disabled) { background:color-mix(in srgb,var(--danger,#a33a34) 9%,transparent); color:var(--danger,#a33a34); }
.sharing-record-replace:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262720); }
.sharing-record-confirmation { grid-column:2 / -1; min-width:0; padding:8px 9px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; border:1px solid color-mix(in srgb,var(--accent,#c75a3a) 28%,var(--line,#dcd8ce)); border-radius:8px; background:color-mix(in srgb,var(--accent-soft,#f3ddd4) 42%,var(--surface,#fffdf8)); }
.sharing-record-confirmation p { min-width:180px; flex:1 1 210px; display:flex; align-items:flex-start; gap:6px; color:var(--ink,#262720); font-size:.6875rem; line-height:1.4; }
.sharing-record-confirmation p svg { flex:none; margin-top:1px; color:var(--accent-deep,#9f422b); }
.sharing-record-confirmation > div { display:flex; align-items:center; gap:5px; }
.sharing-record-confirmation button { min-height:30px; padding:0 8px; border:1px solid var(--line,#dcd8ce); border-radius:7px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font-size:.6875rem; }
.sharing-record-confirmation button:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:var(--line-strong,#b9b5aa); color:var(--ink,#262720); }
.sharing-record-confirmation .sharing-confirm-replace { border-color:color-mix(in srgb,var(--accent,#c75a3a) 46%,var(--line,#dcd8ce)); color:var(--accent-deep,#9f422b); font-weight:680; }
.sharing-record-confirmation .sharing-confirm-replace:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--accent-soft,#f3ddd4); border-color:var(--accent,#c75a3a); color:var(--accent-deep,#9f422b); }
.sharing-record-confirmation .sharing-confirm-disable { border-color:color-mix(in srgb,var(--danger,#a33a34) 46%,var(--line,#dcd8ce)); color:var(--danger,#a33a34); font-weight:680; }
.sharing-record-confirmation .sharing-confirm-disable:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:var(--danger,#a33a34); background:color-mix(in srgb,var(--danger,#a33a34) 9%,var(--surface,#fffdf8)); color:var(--danger,#a33a34); }
.sharing-disable-confirmation { border-color:color-mix(in srgb,var(--danger,#a33a34) 28%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--danger,#a33a34) 6%,var(--surface,#fffdf8)); }
.sharing-disable-confirmation p svg { color:var(--danger,#a33a34); }
.sharing-record-empty { min-height:84px; padding:18px 4px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--ink-soft,#66685f); }
.sharing-record-empty p { font-size:.75rem; line-height:1.4; }
.sharing-view .compact-empty { min-height:300px; padding:40px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; }
.sharing-view .compact-empty h2 { margin-top:4px; font-size:1rem; }
.sharing-view .compact-empty p { max-width:420px; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; }
.sharing-empty-refresh { min-height:36px; margin-top:5px; padding:0 12px; display:inline-flex; align-items:center; gap:7px; font-size:.75rem; }
@keyframes sharing-enter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media (max-width:1100px) { .sharing-visibility-options { grid-template-columns:1fr; } .sharing-visibility-option { min-height:58px; } }
@media (max-width:900px) { .sharing-field-grid { grid-template-columns:1fr; } .sharing-records { grid-template-columns:1fr; } .sharing-record-card + .sharing-record-card { border-left:0; border-top:1px solid var(--line,#dcd8ce); } .sharing-record-empty { min-height:68px; } }
@media (max-width:700px) { .sharing-view { padding:16px 2px 95px; } .created-share { grid-template-columns:30px minmax(0,1fr); } .created-share button { grid-column:2; justify-self:start; } .sharing-create-switch { padding:5px; gap:4px; } .sharing-create-option { min-height:44px; padding:7px 8px; font-size:.75rem; } .sharing-create-panel { padding:17px 14px 18px; grid-template-columns:1fr; gap:16px; } .sharing-record-list article { grid-template-columns:30px minmax(0,1fr); } .sharing-record-action { grid-column:2; justify-self:start; min-height:36px; margin-left:-6px; } .sharing-record-actions { grid-column:2; justify-self:start; margin-left:-6px; } .sharing-record-actions .sharing-record-action { margin-left:0; } .sharing-record-confirmation { grid-column:2; } }
@media (hover:none),(pointer:coarse) { .sharing-refresh,.sharing-create-option,.created-share button,.sharing-record-action,.sharing-record-confirmation button { min-height:44px; } .sharing-refresh { width:44px; } }
.integrations-view { container:calendar-connections / inline-size; max-width:840px; margin:0 auto; padding:24px 6px 48px; }
.integrations-view > .section-heading { align-items:flex-start; gap:20px; margin:0 0 24px; }
.integrations-view > .section-heading h2 { margin:0 0 8px; }
.integrations-view :is(h3,h4,p) { overflow-wrap:anywhere; }
.integrations-view :is(button,input) { font:inherit; }
.integrations-view button { cursor:pointer; }
.integrations-view button:disabled { cursor:default; opacity:.48; }
.integration-group-heading { margin:0 0 12px; color:var(--ink,#262823); font:650 1rem/1.4 var(--planner-font); }
.integration-add-section { margin-top:28px; }
.integration-provider-grid { overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:16px; background:var(--surface,#fffdf8); }
.integration-provider-card { padding:20px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:16px; align-items:start; }
.integration-provider-card + .integration-provider-card { border-top:1px solid var(--line,#dcd8ce); }
.integration-provider-icon { width:44px; height:44px; flex:none; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--accent,#c76345) 18%,transparent); border-radius:12px; background:var(--accent-soft,#f3ddd4); color:var(--accent-deep,#9f422b); }
.integration-provider-icon[data-provider="google"] { background:color-mix(in srgb,#4285f4 13%,var(--surface,#fffdf8)); color:color-mix(in srgb,#4285f4 65%,var(--ink,#262823)); border-color:color-mix(in srgb,#4285f4 23%,transparent); }
.integration-provider-icon[data-provider="microsoft"] { background:color-mix(in srgb,#14b8a6 12%,var(--surface,#fffdf8)); color:color-mix(in srgb,#14b8a6 55%,var(--ink,#262823)); border-color:color-mix(in srgb,#14b8a6 23%,transparent); }
.integration-provider-copy { min-width:0; }
.integration-provider-card h4, .integration-connection-title h4 { margin:0; font:650 .9375rem/1.45 var(--planner-font); color:var(--ink,#262823); }
.integration-provider-card p, .integration-connection-title p { margin:5px 0 0; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.55; }
.integrations-view .integration-connect { min-height:40px; margin-top:1px; padding:0 13px; gap:8px; font-size:.8125rem; }
.integration-availability { display:inline-flex; margin-top:9px; padding:3px 8px; border-radius:6px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); font-size:.6875rem; line-height:1.5; }
.integration-availability-details { margin-top:7px; color:var(--ink-soft,#66685f); font-size:.75rem; }
.integration-availability-details summary { width:fit-content; cursor:pointer; text-underline-offset:3px; }
.integration-availability-details summary:hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); }
.integration-disabled-reason { margin:8px 0 0; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; }
.integration-empty { padding:20px; display:flex; align-items:center; gap:16px; border:1px dashed var(--line,#dcd8ce); border-radius:14px; }
.integration-empty .integration-provider-icon { background:transparent; color:var(--ink-soft,#66685f); border:0; }
.integration-empty h3 { margin:0; font:600 .9375rem/1.4 var(--planner-font); }
.integration-empty p { margin:5px 0 0; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; }
.integration-loading { min-height:140px; display:flex; align-items:center; justify-content:center; gap:8px; }
.integration-loading span { width:7px; height:7px; border-radius:50%; background:var(--accent,#c76345); animation:planner-pulse 1.1s infinite; }
.integration-loading span:nth-child(2) { animation-delay:.15s; }
.integration-loading span:nth-child(3) { animation-delay:.3s; }
.integration-connections { display:grid; gap:16px; }
.integration-connections > .integration-group-heading { margin-bottom:-4px; }
.integration-connection-card { min-width:0; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:16px; background:var(--surface,#fffdf8); }
.integration-connection-card > header { padding:20px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.integration-connection-title { min-width:0; display:flex; align-items:center; gap:12px; }
.integration-connection-title > div { min-width:0; }
.integration-state { flex:none; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); font-size:.6875rem; font-weight:600; line-height:1.4; }
.integration-state.connected { background:color-mix(in srgb,var(--sage,#687b69) 12%,var(--surface,#fffdf8)); color:var(--ink,#262823); }
.integration-state.attention, .integration-state.failed { background:color-mix(in srgb,var(--danger,#a33a34) 9%,var(--surface,#fffdf8)); color:var(--danger,#a33a34); }
.integration-state.pending { background:var(--accent-soft,#f3ddd4); color:var(--accent-deep,#9f422b); }
.integration-status-grid { padding:0 20px 18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; border-bottom:1px solid var(--line,#dcd8ce); }
.integration-status-grid div { display:grid; gap:4px; }
.integration-status-grid span { color:var(--ink-soft,#66685f); font-size:.75rem; }
.integration-status-grid strong { font-size:.8125rem; font-weight:550; overflow-wrap:anywhere; }
.integration-error { margin:16px 20px 0; padding:12px; display:flex; gap:10px; align-items:flex-start; border:1px solid color-mix(in srgb,var(--danger,#a33a34) 28%,var(--line,#dcd8ce)); border-radius:10px; background:color-mix(in srgb,var(--danger,#a33a34) 6%,var(--surface,#fffdf8)); color:var(--danger,#a33a34); }
.integration-error > svg { flex:none; }
.integration-error > div { min-width:0; display:grid; gap:4px; }
.integration-error strong { font-size:.8125rem; }
.integration-error p, .integration-error span { margin:0; font-size:.75rem; line-height:1.5; }
.integration-calendar-empty { padding:20px; margin:0; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; }
.integration-calendar-list { padding:0 20px; }
.integration-calendar-row { min-height:80px; padding:16px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; border-top:1px solid var(--line,#dcd8ce); }
.integration-calendar-row:first-child { border-top:0; }
.integration-calendar-selected { min-width:0; display:grid; grid-template-columns:18px 10px minmax(0,1fr); gap:10px; align-items:center; cursor:pointer; }
.integration-calendar-selected input { width:18px; height:18px; accent-color:var(--accent,#c76345); }
.integration-calendar-selected > span:last-child { min-width:0; display:grid; gap:4px; }
.integration-calendar-selected strong { font-size:.875rem; font-weight:550; overflow-wrap:anywhere; }
.integration-calendar-selected small { color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.4; }
.integration-color-dot { width:10px; height:10px; border:1px solid color-mix(in srgb,var(--ink,#262823) 20%,transparent); border-radius:50%; }
.integration-calendar-controls { display:flex; align-items:end; gap:10px; }
.integration-calendar-controls label, .ical-subscription-form label { min-width:0; display:grid; gap:7px; color:var(--ink-soft,#66685f); font-size:.8125rem; }
.ical-subscription-form input, .integration-calendar-controls input[type="color"] { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font-size:.875rem; }
.integration-calendar-controls input[type="color"], .ical-subscription-form input[type="color"] { width:48px; height:44px; padding:5px; cursor:pointer; }
.integrations-view .integration-calendar-controls .secondary-button { min-height:44px; padding-inline:14px; font-size:.8125rem; }
.integration-actions { padding:16px 20px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line,#dcd8ce); }
.integrations-view .integration-actions :is(.button,.secondary-button) { min-height:40px; padding-inline:14px; font-size:.8125rem; }
.integration-actions .danger-text-button { min-height:40px; margin-left:auto; padding:6px 9px; font-size:.8125rem; }
.integration-disconnect-confirm { width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--danger,#a33a34); font-size:.8125rem; }
.integration-disconnect-confirm > span { flex:1 1 200px; }
.integration-disconnect-confirm button { min-height:40px; padding:0 12px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink,#262823); }
.integration-disconnect-confirm button:first-of-type { color:var(--danger,#a33a34); }
.ical-subscription-card { margin-top:12px; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:16px; background:var(--surface,#fffdf8); }
.ical-subscription-card > h4 { margin:0; font:inherit; }
.ical-subscription-toggle { width:100%; padding:20px; display:grid; grid-template-columns:44px minmax(0,1fr) 18px; align-items:center; gap:16px; border:0; background:transparent; color:var(--ink,#262823); text-align:left; }
.ical-subscription-toggle > span:nth-child(2) { font-size:.9375rem; font-weight:650; }
.ical-subscription-toggle small { display:block; margin-top:5px; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:400; line-height:1.55; }
.ical-subscription-toggle > svg { transition:transform 160ms ease; }
.ical-subscription-toggle[aria-expanded="true"] > svg { transform:rotate(180deg); }
.ical-subscription-toggle:hover:where(:not([data-touch-input] *)) { background:color-mix(in srgb,var(--ink,#262823) 3%,transparent); }
.ical-subscription-fields { padding:0 20px 20px; }
.ical-subscription-fields[hidden] { display:none; }
.ical-subscription-form { margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) 48px auto; gap:14px; align-items:end; }
.ical-feed-url { grid-column:1/-1; }
.integrations-view .ical-subscription-form .button { min-height:44px; padding-inline:16px; gap:7px; font-size:.8125rem; }
.integration-form-error { margin:12px 0 0; color:var(--danger,#a33a34); font-size:.8125rem; line-height:1.5; }
.integration-security-note { margin:16px 0 0; display:flex; gap:8px; align-items:flex-start; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.5; }
.integration-security-note > svg { flex:none; margin-top:2px; }
@container calendar-connections (max-width:520px) {
    .integration-provider-card { grid-template-columns:40px minmax(0,1fr); padding:16px; gap:12px; }
    .integration-provider-card > .integration-connect { grid-column:2; justify-self:start; }
    .integration-provider-icon { width:40px; height:40px; }
    .integration-connection-card > header { flex-wrap:wrap; padding:16px; }
    .integration-state { margin-left:52px; }
    .integration-status-grid { padding:0 16px 16px; }
    .integration-calendar-list { padding:0 16px; }
    .integration-calendar-row { grid-template-columns:1fr; gap:10px; }
    .integration-calendar-controls { justify-content:flex-end; }
    .integration-actions { padding:14px 16px; }
    .ical-subscription-toggle { padding:16px; grid-template-columns:40px minmax(0,1fr) 18px; gap:12px; }
    .ical-subscription-fields { padding:0 16px 16px; }
    .ical-subscription-form { grid-template-columns:minmax(0,1fr) 48px; }
    .ical-subscription-form .button { grid-column:1/-1; }
}
@media (max-width:600px) {
    .integrations-view { padding:12px 0 28px; }
    .integrations-view > .section-heading { flex-direction:column; gap:12px; }
    .integration-empty { padding:16px 12px; gap:10px; }
}
@media (hover:none),(pointer:coarse) { .integrations-view :is(.integration-connect,.integration-actions button) { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .integration-loading span { animation:none; } .ical-subscription-toggle > svg { transition:none; } }
.portability-view { margin-top:35px; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:13px; background:var(--surface,#fffdf8); }
.portability-view > header { padding:24px 24px 0; }
.portability-view > header h2 { font-size:1.55rem; }
.portability-view > header p { max-width:760px; margin-top:7px; color:var(--ink-soft,#66685f); font-size:.72rem; line-height:1.5; }
.portability-workflow-card { margin-top:22px; border:0; border-top:1px solid var(--line,#dcd8ce); border-radius:0; }
.portability-workflow-panel { row-gap:18px; animation:none; }
.portability-workflow-panel .sharing-action-heading h3, .import-preview h3 { font:600 1.06rem/1.2 var(--planner-heading); letter-spacing:-.01em; }
.portability-workflow-body { min-width:0; }
.portability-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.portability-fields label, .import-preview > header label, .import-preview > header .portability-field { display:grid; gap:5px; color:var(--ink-soft,#66685f); font-size:.64rem; }
.portability-fields input, .import-preview select { min-height:39px; padding:7px 8px; border:1px solid var(--line,#dcd8ce); border-radius:7px; background:var(--surface,#fffdf8); color:var(--ink,#262823); }
.portability-actions { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.portability-actions button { min-height:40px; padding:0 13px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font-size:.7rem; }
.portability-actions button:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 62%,var(--line,#dcd8ce)); background:var(--paper-deep,#eeebe2); }
.portability-file { margin-top:10px; color:var(--ink-soft,#66685f); font-size:.66rem; overflow-wrap:anywhere; }
.portability-import-action { align-self:center; }
.portability-import-action > .secondary-button { min-height:40px; padding:0 14px; font-size:.7rem; }
.portability-unavailable { padding:12px; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--paper,#f7f5ef); }
.portability-unavailable p, .portability-target-unavailable { color:var(--ink-soft,#66685f); font-size:.68rem; }
.portability-unavailable .secondary-button { width:max-content; min-height:38px; margin-top:10px; padding-inline:13px; font-size:.68rem; }
.portability-target-unavailable { align-self:end; padding:9px 10px; border:1px solid color-mix(in srgb,var(--danger,#a33a34) 28%,var(--line,#dcd8ce)); border-radius:8px; }
.portability-view button:disabled { opacity:.46; cursor:default; }
.portability-workflow-panel > .form-message { grid-column:1 / -1; margin:0; }
.portability-workflow-panel > .import-preview { grid-column:1 / -1; margin:0; padding-top:20px; border-top:1px solid var(--line,#dcd8ce); }
.import-preview > header { display:grid; grid-template-columns:1fr minmax(180px,280px); gap:20px; align-items:end; }
.import-preview > header p { margin-top:5px; color:var(--ink-soft,#66685f); font-size:.65rem; }
.import-issue { margin-top:8px; padding:9px 11px; display:grid; grid-template-columns:auto 1fr auto; gap:8px; border-radius:7px; font-size:.64rem; }
.import-issue.error { background:color-mix(in srgb,var(--danger,#a33a34) 9%,transparent); color:var(--danger,#a33a34); }
.import-issue.warning { background:color-mix(in srgb,var(--accent,#c76345) 9%,transparent); color:var(--accent-deep,#9f422b); }
.import-items { max-height:390px; margin-top:13px; overflow:auto; border:1px solid var(--line,#dcd8ce); border-radius:9px; }
.import-items article { padding:11px; border-bottom:1px solid var(--line,#dcd8ce); }
.import-items article:last-child { border-bottom:0; }
.import-items article.blocked { opacity:.62; }
.import-items article > label { display:grid; grid-template-columns:auto 55px 1fr; gap:9px; align-items:center; }
.import-items article label > span:last-child { min-width:0; display:grid; }
.import-items article strong { overflow:hidden; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.import-items article small, .import-items article p { color:var(--ink-soft,#66685f); font-size:.61rem; }
.import-items article em { display:block; margin:5px 0 0 82px; color:var(--ink-soft,#66685f); font-size:.6rem; }
.import-kind { color:var(--accent-deep,#9f422b); font-size:.6rem; font-weight:700; text-transform:uppercase; }
.import-items article p.error { color:var(--danger,#a33a34); }
.import-preview > footer { margin-top:14px; display:flex; justify-content:flex-end; gap:8px; }
.import-preview > footer .button, .import-preview > footer .secondary-button { min-height:40px; padding:0 14px; font-size:.68rem; }
@media (max-width:700px) {
    .portability-view > header { padding:18px 14px 0; }
    .portability-workflow-panel { row-gap:16px; }
    .import-preview > header { grid-template-columns:1fr; }
}
@media (max-width:520px) {
    .portability-fields { grid-template-columns:1fr; }
    .import-preview > footer { flex-wrap:wrap; }
}
@media (max-width:400px) {
    .import-preview > footer > button { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
    .portability-workflow-switch .sharing-create-option { transition:none; transform:none; }
}
.activity-line { margin-top:8px!important; color:var(--ink-soft,#66685f); font-size:.7rem; }
.task-editor footer { margin-top:20px; display:grid; grid-template-columns:auto 1fr auto auto; gap:7px; align-items:center; }
.task-details-layer, .task-details-layer * { box-sizing:border-box; }
.task-details-layer { position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); color:var(--ink,#262823); font-family:var(--planner-font); }
.task-details-backdrop { position:absolute; inset:0; background:rgba(12,13,10,.58); backdrop-filter:none; -webkit-backdrop-filter:none; }
.task-details-dialog[data-task-details-pending], .task-details-backdrop[data-task-details-pending] { opacity:0; }
.task-details-dialog { position:relative; display:flex; flex-direction:column; width:min(800px,100%); height:min(640px,calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))); min-width:0; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:20px; background:var(--surface,#fffdf8); box-shadow:0 24px 80px rgba(0,0,0,.28); transform-origin:center; }
.task-details-dialog > header { flex-shrink:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:8px 14px 0; }
.task-calendar-source { flex:none; align-self:center; }
.task-calendar-source--phone { display:none; }
.task-calendar-source .calendar-task-source > summary { width:34px; height:34px; padding:6px; align-items:center; justify-content:center; }
.task-calendar-source .calendar-provider-logo { width:22px; height:22px; flex-basis:22px; }
.task-calendar-source .calendar-task-source > .calendar-task-source-content { position:absolute; top:calc(100% + 6px); left:0; z-index:6; width:min(320px,calc(100vw - 56px)); padding:12px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface,#fffdf8); box-shadow:0 12px 36px rgba(0,0,0,.22); }
.task-scope-control { position:relative; min-width:0; margin-inline:10px auto; }
.task-details-dialog > header .task-scope-control select, .task-quick-settings-scope select { width:auto; max-width:min(240px,100%); min-height:34px; padding-block:6px; padding-inline-start:10px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background-color:var(--surface,#fffdf8); color:var(--ink,#262823); font:500 .8125rem/1.4 var(--planner-font); }
.task-scope-control select:hover:where(:not([data-touch-input] *)):not(:disabled) { background-color:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.task-details-actions, .task-details-safe-actions { display:flex; align-items:center; min-width:0; gap:2px; }
.task-details-actions { flex:1 1 auto; gap:8px; }
.task-details-safe-actions { flex:1 1 auto; justify-content:center; }
.task-details-dialog > header button:not(.planner-picker-popover button,.task-focus-action) { flex:none; width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink-soft,#66685f); cursor:pointer; transition:background-color 160ms ease,color 160ms ease; }
.task-details-dialog > header button:not(.planner-picker-popover button,.task-focus-action):hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.task-details-dialog > header .task-delete-button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:color-mix(in srgb,var(--danger,#a33a34) 10%,var(--surface,#fffdf8)); color:var(--danger,#a33a34); }
.task-week-picker { display:grid; place-items:center; flex:none; }
.task-details-dialog > header .task-week-toggle[aria-expanded="true"] { color:var(--accent); background:var(--accent-soft); }
.task-color-toggle, .task-week-toggle { position:relative; }
.task-details-dialog > header .task-color-toggle[aria-expanded="true"] { color:var(--accent,#c76345); background:color-mix(in srgb,var(--accent,#c76345) 12%,var(--surface,#fffdf8)); }
.task-details-dialog > header .task-color-toggle[data-enabled="true"] { background:color-mix(in srgb,var(--task-color) 18%,var(--surface,#fffdf8)); color:var(--ink,#262823); }
.task-color-toggle[data-enabled="true"]:not([data-premium-upgrade])::after { content:""; position:absolute; right:2px; bottom:2px; width:9px; height:9px; border:2px solid var(--surface,#fffdf8); border-radius:50%; background:var(--task-color); }
.task-details-dialog > header button:not(.planner-picker-popover button,.task-focus-action):disabled { opacity:.4; cursor:default; }
.task-details-dialog > header :is(.task-repeat-toggle,.task-timing-toggle,.task-reminders-toggle,.task-comments-toggle,.task-assignment-toggle,.task-attachments-toggle):is([data-enabled="true"],[aria-expanded="true"]) { color:var(--accent,#c76345); background:color-mix(in srgb,var(--accent,#c76345) 12%,var(--surface,#fffdf8)); }
.task-reminders-toggle { position:relative; }
.task-reminders-count { position:absolute; top:0; right:-1px; display:grid; place-items:center; min-width:14px; height:14px; padding:0 3px; border-radius:8px; background:var(--accent,#c76345); color:var(--paper,#f7f5ef); font-size:.625rem; font-weight:600; line-height:1; }
.task-repeat-toggle, .task-comments-toggle, .task-assignment-toggle, .task-attachments-toggle { position:relative; }
.task-details-dialog > header :is(.task-color-toggle,.task-repeat-toggle,.task-comments-toggle,.task-assignment-toggle,.task-attachments-toggle)[aria-disabled="true"] { color:var(--ink-soft,#66685f); cursor:help; }
.task-details-dialog > header .task-details-actions button[data-premium-upgrade] { color:var(--ink-soft,#66685f); }
.task-feature-lock, .task-comments-lock { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:15px; height:15px; border:1px solid var(--line,#dcd8ce); border-radius:50%; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); pointer-events:none; }
.integrations-view button:has(> .task-feature-lock), .forever-board button:has(> .task-feature-lock), .forever-board-stroke:has(> .task-feature-lock) { position:relative; }
.forever-board button[data-premium-required]:has(> .task-feature-lock):disabled { opacity:1; }
.task-details-popover, .task-quick-settings { position:absolute; top:var(--task-header-popover-top,48px); right:14px; z-index:5; width:min(390px,calc(100% - 28px)); max-height:calc(100% - var(--task-header-popover-top,48px) - 18px); padding:16px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line,#dcd8ce); border-radius:14px; background:var(--surface,#fffdf8); box-shadow:0 12px 36px rgba(0,0,0,.22); animation:task-option-appear 160ms ease-out; }
.task-details-popover > header { margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.task-details-popover h3 { margin:0; font:600 .86rem/1.4 var(--planner-font); }
.task-details-popover > header button { width:30px; height:30px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; color:var(--ink-soft,#66685f); background:transparent; }
.reminder-header-actions button:has(> .task-feature-lock) { position:relative; }
.task-details-popover > header button:hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); background:var(--paper-deep,#eeebe2); }
.task-comments-popover { width:min(460px,calc(100% - 28px)); }
.task-details-popover[hidden] { display:none; }
.task-timing-popover, .task-repeat-popover, .task-reminder-popover, .task-attachments-popover { width:min(640px,calc(100% - 28px)); }
.task-assignment-popover { width:min(320px,calc(100% - 28px)); }
.task-color-popover { width:min(440px,calc(100% - 28px)); }
.board-color-picker-embedded .board-color-popover { position:static; display:grid; width:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:visible; background:transparent; box-shadow:none; animation:none; }
.board-color-picker-embedded .board-color-popover-header { display:none; }
@media (max-width:540px), (max-height:640px) {
    .board-color-picker-embedded .board-color-popover { gap:10px; }
    .board-color-picker-embedded .board-color-wheel { width:min(168px,26dvh); margin:0 0 2px; }
    .board-color-picker-embedded .board-saved-colors { gap:5px; padding-top:8px; }
}
.task-timing-popover .task-timing-grid { display:grid; margin:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.65fr); align-items:start; gap:10px; }
.task-timing-field, .task-deadline-time { display:grid; min-width:0; gap:6px; }
.task-timing-field > .planner-picker-label, .task-deadline-time > .planner-picker-label { color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:500; line-height:1.4; }
.task-timing-trigger { display:flex; align-items:center; gap:8px; width:100%; min-width:0; min-height:52px; padding:9px 11px; border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); font-size:.9375rem; line-height:1.3; text-align:left; transition:background 140ms ease,border-color 140ms ease; }
.task-timing-trigger > svg { flex:none; color:var(--ink-soft,#66685f); }
.task-timing-value { display:grid; flex:1; min-width:0; gap:2px; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.task-timing-value[data-empty="true"] { color:var(--ink-soft,#66685f); font-weight:400; }
.task-deadline-field .task-timing-value { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.task-timing-value small { color:var(--ink-soft,#66685f); font-size:.75rem; font-weight:400; }
.task-timing-trigger:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 60%,var(--line,#dcd8ce)); background:var(--paper-deep,#eeebe2); }
.task-timing-trigger[aria-expanded="true"] { border-color:var(--accent,#c76345); background:var(--accent-soft,#f4dfd6); }
.task-timing-trigger[aria-expanded="true"] > svg { color:var(--accent,#c76345); }
.task-timing-chevron { transition:transform 140ms ease; }
.task-timing-trigger[aria-expanded="true"] .task-timing-chevron { transform:rotate(180deg); }
.task-timing-trigger[aria-invalid="true"] { border-color:var(--danger,#a33a34); }
.reminder-time-zone-hint { display:block; margin:3px 0 0; color:var(--ink-soft,#66685f); font-size:.6875rem; line-height:1.35; overflow-wrap:anywhere; }
.task-timing-fields :is(button,input):focus-visible { outline:2px solid var(--accent,#c76345); outline-offset:2px; }
.task-timing-fields button:disabled { opacity:.45; cursor:default; }
.task-timing-picker { margin-top:12px; padding:12px; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--paper,#f7f5ef); animation:task-option-appear 140ms ease-out; }
.task-timing-picker-header { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.task-timing-picker-header h4 { flex:1; margin:0; font-size:.875rem; font-weight:600; line-height:1.4; }
.task-picker-icon { display:grid; flex:none; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink-soft,#66685f); }
.task-picker-clear { min-height:30px; padding:4px 8px; border:0; border-radius:7px; background:transparent; color:var(--ink-soft,#66685f); font-size:.8125rem; }
.task-picker-icon:hover:where(:not([data-touch-input] *)):not(:disabled), .task-picker-clear:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.planner-time-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; align-items:start; gap:8px 16px; }
.planner-time-entry { display:block; grid-column:1; min-width:0; }
.planner-time-entry .planner-time-input { width:100%; min-width:0; min-height:48px; padding:10px 12px; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font-size:1.125rem; line-height:1.3; font-variant-numeric:tabular-nums; }
.planner-time-input::placeholder { color:var(--ink-soft,#66685f); font-size:.875rem; }
.planner-time-help, .planner-time-error { grid-column:1; margin:0; font-size:.8125rem; line-height:1.5; }
.planner-time-help { color:var(--ink-soft,#66685f); }
.planner-time-error { color:var(--danger,#a33a34); }
.planner-time-input[aria-invalid="true"] { border-color:var(--danger,#a33a34); }
.planner-time-list { grid-column:2; grid-row:1 / 4; display:flex; flex-direction:column; gap:2px; max-height:224px; min-width:0; padding:2px 5px 2px 2px; overflow-y:auto; overscroll-behavior:contain; }
.planner-time-lists { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; min-width:0; }
.planner-time-options.has-hour-minute-columns { grid-template-rows:1fr; }
.planner-time-lists .planner-time-list { grid-column:auto; grid-row:auto; }
.planner-time-lists .planner-time-option { position:relative; justify-content:center; font-size:1.125rem; text-align:center; }
.planner-time-lists .planner-time-option[aria-selected="true"]::after { position:absolute; right:10px; margin-left:0; }
.planner-time-option { display:flex; align-items:center; justify-content:space-between; flex:none; min-height:36px; padding:6px 10px; border:0; border-radius:7px; background:transparent; color:var(--ink,#262823); font-size:.9375rem; line-height:1.3; font-variant-numeric:tabular-nums; text-align:left; }
.planner-time-option:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); }
/* Times before a future-only picker's minimum; a disabled picker keeps its own style. */
.planner-time-list:not([aria-disabled="true"]) .planner-time-option:disabled { opacity:.32; cursor:default; }
.planner-time-option[aria-selected="true"] { background:var(--accent-soft,#f4dfd6); color:var(--accent-deep,#9f422b); }
.planner-time-option[aria-selected="true"]::after { content:'✓'; margin-left:8px; }
.task-deadline-picker-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.55fr); gap:18px; align-items:start; }
.planner-date-options { min-width:0; }
.planner-calendar-nav { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; }
.planner-calendar-nav button { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink-soft,#66685f); }
.planner-calendar-nav button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.planner-calendar-month { min-width:0; font-size:.875rem; font-weight:600; text-align:center; }
.planner-calendar-weekdays, .planner-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
.planner-calendar-weekdays { margin-bottom:4px; color:var(--ink-soft,#66685f); font-size:.6875rem; text-align:center; }
.planner-calendar-weekdays span { padding-block:3px; }
.planner-calendar-day { display:grid; place-items:center; position:relative; min-width:0; min-height:34px; padding:4px 0; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink,#262823); font-size:.875rem; line-height:1.25; font-variant-numeric:tabular-nums; }
.planner-calendar-day.is-outside { color:var(--ink-soft,#66685f); opacity:.5; }
.planner-calendar-day.is-today { border-color:var(--line,#dcd8ce); }
.planner-calendar-day:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); opacity:1; }
/* Future-only pickers show earlier days for orientation but cannot choose them. */
.planner-calendar-day.is-before-minimum { opacity:.32; cursor:default; }
.planner-calendar-day[aria-pressed="true"] { border-color:var(--accent,#c76345); background:var(--accent-soft,#f4dfd6); color:var(--accent-deep,#9f422b); font-weight:650; opacity:1; }
.planner-date-shortcuts { display:flex; gap:6px; margin-top:8px; }
.planner-date-shortcuts button { flex:1; min-width:0; min-height:32px; padding:5px 8px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:transparent; color:var(--ink,#262823); font-size:.8125rem; }
.planner-date-shortcuts button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); }
.task-deadline-time { align-self:stretch; grid-template-rows:auto auto 1fr; align-items:start; padding-top:4px; }
.task-deadline-time .task-timing-trigger { min-height:44px; padding:8px; background:var(--surface,#fffdf8); }
.task-picker-done { justify-self:center; align-self:end; min-height:36px; margin-top:12px; padding:7px 16px; border:1px solid transparent; border-radius:20px; background:var(--ink,#262823); color:var(--surface,#fffdf8); font-size:.875rem; font-weight:600; }
.task-picker-done:hover:where(:not([data-touch-input] *)):not(:disabled) { opacity:.85; }
.planner-date-picker { position:relative; display:grid; align-content:start; gap:6px; min-width:0; }
.planner-date-picker > .planner-picker-label { display:block; margin:0; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:500; line-height:1.4; }
.planner-date-picker > .planner-date-trigger { min-height:42px; }
.planner-date-picker :is(button,input):focus-visible { outline:2px solid var(--accent,#c76345); outline-offset:2px; }
.planner-date-picker button:disabled { opacity:.45; cursor:default; }
.planner-picker-popover { position:absolute; z-index:100; inset:auto; top:calc(100% + 8px); left:0; width:320px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); margin:0; padding:12px; overflow:auto; overscroll-behavior:contain; color:var(--ink,#262823); font-family:var(--planner-font); box-shadow:0 12px 40px #0003; }
.planner-picker-popover.has-time { width:490px; }
.planner-week-picker { position:relative; min-width:0; }
.week-picker-trigger { max-width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:3px 5px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:center; cursor:pointer; transition:background 140ms ease; }
.week-picker-trigger > span { min-width:0; }
.week-picker-trigger > svg { flex:none; color:var(--ink-soft); transition:transform 140ms ease; }
.week-picker-trigger:hover:where(:not([data-touch-input] *)), .week-picker-trigger[aria-expanded="true"] { background:var(--paper-deep); }
.week-picker-trigger[aria-expanded="true"] > svg { transform:rotate(180deg); }
.week-picker-popover { width:410px; overflow-x:hidden; text-align:left; letter-spacing:normal; }
.week-picker-period-viewport { display:flow-root; box-sizing:border-box; min-width:0; padding:3px; margin:-3px; overflow:clip; }
.week-picker-month-nav { margin:2px 0 10px; }
.planner-calendar-nav .week-picker-month-toggle { width:auto; display:flex; gap:6px; padding:4px 9px; font-size:.86rem; font-weight:650; color:var(--ink); }
.week-picker-month-toggle > svg { transition:transform 160ms ease; }
.week-picker-month-toggle[aria-expanded="true"] > svg { transform:rotate(180deg); }
.week-picker-weeks { display:grid; gap:3px; }
.planner-week-row { width:100%; min-height:53px; padding:9px 10px; display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:9px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:background 120ms ease, border-color 120ms ease; }
.planner-week-row:hover:where(:not([data-touch-input] *)) { background:var(--paper-deep); }
.planner-week-row:disabled { opacity:.45; cursor:default; }
.planner-week-row[aria-pressed="true"] { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); background:var(--accent-soft); }
.week-picker-number { font-size:.74rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.planner-week-row[aria-current="date"] .week-picker-number { color:var(--accent); }
.week-picker-range { font-size:.79rem; font-weight:500; line-height:1.4; }
.week-picker-count { display:flex; align-items:center; justify-content:flex-end; min-width:6em; gap:6px; color:var(--ink-soft); font-size:.72rem; white-space:nowrap; }
.week-picker-dot { width:6px; height:6px; flex:none; border:1px solid var(--line); border-radius:50%; }
.has-tasks .week-picker-dot { background:var(--accent); border-color:var(--accent); }
.planner-week-row.has-tasks .week-picker-count { color:var(--ink); }
.planner-week-row.is-unknown:not(.has-tasks) .week-picker-dot { border-style:dashed; }
.week-picker-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:11px; margin-top:8px; border-top:1px solid var(--line); }
.week-picker-footer > span { display:flex; align-items:center; justify-content:flex-end; min-height:2.7em; max-width:58%; color:var(--ink-soft); font-size:.7rem; text-align:right; line-height:1.35; }
.week-picker-feedback { margin:10px 0 0; color:var(--ink-soft); font-size:.74rem; line-height:1.4; }
.week-picker-year { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 12px; color:var(--ink-soft); font-size:.8rem; }
.week-picker-year input { width:105px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; }
.week-picker-months { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.week-picker-months button { min-height:39px; padding:6px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink); font-size:.82rem; cursor:pointer; }
.week-picker-months button:hover:where(:not([data-touch-input] *)) { background:var(--paper-deep); }
.week-picker-months button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
@media (max-width:420px) {
    .planner-week-row { grid-template-columns:50px minmax(0,1fr) auto; gap:6px; padding-inline:7px; }
    .week-picker-count { font-size:.68rem; }
}
@media (prefers-reduced-motion:reduce) {
    .week-picker-trigger, .week-picker-trigger > svg, .week-picker-month-toggle > svg, .planner-week-row { transition:none; }
}
.planner-picker-popover::backdrop { background:transparent; pointer-events:none; }
.planner-picker-popover .task-timing-picker-header { position:static; padding:0; border:0; background:transparent; }
.planner-picker-popover .task-timing-picker-header h4 { margin:0; color:var(--ink,#262823); }
.planner-picker-popover .planner-calendar-day { min-height:36px; }
.planner-picker-popover .task-deadline-time > .planner-picker-label { font-size:.8125rem; font-weight:500; }
@media (max-width:540px) {
    .planner-picker-popover.has-time { width:350px; }
    .planner-picker-popover .task-deadline-picker-body { grid-template-columns:minmax(0,1fr); gap:12px; }
    .planner-picker-popover .task-deadline-time { grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto; align-items:center; gap:8px; padding:0; }
    .planner-picker-popover .task-picker-done { margin:0; }
}
.task-timing-popover .editor-toggles { margin:18px 0 0; }
.task-timing-popover .editor-toggles label { min-height:24px; font-size:.8125rem; cursor:pointer; }
.task-timing-popover .editor-toggles input { flex:none; width:16px; height:16px; margin:0; accent-color:var(--accent,#c76345); }
.reminder-header-actions { display:flex; align-items:center; gap:4px; }
.task-reminder-popover { padding:12px; }
.task-reminder-popover > header { margin-bottom:8px; }
.task-timing-fields .task-timing-trigger { min-height:42px; padding:7px 9px; gap:6px; }
.task-timing-fields .task-timing-field { gap:4px; }
.task-timing-fields .task-timing-picker { margin-top:8px; padding:8px; }
.task-timing-fields .planner-time-list { max-height:clamp(96px,calc(100dvh - 380px),176px); }
.task-timing-fields .planner-time-option { min-height:32px; padding:5px 8px; font-size:1rem; }
.reminder-time-clear { display:flex; justify-content:flex-end; margin-top:2px; }
.task-reminder-popover .reminder-form { grid-template-columns:minmax(0,1fr); margin:0; padding:0; border:0; border-radius:0; background:transparent; gap:10px; }
.reminder-timing-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:10px; align-items:start; }
.reminder-timing-grid > .task-timing-field { grid-template-rows:auto auto; }
.task-reminder-popover .reminder-form .reminder-delivery-options label, .task-reminder-popover .reminder-form legend { min-width:0; color:var(--ink-soft,#66685f); font-size:.75rem; }
.task-reminder-popover .reminder-form fieldset { min-width:0; margin:0; gap:8px; }
.reminder-delivery-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px 10px; }
.task-reminder-popover .reminder-delivery-options label { min-height:40px; padding:6px 8px; gap:6px; border:1px solid var(--line,#dcd8ce); border-radius:9px; color:var(--ink-soft,#66685f); cursor:pointer; }
.task-reminder-popover .reminder-delivery-options label:has(input:checked) { color:var(--ink,#262823); background:var(--paper-deep,#eeebe2); }
.task-reminder-popover .reminder-delivery-options label:has(input:disabled) { cursor:default; }
.task-reminder-popover .reminder-delivery-options label[data-unavailable="true"] { color:var(--ink-soft,#66685f); }
.task-reminder-popover .reminder-delivery-options label[data-reminder-channel-setup="browser"] { color:var(--ink,#262823); border-color:var(--accent,#c76345); background:var(--paper-deep,#eeebe2); box-shadow:0 5px 14px rgba(38,40,35,.08); }
.task-reminder-popover .reminder-delivery-options label[data-reminder-channel-setup="browser"]:hover:where(:not([data-touch-input] *)) { background:var(--paper,#f8f7f2); box-shadow:0 6px 16px rgba(38,40,35,.12); }
.task-reminder-popover .reminder-delivery-options label[data-reminder-channel-setup="browser"]:has(:focus-visible) { outline:2px solid var(--accent,#c76345); outline-offset:2px; }
.task-reminder-popover .reminder-delivery-options label[data-reminder-channel-setup="browser"]:has(input:disabled) { opacity:.76; box-shadow:none; }
.task-reminder-popover .reminder-delivery-options label[data-reminder-channel-setup="browser-unavailable"] { color:var(--ink-soft,#66685f); border-style:dashed; background:color-mix(in srgb,var(--paper-deep,#eeebe2) 58%,var(--surface,#fffdf8)); }
.task-reminder-popover .reminder-delivery-options label[data-reminder-channel-setup="browser-unavailable"] small { color:var(--ink-soft,#66685f); }
.reminder-delivery-text { display:grid; min-width:0; gap:2px; line-height:1.3; }
.reminder-delivery-text small { color:var(--ink-soft,#66685f); font-size:.6875rem; font-weight:400; }
.reminder-delivery-text .reminder-delivery-setup { display:inline-flex; align-items:center; gap:4px; color:var(--accent,#c76345); font-weight:600; }
.reminder-delivery-setup svg { flex:none; }
.reminder-delivery-help { margin:10px 2px 0; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.4; }
.reminder-device-dialog { box-sizing:border-box; width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 48px); margin:auto; padding:24px; overflow:auto; border:1px solid var(--line,#dcd8ce); border-radius:18px; background:var(--surface,#fffdf8); color:var(--ink,#292b25); box-shadow:0 24px 80px rgb(20 18 15 / .25); }
.reminder-device-dialog::backdrop { background:rgba(12,13,10,.58); backdrop-filter:none; -webkit-backdrop-filter:none; }
.reminder-device-dialog header { display:flex; align-items:center; gap:12px; }
.reminder-device-icon { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:12px; background:color-mix(in srgb,var(--accent,#c76345) 12%,transparent); color:var(--accent,#c76345); }
.reminder-device-dialog h2 { flex:1; margin:0; font-size:1.05rem; line-height:1.35; font-weight:600; }
.reminder-device-dialog p { margin:18px 0 24px; color:var(--ink-soft,#66685f); font-size:.88rem; line-height:1.6; }
.reminder-device-close { display:grid; place-items:center; flex-shrink:0; min-width:32px; min-height:32px; padding:6px; border:0; border-radius:8px; background:transparent; color:var(--ink-soft,#66685f); cursor:pointer; }
.reminder-device-close:hover:where(:not([data-touch-input] *)) { background:var(--surface-muted,#f3f0e8); }
.reminder-device-dialog footer { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.reminder-device-dialog, .reminder-device-dialog button { font-family:var(--planner-font,system-ui,sans-serif); }
.reminder-device-dialog h2 { font-family:var(--planner-heading,var(--planner-font,system-ui,sans-serif)); }
.reminder-device-dialog footer button { min-height:42px; padding:9px 16px; border-radius:10px; font-size:.82rem; }
.reminder-device-dialog :focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:3px; }
@media (max-width:540px) { .reminder-device-dialog { padding:20px; } .reminder-device-dialog footer button { flex:1 1 auto; } }
@media (max-width:540px) {
    .task-timing-fields .planner-time-list { max-height:clamp(64px,calc(100dvh - 420px),112px); }
}
.task-reminder-popover .reminder-form input[type="checkbox"] { width:15px; height:15px; min-height:0; margin:0; flex:none; accent-color:var(--accent,#c76345); }
.task-reminder-popover .reminder-row { margin:0 0 12px; border:0; border-radius:0; border-bottom:1px solid var(--line,#dcd8ce); background:transparent; }
.task-reminder-popover .reminder-summary { padding:8px 0 12px; }
.task-reminder-popover .reminder-summary strong { font-size:.8125rem; font-weight:500; overflow-wrap:anywhere; }
.task-reminder-popover .reminder-summary span { font-size:.75rem; overflow-wrap:anywhere; }
.task-reminder-popover .reminder-row[data-editing="true"] .reminder-summary strong { color:var(--accent,#c76345); }
.task-reminder-popover .reminder-remove { flex:none; min-width:32px; border:0; border-radius:7px; }
.task-reminder-popover .reminder-remove:hover:where(:not([data-touch-input] *)):not(:disabled) { color:var(--danger,#a33a34); }
.task-reminder-popover .reminder-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; margin:0; gap:8px; }
.task-reminder-popover .reminder-actions button { min-width:0; min-height:34px; padding:6px 10px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:8px; white-space:normal; font:600 .8125rem/1.3 var(--planner-font); }
.task-reminder-popover .reminder-cancel { border:0; background:transparent; color:var(--ink-soft,#66685f); }
.task-repeat-hint { margin:0 0 12px; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.5; }
.task-repeat-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.task-repeat-presets button { flex:1 1 auto; min-height:38px; padding:7px 11px; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:transparent; color:var(--ink,#262823); font-size:.875rem; line-height:1.4; }
.task-repeat-presets button:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:var(--ink-soft,#66685f); background:var(--paper-deep,#eeebe2); }
.task-repeat-presets button[aria-pressed="true"] { border-color:var(--accent,#c76345); background:var(--accent-soft,#f4dfd6); color:var(--accent-deep,#9f422b); }
.task-repeat-presets button:disabled { opacity:.5; cursor:default; }
.task-repeat-popover .recurrence-form { margin:0; gap:14px 10px; }
.task-repeat-schedule-row { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:12px; }
.task-repeat-cadence { min-width:0; margin:0; padding:0; border:0; }
.task-repeat-cadence legend { margin-bottom:6px; padding:0; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.4; }
.task-repeat-cadence-fields { display:grid; grid-template-columns:minmax(48px,64px) minmax(0,1fr); align-items:center; gap:8px; }
.task-repeat-unit { min-width:0; color:var(--ink-soft,#66685f); font-size:.875rem; line-height:1.4; overflow-wrap:anywhere; }
.task-repeat-end { display:grid; min-width:0; gap:6px; color:var(--ink-soft,#66685f); font-size:.8125rem; line-height:1.4; }
.task-repeat-cadence:disabled, .task-repeat-end[data-disabled="true"] { opacity:.65; }
.task-repeat-end-detail { grid-column:1 / -1; }
.task-repeat-popover .recurrence-form > :is(label,.task-form-field), .task-repeat-popover .recurrence-days { min-width:0; }
.task-repeat-popover .recurrence-form > :is(label,.task-form-field), .task-repeat-popover .recurrence-days legend { font-size:.8125rem; }
.task-repeat-popover .recurrence-form input:not([type="checkbox"]), .task-repeat-popover .recurrence-form select { width:100%; min-width:0; max-width:100%; min-height:42px; font-size:1rem; }
.task-repeat-popover .recurrence-days span { width:36px; height:36px; font-size:.8125rem; text-transform:none; }
.task-repeat-popover .recurrence-editor > button { margin-top:14px; }
.task-details-dialog input, .task-details-dialog textarea, .task-details-dialog select, .task-details-dialog button { font-family:inherit; }
.task-details-dialog button { cursor:pointer; }
.task-details-editor { display:flex; flex:1; flex-direction:column; height:auto; min-height:0; padding:0; }
.task-details-scroll { min-height:0; flex:1; display:flex; flex-direction:column; padding:8px 32px 16px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.task-details-scroll > * { flex-shrink:0; }
/* The keyboard overlays the editor; this adds room to scroll the text above it. */
.task-details-scroll[data-keyboard-open]::after { content:""; flex:none; height:var(--task-keyboard-inset,0px); }
.task-details-title-row { display:flex; align-items:center; gap:8px; min-width:0; margin-inline-start:-8px; }
.task-details-title-row > .task-check { flex-shrink:0; align-self:center; margin:0; }
.task-details-title-row > .title-input { min-width:0; flex:1; }
.task-details-scroll .title-input { display:block; box-sizing:content-box; width:100%; min-height:1.4em; margin:0; padding:0; overflow:hidden; resize:none; border:0; border-bottom:1px solid transparent; border-radius:0; background:transparent; color:var(--ink,#262823); font-size:clamp(1.4rem,2.1vw,1.8rem)!important; font-weight:600!important; line-height:1.3!important; overflow-wrap:anywhere; }
.task-details-scroll .title-input:focus-visible { border-bottom-color:var(--accent,#c76345); outline:0; }
.task-details-scroll .title-input[aria-invalid="true"] { border-bottom:2px dashed var(--danger,#a33a34); }
@supports (field-sizing:content) {
    .inline-task-draft textarea { field-sizing:content; height:auto; }
    .task-details-scroll .title-input { field-sizing:content; height:auto; }
}
.task-description-section { display:flex; flex:1 1 0; min-height:0; flex-direction:column; margin-top:16px; }
.task-field-heading { display:block; margin:0; color:var(--ink,#262823); font:600 1rem/1.4 var(--planner-font); }
.task-description-editor { display:flex; flex:1 1 0; min-height:0; flex-direction:column; overflow:visible; border:0; border-radius:0; background:transparent; }
.task-description-heading { display:flex; flex:none; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; margin-bottom:6px; }
.task-description-toolbar { display:flex; flex:none; flex-wrap:wrap; align-items:center; gap:2px; max-width:100%; }
.task-description-toolbar > button { display:inline-flex; flex:none; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--ink-soft,#66685f); }
.task-description-heading .task-description-toolbar > button > svg { width:20px; height:20px; }
.task-description-toolbar > button:hover:where(:not([data-touch-input] *)) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.task-description-toolbar > button[aria-pressed="true"] { background:var(--accent-soft,#f7e6dd); color:var(--accent,#c76345); }
.task-description-toolbar > button:disabled { opacity:.35; cursor:default; }
.task-description-toolbar-divider { flex:none; width:1px; height:14px; margin:0 4px; background:var(--line,#dcded7); }
.task-description-editor > [data-task-description-host] { display:none; }
.task-description-editor[data-description-ready] > .task-description-source { display:none; }
.task-description-editor[data-description-ready] > [data-task-description-host] { display:flex; flex:1 1 0; min-height:0; flex-direction:column; min-width:0; }
.task-description-input { position:relative; flex:1 1 0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; min-width:0; margin:0; padding:6px 0; border:0; border-bottom:1px solid transparent; border-radius:0; background:transparent; color:var(--ink,#262823); font:inherit; font-size:1rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; cursor:text; }
.task-description-input:focus-visible { outline:0; border-bottom-color:var(--accent,#c76345); }
.task-description-input[data-empty="true"]::before { content:attr(data-placeholder); position:absolute; color:var(--ink-soft,#66685f); opacity:1; pointer-events:none; }
.task-description-input p, .task-description-input div { margin:0; }
.task-description-input ul, .task-description-input ol { margin:4px 0; padding-inline-start:24px; }
.task-description-input li { margin:0; }
.task-description-input b, .task-description-input strong { font-weight:700; }
.task-description-error { margin:4px 0; color:var(--danger,#b13b33); font-size:.78rem; }
.task-description-editor > textarea { display:block; flex:1 1 0; width:100%; min-height:0; margin:0; padding:6px 0; resize:none; overflow:auto; overscroll-behavior:contain; border:0; border-bottom:1px solid transparent; border-radius:0; background:transparent; font-size:1rem; line-height:1.55; }
.task-description-editor > textarea:focus-visible { outline:0; border-bottom-color:var(--accent,#c76345); }
/* Preserve the toolbar and a usable text field in short viewports. Keyboard
   scrolling keeps the editor's original frame and section sizes. */
.task-details-dialog .task-description-section, .task-details-dialog .task-description-editor { min-height:auto; }
.task-details-dialog .task-description-editor[data-description-ready] > [data-task-description-host],
.task-details-dialog .task-description-editor > textarea { min-height:4lh; }
/* Align the visible checkbox with the paragraph edge while keeping its full hit area. */
.task-description-input [data-description-checklist] { position:relative; min-height:28px; margin:2px 0; padding:3px 0; padding-inline-start:28px; border-radius:6px; color:var(--ink); text-decoration-line:none; text-decoration-color:transparent; text-decoration-thickness:1px; text-decoration-skip-ink:none; transition:color 180ms ease; }
.task-description-input [data-description-checklist][data-completed="true"] { color:var(--ink-soft,var(--ink)); text-decoration-line:line-through; text-decoration-color:color-mix(in srgb,currentColor 55%,transparent); }
.task-description-input [data-description-checklist][data-checklist-striking] { text-decoration-color:transparent; }
.task-description-input .description-checklist-strike { position:absolute; inset:0; color:var(--ink-soft,var(--ink)); pointer-events:none; }
.task-description-input .description-checklist-strike > span { position:absolute; height:1px; background:currentColor; opacity:.55; pointer-events:none; }
.task-description-input .description-checklist-control { position:absolute; inset-inline-start:0; inset-block-start:calc(3px + .5lh - 14px); display:inline-flex; width:28px; height:28px; color:var(--ink); line-height:inherit; white-space:normal; user-select:none; -webkit-user-select:none; }
.task-description-input .description-checklist-toggle,
.description-checklist .checklist-row > input[type="checkbox"] { position:relative; display:inline-grid; flex:none; place-items:center; width:28px; height:28px; min-width:28px; margin:0; padding:0; border:0; border-radius:7px; appearance:none; -webkit-appearance:none; background:transparent; color:var(--ink); font:inherit; line-height:1; text-decoration:none; vertical-align:middle; cursor:pointer; touch-action:manipulation; transition:background 140ms ease; }
.task-description-input .description-checklist-toggle::before,
.description-checklist .checklist-row > input[type="checkbox"]::before { content:""; position:absolute; top:50%; left:9px; width:18px; height:18px; box-sizing:border-box; border:1.5px solid currentColor; border-radius:5px; background:transparent; transform:translate(-50%,-50%); transition:background 170ms ease,transform 170ms ease; pointer-events:none; }
.task-description-input .description-checklist-toggle::after,
.description-checklist .checklist-row > input[type="checkbox"]::after { content:""; position:absolute; top:50%; left:9px; width:5px; height:9px; box-sizing:border-box; border:solid var(--surface,var(--paper)); border-width:0 1.75px 1.75px 0; opacity:0; transform:translate(-50%,-60%) rotate(45deg) scale(.65); transition:opacity 130ms ease,transform 180ms cubic-bezier(.2,.8,.3,1); pointer-events:none; }
.task-description-input .description-checklist-toggle[aria-checked="true"]::before,
.description-checklist .checklist-row > input[type="checkbox"]:checked::before { background:currentColor; }
.task-description-input .description-checklist-toggle[aria-checked="true"]::after,
.description-checklist .checklist-row > input[type="checkbox"]:checked::after { opacity:1; transform:translate(-50%,-60%) rotate(45deg) scale(1); }
.task-description-input .description-checklist-toggle[aria-checked="true"][data-checklist-checking]::before { animation:description-checklist-pop 280ms ease-out; }
.task-description-input .description-checklist-toggle[aria-checked="true"][data-checklist-checking]::after { animation:description-checklist-draw 280ms ease-out; }
@keyframes description-checklist-pop { 0% { transform:translate(-50%,-50%) scale(.92); } 45% { transform:translate(-50%,-50%) scale(1.16); } 100% { transform:translate(-50%,-50%) scale(1); } }
@keyframes description-checklist-draw { 0% { opacity:0; clip-path:inset(0 100% 0 0); transform:translate(-50%,-60%) rotate(45deg) scale(.75); } 55% { opacity:1; clip-path:inset(0); transform:translate(-50%,-60%) rotate(45deg) scale(1.08); } 100% { opacity:1; clip-path:inset(0); transform:translate(-50%,-60%) rotate(45deg) scale(1); } }
.task-description-input .description-checklist-toggle:focus-visible,
.description-checklist .checklist-row > input[type="checkbox"]:focus-visible,
.description-checklist .checklist-row > button:focus-visible { outline:2px solid var(--ink); outline-offset:1px; background:color-mix(in srgb,var(--ink) 7%,transparent); }
.task-description-input .description-checklist-toggle:active:not(:disabled)::before,
.description-checklist .checklist-row > input[type="checkbox"]:active:not(:disabled)::before { transform:translate(-50%,-50%) scale(.94); }
.task-description-input .description-checklist-toggle:disabled,
.description-checklist .checklist-row > :disabled { cursor:default; }
.task-description-input [data-description-checklist][data-checklist-entering] { animation:description-checklist-enter 180ms ease-out; }
.task-description-editor[data-checklist-ready="true"] > .description-checklist { display:none; }
.description-checklist { flex:none; padding:2px 0 4px; color:var(--ink); }
.description-checklist .checklist-row { display:grid; grid-template-columns:28px minmax(0,1fr) 28px; align-items:center; gap:0; min-height:28px; margin:2px 0; font-size:1rem; line-height:1.55; }
.description-checklist .checklist-row:first-child { margin-top:0; }
.description-checklist .checklist-title-input { width:100%; min-height:28px; padding:3px 0!important; color:var(--ink); font:inherit; text-decoration-line:line-through; text-decoration-color:transparent; text-decoration-thickness:1px; text-decoration-skip-ink:none; transition:color 180ms ease,text-decoration-color 180ms ease; }
.description-checklist .checklist-row > input[type="checkbox"]:checked ~ .checklist-title-input { color:var(--ink-soft,var(--ink)); text-decoration-color:color-mix(in srgb,currentColor 55%,transparent); }
.description-checklist .checklist-row > button { color:var(--ink-soft,var(--ink)); transition:color 140ms ease,background 140ms ease; }
@media (hover:hover) {
    .task-description-input .description-checklist-toggle:hover:where(:not([data-touch-input] *)):not(:disabled),
    .description-checklist .checklist-row > input[type="checkbox"]:hover:where(:not([data-touch-input] *)):not(:disabled),
    .description-checklist .checklist-row > button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink); }
}
@media (pointer:coarse) {
    .task-description-input [data-description-checklist] { min-height:32px; padding-block:5px; padding-inline-start:32px; }
    .task-description-input .description-checklist-control { inset-block-start:calc(5px + .5lh - 16px); width:32px; height:32px; }
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-checklist .checklist-row > button { width:32px; height:32px; min-width:32px; }
    .description-checklist .checklist-row { grid-template-columns:32px minmax(0,1fr) 32px; min-height:32px; }
}
@keyframes description-checklist-enter { from { opacity:.35; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce), (forced-colors:active), print {
    .task-description-input [data-description-checklist],
    .task-description-input .description-checklist-toggle,
    .task-description-input .description-checklist-toggle::before,
    .task-description-input .description-checklist-toggle::after,
    .description-checklist .checklist-row > input,
    .description-checklist .checklist-row > input::before,
    .description-checklist .checklist-row > input::after,
    .description-checklist .checklist-row > button { transition:none; animation:none; }
    .task-description-input [data-description-checklist][data-checklist-entering] { animation:none; }
    .task-description-input .description-checklist-strike { display:none; }
    .task-description-input [data-description-checklist][data-checklist-striking][data-completed="true"] { text-decoration-color:color-mix(in srgb,currentColor 55%,transparent); }
    .task-description-input .description-checklist-toggle:active:not(:disabled)::before,
    .description-checklist .checklist-row > input[type="checkbox"]:active:not(:disabled)::before { transform:translate(-50%,-50%); }
}
@media (forced-colors:active) {
    .task-description-input [data-description-checklist], .description-checklist .checklist-title-input { color:CanvasText; }
    .task-description-input [data-description-checklist][data-completed="true"],
    .description-checklist .checklist-row > input[type="checkbox"]:checked ~ .checklist-title-input { color:CanvasText; text-decoration-color:GrayText; }
    .task-description-input .description-checklist-toggle { forced-color-adjust:none; color:ButtonText; background:Canvas; }
    .task-description-input .description-checklist-toggle:is(:hover:where(:not([data-touch-input] *)),:focus-visible):not(:disabled) { color:ButtonText; background:Canvas; }
    .task-description-input .description-checklist-toggle::before { border-color:ButtonText; }
    .task-description-input .description-checklist-toggle[aria-checked="true"]::before { border-color:Highlight; background:Highlight; }
    .task-description-input .description-checklist-toggle::after { border-color:HighlightText; }
    .task-description-input .description-checklist-toggle:focus-visible,
    .description-checklist .checklist-row > input[type="checkbox"]:focus-visible,
    .description-checklist .checklist-row > button:focus-visible { outline-color:Highlight; }
    .description-checklist .checklist-row > input[type="checkbox"] { appearance:auto; -webkit-appearance:checkbox; width:18px; height:18px; min-width:18px; justify-self:center; }
    .description-checklist .checklist-row > input[type="checkbox"]::before,
    .description-checklist .checklist-row > input[type="checkbox"]::after { display:none; }
}
.task-details-footer { display:flex; flex:none; flex-direction:column; gap:6px; min-width:0; margin-top:8px; }
.task-details-footer .task-creator-detail { margin:0; }
.task-activity { min-width:0; }
.task-activity-toggle { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 0; border:0; background:transparent; color:var(--ink-soft,#66685f); font:500 .75rem/1.4 var(--planner-font); cursor:pointer; }
.task-activity-toggle:hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); }
.task-activity-toggle:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:3px; border-radius:3px; }
.task-activity-toggle > svg { transition:transform 180ms ease; }
.task-activity-toggle[aria-expanded="true"] > svg { transform:rotate(180deg); }
.task-activity-content { max-height:min(320px,42dvh); overflow:auto; overscroll-behavior:contain; animation:task-activity-open 200ms ease-out; }
.task-activity-content:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:2px; border-radius:4px; }
@keyframes task-activity-open { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media (pointer:coarse) { .task-activity-toggle { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .task-activity-content { animation:none; } .task-activity-toggle > svg { transition:none; } }
.task-focus-action { flex:none; align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; gap:9px; max-width:100%; min-height:44px; margin:0; padding:10px 16px; border:1px solid color-mix(in srgb,var(--accent,#c76345) 45%,var(--line,#dcd8ce)); border-radius:10px; background:var(--accent-soft,#f4dfd6); color:var(--accent-deep,#9f422b); box-shadow:0 1px 2px color-mix(in srgb,var(--ink,#262823) 8%,transparent); font-size:.875rem; font-weight:600; line-height:1.4; text-align:center; transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 120ms ease; }
.task-focus-action > svg { flex:none; }
.task-focus-action > span { min-width:0; overflow-wrap:anywhere; }
.task-focus-action--header { display:none; }
@media (min-width:801px) {
    .task-details-dialog > header .task-details-safe-actions { justify-content:flex-end; }
    .task-details-dialog > header .task-focus-action { display:inline-flex; flex:0 1 auto; align-self:center; min-width:34px; max-width:250px; min-height:34px; height:34px; margin-inline-end:auto; padding:6px 10px; gap:6px; border-radius:8px; font-size:.75rem; }
    .task-details-dialog > header .task-focus-action > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .task-details-dialog > header:has(.task-scope-control) .task-focus-action { padding:6px 7px; }
    .task-details-dialog > header:has(.task-scope-control) .task-focus-action > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    .task-details-footer > .task-focus-action { display:none; }
}
@media (hover:hover) {
    .task-focus-action:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:var(--accent,#c76345); background:color-mix(in srgb,var(--accent-soft,#f4dfd6) 78%,var(--accent,#c76345)); }
}
.task-focus-action:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:3px; }
.task-focus-action:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.task-details-dialog .task-focus-action:disabled { opacity:.45; cursor:default; box-shadow:none; }
@media (prefers-reduced-motion:reduce) {
    .task-focus-action { transition:none; }
    .task-focus-action:active:not(:disabled) { transform:none; }
}
@media (forced-colors:active) {
    .task-focus-action { border-color:ButtonText; background:ButtonFace; color:ButtonText; box-shadow:none; }
    .task-focus-action:focus-visible { outline-color:Highlight; }
}
.task-details-scroll .editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.task-details-scroll .editor-grid label { min-width:0; font-size:.74rem; font-weight:500; }
.task-details-scroll .editor-grid input, .task-details-scroll .editor-grid select { min-width:0; max-width:100%; min-height:42px; border-radius:8px; font-size:.82rem; }
.task-options { margin-top:8px; border-top:1px solid var(--line,#dcd8ce); }
.task-option { border-bottom:1px solid var(--line,#dcd8ce); }
.task-option > h3 { margin:0; font:inherit; }
.task-option-toggle { width:100%; min-height:40px; padding:8px 2px; display:grid; grid-template-columns:17px auto minmax(0,1fr) 16px; align-items:center; gap:10px; border:0; border-radius:6px; background:transparent; color:var(--ink,#262823); font-size:.8rem; font-weight:550; text-align:left; }
.task-option-toggle:hover:where(:not([data-touch-input] *)) { background:color-mix(in srgb,var(--ink,#262823) 4%,transparent); }
.task-option-toggle > svg { color:var(--ink-soft,#66685f); }
.task-option-summary { min-width:0; overflow:hidden; color:var(--ink-soft,#66685f); font-size:.74rem; font-weight:400; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.task-option-chevron { transition:transform 180ms ease; }
.task-option-toggle[aria-expanded="true"] .task-option-chevron { transform:rotate(180deg); }
.task-option-body { padding:0 0 18px 27px; }
.task-option-body[hidden] { display:none; }
.task-option-body:not([hidden]) { animation:task-option-appear 160ms ease-out; }
.task-option-body > .editor-grid { margin-top:6px; }
.task-option-body .editor-toggles { margin:16px 0; }
@media (prefers-reduced-motion:reduce) { .task-details-dialog > header button:not(.planner-picker-popover button,.task-focus-action) { transition:none; } }
.task-editor-validation { flex-shrink:0; margin:0 32px 12px; }
.task-autosave-error { display:flex; align-items:baseline; gap:12px; }
.task-autosave-error > span { flex:1; }
.task-autosave-error > button { flex:none; }
/* Share the card's finish while keeping floating controls in the planner palette. */
.task-details-dialog.is-colored { background:var(--task-color); color:var(--ink,#262823); border-color:color-mix(in srgb,var(--task-color-ink) 24%,var(--task-color)); }
.task-details-dialog.is-colored > header,
.task-details-dialog.is-colored .task-details-scroll {
    --ink:var(--task-color-ink);
    --ink-soft:var(--task-color-ink);
    --muted:var(--task-color-ink);
    --surface:var(--task-color);
    --surface-raised:var(--task-color);
    --surface-muted:var(--task-color);
    --paper:var(--task-color);
    --paper-deep:color-mix(in srgb,var(--task-color-ink) 8%,var(--task-color));
    --line:color-mix(in srgb,var(--task-color-ink) 24%,transparent);
    --accent:var(--task-color-ink);
    --accent-deep:var(--task-color-ink);
    --accent-soft:color-mix(in srgb,var(--task-color-ink) 12%,transparent);
    --focus:var(--task-color-ink);
    --danger:var(--task-color-ink);
    color:var(--task-color-ink);
    caret-color:var(--task-color-ink);
}
.task-details-dialog.is-colored > header button { background:transparent; }
.task-details-dialog.is-colored > header .task-color-toggle[data-enabled="true"] { background:transparent; }
.task-details-dialog.is-colored > header button:is(:hover:where(:not([data-touch-input] *)),[aria-expanded="true"]):not(:disabled) { background:var(--paper-deep); }
.task-details-dialog.is-colored .task-description-input[data-empty="true"]::before,
.task-details-dialog.is-colored .task-details-scroll :is(input,textarea)::placeholder { color:var(--task-color-ink); opacity:1; }
.task-details-dialog.is-colored .task-editor-validation { padding:10px 12px; border-radius:8px; background:var(--surface,#fffdf8); }
@media (forced-colors:active) {
    .task-details-dialog.is-colored { --task-color:Canvas; --task-color-ink:CanvasText; background:Canvas; color:CanvasText; border-color:CanvasText; }
}
@keyframes task-option-appear { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
/* Lock the viewport without making body a new scroll container for the sticky topbar. */
html:has(.task-details-layer) { overflow:hidden; overscroll-behavior:none; }
body:has(.task-details-layer) { overscroll-behavior:none; }
@media (max-width:800px) {
    /* Reserve the header options' working space before an icon opens its panel. */
    .task-details-layer { --task-details-phone-max-height:min(640px,80dvh,calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))); }
    .task-details-dialog { height:var(--task-details-phone-max-height); max-height:var(--task-details-phone-max-height); }
    .task-details-dialog > header { display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:6px 8px; }
    .task-details-dialog > header > .task-calendar-source--desktop { grid-column:1; grid-row:1; justify-self:start; }
    .task-details-dialog > header .task-details-actions { grid-column:1; grid-row:1; }
    .task-details-dialog > header:has(> .task-calendar-source--desktop) .task-details-actions { grid-row:2; }
    .task-details-dialog > header .task-details-actions > .task-delete-button,
    .task-details-dialog > header .task-details-safe-actions > :is(button,.task-week-picker) { flex:0 1 34px; min-width:0; }
    .task-details-dialog > header [data-task-details-close] { grid-column:2; grid-row:1; align-self:start; }
    .task-details-dialog > header .task-scope-control { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; margin:0; }
    .task-details-dialog > header:has(> .task-calendar-source--desktop) .task-scope-control { grid-row:3; }
    .task-details-dialog > header .task-scope-control select { max-width:100%; min-height:36px; }
    .task-details-dialog:has(> header .task-scope-control) { --task-header-popover-top:90px; }
    .task-details-dialog:has(> header > .task-calendar-source--desktop):has(> header .task-scope-control) { --task-header-popover-top:130px; }
    .task-details-dialog .task-details-editor, .task-details-dialog .task-details-scroll { flex:1 1 auto; }
    .task-details-scroll .title-input { max-height:5lh; overflow-y:auto; }
    .task-details-dialog .task-description-section,
    .task-details-dialog .task-description-editor,
    .task-details-dialog .task-description-editor[data-description-ready] > [data-task-description-host],
    .task-details-dialog .task-description-input,
    .task-details-dialog .task-description-editor > textarea { flex:1 1 0; }
    .task-details-dialog .task-description-input { min-height:0; }
}
@media (min-width:541px) and (max-width:720px) {
    .task-timing-popover .task-timing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .task-timing-grid .task-deadline-field { grid-column:1 / -1; }
}
@media (max-width:540px) {
    .task-details-layer { padding:max(24px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
    .task-details-dialog { --task-header-popover-top:104px; border-radius:16px; }
    .task-details-dialog > header { grid-template-columns:minmax(0,1fr) 44px; padding:8px 8px 0; }
    .task-calendar-source--desktop { display:none; }
    .task-calendar-source--phone { display:block; grid-column:1; grid-row:2; align-self:start; justify-self:start; }
    .task-calendar-source .calendar-task-source > summary { width:44px; height:44px; padding:8px; }
    .task-calendar-source .calendar-provider-logo { width:28px; height:28px; flex-basis:28px; }
    /* Match the Close gutter so the action rows are centered between the two edge controls. */
    .task-details-dialog > header .task-details-actions { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:start; justify-content:start; column-gap:8px; min-height:90px; }
    .task-details-dialog > header .task-delete-button { grid-column:1; grid-row:1; }
    .task-details-dialog > header .task-details-safe-actions { grid-column:2; grid-row:1 / span 2; width:min(100%,212px); display:grid; grid-template-columns:repeat(4,minmax(0,44px)); grid-auto-rows:44px; justify-self:center; justify-content:center; row-gap:2px; }
    .task-details-dialog > header .task-details-safe-actions:has(> button:nth-of-type(9)) { width:min(100%,260px); grid-template-columns:repeat(5,minmax(0,44px)); }
    .task-details-dialog > header .task-details-safe-actions:has(> button:nth-of-type(11)) { width:min(100%,270px); grid-template-columns:repeat(6,minmax(0,44px)); }
    .task-details-dialog > header button:not(.planner-picker-popover button,.task-focus-action) { width:100%; max-width:44px; height:44px; }
    .task-details-dialog:has(> header .task-scope-control) { --task-header-popover-top:146px; }
    .task-details-dialog:has(> header > .task-calendar-source--desktop):has(> header .task-scope-control) { --task-header-popover-top:196px; }
    .task-details-popover { right:10px; width:calc(100% - 20px); max-height:calc(100% - var(--task-header-popover-top) - 10px); }
    .task-assignment-popover { width:min(320px,calc(100% - 20px)); }
    .task-details-popover > header button { width:36px; height:36px; }
    .task-timing-popover .task-timing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; }
    .task-timing-grid .task-deadline-field { grid-column:1 / -1; }
    .task-timing-trigger { gap:6px; padding-inline:8px; }
    .task-timing-value { font-size:.875rem; }
    .task-deadline-picker-body { grid-template-columns:minmax(0,1fr); gap:12px; }
    .task-deadline-time { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; padding-top:10px; border-top:1px solid var(--line,#dcd8ce); }
    .task-deadline-time > .planner-picker-label { grid-column:1 / -1; }
    .task-deadline-time .task-picker-done { align-self:center; margin:0; }
    .planner-calendar-day { min-height:38px; }
    .planner-time-options { column-gap:10px; }
    .planner-time-lists { gap:10px; }
    .planner-time-entry .planner-time-input { padding-inline:8px; font-size:1rem; }
    .task-repeat-presets button { min-height:44px; }
    .task-repeat-popover .recurrence-days span { height:44px; }
    .task-details-scroll { padding:8px 18px 12px; }
    .task-details-scroll .editor-grid { grid-template-columns:1fr; gap:12px; }
    .task-option-toggle { min-height:44px; column-gap:8px; font-size:.78rem; }
    .task-option-summary { font-size:.7rem; }
    .task-option-body { padding-left:0; }
    .task-option-body .reminder-form { grid-template-columns:minmax(0,1fr); }
    .task-editor-validation { margin:0 18px 12px; }
}
@media (max-width:380px) {
    .task-repeat-schedule-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:8px; }
    .task-repeat-cadence-fields { gap:6px; }
    .task-repeat-unit { font-size:.8125rem; }
}
@media print {
    .task-details-layer { display:none!important; }
    html:has(.task-details-layer), body:has(.task-details-layer) { overflow:visible; }
}
/* Row shortcuts use the same editor fields in a lightweight, anchored surface. */
.task-quick-settings { position:fixed; inset:auto; z-index:131; display:none; width:min(390px,calc(100vw - 16px)); max-height:calc(100dvh - 70px); margin:0; color:var(--ink,#262823); transform-origin:80% 0; }
.task-quick-settings[data-feature="color"] { max-height:min(560px,70dvh); overflow-y:auto; overscroll-behavior-y:contain; }
.task-quick-settings:popover-open, .task-quick-settings[data-open="true"] { display:block; }
.task-quick-settings::backdrop { background:transparent; pointer-events:none; }
.task-quick-settings .task-details-popover { position:static; width:100%; max-height:none; padding:0; border:0; border-radius:0; overflow:visible; box-shadow:none; background:transparent; animation:none; }
.task-quick-settings .task-timing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.task-quick-settings .task-deadline-field { grid-column:1 / -1; }
.task-quick-settings .task-deadline-picker-body { grid-template-columns:minmax(0,1fr); gap:12px; }
.task-quick-settings .task-deadline-time { padding-top:10px; border-top:1px solid var(--line,#dcd8ce); }
.task-quick-settings .task-editor-validation { margin:12px 0 0; }
.task-quick-settings .task-quick-settings-scope { display:grid; gap:6px; margin:0 0 12px; order:0; color:var(--ink-soft,#66685f); font-size:.75rem; }
.task-quick-settings-scope select { width:100%; max-width:none; min-height:34px; }
@media (max-width:800px) {
    .task-action-bar { justify-content:flex-start; gap:4px; padding:6px; }
    .task-action-bar button { flex-basis:44px; width:44px; height:44px; border-radius:9px; }
    .task-action-bar [data-task-action="delete"] { margin-inline-end:12px; }
    .task-quick-settings { padding:12px; border-radius:14px; overscroll-behavior:contain; scroll-padding-block:12px; }
    .task-quick-settings .task-details-popover > header { min-height:44px; gap:8px; }
    .task-quick-settings [data-task-popover-close] { flex:0 0 44px; width:44px; height:44px; }
    .task-quick-settings :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]),select,textarea) { min-width:0; font-size:16px; }
    .task-quick-settings :is(.task-timing-trigger,.task-quick-settings-scope select) { min-height:44px; }
}
@media (max-width:400px) {
    .task-quick-settings .task-timing-grid { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { .task-quick-settings { animation:none; } }
@media print { .task-action-bar, .task-quick-settings { display:none!important; } }
.danger-text-button { min-height:38px; padding:0 7px; display:flex; align-items:center; gap:6px; border:0; background:transparent; font-size:.72rem; }
.note-dialog, .event-dialog, .plan-dialog { padding:22px; }
.note-dialog textarea { width:100%; margin-top:17px; padding:12px; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--paper,#f7f5ef); resize:vertical; }
.event-dialog > h2 { margin-top:20px; }
.event-dialog > p { margin-top:9px; color:var(--ink-soft,#66685f); }
.read-only-note { margin-top:18px; padding:12px; border-radius:8px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); font-size:.74rem; }
.plan-dialog { width:min(calc(100% - 36px),720px); }
.plan-dialog header p { margin-top:5px; color:var(--ink-soft,#66685f); font-size:.72rem; }
.plan-list { margin-top:18px; display:grid; gap:5px; }
.plan-list article { padding:10px; display:grid; grid-template-columns:55px 1fr auto; gap:12px; border:1px solid var(--line,#dcd8ce); border-radius:8px; }
.plan-list time { color:var(--accent-deep,#9f422b); font-weight:700; }
.plan-list strong { font-size:.78rem; }
.plan-list p { color:var(--ink-soft,#66685f); font-size:.68rem; }
.plan-list article > span { color:var(--ink-soft,#66685f); font-size:.68rem; }
.plan-list .did-not-fit { opacity:.7; }

.in-app-deletion { max-width:760px; margin:0 auto; padding:34px 22px 80px; color:var(--ink,#262823); }
.in-app-deletion .back-link { color:var(--ink-soft,#66685f); font-size:.76rem; text-decoration:none; }
.in-app-deletion > section { margin-top:28px; padding:28px; border:1px solid var(--line,#dcd8ce); border-radius:14px; background:var(--surface,#fffdf8); }
.in-app-deletion h1 { font:500 2.5rem/1.05 var(--planner-heading); letter-spacing:-.03em; }
.in-app-deletion header p { margin-top:11px; color:var(--ink-soft,#66685f); }
.deletion-warning { margin-top:24px; padding:16px; border-radius:9px; background:color-mix(in srgb,var(--danger,#a33a34) 9%,var(--surface,#fffdf8)); }
.deletion-warning h2 { font:650 .92rem/1.3 var(--planner-font); }
.deletion-warning p { margin-top:7px; color:var(--ink-soft,#66685f); font-size:.75rem; }
.in-app-deletion ul { margin:21px 0; padding-left:1.2rem; color:var(--ink-soft,#66685f); font-size:.78rem; }
.in-app-deletion li + li { margin-top:7px; }
.deletion-confirmation { margin-top:20px; display:grid; gap:7px; font-size:.76rem; }
.deletion-confirmation input { min-height:44px; padding:8px 11px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--paper,#f7f5ef); }
.deletion-acknowledgement { margin-top:13px; display:flex; align-items:flex-start; gap:9px; color:var(--ink-soft,#66685f); font-size:.72rem; }
.deletion-actions { margin-top:25px; display:flex; justify-content:flex-end; gap:9px; }
.danger-button { min-height:41px; padding:0 16px; border:0; border-radius:999px; background:var(--danger,#a33a34); color:#fff!important; font-weight:680; }
.danger-button:disabled { opacity:.45; cursor:not-allowed; }

html:has(.focus-mode), body:has(.focus-mode) { overflow:hidden; }
.focus-mode { --focus-ease:cubic-bezier(.22,1,.36,1); position:fixed; z-index:200; top:env(safe-area-inset-top); right:env(safe-area-inset-right); bottom:env(safe-area-inset-bottom); left:env(safe-area-inset-left); display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; background:var(--paper,#f7f5ef); color:var(--ink,#262823); animation:focus-screen-enter 160ms ease-out; }
.focus-mode > header { flex:none; min-height:64px; padding:8px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line,#dcd8ce); }
.focus-mode > header .planner-brand { margin:0; }
.focus-mode > header > button { min-height:40px; padding:0 12px; display:flex; align-items:center; gap:6px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font-size:.8125rem; }
.focus-mode > main { flex:1; min-height:0; width:min(calc(100% - 48px),1120px); margin:0 auto; padding:clamp(16px,4dvh,44px) 0; display:flex; flex-direction:column; justify-content:safe center; gap:clamp(20px,3dvh,32px); text-align:center; }
/* Task copy yields space to the timer; entrances never run again on timer ticks. */
.focus-task-copy { flex:0 1 auto; min-height:4rem; padding:4px 8px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable both-edges; overflow-wrap:anywhere; animation:focus-content-enter 260ms var(--focus-ease) both; }
.focus-task-copy h1 { max-width:1040px; margin:0 auto; font:500 clamp(1.5rem,min(3vw,5dvh),2.75rem)/1.2 var(--planner-heading); letter-spacing:-.025em; text-wrap:pretty; white-space:pre-line; }
.focus-task-copy > p { max-width:760px; margin:16px auto 0; color:var(--ink-soft,#66685f); font-size:.9375rem; line-height:1.55; white-space:pre-wrap; }
.focus-checklist { max-width:680px; margin:16px auto 0; display:grid; gap:7px; text-align:left; }
.focus-checklist label { min-width:0; padding:8px 11px; display:flex; align-items:flex-start; gap:9px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--surface,#fffdf8); font-size:.875rem; }
.focus-checklist input { flex:none; margin-top:4px; }
.focus-checklist span { min-width:0; }
.focus-clock { flex:none; width:min(100%,620px); margin:0 auto; animation:focus-content-enter 280ms 35ms var(--focus-ease) both; }
.focus-mode-switch { position:relative; isolation:isolate; width:max-content; max-width:100%; margin:auto; padding:3px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line,#dcd8ce); border-radius:10px; background:var(--surface,#fffdf8); }
.focus-mode-switch::before { content:""; position:absolute; z-index:-1; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:7px; background:color-mix(in srgb,var(--ink,#262823) 8%,var(--surface,#fffdf8)); box-shadow:0 1px 3px rgba(0,0,0,.06); pointer-events:none; transition:transform 180ms var(--focus-ease); }
.focus-mode-switch[data-countdown="true"]::before { transform:translateX(100%); }
.focus-mode-switch button { min-height:36px; padding:0 14px; border:0; border-radius:6px; background:transparent; color:var(--ink-soft,#66685f); font-size:.8125rem; transition:color 140ms ease, opacity 140ms ease; }
.focus-mode-switch button.selected { color:var(--ink,#262823); }
.focus-mode-switch button:disabled { cursor:not-allowed; opacity:.5; }
.focus-mode-switch button.selected:disabled { opacity:1; }
.focus-clock > time { margin:16px 0; display:block; font:500 clamp(3.25rem,min(16vw,14dvh),7rem)/1 var(--planner-heading); font-variant-numeric:tabular-nums; letter-spacing:-.04em; white-space:nowrap; transition:color 180ms ease; }
.focus-clock[data-playback="running"] > time { color:var(--sage,#687b69); animation:focus-timer-engage 220ms var(--focus-ease); }
.focus-clock[data-playback="paused"] > time { color:var(--ink-soft,#66685f); }
.focus-time-input { width:100%; height:1.1em; min-width:0; padding:0; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; font-variant-numeric:tabular-nums; text-align:center; }
.focus-status-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.focus-time-input:hover:where(:not([data-touch-input] *)) { background:color-mix(in srgb,var(--ink,#262823) 4%,transparent); }
.focus-time-input:focus-visible { outline:2px solid var(--sage,#687b69); outline-offset:4px; }
.focus-time-input[aria-invalid="true"] { outline:2px solid var(--ink,#262823); outline-offset:4px; }
.focus-session-length { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 180ms var(--focus-ease), opacity 140ms ease; }
.focus-session-length[data-open="true"] { grid-template-rows:1fr; opacity:1; }
.focus-session-length > div { min-height:0; overflow:hidden; }
.focus-session-length label { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; color:var(--ink-soft,#66685f); font-size:.8125rem; }
.focus-session-length select:focus-visible { outline-offset:-3px; }
.focus-clock select { min-height:36px; padding:5px 8px; border:1px solid var(--line,#dcd8ce); border-radius:6px; background:var(--surface,#fffdf8); }
.focus-controls { margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.focus-controls > button { min-height:44px; padding-inline:18px; font-size:.875rem; }
.focus-controls .focus-primary { min-width:116px; gap:8px; }
.focus-play-symbol { position:relative; flex:none; width:14px; height:14px; }
.focus-play-symbol::before, .focus-play-symbol::after { content:""; position:absolute; top:1px; bottom:1px; background:currentColor; transition:clip-path 160ms var(--focus-ease), opacity 120ms ease; }
.focus-play-symbol::before { left:2px; width:10px; clip-path:polygon(0 0,100% 50%,100% 50%,0 100%); }
.focus-play-symbol::after { right:1px; width:3px; opacity:0; }
.focus-clock[data-playback="running"] .focus-play-symbol::before { clip-path:polygon(0 0,30% 0,30% 100%,0 100%); }
.focus-clock[data-playback="running"] .focus-play-symbol::after { opacity:1; }
.focus-play-label { animation:focus-label-enter 140ms ease-out; }
.focus-mode > header > button, .focus-controls > button { transition:transform 140ms var(--focus-ease), background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 140ms ease; }
.focus-controls > button:disabled { cursor:not-allowed; opacity:.42; transform:none; box-shadow:none; }
.focus-mode > header > button:active, .focus-controls > button:not(:disabled):active { transform:translateY(1px) scale(.97); box-shadow:none; }
.focus-mode-switch button:not(:disabled):active { opacity:.7; }
.complete-focus { display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:999px; background:var(--sage,#687b69); color:#fff!important; font-weight:670; }
.focus-clock > p { max-width:520px; margin:12px auto 0; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.5; }
.focus-history { flex:none; min-height:0; max-height:min(152px,20dvh); width:min(100%,760px); margin:0 auto; padding:12px 8px 4px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable both-edges; border-top:1px solid var(--line,#dcd8ce); text-align:left; animation:focus-content-enter 220ms var(--focus-ease); }
.focus-history h2 { margin:0 0 8px; font-size:1rem; line-height:1.3; }
.focus-history article { padding:8px 2px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(80px,120px); gap:12px; border-bottom:1px solid var(--line,#dcd8ce); font-size:.8125rem; overflow-wrap:anywhere; }
.focus-history article time, .focus-history article span { color:var(--ink-soft,#66685f); }

@media (hover:hover) and (pointer:fine) {
    .focus-mode > header > button:hover:where(:not([data-touch-input] *)), .focus-controls > button:not(:disabled):hover:where(:not([data-touch-input] *)) { transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.08); }
    .focus-mode > header > button:hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); border-color:var(--ink-soft,#66685f); }
    .focus-controls .complete-focus:hover:where(:not([data-touch-input] *)) { background:color-mix(in srgb,var(--sage,#687b69) 88%,var(--ink,#262823)); }
    .focus-mode-switch button:not(:disabled):hover:where(:not([data-touch-input] *)) { color:var(--ink,#262823); }
    .focus-mode > header > button:active, .focus-controls > button:not(:disabled):active { transform:translateY(1px) scale(.97); box-shadow:none; }
}

@keyframes focus-screen-enter { from { opacity:0; } to { opacity:1; } }
@keyframes focus-content-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes focus-timer-engage { from { transform:scale(.985); } to { transform:none; } }
@keyframes focus-label-enter { from { opacity:.45; transform:translateY(2px); } to { opacity:1; transform:none; } }

@media (min-width:760px) and (max-height:600px) {
    .focus-mode > main { padding-block:12px; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); grid-template-rows:minmax(0,1fr) auto; align-items:center; gap:16px 32px; }
    .focus-task-copy { grid-column:1; grid-row:1; max-height:100%; text-align:left; }
    .focus-task-copy h1 { font-size:clamp(1.5rem,5dvh,2rem); }
    .focus-clock { grid-column:2; grid-row:1 / -1; }
    .focus-clock > time { margin-block:12px; }
    .focus-controls { margin-top:12px; }
    .focus-clock > p { margin-top:8px; }
    .focus-history { grid-column:1; grid-row:2; max-height:22dvh; }
}

@keyframes planner-pulse { 50% { opacity:.35; transform:scale(.78); } }
@keyframes planner-shimmer { to { background-position:-220% 0; } }
@keyframes planner-drop-marker {
    from { opacity:0; transform:scaleX(.8); }
    to { opacity:1; transform:none; }
}
@keyframes planner-task-unfold {
    from { grid-template-rows:0fr; }
    to { grid-template-rows:1fr; }
}
@keyframes planner-task-reveal {
    from { opacity:0; transform:translateY(3px); }
    to { opacity:1; transform:none; }
}

@media (max-width:1180px) {
    .week-grid { grid-template-columns:repeat(7,minmax(155px,1fr)); }
}

@media (prefers-reduced-motion:reduce) { .weekend-resize-handle::after { transition:none!important; } }
/* Desktop calendar views use the space left below their headers. */
@media screen and (min-width:801px) {
    .planner-shell[data-view="week"], .planner-shell[data-view="month"] { height:100dvh; min-height:0; }
    .planner-shell[data-view="week"] .planner-main, .planner-shell[data-view="month"] .planner-main { min-height:0; display:flex; flex-direction:column; }
    .planner-shell[data-view="week"] .planner-topbar, .planner-shell[data-view="month"] .planner-topbar,
    .planner-shell[data-view="week"] .paused-series, .planner-shell[data-view="month"] .paused-series { flex:none; }
    .planner-shell[data-view="week"] .planner-content, .planner-shell[data-view="month"] .planner-content { flex:1; min-height:0; display:flex; overflow:auto; padding:0; }
    .planner-shell[data-view="week"] .planner-content { padding-top:0; padding-inline:0; padding-bottom:0; }
    .planner-shell[data-view="week"] .forever-notes-card { margin-top:auto; }
    .planner-shell[data-view="week"] .week-view { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
    .planner-shell[data-view="week"] .week-grid { flex:1; min-height:0; grid-template-rows:minmax(160px,1fr); }
    .planner-shell[data-view="week"] .week-grid.combine-weekend { grid-template-rows:minmax(160px,var(--weekend-top,1fr)) minmax(160px,var(--weekend-bottom,1fr)); }
    .week-grid[data-weekend-resize-enabled] [data-weekend-resize-header] { cursor:ns-resize; touch-action:pan-x pinch-zoom; }
    .week-grid[data-weekend-resize-enabled] [data-weekend-resize-header] .day-label { cursor:inherit; }
    .week-grid[data-weekend-resize-enabled] [data-weekend-resize-header] .inline-day-note { position:relative; z-index:5; cursor:auto; }
    /* Keep the canvas-sized hit area inside the header, away from Saturday's task rows. */
    .week-grid[data-weekend-resize-enabled] .weekend-resize-handle { display:block; position:absolute; top:-1px; inset-inline:0; --divider-hit-top:0px; }
    [data-weekend-resize-header]:hover:where(:not([data-touch-input] *)) .weekend-resize-handle::after { opacity:.62; }
    .week-grid[data-weekend-resizing] .weekend-resize-handle::after { transition:background-color 160ms ease,box-shadow 160ms ease,opacity 160ms ease; }
    .week-grid[data-weekend-resizing], .week-grid[data-weekend-resizing] * { cursor:ns-resize!important; user-select:none!important; -webkit-user-select:none!important; }
    .planner-shell[data-view="week"] .day-column { min-height:0; display:flex; flex-direction:column; padding-bottom:0; }
    .planner-shell[data-view="week"] .day-header { flex:none; margin-inline:-6px; padding-inline:9px; }
    .planner-shell[data-view="week"] .day-content { flex:1; min-height:0; margin-top:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:auto; }
    .planner-shell[data-view="week"] .day-tasks { padding-top:5px; }
    .planner-shell[data-view="week"] .day-content :focus-visible { outline-offset:-3px; }
    .planner-shell[data-view="month"] .month-view { flex:1; min-width:0; min-height:0; }
    .planner-shell[data-view="month"] .month-grid { flex:1; min-height:calc(var(--month-week-count,5) * 108px); grid-template-rows:repeat(var(--month-week-count,5),minmax(0,1fr)); }
    .planner-shell[data-view="month"] .month-cell :focus-visible { outline-offset:-2px; }
}

/* Ease task lists into their available width. */
.planner-shell :is(.day-content,.month-items,.timeline-anytime-day)[data-day-width-animating] { overflow-x:hidden; overflow-anchor:none; }
.day-task-reflow-layer { position:fixed; z-index:4; overflow:hidden; pointer-events:none; }
.day-task-reflow-layer .day-task-reflow-copy { position:absolute!important; display:block!important; min-height:0!important; padding:0!important; margin:0!important; border:0!important; background:none!important; box-shadow:none!important; pointer-events:none!important; }
.day-task-reflow-copy::before, .day-task-reflow-copy::after { display:none!important; }
.day-task-reflow-layer *, .day-task-reflow-layer { box-sizing:border-box; }
/* While a calendar filter change glides the days, this line carries a day's divider with the content it separates.
   Its colours mirror the day dividers above; stylesheet colours keep the glide from restyling a day's tasks. */
[data-calendar-visibility-rule] { border-bottom-color:transparent!important; }
.month-mobile-agenda[data-calendar-visibility-rule] { position:relative; }
[data-calendar-visibility-rule]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--line,#dcd8ce); pointer-events:none; }
.day-column.is-today > .day-header[data-calendar-visibility-rule]::after { background:var(--accent,#c76345); }
/* The filter label stays on one line while its button eases to the new width. */
.calendar-filter-trigger[data-calendar-visibility-resizing] > span { white-space:nowrap; }

/* Keep desktop density on tablets; only the phone layout below enlarges task controls. */
@media (hover:none), (pointer:coarse) {
    /* Allow ordinary scrolling while a short hold claims dragging in JavaScript. */
    .planner-task[draggable="true"], .planner-task[draggable="true"] :is(.task-body,.task-meta) { -webkit-touch-callout:none; }
    .notification-popover-actions { opacity:1; }
}

/* Phones and touch tablets reveal task menus on hold or keyboard focus. */
@media (max-width:800px), (hover:none), (pointer:coarse) {
    .planner-task .task-actions { display:flex; pointer-events:none; }
    .planner-task .task-more { display:grid; opacity:0; pointer-events:none; transform:scale(.9); transition:opacity 150ms ease,transform 150ms ease,color 120ms ease,background-color 120ms ease; }
    .planner-task[data-task-options-revealed] .task-more,
    .planner-task .task-more:focus-visible,
    .planner-task .task-more[aria-expanded="true"] { opacity:1; pointer-events:auto; transform:scale(1); }
    .planner-task:not([data-task-options-revealed]):not(:has(.task-more:is(:focus-visible,[aria-expanded="true"]))) .task-content { -webkit-mask-image:none; mask-image:none; }
    @media (prefers-reduced-motion:reduce) { .planner-task .task-more { transition:none; transform:none; } }
}

@media screen and (max-width:800px) {
    /* Keep navigation independent of document scrolling and keyboard reveal. */
    .planner-shell > .planner-main:has(> .planner-topbar)::before { content:""; display:block; flex:none; height:calc(var(--planner-topbar-height,var(--planner-topbar,76px)) + env(safe-area-inset-top)); }
    .planner-shell > .planner-main > .planner-topbar { position:fixed; left:env(safe-area-inset-left); right:env(safe-area-inset-right); }
}
@media (max-width:800px) {
    .planner-shell { display:block; padding-bottom:env(safe-area-inset-bottom); }
    .planner-main { min-height:calc(100dvh - env(safe-area-inset-bottom)); }
    .planner-shell[data-view="week"]:has(.planner-view-switch) { --planner-topbar:101px; }
    .planner-shell[data-view="week"] .planner-topbar { padding:4px 12px; row-gap:4px; }
    .planner-topbar { min-height:66px; padding:8px 12px; grid-template-columns:auto minmax(0,1fr) auto; }
    .topbar-navigation { gap:7px; }
    .planner-home-link { display:none; }
    .range-title h1 { font-size:1.2rem; }
    .range-title .period-title-full { display:none; }
    .range-title .period-title-phone { display:inline; overflow-wrap:normal; }
    .range-title > span { display:none; }
    .topbar-actions > button { display:none; }
    .notification-trigger { width:40px; min-height:40px; }
    .profile-menu-link:not(.profile-premium-card), .profile-menu button:not(.profile-menu-trigger,.profile-premium-menu-effects), .profile-menu summary { min-height:48px; padding:8px 12px; gap:10px; font-size:.9375rem; line-height:1.35; }
    .profile-menu-link:not(.profile-premium-card) > svg, .profile-menu button:not(.profile-menu-trigger) > svg, .profile-menu summary > svg { flex:none; width:22px; height:22px; }
    .profile-menu { max-height:calc(100dvh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .view-options .view-controls { left:12px; max-width:calc(100% - 24px); }
    .planner-content { padding:12px 12px 28px; }
    .planner-bottom-row, .planner-bottom-row.no-weekends { grid-template-columns:minmax(0,1fr); grid-template-rows:200px auto; min-height:0; margin:0; gap:16px; overflow:visible; }
    .planner-bottom-row > .unscheduled-tray { grid-column:1; grid-row:1; border-right:0; }
    .planner-bottom-row > .forever-board { grid-column:1; grid-row:2; }
    /* On phones, Someday follows both calendars with the same day-section spacing. */
    .planner-shell[data-view="week"] .planner-content { padding-top:0; padding-inline:0; padding-bottom:0; }
    .planner-utilities .planner-bottom-row { grid-template-rows:auto auto; }
    .planner-utilities .unscheduled-tray { contain:none; padding:0 6px 8px; border:0; }
    .planner-utilities .unscheduled-tray > header { min-height:52px; padding:8px 3px 6px; color:var(--phone-section-heading,var(--ink,#292c25)); }
    .planner-utilities .unscheduled-tray h2 { display:flex; align-items:center; min-height:44px; font:500 1.25rem/1.4 var(--planner-heading); }
    .planner-shell[data-view="week"] .planner-utilities .unscheduled-tray > header { min-height:44px; padding:4px 3px; }
    .planner-shell[data-view="week"] .planner-utilities .unscheduled-tray h2 { min-height:36px; }
    .planner-utilities .unscheduled-count { display:none; }
    .planner-utilities .unscheduled-content { flex:none; overflow:visible; }
    .planner-utilities .unscheduled-tasks { padding-top:6px; }
    .planner-utilities .unscheduled-tray .inline-add { min-height:36px; margin-top:3px; padding-block:4px; }
    .forever-notes-card { margin:0 12px 20px; }
    .forever-notes-grid { grid-template-columns:repeat(4,minmax(170px,1fr)); overflow-x:auto; }
    .week-grid { min-height:0; display:flex; flex-direction:column; overflow:visible; }
    .day-column { display:flex; min-height:0; padding:0 6px 8px; border:0; border-bottom:1px solid var(--line,#dcd8ce); box-shadow:none; }
    .week-grid.combine-weekend .day-column.combined-saturday,
    .week-grid.combine-weekend .day-column.combined-sunday { grid-column:auto; grid-row:auto; border:0; border-bottom:1px solid var(--line,#dcd8ce); }
    .day-header { position:static; min-height:52px; padding:8px 3px 6px; border-bottom:0; }
    .week-view .day-header { min-height:44px; padding:4px 3px; }
    .week-view .day-column.is-today .day-header { border-bottom-color:transparent; }
    .day-content { flex:none; min-height:0; overflow:visible; }
    .week-view .inline-add { min-height:36px; margin-top:3px; padding-block:4px; }
    .week-view .inline-day-note-input { min-height:36px; height:36px; max-height:36px; padding-block:2px; }
    .planner-shell .week-view .inline-day-note-input { --day-note-input-height:36px; }
    /* A little breathing room around compact controls gives plain tasks a 42px row height. */
    .planner-task, .collection-list .planner-task { padding:2px 3px; grid-template-columns:36px minmax(0,1fr); gap:4px; }
    .task-check, .task-more, .task-draft-check { width:36px; height:36px; }
    .inline-task-entry[data-inline-task-replace] .inline-add { min-height:42px; margin-top:0; padding:2px 3px; grid-template-columns:36px minmax(0,1fr); gap:4px; }
    .inline-task-entry[data-inline-task-replace] .inline-add-icon { width:36px; height:36px; }
    .planner-task { --task-more-cover:36px; }
    .collection-list { gap:0; }
    .collection-list > .planner-task { margin-bottom:0; }
    .today-section .planner-task { margin-top:0; }
    .week-view .planner-task.no-metadata .task-content { grid-template-columns:minmax(0,1fr); }
    :is(.planner-task,.task-details-title-row) .task-check { border:0; background:transparent; }
    :is(.planner-task,.task-details-title-row) .task-draft-check { border:0; background:transparent; }
    :is(.planner-task,.task-details-title-row) .task-check:hover:where(:not([data-touch-input] *)) { border-color:transparent; background:transparent; }
    :is(.planner-task,.task-details-title-row) .task-check-ring { width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--ink-soft,#66685f); border-radius:50%; background:transparent; pointer-events:none; }
    :is(.planner-task,.task-details-title-row) .task-check:hover:where(:not([data-touch-input] *)) .task-check-ring { border-color:var(--task-complete,#278653); background:color-mix(in srgb,var(--task-complete,#278653) 12%,transparent); }
    :is(.planner-task,.task-details-title-row).is-complete .task-check { border-color:transparent; background:transparent; }
    :is(.planner-task,.task-details-title-row).is-complete .task-check-ring { border-color:var(--task-complete,#278653); background:var(--task-complete,#278653); }
    :is(.planner-task,.task-details-title-row).is-colored .task-check:hover:where(:not([data-touch-input] *)) .task-check-ring { border-color:var(--ink); }
    :is(.planner-task,.task-details-title-row).is-colored.is-complete .task-check-ring { border-color:var(--ink); background:var(--task-complete,#278653); }
    .today-columns { grid-template-columns:1fr; gap:0; }
    .today-aside { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .timeline-wrap { grid-template-columns:1fr; }
    .timeline-unscheduled { order:-1; }
    .planner-shell[data-view="month"] .planner-content { padding:0; }
    .month-view { width:100%; overflow:visible; }
    .month-weekdays { grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom-color:color-mix(in srgb,var(--line,#dcd8ce) 58%,transparent); }
    .month-weekdays.no-weekends { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .month-weekdays span { padding:9px 2px 8px; text-align:center; font-size:.7rem; font-weight:600; }
    .month-grid { min-width:0; min-height:0; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(var(--month-week-count,5),64px); overflow:visible; }
    .month-grid.no-weekends { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .month-cell { min-height:64px; padding:0; overflow:hidden; border-color:color-mix(in srgb,var(--line,#dcd8ce) 58%,transparent); }
    .month-cell-add-desktop { display:none; }
    .month-cell-header { min-height:63px; height:100%; display:block; }
    .month-date { display:none; }
    .month-date-mobile { width:100%; min-height:63px; padding:2px 0 3px; display:grid; grid-template-rows:32px 10px; align-content:center; justify-items:center; gap:3px; border:0; border-radius:9px; background:transparent; color:inherit; font:500 .875rem/1 var(--planner-heading); cursor:pointer; transition:background-color 140ms ease,color 140ms ease,box-shadow 140ms ease; }
    .month-date-mobile:focus-visible { outline-offset:-3px; }
    .month-date-mobile > span:first-child { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; }
    .month-cell.selected { opacity:1; background:color-mix(in srgb,var(--accent,#c76345) 8%,transparent); }
    .month-cell.selected .month-date-mobile { color:var(--accent-deep,#9f422b); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 55%,transparent); }
    .month-cell.today .month-date-mobile > span:first-child { background:var(--accent,#c76345); color:#fff; box-shadow:none; }
    .month-items, .month-cell > .inline-task-entry, .month-cell > .month-add { display:none; }
    .month-activity { min-height:10px; display:flex; align-items:center; justify-content:center; gap:2px; }
    .month-activity i { width:4px; height:4px; border-radius:50%; background:var(--accent,#c76345); }
    .month-activity small { margin-left:1px; color:var(--ink-soft,#66685f); font-size:.58rem; line-height:1; font-variant-numeric:tabular-nums; }
    .month-mobile-agenda { margin:16px 9px 0; padding:0 6px 8px; display:block; border-bottom:1px solid var(--line,#dcd8ce); }
    .month-mobile-agenda-header { min-height:52px; padding:4px 3px; display:flex; align-items:center; gap:0; }
    .month-mobile-agenda .day-label { flex:none; min-width:0; min-height:36px; padding:2px 4px; }
    .month-mobile-agenda .day-label > :is(span,strong) { position:relative; top:-.0625rem; }
    .month-mobile-agenda-title { display:contents; }
    .planner-shell .month-mobile-agenda .inline-day-note-input { --day-note-input-height:36px; min-height:36px; height:36px; max-height:36px; }
    .month-mobile-agenda-navigation { margin-left:auto; display:flex; flex:none; align-items:center; gap:2px; }
    .month-mobile-agenda-navigation button { width:44px; min-height:44px; padding:0; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--ink-soft,#66685f); }
    .month-mobile-agenda-navigation button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
    .month-mobile-agenda-navigation svg, .month-mobile-task > svg, .month-mobile-event > svg { flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .month-mobile-agenda-body { position:relative; display:flex; flex-direction:column; min-width:0; }
    .month-mobile-agenda-entry { position:sticky; bottom:max(env(safe-area-inset-bottom,0px),var(--month-entry-bottom,0px)); z-index:5; flex:none; padding:0; border-radius:0; background:transparent; }
    .planner-shell .month-mobile-agenda-entry .inline-add { min-height:36px; margin-top:3px; padding-block:4px; }
    .month-mobile-agenda-entry .inline-task-draft { grid-template-columns:36px minmax(0,1fr); gap:4px; }
    /* Match the week view's row spacing so the day agenda reads the same in both views. */
    .month-mobile-agenda-items { --task-row-spacing:5px; display:grid; }
    .month-mobile-agenda-items > .month-mobile-task { margin-bottom:var(--task-row-spacing); }
    .month-mobile-task, .month-mobile-event { width:100%; min-height:58px; padding:7px 2px; display:grid; grid-template-columns:28px minmax(0,1fr) 20px; align-items:center; gap:9px; border:0; border-bottom:1px solid color-mix(in srgb,var(--line,#dcd8ce) 58%,transparent); background:transparent; color:var(--ink,#262823); text-align:left; }
    .month-mobile-task { min-height:42px; padding:6px 2px; }
    .month-mobile-task > svg, .month-mobile-event > svg { justify-self:end; color:var(--ink-soft,#66685f); opacity:.6; }
    .month-mobile-agenda-copy { min-width:0; display:grid; gap:2px; }
    .month-mobile-agenda-copy strong { overflow:hidden; font-size:.84rem; font-weight:550; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
    .month-mobile-task .month-mobile-agenda-copy strong { white-space:pre-line; }
    .month-mobile-agenda-copy small { color:var(--ink-soft,#66685f); font-size:.7rem; line-height:1.3; }
    .month-mobile-task-status { width:22px; height:22px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--ink-soft,#66685f) 75%,transparent); border-radius:50%; }
    .month-mobile-task-status svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .month-mobile-task.is-complete .month-mobile-task-status { border-color:var(--task-complete,#278653); background:var(--task-complete,#278653); }
    .month-mobile-task.is-complete .month-mobile-agenda-copy strong { color:var(--ink-soft,#66685f); opacity:.85; }
    .month-mobile-event-marker { width:4px; height:27px; justify-self:center; border-radius:999px; background:var(--sage,#687b69); }
    .month-mobile-task:active, .month-mobile-event:active { transform:scale(.985); }
    .settings-view { grid-template-columns:minmax(0,1fr); gap:16px; }
    .settings-view { padding-bottom:calc(env(safe-area-inset-bottom) + 24px); }
    .settings-nav { display:none; }
    .settings-mobile-nav { position:sticky; z-index:20; top:calc(var(--planner-topbar) + env(safe-area-inset-top) + 7px); display:block; }
    .settings-mobile-nav select { width:100%; min-height:46px; padding:9px 38px 9px 13px; border:1px solid var(--line,#dcd8ce); border-radius:11px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font:700 .8125rem/1.3 var(--planner-font); }
    .settings-mobile-nav select:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:2px; }
    .settings-form > .settings-panel { padding:22px; }
    .settings-save-status { padding-inline:22px; }
    .secondary-view, .in-app-help { margin-top:25px; }
    .in-app-help > .help-keyboard-intro, .in-app-help > .shortcut-grid { display:none; }
    .search-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:360px) {
    .profile-menu { padding:8px; }
    .profile-premium-card { --premium-card-radius:17px; min-height:120px; padding:7px 8px; grid-template-columns:88px minmax(0,1fr) 22px; gap:7px; border-radius:17px; }
    .profile-premium-card-shell { --premium-card-inset:9px; --premium-card-art:88px; --premium-card-gap:7px; }
    .profile-premium-art { --fox-glow-width:80px; --fox-glow-height:88px; --fox-glow-top:9px; --fox-glow-blur:12px; width:88px; height:104px; }
    .profile-premium-fox { height:104px; }
    .profile-premium-copy small { font-size:.69rem; }
}

@media (max-width:540px) {
    .planner-topbar { grid-template-columns:auto minmax(0,1fr) auto; gap:7px; }
    .notification-popover { position:fixed; top:auto; right:max(10px,env(safe-area-inset-right)); bottom:calc(env(safe-area-inset-bottom) + 9px); left:max(10px,env(safe-area-inset-left)); width:auto; max-height:min(72dvh,620px); border-radius:18px; transform-origin:bottom right; animation-name:notification-sheet-enter; }
    .notification-popover-body { max-height:calc(min(72dvh,620px) - 106px); }
    .notification-popover-header { padding-left:14px; }
    .notification-mark-all { min-height:40px!important; }
    .notification-popover-close { width:40px; min-height:40px!important; }
    .notification-popover-content { min-height:76px; padding-block:13px; }
    .notification-popover-actions { opacity:1; }
    .notification-popover-actions button { min-height:44px; }
    .notification-popover-footer button { min-height:40px; }
    .today-summary { align-items:flex-start; }
    .today-summary > div:first-child { align-items:flex-start; }
    .today-summary > button { white-space:nowrap; }
    .today-aside { grid-template-columns:1fr; }
    .timeline-unscheduled { padding:15px; }
    .timeline { --minute-height:1px; margin-left:39px; }
    .settings-form > .settings-panel { min-height:0; padding:18px; }
    .settings-section-heading { padding-bottom:17px; }
    .settings-section-heading h2 { font-size:1.4rem; }
    .settings-fields, .editor-grid { grid-template-columns:1fr; }
    .settings-field-wide { grid-column:auto; }
    .settings-choice-group, .settings-toggle-grid { grid-template-columns:1fr; }
    .settings-accent-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .settings-choice-option { min-height:92px; }
    .settings-days { gap:6px; }
    .settings-days span { width:44px; }
    .settings-save-status { padding-inline:18px; }
    .settings-data-summary, .settings-danger-card { padding:18px; }
    .settings-danger-card { align-items:flex-start; flex-direction:column; }
    .settings-data-links { align-items:stretch; flex-direction:column; }
    .settings-data-links :is(.button,.secondary-button) { width:100%; }
    .shortcut-grid { grid-template-columns:1fr; }
    .quick-add-overlay, .note-dialog, .event-dialog, .plan-dialog { top:auto; right:env(safe-area-inset-right); bottom:0; left:env(safe-area-inset-left); width:auto; max-height:88dvh; border-radius:16px 16px 0 0; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
    .task-drawer { width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); }
    .task-editor footer { grid-template-columns:1fr 1fr; }
    .task-editor footer > span { display:none; }
    .task-editor footer .danger-text-button { grid-column:1 / -1; justify-content:flex-start; }
    .plan-list article { grid-template-columns:48px 1fr; }
    .plan-list article > span { grid-column:2; }
    .plan-dialog footer { flex-direction:column-reverse; }
    .plan-dialog footer > * { width:100%; }
    .in-app-deletion { padding:22px 12px 50px; }
    .in-app-deletion > section { padding:20px 17px; }
    .deletion-actions { flex-direction:column-reverse; }
    .focus-mode > header { padding-inline:12px; }
    .focus-mode > header .planner-brand > span:last-child { display:none; }
    .focus-mode > main { width:calc(100% - 28px); padding-block:16px; gap:20px; }
    .focus-task-copy { padding-inline:2px; }
    .focus-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .focus-controls > button { min-width:0; padding-inline:10px; }
    .focus-controls .complete-focus { grid-column:1 / -1; }
    .focus-history article { grid-template-columns:1fr auto; }
    .focus-history article span { grid-column:1 / -1; }
    .search-view { padding-top:4px; }
    .search-box input { min-height:56px; padding-left:2px; font-size:1rem; }
    .search-filter-grid { grid-template-columns:1fr; }
    .search-result { grid-template-columns:34px minmax(0,1fr) 24px; gap:9px; }
}

@media (max-width:759px) and (max-height:600px) {
    .focus-mode > main { padding-block:8px; gap:12px; }
    .focus-task-copy { min-height:3rem; }
    .focus-clock > time { margin-block:8px; font-size:clamp(3rem,12dvh,3.75rem); }
    .focus-controls { margin-top:12px; }
    .focus-clock > p { margin-top:8px; }
    .focus-history { max-height:min(96px,16dvh); }
}

@keyframes notification-sheet-enter { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
    .app-loading { transition-duration:.01ms!important; }
    .app-loading-dot { animation:none!important; transform:none!important; }
    .forever-board-sticky { animation:none; transition:none; }
    .forever-board-divider::after, .forever-board-toolbar, .forever-board-more-panel, .forever-board-canvas, .unscheduled-content { transition:none!important; }
    .board-color-popover:popover-open, .board-color-popover[data-fallback]:not([hidden]) { animation:none; }
    .board-color-trigger { transition:none; }
    .focus-mode, .focus-mode *, .focus-mode *::before, .focus-mode *::after { animation:none!important; transition:none!important; }
    .focus-mode > header > button, .focus-controls > button { transform:none!important; }
    .task-details-popover { animation:none; }
    .task-timing-picker { animation:none; }
    .task-timing-trigger, .task-timing-chevron { transition:none; }
    .task-option-body:not([hidden]) { animation:none; }
    .task-option-chevron { transition:none; }
    .notification-popover, .notification-popover-item, .notification-trigger, .notification-popover button { animation:none!important; transition:none!important; }
    .notification-popover-loading > span:not(.sr-only) { animation:none!important; background:var(--paper-deep,#eeebe2); }
    .planner-shell *, .quick-add-overlay *, .task-drawer * { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
    .inline-task-reveal, .inline-task-draft { animation:none!important; }
    .inline-task-reveal { grid-template-rows:1fr; }
    .inline-task-draft { opacity:1; transform:none; }
    .inline-add { transition:none!important; }
    .planner-task[data-drop-before]::before, .planner-task[data-drop-after]::after,
    .inline-task-entry[data-drop-before]::before { animation:none!important; }
}

@media print {
    .app-loading, .planner-topbar, .notification-navigation, .view-controls, .planner-utilities, .inline-day-note, .inline-add, .month-add { display:none!important; }
    .planner-shell { display:block; min-height:0; background:#fff; color:#111; }
    .planner-main { min-height:0; }
    .planner-content { padding:0; }
    .week-grid, .month-grid { min-height:0; overflow:visible; border-color:#bbb; }
    .day-column, .month-cell { break-inside:avoid; background:#fff!important; border-color:#bbb; }
}

.calendar-management { margin-top:35px; font-family:var(--planner-font); scroll-margin-top:18px; --calendar-enter-y:0px; animation:calendar-content-enter 150ms ease-out both; }
.calendar-management > .online-feature-controls { display:grid; gap:18px; }
.calendar-management-primary, .managed-calendar-section, .workspace-administration { padding:24px; border:1px solid var(--line,#dcd8ce); border-radius:14px; background:var(--surface,#fffdf8); --calendar-enter-y:5px; animation:calendar-content-enter 180ms cubic-bezier(.22,1,.36,1) both; }
.calendar-management :is(button,input,select,textarea) { font-family:var(--planner-font); }
.calendar-management :is(.button,.secondary-button) { font-weight:700; }
.planner-shell[data-view="calendars"] .planner-content > .calendar-management { max-width:1040px; margin:0 auto; }
.calendar-management-message { margin-top:0; padding:10px 12px; border-radius:8px; font-size:.8rem; animation:calendar-action-message-enter 180ms cubic-bezier(.22,1,.36,1) both; }
.calendar-management-message.success { background:color-mix(in srgb,var(--sage,#687b69) 11%,transparent); color:var(--sage,#687b69); }
.calendar-management-message.error { background:color-mix(in srgb,var(--danger,#a33a34) 9%,transparent); color:var(--danger,#a33a34); }
.calendar-management-message + .calendar-editor { margin-top:18px; padding-top:18px; border-top:1px solid var(--line,#dcd8ce); }
.calendar-management-loading { min-height:130px; display:flex; align-items:center; justify-content:center; gap:6px; }
.calendar-management-loading span { width:7px; height:7px; border-radius:50%; background:var(--accent,#c76345); animation:planner-pulse 1.05s infinite; }
.calendar-management-loading span:nth-child(2) { animation-delay:.12s; }
.calendar-management-loading span:nth-child(3) { animation-delay:.24s; }
.calendar-editor { margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; --calendar-enter-y:2px; animation:calendar-content-enter 155ms cubic-bezier(.22,1,.36,1) both; }
.calendar-editor > header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.calendar-editor > header h3, .managed-calendar-section > header h3 { font:700 1.06rem/1.3 var(--planner-font); letter-spacing:-.01em; }
.calendar-editor > header p { max-width:620px; margin-top:5px; color:var(--ink-soft,#66685f); font-size:.8rem; line-height:1.5; }
.calendar-editor .icon-button { flex:none; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--ink-soft,#66685f); transition:background 140ms ease,color 140ms ease,transform 140ms cubic-bezier(.22,1,.36,1); }
.calendar-editor .icon-button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.calendar-editor .icon-button:active:not(:disabled) { transform:scale(.92); }
.calendar-editor-grid { margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 16px; }
.calendar-editor-grid > label { min-width:0; display:grid; gap:7px; }
.calendar-field-heading { display:flex; align-items:baseline; gap:6px; color:var(--ink,#262823); font-size:.8rem; font-weight:700; line-height:1.35; }
.calendar-field-heading small { color:var(--ink-soft,#66685f); font-size:.75rem; font-weight:400; }
.calendar-editor-grid input, .calendar-editor-grid select, .calendar-editor-grid textarea { width:100%; min-height:43px; padding:9px 11px; border:1px solid var(--line,#dcd8ce); border-radius:9px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font:400 .875rem/1.4 var(--planner-font); transition:border-color 140ms ease,background 140ms ease; }
.calendar-editor-grid input::placeholder, .calendar-editor-grid textarea::placeholder { color:var(--ink-soft,#66685f); opacity:1; }
.calendar-editor-grid textarea { min-height:96px; resize:vertical; }
.calendar-description-field { grid-column:1 / -1; }
.calendar-editor-grid > .calendar-field-wide { grid-column:1 / -1; }
.calendar-style-controls { margin-top:19px; padding-top:18px; display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:end; gap:18px; border-top:1px solid color-mix(in srgb,var(--line,#dcd8ce) 78%,transparent); }
.calendar-color-picker { width:max-content; align-self:end; }
.calendar-icon-picker { min-width:0; margin:0; padding:0; border:0; }
.calendar-icon-picker legend { color:var(--ink,#262823); font:700 .8rem/1.35 var(--planner-font); }
.calendar-icon-picker > div { margin-top:7px; display:flex; flex-wrap:wrap; gap:6px; }
.calendar-icon-picker button { width:40px; min-height:40px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:9px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); transition:background 140ms ease,border-color 140ms ease,color 140ms ease,transform 140ms cubic-bezier(.22,1,.36,1); }
.calendar-icon-picker button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); }
.calendar-icon-picker button:active:not(:disabled) { transform:scale(.92); }
.calendar-icon-picker button.selected { border-color:color-mix(in srgb,var(--accent,#c76345) 52%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--accent,#c76345) 10%,var(--surface,#fffdf8)); color:var(--accent-deep,#9f422b); }
.calendar-editor > .form-message { margin-top:13px; }
.calendar-editor > footer { margin-top:20px; padding-top:18px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid color-mix(in srgb,var(--line,#dcd8ce) 78%,transparent); }
.calendar-editor > footer button { min-height:40px; font-size:.82rem; }
.managed-calendar-section { margin-top:0; }
.managed-calendar-section > header { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--line,#dcd8ce); }
.managed-calendar-section > header > span, .managed-calendar-archive summary > span { min-width:22px; padding:2px 7px; border-radius:999px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); font-size:.72rem; text-align:center; }
.managed-calendar-section > header .secondary-button { min-height:36px; margin-left:auto; display:flex; align-items:center; gap:6px; font-size:.78rem; transition:border-color 150ms ease,background-color 150ms ease,transform 150ms cubic-bezier(.22,1,.36,1),box-shadow 150ms ease; }
.managed-calendar-list { display:grid; }
.managed-calendar-card.has-calendar-filter { grid-template-columns:28px 42px minmax(0,1fr) auto; }
.managed-calendar-filter { display:grid; place-items:center; align-self:stretch; min-height:44px; cursor:pointer; }
.managed-calendar-filter input { width:17px; height:17px; margin:0; accent-color:var(--accent,#c76345); cursor:inherit; }
.managed-calendar-filter:has(input:disabled) { cursor:default; opacity:.45; }
.managed-calendar-card { min-height:82px; padding:13px 8px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; border-bottom:1px solid var(--line,#dcd8ce); border-radius:9px; --calendar-enter-y:3px; transition:background-color 160ms ease; animation:calendar-content-enter 160ms cubic-bezier(.22,1,.36,1) both; }
.managed-calendar-card:nth-child(2) { animation-delay:18ms; }
.managed-calendar-card:nth-child(3) { animation-delay:36ms; }
.managed-calendar-card:nth-child(4) { animation-delay:54ms; }
.managed-calendar-card:nth-child(5) { animation-delay:72ms; }
.managed-calendar-card:nth-child(n+6) { animation-delay:90ms; }
.managed-calendar-section .managed-calendar-list > .managed-calendar-card:last-child { border-bottom:0; }
.managed-calendar-card.read-only, .managed-calendar-card.archived { opacity:.72; }
.managed-calendar-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--calendar-color) 15%,var(--surface,#fffdf8)); color:var(--calendar-color); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--calendar-color) 25%,transparent); transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease,transform 180ms cubic-bezier(.22,1,.36,1); }
.managed-calendar-copy { min-width:0; }
.managed-calendar-copy > header { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.managed-calendar-copy h4 { overflow:hidden; color:var(--ink,#262823); font-size:.86rem; text-overflow:ellipsis; white-space:nowrap; }
.managed-calendar-copy > p { max-width:650px; margin-top:4px; overflow:hidden; color:var(--ink-soft,#66685f); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.managed-calendar-copy > small { margin-top:5px; display:block; color:var(--ink-soft,#66685f); font-size:.74rem; }
.managed-calendar-badges { display:flex; flex-wrap:wrap; gap:4px; }
.managed-calendar-badges > span { padding:2px 6px; display:flex; align-items:center; gap:3px; border-radius:999px; background:var(--paper-deep,#eeebe2); color:var(--ink-soft,#66685f); font-size:.7rem; font-weight:700; }
.managed-calendar-badges > span.default { background:color-mix(in srgb,var(--task-complete,#278653) 14%,var(--surface,#fffdf8)); color:var(--task-complete,#278653); }
.managed-calendar-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.managed-calendar-actions button { min-height:32px; padding:0 8px; display:flex; align-items:center; gap:4px; border:1px solid var(--line,#dcd8ce); border-radius:7px; background:transparent; color:var(--ink-soft,#66685f); font-size:.74rem; transition:border-color 140ms ease,background-color 140ms ease,color 140ms ease,transform 140ms cubic-bezier(.22,1,.36,1); }
.managed-calendar-actions button:disabled { opacity:.32; cursor:not-allowed; }
.managed-calendar-actions button.danger { border-color:color-mix(in srgb,var(--danger,#a33a34) 40%,var(--line,#dcd8ce)); color:var(--danger,#a33a34); }
.calendar-delete-confirmation { min-width:min(100%,280px); padding:6px; display:flex; flex-wrap:wrap; align-items:center; gap:5px; border-radius:8px; background:color-mix(in srgb,var(--danger,#a33a34) 7%,var(--surface,#fffdf8)); animation:calendar-action-confirmation-enter 180ms cubic-bezier(.22,1,.36,1) both; }
.calendar-delete-confirmation span { flex:1 1 180px; color:var(--ink,#262823); font-size:.72rem; line-height:1.35; }
.calendar-delete-confirmation button { min-height:30px; }
.calendar-management { position:relative; }
.managed-calendar-card[data-calendar-reorderable="true"] { cursor:grab; }
.managed-calendar-card[data-calendar-reorderable="true"] .managed-calendar-copy,
.managed-calendar-card[data-calendar-reorderable="true"] .managed-calendar-icon,
.managed-calendar-drag-handle { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.managed-calendar-actions .managed-calendar-drag-handle { min-width:32px; justify-content:center; padding:0 6px; border-color:transparent; cursor:grab; }
.managed-calendar-drag-handle:focus-visible { outline:2px solid var(--accent,#c76345); outline-offset:2px; }
.managed-calendar-card[data-calendar-touch-hold] { background:var(--paper-deep,#eeebe2); }
.calendar-management[data-calendar-drag-active] { cursor:grabbing; -webkit-user-select:none; user-select:none; }
.calendar-management[data-calendar-drag-active] .managed-calendar-card { animation:none; }
.calendar-management[data-calendar-drag-active] .managed-calendar-card,
.calendar-management[data-calendar-drag-active] .managed-calendar-drag-handle { cursor:grabbing; }
.calendar-management[data-calendar-reorder-pending] .managed-calendar-drag-handle { cursor:progress; }
.calendar-drag-layer { position:absolute; inset:0; z-index:50; pointer-events:none; }
.calendar-drag-proxy, .calendar-drag-gap { position:absolute; box-sizing:border-box; pointer-events:none; }
.calendar-drag-proxy { margin:0; border:1px solid var(--line,#dcd8ce); background:var(--surface,#fffdf8); box-shadow:0 8px 24px rgba(0,0,0,.2); animation:none; opacity:.97; }
.calendar-drag-proxy .managed-calendar-icon { transform:none; }
.calendar-drag-gap { border:1px dashed color-mix(in srgb,var(--accent,#c76345) 65%,var(--line,#dcd8ce)); border-radius:9px; background:color-mix(in srgb,var(--accent,#c76345) 7%,transparent); }
.calendar-empty { padding:22px 0; color:var(--ink-soft,#66685f); font-size:.8rem; }
.managed-calendar-archive { margin-top:22px; }
.managed-calendar-archive summary { padding:10px 0; display:flex; align-items:center; gap:8px; border-top:1px solid var(--line,#dcd8ce); color:var(--ink,#262823); cursor:pointer; font:700 .82rem/1.2 var(--planner-font); }
.managed-calendar-archive[open] > .managed-calendar-list { --calendar-enter-y:3px; animation:calendar-content-enter 160ms cubic-bezier(.22,1,.36,1) both; }
.workspace-administration { margin-top:0; }
.workspace-administration-header h3 { font:700 1.06rem/1.3 var(--planner-font); }
.workspace-administration-header p { max-width:680px; margin-top:6px; color:var(--ink-soft,#66685f); font-size:.8rem; line-height:1.5; }
.workspace-administration-list { margin-top:15px; display:grid; gap:12px; }
.workspace-administration-card { padding:16px; border:1px solid var(--line,#dcd8ce); border-radius:11px; background:var(--paper,#f7f4ec); }
.workspace-administration-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.workspace-administration-card > header h4 { font-size:.88rem; }
.workspace-administration-card > header p { margin-top:3px; color:var(--ink-soft,#66685f); font-size:.75rem; }
.workspace-administration-card > header > span { padding:3px 7px; border-radius:999px; background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); font-size:.72rem; font-weight:700; }
.workspace-administration-card h5 { margin-top:15px; font-size:.8rem; }
.workspace-member-list { margin-top:6px; display:grid; list-style:none; }
.workspace-member-list > li { min-height:42px; padding:7px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid color-mix(in srgb,var(--line,#dcd8ce) 70%,transparent); }
.workspace-member-list > li > div:first-child { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.workspace-member-list strong { overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.workspace-member-list small, .workspace-member-list span { padding:2px 5px; border-radius:999px; background:var(--surface,#fffdf8); color:var(--ink-soft,#66685f); font-size:.7rem; }
.workspace-member-list .text-button { min-height:30px; flex:none; font-size:.74rem; }
.workspace-transfer { margin-top:16px; padding:13px; border-radius:9px; background:var(--surface,#fffdf8); }
.workspace-transfer > p { max-width:650px; margin-top:4px; color:var(--ink-soft,#66685f); font-size:.78rem; }
.workspace-transfer > label { margin-top:10px; display:grid; gap:5px; color:var(--ink-soft,#66685f); font-size:.78rem; }
.workspace-transfer select { min-height:38px; padding:0 9px; border:1px solid var(--line,#dcd8ce); border-radius:7px; background:var(--paper,#f7f4ec); color:var(--ink,#262823); }
.workspace-transfer > .secondary-button { margin-top:9px; }
.workspace-confirmation { padding:9px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; border-radius:8px; background:color-mix(in srgb,var(--danger,#a33a34) 7%,var(--surface,#fffdf8)); }
.workspace-confirmation p { width:100%; color:var(--ink,#262823); font-size:.75rem; }
.workspace-confirmation button { min-height:32px; padding:0 9px; border:1px solid var(--line,#dcd8ce); border-radius:7px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font-size:.74rem; }
.workspace-confirmation button.danger { border-color:color-mix(in srgb,var(--danger,#a33a34) 45%,var(--line,#dcd8ce)); color:var(--danger,#a33a34); }

@media (hover:hover) and (pointer:fine) {
    .managed-calendar-card:hover:where(:not([data-touch-input] *)) { background:color-mix(in srgb,var(--paper-deep,#eeebe2) 62%,transparent); }
    .managed-calendar-card:hover:where(:not([data-touch-input] *)) .managed-calendar-icon { transform:translateY(-1px) scale(1.045); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--calendar-color) 34%,transparent),0 4px 12px color-mix(in srgb,var(--calendar-color) 12%,transparent); }
    .managed-calendar-section > header .secondary-button:hover:where(:not([data-touch-input] *)):not(:disabled), .managed-calendar-actions button:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 58%,var(--line,#dcd8ce)); background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); transform:translateY(-1px); box-shadow:0 3px 9px rgba(0,0,0,.07); }
}

.managed-calendar-section > header .secondary-button:active:not(:disabled), .managed-calendar-actions button:active:not(:disabled) { transform:translateY(0) scale(.96); box-shadow:none; }

@keyframes calendar-content-enter { from { opacity:0; transform:translateY(var(--calendar-enter-y,5px)); } }
@keyframes calendar-action-message-enter { from { opacity:0; transform:translateY(-3px) scale(.985); } }
@keyframes calendar-action-confirmation-enter { from { opacity:0; transform:translateY(-3px) scale(.98); } }

@media (prefers-reduced-motion:reduce) {
    .calendar-management, .calendar-management-primary, .managed-calendar-section, .workspace-administration,
    .calendar-editor, .managed-calendar-card, .managed-calendar-archive[open] > .managed-calendar-list,
    .calendar-management-message, .calendar-delete-confirmation { animation:none!important; }
    .calendar-editor .icon-button, .calendar-icon-picker button, .managed-calendar-section > header .secondary-button,
    .managed-calendar-card, .managed-calendar-icon, .managed-calendar-actions button { transition:none!important; transform:none!important; }
}

@media (max-width:700px) {
    .calendar-management-primary, .managed-calendar-section, .workspace-administration { padding:18px 14px; }
    .calendar-editor-grid { grid-template-columns:1fr; }
    .calendar-description-field { grid-column:auto; }
    .calendar-editor-grid > .calendar-field-wide { grid-column:auto; }
    .calendar-style-controls { grid-template-columns:1fr; align-items:start; gap:16px; }
    .managed-calendar-card { grid-template-columns:38px minmax(0,1fr); }
    .managed-calendar-card.has-calendar-filter { grid-template-columns:28px 38px minmax(0,1fr); }
    .managed-calendar-card.has-calendar-filter .managed-calendar-actions { grid-column:3; }
    .managed-calendar-actions { grid-column:2; justify-content:flex-start; }
    .workspace-administration-card { padding:13px 11px; }
    .workspace-member-list > li { align-items:flex-start; flex-direction:column; }
}
@media (max-width:430px) {
    .calendar-management-primary, .managed-calendar-section, .workspace-administration { padding:16px 12px; border-radius:11px; }
    .calendar-editor > footer > button { flex:1; padding-inline:10px; }
}
/* Private, online-only collaboration inside task and event drawers. */
.collaboration-panel { display: grid; gap: .8rem; }
.collaboration-panel h4 { margin: 0; font-size: .92rem; }
.collaboration-note, .collaboration-mentions { margin: 0; color: var(--ink-soft,#66685f); font-size: .82rem; }
.collaboration-assignee, .collaboration-upload { display: grid; gap: .35rem; font-size: .84rem; font-weight: 650; }
.collaboration-block { display: grid; gap: .55rem; padding-top: .75rem; border-top: 1px solid var(--line,#dcd8ce); }
.collaboration-comment { display: grid; gap: .35rem; padding: .65rem; border: 1px solid var(--line,#dcd8ce); border-radius: .65rem; background: var(--surface,#fffdf8); }
.collaboration-comment header { display: flex; justify-content: space-between; gap: .75rem; font-size: .8rem; }
.collaboration-comment header time, .collaboration-attachment small { color: var(--ink-soft,#66685f); font-weight: 400; }
.collaboration-comment p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.collaboration-row, .collaboration-mention-picker, .collaboration-attachment { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.collaboration-row { justify-content: flex-end; }
.collaboration-mention-picker label { display: flex; align-items: center; gap: .45rem; }
.collaboration-attachment { padding: .45rem 0; border-bottom: 1px solid var(--line,#dcd8ce); }
.collaboration-attachment > span { display: grid; min-width: 0; margin-right: auto; }
.collaboration-attachment strong { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collaboration-panel .activity-line time { color: var(--ink-soft,#66685f); margin-left: .25rem; }

/* Local planning stays useful without connecting an account. */
.guest-inline-note a { color:var(--accent-deep,#9f422b); text-underline-offset:3px; }
.guest-feature-notice { max-width:680px; margin:30px auto; padding:30px; border:1px solid var(--line,#dcd8ce); border-radius:14px; background:var(--surface,#fffdf8); color:var(--ink,#262823); }
.guest-feature-notice h2 { margin:0; font:500 1.8rem/1.15 var(--planner-heading); }
.guest-feature-notice h3 { margin:0; font:650 .95rem/1.35 var(--planner-font); }
.guest-feature-notice p { margin:12px 0 18px; color:var(--ink-soft,#66685f); font-size:.88rem; line-height:1.65; }
.guest-feature-notice.compact { margin:18px 0; padding:18px; border-radius:10px; }
.guest-feature-notice.compact p { margin:8px 0 14px; font-size:.8rem; }
.guest-inline-note { margin:12px 0!important; color:var(--ink-soft,#66685f); font:400 .8rem/1.65 var(--planner-font); }
.guest-inline-note a { display:inline-block; margin-left:3px; }
.guest-clear-confirmation { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid color-mix(in srgb,var(--danger,#a33a34) 24%,var(--line,#dcd8ce)); background:color-mix(in srgb,var(--danger,#a33a34) 5%,var(--surface,#fffdf8)); }
.guest-clear-warning { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:9px; color:var(--danger,#a33a34); }
.guest-clear-warning > svg { margin-top:2px; }
.guest-clear-warning p { max-width:650px; font-size:.75rem; line-height:1.55; }
.guest-clear-confirmation .settings-actions { flex:none; margin:0; flex-wrap:wrap; justify-content:flex-end; }
.guest-clear-confirmation .danger-button { min-height:41px; padding:8px 16px; border:1px solid var(--danger,#a33a34); border-radius:999px; background:var(--danger,#a33a34); color:white; font-weight:650; }
@media (max-width:800px) {
    .guest-feature-notice { margin:16px auto; padding:22px 18px; }
    .guest-feature-notice h2 { font-size:1.55rem; }
    .guest-local-data-summary { grid-template-columns:auto minmax(0,1fr); padding:17px; }
    .guest-clear-trigger { grid-column:1 / -1; width:100%; margin-top:2px; }
    .guest-clear-confirmation { padding:16px 17px; align-items:stretch; flex-direction:column; gap:14px; }
    .guest-clear-confirmation .settings-actions { display:grid; grid-template-columns:1fr 1fr; }
    .guest-clear-confirmation .settings-actions > button { width:100%; }
}
@media (max-width:420px) {
    .guest-clear-confirmation .settings-actions { grid-template-columns:1fr; }
}
@media print {
    .guest-feature-notice, .guest-local-data { display:none!important; }
}

/* Offline capabilities keep the same planner layout and local controls. */
.online-feature-controls { min-width:0; margin:0; padding:0; border:0; }
.offline-feature-note { color:var(--muted); font-size:.82rem; line-height:1.5; margin:0 0 16px; }
.profile-menu-link:disabled { cursor:default; opacity:.5; }
.offline-range-note { color:var(--muted); margin:0; padding:8px 20px; font-size:.78rem; line-height:1.5; }

/* Shared by premium gates and locked feature controls. */
.premium-lock-anchor {
    position: relative;
    display: grid;
    place-items: center;
}

.premium-lock-trigger {
    cursor: help;
    outline: none;
    transition: transform 160ms cubic-bezier(.22, 1, .36, 1),
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.premium-lock-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 62%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 19%, transparent);
}

.premium-lock-popover {
    --premium-lock-enter-y: -4px;
    position: fixed;
    z-index: 500;
    inset: auto;
    box-sizing: border-box;
    width: max-content;
    max-width: min(15rem, calc(100vw - 24px));
    margin: 0;
    padding: 8px 10px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--premium-card-border, #a991da) 68%, transparent);
    border-radius: 11px;
    background:
        radial-gradient(circle at 12% 0,
            color-mix(in srgb, var(--premium-glow-peach, #ffd0bd) 18%, transparent),
            transparent 55%),
        linear-gradient(135deg,
            var(--premium-card-a, #251b40),
            var(--premium-card-b, #143a49));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .12),
        0 10px 28px var(--premium-card-shadow, rgb(43 28 77 / .3));
    color: var(--premium-card-text, #fffaf4);
    font-family: var(--planner-font, sans-serif);
    font-size: .75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(var(--premium-lock-enter-y)) scale(.97);
    transform-origin: var(--premium-lock-caret-x, 50%) top;
}

.premium-lock-popover::before {
    position: absolute;
    top: -5px;
    left: var(--premium-lock-caret-x, 50%);
    width: 9px;
    height: 9px;
    border-top: 1px solid color-mix(in srgb, var(--premium-card-border, #a991da) 68%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--premium-card-border, #a991da) 68%, transparent);
    background: color-mix(in srgb, var(--premium-card-a, #251b40) 88%, var(--premium-glow-peach, #ffd0bd));
    content: "";
    transform: translateX(-50%) rotate(45deg);
}

.premium-lock-popover[data-placement="above"] {
    --premium-lock-enter-y: 4px;
    transform: translateY(var(--premium-lock-enter-y)) scale(.97);
    transform-origin: var(--premium-lock-caret-x, 50%) bottom;
}

.premium-lock-popover[data-placement="above"]::before {
    top: auto;
    bottom: -5px;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--premium-card-border, #a991da) 68%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--premium-card-border, #a991da) 68%, transparent);
    background: var(--premium-card-b, #143a49);
}

.premium-lock-popover[data-open="true"] {
    opacity: 1;
    visibility: visible;
    animation: premium-lock-hint-enter 160ms cubic-bezier(.22, 1, .36, 1) both;
}

.premium-lock-popover strong,
.premium-lock-popover > span {
    display: block;
}

.premium-lock-popover strong {
    color: var(--premium-card-text, #fffaf4);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.006em;
}

.premium-lock-popover > span {
    margin-top: 2px;
    color: var(--premium-card-muted, #e8e0ec);
}

@media (hover: hover) and (pointer: fine) {
    .premium-lock-trigger:hover:where(:not([data-touch-input] *)) {
        border-color: color-mix(in srgb, var(--accent) 32%, transparent);
        background: color-mix(in srgb, var(--accent) 18%, var(--surface, #fff));
        box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 15%, transparent);
        transform: translateY(-1px);
    }
}

@keyframes premium-lock-hint-enter {
    from {
        opacity: 0;
        transform: translateY(var(--premium-lock-enter-y)) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-lock-trigger {
        transition: none;
    }

    .premium-lock-popover[data-open="true"] {
        animation: none;
        transform: none;
    }
}

@media (forced-colors: active) {
    .premium-lock-trigger:focus-visible {
        border-color: Highlight;
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }

    .premium-lock-popover,
    .premium-lock-popover::before,
    .premium-lock-popover[data-placement="above"]::before {
        border-color: CanvasText;
        background: Canvas;
        box-shadow: none;
        color: CanvasText;
    }

    .premium-lock-popover strong,
    .premium-lock-popover > span {
        color: CanvasText;
    }
}

/* The Glow finish emits light outside the card, including clipped editor surfaces.
   Keep this after the flat-color and selection styles; outlines still show selection. */
.task-card-finish.task-card-finish--glow.is-colored { box-shadow:var(--task-glow-shadow); }
.task-details-dialog.task-card-finish--glow { --task-glow-elevation:0 24px 80px rgba(0,0,0,.28); }
.task-drag-proxy.task-card-finish--glow { --task-glow-elevation:0 8px 24px rgba(0,0,0,.2); }
@media (min-width:801px) {
    /* Use the existing day gutter so a scrollport doesn't cut off the luminous edge. */
    .planner-shell[data-view="week"] .day-content:has(.task-card-finish--glow) { margin-inline:-5px; padding-inline:5px; }
    .planner-shell[data-view="month"] .month-items:has(.task-card-finish--glow) { margin:-5px; padding:5px; }
}
@media (forced-colors:active) {
    .task-card-finish.task-card-finish--glow.is-colored { box-shadow:none; }
}
@media print {
    .task-card-finish.task-card-finish--glow.is-colored { box-shadow:none; }
}

/* Only the timeline canvas scrolls, so its sticky day headings stay below the topbar. */
.planner-shell[data-view="timeline"] { height:100dvh; min-height:0; overflow:clip; }
.planner-shell[data-view="timeline"] .planner-main { height:100%; min-height:0; display:flex; flex-direction:column; }
.planner-shell[data-view="timeline"] .planner-topbar,
.planner-shell[data-view="timeline"] .paused-series { flex:none; }
.planner-shell[data-view="timeline"] .planner-content { flex:1; min-height:0; display:flex; overflow:hidden; padding:0; }
@media(max-width:800px) {
    .planner-shell[data-view="timeline"] .planner-utilities { display:block; flex:none; min-height:0; max-height:35dvh; overflow:auto; overscroll-behavior:contain; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row { margin:0; padding-top:9px; gap:0; }
    .planner-utilities[data-view="timeline"] .planner-bottom-divider { display:block; position:sticky; grid-column:1; grid-row:1; z-index:5; --divider-hit-top:-9px; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row > .unscheduled-tray { grid-row:2; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row > .forever-board { grid-row:3; }
    .planner-utilities[data-view="timeline"] .forever-board > .forever-board-divider { display:none; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row[data-board-docked] .unscheduled-content { display:none; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row[data-board-docked] { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:9px auto; padding-top:0; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row[data-board-docked] > .planner-bottom-divider { grid-column:1 / -1; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row[data-board-docked] > .unscheduled-tray { grid-column:1; grid-row:2; padding:0 8px; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row[data-board-docked] > .forever-board { grid-column:2; grid-row:2; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row[data-board-docked] .unscheduled-tray > header { min-height:44px; padding:0; }
    .planner-utilities[data-view="timeline"] .planner-bottom-row[data-board-docked] .unscheduled-tray h2 { min-height:0; font-size:.9rem; line-height:1.3; }
}

/* Keep the phone calendar filter directly accessible in the topbar. */
@media (max-width:800px) {
    .planner-topbar .view-options-toggle,
    .planner-topbar .view-controls .completed-toggle,
    .view-options-backdrop { display:none; }
    .planner-topbar .view-options .view-controls {
        position:static; width:auto; max-width:none; padding:0; flex-wrap:nowrap;
        border:0; background:transparent; box-shadow:none;
        opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:none;
    }
    .planner-topbar .view-controls .calendar-filter { flex:0 1 auto; max-width:100%; }
    .planner-topbar .view-controls .calendar-filter-trigger {
        min-height:36px; max-width:min(100%,clamp(72px,24vw,110px)); padding:0 5px;
        gap:3px; font-size:.6875rem;
    }
    .planner-topbar .calendar-filter-trigger > svg:first-child { display:none; }
    .planner-topbar .calendar-filter-trigger > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* Cached views share the existing layout; hidden panels never participate in input or paint. */
.planner-view-panel { display:contents; }
.planner-view-panel[hidden] { display:none!important; }