@import './forever-canvas-cards.css';
@import './task-selection.css';
@import './task-media-resize.css';
@import './forever-canvas-stickers.css';
@import './forever-canvas-sections.css';
@import './forever-canvas-group-controls.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 './kawaii-theme.css';
@import './planner-theme-motion.css';
@import './task-preference-motion.css';
@import './planner-accents.css';
@import './custom-theme-controls.css';
@import './profile-streak.css';
@import './planner-mobile-toolbar.css';

:root, .planner-theme-preview {
    --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;
}

/* A contained built-in theme owns its palette and geometry independently of
   the account's current document theme. The real theme blocks below are shared. */
.planner-theme-preview {
    --custom-radius:7px;
    --task-completion-art:initial;
    --task-completion-ink:initial;
    --planner-action-fill:var(--accent);
    --planner-action-ink:#19141c;
    --planner-accent-ink:#000;
    --planner-menu-accent:var(--premium-glow-peach);
    --focus:var(--accent-deep);
    --success:initial;
}

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"],
.planner-theme-preview:is([data-theme="sakura"],[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; }
/* Kawaii replaces Harbor visually; retain the saved accent key. */
html[data-accent="harbor"] { --accent:#efa9c4; --accent-deep:#a54d76; --accent-soft:#f9dce9; }
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:#efa9c4; --accent-deep:color-mix(in srgb,var(--accent) 65%,white); --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent); }
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:#efa9c4; --accent-deep:color-mix(in srgb,var(--accent) 65%,white); --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent); }
    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"], .planner-theme-preview[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. */
@scope (html, .planner-theme-preview) to (.planner-theme-preview) {
:scope[data-theme="sakura"] .avatar, :scope[data-theme="sakura"] .topbar-avatar,
:scope[data-theme="sakura"] .settings-picture-preview, :scope[data-theme="sakura"] .auth-primary,
:scope[data-theme="sakura"] .month-cell.today .month-date-mobile > span:first-child { color:#19141c; }

:scope[data-theme="sakura"] .month-cell .inline-task-entry .inline-add:not(:disabled,[data-inline-add-hidden]),
:scope[data-theme="sakura"] :where(.month-add):is(.month-cell .inline-task-entry .inline-add, .month-add):not(:disabled),
:scope[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"], .planner-theme-preview[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);
}

@scope (html, .planner-theme-preview) to (.planner-theme-preview) {
:scope[data-theme="premium"] .avatar, :scope[data-theme="premium"] .topbar-avatar,
:scope[data-theme="premium"] .settings-picture-preview, :scope[data-theme="premium"] .auth-primary,
:scope[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));
}

@scope (html, .planner-theme-preview) to (.planner-theme-preview) {
:scope[data-theme="custom"] .avatar,:scope[data-theme="custom"] .topbar-avatar,:scope[data-theme="custom"] .settings-picture-preview,:scope[data-theme="custom"] .auth-primary,
:scope[data-theme="custom"] .month-cell.today .month-date-mobile > span:first-child { color:var(--custom-accent-ink,#000); }
:scope[data-theme="custom"] .planner-popup-dialog,:scope[data-theme="custom"] .task-details-dialog,:scope[data-theme="custom"] .note-dialog,:scope[data-theme="custom"] .event-dialog,
:scope[data-theme="custom"] .plan-dialog,:scope[data-theme="custom"] .quick-add-dialog { border-radius:var(--custom-radius,16px); }
:scope[data-theme="custom"] .secondary-button,:scope[data-theme="custom"] .primary-button,:scope[data-theme="custom"] .settings-input,:scope[data-theme="custom"] .search-box,:scope[data-theme="custom"] .profile-nav-link,
:scope[data-theme="custom"] .profile-premium-entry,:scope[data-theme="custom"] .notification-popover,:scope[data-theme="custom"] .task-menu,:scope[data-theme="custom"] .planner-select-menu { border-radius:var(--custom-radius,16px); }
:scope[data-theme="custom"] .topbar-actions > button,
:scope[data-theme="custom"] :where(.view-options-toggle):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block),
:scope[data-theme="custom"] :where(.quick-add-input):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block),
:scope[data-theme="custom"] :where(.planner-event):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block),
:scope[data-theme="custom"] :where(.month-event):is(.topbar-actions > button,.view-options-toggle,.quick-add-input,.planner-event,.month-event,.timeline-block),
:scope[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; }
:where(.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; }
/* Shared switch styling used by the theme editor and calendar write access. */
input.planner-switch { appearance:none; position:relative; box-sizing:border-box; flex-shrink:0; width:2.5rem; height:1.5rem; margin:0; border:1px solid color-mix(in srgb,var(--ink) 28%,var(--surface)); border-radius:999px; background:color-mix(in srgb,var(--surface) 85%,var(--ink)); cursor:pointer; transition:background-color 180ms ease,border-color 180ms ease; }
input.planner-switch::before { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--ink); box-shadow:0 1px 3px #0003; transition:transform 180ms ease,background-color 180ms ease; }
input.planner-switch:checked { background:var(--accent); border-color:var(--accent); }
input.planner-switch:checked::before { transform:translateX(16px); background:var(--custom-accent-ink,#fff); }
input.planner-switch:focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:2px; }
input.planner-switch:disabled { opacity:.5; cursor:default; }
@media (prefers-reduced-motion:reduce) { input.planner-switch,input.planner-switch::before { transition:none; } }
@media (forced-colors:active) { input.planner-switch { appearance:auto; width:1.1rem; height:1.1rem; } input.planner-switch::before { display:none; } }
.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, .board-color-popover .sr-only, .ai-task-chat .sr-only, .subscription-page .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:task-tool-popover-enter var(--dropdown-enter-duration) var(--dropdown-easing); }
.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] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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:task-tool-popover-exit var(--dropdown-exit-duration) var(--dropdown-easing) forwards; }
@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-tooltip {
    position:fixed;
    inset:auto;
    z-index:1000;
    width:max-content;
    max-width:min(320px,calc(100vw - 16px));
    box-sizing:border-box;
    margin:0;
    padding:4px 7px;
    border:0;
    border-radius:6px;
    background:var(--surface-raised,var(--surface,#fffdf8));
    color:var(--ink,#262823);
    box-shadow:0 2px 10px rgb(0 0 0 / .18);
    font:400 .75rem/1.35 var(--planner-font);
    text-align:start;
    white-space:pre-line;
    overflow-wrap:anywhere;
    pointer-events:auto;
}
.planner-tooltip[hidden] { display:none; }
.planner-tooltip::backdrop { background:transparent; pointer-events:none; }
@media (prefers-reduced-motion:no-preference) {
    .planner-tooltip:not([hidden]) { animation:planner-tooltip-enter 160ms cubic-bezier(.2,.8,.2,1) both; }
    @keyframes planner-tooltip-enter {
        from { opacity:0; transform:translateY(3px); }
        to { opacity:1; transform:translateY(0); }
    }
}
@media (forced-colors:active) {
    .planner-tooltip { background:Canvas; color:CanvasText; box-shadow: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; }
.comment-mention-list {
    box-sizing: border-box;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--line, #dcd8ce);
    border-radius: 11px;
    background: var(--surface, #fffdf8);
    color: var(--ink, #262823);
    box-shadow: 0 8px 28px rgb(0 0 0 / .2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    font: 500 .8125rem/1.4 var(--planner-font);
}
.comment-mention-list::backdrop { background: transparent; pointer-events: none; }
.inline-mention-highlight { position:absolute; z-index:0; box-sizing:border-box; overflow:hidden; pointer-events:none; white-space:pre-wrap; border-style:solid; border-color:transparent; }
.inline-mention-highlight-text { white-space:pre-wrap; overflow-wrap:inherit; }
.inline-mention-highlight-token { position:relative; color:transparent; }
.inline-mention-card { position:absolute; inset-inline:0; top:50%; transform:translateY(-50%); box-sizing:border-box; display:inline-flex; align-items:center; gap:3px; height:min(24px,1.4em); padding:0 2px; overflow:hidden; border:0; border-radius:5px; background:color-mix(in srgb,var(--accent,#c76345) 14%,var(--surface,#fffdf8)); color:var(--ink,#262823); line-height:1; }
.inline-mention-card-avatar { flex:none; display:grid; place-items:center; width:1.05em; height:1.05em; overflow:hidden; border:0; border-radius:50%; background:var(--accent,#c76345); color:var(--planner-accent-ink,#19141c); font-weight:600; }
.inline-mention-card-avatar:where(:not(:has(img))) { font-size:.65em; width:1.62em; height:1.62em; }
.inline-mention-card-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.inline-mention-card-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8em; }
.inline-mention-card-message { position:relative; top:auto; transform:none; max-width:100%; vertical-align:middle; }
.inline-mention-card-message.user-name-trigger { margin-inline:0; }
.inline-mention-card-message.user-name-trigger:focus-visible { outline:2px solid var(--focus,var(--accent))!important; outline-offset:2px!important; }
@media (prefers-reduced-motion:reduce) { .inline-mention-card-message.user-name-trigger { transition:none; } }
/* Preserve the ink used by the animated caret and letter effects. Only the
   native glyph fill is hidden beneath the inline mention paint. */
textarea[data-inline-mentions] { position:relative; z-index:1; -webkit-text-fill-color:transparent; caret-color:var(--planner-selection-accent,var(--accent,#c76345)); }
textarea[data-inline-mentions]::selection { -webkit-text-fill-color:currentColor; }
.comment-mention-option { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
.comment-mention-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent, #c76345) 13%, var(--surface, #fffdf8)); border-color: color-mix(in srgb, var(--accent, #c76345) 28%, transparent); }
.comment-mention-avatar.avatar { flex: none; width: 26px; height: 26px; font-size: .6875rem; }
.comment-mention-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
    .comment-mention-option { min-height: 44px; }
}
@media (forced-colors: active) {
    .comment-mention-list { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
    .comment-mention-option[aria-selected="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
}
.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; }
/* Center the capital-height text box at every avatar size and zoom level. */
.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; text-box-trim:trim-both; text-box-edge:cap alphabetic; }
.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:var(--hover-transition),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] *)):where(:not(:disabled)) { color:var(--hover-color); background:var(--hover-background); }
.planner-home-link:active { transform:scale(.98); }
.topbar-actions { display:flex; align-items:center; gap:7px; }
.planner-topbar:has(> .planner-temporary-status) { row-gap:4px; }
.planner-temporary-status { grid-column:1 / -1; min-width:0; max-width:100%; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.35; text-align:end; overflow-wrap:anywhere; }
@media (prefers-reduced-motion:no-preference) { .planner-temporary-status { animation:task-option-appear 160ms ease-out; } }
.topbar-account-controls { --topbar-account-control-size:38px; display:flex; align-items:center; gap:7px; }
.planner-topbar .calendar-chat-trigger { flex:none; display:grid; place-items:center; width:var(--topbar-account-control-size,38px); height:var(--topbar-account-control-size,38px); padding:0; border:1px solid var(--topbar-control-border); border-radius:10px; background:var(--topbar-control-fill,transparent); color:var(--ink); transition:var(--hover-transition); }
.planner-topbar .ai-chat-trigger { position:relative; display:flex; align-items:center; justify-content:center; font:700 1.25rem/1 var(--planner-font); letter-spacing:0; text-align:center; }
.planner-topbar .ai-chat-trigger > span:first-child { display:block; transform:translateY(-1px); }
.planner-topbar .calendar-chat-trigger[aria-expanded="false"]:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.planner-topbar .calendar-chat-trigger[aria-expanded="true"] { background:var(--open-background); color:var(--open-color); }
.planner-topbar .calendar-chat-trigger:focus-visible { outline:2px solid var(--focus,#225ecc); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .planner-topbar .calendar-chat-trigger { transition:none; } }
.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] *)):where(:not(:disabled)), .notification-trigger:hover:where(:not([data-touch-input] *)):where(:not(:disabled)), .view-controls button:hover:where(:not([data-touch-input] *)):where(:not(:disabled)), .view-options-toggle:hover:where(:not([data-touch-input] *)):where(:not(:disabled)), .quiet-button:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { border-color:var(--hover-border); color:var(--hover-color); background:var(--hover-background); }
.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; }
/* Animate the visible trigger directly so its color transition cannot restart
   while inheriting the heading's animated color. */
.range-title[data-today-return] { --today-return-orange:light-dark(#ad5b24,#ffb07a); }
.range-title[data-today-return] .week-picker-trigger { animation:today-return-a 3.6s ease-in-out; }
.range-title[data-today-return="b"] .week-picker-trigger { 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] .week-picker-trigger { animation:today-return-still-a 3s step-end; animation-duration:3s!important; }
    .range-title[data-today-return="b"] .week-picker-trigger { 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] .week-picker-trigger { animation:none!important; } }
/* Calendar views share the day-note header height. */
.planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]) { --planner-topbar:var(--planner-day-header-height,48px); }
.planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]) .planner-topbar { min-height:var(--planner-topbar); padding:1.5px 8px; }
.planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]) .range-title h1 { font-size:clamp(1rem,1.4vw,1.25rem); line-height:1.15; }
.planner-topbar .topbar-planning-controls > .range-title { gap:0; }
/* Reveal the date at its saved position once the week-number preference is known. */
.planner-topbar .range-title[data-settings-pending] { visibility:hidden; }
.range-week-number { height:0; min-height:0; overflow:hidden; color:var(--ink-soft,#66685f); font-size:.6875rem; line-height:1.2; opacity:0; transform:translateY(-2px); transition:height 180ms cubic-bezier(.2,.8,.2,1),opacity 140ms ease,transform 180ms cubic-bezier(.2,.8,.2,1); }
.range-week-number > span { display:block; padding-top:1px; }
.range-week-number[data-visible="true"] { height:calc(1.2em + 1px); opacity:1; transform:none; }
.planner-shell[data-planner-ready="false"] .range-week-number { transition:none; }
@media (prefers-reduced-motion:reduce) { .range-week-number { transition:none; transform:none; } }
.planner-topbar .topbar-planning-controls :is(.week-picker-trigger,.month-picker-trigger) { padding:0 4px; }
.planner-topbar .topbar-planning-controls .week-picker-trigger > span { position:relative; top:-.085em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Center the visible date text inside its highlight, retaining the line height. */
@supports (text-box-trim:trim-both) {
    .planner-topbar .topbar-planning-controls .week-picker-trigger > span { top:0; text-box-trim:trim-both; text-box-edge:cap alphabetic; padding-block:calc((1lh - 1cap) / 2); }
}
.topbar-actions { justify-content:flex-end; }
.topbar-actions kbd { margin-left:2px; }
.topbar-avatar, .profile-navigation .topbar-avatar { width:var(--topbar-account-control-size,38px); height:var(--topbar-account-control-size,38px); padding:0; border:0; color:#fff; font-size:.875rem; }
.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:var(--profile-hover-transition),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; }
.planner-header-chat { position:relative; overflow:visible; }
@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[aria-expanded="true"] { --profile-hover-shadow:0 0 0 1.5px var(--profile-hover-ring); }
.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:task-tool-popover-enter var(--dropdown-enter-duration) var(--dropdown-easing); }
.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 > .profile-identity-details { flex:1; }
.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 .profile-user-id { overflow-wrap:anywhere; user-select:text; }
.profile-uid-row { display:flex; align-items:center; gap:0; min-width:0; }
.profile-uid-copy { position:relative; display:inline-grid; place-items:center; flex:none; width:24px; height:28px; min-height:28px; margin:0; margin-inline-start:-5px; padding:4px; border:0; border-radius:6px; color:var(--ink-soft,#66685f); background:transparent; box-shadow:none; cursor:pointer; transition:var(--hover-transition); }
.profile-uid-copy-symbol, .profile-uid-check-symbol { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; transition:opacity 180ms ease,transform 260ms cubic-bezier(.22,1.2,.36,1); }
.profile-uid-copy-symbol { opacity:1; transform:scale(1) rotate(0); }
.profile-uid-check-symbol { opacity:0; transform:scale(.65) rotate(-12deg); }
.profile-uid-copy[data-copied="true"] .profile-uid-copy-symbol { opacity:0; transform:scale(.7) rotate(12deg); }
.profile-uid-copy[data-copied="true"] .profile-uid-check-symbol { opacity:1; transform:scale(1) rotate(0); }
.profile-uid-copy:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { color:var(--hover-color); background:var(--hover-background); }
.profile-uid-copy:focus-visible { color:var(--ink); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.profile-uid-copy:active { background:color-mix(in srgb,var(--accent) 22%,transparent); }
.profile-menu-identity .profile-uid-error { color:var(--ink-soft,#66685f); overflow-wrap:anywhere; }
.profile-menu-identity .avatar { flex:none; width:56px; height:56px; font-size:1.25rem; }
.profile-menu-identity .avatar:not(.user-profile-trigger) { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft,#f1d9cf) 76%,transparent); }
.profile-menu-identity .avatar:not(.user-profile-trigger):has(> .profile-picture) { box-shadow:none; }
.profile-identity-picture { position:relative; overflow:hidden; color:#fff; text-decoration:none; }
.profile-picture-edit-hint { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.42); opacity:0; transition:opacity 180ms cubic-bezier(.22,1,.36,1); }
.profile-picture-edit-hint > svg { transform:translateY(3px); transition:transform 220ms cubic-bezier(.22,1,.36,1); }
.profile-identity-picture:hover:where(:not([data-touch-input] *)) .profile-picture-edit-hint, .profile-identity-picture:focus-visible .profile-picture-edit-hint { opacity:1; }
.profile-identity-picture:hover:where(:not([data-touch-input] *)) .profile-picture-edit-hint > svg, .profile-identity-picture:focus-visible .profile-picture-edit-hint > svg { transform:translateY(0); }
.profile-identity-picture:active .profile-picture-edit-hint { opacity:1; background:rgba(0,0,0,.55); }
.profile-identity-name { display:flex; align-items:center; justify-self:start; gap:6px; min-width:0; width:max-content; max-width:100%; box-sizing:border-box; margin:-3px -6px; padding:3px 6px; border-radius:7px; color:inherit; text-decoration:none; transition:var(--hover-transition); }
.profile-identity-name strong { min-width:0; }
.profile-identity-name > svg { flex:none; color:var(--ink-soft,#66685f); opacity:0; transform:translateX(-3px); transition:opacity 180ms cubic-bezier(.22,1,.36,1),transform 220ms cubic-bezier(.22,1,.36,1); }
.profile-identity-name:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.profile-identity-name:focus-visible { background:color-mix(in srgb,var(--accent) 12%,transparent); }
.profile-identity-name:hover:where(:not([data-touch-input] *)) > svg, .profile-identity-name:focus-visible > svg { opacity:1; transform:translateX(0); }
.profile-identity-name:active { background:color-mix(in srgb,var(--accent) 20%,transparent); }
@media (prefers-reduced-motion:reduce) { .profile-picture-edit-hint, .profile-picture-edit-hint > svg, .profile-identity-name, .profile-identity-name > svg, .profile-uid-copy, .profile-uid-copy-symbol, .profile-uid-check-symbol { transition: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-primary:has(.profile-widget-add) .profile-search-link { grid-column:1 / -1; }
.profile-nav-calendars .profile-calendars-link { grid-column:1 / -1; }
.profile-menu .profile-center-today-toggle { display:flex; }
.profile-menu :is(.profile-center-today-lock,.profile-widget-lock) > :is(.planner-checkmark,.task-feature-lock) { flex:none; }

.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-uid-copy), .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:var(--hover-transition),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-uid-copy), .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:var(--hover-transition),box-shadow 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] *)):where(:not(:disabled)), .profile-menu button:where(:not(.profile-premium-menu-effects,.profile-uid-copy)):hover:where(:not([data-touch-input] *)):where(:not(:disabled)), .profile-menu summary:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.profile-navigation .profile-menu-link:not(.profile-premium-card):hover:where(:not([data-touch-input] *)):where(:not(:disabled)), .profile-navigation .profile-menu button:where(:not(.profile-premium-menu-effects,.profile-uid-copy)):hover:where(:not([data-touch-input] *)):where(:not(:disabled)), .profile-navigation .profile-menu summary:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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 { box-shadow:inset 0 1px 0 rgba(255,255,255,.12),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-highlights { display:grid; gap:4px; }
.profile-premium-highlights small { display:flex; align-items:flex-start; gap:6px; }
.profile-premium-highlights svg { flex:none; margin-top:1px; color:var(--premium-card-text); }
.profile-premium-copy .profile-premium-action { margin-top:3px; color:var(--premium-card-text); font-weight:700; }
.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-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:var(--hover-transition),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] *)):where(:not(:disabled)) { color:var(--hover-color); text-decoration-color:currentColor; background:var(--hover-background); }
.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-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] *)):where(:not(:disabled)) { background-color:var(--hover-background); border-color:var(--hover-border); color:var(--premium-card-text); }
    .profile-premium-card:hover:where(:not([data-touch-input] *)) .profile-premium-arrow { transform:none; }
    .profile-premium-card:hover:where(:not([data-touch-input] *)) + .profile-premium-menu-effects { transform:none; }
    .profile-premium-menu-effects:not(:disabled):hover:where(:not([data-touch-input] *)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); text-shadow:none; }
}
@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-uid-copy), .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:var(--hover-transition),box-shadow 150ms ease,transform 150ms ease; }
.notification-trigger:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.notification-trigger[aria-expanded="true"] { border-color:var(--open-border); background:var(--open-background); color:var(--open-color); box-shadow:none; }
.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:task-tool-popover-enter var(--dropdown-enter-duration) var(--dropdown-easing); }
.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:var(--hover-transition),transform 140ms ease; }
.notification-popover-header-actions button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.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; font-size:.68rem; }
.notification-popover-conflict .notification-conflict-action:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.notification-popover-conflict .notification-conflict-action:disabled { opacity:.5; cursor:default; }
.notification-popover-list { display:grid; gap:0; padding:10px; }
.notification-popover-entry { --notification-entry-gap:10px; min-width:0; display:grid; grid-template-rows:1fr; margin-top:var(--notification-entry-gap); transition:margin-top 280ms cubic-bezier(.2,.8,.2,1); animation:notification-entry-enter 280ms cubic-bezier(.2,.8,.2,1) backwards; }
.notification-popover-entry:first-child { --notification-entry-gap:0px; }
.notification-popover-entry-content { min-width:0; min-height:0; }
.notification-popover-entry[data-notification-reading] { grid-template-rows:1fr; height:var(--notification-read-height); overflow:clip; pointer-events:none; transition:none; animation:notification-entry-read 220ms cubic-bezier(.2,.8,.2,1) forwards; }
.notification-popover-item { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; border:0; border-radius:12px; background:color-mix(in srgb,var(--accent,#c76345) 6%,var(--surface,#fffdf8)); transition:var(--hover-transition); }
.notification-popover-item.is-unread { background:color-mix(in srgb,var(--accent,#c76345) 12%,var(--surface,#fffdf8)); }
.notification-popover-item[data-notification-id] { touch-action:pan-y pinch-zoom; translate:var(--notification-swipe-offset,0px) 0; transition:var(--hover-transition),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; display:grid; grid-template-rows:0fr; margin-top:0; opacity:0; visibility:hidden; transition:grid-template-rows 240ms ease,margin-top 240ms ease,opacity 180ms ease,visibility 240ms; }
.notification-snooze-container[data-open="true"] { grid-template-rows:1fr; margin-top:8px; opacity:1; visibility:visible; }
.notification-snooze-content { min-height:0; overflow:hidden; }
@starting-style { .notification-snooze-container[data-open="true"] { grid-template-rows:0fr; margin-top:0; opacity:0; } }
@media (prefers-reduced-motion:reduce) { .notification-snooze-container { transition:none; } }
@media (prefers-reduced-motion:reduce) { .notification-popover-item[data-notification-id] { transition:none; } }
/* Notification hover spans the complete row, including its trailing actions. */
.notification-popover-item:hover:where(:not([data-touch-input] *)):has(> .notification-popover-content:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.notification-popover-content { min-width:0; min-height:70px; padding:11px 5px 11px 12px; display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:start; border:0; border-radius:inherit; background:transparent; color:inherit; text-align:left; cursor:pointer; transition:var(--hover-transition); }
.notification-popover-content:disabled { cursor:default; opacity:.62; }
.notification-popover-content--invitation { position:relative; grid-template-columns:44px minmax(0,1fr); gap:8px; padding-left:7px; }
.notification-invitation-open { position:absolute; inset:0; width:100%; padding:0; border:0; border-radius:inherit; background:transparent; color:inherit; cursor:pointer; transition:var(--hover-transition); }
.notification-invitation-open:focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:2px; }
.notification-invitation-open:disabled { cursor:default; }
.notification-inviter-avatar { position:relative; z-index:1; align-self:start; }
.notification-inviter-name { position:relative; z-index:1; }
.notification-popover-kind { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--accent,#c76345); color:var(--planner-accent-ink,#19141c); }
.notification-popover-kind > svg, .notification-kind > svg { display:block; place-self:center; margin:0; }
.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-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 transparent; border-radius:10px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font-size:.72rem; line-height:1.35; white-space:normal; overflow-wrap:anywhere; cursor:pointer; transition:var(--hover-transition),transform 140ms ease; }
.notification-popover-actions button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.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-actions .notification-invitation-accept { border:0; border-radius:var(--pill-radius); background:var(--pill-fill); color:var(--pill-ink); transition:var(--hover-transition); }
.notification-popover-actions .notification-invitation-accept:active { transform:none; }
.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:var(--hover-transition),transform 140ms ease; }
.notification-popover-footer button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.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-popover-content--without-icon { grid-template-columns:minmax(0,1fr); }
.notification-navigation-embedded[data-inline-notifications] { height:auto; }
.notification-navigation-embedded[data-inline-notifications] .notification-popover { height:auto; display:block; }
.notification-navigation-embedded[data-inline-notifications] .notification-popover-body { overflow:visible; padding:0; scrollbar-gutter:auto; }
.task-reminder-notifications:has(.notification-popover-entry) { margin-bottom:12px; }
.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-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-entry-enter { from { grid-template-rows:0fr; margin-top:0; opacity:0; transform:translateY(-4px); overflow:clip; } to { grid-template-rows:1fr; margin-top:var(--notification-entry-gap); opacity:1; transform:none; overflow:clip; } }
@keyframes notification-entry-read { from { height:var(--notification-read-height); margin-top:var(--notification-read-margin); opacity:var(--notification-read-opacity); transform:var(--notification-read-transform); } to { height:0; margin-top:0; opacity:0; transform:translateY(-4px); } }
@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, .collection-week-search-row .calendar-filter-trigger { min-height:36px; padding:0 8px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; 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; }
/* Keep short names ahead of the fade without reserving space beside the chevron. */
.calendar-filter-trigger > .topbar-control-label { box-sizing:content-box; min-width:0; max-width:180px; padding-inline-end:6px; margin-inline-end:-6px; overflow:hidden; text-overflow:clip; white-space:nowrap; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent); }
.calendar-filter-trigger > .topbar-control-label:where(:dir(rtl)) { -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 6px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 6px),transparent); }
@media (forced-colors:active) { .calendar-filter-trigger > .topbar-control-label { -webkit-mask-image:none; mask-image:none; } }
.calendar-filter-trigger > :is(.icon,svg) { flex:none; }
.calendar-filter-trigger > .icon:last-child { transition:transform 140ms ease; }
.view-controls .calendar-filter-trigger[aria-expanded="true"] { border-color:var(--open-border); background:var(--open-background); color:var(--open-color); }
/* Share the short menu glide without scaling text or changing panel dimensions. */
.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-name:task-tool-popover-enter; animation-duration:var(--dropdown-enter-duration); animation-timing-function:var(--dropdown-easing); }
@keyframes calendar-filter-enter { from { opacity:0; } to { opacity:1; } }
.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-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:800px) {
    .view-options-toggle { width:36px; padding:0; display:inline-flex; }
    .view-options-toggle[aria-expanded="true"] { border-color:var(--open-border); background:var(--open-background); color:var(--open-color); }
    .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:none; translate:0 -4px; transform-origin:top left; transition:opacity var(--dropdown-exit-duration) var(--dropdown-easing),translate var(--dropdown-exit-duration) var(--dropdown-easing),visibility 0s linear var(--dropdown-exit-duration); }
    .view-options.is-open .view-controls { opacity:1; visibility:visible; pointer-events:auto; translate:0 0; transition-duration:var(--dropdown-enter-duration),var(--dropdown-enter-duration),0s; 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; animation:none; translate: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, .collection-week-search-row {
    --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:var(--line,#dcd8ce);
}
/* Center the letters rather than the font's extra ascent space. Keep room for
   accents and descenders inside the calendar label's clipping box. */
:is(.planner-topbar,.collection-week-search-row) .topbar-control-label {
    text-box:trim-both cap alphabetic;
    padding-block:.25em;
}
.planner-topbar .view-controls .calendar-filter-trigger,
.collection-week-search-row .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:400 .8125rem/1.5 var(--planner-font);
    transition:var(--hover-transition);
}
.planner-topbar .view-controls .calendar-filter-trigger:hover:where(:not([data-touch-input] *)):where(:not(:disabled)), .planner-topbar .view-options-toggle:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.planner-topbar .view-controls .calendar-filter-trigger[aria-expanded="true"], .planner-topbar .view-options-toggle[aria-expanded="true"] {
    border-color:var(--open-border);
    background:var(--open-background);
    color:var(--open-color);
}
.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 0 auto; min-width:0; display:flex; flex-wrap:nowrap; 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:var(--hover-transition),box-shadow 140ms ease; }
.planner-view-switch a:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { color:var(--hover-color); background:var(--hover-background); }
.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; }
/* Align the lock with adjacent controls across the switch padding and border. */
.planner-view-switch > a:has(> .task-feature-lock) { position:relative; }
.planner-view-switch > a > .task-feature-lock { bottom:-4px; }
/* Keep phone controls readable while the theme shows through the topbar. */
@media (max-width:800px) {
    .planner-topbar :is(.calendar-filter-trigger,.calendar-chat-trigger,.planner-view-switch) {
        --topbar-control-fill:var(--surface,#fffdf8);
        --topbar-control-hover:color-mix(in srgb,var(--ink,#262823) 10%,var(--surface,#fffdf8));
    }
}
/* 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; }
/* Balance the directional chevron strokes optically within their circles. */
.week-edge-previous .week-edge-navigation-icon > path { transform:translateX(-1px); }
.week-edge-next .week-edge-navigation-icon > path { transform:translateX(1px); }
.week-edge-navigation:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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 (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:has(.planner-view-switch) .topbar-account-controls { grid-column:3; grid-row:1; justify-self:end; gap:5px; }
    .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 { --segment-inline-padding:8px; }
    .planner-topbar .planner-view-switch a { padding-inline:8px; }
    .planner-topbar .planner-view-switch { max-width:calc(100% - 104px); }
    .planner-topbar:has(.planner-view-switch) .voice-capture-trigger { position:absolute; right:62px; bottom:7px; }
    .planner-topbar:has(.planner-view-switch) .planner-view-switch { max-width:calc(100% - 154px); margin-right:44px; }
}
@media (max-width:360px) {
    .planner-topbar:has(.planner-view-switch) { grid-template-columns:minmax(38px,1fr) minmax(0,auto) auto; column-gap:6px; padding-inline:8px; }
    .planner-topbar .range-title :is(.week-picker-trigger,.month-picker-trigger) { font-size:1rem; }
    .planner-topbar .planner-view-switch { --segment-inline-padding:6px; --segment-font-size:.75rem; }
    .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; } }
@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:var(--hover-transition);
}
.planner-topbar .completed-toggle:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.planner-topbar .task-display-controls .completed-toggle { min-height:20px; padding-inline:7px; border-radius:6px; }
@media (prefers-reduced-motion:reduce) { .planner-topbar :is(.calendar-filter-trigger,.view-options-toggle,.completed-toggle) { transition: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(200px,1fr) minmax(0,var(--period-navigation-width)) minmax(max-content,1fr); column-gap:8px; }
    .planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]) .range-title h1 { font-size:1.25rem; }
    .planner-topbar .view-controls { width:100%; gap:6px; }
    .planner-topbar .task-display-controls .completed-toggle { gap:5px; padding-inline:4px; font-size:.75rem; }
    .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; width:max-content; margin-right:140px; }
    .planner-topbar:has(.planner-view-switch) .profile-navigation { grid-column:3; grid-row:1; justify-self:end; }
    .planner-topbar:has(.planner-view-switch) .topbar-account-controls { 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 .week-edge-navigation-icon { 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-loading.has-visible-label { align-content:center; gap:16px; }
.app-loading-visible-label { max-width:100%; padding-inline:16px; color:var(--ink-soft,#66685f); font-size:.85rem; line-height:1.4; text-align:center; }
.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); }
.task-calendar-identity { display:inline-flex; align-items:center; gap:3px; min-width:0; max-width:100%; }
.task-calendar-identity-icon { flex:none; display:inline-flex; color:var(--calendar-color,currentColor); }
.task-calendar-identity-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (forced-colors:active) {
    .task-calendar-identity-icon { color:CanvasText; }
}
.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); }
/* The camera owns pinch zoom across the board and its detached select menus.
   Keep native single-finger scrolling available inside editors and toolbars. */
.forever-board, [data-canvas-zoom-surface] { touch-action:pan-x pan-y; }
/* Declare this before input starts, including on nested scrollports. Keep the
   specificity low so drag handles and one-axis scrollers retain their rules. */
:where(.forever-board) :where(*), :where([data-canvas-zoom-surface]) :where(*) { touch-action:pan-x pan-y; }
.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; }
.forever-board-divider::after { background:var(--accent,#c76345); opacity:1; }
/* 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; }
.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; }
.planner-someday-divider { display:none; }
@media (min-width:801px) {
    .planner-utilities .planner-bottom-row:not(:has(> .forever-board:is(.is-contained,.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; }
    @media (forced-colors:none) {
        .planner-bottom-row:not([data-board-docked]) > .planner-bottom-divider { border-top-color:var(--accent,#c76345); }
        @media (prefers-reduced-motion:no-preference) {
            .planner-bottom-row > .planner-bottom-divider { transition:border-top-color 180ms cubic-bezier(.2,.7,.2,1); }
        }
    }
}
.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] *)):where(:not(:disabled)) { color:var(--hover-color); background:var(--hover-background); }
.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 :is([data-board-editor-toolbar],.forever-board-text-toolbar,[data-table-toolbar],[data-canvas-shape-tools],[data-canvas-connector-tools]) { cursor:grab; }
.forever-board .canvas-toolbar-move-grip { position:relative; display:inline-block; flex:none; align-self:center; width:16px; min-width:16px; height:28px; margin-inline:1px; color:var(--ink-soft,var(--muted)); box-sizing:border-box; opacity:.7; cursor:grab; touch-action:none; user-select:none; }
.forever-board .canvas-toolbar-move-grip::before { content:""; position:absolute; left:calc(50% - 4px); top:calc(50% - 7px); width:2px; height:2px; border-radius:50%; background:currentColor; box-shadow:6px 0 currentColor,0 6px currentColor,6px 6px currentColor,0 12px currentColor,6px 12px currentColor; pointer-events:none; }
.forever-board .canvas-toolbar-move-grip:active { cursor:grabbing; }
@media(pointer:coarse) { .forever-board .canvas-toolbar-move-grip { width:44px; min-width:44px; height:44px; } }
.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; translate:0 -4px; transform-origin:top left; transition:opacity var(--dropdown-exit-duration) var(--dropdown-easing),translate var(--dropdown-exit-duration) var(--dropdown-easing),visibility 0s linear var(--dropdown-exit-duration); }
.forever-board-text-toolbar-anchor[data-visible="true"] > .forever-board-text-toolbar { opacity:1; visibility:visible; pointer-events:auto; translate:0 0; transition-duration:var(--dropdown-enter-duration),var(--dropdown-enter-duration),0s; transition-delay:0s; }
@media (prefers-reduced-motion:reduce) { .forever-board-text-toolbar { transition:none!important; translate: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(--hover-background); color:var(--hover-color); }
.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-locked { display:inline-flex; align-items:center; gap:5px; font-size:.8125rem; }
.board-color-locked[hidden], [data-canvas-paint][hidden], [data-table-cell-color-trigger][hidden] { display:none!important; }
.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:var(--hover-transition); }
.board-color-trigger:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); border-color:var(--hover-border); color:var(--hover-color); }
.board-color-trigger[aria-expanded="true"] { background:var(--open-background); color:var(--open-color); border-color:var(--open-border); }
.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:440px; 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:rgb(from var(--surface,#fffdf8) r g b / 1); 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:task-tool-popover-enter var(--dropdown-enter-duration) var(--dropdown-easing); }
.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-saved-colors { gap:4px; padding-top:6px; }
.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] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
/* 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; }
/* Keep this decorative marker painted long enough to fade out. */
.board-color-popover .board-color-wheel-handle[hidden] { display:block!important; opacity:0; }
@property --wheel-shade { syntax:"<number>"; inherits:false; initial-value:0; }
@media (prefers-reduced-motion:no-preference) {
    .board-color-wheel { transition:--wheel-shade 200ms ease; }
    .board-color-wheel-handle { transition:left 200ms cubic-bezier(.22,1,.36,1),top 200ms cubic-bezier(.22,1,.36,1),background-color 200ms ease,opacity 180ms ease-out; }
    .board-color-wheel[data-dragging], .board-color-wheel[data-dragging] .board-color-wheel-handle { transition:none; }
    .board-color-wheel[data-dragging] .board-color-wheel-handle { transition:opacity 180ms ease-out; }
}
.board-color-brightness { display:grid; gap:0; }
.board-color-brightness + .board-color-brightness { margin-top:-6px; }
.board-color-brightness > :is(label,.board-color-range-heading) { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink-soft,#66685f); font-size:.8125rem; }
.board-color-brightness > :is(label,.board-color-range-heading) > span:last-child { font-variant-numeric:tabular-nums; }
/* Native sliders retain keyboard, touch and assistive-technology support. */
/* Tooltip tracking does not inherit through every animated digit and sibling. */
@property --slider-readout-x { syntax:"<length>"; inherits:false; initial-value:34px; }
@property --slider-width { syntax:"<length>"; inherits:false; initial-value:68px; }
.planner-setting-control { display:block; position:relative; min-width:0; }
.planner-setting-readout { position:absolute; z-index:3; bottom:calc(100% + 4px); left:0; display:flex; align-items:center; justify-content: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; will-change:transform; }
.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:28px; 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:4px; 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:4px; border:0; border-radius:999px; background:var(--slider-rail); }
.planner-setting-slider::-moz-range-progress { height:4px; border-radius:999px; background:var(--accent); }
.planner-setting-slider::-webkit-slider-thumb { box-sizing:border-box; appearance:none; -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border:3px 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:20px; height:20px; border:3px 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 { background:var(--accent); border-color:var(--accent); }
.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 { background:var(--accent); border-color:var(--accent); }
.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; }
@media (pointer:coarse) { .planner-setting-slider { height:36px; } }
.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:8px; padding:0; }
.board-color-preview { flex:none; box-sizing:border-box; width:24px; height:24px; border:1px solid color-mix(in srgb,var(--ink,#262823) 16%,transparent); border-radius:6px; }
.board-color-hex-row label { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:1; min-width:0; color:var(--ink-soft,#66685f); font-size:.8125rem; }
.board-color-hex-row input { display:block; flex:none; box-sizing:border-box; width:88px; height:30px; min-height:0; padding:4px 8px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); font:500 .875rem/1.4 var(--planner-font); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.board-color-hex-row input[data-pointer-focus]:focus { outline:none!important; box-shadow:none!important; border-color:transparent; }
.board-color-hex-field { position:relative; display:block; flex:none; }
.board-color-hex-field input { color:transparent; caret-color:var(--planner-selection-accent,var(--accent,#c76345)); }
.board-color-hex-text { position:absolute; inset:0; display:flex; align-items:center; box-sizing:border-box; padding:5px 9px; color:var(--ink,#262823); font:500 .875rem/1.4 var(--planner-font); letter-spacing:.04em; font-variant-numeric:tabular-nums; pointer-events:none; opacity:0; }
.board-color-hex-text[data-visible="true"] { opacity:1; }
.board-color-hex-field:has(input:focus) input { color:var(--ink,#262823); }
.board-color-hex-field:has(input:focus) .board-color-hex-text { visibility:hidden; }
@media (prefers-reduced-motion:no-preference) { .board-color-hex-text { transition:opacity 180ms ease-out; } }
.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-presets .board-color-none::before { border-color:var(--ink-soft,#66685f); background:linear-gradient(135deg,transparent 44%,var(--ink-soft,#66685f) 45%,var(--ink-soft,#66685f) 55%,transparent 56%); }
.board-color-presets .board-color-preset { border-color:transparent!important; background:var(--swatch-hover-fill,transparent)!important; }
.board-color-presets .board-color-preset::after { content:""; position:absolute; inset:50% auto auto 50%; width:28px; height:28px; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--swatch-color) 55%,transparent); border-radius:50%; transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.board-color-presets .board-color-surface::before, .board-color-presets .board-color-surface::after { border-color:color-mix(in srgb,var(--ink-soft,#66685f) 45%,transparent); }
.board-color-presets .board-color-preset[aria-pressed="true"]::after { opacity:1; }
.board-color-presets .board-color-preset:hover:where(:not([data-touch-input] *)):not(:disabled) { --swatch-hover-fill:var(--hover-background); }
@media (prefers-reduced-motion:no-preference) {
    .board-color-presets .board-color-preset { transition:var(--hover-transition); }
    .board-color-presets .board-color-preset::before { transition:transform 150ms cubic-bezier(.22,1,.36,1),box-shadow 150ms ease; }
    .board-color-presets .board-color-preset::after { transition:opacity 150ms ease; }
    .board-color-presets .board-color-preset[aria-pressed="true"]::before { animation:board-color-selected 220ms cubic-bezier(.22,1,.36,1); }
    @keyframes board-color-selected { 0% { scale:1; } 45% { scale:1.25; } 100% { scale:1; } }
}
.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] *)):where(:not(:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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:4px; margin-block:-4px; padding-top:6px; 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 6px; }
.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:6px; 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:var(--hover-transition); }
.board-color-save:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.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:var(--hover-transition); }
.board-save-card-style[hidden] { display:none; }
.board-save-card-style:hover:where(:not([data-touch-input] *)):not(:has(input:disabled)) { color:var(--hover-color); background:var(--hover-background); }
.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:var(--hover-transition),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); opacity:0; cursor:pointer; transition:var(--hover-transition),opacity 120ms ease,visibility 120ms; }
.board-saved-color-remove > svg { display:block; width:16px; height:16px; pointer-events:none; }
.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-list .board-saved-color-remove[aria-hidden="true"] { opacity:0; visibility:hidden; pointer-events:none; }
.board-saved-color-remove:hover:where(:not([data-touch-input] *)):not(:disabled) { color:var(--danger,#b7473b); border-color:var(--hover-border); background:var(--hover-background); }
.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; }
/* The resize divider supplies the top line; focus marks the other canvas edges. */
.forever-board-canvas:focus-visible { outline:0; outline-offset:-1px; box-shadow:inset 1px 0 0 var(--line,#dcd8ce),inset -1px 0 0 var(--line,#dcd8ce),inset 0 -1px 0 var(--line,#dcd8ce); }
.forever-board-canvas[data-tool="hand"] { cursor:grab; }
.forever-board-canvas:where([data-tool]:not([data-tool="select"]):not([data-tool="hand"])) { cursor:crosshair; }
.forever-board-canvas:is([data-tool="text"],[data-tool="sticky"]) { cursor:text; }
.forever-board-canvas[data-tool]:not([data-tool="select"]):not([data-tool="hand"]) [data-canvas-placement-cursor="crosshair"] { cursor:crosshair!important; }
.forever-board-canvas[data-tool]:not([data-tool="select"]):not([data-tool="hand"]) [data-canvas-placement-cursor="text"] { cursor:text!important; }
.forever-board-canvas:is([data-tool="table"],[data-tool="collection"],[data-tool="kanban"]) { cursor:crosshair; }
.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) {
    /* Keep camera gestures, glides and zoom eases on the same raster path. Promoting
       the whole world only while fingers are down rebuilds its preview layers at
       each press/release and can briefly blank the Android WebView's canvas. */
    .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; }
}
.forever-board-svg { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
.forever-board-canvas[data-tool="select"] [data-connector-label] { cursor:grab; }
.forever-board-item { position:absolute; user-select:none; -webkit-user-select:none; }
:is(.forever-board-item,.forever-canvas-task,.forever-canvas-collection).is-placing { animation:canvas-placement-settle 160ms ease-out; }
@keyframes canvas-placement-settle {
    from { opacity:.65; }
    to { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
    :is(.forever-board-item,.forever-canvas-task,.forever-canvas-collection).is-placing { animation: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-text.is-workspace-card:not(.forever-board-sticky) {
    border-color:color-mix(in srgb,var(--ink,#262823) calc(10% * var(--card-paper-opacity,1)),transparent);
    box-shadow:0 2px 5px rgb(30 27 20 / calc(.04 * var(--card-paper-opacity,1)));
}
.forever-board-sticky {
    padding:26px 18px 22px;
    border-radius:2px 2px 22px 2px;
    background:linear-gradient(160deg,rgba(255,255,255,calc(.16 * var(--sticky-paper-opacity,1))),transparent 45%,rgba(0,0,0,calc(.025 * var(--sticky-paper-opacity,1)))),var(--sticky-paper,#f4dc83);
    box-shadow:0 2px 3px rgba(0,0,0,calc(.12 * var(--sticky-paper-opacity,1))),2px 9px 16px -5px rgba(0,0,0,calc(.25 * var(--sticky-paper-opacity,1))),inset 0 1px rgba(255,255,255,calc(.18 * var(--sticky-paper-opacity,1)));
    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,calc(.09 * var(--sticky-paper-opacity,1))),rgba(255,255,255,calc(.38 * var(--sticky-paper-opacity,1))) 52%,rgba(255,255,255,calc(.12 * var(--sticky-paper-opacity,1)))),var(--sticky-paper,#f4dc83);
    box-shadow:-2px -2px 3px rgba(0,0,0,calc(.08 * var(--sticky-paper-opacity,1)));
}
.forever-board-sticky.is-selected, .forever-board-sticky.is-editing { box-shadow:0 3px 5px rgba(0,0,0,calc(.13 * var(--sticky-paper-opacity,1))),3px 12px 22px -5px rgba(0,0,0,calc(.3 * var(--sticky-paper-opacity,1))),inset 0 1px rgba(255,255,255,calc(.2 * var(--sticky-paper-opacity,1))); }
.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 { --selection-edge-hit:10px; position:absolute; pointer-events:none; border:1px solid var(--focus,#66685f); }
.forever-board-selection-edge { position:absolute; pointer-events:auto; touch-action:none; cursor:grab; }
.forever-board-selection-edge:is([data-board-selection-edge="n"],[data-board-selection-edge="s"]) { left:0; right:0; height:var(--selection-edge-hit); }
.forever-board-selection-edge[data-board-selection-edge="n"] { top:calc(var(--selection-edge-inset-y) - var(--selection-edge-hit)); }
.forever-board-selection-edge[data-board-selection-edge="s"] { bottom:calc(var(--selection-edge-inset-y) - var(--selection-edge-hit)); }
.forever-board-selection-edge:is([data-board-selection-edge="e"],[data-board-selection-edge="w"]) { top:0; bottom:0; width:var(--selection-edge-hit); }
.forever-board-selection-edge[data-board-selection-edge="e"] { right:calc(var(--selection-edge-inset-x) - var(--selection-edge-hit)); }
.forever-board-selection-edge[data-board-selection-edge="w"] { left:calc(var(--selection-edge-inset-x) - var(--selection-edge-hit)); }
@media (max-width:600px), (pointer:coarse) { .forever-board-selection-box { --selection-edge-hit:20px; } }
/* Selection lives above the transformed world; retire its chrome while a card dialog is open. */
.forever-board-canvas:has(.forever-canvas-collection[data-collection-dialog-open="true"]) > :is(.forever-board-selection,.canvas-selection-exit) { display:none; }
.canvas-selection-exit, .canvas-selection-exit * { pointer-events:none!important; }
.canvas-decoration-rotation-handle { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--accent-deep,var(--accent)); cursor:grab; touch-action:none; }
.canvas-decoration-rotation-handle:active { cursor:grabbing; }
.canvas-decoration-rotation-handle:focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:1px; }
.canvas-decoration-rotation-handle::after { content:""; position:absolute; left:calc(50% - .5px); top:34px; width:1px; height:20px; background:var(--accent); pointer-events:none; }
/* Aim at the selection corner from the icon center: 72px left and 32px down. */
.canvas-decoration-rotation-handle.is-object-rotation::after { top:50%; height:78.791px; transform:rotate(66.038deg); transform-origin:50% 0; }
/* Flip controls raise the rotation handle to 48px above the selection. */
.canvas-decoration-rotation-handle.is-object-rotation.has-flip-control::after { height:86.533px; transform:rotate(56.31deg); }
.canvas-decoration-rotation-handle.is-toolbar-positioned::after { display:none; }
.canvas-decoration-rotation-handle.is-connector-rotation::after { display:none; }
.canvas-connector-rotation-stem { position:absolute; top:0; left:0; width:1px; height:1px; overflow:visible; pointer-events:none; color:var(--accent-deep,var(--accent)); opacity:.8; }
.canvas-decoration-rotation-icon { position:relative; z-index:1; display:grid; place-items:center; width:24px; height:24px; border:1px solid currentColor; border-radius:50%; background:var(--paper,#fffdf8); font:20px/1 sans-serif; pointer-events:none; }
.canvas-flip-handle { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--accent-deep,var(--accent)); cursor:pointer; touch-action:manipulation; }
.canvas-flip-handle > svg { box-sizing:border-box; width:24px; height:24px; padding:3px; border:1px solid currentColor; border-radius:50%; background:var(--paper,#fffdf8); pointer-events:none; }
.canvas-flip-handle[aria-pressed="true"] > svg { background:color-mix(in srgb,var(--accent) 20%,var(--paper,#fffdf8)); }
.canvas-flip-handle:focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:1px; }
.canvas-rotation-controls { --drawing-value-width:88px; position:absolute; top:0; left:0; width:88px; box-sizing:border-box; z-index:7; padding:0; pointer-events:auto; }
.canvas-rotation-controls .slider-number-field { width:88px; min-width:0; }
.canvas-rotation-controls > label { display:flex; align-items:center; margin:0; white-space:nowrap; }
.canvas-rotation-controls .board-percent-field input { text-align:left; box-sizing:border-box; }
/* Keep placement on the outer control; revealing the field never moves canvas chrome. */
@media (min-width:801px) and (hover:hover) and (pointer:fine) {
    .canvas-rotation-controls:where(:not([data-touch-input] *)) { --rotation-field-duration:160ms; pointer-events:none; }
    .canvas-rotation-controls:where(:not([data-touch-input] *)) > label { opacity:0; visibility:hidden; translate:0 4px; pointer-events:auto; transition:opacity var(--rotation-field-duration) ease 100ms,translate var(--rotation-field-duration) ease 100ms,visibility 0s calc(var(--rotation-field-duration) + 100ms); }
    .forever-board-selection:has(> .canvas-decoration-rotation-handle:hover:where(:not([data-touch-input] *)),> .canvas-decoration-rotation-handle:focus-visible) > .canvas-rotation-controls > label,
    .canvas-rotation-controls:is(:hover:where(:not([data-touch-input] *)),:focus-within) > label { opacity:1; visibility:visible; translate:0 0; transition-delay:0s; }
}
@media (min-width:801px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce) {
    .canvas-rotation-controls:where(:not([data-touch-input] *)) { --rotation-field-duration:0ms; }
    .canvas-rotation-controls:where(:not([data-touch-input] *)) > label { translate:none; }
}
@media (pointer:coarse), (max-width:640px) { .canvas-rotation-controls input { min-height:44px; } }
.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-connector-handle, .forever-board-route-handle, .forever-board-connect-handle { box-sizing:border-box; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--accent,#e57918); touch-action:none; }
.forever-board-connector-handle { z-index:1; }
.forever-board-handle.forever-board-connector-handle::before, .forever-board-route-handle::before, .forever-board-connect-handle::before { content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; box-sizing:border-box; border:1px solid var(--accent,#e57918); border-radius:50%; background:var(--paper,#fffdf8); transform:translate(-50%,-50%); pointer-events:none; }
.forever-board-connector-handle[data-attached="true"]::before { background:var(--accent,#e57918); border-color:var(--paper,#fffdf8); box-shadow:0 0 0 1px var(--accent,#e57918); }
.forever-board-route-handle[data-route-axis="y"]::before { width:16px; height:6px; border-radius:3px; }
.forever-board-route-handle[data-route-axis="x"]::before { width:6px; height:16px; border-radius:3px; }
.forever-board-route-handle[data-route-kind="knot"]::before { width:12px; height:12px; background:var(--accent,#e57918); border-color:var(--paper,#fffdf8); box-shadow:0 0 0 1px var(--accent,#e57918); }
.forever-board-route-guide { position:absolute; left:0; top:0; border-top:2px dashed color-mix(in srgb,var(--accent,#e57918) 85%,var(--ink,#252525)); opacity:.9; transform-origin:0 0; pointer-events:none; }
.forever-board-connect-handle { width:20px; height:20px; min-width:0; min-height:0; cursor:crosshair; opacity:1; visibility:visible; transition:opacity 160ms ease,visibility 0s; }
.forever-board-connect-handle::before { transition:transform 160ms cubic-bezier(.2,.7,.2,1); }
.forever-board-connect-handle[data-connection-ready="false"] { opacity:0; visibility:hidden; transition:opacity 160ms ease,visibility 0s 160ms; }
.forever-board-connect-handle[data-connection-ready="false"]::before { transform:translate(-50%,-50%) scale(.5); }
@starting-style { .forever-board-connect-handle { opacity:0; } .forever-board-connect-handle::before { transform:translate(-50%,-50%) scale(.5); } }
@media (prefers-reduced-motion:reduce) { .forever-board-connect-handle, .forever-board-connect-handle::before { transition:none; } }
.forever-board-connect-handle:focus-visible { outline:2px solid var(--accent,#e57918); outline-offset:0; }
.forever-board .forever-board-route-handle:is(:focus,:focus-visible) { outline:none; box-shadow:none; }
.forever-board-route-handle::before { transition:transform 160ms cubic-bezier(.2,.7,.2,1),background-color 160ms ease,box-shadow 160ms ease; }
.forever-board-route-handle:hover:where(:not([data-touch-input] *))::before { transform:translate(-50%,-50%) scale(1.35); background:color-mix(in srgb,var(--accent,#e57918) 30%,var(--paper,#fffdf8)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#e57918) 12%,transparent); }
.forever-board-route-handle:focus-visible::before { background:var(--accent,#e57918); }
.forever-board-route-handle:is(:active,[data-route-pressed="true"])::before { transform:translate(-50%,-50%) scale(.85); background:var(--accent,#e57918); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent,#e57918) 18%,transparent); transition-duration:100ms; }
@media (prefers-reduced-motion:reduce) { .forever-board-route-handle::before { transition:none; } }
.forever-board-connection-preview { overflow:visible; pointer-events:none; }
.forever-board-connection-choice { position:fixed; z-index:24; box-sizing:border-box; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:0 8px 26px rgb(0 0 0 / .16); }
.forever-board-connection-choice select { box-sizing:border-box; width:100%; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); font:inherit; font-size:16px; }
.forever-board-connector-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.forever-board-connector-actions button { min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); font:inherit; font-size:.875rem; cursor:pointer; }
.forever-board-connector-actions button:disabled { opacity:.45; cursor:default; }
.forever-board-connection-choice :is(button,select):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.forever-board-connector-label-overlay { position:fixed; inset:0; z-index:24; pointer-events:none; }
.forever-board-connector-label-editor { position:fixed; z-index:24; box-sizing:border-box; padding:0; overflow:visible; color:var(--ink); transform-origin:center; pointer-events:auto; }
.forever-board .canvas-connector-label-input { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:0; max-width:none; max-height:none; margin:0; padding:4px 8px; overflow:hidden; appearance:none; border:0; border-radius:4px; background:var(--paper); color:var(--ink); font:400 14px/1.285714 var(--planner-font,sans-serif); letter-spacing:normal; text-indent:0; text-transform:none; text-align:center; white-space:pre-wrap; overflow-wrap:anywhere; resize:none; }
.forever-board .canvas-connector-label-preview { background:transparent; pointer-events:none; user-select:none; }
.forever-board-connector-label-editor .canvas-connector-label-input::placeholder { color:var(--ink-soft); opacity:.7; }
.forever-board-connector-label-editor .canvas-connector-label-input:focus-visible { outline:1px solid var(--focus,var(--accent)); outline-offset:0; }
.canvas-connector-label-tools { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); display:grid; gap:10px; width:232px; max-width:calc(100vw - 24px); padding:10px 12px; box-sizing:border-box; border:1px solid var(--line); border-radius:var(--custom-radius,10px); background:var(--surface,#fffdf8); color:var(--ink); box-shadow:0 6px 20px rgb(0 0 0 / .18); font:400 12px/1.4 var(--planner-font,sans-serif); }
.canvas-connector-label-setting { display:grid; gap:0; min-width:0; margin:0; }
.canvas-connector-label-setting-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.canvas-connector-label-setting-heading output { color:var(--ink-soft); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.canvas-connector-label-colors { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; border-top:1px solid var(--line); }
.canvas-connector-label-colors .board-color-trigger { position:relative; justify-content:center; width:36px; height:36px; min-width:36px; min-height:36px; padding:8px; gap:0; font:inherit!important; }
.canvas-connector-label-colors .forever-board-swatch { flex:none; width:18px; height:18px; }
.canvas-connector-label-colors .task-feature-lock > svg { width:10px; height:10px; }
@media (pointer:coarse), (max-width:800px) { .canvas-connector-label-colors .board-color-trigger { width:44px; height:44px; min-width:44px; min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .forever-board-connector-label-editor .canvas-connector-label-input { transition:none; } }
.forever-board-marquee, .forever-board-marquee-exit { 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; }
/* 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(.is-expanded,[data-board-animating]) { 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)); }
.forever-board-placeholder { visibility:hidden; pointer-events:none; }
.forever-board[data-board-animating] { will-change:transform,clip-path; }
.forever-board[data-board-animating] :is(.forever-board-canvas,.forever-board-world) { will-change:transform; }
.unscheduled-tray.board-someday-placeholder { visibility:hidden; pointer-events:none; }
.unscheduled-tray[data-board-fullscreen-sibling] { position:fixed; z-index:192; inset:auto; left:var(--board-someday-left); top:var(--board-someday-top); width:var(--board-someday-width); height:var(--board-someday-height); margin:0; transform:translateX(var(--board-someday-offset,0px)); opacity:0; pointer-events:none; }
.unscheduled-tray[data-board-fullscreen-sibling]:not([data-board-fullscreen-animating]) { visibility:hidden; }
.unscheduled-tray[data-board-fullscreen-animating] { will-change:transform,opacity; }
@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(.is-expanded,[data-board-animating]) .forever-board-divider { display:none; }
html:has(.forever-board:is(.is-expanded,[data-board-animating])), body:has(.forever-board:is(.is-expanded,[data-board-animating])) { overflow:hidden; }
html:has(.forever-board:is(.is-expanded,[data-board-animating])) { padding-right:var(--board-scrollbar-gap,0px); }
@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; translate:0 -4px; transform-origin:top right; transition:opacity var(--dropdown-exit-duration) var(--dropdown-easing),translate var(--dropdown-exit-duration) var(--dropdown-easing),visibility 0s linear var(--dropdown-exit-duration); }
    .forever-board.tools-open .forever-board-more-panel { opacity:1; visibility:visible; pointer-events:auto; translate:0 0; transition-duration:var(--dropdown-enter-duration),var(--dropdown-enter-duration),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; translate:0 -4px; transition-duration:var(--dropdown-exit-duration),var(--dropdown-exit-duration),0s; transition-delay:0s,0s,var(--dropdown-exit-duration); }
    .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, .planner-utilities[data-someday-resizing] > .planner-someday-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 { 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,.planner-snackbar) { display:none; }
/* 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; } }
/* Keep the shared row in place while the selected calendar canvas changes. */
.planner-bottom-row:is([data-board-docked],[data-board-resizing],[data-board-settling]) { min-height:0; }
@media (min-width:801px) {
    .planner-bottom-row > .forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) { height:var(--planner-topbar-height,var(--planner-topbar,48px)); }
    .planner-bottom-row > .forever-workspace-board[data-board-docked]:not([data-board-docking]):not(.is-expanded):not(.is-contained) > .forever-board-divider { height:6px; }
    .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) {
    .planner-bottom-row[data-board-layout] { height:auto!important; }
    .planner-bottom-row[data-board-context-pending] > .forever-board[hidden] { display:block; visibility:hidden; }
    .forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) { height:72px; }
    .forever-workspace-board[data-board-docked]:not(.is-expanded):not(.is-contained) { height:56px; }
    .planner-utilities .planner-bottom-row > .forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) { height:36px; }
    .planner-utilities .planner-bottom-row > .forever-board[data-board-docked]:not([data-board-docking]):not(.is-expanded):not(.is-contained) .forever-canvas-header { min-height:36px; column-gap:8px; }
    .planner-utilities .planner-bottom-row > .forever-board[data-board-docked]:not([data-board-docking]):not(.is-expanded):not(.is-contained) .forever-canvas-actions { margin-inline:0; }
    .planner-utilities .planner-bottom-row > .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,.timeline-view) .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, .month-weekdays 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, .month-weekdays .day-label::after { font:500 1.625rem/1.15 var(--planner-heading); }
.planner-shell { --planner-day-header-height:48px; --period-navigation-width:440px; }
:is(.week-view,.month-mobile-agenda,.timeline-view) .day-header { min-height:var(--planner-day-header-height,48px); padding:3px; gap:0; }
:is(.week-view,.month-mobile-agenda,.timeline-view,.month-weekdays) .day-label { flex:none; min-width:0; min-height:36px; padding:2px 4px; }
/* Equal offsets preserve the weekday and date's shared text baseline. */
:is(.week-view,.month-mobile-agenda,.timeline-view,.month-weekdays) .day-label > :is(span,strong) { position:relative; top:-.0625rem; }
.day-column.is-today .day-header { border-bottom-color:var(--accent,#c76345); }
.day-label[aria-current="date"] { background:var(--accent,#c76345); color:var(--planner-accent-ink,#000); box-shadow:none; }
.day-label[aria-current="date"] > 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-radius:var(--custom-radius,7px); background:var(--surface,#fffdf8); cursor:default; transition:var(--hover-transition); }
/* Week rows lay out independently; keep decorative overflow and natural height. */
.calendar-day-content .day-tasks > .planner-task[data-task-id] { contain:layout style; }
.planner-task[data-task-deleting] { pointer-events:none; }
.planner-task.inline-task-draft { background:color-mix(in srgb,var(--ink,#262823) 4%,var(--surface,#fffdf8)); }
/* 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; }
.planner-task .task-content { transition:opacity 220ms cubic-bezier(.2,.65,.3,1); }
.task-check { --task-check-hover-color:var(--task-complete,#278653); 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,background-color 180ms ease,color 180ms ease; }
.task-check:hover:where(:not([data-touch-input] *)) { border-color:var(--task-check-hover-color); background:color-mix(in srgb,var(--task-check-hover-color) 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; transition:inherit; }
.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); }
:is(.planner-task,.task-details-title-row).is-colored:not(.is-complete) .task-check:hover:where(:not([data-touch-input] *)) { border-color:var(--task-check-hover-color); }
.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; }
@scope (html, .planner-theme-preview) to (.planner-theme-preview) {
/* A static emblem serves the native feedback, burst and settled checkbox. */
:scope[data-theme="premium"] .task-check { --task-check-hover-color:var(--task-completion-highlight); }
:scope[data-theme="sakura"], .themes-completion-preview[data-completion-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; }
:scope[data-theme="premium"], .themes-completion-preview[data-completion-theme="premium"] { --task-completion-highlight:#ffc574; --task-completion-art:radial-gradient(circle closest-side,#ffe0a3 0%,var(--task-completion-highlight) 38%,#ffab55 56%,#fd9444 70%,#ec6a2d 88%,transparent 100%); --task-completion-ink:#371c11; }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .is-complete .task-check { border-color:transparent; background:transparent; color:var(--task-completion-ink); }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) :is(.planner-task,.task-details-title-row).is-complete .task-check-ring { position:relative; display:grid; place-items:center; width:var(--task-check-size,24px); height:var(--task-check-size,24px); border:0; background:transparent; }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .month-grid .planner-task.is-complete .task-check-ring { width:20px; height:20px; }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[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; }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .is-complete .task-check svg { position:relative; color:var(--task-completion-ink); }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .task-completion-feedback.is-complete { border:0; background:var(--task-completion-art) center/contain no-repeat; }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .task-completion-feedback.is-complete svg { width:58%; height:58%; stroke:var(--task-completion-ink); }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status { border:0; background:var(--task-completion-art) center/contain no-repeat; }
:scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[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 { border:0; border-radius:0; background:currentColor; mask:url("images/sakura-completion-ring.svg") center/contain no-repeat; }
.task-completion-burst--premium .task-completion-ring { border-width:2px; }
.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-particle-track { position:absolute; left:0; top:0; }
.task-completion-petal { position:absolute; left:-7px; top:-9px; width:14px; height:18px; fill:currentColor; }
.task-completion-solar-ray { position:absolute; left:-13px; top:-1.25px; width:26px; height:2.5px; border-radius:999px; background:linear-gradient(90deg,transparent,currentColor 30%,currentColor 80%,transparent); }
:scope[data-theme="kawaii"], .themes-completion-preview[data-completion-theme="kawaii"] { --task-completion-art:url("images/kawaii-completion-heart.svg"); }
.task-completion-burst--kawaii .task-completion-ring { border:0; border-radius:0; background:currentColor; mask:url("images/kawaii-completion-ring.svg") center/contain no-repeat; }
.task-completion-burst--kawaii .task-completion-badge { border-radius:0; background:var(--task-completion-art) center/contain no-repeat; box-shadow:none; }
.task-completion-burst--kawaii .task-completion-badge svg { stroke:#563348; }
.task-completion-kawaii-particle { position:absolute; left:-9px; top:-9px; width:18px; height:18px; fill:currentColor; stroke:#cc8dab; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.task-completion-kawaii-sparkle { left:-7px; top:-7px; width:14px; height:14px; stroke:#ba9ccc; stroke-width:1.5; }
/* The enabled Sakura effect starts as the same flower, drawn as an outline. */
:scope[data-theme="sakura"]:not([data-sakura-completion="false"]) :is(.planner-task,.task-details-title-row):not(.is-complete) .task-check {
    --task-check-hover-color:var(--planner-selection-accent,var(--accent,#d9739e));
    border-color:transparent; background:transparent; color:var(--ink-soft,#66685f);
}
:scope[data-theme="sakura"]:not([data-sakura-completion="false"]) :is(.planner-task,.task-details-title-row):not(.is-complete) .task-check-ring {
    position:relative; display:grid; place-items:center; width:var(--task-check-size,24px); height:var(--task-check-size,24px); border:0; border-radius:0; background:transparent;
}
:scope[data-theme="sakura"]:not([data-sakura-completion="false"]) .month-grid .planner-task:not(.is-complete) .task-check-ring { width:20px; height:20px; }
:scope[data-theme="sakura"]:not([data-sakura-completion="false"]) :is(.month-mobile-task:not(.is-complete) .month-mobile-task-status,.task-completion-feedback:not(.is-complete)) {
    border-color:transparent; background:transparent; color:var(--ink-soft,#66685f);
}
:scope[data-theme="sakura"]:not([data-sakura-completion="false"]) .month-mobile-task:not(.is-complete) .month-mobile-task-status { position:relative; }
:scope[data-theme="sakura"]:not([data-sakura-completion="false"]) :is(.planner-task:not(.is-complete) .task-check-ring,.task-details-title-row:not(.is-complete) .task-check-ring,.month-mobile-task:not(.is-complete) .month-mobile-task-status,.task-completion-feedback:not(.is-complete))::before {
    content:""; position:absolute; inset:0; background:currentColor; mask:url("images/sakura-completion-outline.svg") center/contain no-repeat; pointer-events:none;
}
:scope[data-theme="sakura"]:not([data-sakura-completion="false"]) :is(.planner-task,.task-details-title-row).is-colored:not(.is-complete) .task-check { color:var(--ink); }
:scope[data-theme="sakura"]:not([data-sakura-completion="false"]) :is(.planner-task,.task-details-title-row):not(.is-complete) .task-check:hover:where(:not([data-touch-input] *)) { color:var(--task-check-hover-color); }
@media (forced-colors:active), print {
    :scope[data-theme="sakura"]:not([data-sakura-completion="false"]) :is(.planner-task:not(.is-complete) .task-check-ring,.task-details-title-row:not(.is-complete) .task-check-ring,.month-mobile-task:not(.is-complete) .month-mobile-task-status,.task-completion-feedback:not(.is-complete)) {
        border:1px solid currentColor; border-radius:50%;
    }
    :scope[data-theme="sakura"]:not([data-sakura-completion="false"]) :is(.planner-task:not(.is-complete) .task-check-ring,.task-details-title-row:not(.is-complete) .task-check-ring,.month-mobile-task:not(.is-complete) .month-mobile-task-status,.task-completion-feedback:not(.is-complete))::before { display:none; }
}
@media (prefers-reduced-motion:reduce), (forced-colors:active), print { .task-completion-burst { display:none; } .task-check { transition:none; } }
@media (forced-colors:active) {
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .is-complete .task-check-ring::before { display:none; }
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) :is(.planner-task,.task-details-title-row).is-complete .task-check-ring { border:1px solid ButtonText; border-radius:50%; background:Highlight; }
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .is-complete .task-check svg { color:HighlightText; }
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .task-completion-feedback.is-complete, :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status { border:1px solid ButtonText; background:Highlight; }
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .task-completion-feedback.is-complete svg, :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status svg { stroke:HighlightText; }
}
@media print {
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .is-complete .task-check-ring::before { display:none; }
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) :is(.planner-task,.task-details-title-row).is-complete .task-check-ring, :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status { border:1px solid currentColor; border-radius:50%; background:transparent; }
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .is-complete .task-check svg { color:inherit; }
    :scope:is([data-theme="sakura"]:not([data-sakura-completion="false"]),[data-theme="premium"]) .month-mobile-task.is-complete .month-mobile-task-status svg { stroke:currentColor; }
}
}
.task-content { position:relative; min-width:0; display:grid; gap:2px; }
.task-title-row { position:relative; min-width:0; }
.task-calendar-caption-slot { position:absolute; inset-inline:0; bottom:-3px; min-width:0; }
.planner-task .task-calendar-caption { --task-icon-size:1em; display:block; min-width:0; min-height:0; max-width:100%; margin:0; padding:0; border:0; background:transparent; color:var(--ink-soft,#66685f); font:400 .6875rem/.75rem var(--planner-font); text-align:left; }
.planner-task .task-calendar-caption .task-calendar-identity { display:flex; font:inherit; color:inherit; }
/* Center the visible text with the icon, retaining room for accents and descenders. */
.task-calendar-caption .task-calendar-identity-name { position:relative; top:-.085em; }
@supports (text-box-trim:trim-both) {
    .task-calendar-caption .task-calendar-identity-name { top:0; text-box-trim:trim-both; text-box-edge:cap alphabetic; padding-block:calc((1lh - 1cap) / 2); }
}
button.task-calendar-caption { cursor:pointer; transition:var(--hover-transition); }
button.task-calendar-caption:focus-visible { outline:2px solid var(--focus,#225ecc); outline-offset:2px; border-radius:3px; }
@media (prefers-reduced-motion:reduce) { button.task-calendar-caption { transition:none; } }
.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; 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; }
/* Task-card metadata: 14px secondary text, 17px symbols, 21px avatars and a 6px rhythm.
   rem units follow the user's text size; compact views override the symbol scale. */
.planner-task { --task-icon-size:1.0625rem; --task-avatar-size:1.3125rem; --task-meta-font-size:.875rem; --task-meta-font-weight:400; --task-meta-gap:6px; --task-menu-size:26px; --task-menu-top-inset:.25rem; }
.task-secondary-meta { --task-icon-size:1.25rem; }
:is(.planner-shell,.planner-task) :is(.task-description-indicator,.task-attachment-indicator,.task-repeat-indicator) { flex:0 0 var(--task-icon-size,1.25rem); display:inline-flex; align-items:center; justify-content:center; width:var(--task-icon-size,1.25rem); height:var(--task-icon-size,1.25rem); overflow:visible; color:var(--ink-soft,#66685f); line-height:1; vertical-align:middle; }
.task-description-indicator > svg, .task-attachment-indicator > svg, .task-reminder-indicator > svg, .task-comment-alert > svg, .task-calendar-identity-icon > svg, .deadline-reminder-mark > svg, .task-deadline-title-mark > svg, .task-meta > span:not(.task-creator) > svg { display:block; flex:none; width:var(--task-icon-size,1.25rem); height:var(--task-icon-size,1.25rem); }
.task-calendar-identity-icon { width:var(--task-icon-size,1.25rem); height:var(--task-icon-size,1.25rem); }
.task-calendar-identity-icon :is(.provider-logo,.calendar-image-icon) { width:var(--task-icon-size,1.25rem) !important; height:var(--task-icon-size,1.25rem) !important; }
.task-calendar-identity-icon .provider-logo img { width:100%; height:100%; }
.planner-shell .planner-task .calendar-provider-logo, .planner-shell .task-secondary-meta .calendar-provider-logo { flex-basis:var(--task-icon-size,1.25rem); width:var(--task-icon-size,1.25rem); height:var(--task-icon-size,1.25rem); }
.task-footer { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px var(--task-meta-gap,8px); color:var(--ink-soft,#66685f); font:var(--task-meta-font-weight,400) var(--task-meta-font-size,.8125rem)/1.45 var(--planner-font); overflow-wrap:anywhere; }
/* All indicators share one wrapping row; the metadata group must not reserve a whole line. */
.task-meta { display:contents; color:inherit; font:inherit; }
.task-footer[data-task-footer-alerts] { column-gap:var(--task-meta-gap,7px); }
/* Task attachment, chat and reminder counts share the same badge geometry. */
.task-alert-indicator {
    box-sizing:border-box;
    position:relative;
    display:inline-flex;
    flex:0 0 var(--task-icon-size,1.25rem);
    align-items:center;
    justify-content:center;
    width:var(--task-icon-size,1.25rem);
    height:var(--task-icon-size,1.25rem);
    min-width:0;
    min-height:0;
    padding:0;
    border:0;
    border-radius:4px;
    background:transparent;
    color:var(--ink-soft,#66685f);
    line-height:1;
    white-space:nowrap;
}
.task-alert-indicator.has-alert-count { margin-inline-end:var(--task-alert-count-extra-space,2px); }
.task-alert-count {
    position:absolute;
    right:-5px;
    bottom:0;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:14px;
    height:14px;
    padding:0 2px;
    border:1px solid var(--surface,#fffdf8);
    border-radius:999px;
    background:#f3a091;
    color:#302128;
    font:700 8px/1 var(--planner-font,sans-serif);
    font-variant-numeric:tabular-nums;
    pointer-events:none;
}
@media (forced-colors:active) {
    .task-alert-indicator { color:ButtonText; }
    .task-alert-count { background:Highlight; border-color:Canvas; color:HighlightText; }
}
.planner-task[draggable="true"] .task-meta { user-select:none; -webkit-user-select:none; }
/* Menu actions overlay the title without reducing its available width. */
.task-actions { position:absolute; top:max(calc(50% + 2px),calc(var(--task-menu-size) / 2 + var(--task-menu-top-inset))); right:1px; z-index:2; display:flex; align-items:center; transform:translateY(-50%); transition:top 160ms ease; }
.planner-task.no-metadata .task-actions { top:50%; }
.planner-task.no-metadata .task-content { grid-template-columns:minmax(0,1fr); gap:0; align-items:center; }
/* Center visible capitals, retaining the line height and room for accents/descenders. */
.planner-task .task-title { top:-.085em; }
.planner-task .task-title, .planner-task .task-footer { transition:transform 160ms ease; }
.planner-task .task-title { transition:transform 160ms ease,opacity 220ms cubic-bezier(.2,.65,.3,1); }
@media (prefers-reduced-motion:reduce), (forced-colors:active), print {
    .planner-task :is(.task-content,.task-title) { transition:none; }
}
@supports (text-box-trim:trim-both) {
    .planner-task .task-title { top:0; text-box-trim:trim-both; text-box-edge:cap alphabetic; padding-block:calc((1lh - 1cap) / 2); }
}
/* Media needs its whole line box. Text-only optical trimming clips previews
   when surrounding text shares the same line. */
.planner-task .task-title:has(:is([data-description-gif],[data-task-inline-image],[data-task-inline-attachment])) { top:0; text-box-trim:none; padding-block:0; }
/* Captions overlay the existing row, including metadata and wrapped titles. */
.planner-task.has-calendar-caption .task-title { transform:translateY(-.375rem); }
.planner-task.has-calendar-caption .task-footer { transform:translateY(-.625rem); }
@media (prefers-reduced-motion:reduce) { .planner-task .task-title,.planner-task .task-footer,.task-actions { transition:none; } }
.planner-task.no-metadata .task-meta { display:none; }
.planner-task.no-metadata .task-footer { display:none; }
.task-time { flex:none; white-space:nowrap; color:var(--accent-deep,#9f422b); font-weight:inherit; }
.task-time-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; height:1.45rem; line-height:1; }
.task-time-stack > span:not(.sr-only) { font-size:.6875rem; font-weight:700; }
.planner-task .task-time-stack > span:not(.sr-only) { font-size:.75rem; }
.planner-task :is(.task-creator-picture,.task-assignee-picture) { font-size:.6875rem; }
.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-grid; flex:0 0 var(--task-avatar-size,1.25rem); width:var(--task-avatar-size,1.25rem); height:var(--task-avatar-size,1.25rem); font-size:.625rem; }
.task-creator-picture img { display:block; width:100%; height:100%; object-fit:cover; }
.task-creator-picture svg { display:block; flex:none; }
.task-creator-profile-button, .task-assignee-profile-button { padding:0; border:0; cursor:pointer; }
.task-creator-profile-button:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:3px; }
.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-grid; flex:0 0 var(--task-avatar-size,1.25rem); width:var(--task-avatar-size,1.25rem); height:var(--task-avatar-size,1.25rem); font-size:.625rem; }
.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-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); }
.task-due-date { white-space:nowrap; }

.deadline-reminder-mark { display:inline-flex; align-items:center; gap:4px; }
.deadline-reminder-mark.task-due-date { gap:1px; }
.deadline-reminder-mark > svg { flex:none; }
.task-deadline-title-mark { display:inline-flex; margin-right:4px; vertical-align:-1px; }
.planner-task.is-colored :is(.task-time,.deadline-mark) { color:var(--ink); }
.month-mobile-task.is-colored .deadline-mark { color:var(--ink); }
/* Inset the painted surface while retaining the existing pointer and touch target. */
.task-more { box-sizing:border-box; width:var(--task-menu-size,26px); height:var(--task-menu-size,26px); padding:2px; display:grid; place-items:center; border:0; border-radius:7px; background:var(--dropdown-background); background-clip:content-box; color:var(--ink-soft,#66685f); opacity:0; transition:var(--hover-transition),opacity 160ms ease,transform 200ms cubic-bezier(.22,1.4,.36,1); }
/* Share the existing More18 artwork without creating an SVG tree in every row. */
.task-more.task-more--glyph::before {
    --task-more-glyph-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h.01M12 12h.01M19 12h.01'/%3E%3C/svg%3E");
    content:"\2026";
    display:block;
    width:18px;
    height:18px;
    font:18px/18px sans-serif;
    text-align:center;
    color:inherit;
    pointer-events:none;
}
@supports (mask-image:url("")) or (-webkit-mask-image:url("")) {
    .task-more.task-more--glyph::before {
        content:"";
        background-color:currentColor;
        -webkit-mask:var(--task-more-glyph-mask) center / 18px 18px no-repeat;
        mask:var(--task-more-glyph-mask) center / 18px 18px no-repeat;
        mask-mode:alpha;
    }
}
@media (forced-colors:active) {
    .task-more.task-more--glyph::before { color:ButtonText; forced-color-adjust:none; }
    .task-more.task-more--glyph[aria-expanded="true"]::before { color:var(--open-color); }
}
@media print {
    .task-more.task-more--glyph::before { color:inherit; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
.planner-task:hover:where(:not([data-touch-input] *)) .task-more, .planner-task:has(:focus-visible) .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] *)):where(:not(:disabled)) { color:var(--hover-color); background:var(--hover-background); background-clip:content-box; }
.task-more[aria-expanded="true"] { background:var(--open-background); background-clip:content-box; color:var(--open-color); }
.planner-task.is-colored .task-more:where(:not([aria-expanded="true"])) { color:var(--ink); }
.task-action-bar { --task-action-size:30px; position:fixed; inset:auto; z-index:130; margin:0; padding:5px; width:max-content; max-width:calc(100vw - 16px); display:none; align-items:center; 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-tool-popover-enter var(--dropdown-enter-duration) var(--dropdown-easing); }
.task-action-bar::backdrop { background:transparent; pointer-events:none; }
.task-action-destructive { display:flex; flex:none; flex-direction:column; gap:4px; margin-inline-end:12px; }
.task-action-tools { display:grid; flex:0 1 auto; grid-template-columns:repeat(var(--task-action-columns),var(--task-action-size)); grid-template-rows:repeat(2,var(--task-action-size)); gap:4px; min-width:0; padding:3px; margin:-3px; overflow-x:auto; overscroll-behavior-x:contain; }
.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:var(--hover-transition),transform 120ms ease; }
.task-action-bar .task-alert-indicator { color:inherit; }
.task-action-bar button:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.task-action-bar button:focus-visible, .task-action-bar button[aria-checked="true"] { background:color-mix(in srgb,var(--accent,#c76345) 14%,transparent); color:var(--accent,#c76345); }
.task-action-bar button[aria-expanded="true"] { background:var(--open-background); color:var(--open-color); }
.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] *)):where(:not(:disabled)) { color:var(--danger,#a33a34); background:var(--hover-background); }
@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; } }
:is(.week-view,.timeline-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; }
:is(.week-view,.timeline-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; will-change:transform; }
.task-drag-proxy .task-actions { visibility:hidden; }
.timeline-entry:has(> .planner-task[data-task-pointer-source]) > .timeline-entry-resize { visibility:hidden; }
.planner-task.timeline-drag-proxy { --task-check-size:24px; min-height:0; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:8px; padding:3px 4px; overflow:hidden; border:1px solid var(--line,#dcd8ce); border-radius:var(--custom-radius,7px); }
.timeline-drag-proxy .task-title { font-size:.76rem; line-height:1.35; }
.timeline-drag-proxy .task-check { align-self:center; justify-self:center; width:var(--task-check-size); min-height:0; height:var(--task-check-size); margin:0; }
.timeline-drag-proxy .task-check .task-check-ring { width:var(--task-check-size); height:var(--task-check-size); }
.timeline-entry .planner-task, .timeline-drag-proxy { --task-icon-size:.75rem; --task-avatar-size:.75rem; --task-meta-font-size:.625rem; --task-meta-gap:3px; }
.timeline-entry.is-overlapping .planner-task { --task-meta-gap:1px; }
:is(.timeline-entry,.timeline-drag-proxy) :is(.task-creator-picture,.task-assignee-picture) { font-size:.5rem; }
.timeline-drag-proxy .task-time-stack { height:1.45em; }
.timeline-drag-proxy .task-time-stack > span:not(.sr-only) { font-size:.6875em; }
.planner-task.timeline-drag-proxy.is-compact { --task-check-size:14px; padding:1px 5px; }
.timeline-drag-proxy.is-compact .task-title { font-size:.7rem; line-height:1.3; }
/* Share the same bounded content in the calendar and its detached drag preview.
   Titles use the remaining height; metadata never reserves a side column. */
:is(.timeline-entry,.timeline-drag-proxy) .task-content { height:100%; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:0; }
:is(.timeline-entry,.timeline-drag-proxy) .task-title-row { flex:0 1 auto; width:100%; min-height:0; }
/* Keep adjacent text visible when a short timed card clips a tall preview. */
:is(.timeline-entry,.timeline-drag-proxy) .task-title .task-title-rich :is([data-description-gif],[data-task-inline-image]) { vertical-align:top; }
:is(.timeline-entry,.timeline-drag-proxy) .task-body { height:100%; max-height:100cqh; min-height:0; display:block; overflow:hidden; font-size:.76rem; line-height:1.35; transition:max-height 160ms ease; }
/* Read overflowing titles in place, keeping the card's controls fixed. Native
   chaining still scrolls the timeline when a title fits or reaches its edge. */
.timeline-entry .task-body { overflow-x:hidden; overflow-y:auto; }
:is(.timeline-entry,.timeline-drag-proxy).is-compact .task-body { font-size:.7rem; line-height:1.3; }
:is(.timeline-entry,.timeline-drag-proxy) .task-title { top:0; display:block; max-height:none; overflow:hidden; -webkit-line-clamp:unset; transform:none; text-overflow:clip; text-box-trim:none; padding-block:0; }
:is(.timeline-entry,.timeline-drag-proxy) .planner-task.has-calendar-caption :is(.task-title,.task-footer),.timeline-drag-proxy.has-calendar-caption :is(.task-title,.task-footer) { transform:none; }
:is(.timeline-entry,.timeline-drag-proxy) .task-footer { flex:0 0 auto; max-height:0; margin-top:0; gap:2px var(--task-meta-gap); line-height:.875rem; overflow:hidden; opacity:0; visibility:hidden; transition:max-height 160ms ease,margin-top 160ms ease,opacity 160ms ease,visibility 0s linear 160ms; }
/* Visible content follows its card when the original is hidden during a drag. */
:is(.timeline-entry,.timeline-drag-proxy) .task-footer[data-timeline-footer-fit] { max-height:var(--timeline-footer-height); margin-top:2px; opacity:1; visibility:inherit; transition-delay:0s; }
:is(.timeline-entry,.timeline-drag-proxy) .task-footer > *,:is(.timeline-entry,.timeline-drag-proxy) .task-meta > * { flex-shrink:0; }
:is(.timeline-entry,.timeline-drag-proxy) .task-calendar-caption-slot { position:static; flex:0 0 auto; max-height:0; margin-top:0; overflow:hidden; opacity:0; visibility:hidden; transition:max-height 160ms ease,margin-top 160ms ease,opacity 160ms ease,visibility 0s linear 160ms; }
:is(.timeline-entry,.timeline-drag-proxy) .task-calendar-caption-slot[data-timeline-caption-fit] { max-height:var(--timeline-caption-height); margin-top:1px; opacity:1; visibility:inherit; transition-delay:0s; }
:is(.timeline-entry,.timeline-drag-proxy) .task-calendar-caption-slot:has(:focus-visible) { overflow:visible; }
:is(.timeline-entry,.timeline-drag-proxy) .task-alert-indicator { --task-alert-count-extra-space:0px; flex-basis:auto; width:auto; gap:1px; }
:is(.timeline-entry,.timeline-drag-proxy) .task-alert-count { position:static; min-width:.5rem; height:.625rem; padding:0 1px; font-size:.4375rem; }
:is(.timeline-entry,.timeline-drag-proxy) .task-assignee-group { flex-wrap:nowrap; gap:1px; }
:is(.timeline-entry,.timeline-drag-proxy) .task-assignee-open { margin-inline-start:0; }
/* Tools overlay the existing content. Hover, focus and open menus keep the
   card, title, metadata and resize targets in their resting positions. */
.timeline-entry.is-overlapping .task-due-date > span:not(.sr-only) { display:none; }
.timeline-drag-proxy.is-compact :is(.task-footer,.task-calendar-caption-slot) { display:none; }
/* Narrow time columns give the title the completion control's space. Detached
   previews query their own size and keep the same content inset while wide. */
.timeline-view .timeline-entry > .planner-task:not(.timeline-drag-proxy) { transition:var(--hover-transition),grid-template-columns 160ms ease,column-gap 160ms ease; }
.planner-task.timeline-drag-proxy { container:timeline-task-proxy / size; }
.timeline-drag-proxy > .task-check { grid-column:1; grid-row:1; }
.timeline-drag-proxy > .task-content { grid-column:1 / -1; grid-row:1; margin-inline-start:32px; transition:margin-inline-start 160ms ease; }
.timeline-entry > .planner-task > .task-check,.timeline-drag-proxy > .task-check { opacity:1; visibility:inherit; transition:filter 150ms ease,border-color 180ms ease,background-color 180ms ease,color 180ms ease,opacity 160ms ease,visibility 0s; }
@container timeline-task (width < 96px) {
    .timeline-view .timeline-entry > .planner-task:not(.timeline-drag-proxy) { grid-template-columns:0 minmax(0,1fr); column-gap:0; }
    .timeline-entry > .planner-task > .task-check { opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s,0s,0s,0s,0s,160ms; }
}
/* A proxy's queried content box excludes its 10px (compact: 12px) frame. */
@container timeline-task-proxy (width < 86px) {
    .timeline-drag-proxy:not(.is-compact) > .task-check { opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s,0s,0s,0s,0s,160ms; }
    .timeline-drag-proxy:not(.is-compact) > .task-content { margin-inline-start:0; }
}
@container timeline-task-proxy (width < 84px) {
    .timeline-drag-proxy.is-compact > .task-check { opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s,0s,0s,0s,0s,160ms; }
    .timeline-drag-proxy.is-compact > .task-content { margin-inline-start:0; }
}
.timeline-entry[data-timeline-entry-resizing] .task-body { transition:none; }
@media (prefers-reduced-motion:reduce) {
    .timeline-entry .planner-task,:is(.timeline-entry,.timeline-drag-proxy) :is(.task-body,.task-footer,.task-calendar-caption-slot) { transition:none; }
    .timeline-view .timeline-entry > .planner-task:not(.timeline-drag-proxy),.timeline-entry > .planner-task > .task-check,.timeline-drag-proxy > :is(.task-check,.task-content) { transition: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; }
:is(.week-view,.timeline-view)[data-task-pointer-drag] :is(.day-column,.timeline-anytime-day)[data-drop-active], .month-view[data-task-pointer-drag] .month-cell[data-drop-active] { background:transparent; }
:is(.week-view,.timeline-view)[data-task-pointer-drag] [data-drop-before]::before, :is(.week-view,.timeline-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; }
:is(.week-view,.timeline-view)[data-task-drop-pending] .planner-task[draggable="true"], :is(.week-view,.timeline-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; }
:is(.week-view .day-column,.timeline-anytime-day)[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); --task-motion-reverse-ease:cubic-bezier(.75,0,.78,.2); }
/* Keep the draft intact when natural scrolling cannot clear the keyboard. */
.planner-shell [data-inline-task-keyboard-lift] { translate:0 calc(0px - var(--inline-task-keyboard-lift,0px)); }
.planner-shell [data-inline-task-entry-lift] { translate:0 calc(0px - var(--inline-task-entry-lift,0px)); }
/* A raised phone composer can sit over saved task text while the keyboard is
   open. Give that existing row an opaque backing without changing its frame. */
.planner-shell .inline-task-entry[data-inline-task-entry-lift] { background-color:var(--paper,#f7f5ef); }
.planner-shell [data-inline-task-keyboard-lift][data-inline-task-entry-lift] { translate:0 calc(0px - var(--inline-task-keyboard-lift,0px) - var(--inline-task-entry-lift,0px)); }
.planner-shell :is(.planner-utilities,.unscheduled-tray)[data-inline-task-keyboard-lift] { translate:0 calc(0px - var(--inline-task-keyboard-lift,0px)); z-index:10; background-color:var(--paper,#f7f5ef); }
@media (prefers-reduced-motion:reduce) {
    /* A near-zero CSS transition still delays geometry by a frame. These
       controllers already apply reduced-motion positioning immediately. */
    [data-keyboard-card-owner], .planner-shell :is([data-inline-task-keyboard-lift],[data-inline-task-entry-lift]) { transition:none!important; }
}
/* 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; }
/* Keep the next editor focusable while its saved task's parent render catches up. */
.inline-task-entry[data-inline-commit-pending] .inline-task-reveal:not([data-inline-submitted]),
.inline-task-entry[data-inline-commit-pending][data-inline-task-replace] > .inline-add { opacity:0; pointer-events: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:var(--hover-transition); }
.planner-shell .inline-add:is(:focus-visible,:has(:focus-visible)) { color:var(--ink,#262823); }
/* Returned focus after closing a draft must also suppress the shared focus border. */
.inline-task-entry .inline-add[data-quiet-focus]:focus-visible { outline:none; border-color:transparent!important; }
.inline-add, .month-add { border-radius:var(--custom-radius,7px); }
.inline-add-icon { display:inline-block; }
/* Retain the closed label's geometry for the phone's transform-only slide. */
.planner-shell .inline-add[data-inline-add-hidden] { position:absolute; inset:0 0 auto; visibility:hidden; pointer-events:none; }
.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, .planner-inline-field { 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, .planner-inline-field:focus { outline:0; }
.planner-inline-field { display:block; box-sizing:border-box; margin:0; border-radius:0; box-shadow:none; resize:none; }
.inline-task-draft textarea { resize:none; overflow:hidden; display:block; }
.inline-task-calendar-picker { grid-column:1 / -1; min-width:0; min-height:0; display:grid; grid-template-rows:1fr; }
.inline-task-calendar-picker > .task-calendar-container { min-height:0; overflow:clip; }
.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; }
/* Share the Add label and glyph while each view keeps its own layout. */
.planner-shell [data-inline-add-standard], .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:0; }
@media (min-width:801px) {
    .planner-shell [data-inline-add-standard], .inline-task-entry[data-inline-task-replace] .inline-add { column-gap:8px; }
}
[data-inline-add-standard] .inline-add-icon, .inline-task-entry[data-inline-task-replace] .inline-add-icon { width:24px; height:24px; display:grid; place-items:center; }
[data-inline-add-standard] > span:last-child, .inline-task-entry[data-inline-task-replace] .inline-add > span:last-child { position:relative; }
.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] .inline-task-calendar-picker { animation:planner-task-unfold var(--task-motion-duration) var(--task-motion-ease) both,planner-task-reveal var(--task-motion-duration) var(--task-motion-ease) both; }
.inline-task-entry[data-inline-task-replace] textarea { position:relative; padding:0; }
@scope (html, .planner-theme-preview) to (.planner-theme-preview) {
:scope:not([data-theme="custom"]) .inline-task-entry[data-inline-task-replace] :is(textarea,.inline-add > span:last-child), :scope:not([data-theme="custom"]) [data-inline-add-standard] > span:last-child, :scope:not([data-theme="custom"]) .month-date, :scope:not([data-theme="custom"]) .planner-inline-field { font-family:"Yako Entry",var(--planner-font); }
}
.inline-task-entry[data-inline-task-replace] textarea::placeholder, .planner-inline-field::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; }
@media (max-width:800px) and (prefers-reduced-motion:no-preference) {
    /* Focus and module loading can span paints. Keep Add in place until the
       field's initial transform is ready, including on the very first opening. */
    :is(.calendar-day-content,.month-mobile-agenda,.unscheduled-tray) .inline-task-entry[data-inline-task-replace]:has(> .inline-add[data-inline-add-hidden]) > .inline-task-reveal:not([data-inline-continuing],[data-inline-label-ready]):has(textarea:placeholder-shown) :is(.inline-task-title,.task-draft-check) { opacity:0; }
    .planner-shell :is(.calendar-day-content,.month-mobile-agenda,.unscheduled-tray) .inline-task-entry[data-inline-task-replace]:has(> .inline-task-reveal:not([data-inline-continuing],[data-inline-label-ready]) textarea:placeholder-shown) > .inline-add[data-inline-add-hidden] { visibility:visible; }
    :is(.calendar-day-content,.month-mobile-agenda,.unscheduled-tray) .inline-task-entry[data-inline-task-replace]:has(> .inline-add[data-inline-add-hidden]) > .inline-task-reveal:not([data-inline-continuing],[data-inline-label-ready]):has(textarea:placeholder-shown) :is(.inline-task-box,.inline-task-glyph-circle,.inline-task-glyph-plus,.inline-task-calendar-picker) { animation-play-state:paused; }
}
.inline-task-box, .planner-inline-editor::before, .planner-inline-field-bordered { border:1px solid var(--accent,#c76345); background:color-mix(in srgb,var(--surface,#fffdf8) 55%,transparent); }
/* Keep every edge inside the draft's clipped reveal, including at fractional
   tablet widths. An outside border can lose its horizontal strokes to clipping. */
.inline-task-box, .planner-inline-editor::before { position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:inline-task-outline-in var(--task-motion-duration) var(--task-motion-ease) both; }
.planner-inline-field-bordered { padding-inline:8px; border-radius:6px; }
.planner-inline-editor { position:relative; --task-motion-duration:180ms; --task-motion-ease:cubic-bezier(.22,.8,.25,1); }
.planner-inline-editor::before { content:""; inset:0; background:transparent; }
.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; }
/* Distinct names restart the close after the opening animation has finished. */
[data-inline-entry-closing] .inline-task-box { animation:inline-task-outline-out var(--task-motion-duration) var(--task-motion-reverse-ease) both; }
[data-inline-entry-closing] .inline-task-glyph-circle { animation:inline-task-circle-out var(--task-motion-duration) var(--task-motion-reverse-ease) both; }
[data-inline-entry-closing] .inline-task-glyph-plus { animation:inline-task-plus-in var(--task-motion-duration) var(--task-motion-reverse-ease) both; }
.inline-task-reveal[data-inline-entry-closing] .inline-task-calendar-picker { grid-template-rows:0fr; opacity:0; pointer-events:none; animation:inline-task-calendar-fold var(--task-motion-duration) var(--task-motion-ease) both; }
.inline-task-reveal[data-inline-continuing]:not([data-inline-entry-closing]) .inline-task-calendar-picker { animation:none; }
.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); } }
@keyframes inline-task-outline-out { from { opacity:1; } to { opacity:0; } }
@keyframes inline-task-circle-out { from { opacity:1; transform:none; } to { opacity:0; transform:scale(.35); } }
@keyframes inline-task-plus-in { from { opacity:0; transform:rotate(90deg) scale(.35); } to { opacity:1; transform:none; } }
@keyframes inline-task-calendar-fold { from { grid-template-rows:1fr; opacity:1; transform:none; } to { grid-template-rows:0fr; opacity:0; transform:translateY(3px); } }
@media (prefers-reduced-motion:reduce) {
    .inline-task-box, .planner-inline-editor::before, .inline-task-glyph-circle, .inline-task-glyph-plus, .inline-task-calendar-picker { 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 { position:relative; flex:none; min-width:0; width:100%; margin-top:0; padding-top:0; display:flex; flex-direction:column; border-radius:var(--custom-radius,7px); transition:var(--hover-transition); --task-motion-duration:180ms; --task-motion-ease:cubic-bezier(.22,.8,.25,1); --task-motion-reverse-ease:cubic-bezier(.75,0,.78,.2); }
.inline-day-note:has(> .inline-day-note-input:not(:read-only):not(:disabled))::before { content:""; position:absolute; inset:0; border:1px solid var(--accent,#c76345); border-radius:var(--custom-radius,7px); background:color-mix(in srgb,var(--surface,#fffdf8) 55%,transparent); opacity:0; pointer-events:none; transition:opacity var(--task-motion-duration) var(--task-motion-reverse-ease); }
.inline-day-note:has(> .inline-day-note-input:not(:read-only):not(:disabled)):focus-within::before { opacity:1; transition-timing-function:var(--task-motion-ease); }
.inline-day-note-details { order:1; }
.inline-day-note-input { order:2; }
:is(.week-view,.month-mobile-agenda,.timeline-view) .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,.timeline-view) .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(.combine-weekend) > .day-column:nth-last-child(-n+2) .inline-day-note-details,
.week-grid.combine-weekend:not(.starts-sunday) .day-column:is(.combined-saturday,.combined-sunday) .inline-day-note-details,
.week-grid.combine-weekend.starts-sunday .day-column.is-friday .inline-day-note-details,
.timeline-day-heading:last-child .inline-day-note-details { right:0; left:auto; }
:is(.week-view,.month-mobile-agenda,.timeline-view) .day-header .inline-day-note:has(.inline-day-note-feedback) .inline-day-note-details { display:block; }
.planner-shell .inline-day-note-input { position:relative; 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:1px solid transparent; border-radius:var(--custom-radius,7px); background:transparent; color:var(--ink,#262823); font:inherit; font-size:1rem; font-weight:400; line-height:1.5; transition:var(--hover-transition); }
.inline-day-note-input::placeholder { color:var(--ink-soft,#66685f); opacity:1; transition:var(--hover-transition); }
/* Match Add task's balanced font metrics so native carets align with the text. */
@scope (html, .planner-theme-preview) to (.planner-theme-preview) {
:scope:not([data-theme="custom"]) .inline-day-note-input { font-family:"Yako Entry",var(--planner-font); --day-note-ink-shift:0px; }
}
/* Center the capitals without reducing the existing note editor's hit area. */
.planner-shell :is(.week-view,.month-mobile-agenda,.timeline-view) .inline-day-note-input { --day-note-input-height:40px; box-sizing:border-box; padding:calc((var(--day-note-input-height) - 1lh) / 2 - var(--day-note-ink-shift,.125em) - 1px) 4px calc((var(--day-note-input-height) - 1lh) / 2 + var(--day-note-ink-shift,.125em) - 1px); }
/* Use the reserved border so the global focus-outline reset cannot hide it. */
.inline-day-note-input:focus { border-color:color-mix(in srgb,var(--accent,#c76345) 55%,transparent); }
.inline-day-note-input:focus:not(:read-only):not(:disabled) { border-color:transparent; }
.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; display:flex; align-items:center; gap:3px; min-width:0; padding-inline:5px; overflow:hidden; white-space:nowrap; color:var(--ink-soft,#66685f); font:400 .6875rem/1.4 var(--planner-font); transition:var(--hover-transition); }
.day-note-calendar-name-text { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.day-note-calendar-name .day-note-calendar-icon { width:1em; height:1em; }
.day-note-calendar-name .day-note-calendar-icon svg { width:100%; height:100%; }
.day-note-calendar-name .day-note-calendar-icon > .calendar-image-icon { width:100%!important; height:100%!important; }
/* Keep the calendar caption inside the existing note height. */
.planner-shell :is(.week-view,.month-mobile-agenda,.timeline-view) .day-header > .inline-day-note:has(.day-note-calendar-name) { height:calc(var(--planner-day-header-height,48px) - 8px); }
.planner-shell :is(.week-view,.month-mobile-agenda,.timeline-view) .inline-day-note:has(.day-note-calendar-name) .inline-day-note-input { --day-note-input-height:calc(var(--planner-day-header-height,48px) - 20px); min-height:var(--day-note-input-height); height:var(--day-note-input-height); max-height:var(--day-note-input-height); padding-block:max(0px,calc((var(--day-note-input-height) - 1lh) / 2 - 1px)); line-height:1.25; }
.planner-shell :is(.week-view,.month-mobile-agenda,.timeline-view) .day-header .day-note-calendar-name { position:absolute; inset-inline:0; bottom:0; height:12px; padding-inline:5px; font-size:.625rem; line-height:12px; }
.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:11rem; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scroll-padding-block:4px; padding:2px; border:1px solid var(--accent,#c76345); border-radius:var(--custom-radius,7px); background:var(--paper,#f8f5ed); }
.inline-day-note:focus-within .day-note-calendar-picker { display:grid; gap:2px; transform-origin:top left; animation:planner-task-reveal var(--task-motion-duration) var(--task-motion-ease) both; }
.week-grid:not(.combine-weekend) > .day-column:nth-last-child(-n+2) .day-note-calendar-picker,
.week-grid.combine-weekend:not(.starts-sunday) .day-column:is(.combined-saturday,.combined-sunday) .day-note-calendar-picker,
.week-grid.combine-weekend.starts-sunday .day-column.is-friday .day-note-calendar-picker,
.timeline-day-heading:last-child .day-note-calendar-picker { right:0; left:auto; transform-origin:top right; }
@media (prefers-reduced-motion:reduce) { .inline-day-note::before, .inline-day-note:focus-within::before, .inline-day-note:focus-within .day-note-calendar-picker { animation:none!important; transition:none!important; } }
.day-note-calendar-choice { position:relative; display:flex; align-items:center; gap:9px; box-sizing:border-box; min-width:0; min-height:40px; padding:4px 7px; border-radius:10px; cursor:pointer; color:var(--ink-soft,#66685f); font:400 .875rem/1.4 var(--planner-font); transition:var(--hover-transition); }
.day-note-calendar-copy { display:grid; flex:1; gap:3px; min-width:0; text-align:left; }
.day-note-calendar-title { display:flex; align-items:center; gap:8px; 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; }
.day-note-calendar-title > .day-note-calendar-icon { color:inherit; }
.planner-shell .day-note-calendar-choice input[type="radio"] { position:absolute; width:1px; height:1px; min-height:0; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); opacity:0; }
.day-note-calendar-choice:has(input:checked) { background:var(--accent-soft,#f1d9cf); color:var(--accent-deep,#9f422b); }
.day-note-calendar-choice:hover:where(:not([data-touch-input] *)):not(:has(input:disabled,:checked)) { background:var(--hover-background); color:var(--hover-color); }
.day-note-calendar-choice:has(input:focus-visible) { outline:2px solid var(--focus,#66685f); outline-offset:-2px; }
.day-note-calendar-choice input:focus-visible ~ .planner-checkmark { --planner-checkmark-border:var(--focus,var(--accent,#c76345)); }
.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,.timeline-view) .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 transparent; 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:var(--custom-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 transparent; }
.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:where(:not([aria-expanded="true"])) { background:Canvas; }
}

.month-view { min-width:0; display:flex; flex-direction:column; }
.month-weekdays { flex:none; min-height:var(--planner-day-header-height,48px); display:grid; align-items:center; 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 { align-self:stretch; display:grid; align-items:center; padding:3px 9px; border-right:1px solid var(--line,#dcd8ce); }
.month-weekdays > span:last-child { border-right:0; }
.month-weekdays .day-label > span { font-size:1rem; }
/* Match Week's date baseline without displaying a date in the weekday row. */
.month-weekdays .day-label::after { content:"\200b"; width:0; }
.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:var(--hover-transition),opacity 160ms ease; }
.month-date-mobile, .month-mobile-agenda { display:none; }
/* Newly admitted agenda rows fade once; keyed updates retain their existing
   nodes. Busy days keep their bounded batches without a frame loop or delay. */
@media (prefers-reduced-motion:no-preference) {
    .month-mobile-agenda .day-tasks > .planner-task { animation:calendar-filter-enter 100ms cubic-bezier(.22,.8,.25,1); }
}
.month-cell-header, .month-tasks { pointer-events:none; }
.month-date, .month-date-mobile, .month-grid .planner-task, .month-event, .month-cell > .month-add { position:relative; z-index:1; pointer-events:auto; }
.month-grid:not(.has-week-numbers):not(.no-weekends) .month-cell:nth-child(7n), .month-grid.no-weekends:not(.has-week-numbers) .month-cell:nth-child(5n) { border-right:0; }
.month-cell.outside { color:var(--ink-soft,#66685f); opacity:.48; }
.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(22px,calc(1.5rem - 2px)); display:flex; align-items:flex-start; justify-content:space-between; gap:4px; }
.month-date { width:max(20px,1.125rem); height:max(20px,1.125rem); margin:-1px 0 0 -1px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:inherit; font:500 1rem/1 var(--planner-heading); cursor:default; }
.month-cell.today { opacity:1; }
.month-cell.today .month-date { background:var(--accent,#c76345); color:var(--planner-accent-ink,#000); box-shadow:none; }
.month-activity { display:none; }
/* Drag gaps use this scrollport's full capacity, including on empty days. */
.month-items { position:static; flex:1 1 auto; min-width:0; min-height:0; display:grid; align-content:start; gap:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:auto; pointer-events: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-grid .planner-task:where(:not(.inline-task-draft)) { min-height:27px; padding:2px 1px; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:5px; }
.month-grid .planner-task .task-check { width:20px; height:20px; }
.month-grid .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-grid .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-grid .planner-task .task-content { display:block; overflow:hidden; }
.month-grid .planner-task[data-task-id] .task-content { overflow:visible; }
.month-grid .planner-task .task-footer { display:none; }
.month-grid .planner-task .task-footer:has(.task-calendar-identity,.task-description-indicator,.task-attachment-indicator,.task-repeat-indicator,.task-reminder-indicator,.task-creator,.task-assignee) { display:flex; margin-top:2px; }
/* Compact month rows also keep calendar logos and task chats 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-grid .planner-task { --task-icon-size:1.0625rem; }
.month-grid .planner-task :is(.task-creator-picture,.task-assignee-picture) { font-size:.5rem; }
.month-grid .planner-task.no-metadata .task-content { display:block; }
.month-grid .planner-task.no-metadata.has-calendar-caption .task-content { overflow:visible; }
.month-grid .planner-task.no-metadata .task-calendar-caption-slot { bottom:-2px; }
.month-grid .planner-task[draggable="true"] .task-body { user-select:none; -webkit-user-select:none; }
.month-grid .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; }
/* Keep Add beside the date while its editor flows after the tasks in their scroller. */
.month-items > .inline-task-entry { position:static; }
.month-items > .inline-task-entry > .inline-add, .month-cell > .month-add { position:absolute; top:1px; right:6px; left:calc(max(20px,1.125rem) + 9px); z-index:1; width:auto; min-width:0; min-height:26px; margin-top:0; padding:0 1px; }
.month-items > .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:focus-visible, .month-add:focus-visible { color:var(--ink,#262823); opacity:1; }
.planner-shell .month-items > .inline-task-entry > .inline-add { transition:var(--hover-transition),opacity 160ms ease,visibility 0s linear; }
.planner-shell .month-items > .inline-task-entry > .inline-add[data-inline-add-hidden] { opacity:0; transition:var(--hover-transition),opacity 160ms ease,visibility 0s linear 160ms; }
/* Leave paint clearance below the draft's border at fractional clip edges. */
.month-cell .inline-task-reveal-body { padding-block-end:2px; }

.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:var(--hover-transition),transform 80ms ease; }
.search-submit:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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 { --pill-fill:var(--paper-deep,#eeebe2); --pill-ink:var(--ink,#262823); min-height:34px; padding:0 12px; border:0; border-radius:var(--pill-radius,var(--custom-radius,999px)); background:var(--pill-fill); color:var(--pill-ink); font-size:.78rem; font-weight:500; transition:var(--hover-transition),transform 80ms ease; }
.search-filters button:not(.active):hover:where(:not([data-touch-input] *)):where(:not(:disabled):not([aria-disabled="true"])) { color:var(--hover-color); background:var(--hover-background); }
.search-filters button:active { transform:scale(.96); }
.search-filters button.active { --pill-fill:var(--planner-action-fill,var(--accent,#c76345)); --pill-ink:var(--planner-action-ink,var(--custom-accent-ink,#19141c)); background:var(--pill-fill); color:var(--pill-ink); font-weight:650; }
.search-filters button.active:hover:where(:not([data-touch-input] *)):where(:not(:disabled):not([aria-disabled="true"])) { background:var(--solid-accent-hover-background); color:var(--solid-accent-hover-color); }
.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:var(--hover-transition); }
.search-advanced > summary::-webkit-details-marker { display:none; }
.search-advanced > summary:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.search-advanced[open] > summary { color:var(--ink,#262823); }
.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:var(--hover-transition); animation:search-result-enter 170ms cubic-bezier(.22,1,.36,1) both; }
.search-result[data-task-open] { border-bottom-color:transparent; }
.search-result:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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:var(--hover-transition),transform 140ms ease; }
.settings-nav button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.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:var(--hover-background); color:var(--hover-color); }
.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:0; margin:0; padding:0; border:0; }
.settings-form > .settings-panel > :is(.settings-fields,.settings-toggle-grid):first-child { margin-top:0; }
.settings-panel .online-feature-controls > :is(.account-security-sections,.account-security-loading,.account-security-load-state):first-child { margin-top:0; }
.settings-panel.settings-storage-panel > .account-storage { margin:0; padding:0; border:0; }
.settings-panel:not([data-settings-panel="profile"]) > :is(.settings-fields,.settings-toggle-grid,.settings-planning-preview) { margin-top:16px; }
.settings-panel:not([data-settings-panel="profile"]) > :is(.settings-fields,.settings-toggle-grid):first-child { margin-top:0; }
.settings-panel .notification-device-card { margin-top:12px; padding:10px 12px; gap:10px; }
.settings-panel .account-security-sections { gap:16px; }
.settings-panel .account-security-list { margin-top:8px; }
.settings-panel .account-security-list li { padding:10px; gap:8px; }
.settings-panel .account-security-session-actions { padding-top:10px; gap:10px; }
.settings-panel .account-security-empty { margin-top:8px; padding:12px; }
.settings-panel :is(.account-security-loading > div,.account-security-load-state) { padding:12px; }
.settings-panel.settings-data-panel { gap:12px; }
.settings-data-panel .settings-danger-card { padding:12px; gap:10px; }
.settings-data-panel .guest-local-data-summary { padding:12px; gap:8px; }
.settings-storage-panel .storage-usage { padding:12px 12px 0; }
.settings-storage-panel .storage-library { margin-top:16px; }
.settings-storage-panel .storage-toolbar { gap:8px; }
.settings-data-panel .portability-view > header { padding:12px 12px 0; }
.settings-data-panel .portability-workflow-card { margin-top:12px; }
.settings-data-panel .portability-workflow-panel { padding:12px; row-gap:10px; }
.settings-panel .settings-fields { margin-top:12px; gap:12px; }
.settings-panel .settings-fields :is(label,.settings-field,.settings-field-title) { gap:5px; }
.settings-panel .settings-profile-picture { margin-bottom:12px; gap:12px; }
.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:var(--hover-transition); }
.settings-fields input:hover:where(:not([data-touch-input] *)):not(:disabled), .settings-fields select:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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:var(--hover-transition),transform 140ms ease; }
.settings-choice-option:hover:where(:not([data-touch-input] *)):not(:disabled):not(:has(input:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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:var(--hover-transition),transform 140ms ease; }
.settings-accent-option:hover:where(:not([data-touch-input] *)):not(:disabled):not(:has(input:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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:#efa9c4; }
.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:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.settings-toggle-grid .toggle-field { min-width:0; min-height:44px; padding:7px 10px; display:flex; align-items:center; gap:8px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--paper,#f7f5ef); color:var(--ink,#262823); font-size:.8rem; line-height:1.4; cursor:pointer; transition:var(--hover-transition),transform 140ms ease; }
.settings-toggle-grid .toggle-field:hover:where(:not([data-touch-input] *)):not(:has(input:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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-panel[data-settings-panel="planning"] .settings-background-motion { grid-column:auto; }
.settings-planning-preview { margin-top:22px; }
.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); border-bottom-color:transparent; }
.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:0; border-radius:var(--pill-radius,var(--custom-radius,999px)); font-size:.72rem!important; font-weight:680!important; white-space:nowrap; transition:var(--hover-transition); }
.guest-clear-trigger[aria-expanded="true"] { --pill-fill:color-mix(in srgb,var(--danger,#a33a34) 18%,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:0; border-radius:var(--custom-radius,7px); background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); font-size:.62rem; text-transform:uppercase; transition:var(--hover-transition); }
.recurrence-days label:hover:where(:not([data-touch-input] *)) input:not(:checked):not(:disabled) + span { background:var(--hover-background); color:var(--hover-color); }
.recurrence-days input:checked + span { background:var(--planner-action-fill,var(--accent,#c76345)); color:var(--planner-action-ink,var(--custom-accent-ink,#19141c)); }
.recurrence-days input:focus-visible + span { outline:2px solid var(--focus,#66685f)!important; outline-offset:2px!important; }
@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:0; border-radius:var(--custom-radius,9px); background:var(--paper-deep,#eeebe2); color:var(--ink,#262823); font-size:.75rem; font-weight:500; text-transform:uppercase; transition:var(--hover-transition),transform 140ms ease; }
.settings-days label:hover:where(:not([data-touch-input] *)) input:not(:checked):not(:disabled) + span { background:var(--hover-background); color:var(--hover-color); }
.settings-days label:active span { transform:scale(.97); }
.settings-days input:checked + span { background:var(--planner-action-fill,var(--accent,#c76345)); color:var(--planner-action-ink,var(--custom-accent-ink,#19141c)); }
:is(.recurrence-days,.settings-days) label:hover:where(:not([data-touch-input] *)) input:checked:not(:disabled) + span { background:var(--solid-accent-hover-background); color:var(--solid-accent-hover-color); }
.settings-days input:focus-visible + span { outline:2px solid var(--focus,#66685f)!important; outline-offset:2px!important; }
@media (forced-colors:active) {
    :is(.recurrence-days,.settings-days) span { background:ButtonFace; color:ButtonText; outline:1px solid ButtonText; outline-offset:-1px; }
    :is(.recurrence-days,.settings-days) input:checked + span { forced-color-adjust:none; background:Highlight; color:HighlightText; }
    :is(.recurrence-days,.settings-days) input:focus-visible + span { outline-color:Highlight!important; }
}
.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] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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:0; border-radius:var(--pill-radius,var(--custom-radius,999px)); font-weight:670; text-decoration:none; }

.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] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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-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; justify-content:center; 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; text-align:center; }
.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-list { max-height:min(300px,45dvh); overflow-y:auto; overscroll-behavior:contain; }
.account-security-list.account-security-session-list li { grid-template-columns:minmax(0,1fr) auto; padding:10px; }
.account-security-session-list .account-security-session-remove { grid-column:auto; justify-self:end; align-self:center; padding:8px; }
.account-security-session-list:focus-visible { outline:2px solid var(--accent,#c76345); outline-offset:3px; }
.settings-panel > .reminder-devices-settings { margin-top:20px; }
.account-security-session-list .account-security-row-heading { gap:4px 8px; }
.account-security-session-list .account-security-row-heading strong { font-size:.8125rem; line-height:1.35; }
.account-security-session-list .account-security-current-badge { padding:1px 5px; font-size:.65rem; }
.account-security-session-list .account-security-meta { gap:1px 12px; margin-top:2px; font-size:.75rem; line-height:1.35; }
.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; font-size:.8125rem; }
.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); transition:var(--hover-transition); }
.notification-card.is-unread { border-left:4px solid var(--accent,#c76345); }
.notification-card:hover:where(:not([data-touch-input] *)):has(> .notification-content:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
@media (prefers-reduced-motion:reduce) { .notification-card { transition:none; } }
.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] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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:var(--hover-transition),transform 140ms ease; }
.sharing-refresh:hover:where(:not([data-touch-input] *)):not(:disabled) { border-color:var(--hover-border); color:var(--hover-color); background:var(--hover-background); }
.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; font-size:.75rem; }
.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; font-size:.8125rem; font-weight:650; cursor:pointer; transition:var(--hover-transition),transform 140ms ease; }
.sharing-create-option:active:not(:disabled) { transform:scale(.99); }
.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:var(--hover-transition),transform 140ms ease; }
.sharing-visibility-option:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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-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; width:30px; height:30px; }
.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; font-size:.6875rem; }
.sharing-record-action:not(.pill-control) { border:0; border-radius:7px; background:transparent; color:var(--ink-soft,#66685f); }
.sharing-record-action:not(.pill-control):hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--danger,#a33a34); }
.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; font-size:.6875rem; }
.sharing-record-confirmation :is(.sharing-confirm-replace,.sharing-confirm-disable) { font-weight:680; }
.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-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:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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) max-content max-content; 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) max-content; }
    .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:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.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); }
body:has(.forever-board:is(.is-expanded,[data-board-animating])) .task-details-layer { z-index:205; }
.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; }
/* Keep the outer paint/clip boundary stable while header menus open and update.
   Scrolling content, pictures and decorative light own their local clipping. */
.task-details-dialog { --task-details-content-inset:24px; 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:visible; 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 var(--task-details-content-inset); }
.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(--hover-background); color:var(--hover-color); }
.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:var(--hover-transition); }
.task-details-dialog > header button:not(.planner-picker-popover button,.task-focus-action):hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.task-details-dialog > header .task-delete-button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--danger,#a33a34); }
.task-week-picker { display:grid; place-items:center; flex:none; }
.task-color-toggle, .task-week-toggle { position:relative; }
.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-deadline-toggle,.task-reminders-toggle,.task-comments-toggle,.task-assignment-toggle,.task-attachments-toggle)[data-enabled="true"] { color:var(--accent,#c76345); background:color-mix(in srgb,var(--accent,#c76345) 12%,var(--surface,#fffdf8)); }
.task-details-dialog > header button[aria-expanded="true"]:not(.planner-picker-popover button,.task-focus-action) { color:var(--open-color); background:var(--open-background); }
.task-reminders-toggle { position:relative; }
.task-details-actions .task-alert-indicator { --task-icon-size:18px; color:inherit; }
.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; }
/* Keep the attachment total readable beside the Premium upload lock. */
.task-attachments-toggle:has(.task-attachments-count) > .task-feature-lock,
.task-action-bar button[data-task-action="attachments"]:has(.task-attachments-count) > .task-feature-lock { right:auto; left:0; }
.task-feature-lock > svg { display:block; margin:0; }
/* Center the lock artwork (y=3..20) within its 24-unit viewBox. */
.task-feature-lock > svg > path { transform:translateY(.5px); }
[data-premium-required]:has(> .task-feature-lock) { position:relative; }
.task-feature-lock.premium-field-lock { position:static; display:inline-grid; margin-inline-start:.25rem; vertical-align:middle; flex: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); }
/* Task tools reveal immediately while managed controls initialize.
   Retained panels and Copy share the short menu fade and glide. */
.task-details-popover:not([hidden]), .task-quick-settings, .task-timing-picker, .task-copy-dialog[data-open="true"] { animation:task-tool-popover-enter var(--dropdown-enter-duration) var(--dropdown-easing); }
.task-details-popover[hidden], .task-copy-dialog:not([data-open="true"]) { animation:none; }
.task-timing-picker[hidden], .task-timing-picker[popover]:not(:popover-open),
.task-quick-settings[hidden], .task-quick-settings[popover]:not(:popover-open) { animation:none; }
[data-task-picker-panel][hidden] { display:none; }
.task-quick-settings[data-task-tool-reopening] { animation:none; }
.task-details-popover[data-task-popover-resizing], .task-quick-settings[data-task-popover-resizing] { overflow:hidden; }
.task-quick-settings[data-task-popover-resizing], body:has(.task-quick-settings[data-task-popover-resizing]) .task-action-bar { transition:top 260ms cubic-bezier(.22,.8,.25,1); }
.task-details-dialog .task-details-popover { max-height:var(--task-header-popover-max-height,calc(100% - var(--task-header-popover-top,48px) - 18px)); }
.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] *)):where(:not(:disabled)) { color:var(--hover-color); background:var(--hover-background); }
.task-comments-popover { width:min(460px,calc(100% - 28px)); }
.task-details-popover[hidden] { display:none; }
.task-repeat-popover, .task-attachments-popover { width:min(640px,calc(100% - 28px)); }
.task-timing-popover, .task-deadline-popover, .task-reminder-popover { width:min(360px,calc(100% - 28px)); padding:12px; }
.task-timing-popover > header, .task-deadline-popover > header { margin-bottom:8px; }
.task-repeat-popover { width:min(340px,calc(100% - 28px)); }
.task-assignment-popover { width:min(320px,calc(100% - 28px)); }
.task-color-popover { width:min(440px,calc(100% - 28px)); }
/* Keep asynchronous picture metadata and library results inside the editor's
   scroller instead of changing its opening size. The viewport cap still applies. */
.task-details-dialog .task-color-popover, .task-quick-settings[data-feature="appearance"] { height:52rem; }
.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:4px; padding-top:6px; }
}
.board-color-editor, .board-color-popover[data-board-color-popover] { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:12px 16px; }
.board-color-editor { display:grid; padding-top:12px; border-top:1px solid var(--line,#dcd8ce); }
.board-color-editor > h4 { grid-column:1 / -1; margin:0; color:var(--ink,#262823); font-size:.8rem; line-height:1.4; font-weight:650; }
/* Embedded color editors share their grid with the host opacity control. */
.board-color-editor .board-color-picker-embedded, .board-color-editor .board-color-popover-host, .board-color-editor .board-color-popover { display:contents; }
.board-color-popover[data-board-color-popover] > .board-color-popover-header { grid-column:1 / -1; grid-row:1; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-wheel { grid-column:1; grid-row:2 / 4; width:min(190px,90%); margin:0; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-brightness { grid-column:1 / -1; grid-row:4; min-width:0; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-opacity { grid-row:5; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-hex-row { grid-column:2; grid-row:3; min-width:0; padding:0; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-hex-row label { flex-wrap:wrap; gap:5px; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-preview { display:none; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-theme-section { grid-column:2; grid-row:2; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-presets { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) :is(.board-color-error,.board-saved-colors) { grid-column:1 / -1; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-saved-colors { grid-row:6; gap:6px; padding-top:8px; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-footer { gap:4px; flex-wrap:wrap; }
:is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-preset { min-height:30px; }
.board-color-popover[data-board-color-popover][data-compact="true"] { gap:9px 12px; }
.board-color-popover[data-board-color-popover]:has(.board-color-opacity[hidden]) .board-saved-colors { grid-row:5; }
/* A restricted palette has no wheel or custom fields to reserve space for. */
.board-color-popover[data-board-color-popover][data-custom-colors="false"] { width:320px; grid-template-columns:minmax(0,1fr); }
.board-color-popover[data-custom-colors="false"] :is(.board-color-theme-section,.board-color-opacity) { grid-column:1 / -1; grid-row:auto; }
.board-color-popover[data-custom-colors="false"] .board-color-presets { grid-template-columns:repeat(6,minmax(0,1fr)); }
.board-color-editor:has(.board-color-popover[data-custom-colors="false"]) .board-color-theme-section { grid-column:1 / -1; }
@media (max-width:380px) {
    .board-color-editor, .board-color-popover[data-board-color-popover] { column-gap:12px; }
    :is(.board-color-editor,:where(.board-color-popover[data-board-color-popover])) .board-color-range-heading { flex-wrap:wrap; gap:4px; }
}

.task-timing-popover .task-timing-grid { display:grid; margin:0; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:8px; }
.task-deadline-popover .task-timing-grid { display:grid; grid-template-columns:minmax(0,1fr); }
.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:var(--hover-transition); }
.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:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
.task-timing-trigger[aria-expanded="true"] { border-color:var(--open-border); background:var(--open-background); color:var(--open-color); }
.task-timing-trigger[aria-expanded="true"] :is(svg,.task-timing-value,.task-timing-value small) { color:var(--open-color); }
.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); }
.task-timing-picker-inline { margin:0; padding:0; border:0; background:transparent; animation:none; }
.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-deadline-actions { display:flex; justify-content:flex-start; margin-top:8px; }
.task-deadline-clear { min-height:40px; min-width:64px; padding:0 16px; font-size:.8125rem; transition:var(--hover-transition),opacity 140ms ease,transform 120ms ease; }
.task-deadline-clear:active:not(:disabled) { transform:scale(.96); }
.task-picker-icon:hover:where(:not([data-touch-input] *)):not(:disabled), .task-picker-clear:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.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(--hover-background); color:var(--hover-color); }
/* 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); }
.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(--hover-background); color:var(--hover-color); }
.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(--hover-background); opacity:1; color:var(--hover-color); }
/* 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(--hover-background); color:var(--hover-color); }
.task-deadline-time { align-self:stretch; grid-template-rows:auto minmax(0,1fr); align-items:start; padding-top:4px; }
.task-deadline-time > .planner-time-options { height:100%; align-content:space-between; }
.task-deadline-time .task-timing-trigger { min-height:44px; padding:8px; }
.task-deadline-time .task-timing-trigger:not([aria-expanded="true"]) { 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) { background:var(--hover-background); color:var(--hover-color); }
.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-inline { min-width:0; margin:2px 0 0; padding:8px; }
.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:var(--hover-transition); }
.week-picker-trigger > span { min-width:0; }
.week-picker-trigger > svg { flex:none; color:var(--ink-soft);  }
.week-picker-trigger:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.week-picker-trigger[aria-expanded="true"] { background:var(--open-background); color:var(--open-color); }
.week-picker-trigger[aria-expanded="true"] > svg { color:var(--open-color); }
.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; }
/* Reserve six weeks, each with room for two date lines plus row padding and borders. */
.week-picker-weeks { display:grid; grid-template-rows:repeat(6,minmax(max(53px,calc(2 * .79rem * 1.4 + 20px)),auto)); 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:var(--hover-transition); }
.planner-week-row:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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; color:var(--ink-soft); font-size:.72rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.planner-week-row.has-tasks .week-picker-count { color:var(--ink); }
@media (prefers-reduced-motion:no-preference) {
    .week-picker-count { transition:color 160ms ease; }
    .week-picker-count-text { animation:focus-label-enter 160ms ease-out; }
}
.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-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] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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:minmax(0,1fr); grid-template-rows:auto auto; gap:8px; padding:0; }
    .planner-picker-popover .task-picker-done { margin:0; }
}
.task-timing-popover .editor-toggles { margin:12px 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, .reminder-form.reminder-form--plain { grid-template-columns:minmax(0,1fr); margin:0; padding:0; border:0; border-radius:0; background:transparent; gap:8px; }
.reminder-timing-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:8px; align-items:stretch; }
.reminder-timing-grid > .task-timing-field { grid-template-rows:auto 1fr; }
.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] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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-snackbar { display:flex; flex-direction:column; gap:14px; width:100%; }
.reminder-device-heading { display:flex; align-items:center; gap:12px; font-size:1.05rem; line-height:1.35; font-weight:600; font-family:var(--planner-heading,var(--planner-font,system-ui,sans-serif)); }
.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-description { color:var(--ink-soft,#66685f); font-size:.88rem; line-height:1.6; }
.reminder-device-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.reminder-device-actions button { min-height:42px; padding:9px 16px; border-radius:10px; font-family:var(--planner-font,system-ui,sans-serif); font-size:.82rem; }
.reminder-device-snackbar :focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:3px; }
@media (max-width:540px) { .reminder-device-actions 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; padding-inline-end:12px; border:0; border-radius:0; border-bottom:1px solid var(--line,#dcd8ce); background:transparent; }
.task-reminder-popover .reminder-summary { padding:8px 0 12px 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; width:44px; min-width:44px; border:0; border-radius:7px; }
.task-reminder-popover .reminder-remove:hover:where(:not([data-touch-input] *)):not(:disabled) { color:var(--danger,#a33a34); background:var(--hover-background); }
.task-reminder-popover .reminder-actions, .reminder-form--plain .reminder-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; margin:0; gap:8px; }
.task-reminder-popover .reminder-actions button, .reminder-form--plain .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-popover .recurrence-form { --task-repeat-field-height:42px; contain:inline-size; margin:0; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:14px 10px; }
.task-repeat-wide { grid-column:1 / -1; }
.task-repeat-cadence { grid-column:1; grid-row:1; align-self:end; min-width:0; margin:0; padding:0; border:0; }
.task-repeat-end { grid-column:2; grid-row:1; align-self:end; }
.task-repeat-cadence legend { margin-bottom:5px; padding:0; color:var(--ink-soft,#66685f); font-size:.8125rem; }
.task-repeat-cadence-fields { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:8px; }
.task-repeat-popover .slider-range-number .board-percent-field { height:var(--task-repeat-field-height); min-height:var(--task-repeat-field-height); }
.task-repeat-unit-trigger > select { color:transparent!important; }
.task-repeat-unit-label { position:absolute; inset:0 25px 0 9px; display:flex; align-items:center; overflow:hidden; color:var(--ink); font-size:1rem; line-height:1.05; pointer-events:none; text-overflow:clip; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent); }
.task-repeat-unit-label.is-multiline { white-space:normal; overflow-wrap:normal; }
.task-repeat-unit-label:dir(rtl) { -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 6px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 6px),transparent); }
@media (forced-colors:active) { .task-repeat-unit-label { color:CanvasText; -webkit-mask-image:none; mask-image:none; } }
.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:var(--task-repeat-field-height); font-size:1rem; }
.task-repeat-popover .recurrence-days span { width:36px; height:36px; font-size:.8125rem; text-transform:none; }
.task-repeat-actions, .task-repeat-commit-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.task-repeat-actions { margin-top:14px; }
.task-repeat-commit-actions { margin-inline-start:auto; justify-content:flex-end; }
.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 var(--task-details-content-inset); overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.task-details-scroll > * { flex-shrink:0; }
/* Move the intact card above the keyboard without extending its content. */
.task-details-dialog { translate:0 var(--task-keyboard-offset,0px); }
[data-keyboard-card-owner][data-keyboard-dragging] { user-select:none; cursor:grabbing; }
.task-details-title-row { display:flex; align-items:center; gap:8px; min-width:0; }
.task-details-title-row > .task-check { flex-shrink:0; align-self:center; margin:0; }
.task-details-title-row > .task-check > .task-check-ring { justify-self:start; }
.task-details-title-row > .title-input { min-width:0; flex:1; }
.task-details-title-row > [data-task-title-host] { min-width:0; flex:1; }
.task-details-title-row > [hidden] { display:none!important; }
.task-title-rich-input { white-space:pre-wrap; caret-color:var(--planner-selection-accent,var(--accent)); transition:var(--hover-transition); }
.task-title-rich-input p, .task-title-rich-input div { margin:0; }
.task-title-rich-input ul, .task-title-rich-input ol { margin:4px 0; padding-inline-start:1.5em; }
.task-title-rich-input li { margin:0; }
[data-description-list-media] :is([data-description-gif],[data-task-inline-image],[data-task-inline-attachment]),
[data-description-list-media] :is([data-description-gif],[data-task-inline-image],[data-task-inline-attachment]) * { display:inline!important; user-select:text!important; -webkit-user-select:text!important; }
:is(.task-title-rich-input,.task-description-input,[data-task-title-autosize])[data-task-media-drop] { outline:2px dashed var(--accent); outline-offset:2px; }
/* Media inside a writing row needs an inline box for native caret placement. */
.task-title-rich-input [data-description-gif],
.task-description-input :is(p, li, div) [data-description-gif],
:is(.task-title-rich-input,.task-description-input,.task-title-rich) [data-task-inline-image] { display:inline-block; max-width:100%; margin-block:6px; vertical-align:bottom; border-radius:var(--component-radius,10px); overflow:hidden; }
:is(.task-title-rich-input,.task-description-input,.task-title-rich) [data-task-inline-image] img { display:block; max-width:100%; max-height:320px; width:auto; height:auto; object-fit:contain; }
:is(.task-title-rich-input,.task-description-input,.task-title-rich) :is([data-task-inline-image],[data-description-gif]):is([data-task-media-width],[data-task-media-resizing]) { width:var(--task-media-width); max-width:100%; min-height:0; }
:is(.task-title-rich-input,.task-description-input,.task-title-rich) :is([data-task-inline-image],[data-description-gif]):is([data-task-media-width],[data-task-media-resizing]) > img { width:100%; height:auto; max-height:none; }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-image] > span:not([hidden]) { display:inline-block; padding:12px; border:1px solid var(--line); border-radius:inherit; }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-attachment] { display:inline-flex; align-items:center; gap:.35em; max-width:100%; margin-inline:2px; padding:.2em .45em; border:1px solid var(--line); border-radius:var(--component-radius,10px); background:var(--paper-deep); color:var(--ink); font:inherit; vertical-align:bottom; transition:var(--hover-transition); }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-attachment] > svg { flex:none; width:1em; height:1em; pointer-events:none; }
:is(.task-title-rich-input,.task-description-input) .task-inline-attachment-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-attachment][role="button"] { cursor:pointer; }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-attachment][role="button"]:hover:where(:not([data-touch-input] *)) { background:var(--hover-background); color:var(--hover-color); border-color:var(--hover-border); }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-attachment]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { :is(.task-title-rich-input,.task-description-input) [data-task-inline-attachment] { transition:none; } }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-media-locked] { display:inline; max-width:none; min-height:0; height:auto; margin:0; padding:0; border:0; border-radius:0; overflow:visible; background:transparent; color:inherit; font:inherit; vertical-align:baseline; cursor:inherit; }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-media-locked] > svg { display:none; }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-image][data-task-inline-media-locked] > span:not([hidden]) { display:inline; padding:0; border:0; border-radius:0; }
:is(.task-title-rich-input,.task-description-input) [data-task-inline-media-locked] .task-inline-attachment-name { overflow:visible; text-overflow:clip; white-space:inherit; }
.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, textarea.planner-inline-field { field-sizing:content; height:auto; }
    .task-details-scroll .title-input { field-sizing:content; height:auto; }
    .task-details-dialog .task-description-editor > textarea { 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-heading .task-description-toolbar { flex-wrap:nowrap; min-width:0; overflow-x:auto; scrollbar-width:none; }
.task-description-heading .task-description-toolbar::-webkit-scrollbar { display:none; }
.task-description-font-size[hidden] { display:none!important; }
.task-description-font-size:not([hidden]) { animation:task-option-appear 160ms cubic-bezier(.22,1,.36,1); }
.task-description-font-size .slider-number-field { width:88px; min-width:88px; --drawing-value-width:88px; }
@media (max-width:600px) {
    .task-description-heading .task-description-toolbar { width:100%; gap:0; }
    .task-description-heading .task-description-toolbar > button { flex:1 0 24px; width:24px; min-width:24px; max-width:36px; height:36px; }
    .task-description-heading .task-description-toolbar-divider { margin-inline:2px; }
    .task-description-font-size .board-percent-field { height:36px; min-height:36px; }
    .task-description-heading .task-description-font-size .board-percent-field input { min-height:0; height: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); transition:var(--hover-transition); }
.task-description-heading .task-description-toolbar > button > svg { width:20px; height:20px; }
.task-description-toolbar > button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.task-description-toolbar > button:focus-visible:not(:disabled), .task-description-toolbar > button[aria-pressed="true"]:not(:disabled) { background:color-mix(in srgb,var(--accent,#c76345) 14%,transparent); color:var(--accent,#c76345); }
.task-description-toolbar > button:focus-visible { outline:2px solid var(--accent,#c76345); outline-offset:1px; }
.task-description-toolbar > button:disabled { opacity:.35; cursor:default; }
@media (prefers-reduced-motion:reduce) { .task-description-toolbar > button { transition:none; } .task-description-font-size { animation:none!important; } }
.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] { position:relative; display:flex; flex:1 1 0; min-height:0; flex-direction:column; min-width:0; }
.description-list-motion { position:absolute; inset:0; overflow:hidden; pointer-events:none; user-select:none; contain:strict; }
@property --description-format-ink { syntax:'<percentage>'; inherits:true; initial-value:100%; }
@media screen and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
    [data-description-format-motion]::highlight(yakoplan-description-format), [data-description-format-motion] *::highlight(yakoplan-description-format) { color:color-mix(in srgb,currentColor var(--description-format-ink),transparent); }
    [data-description-format-motion]::selection, [data-description-format-motion] *::selection { color:color-mix(in srgb,var(--ink,currentColor) var(--description-format-ink),transparent); }
}
.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; }
/* Keep checkbox pops, focus rings and exiting markers inside the scroll clip
   without moving the description text or changing its available width. */
.task-details-dialog .task-description-editor[data-description-ready] > [data-task-description-host] { margin-inline:-6px; }
.task-details-dialog .task-description-input { padding-inline:6px; }
.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; }
[data-description-gif] { display:block; position:relative; width:min(100%,320px); min-height:64px; margin-block:6px; overflow:hidden; border-radius:var(--component-radius,10px); white-space:normal; user-select:all; }
[data-description-gif] > img { display:block; width:100%; height:auto; max-height:320px; object-fit:contain; pointer-events:none; }
[data-description-gif]:not([data-chat-gif-preview]) > span:not([hidden]) { display:block; padding:12px; border:1px solid var(--line,#7775); border-radius:inherit; font-size:.875rem; overflow-wrap:anywhere; }
.task-description-input [data-description-gif-preview] { cursor:zoom-in; transition:var(--hover-transition); }
.task-description-input [data-description-gif-preview]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(hover:hover) { .task-description-input [data-description-gif-preview]:hover:where(:not([data-touch-input] *)) { background:var(--hover-background); color:var(--hover-color); } }
@media(forced-colors:active) { .task-description-input [data-description-gif-preview]:focus-visible { outline-color:Highlight; } }
@media(prefers-reduced-motion:reduce) { .task-description-input [data-description-gif-preview] { transition:none; } }
.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); }
/* Grow with the description, like the title, and scroll the whole details body.
   Keep the writing area filled for short drafts and when the keyboard opens. */
.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 0 auto; min-height:auto; }
.task-details-dialog .task-description-input { overflow:visible; overscroll-behavior:auto; scrollbar-gutter:auto; }
.task-details-dialog .task-description-editor[data-description-ready] > [data-task-description-host],
.task-details-dialog .task-description-editor > textarea { min-height:12lh; }
/* 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:var(--hover-transition); }
.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); } }
.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:var(--hover-transition); }
@media (hover:hover) {
    .task-description-input .description-checklist-toggle:hover:where(:not([data-touch-input] *)):not(:disabled)::before,
    .description-checklist .checklist-row > input[type="checkbox"]:hover:where(:not([data-touch-input] *)):not(:disabled)::before { background:var(--hover-background); border-color:var(--hover-border); }
    .task-description-input .description-checklist-toggle[aria-checked="true"]:hover:where(:not([data-touch-input] *)):not(:disabled)::before,
    .description-checklist .checklist-row > input[type="checkbox"]:checked:hover:where(:not([data-touch-input] *)):not(:disabled)::before { background:var(--solid-accent-hover-background); border-color:var(--solid-accent-hover-background); }
    .description-checklist .checklist-row > button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
}
@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] *)):where(:not(:disabled)) { color:var(--hover-color); background:var(--hover-background); }
.task-activity-toggle:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:3px; border-radius:3px; }
.task-activity-reveal { display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-4px); visibility:hidden; transition:grid-template-rows 200ms ease-out,opacity 200ms ease-out,transform 200ms ease-out,visibility 0s linear 200ms; }
.task-activity-reveal[data-expanded="true"] { grid-template-rows:1fr; opacity:1; transform:translateY(0); visibility:visible; transition-delay:0s; }
.task-activity-content { min-height:0; max-height:min(320px,42dvh); overflow:auto; overscroll-behavior:contain; }
.task-activity-content:focus-visible { outline:2px solid var(--focus,#66685f); outline-offset:2px; border-radius:4px; }
@media (pointer:coarse) { .task-activity-toggle { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .task-activity-reveal,.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:0; border-radius:10px; box-shadow:none; font-size:.875rem; font-weight:600; line-height:1.4; text-align:center; transition:var(--hover-transition),box-shadow 160ms ease,transform 120ms ease; }
/* Keep the filled action above generic header-button resets in every task editor. */
.task-details-dialog .task-focus-action { background:var(--planner-action-fill,var(--accent,#c76345)); color:var(--planner-action-ink,#19141c); }
.task-focus-action { --hover-background:var(--solid-accent-hover-background); --hover-color:var(--solid-accent-hover-color); }
.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) {
    /* Align visible close/emoji strokes and the editor underline at the content
       edge, accounting for SVG whitespace and the editor's focus-ring padding. */
    .task-details-dialog > header { padding-inline-end:calc(var(--task-details-content-inset) - 12px); }
    .task-details-scroll { padding-inline-end:calc(var(--task-details-content-inset) + 6px); }
    .task-description-heading .task-description-toolbar { margin-inline-end:-16px; }
    .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 > .task-focus-action-label { 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) { background:var(--hover-background); color:var(--hover-color); }
}
.task-focus-action:focus-visible { outline:2px solid var(--focus,#66685f)!important; outline-offset:3px!important; }
.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-details-dialog .task-focus-action { border-color:ButtonText; background:ButtonFace; color:ButtonText; box-shadow:none; }
    .task-focus-action:focus-visible { outline-color:Highlight!important; }
}
.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] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
.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-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(--planner-selection-accent,var(--accent,#c76345));
}
.task-details-dialog.is-colored > header button:not(.task-focus-action) { background:transparent; }
.task-details-dialog.is-colored > header .task-color-toggle[data-enabled="true"] { background:transparent; }
.task-details-dialog.is-colored > header button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.task-details-dialog.is-colored > header button[aria-expanded="true"]:not(:disabled) { background:var(--open-background); color:var(--open-color); }
.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); } }
@media (prefers-reduced-motion:no-preference) {
    .chat-appearance-editor, .chat-background-editor { animation:task-option-appear 160ms ease-out; }
}
/* 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) {
    /* Align the editor with the inner edges of the phone's app bars. */
    .task-details-layer { --task-details-phone-top:calc(var(--planner-mobile-topbar-height,56px) + env(safe-area-inset-top)); --task-details-phone-bottom:var(--planner-mobile-toolbar-inset,calc(57px + env(safe-area-inset-bottom))); --task-details-phone-max-height:calc(100dvh - var(--task-details-phone-top) - var(--task-details-phone-bottom)); padding-block:var(--task-details-phone-top) var(--task-details-phone-bottom); }
    .task-details-dialog { --task-header-safe-top:env(safe-area-inset-top,0px); --task-header-safe-bottom:env(safe-area-inset-bottom,0px); 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-scroll .task-title-rich-input:has([data-description-gif],[data-task-inline-image]:not([data-task-inline-media-locked]),[data-task-inline-video]) { max-height:none; overflow-y:visible; }
}
@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-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)); }
    .task-details-dialog { --task-details-content-inset:16px; --task-header-popover-top:104px; border-radius:16px; }
    .task-details-dialog > header { grid-template-columns:minmax(0,1fr) 44px; padding:8px 8px 0 calc(var(--task-details-content-inset) - 10px); }
    .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; }
    /* Align the visible trash strokes, rather than its padded SVG viewBox. */
    .task-details-dialog > header .task-delete-button > svg { position:relative; inset-inline-start:-6px; }
    .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(> :nth-child(9 of button:not(.task-copy-link-button))) { width:min(100%,260px); grid-template-columns:repeat(5,minmax(0,44px)); }
    .task-details-dialog > header .task-details-safe-actions:has(> :nth-child(11 of button:not(.task-copy-link-button))) { 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 > header .task-copy-link-button { position:absolute; top:54px; right:8px; width: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-timing-popover, .task-deadline-popover, .task-reminder-popover { width:min(360px,calc(100% - 20px)); }
    .task-repeat-popover { width:min(340px,calc(100% - 20px)); }
    .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); 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-popover .recurrence-days span { height:44px; }
    .task-details-scroll { padding:8px 18px 12px var(--task-details-content-inset); }
    /* Keep the desktop title spacing within the narrower phone gutter. */
    .task-details-title-row > .task-check { width:36px; height:44px; margin-inline-start:-12px; }
    .task-details-title-row > .task-check > .task-check-ring { justify-self:end; }
    /* The first formatting glyph starts inside its SVG viewBox too. */
    .task-description-heading .task-description-toolbar { margin-inline-start:-13px; }
    .task-description-heading .task-description-toolbar > button:first-child { flex:0 0 36px; }
    .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:540px) {
    .task-deadline-popover, .task-quick-settings:has(.task-deadline-picker-body) { padding:12px; scroll-padding-block:8px 64px; }
    .task-deadline-popover > header { margin-bottom:6px; }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body { display:block; }
    /* The footer belongs to the whole picker, including the calendar above it. */
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-time,
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-time > .planner-time-options { display:contents; }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-time > .planner-picker-label { display:block; margin:8px 0 6px; padding-top:8px; border-top:1px solid var(--line,#dcd8ce); }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body .planner-time-wheel-footer { position:sticky; bottom:-12px; z-index:2; align-items:center; min-height:56px; margin:4px -12px -12px; padding:8px 12px 12px; background:var(--surface,#fffdf8); }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body .planner-time-wheel-footer .task-picker-done { min-height:40px; }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body .planner-calendar-nav { margin-bottom:4px; }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body .planner-calendar-weekdays { margin-bottom:2px; }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body .planner-calendar-weekdays span { padding-block:2px; }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body .planner-calendar-grid { row-gap:1px; }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body .planner-calendar-day { min-height:34px; padding-block:2px; }
    :is(.task-deadline-popover,.task-quick-settings) .task-deadline-picker-body :is(.planner-calendar-day,[data-time-wheel-input]) { scroll-margin-block:4px 64px; }
}
.task-deadline-dropdowns { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:stretch; gap:8px; }
.task-deadline-dropdowns .task-timing-field { grid-template-rows:auto 1fr; }
.task-timing-picker-inline .task-deadline-inline-clear { display:none; }
.task-timing-picker-inline[data-phone-deadline-picker=""] { display:none; }
.task-timing-fields .task-timing-picker-inline:not([data-phone-deadline-picker=""]) { margin-top:8px; padding:8px; border:1px solid var(--line,#dcd8ce); background:var(--paper,#f7f5ef); animation:task-tool-popover-enter var(--dropdown-enter-duration) var(--dropdown-easing); }
.task-timing-picker-inline .task-deadline-picker-body { display:block; }
.task-timing-picker-inline:not([data-phone-deadline-picker="date"]) .task-deadline-date,
.task-timing-picker-inline:not([data-phone-deadline-picker="time"]) .task-deadline-time { display:none; }
.task-timing-picker-inline[data-phone-deadline-picker="time"] .task-deadline-time { display:block; padding-top:0; border-top:0; }
.task-timing-picker-inline[data-phone-deadline-picker="date"] .task-deadline-date, .task-timing-picker-inline[data-phone-deadline-picker="time"] .task-deadline-time { animation:task-tool-popover-enter var(--dropdown-enter-duration) var(--dropdown-easing); }
.task-timing-picker-inline .task-deadline-time > .planner-picker-label { display:none; }
.task-timing-picker-inline .task-deadline-time > .planner-time-options { display:grid; }
:is(.task-deadline-popover,.task-quick-settings) .task-timing-picker-inline .planner-time-wheel-footer { position:static; min-height:40px; margin:4px 0 0; padding:0; background:transparent; }
/* Nested task tools use the native top layer while retaining their editor's
   DOM, theme, focus and callbacks. A calendar or clock never expands its tool. */
.task-timing-picker[data-task-picker-floating] { position:fixed; inset:auto; z-index:100; box-sizing:border-box; width:320px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); margin:0; padding:12px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line,#dcd8ce); border-radius:12px; background:var(--surface,#fffdf8); color:var(--ink,#262823); font-family:var(--planner-font); box-shadow:0 12px 40px #0003; }
.task-timing-fields .task-timing-picker[data-task-picker-floating] { margin:0; padding:12px; }
.task-timing-picker[data-task-picker-floating]::backdrop { background:transparent; pointer-events:none; }
@media (prefers-reduced-motion:reduce) {
    .task-timing-fields .task-timing-picker-inline { animation:none; }
    .task-timing-picker-inline :is(.task-deadline-date,.task-deadline-time) { animation:none; }
    .task-deadline-clear { transition:none; }
    .task-deadline-clear:active:not(:disabled) { transform:none; }
}
@media (max-width:380px) {
    .task-repeat-cadence-fields { gap:6px; }
}
@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: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 { --task-action-size:44px; padding:6px; }
    .task-action-bar button { flex-basis:44px; width:44px; height:44px; border-radius:9px; }
    .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:340px) { .task-action-tools { column-gap:2px; } }
@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; } .task-quick-settings[data-task-popover-resizing], body:has(.task-quick-settings[data-task-popover-resizing]) .task-action-bar { transition: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:var(--pill-radius,var(--custom-radius,999px)); font-weight:680; }
.danger-button:disabled { opacity:.45; cursor:not-allowed; }

html:has(.focus-mode), body:has(.focus-mode) { overflow:hidden; }
body:has(.focus-mode) .planner-snackbar { display:none; }
.focus-mode .planner-snackbar[data-planner-snackbar] { display:flex; }
.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 { --hover-background:transparent; --hover-color:var(--ink,#262823); 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; cursor:pointer; }
/* Balance the header so the content is centered in the full viewport. */
.focus-mode > main { --focus-content-padding:clamp(16px,4dvh,44px); --focus-content-gap:clamp(20px,3dvh,32px); flex:1; min-height:0; width:min(calc(100% - 48px),1120px); margin:0 auto; padding:var(--focus-content-padding) 0 calc(var(--focus-content-padding) + 64px); display:flex; flex-direction:column; justify-content:safe center; gap:var(--focus-content-gap); 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-task-copy .rich-description-editor { max-width:760px; margin:16px auto 0; text-align:inherit; }
.focus-task-copy .task-description-source { text-align:inherit; }
.focus-task-copy .task-description-input :is(ul,ol,[data-description-checklist]) { text-align:start; }
.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 label:has(input:not(:disabled)) { cursor:pointer; }
.focus-checklist label:has(input:not(:disabled)):hover:where(:not([data-touch-input] *)) { background:var(--hover-background); color:var(--hover-color); border-color:var(--hover-border); }
.focus-checklist input { flex:none; margin-top:4px; accent-color:var(--accent,#c76345); }
.focus-checklist span { min-width:0; }
.focus-clock { --focus-ease:cubic-bezier(.22,1,.36,1); flex:none; min-width:0; width:min(100%,620px); margin:0 auto; container-type:inline-size; text-align:center; 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)); gap:2px; border:1px solid var(--topbar-control-border,color-mix(in srgb,var(--ink,#262823) 23%,transparent)); border-radius:10px; background:var(--topbar-control-fill,color-mix(in srgb,var(--ink,#262823) 4%,transparent)); }
.focus-mode-switch::before { content:""; position:absolute; z-index:-1; top:3px; bottom:3px; left:3px; width:calc(50% - 4px); border-radius:6px; background:var(--planner-action-fill,var(--accent,#c76345)); pointer-events:none; transition:transform 180ms var(--focus-ease),background-color 160ms ease; }
.focus-mode-switch[data-countdown="true"]::before { transform:translateX(calc(100% + 2px)); }
.focus-mode-switch button { min-height:30px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:6px; background:transparent; color:var(--ink-soft,#66685f); font-size:.8125rem; font-weight:600; line-height:1.2; white-space:nowrap; cursor:pointer; transition:var(--hover-transition),box-shadow 140ms ease,opacity 140ms ease; }
.focus-mode-switch button.selected { color:var(--planner-action-ink,#19141c); }
.focus-mode-switch button:disabled { cursor:not-allowed; opacity:.5; }
.focus-mode-switch button.selected:disabled { opacity:1; }
.focus-mode-switch button:focus-visible { outline:2px solid var(--focus,#225ecc); outline-offset:2px; }
.focus-clock > time { --rolling-clock-letter-spacing:-.04em; margin:16px 0; display:block; color:var(--accent,#c76345); font:500 clamp(2rem,min(17cqi,14dvh),7rem)/1 var(--planner-heading); font-family:var(--custom-font,"Yako Timer Digits",var(--planner-heading)); font-variant-numeric:tabular-nums; letter-spacing:var(--rolling-clock-letter-spacing); white-space:nowrap; transition:color 180ms ease; }
.focus-clock[data-playback="running"] > time { animation:focus-timer-engage 220ms var(--focus-ease); }
/* The digit face keeps the native caret aligned with the numerals instead of Japanese ascender space. */
@font-face { font-family:"Yako Timer Digits"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/zen-maru-gothic-latin-500.woff2") format("woff2"); ascent-override:75%; descent-override:5%; line-gap-override:0%; }
.focus-time-input { display:block; width:calc(8ch - .6em); max-width:100%; height:1.1em; min-width:0; margin-inline:auto; padding:0 .08em; border:0; border-radius:.1em; background:transparent; color:inherit; font:inherit; font-family:var(--custom-font,"Yako Timer Digits",var(--planner-heading)); line-height:1; letter-spacing:inherit; font-variant-numeric:tabular-nums; text-align:center; cursor:text; transition:var(--hover-transition),box-shadow 140ms ease; animation:none; }
.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:not(:disabled):hover:where(:not([data-touch-input] *)) { background:var(--hover-background); color:var(--hover-color); }
.focus-time-input:focus-visible { background:color-mix(in srgb,var(--ink,#262823) 6%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 35%,transparent); outline:0; }
.focus-time-input:not(:disabled):active { background:color-mix(in srgb,var(--accent,#c76345) 10%,transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent,#c76345) 50%,transparent); }
.focus-time-input:disabled { cursor:not-allowed; opacity:.5; }
.focus-time-input[aria-invalid="true"] { color:var(--danger,#a33a34); }
.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-reserve-space="true"] { grid-template-rows:1fr; }
.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); color:var(--ink,#262823); }
.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, .focus-controls .complete-focus { border:0; }
.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:var(--hover-transition),transform 140ms var(--focus-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:.85; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 45%,transparent); }
.complete-focus { display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:var(--pill-radius,var(--custom-radius,999px)); 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; }
/* Expand the history and its gap together so centering follows the reveal. */
.focus-history-reveal { --focus-history-gap:var(--focus-content-gap); flex:none; min-width:0; width:min(100%,760px); margin:calc(-1 * var(--focus-history-gap)) auto 0; display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 220ms var(--focus-ease),margin-top 220ms var(--focus-ease),opacity 220ms var(--focus-ease); }
.focus-history-reveal > div, .focus-history-saved-entry > div { min-height:0; overflow:hidden; }
.focus-history-reveal[data-open="true"] { grid-template-rows:1fr; margin-top:0; opacity:1; }
.focus-history-saved-entry { display:grid; grid-template-rows:1fr; animation:focus-history-save 220ms var(--focus-ease) backwards; }
.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; }
.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] *)):where(:not(:disabled)), .focus-controls > button:not(:disabled):hover:where(:not([data-touch-input] *)) { background:var(--hover-background); color:var(--hover-color); }
    .focus-mode > header > button:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { color:var(--hover-color); border-color:var(--hover-border); background:var(--hover-background); }
    .focus-controls .focus-primary:hover:where(:not([data-touch-input] *)):where(:not(:disabled)), .focus-controls .complete-focus:hover:where(:not([data-touch-input] *)):where(:not(:disabled)) { background:var(--hover-background); color:var(--hover-color); }
    .focus-mode-switch button:not(:disabled):hover:where(:not([data-touch-input] *)) { color:var(--hover-color); background:var(--hover-background); }
    .focus-mode-switch button.selected:not(:disabled):hover:where(:not([data-touch-input] *)) { color:var(--solid-accent-hover-color); background:transparent; }
    .focus-mode-switch:has(button.selected:not(:disabled):hover:where(:not([data-touch-input] *)))::before { background:var(--solid-accent-hover-background); }
    .focus-mode > header > button:active, .focus-controls > button:not(:disabled):active { transform:translateY(1px) scale(.97); box-shadow:none; }
}

@media (forced-colors:active) {
    .focus-clock .focus-mode-switch::before { background:Highlight; }
    .focus-clock .focus-mode-switch button.selected { forced-color-adjust:none; background:Highlight; color:HighlightText; }
    .focus-controls .focus-primary, .focus-controls .complete-focus { border-color:ButtonText; background:ButtonFace; color:ButtonText; }
}

@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-history-save { from { grid-template-rows:0fr; opacity:0; } to { grid-template-rows:1fr; opacity:1; } }
@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; } }
@container (max-width:480px) {
    .focus-clock > time { margin-block:16px; font-size:clamp(2rem,17cqi,3.75rem); }
    .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; }
}

@media (min-width:760px) and (max-height:600px) {
    .focus-mode > main { --focus-content-padding: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-reveal { --focus-history-gap:0px; grid-column:1; grid-row:2; }
    .focus-history { 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; }
    /* Float a narrow grip above the divider without reserving a row or covering tasks beside it. */
    .week-grid[data-weekend-resize-enabled] .weekend-resize-handle { display:block; position:absolute; top:-21px; inset-inline:auto; left:50%; z-index:6; width:64px; max-width:100%; height:20px; border-top:0; transform:translateX(-50%); --divider-hit-top:0px; }
    .week-grid[data-weekend-resize-enabled] .weekend-resize-handle::before { width:100%; height:20px; }
    .week-grid[data-weekend-resize-enabled] .weekend-resize-handle::after { top:8px; }
    [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; }
    .timeline-view .day-header { padding-inline:9px; }
    /* Let fractional-width borders paint into the day gutter without changing card geometry. */
    .planner-shell[data-view="week"] .day-content { flex:1; min-height:0; margin-top:0; margin-inline:-1px; padding-inline:1px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:auto; }
    .planner-shell .calendar-day-content .day-tasks { padding-top:5px; }
    .planner-shell .calendar-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 .month-view .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:var(--hover-transition),opacity 150ms ease,transform 150ms 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); }
    @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 { --planner-day-header-height:44px; display:block; padding-bottom:env(safe-area-inset-bottom); }
    .planner-main { min-height:calc(100dvh - env(safe-area-inset-bottom)); }
    .planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]):has(.planner-view-switch) { --planner-topbar:101px; }
    .planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]) .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, .range-week-number { 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-uid-copy), .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,.profile-uid-copy) > 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; gap:8px; }
    .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-utilities .unscheduled-count { display:none; }
    .planner-utilities .unscheduled-content { flex:none; overflow:visible; }
    .planner-utilities .unscheduled-tasks { padding-top:0; }
    .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; }
    :is(.week-view,.month-mobile-agenda,.timeline-view) .day-header { min-height:var(--planner-day-header-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; }
    :is(.calendar-day-content,.month-mobile-agenda) .day-tasks:empty { padding-top:0; }
    :is(.calendar-day-content,.month-mobile-agenda,.unscheduled-tray) .inline-add { min-height:36px; margin-top:3px; padding-block:4px; text-align:center; }
    /* Equal side tracks center the label while the plus sits beside it. */
    .planner-shell :is(.calendar-day-content,.month-mobile-agenda,.unscheduled-tray) .inline-add { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:2px; }
    :is(.calendar-day-content,.month-mobile-agenda,.unscheduled-tray) .inline-add-icon { justify-self:end; }
    /* Balance the visible label without shrinking the button's touch area. */
    .calendar-day-content:has(.day-tasks:empty) .inline-add, .month-mobile-agenda .day-content:has(.day-tasks:empty) .inline-add,
    .unscheduled-tray .unscheduled-content:has(> .unscheduled-tasks:empty) .inline-add { padding-block:3px 9px; }
    :is(.week-view,.month-mobile-agenda,.timeline-view) .inline-day-note-input { min-height:36px; height:36px; max-height:36px; padding-block:2px; }
    .planner-shell :is(.week-view,.month-mobile-agenda,.timeline-view) .inline-day-note-input { --day-note-input-height:36px; }
    /* Keep desktop row geometry while centering larger touch targets over its 24px circles. */
    .task-check, .task-more, .task-draft-check { width:36px; height:36px; }
    .planner-task > :is(.task-check,.task-draft-check) { margin:-6px; }
    .planner-task { --task-menu-size:36px; --task-menu-top-inset:.5rem; }
    .collection-list { gap:0; }
    .collection-list > .planner-task { margin-bottom:0; }
    .today-section .planner-task { margin-top:0; }
    :is(.week-view,.month-mobile-agenda) .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; }
    .planner-task > .task-check:focus-visible .task-check-ring { border-color:var(--focus,#66685f); }
    :is(.planner-task,.task-details-title-row) .task-check:hover:where(:not([data-touch-input] *)) .task-check-ring { border-color:var(--task-check-hover-color); background:color-mix(in srgb,var(--task-check-hover-color) 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.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 { --month-weekday-height:var(--planner-day-header-height,44px); width:100%; overflow:visible; }
    .month-weekdays { min-height:var(--month-weekday-height); 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:4px 9px; border-right-color:color-mix(in srgb,var(--line,#dcd8ce) 58%,transparent); }
    /* Leave the selected day header and a little of its content above the toolbar.
       Small viewport units keep opening the keyboard from resizing the calendar. */
    .month-grid { --month-grid-space:max(44px,calc(100svh - var(--planner-topbar-height,var(--planner-topbar)) - env(safe-area-inset-top,0px) - var(--month-weekday-height) - var(--planner-mobile-toolbar-inset,0px) - max(88px,calc(3.25rem + 36px)))); min-width:0; min-height:0; height:min(calc(var(--month-week-count,5) * 100px),var(--month-grid-space)); grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(var(--month-week-count,5),minmax(44px,1fr)); overflow:auto; }
    .month-grid.no-weekends { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .month-cell { min-height:0; padding:0; overflow:hidden; border-color:color-mix(in srgb,var(--line,#dcd8ce) 58%,transparent); outline:1px solid transparent; outline-offset:-1px; transition:var(--hover-transition),opacity 160ms ease,outline-color 160ms ease; }
    .month-cell-header { min-height:0; height:100%; display:flex; flex:1; }
    .month-date { display:none; }
    /* Whole-day selection follows the square grid; the date badge keeps themed corners. */
    .month-date-mobile { width:100%; min-width:0; min-height:0; height:100%; padding:1px 2px; display:flex; flex-direction:column; align-items:center; gap:1px; border:0; border-radius:0; background:transparent; color:inherit; font:500 .6875rem/1 var(--planner-heading); cursor:pointer; transition:var(--hover-transition); }
    .month-date-mobile:hover:where(:not([data-touch-input] *)) { background:var(--hover-background); color:var(--hover-color); }
    .month-date-mobile:focus-visible { outline-offset:-3px; }
    .month-date-mobile > span:first-child { flex:none; width:100%; height:max(12px,1em); display:flex; align-items:flex-start; justify-content:center; }
    .month-date-mobile time { flex:none; width:max(18px,1.25em); height:max(12px,1em); display:grid; place-items:start center; border-radius:var(--custom-radius,7px); }
    .month-day-previews { display:grid; align-content:start; gap:1px; width:100%; min-width:0; pointer-events:none; }
    .month-task-preview { position:relative; isolation:isolate; display:block; min-width:0; padding:1px 3px; border-radius:var(--custom-radius,3px); background:var(--surface,#fffdf8); color:var(--ink,#262823); text-align:left; font:500 .625rem/1.2 var(--planner-font); }
    .month-task-preview.is-colored { background:var(--task-color); color:var(--task-color-ink); }
    .month-preview-title { display:block; min-width:0; overflow:hidden; text-overflow:clip; white-space:nowrap; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent); }
    /* A narrow date cell must not push its preview offscreen after title text. */
    .month-task-preview .month-preview-title .task-title-rich :is([data-description-gif],[data-task-inline-image]) { display:block; min-height:0; }
    .month-preview-title:where(:dir(rtl)) { -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 6px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 6px),transparent); }
    .month-task-preview.is-complete .month-preview-title { opacity:.65; }
    .month-preview-more { position:absolute; bottom:1px; inset-inline:2px; display:block; visibility:hidden; padding:0; color:var(--ink-soft,#66685f); text-align:center; font-size:0; }
    .month-preview-more::after { display:block; content:"+" attr(data-month-preview-count); font:500 .5625rem/1 var(--planner-font); }
    /* A quiet fallback until the grid's layout module measures the actual rows. */
    .month-day-previews:not([data-month-previews-fitted]) .month-task-preview:nth-child(n+5),
    .month-task-preview[data-month-preview-hidden] { display:none; }
    .month-date-mobile:has(.month-day-previews.has-overflow:not([data-month-previews-fitted])) .month-preview-more,
    .month-preview-more[data-month-preview-overflow] { visibility:visible; }
    @media (forced-colors:active) {
        .month-task-preview, .month-task-preview.is-colored { background:Canvas; color:CanvasText; outline:1px solid CanvasText; outline-offset:-1px; }
        .month-preview-title { -webkit-mask-image:none; mask-image:none; }
    }
    .month-cell.selected { opacity:1; background:color-mix(in srgb,var(--accent,#c76345) 8%,transparent); outline-color:color-mix(in srgb,var(--accent,#c76345) 55%,transparent); }
    .month-cell.selected .month-date-mobile { color:var(--accent-deep,#9f422b); }
    .month-cell.today .month-date-mobile time { background:var(--accent,#c76345); color:var(--planner-accent-ink,#000); box-shadow:none; }
    .month-items, .month-cell > .month-add { display:none; }
    .month-mobile-agenda { margin:0; border-bottom:0; }
    .month-mobile-agenda-title { display:contents; }
    .month-mobile-agenda-navigation { margin-left:auto; margin-block:-4px; 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(--hover-background); color:var(--hover-color); }
    .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:relative; z-index:5; flex:none; padding:0; border-radius:0; background:transparent; }
    /* 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; border-radius:var(--custom-radius,0px); }
    .month-mobile-task:not(.is-colored) { border-bottom-color:transparent; }
    .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 :is(small,.task-calendar-identity) { 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); }
    @media (prefers-reduced-motion:reduce) { .month-cell, .month-date-mobile { transition:none; } }
    .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-color:var(--surface,#fffdf8); color:var(--ink,#262823); font:700 .8125rem/1.3 var(--planner-font); }
    .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:task-tool-popover-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-item:has(.notification-invitation-accept) { grid-template-columns:minmax(0,1fr); }
    .notification-popover-item:has(.notification-invitation-accept) .notification-popover-actions { padding:0 12px 10px; }
    .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-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 { --focus-content-padding:16px; --focus-content-gap:20px; width:calc(100% - 28px); }
    .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; }
}

/* A task picker uses the same stacked Week sections on every screen size. Keep
   this after the desktop planner's scrolling-column rules. */
.week-view.is-task-picker { --planner-day-header-height:44px; }
.week-view.is-task-picker .week-grid { flex:none; min-height:0; display:flex; flex-direction:column; overflow:visible; }
.week-view.is-task-picker .day-column,
.week-view.is-task-picker .week-grid.combine-weekend .day-column:is(.combined-saturday,.combined-sunday) { display:flex; min-height:0; padding:0 6px 8px; border:0; border-bottom:1px solid var(--line,#dcd8ce); box-shadow:none; }
.week-view.is-task-picker .day-header { position:static; flex:none; min-height:var(--planner-day-header-height,44px); margin-inline:0; padding:4px 3px; border-bottom:0; }
.week-view.is-task-picker .day-content { flex:none; min-height:0; margin:0; padding:0; overflow:visible; }
.week-view.is-task-picker .day-tasks { padding-top:6px; }
.week-view.is-task-picker .day-tasks:empty { padding-top:0; }
.week-view.is-task-picker .planner-task.no-metadata .task-content { grid-template-columns:minmax(0,1fr); }

@media (max-width:759px) and (max-height:600px) {
    .focus-mode > main { --focus-content-padding:8px; --focus-content-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); }
}


@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]), .profile-menu, .notification-popover, .task-details-popover, .task-timing-picker, .task-copy-dialog[data-open="true"] { animation:none; }
    .board-color-trigger { transition:none; }
    .focus-mode, .focus-mode *, .focus-mode *::before, .focus-mode *::after,
    .focus-clock, .focus-clock *, .focus-clock *::before, .focus-clock *::after { animation:none!important; transition:none!important; }
    .focus-mode > header > button, .focus-controls > button { transform:none!important; }
    .task-details-popover:not([hidden]), .task-copy-dialog[data-open="true"] { 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-entry, .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:var(--hover-transition),transform 140ms cubic-bezier(.22,1,.36,1); }
.calendar-editor .icon-button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.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:var(--hover-transition),transform 140ms cubic-bezier(.22,1,.36,1); }
.calendar-icon-picker button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
.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; }
.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:var(--hover-transition),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:var(--hover-transition); 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-card.read-only, .managed-calendar-card.archived { opacity:1; }
.managed-calendar-card:is(.read-only,.archived) > :is(.managed-calendar-icon,.managed-calendar-copy,.managed-calendar-actions) { 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:var(--hover-transition),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; }
.calendar-management:not([data-calendar-drag-active]) .managed-calendar-card:not(.is-editing):has(> .managed-calendar-filter input:not(:disabled)) { cursor:pointer; }
.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,
.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] *)) .managed-calendar-icon { transform:none; }
    .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:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
}

.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 { box-sizing:border-box; width:100%; 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 2rem/1.15 var(--planner-heading); }
.guest-feature-notice-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.guest-feature-notice h3 { margin:0; font:650 1.08rem/1.35 var(--planner-font); }
.guest-feature-notice p { margin:12px 0 18px; color:var(--ink-soft,#66685f); font-size:1rem; 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:.9rem; }
.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; 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; }

/* 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:var(--hover-transition),transform 160ms cubic-bezier(.22, 1, .36, 1),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] *)):where(:not(:disabled)) { border-color:var(--hover-border); background:var(--hover-background); color:var(--hover-color); }
}

@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 { 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 { box-shadow:none; }
}
@media print {
    .task-card-finish.task-card-finish--glow { 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) {
    /* Each phone calendar scrolls above the same retained Someday/canvas panel. */
    .planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]) { height:100dvh; min-height:0; overflow:clip; }
    .planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]) .planner-main { height:100%; min-height:0; display:flex; flex-direction:column; }
    .planner-shell:is([data-view="week"],[data-view="month"],[data-view="timeline"]) :is(.planner-topbar,.paused-series) { flex:none; }
    .planner-shell:is([data-view="week"],[data-view="month"]) .planner-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
    /* Share spare phone height across the days without shrinking a busy week. */
    .planner-shell[data-view="week"] .planner-content { display:flex; flex-direction:column; }
    .planner-shell[data-view="week"] .week-view:not(.is-task-picker) { flex:1 0 auto; display:flex; flex-direction:column; }
    .planner-shell[data-view="week"] .week-view:not(.is-task-picker) > .week-grid,
    .planner-shell[data-view="week"] .week-view:not(.is-task-picker) > .week-grid > .day-column { flex:1 0 auto; }
    .planner-shell .planner-utilities:not([hidden]) { display:flex; flex-direction:column; flex:none; min-height:min(var(--planner-someday-min-open-height,0px),100dvh); height:auto; max-height:35dvh; overflow:hidden; }
    @media (forced-colors:none) {
        .planner-shell .planner-utilities { border-inline:1px solid var(--line,#dcd8ce); background-color:var(--planner-card-fill,transparent); transition:border-color 180ms cubic-bezier(.2,.7,.2,1); }
        .planner-shell .planner-utilities:not([data-someday-docked]) { border-inline-color:var(--accent,#c76345); }
        .planner-utilities > .planner-someday-divider { transition:border-top-color 180ms cubic-bezier(.2,.7,.2,1); }
        .planner-utilities:not([data-someday-docked]) > .planner-someday-divider { border-top-color:var(--accent,#c76345); }
    }
    @media (prefers-reduced-motion:reduce) { .planner-shell .planner-utilities, .planner-utilities > .planner-someday-divider { transition:none; } }
    .planner-utilities > .planner-someday-divider { display:block; height:16px; user-select:none; -webkit-user-select:none; }
    .planner-someday-divider::before { top:0; }
    .planner-someday-divider::after { top:7px; }
    /* Pointer capture owns this motion. Keep the scroll offset, but avoid native
       scroll-layer work while the viewport changes on every frame. Containment
       stops those updates walking the list; ordinary scrolling returns on release. */
    .planner-utilities:is([data-someday-resizing],[data-someday-settling]) .unscheduled-content { contain:layout paint; overflow:hidden; will-change:transform; }
    /* Phone tasks form one vertical stack. Keep their existing row margins
       inside the list without recalculating grid tracks as the panel opens. */
    .planner-utilities .unscheduled-tasks { display:flow-root; }
    /* Match Week's task layout boundary without clipping card decorations. */
    .planner-utilities .unscheduled-tasks > .planner-task[data-task-id] { contain:layout style; }
    .planner-bottom-row > .planner-bottom-divider, .forever-workspace-board > .forever-board-divider { display:none; }
    .planner-utilities .planner-bottom-row { flex:1 1 auto; min-height:0; margin:0; padding-top:0; gap:0; grid-template-rows:minmax(0,1fr) auto; overflow-y:auto; overscroll-behavior:contain; }
    .planner-utilities .unscheduled-content { flex:1; overflow-y:auto; }
    .planner-utilities .planner-bottom-row > .unscheduled-tray { grid-row:1; }
    .planner-utilities .planner-bottom-row > .forever-board { grid-row:2; }
    .planner-utilities .planner-bottom-row[data-board-docked] > .unscheduled-tray { padding-bottom:0; }
    .planner-utilities .planner-bottom-row .unscheduled-tray > header { min-height:28px; padding:0; }
    .planner-utilities .planner-bottom-row .unscheduled-tray h2 { min-height:0; font-size:.9rem; line-height:1.3; }
    /* Center both headings together beneath the grip in the compact closed strip. */
    .planner-utilities[data-someday-docked] .planner-bottom-row { grid-template-columns:repeat(2,minmax(0,max-content)); grid-template-rows:minmax(0,1fr); justify-content:center; overflow:hidden; }
    .planner-utilities[data-someday-docked] .planner-bottom-row > .unscheduled-tray { box-sizing:border-box; align-self:start; width:auto; height:28px; padding:0 8px; overflow:hidden; }
    /* Let the title travel between its open and closed positions without clipping it to the shrinking tray. */
    .planner-utilities[data-someday-header-motion] .planner-bottom-row > .unscheduled-tray { overflow:visible; }
    .planner-utilities[data-someday-docked] .planner-bottom-row > .unscheduled-tray > header { height:28px; min-height:28px; padding:0; }
    /* Match the canvas title's visible-ink alignment in the shared closed row. */
    .planner-utilities[data-someday-docked] .unscheduled-tray h2 { position:relative; top:-.085em; display:block; }
    @supports (text-box-trim:trim-both) {
        .planner-utilities[data-someday-docked] .unscheduled-tray h2 { top:0; text-box-trim:trim-both; text-box-edge:cap alphabetic; padding-block:calc((1lh - 1cap) / 2); }
    }
    .planner-utilities[data-someday-docked] .unscheduled-content { contain:inline-size; opacity:0; visibility:hidden; pointer-events:none; }
    @supports (content-visibility:hidden) {
        /* Skip the closed contents without inheriting visibility/pointer changes
           through every task. Keep the opening fade and the closed controls out
           of keyboard and accessibility navigation, just like visibility:hidden. */
        .planner-utilities .unscheduled-content { transition:opacity 140ms ease; }
        .planner-utilities[data-someday-docked] .unscheduled-content { content-visibility:hidden; visibility:visible; pointer-events:auto; }
    }
    .planner-utilities[data-someday-docked] .planner-bottom-row > .forever-board { grid-column:2; grid-row:1; }
    .planner-utilities[data-someday-docked] .planner-bottom-row > .forever-board:not(.is-expanded):not(.is-contained) { max-height:28px; }
    .planner-utilities[data-someday-docked][data-someday-close-anchored] .planner-bottom-row > :is(.unscheduled-tray,.forever-board) { align-self:end; }
    .planner-utilities[data-someday-docked] .planner-bottom-row > .forever-board[data-board-docked]:not(.is-expanded):not(.is-contained) .forever-canvas-header { position:relative; box-sizing:border-box; flex-wrap:nowrap; gap:0; height:28px; min-height:28px; padding:0 8px; }
    .planner-utilities[data-someday-docked] .forever-board:not(.is-expanded):not(.is-contained) .forever-canvas-heading { align-self:center; }
    .planner-utilities[data-someday-docked] .forever-board:not(.is-expanded):not(.is-contained) .forever-canvas-fullscreen { position:absolute; visibility:hidden; pointer-events:none; }
}

/* 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; translate:none; transition:none;
    }
    .planner-topbar .view-controls .calendar-filter { flex:0 1 auto; max-width:100%; }
    .planner-topbar .view-controls .calendar-filter-trigger,
    .collection-week-search-row .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; }
    .calendar-filter-trigger > .topbar-control-label { margin-inline-end:-3px; }
}

/* 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; }

.canvas-task-destinations { display:grid; gap:8px; }
.canvas-task-destinations > button { display:flex; align-items:center; gap:10px; width:100%; text-align:start; }
.canvas-task-destinations > button .muted { margin-inline-start:auto; }
.forever-board-canvas[data-drop-active] { outline:2px solid var(--accent); outline-offset:-2px; }

/* Week numbers occupy their own column without taking space inside a day. */
.month-weekdays.has-week-numbers { grid-template-columns:2rem repeat(7,minmax(0,1fr)); }
.month-weekdays.has-week-numbers.no-weekends { grid-template-columns:2rem repeat(5,minmax(0,1fr)); }
.month-grid.has-week-numbers { grid-template-columns:2rem repeat(7,minmax(105px,1fr)); }
.month-grid.has-week-numbers.no-weekends { grid-template-columns:2rem repeat(5,minmax(105px,1fr)); }
.month-week-number { padding-top:12px; border-right:1px solid var(--line,#dcd8ce); border-bottom:1px solid var(--line,#dcd8ce); text-align:center; color:var(--ink-soft,#66685f); font-size:.7rem; font-variant-numeric:tabular-nums; }
.month-grid.has-week-numbers:not(.no-weekends) .month-cell:nth-child(8n), .month-grid.has-week-numbers.no-weekends .month-cell:nth-child(6n) { border-right:0; }
@media (max-width:800px) {
    .month-weekdays.has-week-numbers { grid-template-columns:1.5rem repeat(7,minmax(0,1fr)); }
    .month-weekdays.has-week-numbers.no-weekends { grid-template-columns:1.5rem repeat(5,minmax(0,1fr)); }
    .month-grid.has-week-numbers { grid-template-columns:1.5rem repeat(7,minmax(0,1fr)); }
    .month-grid.has-week-numbers.no-weekends { grid-template-columns:1.5rem repeat(5,minmax(0,1fr)); }
    .month-week-number { padding-top:22px; font-size:.65rem; }
}

.canvas-number-digit { position:relative; display:inline-block; overflow:hidden; white-space:pre; }
.canvas-number-digit > span { display:block; }
.canvas-number-outgoing { position:absolute; inset:0; }
@media (prefers-reduced-motion:no-preference) {
    .canvas-number-digit:not(.has-number-reel)[data-rolling] > span:last-child { animation:canvas-number-roll-in 180ms cubic-bezier(.22,.8,.25,1) both; }
    .canvas-number-digit:not(.has-number-reel)[data-rolling] > .canvas-number-outgoing { animation:canvas-number-roll-out 180ms cubic-bezier(.22,.8,.25,1) both; }
}
.canvas-number-digit.has-number-reel { height:1em; line-height:1; vertical-align:-.1em; }
.has-number-reel > span:first-child { text-align:center; }
.canvas-number-digit > .canvas-number-reel { position:absolute; inset:0 0 auto; height:1em; visibility:hidden; }
.canvas-number-reel > span { display:block; height:1em; line-height:1; }
@media (prefers-reduced-motion:reduce) { .canvas-number-outgoing { visibility:hidden; } }
@keyframes canvas-number-roll-in { from { transform:translateY(var(--number-roll-offset)); } to { transform:translateY(0); } }
@keyframes canvas-number-roll-out { from { transform:translateY(0); } to { transform:translateY(calc(-1 * var(--number-roll-offset))); } }

.slider-number-host { position:relative; color:transparent!important; }
.slider-number-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink); pointer-events:none; font:inherit; white-space:pre; }

/* Editable percentages share the compact drawing size control. */
.board-percent-field { display:flex; gap:2px; box-sizing:border-box; width:var(--drawing-value-width,112px); flex:none; min-height:36px; border:1px solid var(--line,#dcd8ce); border-radius:8px; background:var(--paper,#fffdf8); color:var(--ink-soft); }
.board-percent-edit { position:relative; display:flex; align-items:center; gap:4px; flex:1; min-width:0; }
:is(.board-color-popover,.slider-number-field) .board-percent-field input { width:0; flex:1; min-width:0; min-height:34px; padding:5px 0 5px 10px; border:0; background:transparent; color:var(--ink); font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; appearance:textfield; outline:none; box-shadow:none; }
.board-percent-field input::-webkit-inner-spin-button, .board-percent-field input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
:is(.board-color-popover,.slider-number-field) .board-percent-field .planner-setting-value { position:absolute; left:10px; top:50%; transform:translateY(-50%); display:inline-flex; width:auto; min-width:0; height:auto; padding:0; border:0; background:transparent; box-shadow:none; color:var(--ink); font-size:16px; font-weight:500; line-height:1.3; pointer-events:none; }
.board-percent-field .planner-setting-value .canvas-number-digit:last-child { display:none; }
.board-percent-edit:has(input:focus:not([data-number-keyboard])) .planner-setting-value { visibility:hidden; }
:is(.board-color-popover,.slider-number-field) .board-percent-field input:is(:not(:focus),[data-number-keyboard]) { color:transparent; }
.board-percent-field input[data-number-keyboard] { caret-color:transparent; }
.board-percent-unit { padding-right:4px; font-size:.75rem; }
.board-percent-field[data-mixed="true"] .board-percent-unit { visibility:hidden; }
.board-percent-arrows { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); box-sizing:border-box; width:24px; flex:none; padding:2px; }
:is(.board-color-popover,.slider-number-field) .board-percent-arrows button { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; width:20px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--ink-soft); box-shadow:none; transition:var(--hover-transition); }
/* Center each stepper independently of toolbar button layout and inline SVG baselines. */
.board-percent-field .board-percent-arrows > button { display:grid; place-items:center; box-sizing:border-box; }
.board-percent-arrows svg { display:block; flex:none; align-self:center; justify-self:center; margin:0; width:16px; height:12px; max-height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* Balance the chevron strokes optically around the center of the SVG. */
.board-percent-arrows > button:first-child svg path { transform:translateY(-.5px); }
.board-percent-arrows > button:last-child svg path { transform:translateY(.5px); }
:is(.board-color-popover,.slider-number-field) .board-percent-arrows button:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); }
:is(.board-color-popover,.slider-number-field) .board-percent-arrows button:active:not(:disabled) { background:color-mix(in srgb,var(--ink) 18%,transparent); }
:is(.board-color-popover,.slider-number-field) .board-percent-arrows button:disabled { opacity:.3; }
@media (max-width:800px), (pointer:coarse) { :is(.board-color-popover,.slider-number-field) .board-percent-field input { min-height:42px; } }

.editable-slider-original { display:none !important; }
.slider-number-field { display:inline-flex; flex:none; width:112px; min-width:112px; vertical-align:middle; }
/* Camera zoom reuses the shared editable readout, keeping its existing bare control. */
.canvas-zoom-editor .slider-number-field { width:72px; min-width:72px; }
.canvas-zoom-editor .board-percent-field { width:72px; min-height:36px; border:0; background:transparent; transition:var(--hover-transition); }
.canvas-zoom-editor .board-percent-edit { gap:0; }
.canvas-zoom-editor .board-percent-field input { height:36px; min-height:0; padding:0 0 0 6px; text-align:center; font:500 1rem/1.4 var(--planner-font); }
.canvas-zoom-editor .board-percent-field .planner-setting-value { left:6px; right:18px; justify-content:center; font:500 1rem/1.4 var(--planner-font); }
.canvas-zoom-editor .board-percent-unit { padding:0 6px 0 0; font-size:1rem; }
.canvas-zoom-editor .board-percent-arrows { display:none; }
.canvas-zoom-editor .board-percent-field:focus-within { outline:2px solid var(--focus,var(--accent)); outline-offset:2px; }
@media (hover:hover) and (pointer:fine) {
    .canvas-zoom-editor .board-percent-field:hover:where(:not([data-touch-input] *)):not(:has(input:disabled)) { background:var(--hover-background); color:var(--hover-color); }
}
.slider-number-field .planner-setting-value .canvas-number-digit:last-child { display:inline-block; }
/* Slider companions share the compact Color field; standalone numbers keep their own layout. */
.slider-number-field.slider-range-number { width:88px; min-width:88px; }
.canvas-item-zoom { display:inline-flex; flex:none; align-items:center; }
/* Item zoom has separate, full-height arrow targets while sharing number-field behavior. */
.forever-board .canvas-item-zoom .slider-number-field { width:144px; min-width:144px; }
.forever-board .canvas-item-zoom .board-percent-field { width:144px; height:38px; min-height:38px; }
.forever-board .canvas-item-zoom .board-percent-arrows { display:flex; gap:2px; width:auto; padding:0; }
.forever-board .canvas-item-zoom .board-percent-arrows button { flex:0 0 36px; width:36px; height:36px; min-width:36px; min-height:36px; padding:0; transform:none; }
.forever-board .canvas-item-zoom .board-percent-arrows svg { width:20px; height:16px; }
.forever-board .canvas-item-zoom .board-percent-edit input { min-height:0; height:100%; }
@media (max-width:800px), (pointer:coarse) {
    .forever-board .canvas-item-zoom .slider-number-field { width:160px; min-width:160px; }
    .forever-board .canvas-item-zoom .board-percent-field { width:160px; height:46px; min-height:46px; }
    .forever-board .canvas-item-zoom .board-percent-arrows button { flex-basis:44px; width:44px; height:44px; min-width:44px; min-height:44px; }
}
:is(.board-color-brightness,.slider-range-number) .board-percent-field { --drawing-value-width:88px; width:88px; height:30px; min-height:30px; }
:is(.board-color-popover .board-color-brightness,.slider-number-field.slider-range-number) .board-percent-edit input { box-sizing:border-box; height:100%; min-height:0; }
/* Fit extended pixel and decimal values without growing the standard field or covering its unit. */
:is(.slider-range-number,.task-description-font-size) .board-percent-edit:has(.planner-setting-value > .canvas-number-digit:nth-child(4)) { gap:2px; }
:is(.slider-number-field.slider-range-number,.task-description-font-size .slider-number-field) .board-percent-edit:has(.planner-setting-value > .canvas-number-digit:nth-child(4)) input { padding-left:4px; font-size:12px; }
:is(.slider-number-field.slider-range-number,.task-description-font-size .slider-number-field) .board-percent-edit:has(.planner-setting-value > .canvas-number-digit:nth-child(4)) .planner-setting-value { left:4px; font-size:12px; }
:is(.slider-range-number,.task-description-font-size) .board-percent-edit:has(.planner-setting-value > .canvas-number-digit:nth-child(4)) .board-percent-unit { padding-right:2px; font-size:10px; }

.canvas-connector-range { display:grid; grid-column:1 / -1; gap:2px; min-width:0; font-size:.8rem; }
.canvas-connector-range > span:first-child { display:flex; align-items:center; justify-content:space-between; gap:8px; }

.planner-setting-slider[data-slider-number-animating]::-webkit-slider-thumb { transform:translateX(var(--slider-thumb-offset,0px)); }
.planner-setting-slider[data-slider-number-animating]::-moz-range-thumb { transform:translateX(var(--slider-thumb-offset,0px)); }
.planner-setting-slider[data-slider-number-animating]::-moz-range-track { background:linear-gradient(to right,var(--accent) 0 var(--slider-progress),var(--slider-rail) var(--slider-progress) 100%); }
.planner-setting-slider[data-slider-number-animating]::-moz-range-progress { background:transparent; }

/* Canvas tool text fields retain their normal border while editing. */
:is(.canvas-unified-toolbar,.canvas-tool-panel,.forever-canvas-menu,.forever-canvas-group-controls,.forever-canvas-editor-tools,.forever-board-text-toolbar,.forever-board-connector-primary,.forever-board-connector-options,.canvas-sticker-picker,.canvas-section-navigation,.forever-reference-editor) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea):is(:focus,:focus-visible) { outline:none; box-shadow:none; }
:is(.canvas-unified-toolbar,.canvas-tool-panel,.forever-canvas-menu,.forever-canvas-group-controls,.forever-canvas-editor-tools,.forever-board-text-toolbar,.forever-board-connector-primary,.forever-board-connector-options,.canvas-sticker-picker,.canvas-section-navigation,.forever-reference-editor) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea):is(:focus,:focus-visible):not([aria-invalid="true"]) { border-color:var(--line,#dcd8ce); }

:is(.board-percent-arrows,.canvas-drawing-steppers) button { touch-action:none; user-select:none; -webkit-touch-callout:none; }
:is(.board-color-popover,.board-color-picker,.slider-number-field) .board-percent-field .board-percent-arrows button:is(:focus,:focus-visible) { outline:none; box-shadow:none; }
:is(.board-color-popover,.board-color-picker,.slider-number-field) .board-percent-field .board-percent-arrows button:focus-visible:not(:disabled) { background:color-mix(in srgb,var(--ink) 10%,transparent); color:var(--ink); }