/* Shared browser and native defaults. Keep platform rules in their host styles. */
/* Slider gestures reserve their containing menus, including nested popovers.
   Private values are captured once in the menu's existing coordinate space. */
[data-slider-popup-locked] {
    position:var(--slider-popup-lock-position)!important;
    box-sizing:var(--slider-popup-lock-box-sizing)!important;
    width:var(--slider-popup-lock-width)!important;
    min-width:var(--slider-popup-lock-width)!important;
    max-width:var(--slider-popup-lock-width)!important;
    height:var(--slider-popup-lock-height)!important;
    min-height:var(--slider-popup-lock-height)!important;
    max-height:var(--slider-popup-lock-height)!important;
    left:var(--slider-popup-lock-left)!important;
    right:var(--slider-popup-lock-right)!important;
    top:var(--slider-popup-lock-top)!important;
    bottom:var(--slider-popup-lock-bottom)!important;
    margin-top:var(--slider-popup-lock-margin-top)!important;
    margin-right:var(--slider-popup-lock-margin-right)!important;
    margin-bottom:var(--slider-popup-lock-margin-bottom)!important;
    margin-left:var(--slider-popup-lock-margin-left)!important;
    transform:var(--slider-popup-lock-transform)!important;
    translate:var(--slider-popup-lock-translate)!important;
    scale:var(--slider-popup-lock-scale)!important;
    rotate:var(--slider-popup-lock-rotate)!important;
    overflow-anchor:none;
}
:root {
    --paper: #f7f5ef;
    --paper-deep: #eeebe2;
    --surface: #fffdf8;
    --ink: #262823;
    --ink-soft: var(--ink);
    --ink-faint: var(--ink);
    --muted: var(--ink);
    --line: #dcd8ce;
    --accent: #c76345;
    --planner-selection-accent: var(--accent);
    --accent-deep: #9f422b;
    --accent-soft: #f1d9cf;
    --sage: #687b69;
    --focus: var(--ink-soft);
    --board-blue-ink: #225ecc;
    --danger: #a33a34;
    --shadow: 0 26px 70px rgba(55, 45, 31, .12);
    --radius: 14px;
    --content: 1180px;
    font-family: var(--yako-font);
    color-scheme: light dark;
    /* Inherit across every control, including summaries and custom tap targets. */
    -webkit-tap-highlight-color: transparent;
}

html[data-theme="light"] { color-scheme: only light; }

/* All dropdown entrances and retained CSS disclosures share this motion.
   JS-owned surfaces use the matching timings in dropdown-motion.js. */
:root {
    --dropdown-enter-duration:180ms;
    --dropdown-exit-duration:120ms;
    --dropdown-easing:cubic-bezier(.22,.8,.25,1);
}
@keyframes task-tool-popover-enter { from { opacity:0; translate:0 -4px; } to { opacity:1; translate:0 0; } }
@keyframes task-tool-popover-exit { from { opacity:1; translate:0 0; } to { opacity:0; translate:0 -4px; } }

/* Explicit menu lifecycles replay one compositor-only fade and short glide.
   Keep old CSS entrances and native opacity transitions from competing. */
[data-dropdown-motion] { animation:none!important; }
.task-action-bar[data-dropdown-motion] { opacity:1; transition:none!important; }
[data-dropdown-closing] { pointer-events:none!important; }

/* Keep Premium artwork consistent with the active palette, including previews. */
:root {
    --premium-fox-light-image:url("images/premium-menu-fox.png");
    --premium-fox-dark-image:url("images/premium-menu-fox-white.png");
    --premium-fox-image:var(--premium-fox-light-image);
}
[data-theme] { --premium-fox-image:var(--premium-fox-light-image); }
:is([data-theme="dark"],[data-theme="sakura"],[data-theme="premium"],[data-theme="custom"]) {
    --premium-fox-image:var(--premium-fox-dark-image);
}
.premium-fox-image { content:var(--premium-fox-image); }
@media (prefers-color-scheme: dark) {
    [data-theme="system"] { --premium-fox-image:var(--premium-fox-dark-image); }
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --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;
        --danger: #ff9b92;
        --shadow: 0 28px 70px rgba(0,0,0,.28);
    }
}

*, *::before, *::after { box-sizing: border-box; }
/* Shared hover feedback, based on the task-detail tools. Use the same clean
   accent tint in light and dark themes, without blending in grey/beige paper.
   Resolve locally for custom themes and colored cards; consumers keep geometry,
   selected states, focus indicators and reveal behavior. */
:where(*) {
    --accent-hover-surface:color-mix(in srgb,var(--accent,#c76345) 28%,transparent);
    --hover-background:var(--accent-hover-surface);
    --hover-color:var(--ink,#262823);
    --hover-border:color-mix(in srgb,var(--accent,#c76345) 60%,transparent);
    --hover-transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
    --open-background:color-mix(in srgb,var(--accent,#c76345) 34%,transparent);
    --open-color:var(--ink,#262823);
    --open-border:color-mix(in srgb,var(--accent,#c76345) 72%,transparent);
    --solid-accent-fill:var(--planner-action-fill,var(--accent,#c76345));
    --solid-accent-ink:var(--planner-action-ink,var(--custom-accent-ink,#19141c));
    /* Shift away from the contrasting ink: lighten dark-ink fills and deepen
       light-ink fills. Preserve the accent and text contrast while hovering. */
    --solid-accent-hover-background:color-mix(in srgb,var(--solid-accent-fill) 88%,rgb(from var(--solid-accent-ink) calc(255 - r) calc(255 - g) calc(255 - b)));
    --solid-accent-hover-color:var(--solid-accent-ink);
}
:where([aria-invalid="true"]) { --open-border:var(--danger,#a33a34); }
:where(button,a[href],summary,select,[role="button"],[role="option"],label:has(input)) { transition:var(--hover-transition); }
@media (prefers-reduced-motion:reduce) {
    :where(*) { --hover-transition:background-color 0s,color 0s,border-color 0s; }
}
@media (forced-colors:active) {
    :where(*) { --hover-background:Highlight; --hover-color:HighlightText; --hover-border:Highlight; --open-background:Highlight; --open-color:HighlightText; --open-border:Highlight; --solid-accent-hover-background:Highlight; --solid-accent-hover-color:HighlightText; }
}
/* Person names share the quiet hover tint while retaining their text alignment. */
.user-name-trigger { display:inline-block; max-width:100%; margin-inline:-6px; padding:0 6px; border:0; border-radius:var(--custom-radius,8px); background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-align:start; white-space:inherit; overflow-wrap:anywhere; cursor:pointer; transition:var(--hover-transition); }
.user-name-trigger:hover:where(:not([data-touch-input] *)):not(:disabled),
.user-name-trigger:focus-visible { background:var(--hover-background); color:var(--hover-color); }

/* Popup launchers share interaction feedback, not a new resting container.
   Components keep their original border width, fill and layout. Only existing
   dropdown fields receive the boxed skin below; toolbar icons, menu rows and
   swatches stay bare. Keep native arrows, previews and popup panels intact. */
:is(
    select[data-planner-select],
    .filter-select:has(> select[data-planner-select]),
    button[aria-haspopup]:not([aria-haspopup="false"]),
    :is(a,[role="button"])[aria-expanded][aria-haspopup]:not([aria-haspopup="false"]),
    .popup-trigger,.dropdown-trigger,.calendar-filter-trigger,.view-options-toggle,
    .notification-trigger,.board-color-trigger,.week-picker-trigger,.week-picker-month-toggle,
    .task-timing-trigger,.task-more,.task-details-dialog > header [data-task-tool],
    .chat-emoji-button,.collaboration-emoji,.chat-appearance-trigger,
    .chat-rename-button,.chat-header-invite,[data-chat-background-trigger],
    .managed-calendar-share,.canvas-toolbar-more,[data-conversation-notifications-trigger]
):not(:where(
    .user-profile-trigger,.canvas-follow-avatar,.pill-control-danger,.danger-button,
    .chat-roster-action,
    .chat-thread,[data-conversation-notifications],[data-timeline-slot-surface],[role="option"],
    [role="menuitem"]:not([data-task-action],[data-conversation-notifications-trigger])
)) {
    --dropdown-background:color-mix(in srgb,var(--ink,#262823) 4%,transparent);
    --dropdown-color:var(--ink-soft,var(--ink,#262823));
    --dropdown-border:color-mix(in srgb,var(--ink,#262823) 23%,transparent);
    --dropdown-radius:var(--custom-radius,8px);
    transition:var(--hover-transition);

    &:where(.planner-topbar *,.collection-week-search-row *) { --dropdown-border:var(--topbar-control-border); }

    /* Keep the task menu's reveal fade alongside shared color feedback. */
    &.task-more { transition:var(--hover-transition),opacity 160ms ease,transform 150ms ease; }

    &:is(select[data-planner-select],.filter-select,.calendar-filter-trigger,.view-options-toggle,.task-timing-trigger) {
        background-color:var(--dropdown-background)!important;
        color:var(--dropdown-color)!important;
        border:1px solid var(--dropdown-border)!important;
        border-radius:var(--dropdown-radius)!important;
        box-shadow:none!important;
    }
    &:hover:where(:not([data-touch-input] *)):where(:not(:disabled):not([aria-disabled="true"])) {
        --dropdown-background:var(--hover-background);
        --dropdown-color:var(--hover-color);
        background-color:var(--dropdown-background)!important;
        color:var(--dropdown-color)!important;
        box-shadow:none!important;
    }
    /* A configured task feature or selected drawing tool still has a cue when
       its menu is closed. The open state below takes precedence over selection. */
    &:is([data-enabled="true"],[data-active-tool="true"],[aria-pressed="true"]) {
        --dropdown-background:color-mix(in srgb,var(--accent,#c76345) 16%,var(--surface,#fffdf8));
        --dropdown-color:var(--open-color);
        background-color:var(--dropdown-background)!important;
        color:var(--dropdown-color)!important;
    }
    &[data-snap-enabled="true"] { --dropdown-color:var(--open-color); color:var(--dropdown-color)!important; }
    &:is(:disabled,[aria-disabled="true"]) { opacity:.45!important; cursor:default; }
    &:is([aria-expanded="true"],:has(> select[data-planner-select][aria-expanded="true"])) {
        --dropdown-background:var(--open-background);
        --dropdown-color:var(--open-color);
        --hover-background:var(--open-background);
        --hover-color:var(--open-color);
        --hover-border:var(--open-border);
        background-color:var(--dropdown-background)!important;
        color:var(--dropdown-color)!important;
        box-shadow:none!important;
    }
    /* Native selects also match :focus-visible after pointer or initial focus.
       Keep their border neutral until the user navigates with the keyboard. */
    &:is(:focus-visible,:has(> select:focus-visible)):where([data-keyboard-navigation] *) {
        --dropdown-border:var(--focus,var(--accent,#c76345));
        border-color:var(--dropdown-border)!important;
    }
    /* Bare launchers still need their keyboard cue because they have no border. */
    &:focus-visible:not(:is(select[data-planner-select],.filter-select,.calendar-filter-trigger,.view-options-toggle,.task-timing-trigger)) {
        outline:2px solid var(--focus,var(--accent,#c76345))!important;
        outline-offset:2px!important;
    }
    &[aria-invalid="true"] { --dropdown-border:var(--danger,#a33a34); border-color:var(--dropdown-border)!important; }
    /* The wrapper is the visible button; avoid painting it twice. */
    &.filter-select > select[data-planner-select] {
        background-color:transparent!important;
        color:inherit!important;
        border:0!important;
        border-radius:0!important;
        outline:none!important;
    }
    & > svg:not([data-color-preview]),
    & > .task-timing-value { color:inherit!important; }
    /* The small disclosure strip stays attached to selected tools and locked Draw. */
    &:is([aria-pressed="true"],[aria-expanded="true"],[data-active-tool="true"]):has(> .canvas-tool-disclosure) {
        border-end-start-radius:0!important;
        border-end-end-radius:0!important;
    }
    & > .canvas-tool-disclosure {
        background-color:var(--dropdown-background)!important;
        color:var(--dropdown-color)!important;
        border-color:inherit!important;
        border-end-start-radius:var(--dropdown-radius)!important;
        border-end-end-radius:var(--dropdown-radius)!important;
    }
    @media (prefers-reduced-motion:reduce) { transition:none; }
    @media (forced-colors:active) {
        --dropdown-background:ButtonFace;
        --dropdown-color:ButtonText;
        --dropdown-border:ButtonText;
        outline:1px solid ButtonText!important;
        outline-offset:0!important;
        &:is([aria-expanded="true"],[data-enabled="true"],[data-active-tool="true"],[aria-pressed="true"],:has(> select[aria-expanded="true"])) {
            --dropdown-background:Highlight;
            --dropdown-color:HighlightText;
        }
        &:is(:focus-visible,:has(> select:focus-visible)) { outline:2px solid Highlight!important; outline-offset:2px!important; }
    }
}
/* Profile rings touch the portrait, including inside larger touch targets.
   The trigger owns state; its visible avatar owns the ring when nested. */
.user-profile-trigger {
    --profile-hover-ring:color-mix(in srgb,var(--accent,#c76345) 72%,var(--ink,#262823));
    --profile-hover-shadow:0 0 0 1.5px transparent;
    --profile-hover-transition:box-shadow 160ms ease;
    transition:var(--profile-hover-transition);
}
.user-profile-trigger:where(:not(:has(> .avatar))),
.user-profile-trigger > .avatar {
    box-shadow:var(--profile-hover-shadow);
    transition:var(--profile-hover-transition);
}
.user-profile-trigger:has(> .avatar) { box-shadow:none; }
:is(button,a).user-profile-trigger:hover:where(:not([data-touch-input] *)):where(:not(:disabled):not([aria-disabled="true"])) {
    --profile-hover-shadow:0 0 0 1.5px var(--profile-hover-ring);
}
:is(button,a).user-profile-trigger:focus-visible {
    --profile-hover-shadow:0 0 0 2px var(--profile-hover-ring);
}
@media (prefers-reduced-motion:reduce) {
    .user-profile-trigger { --profile-hover-transition:box-shadow 0s; }
}
@media (forced-colors:active) {
    :is(button,a).user-profile-trigger:is(:hover:where(:not([data-touch-input] *)),:focus-visible,[aria-expanded="true"]):not(:disabled):not([aria-disabled="true"]):not(:has(> .avatar)),
    :is(button,a).user-profile-trigger:is(:hover:where(:not([data-touch-input] *)),:focus-visible):not(:disabled):not([aria-disabled="true"]) > .avatar {
        outline:2px solid Highlight!important;
        outline-offset:0!important;
    }
}
/* Keep scrolling available in every host and screen without visible bars or gutters. */
* { scrollbar-width:none!important; scrollbar-gutter:auto!important; }
*::-webkit-scrollbar { display:none!important; width:0!important; height:0!important; }
/* Keep responsive type at its authored size after rotation, while allowing user zoom. */
html { scroll-behavior: smooth; background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); line-height: 1.55; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 42%, transparent); text-underline-offset: .2em; }
a:not(:where(.user-profile-trigger)):hover:where(:not([data-touch-input] *)) { background-color:var(--hover-background); color:var(--hover-color); text-decoration-color:currentColor; }
/* Focus uses existing control borders rather than an additional outer ring,
   including when the browser restores focus after switching windows. */
:focus { outline: none!important; outline-offset: 0!important; }
:where(button, [role="button"], summary):focus-visible { border-color: var(--focus)!important; }
.appearance-picture-upload:has(:focus-visible),
.collaboration-panel-task .collaboration-upload:has(:focus-visible),
.task-appearance-choice:has(input:focus-visible),
.task-appearance-motion-control:has(input:focus-visible),
.task-appearance-accent-inputs:has(input:focus-visible),
.task-calendar-choice:has(input:focus-visible),
.storage-search:has(:focus-visible),
.storage-file-select:has(:focus-visible),
.storage-select-all:has(:focus-visible),
.custom-editor-segments input:focus-visible + span,
.theme-controls-choice:has(input:focus-visible),
.themes-choice:has(input:focus-visible),
.themes-custom-accent:has(:focus-visible),
.themes-import-button:has(:focus-visible),
.timeline-task-divider:focus-visible .timeline-task-divider-follow::after,
.timeline-slot:focus-visible span,
.forever-board-divider:focus-visible::after,
.weekend-resize-handle:focus-visible::after,
.forever-board-font-size-field:focus-within,
.forever-board-stroke-field:focus-within,
.board-color-wheel:has(input:focus-visible),
.board-save-card-style:has(input:focus-visible),
.day-note-calendar-choice:has(input:focus-visible),
.settings-choice-option:has(input:focus-visible),
.settings-accent-option:has(input:focus-visible),
.recurrence-days input:focus-visible + span,
.settings-days input:focus-visible + span,
.settings-picture-file:has(:focus-visible),
.task-reminder-popover .reminder-delivery-options label[data-reminder-channel-setup="browser"]:has(:focus-visible),
.analytics-search:has(:focus-visible),
.working-days input:focus-visible + span { outline: none!important; outline-offset: 0!important; }
.chat-compose-field:has(:focus-visible),
.chat-bubble-editing:has(:focus-visible),
.canvas-section-title[data-editing="true"],
.collaboration-panel-task textarea:focus-visible,
.collaboration-panel .collaboration-compose:focus-within,
.forever-workspace-board .canvas-reference-add input:focus-visible,
.forever-canvas-search:focus-within,
.checkout-form input:focus,
select[data-planner-select]:focus-visible,
.view-controls .filter-select:is(:focus-visible,:has(:focus-visible)),
.forever-board-canvas:focus-visible,
.premium-lock-trigger:focus-visible { box-shadow: none!important; }
.planner-setting-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 2px 5px #0003!important; }
.planner-setting-slider:focus-visible::-moz-range-thumb { box-shadow: 0 2px 5px #0003!important; }
/* These outlines describe canvas selection and drop targets, not focus. */
.forever-board-canvas[data-drop-active]:focus { outline: 2px solid var(--accent)!important; outline-offset: -2px!important; }
.forever-canvas-section.is-selected:focus { outline: 2px solid var(--accent)!important; outline-offset: 2px!important; }
.forever-canvas-section[data-section-target="true"]:focus,
.is-section-preview-member:focus { outline: 2px dashed var(--accent)!important; outline-offset: 3px!important; }
:focus:not(:focus-visible), :where([role="dialog"][tabindex="-1"]):focus { outline: none; }
/* One single-argument :where() per field kind keeps zero specificity while the
   style engine files each selector under its tag or attribute. A shared list
   would be tested against every element on each restyle. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):focus-visible, :where(textarea):focus-visible, :where(select):focus-visible, :where([contenteditable="true"]):focus-visible { outline: none; border-color: var(--focus); }
/* Text fields fade their focus highlight in and out. Color-only transitions
   repaint just the field and run only when focus changes the color. Fields
   with their own transition list keep it. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])), :where(textarea), :where(select), :where([contenteditable="true"]) { transition: border-color 180ms ease-out, outline-color 180ms ease-out; }
/* Resolve at the theme root so colored task cards keep the chosen theme accent. */
.planner-theme-preview { --planner-selection-accent:var(--accent,#c76345); }
:where(input, textarea, [contenteditable]:not([contenteditable="false"])) { caret-color:var(--planner-selection-accent,var(--accent,#c76345)); }
@media (prefers-reduced-motion: reduce) {
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])), :where(textarea), :where(select), :where([contenteditable="true"]) { transition: none; }
}
h1:focus, h2:focus { outline: none; }
::selection { background: var(--accent-soft); color: var(--ink); }

h1, h2, h3 { margin: 0; font-family: var(--yako-font); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.7rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.75rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }

/* Clickable pill standard. Resolve colors locally, including custom accents and
   premium surfaces. Informational badges and circular controls are separate. */
:where(*) {
    --pill-fill:var(--planner-action-fill,var(--accent,#c76345));
    --pill-ink:var(--planner-action-ink,var(--custom-accent-ink,#19141c));
    --pill-radius:var(--custom-radius,999px);
}
.pill-control, .button, .primary-button, .secondary-button, .accent-button, .danger-button, .oauth-button, .planner-snackbar-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 22px;
    border:0;
    border-radius:var(--pill-radius);
    background:var(--pill-fill);
    color:var(--pill-ink);
    box-shadow:none;
    font-weight:670;
    text-decoration:none;
    cursor:pointer;
    transition:var(--hover-transition);
}
/* Managed snackbar alternatives are neutral. Static recovery actions can be
   mutually exclusive, so each keeps its primary fill when it becomes visible. */
.pill-control-neutral, .pill-control-selectable, :where(.planner-snackbar:not([data-static-snackbar]) .planner-snackbar-action) ~ .planner-snackbar-action {
    --pill-fill:var(--paper-deep,#eeebe2);
    --pill-ink:var(--ink,#262823);
}
/* Filled actions keep their solid accent on hover. Dropdown triggers have their
   own neutral skin, and neutral/danger actions retain their semantic colors. */
:is(.pill-control,.button,.primary-button,.secondary-button,.accent-button,.oauth-button,.planner-snackbar-action,.shared-calendar-header nav button,.solid-accent-control):not(:where(
    .pill-control-neutral,.pill-control-danger,.pill-control-selectable,.danger-button,.planner-snackbar:not([data-static-snackbar]) .planner-snackbar-action ~ .planner-snackbar-action,
    [aria-haspopup],[aria-expanded],.dropdown-trigger,.popup-trigger,[data-chat-background-trigger],
    [data-ai-chat-more],[data-chat-more]
)) {
    --solid-accent-fill:var(--pill-fill);
    --solid-accent-ink:var(--pill-ink);
    --hover-background:var(--solid-accent-hover-background);
    --hover-color:var(--solid-accent-hover-color);
}
.pill-control-danger, .danger-button {
    --pill-fill:color-mix(in srgb,var(--danger,#a33a34) 12%,var(--surface,#fffdf8));
    --pill-ink:var(--danger,#a33a34);
    --hover-color:var(--danger,#a33a34);
}
.pill-control-selectable:is(.active,.is-active,.is-selected,[aria-pressed="true"],[aria-selected="true"]) {
    --pill-fill:var(--planner-action-fill,var(--accent,#c76345));
    --pill-ink:var(--planner-action-ink,var(--custom-accent-ink,#19141c));
    --solid-accent-fill:var(--pill-fill);
    --solid-accent-ink:var(--pill-ink);
    --hover-background:var(--solid-accent-hover-background);
    --hover-color:var(--solid-accent-hover-color);
}
:is(.pill-control,.button,.primary-button,.secondary-button,.accent-button,.danger-button,.oauth-button,.planner-snackbar-action):hover:where(:not([data-touch-input] *)):where(:not(:disabled):not([aria-disabled="true"]):not(.is-disabled)) {
    background:var(--hover-background);
    color:var(--hover-color);
}
/* Borderless controls need their own keyboard cue after the global focus reset. */
:is(.pill-control,.button,.primary-button,.secondary-button,.accent-button,.danger-button,.oauth-button,.planner-snackbar-action):is(:focus-visible,:has(> input:focus-visible)) {
    outline:2px solid var(--focus,var(--accent))!important;
    outline-offset:3px!important;
}
:is(.pill-control,.button,.primary-button,.secondary-button,.accent-button,.danger-button,.oauth-button,.planner-snackbar-action):is(:disabled,[aria-disabled="true"],.is-disabled) { opacity:.5; cursor:default; }
@media (forced-colors:active) {
    :is(.pill-control,.button,.primary-button,.secondary-button,.accent-button,.danger-button,.oauth-button,.planner-snackbar-action) {
        --pill-fill:ButtonFace;
        --pill-ink:ButtonText;
        --hover-background:Highlight;
        --hover-color:HighlightText;
        outline:1px solid ButtonText!important;
        outline-offset:0!important;
    }
    .pill-control-selectable:is(.active,.is-active,.is-selected,[aria-pressed="true"],[aria-selected="true"]) { --pill-fill:Highlight; --pill-ink:HighlightText; }
    :is(.pill-control,.button,.primary-button,.secondary-button,.accent-button,.danger-button,.oauth-button,.planner-snackbar-action):is(:focus-visible,:has(> input:focus-visible)) { outline:2px solid Highlight!important; outline-offset:3px!important; }
}
.button-small { min-height: 40px; padding-inline: 17px; font-size: .9rem; }
.button-full { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 660; text-decoration: none; }

/* Segmented choices use the Week / Month / Timeline control as their reference.
   The aliases cover existing consumers; new groups can use segmented-control.
   Scope the shared geometry to real mode/choice groups, not action rows, cards,
   independent toggles or swatches. Important skin rules cross component scopes.
   Keep :has out of the group aliases so nested span/button rules do not inherit
   broad invalidation. Radio labels use the existing adjacent input/span pattern. */
:is(
    .segmented-control,.planner-view-switch,.chat-group-invite-modes,
    .sharing-create-switch,.sharing-recipient-switch,.storage-view-toggle,
    .focus-mode-switch,.appearance-picture-fit,.custom-editor-segments,
    .canvas-sticker-tabs,.canvas-sticker-filters,
    .canvas-drawing-eraser-settings > .canvas-drawing-presets,
    .canvas-drawing-lasso-settings > .canvas-drawing-presets,
    :where(.canvas-arrow-choice-group:not(.canvas-midpoint-lock)) > .canvas-arrow-choices
) {
    --segment-radius:var(--custom-radius,10px);
    --segment-item-radius:var(--custom-radius,6px);
    --segment-min-height:30px;
    --segment-inline-padding:10px;
    --segment-font-size:.8125rem;
    display:inline-flex!important;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    width:max-content!important;
    max-width:100%;
    min-width:0;
    gap:2px!important;
    padding:3px!important;
    border:1px solid var(--topbar-control-border,color-mix(in srgb,var(--ink,#262823) 23%,transparent))!important;
    border-radius:var(--segment-radius)!important;
    background:var(--topbar-control-fill,color-mix(in srgb,var(--ink,#262823) 4%,transparent))!important;
    box-shadow:none!important;

    & > :is(button,a,[role="tab"]):not([hidden]), & > label > span {
        --segment-fill:transparent;
        --segment-ink:var(--ink-soft,var(--ink,#262823));
        --solid-accent-fill:var(--planner-action-fill,var(--accent,#c76345));
        --solid-accent-ink:var(--planner-action-ink,var(--custom-accent-ink,#19141c));
        --hover-background:var(--accent-hover-surface);
        --hover-color:var(--ink,#262823);
        flex:0 0 auto!important;
        display:inline-flex!important;
        align-items:center;
        justify-content:center;
        gap:6px;
        min-width:0;
        min-height:var(--segment-min-height)!important;
        height:auto!important;
        padding:0 var(--segment-inline-padding)!important;
        border:0!important;
        border-radius:var(--segment-item-radius)!important;
        background:var(--segment-fill)!important;
        color:var(--segment-ink)!important;
        box-shadow:none!important;
        font-family:var(--planner-font,var(--yako-font,sans-serif));
        font-size:var(--segment-font-size)!important;
        font-weight:600!important;
        line-height:1.2!important;
        text-align:center;
        text-decoration:none;
        white-space:nowrap;
        transform:none!important;
        transition:var(--hover-transition);
        cursor:pointer;
    }
    & > :is(button,a,[role="tab"]):is([aria-pressed="true"],[aria-selected="true"],[aria-current="page"],.selected),
    & > label > input:checked + span {
        --segment-fill:var(--solid-accent-fill);
        --segment-ink:var(--solid-accent-ink);
        --hover-background:var(--solid-accent-hover-background);
        --hover-color:var(--solid-accent-hover-color);
    }
    & > :is(button,a,[role="tab"]):hover:where(:not([data-touch-input] *)):where(:not(:disabled):not([aria-disabled="true"])),
    & > label:hover:where(:not([data-touch-input] *)) > input:not(:disabled) + span {
        --segment-fill:var(--hover-background);
        --segment-ink:var(--hover-color);
    }
    & > :is(button,a,[role="tab"]):focus-visible,
    & > label > input:focus-visible + span {
        outline:2px solid var(--focus,var(--accent,#c76345))!important;
        outline-offset:2px!important;
    }
    &.focus-mode-switch > button:focus-visible:where(:not([data-keyboard-navigation] *)) {
        outline:none!important;
    }
    & > :is(button,a,[role="tab"]):is(:disabled,[aria-disabled="true"]),
    & > label > input:disabled + span { opacity:.5!important; cursor:default; }

    /* Equal columns keep the existing sliding indicators aligned. */
    &.planner-view-switch { flex-wrap:nowrap; }
    &.planner-view-switch > a { min-width:44px!important; box-sizing:border-box; }
    &.focus-mode-switch { border-color:transparent!important; }
    &.canvas-sticker-tabs { width:100%!important; }
    &:is(.focus-mode-switch,.appearance-picture-fit,.canvas-sticker-tabs) {
        display:inline-grid!important;
        align-items:stretch;
    }
    &:is(.focus-mode-switch,.appearance-picture-fit,.canvas-sticker-tabs) > button:is([aria-pressed="true"],[aria-selected="true"],.selected) {
        --segment-fill:transparent;
    }
    &:is(.focus-mode-switch,.appearance-picture-fit,.canvas-sticker-tabs)::before {
        border-radius:var(--segment-item-radius)!important;
    }
    &[hidden] { display:none!important; }
    @media (pointer:coarse) {
        &:not(.planner-view-switch) { --segment-min-height:44px; }
    }
    @media (prefers-reduced-motion:reduce) {
        & > :is(button,a,[role="tab"]), & > label > span { transition:none!important; }
    }
    @media (forced-colors:active) {
        border-color:ButtonText!important;
        background:ButtonFace!important;
        & > :is(button,a,[role="tab"]):not([hidden]), & > label > span {
            --segment-ink:ButtonText;
            --hover-background:Highlight;
            --hover-color:HighlightText;
        }
        & > :is(button,a,[role="tab"]):is([aria-pressed="true"],[aria-selected="true"],[aria-current="page"],.selected),
        & > label > input:checked + span {
            --segment-fill:Highlight;
            --segment-ink:HighlightText;
            forced-color-adjust:none;
        }
        &:is(.focus-mode-switch,.appearance-picture-fit,.canvas-sticker-tabs)::before { background:Highlight!important; }
    }
}

.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--ink); font-weight: 710; letter-spacing: -.025em; text-decoration: none; }
.brand-mark { position: relative; width: 29px; height: 29px; display: inline-grid; place-items: center; background: var(--accent); border-radius: 56% 44% 48% 52% / 47% 44% 56% 53%; transform: rotate(-8deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 10px; height: 10px; top: -2px; background: var(--accent); border-radius: 3px 9px 2px 9px; }
.brand-mark::before { left: 2px; transform: rotate(-18deg); }
.brand-mark::after { right: 2px; transform: rotate(108deg); }
.brand-mark > span { width: 7px; height: 7px; border-radius: 50%; background: var(--surface); box-shadow: 9px 0 0 var(--surface); }
@media (max-width: 650px) {
    .button-small { min-height: 38px; padding-inline: 14px; }
}

/* Disclosure standard: morph the chevron's path instead of rotating its box.
   Keep the same points so rapid state changes reverse from the visible shape. */
svg[data-disclosure-chevron] { --disclosure-chevron-path:path("M6 9 L12 15 L18 9"); flex:none; }
svg[data-disclosure-chevron="chevron-up"] { --disclosure-chevron-path:path("M6 15 L12 9 L18 15"); }
svg[data-disclosure-chevron="chevron-right"] { --disclosure-chevron-path:path("M9 6 L15 12 L9 18"); }
svg[data-disclosure-chevron] > path { d:var(--disclosure-chevron-path); transition:d 220ms cubic-bezier(.2,.7,.2,1); }
:is(button,[role="button"])[aria-expanded="true"] > svg[data-disclosure-chevron],
.planner-select-trigger:has(> select[aria-expanded="true"]) > svg[data-disclosure-chevron],
:is(button,[role="button"])[aria-expanded="true"] > .canvas-tool-disclosure > svg[data-disclosure-chevron],
details[open] > summary svg[data-disclosure-chevron] { --disclosure-chevron-path:path("M6 15 L12 9 L18 15"); }
/* Nested conversation/calendar drawers keep their right-to-down convention. */
:is(.chat-calendar-disclosure,.calendar-section-toggle)[aria-expanded="false"] > svg[data-disclosure-chevron] { --disclosure-chevron-path:path("M9 6 L15 12 L9 18"); }
:is(.chat-calendar-disclosure,.calendar-section-toggle)[aria-expanded="true"] > svg[data-disclosure-chevron] { --disclosure-chevron-path:path("M6 9 L12 15 L18 9"); }
:is(button,[role="button"])[aria-expanded="true"] > svg[data-disclosure-chevron="chevron-right"] { --disclosure-chevron-path:path("M6 9 L12 15 L18 9"); }
@media (prefers-reduced-motion:reduce) { svg[data-disclosure-chevron] > path { transition:none; } }

/* Checkbox and selection-indicator standard. Keep geometry and accent contrast
   here; consumers own their labels, layout, hit areas and checked state.
   Switches, day chips and circular task-completion buttons remain distinct. */
:root { --planner-checkmark-size:18px; --planner-checkmark-radius:5px; }
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)),
    .calendar-filter-check,
    .task-assignee-check,
    .forever-board-card-checkmark,
    .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"],
    .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark,
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox,
    .planner-select-popup .planner-select-option[role="option"]
) {
    --planner-checkmark-fill:color-mix(in srgb,var(--accent,#c76345) 8%,transparent);
    --planner-checkmark-border:color-mix(in srgb,var(--accent,#c76345) 68%,var(--ink,#262823));
    --planner-checkmark-ink:var(--ink,#262823);
    --planner-checkmark-opacity:0;
    --planner-checkmark-scale:.65;
    --planner-checkmark-clip:inset(0 100% 0 0);
}
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)):is(:checked,:indeterminate,[aria-checked="mixed"]),
    .calendar-filter-option[aria-pressed="true"] .calendar-filter-check,
    .task-assignee-option[aria-pressed="true"] .task-assignee-check,
    .forever-board-card-check[data-completed="true"] .forever-board-card-checkmark,
    .forever-canvas-menu-item[aria-checked="true"] .forever-canvas-menu-check,
    .chat-notification-option:has(input:checked) .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"][aria-checked="true"],
    .task-appearance-choice:has(input:checked) .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark[data-checked="true"],
    .sharing-recipient-option[aria-pressed="true"] .planner-checkmark,
    .planner-time-option[aria-selected="true"] .planner-checkmark,
    .task-description-input .description-checklist-toggle[aria-checked="true"],
    .description-checklist .checklist-row > input[type="checkbox"]:checked,
    .description-list-motion-checkbox[data-completed],
    .planner-select-popup .planner-select-option[role="option"][aria-selected="true"]
) {
    --planner-checkmark-fill:var(--accent,#c76345);
    --planner-checkmark-border:var(--accent,#c76345);
    --planner-checkmark-ink:var(--custom-accent-ink,var(--planner-accent-ink,#19141c));
    --planner-checkmark-opacity:1;
    --planner-checkmark-scale:1;
    --planner-checkmark-clip:inset(0);
}
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)),
    .calendar-filter-check,
    .task-assignee-check,
    .forever-board-card-checkmark,
    .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"],
    .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark
),
:is(
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox
)::before,
.planner-select-popup .planner-select-option[role="option"]::after {
    box-sizing:border-box;
    display:inline-grid;
    flex:none;
    place-content:center;
    width:var(--planner-checkmark-size);
    height:var(--planner-checkmark-size);
    min-width:var(--planner-checkmark-size);
    min-height:var(--planner-checkmark-size);
    margin:0;
    padding:0;
    border:1.5px solid var(--planner-checkmark-border);
    border-radius:var(--planner-checkmark-radius);
    background:var(--planner-checkmark-fill);
    color:var(--planner-checkmark-ink);
    font-size:0;
    line-height:1;
    vertical-align:middle;
    transition:background-color 180ms ease,border-color 180ms ease,transform 140ms cubic-bezier(.2,.8,.2,1);
}
input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)) { appearance:none; -webkit-appearance:none; cursor:pointer; touch-action:manipulation; }
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)),
    .calendar-filter-check,
    .task-assignee-check,
    .forever-board-card-checkmark,
    .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"],
    .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark
):not(.is-animated)::after,
:is(
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox
)::after,
.planner-select-popup .planner-select-option[role="option"]::before {
    content:"";
    box-sizing:border-box;
    width:14px;
    height:14px;
    margin:0;
    border:0;
    background:var(--planner-checkmark-ink);
    /* Match the animated menu tick. Its visible bounds share the center of
       this square, so grid and absolute-positioned indicators align alike. */
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 L5.5 10.5 L11.5 3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity:var(--planner-checkmark-opacity);
    transform:translate(var(--planner-checkmark-x,0px),var(--planner-checkmark-y,0px)) scale(var(--planner-checkmark-scale));
    clip-path:var(--planner-checkmark-clip);
    pointer-events:none;
    transition:clip-path 220ms cubic-bezier(.22,.8,.25,1),transform 220ms cubic-bezier(.22,.8,.25,1),opacity 120ms ease;
}
/* Editable checklists keep their larger text-aligned hit areas. */
:is(
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox
) { --planner-checkmark-x:-50%; --planner-checkmark-y:-50%; }
:is(
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox
)::before { content:""; position:absolute; top:50%; left:9px; transform:translate(-50%,-50%); pointer-events:none; transition:var(--hover-transition),transform 140ms cubic-bezier(.2,.8,.2,1); }
:is(
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox
)::after { position:absolute; top:50%; left:9px; }
/* Animated menu paths retain the existing reversible stroke animation. */
.forever-canvas-menu-check.is-animated svg { color:var(--planner-checkmark-ink); }
:is(.calendar-filter-check,.task-assignee-check,.appearance-picture-selected) > svg { display:none; }
.planner-select-popup .planner-select-option[role="option"]::before { grid-column:2; grid-row:1; place-self:center; z-index:1; }
.planner-select-popup .planner-select-option[role="option"]::after { grid-column:2; grid-row:1; place-self:center; }
.planner-select-popup .planner-select-option[role="option"][data-has-icon]::before { grid-column:3; }
.planner-select-popup[data-compact] .planner-select-option[role="option"]::before,
.planner-select-popup[data-compact] .planner-select-option[role="option"]::after { position:absolute; top:50%; grid-area:auto; place-self:auto; }
.planner-select-popup[data-compact] .planner-select-option[role="option"]::before { --planner-checkmark-y:-50%; right:calc(5px + (var(--planner-checkmark-size) - 14px) / 2); }
.planner-select-popup[data-compact] .planner-select-option[role="option"]::after { right:5px; transform:translateY(-50%); }
/* Keep the mixed dash in the same centered square as the tick. A separate
   2px-high grid item rounds its vertical position differently at text baselines. */
input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)):is(:indeterminate,[aria-checked="mixed"])::after { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7H11.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); clip-path:inset(0); opacity:1; }
input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)):active:not(:disabled) { transform:scale(.88); }
input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)):disabled { cursor:default; opacity:.55; }
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)),
    .calendar-filter-check,
    .task-assignee-check,
    .forever-board-card-checkmark,
    .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"],
    .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark,
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox,
    .planner-select-popup .planner-select-option[role="option"]
):focus-visible,
.calendar-filter-option:focus-visible .calendar-filter-check,
.task-assignee-option:focus-visible .task-assignee-check,
.forever-board-card-check:focus-visible .forever-board-card-checkmark,
.forever-canvas-menu-item:focus-visible .forever-canvas-menu-check,
.chat-notification-option:has(input:focus-visible) .forever-canvas-menu-check,
.sharing-recipient-option:focus-visible .planner-checkmark,
.planner-time-option:focus-visible .planner-checkmark,
.task-appearance-choice:has(input:focus-visible) .task-appearance-choice-check { --planner-checkmark-border:var(--focus,var(--accent,#c76345)); }
@keyframes description-checklist-draw {
    0% { opacity:0; clip-path:inset(0 100% 0 0); transform:translate(-50%,-50%) scale(.75); }
    55% { opacity:1; clip-path:inset(0); transform:translate(-50%,-50%) scale(1.08); }
    100% { opacity:1; clip-path:inset(0); transform:translate(-50%,-50%) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)),
    .calendar-filter-check,
    .task-assignee-check,
    .forever-board-card-checkmark,
    .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"],
    .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark
),
:is(
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox
)::before,
.planner-select-popup .planner-select-option[role="option"]::after,
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)),
    .calendar-filter-check,
    .task-assignee-check,
    .forever-board-card-checkmark,
    .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"],
    .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark
):not(.is-animated)::after,
:is(
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox
)::after,
.planner-select-popup .planner-select-option[role="option"]::before { transition:none; }
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)):active:not(:disabled) { transform:none; }
}
@media (forced-colors:active) {
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)),
    .calendar-filter-check,
    .task-assignee-check,
    .forever-board-card-checkmark,
    .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"],
    .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark,
    .task-description-input .description-checklist-toggle,
    .description-checklist .checklist-row > input[type="checkbox"],
    .description-list-motion-checkbox,
    .planner-select-popup .planner-select-option[role="option"]
) { --planner-checkmark-fill:Canvas; --planner-checkmark-border:ButtonText; --planner-checkmark-ink:ButtonText; forced-color-adjust:none; }
:is(
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)):is(:checked,:indeterminate,[aria-checked="mixed"]),
    .calendar-filter-option[aria-pressed="true"] .calendar-filter-check,
    .task-assignee-option[aria-pressed="true"] .task-assignee-check,
    .forever-board-card-check[data-completed="true"] .forever-board-card-checkmark,
    .forever-canvas-menu-item[aria-checked="true"] .forever-canvas-menu-check,
    .chat-notification-option:has(input:checked) .forever-canvas-menu-check,
    .forever-canvas-editor-row [data-canvas-action="toggle-checklist"][aria-checked="true"],
    .task-appearance-choice:has(input:checked) .task-appearance-choice-check,
    .is-selected .appearance-picture-selected,
    .planner-checkmark[data-checked="true"],
    .sharing-recipient-option[aria-pressed="true"] .planner-checkmark,
    .planner-time-option[aria-selected="true"] .planner-checkmark,
    .task-description-input .description-checklist-toggle[aria-checked="true"],
    .description-checklist .checklist-row > input[type="checkbox"]:checked,
    .description-list-motion-checkbox[data-completed],
    .planner-select-popup .planner-select-option[role="option"][aria-selected="true"]
) { --planner-checkmark-fill:Highlight; --planner-checkmark-border:Highlight; --planner-checkmark-ink:HighlightText; }
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input)) { appearance:auto; -webkit-appearance:checkbox; forced-color-adjust:auto; background:revert; border:revert; color:revert; }
    input[type="checkbox"]:not([role="switch"]):not(.planner-switch):not(:where(.recurrence-days input,.settings-days input,.working-days input,.board-save-card-style input,.chat-notification-option input,.task-appearance-choice input,.task-appearance-motion-control input,.description-checklist input))::after { display:none; }
}

/* Shared message and image context menus use the same chat menu skin. */
.message-context-menu{position:fixed;inset:auto;box-sizing:border-box;width:max-content;min-width:208px;margin:0;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line,#deddd5);border-radius:12px;padding:5px;background:var(--surface,#fffdf8);color:var(--ink,#262823);box-shadow:0 16px 44px rgb(30 27 20 / 14%),0 3px 10px rgb(30 27 20 / 7%);font-family:var(--planner-font,var(--yako-font,inherit));font-size:13px;line-height:1.4;text-align:start;user-select:none;touch-action:pan-y;cursor:default}
.message-context-menu button[role=menuitem]{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;min-height:34px;margin:0;padding:7px 9px;border:0;border-radius:7px;text-align:inherit;background:transparent;color:inherit;font:inherit;overflow-wrap:anywhere;cursor:pointer;touch-action:manipulation;transition:var(--hover-transition)}
.message-context-menu svg{flex:none;width:16px;height:16px}
.message-context-menu button[role=menuitem]:focus:not(:disabled) {background:color-mix(in srgb,var(--ink,#262823) 7%,transparent);outline:none}
.message-context-menu button[role=menuitem]:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); outline:none; color:var(--hover-color); }
.message-context-menu button[role=menuitem]:focus-visible:not(:disabled){outline:2px solid var(--focus,var(--accent,#cb775b));outline-offset:-2px}
.message-context-menu button[role=menuitem]:disabled{opacity:.4;cursor:default}
.message-context-menu button[role=menuitem][hidden]{display:none}
@media(pointer:coarse){.message-context-menu button[role=menuitem]{min-height:42px;padding-block:10px}}
.image-context-error { display:block; box-sizing:border-box; width:0; min-width:100%; padding:7px 9px; color:var(--danger,#b7473b); font-size:.8rem; overflow-wrap:anywhere; }
.message-context-menu button.message-menu-delete[role=menuitem] { color:var(--danger,#b7473b); }
.message-context-menu button.message-menu-delete[role=menuitem]:hover:where(:not([data-touch-input] *)):not(:disabled) { color:var(--danger,#b7473b); }
.image-context-error[hidden] { display:none; }
:is([data-attachment-image-photo],[data-chat-attachment-image]):focus-visible { outline:2px solid var(--focus,var(--accent)); outline-offset:3px; }
@media(forced-colors:active) { .message-context-menu { background:Canvas; color:CanvasText; border:1px solid ButtonText; } }
@media(prefers-reduced-motion:reduce) { .message-context-menu button[role=menuitem] { transition:none; } }

/* Calendar image icons share the private thumbnail cache with appearance pictures. */
.calendar-image-icon { position:relative; display:inline-block; flex:none; overflow:hidden; border-radius:var(--custom-radius,4px); vertical-align:middle; }
img[data-avatar-image][data-avatar-poster-pending] { visibility:hidden; }
@media (prefers-reduced-motion:reduce) { img[data-avatar-image][src^="data:image/gif;base64,"] { visibility:hidden; } }
.calendar-image-icon > .calendar-image-icon-fallback { display:block; width:100%; height:100%; }
.calendar-image-icon:has(.appearance-picture-media img[data-picture-ready]) > .calendar-image-icon-fallback { visibility:hidden; }
@media (forced-colors:active),print { .calendar-image-icon > .calendar-image-icon-fallback { visibility:visible!important; } }

/* File previews share filename wrapping in storage, task attachments and library choices. */
.file-preview-name { display: inline-flex; align-items: flex-end; min-width: 0; max-width: 100%; line-height: 1.4; white-space: normal; text-align: center; }
.file-preview-stem { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--file-preview-lines, 3); min-width: 0; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; }
.file-preview-name:has(> .file-preview-extension:not(:empty)) .file-preview-stem { text-align: end; }
.file-preview-extension { flex: none; white-space: nowrap; }

/* Task attachments and library choices share the same preview tile. */
.attachment-picker-tile { appearance:none; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; gap:0; min-width:0; width:100%; min-height:36px; height:auto; margin:0; padding:3px; border:1px solid transparent; border-radius:9px; background:transparent; color:inherit; box-shadow:none; font:400 13px/1.4 var(--planner-font,sans-serif); text-align:center; cursor:pointer; transition:var(--hover-transition); }
.attachment-picker-tile:hover:where(:not([data-touch-input] *)):not(:disabled,.attachment-upload-placeholder) { background:var(--hover-background); color:var(--hover-color); border-color:var(--hover-border); }
.attachment-picker-tile:focus-visible { outline:2px solid var(--accent,#cb775b); outline-offset:2px; }
.attachment-picker-tile:disabled { opacity:.45; cursor:default; }
.attachment-picker-tile.attachment-upload-placeholder { opacity:1; cursor:default; animation:attachment-picker-preview-enter 200ms ease-out; }
.attachment-picker-tile[aria-pressed="true"] { border-color:var(--accent,#cb775b)!important; background:color-mix(in srgb,var(--accent,#cb775b) 10%,transparent); }
.attachment-picker-art { display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; height:110px; min-width:0; min-height:62px; overflow:hidden; scrollbar-width:thin; pointer-events:none; }
.attachment-picker-art > svg { flex:none; width:28px; height:28px; }
.attachment-picker-art img { display:block; width:100%; height:100%; min-width:0; object-fit:contain; filter:none; animation:attachment-picker-preview-enter 200ms ease-out; }
.attachment-picker-art .file-preview-name { box-sizing:border-box; padding:.35rem; color:var(--ink-soft,#696b61); font-size:.7rem; }
.attachment-picker-media { --attachment-play-size:36px; position:relative; min-width:0; }
.attachment-picker-media .attachment-picker-art .file-preview-name { margin-bottom:var(--attachment-play-size); }
.attachment-picker-media > .attachment-picker-play { position:absolute; left:7px; bottom:7px; display:grid; place-items:center; box-sizing:border-box; width:var(--attachment-play-size); height:var(--attachment-play-size); padding:0; border:1px solid var(--line,#d9dacf); border-radius:var(--custom-radius,7px); background:var(--surface,var(--paper,#fffdf8)); color:var(--ink,#34352e); cursor:pointer; transition:var(--hover-transition); }
.attachment-picker-play svg { width:22px; height:22px; pointer-events:none; }
.attachment-picker-media > .attachment-picker-play:hover:where(:not([data-touch-input] *)):not(:disabled) { background:var(--hover-background); color:var(--hover-color); border-color:var(--hover-border); }
.attachment-picker-media > .attachment-picker-play:focus-visible { outline:2px solid var(--accent,#cb775b); outline-offset:2px; }
.attachment-picker-media > .attachment-picker-play:disabled { opacity:.45; cursor:default; }
@media (pointer:coarse) { .attachment-picker-media { --attachment-play-size:44px; } }
@media (prefers-reduced-motion:reduce) { .attachment-picker-media > .attachment-picker-play { transition:none; } }
@media (forced-colors:active) { .attachment-picker-media > .attachment-picker-play:focus-visible { outline-color:Highlight; } }
@keyframes attachment-picker-preview-enter { from { opacity:0; } to { opacity:1; } }
@media (max-width:600px) { .attachment-picker-tile { min-height:40px; } }
@media (prefers-reduced-motion:reduce) { .attachment-picker-tile { transition:none; } .attachment-picker-art img,.attachment-picker-tile.attachment-upload-placeholder { animation:none; } }
@media (forced-colors:active) { .attachment-picker-tile[aria-pressed="true"] { outline:2px solid Highlight; } }

/* Shared attachment preview dialog. */
.chat-attachment-viewer { box-sizing:border-box; position:fixed; inset:0; display:none; grid-template-rows:minmax(0,1fr); width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:max(64px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(64px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); overflow:hidden; border:0; background:transparent; color:#f5f6fa; box-shadow:none; outline:none; font-family:var(--planner-font); }
.chat-attachment-viewer[open] { display:grid; }
.chat-attachment-viewer,.chat-attachment-viewer * { -webkit-user-select:none; user-select:none; }
.chat-attachment-viewer::backdrop { background:rgb(0 0 0 / .8); }
.chat-attachment-viewer-close { position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); z-index:1; display:grid; place-items:center; width:44px; height:44px; margin:0; padding:0; border:0; background:transparent; color:inherit; opacity:.8; cursor:pointer; transition:var(--hover-transition); }
.chat-attachment-viewer-close:focus-visible { outline:2px solid #ddd1ff; outline-offset:2px; }
.chat-attachment-viewer-stage { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-width:0; min-height:0; }
.chat-attachment-viewer-stage :is(img,video) { display:block; width:auto; height:auto; max-width:100%; max-height:100%; min-width:0; min-height:0; object-fit:contain; }
.chat-attachment-viewer-stage video { width:min(100%,960px); }
.attachment-audio-preview { display:flex; flex-direction:column; align-items:center; gap:16px; box-sizing:border-box; width:min(100%,540px); max-height:100%; padding:16px; overflow:auto; text-align:center; overflow-wrap:anywhere; }
.attachment-audio-preview strong { max-width:100%; }
.attachment-audio-preview audio { flex:none; width:min(100%,480px); }
.chat-attachment-viewer[data-image-viewer-motion="opening"] .chat-attachment-viewer-stage { animation:chat-image-open 180ms ease-out both; }
.chat-attachment-viewer[data-image-viewer-motion="closing"] .chat-attachment-viewer-stage { animation:chat-image-close 180ms ease-in both; }
.chat-attachment-viewer[data-image-viewer-motion="opening"]::backdrop { animation:chat-image-backdrop-in 180ms ease-out both; }
.chat-attachment-viewer[data-image-viewer-motion="closing"]::backdrop { animation:chat-image-backdrop-out 180ms ease-in both; }
.chat-attachment-viewer[data-image-viewer-motion="opening"] .chat-attachment-viewer-close,.chat-attachment-viewer[data-image-viewer-motion="opening"] [data-image-zoom-controls] { animation:chat-image-fade-in 180ms ease-out both; }
.chat-attachment-viewer[data-image-viewer-motion="closing"] .chat-attachment-viewer-close,.chat-attachment-viewer[data-image-viewer-motion="closing"] [data-image-zoom-controls] { animation:chat-image-fade-out 180ms ease-in both; }
.chat-attachment-viewer[data-image-viewer-motion="closing"] .chat-attachment-viewer-stage,.chat-attachment-viewer[data-image-viewer-motion="closing"] .chat-attachment-viewer-close,.chat-attachment-viewer[data-image-viewer-motion="closing"] [data-image-zoom-controls] { pointer-events:none; }
@keyframes chat-image-open { from { opacity:var(--image-viewer-from-opacity,0); transform:var(--image-viewer-from-transform,scale(.96)); } to { opacity:1; transform:none; } }
@keyframes chat-image-close { from { opacity:var(--image-viewer-from-opacity,1); transform:var(--image-viewer-from-transform,none); } to { opacity:0; transform:scale(.96); } }
@keyframes chat-image-fade-in { from { opacity:var(--image-viewer-from-opacity,0); } to { opacity:1; } }
@keyframes chat-image-fade-out { from { opacity:var(--image-viewer-from-opacity,1); } to { opacity:0; } }
@keyframes chat-image-backdrop-in { from { opacity:var(--image-viewer-from-backdrop-opacity,0); } to { opacity:1; } }
@keyframes chat-image-backdrop-out { from { opacity:var(--image-viewer-from-backdrop-opacity,1); } to { opacity:0; } }
@media(hover:hover) { .chat-attachment-viewer-close:not(:disabled):hover:where(:not([data-touch-input] *)) { background:var(--hover-background); color:var(--hover-color); } }
@media(max-width:540px) {
    .chat-attachment-viewer { padding:max(56px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(56px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
}
@media(forced-colors:active) {
    .chat-attachment-viewer-close { background:Canvas; color:CanvasText; }
    .chat-attachment-viewer-close:focus-visible { outline-color:Highlight; }
}
@media(prefers-reduced-motion:reduce) {
    .chat-attachment-viewer-close { transition:none; }
    .chat-attachment-viewer[data-image-viewer-motion] .chat-attachment-viewer-stage,.chat-attachment-viewer[data-image-viewer-motion]::backdrop,.chat-attachment-viewer[data-image-viewer-motion] .chat-attachment-viewer-close,.chat-attachment-viewer[data-image-viewer-motion] [data-image-zoom-controls] { animation:none; }
}