/* Keep the native select's size, focus and binding; only its menu is enhanced. */
select[data-planner-select],
:is(.planner-shell, .task-details-dialog, .event-dialog, .focus-mode) select[data-planner-select] {
    -webkit-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    padding-inline-end:30px;
    border-radius:10px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9 L12 15 L18 9' stroke='%238b8b8b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* Component hover shorthands must not tile or reposition the native arrow. */
    background-repeat:no-repeat!important;
    background-position:right var(--select-chevron-offset,9px) center!important;
    background-size:14px 14px!important;
    text-overflow:ellipsis;
    cursor:pointer;
    transition:var(--hover-transition),box-shadow 160ms ease;
}

.planner-select-trigger { position:relative; min-width:0; }
.planner-select-trigger > select { width:100%; padding-inline-end:30px; }
.planner-select-trigger > select[data-planner-select] { background-image:none!important; }
.planner-select-trigger > svg[data-disclosure-chevron] {
    position:absolute;
    inset-inline-end:var(--select-chevron-offset,9px);
    top:50%;
    margin-top:-7px;
    color:var(--ink-soft,var(--ink,#262823));
    pointer-events:none;
    transition:color 160ms ease;
}
.planner-select-trigger:has(> select:hover:where(:not([data-touch-input] *)):not(:disabled)) > svg[data-disclosure-chevron] { color:var(--hover-color); }
.planner-select-trigger:has(> select[aria-expanded="true"]) > svg[data-disclosure-chevron] { color:var(--open-color); }
.planner-select-trigger:has(> select:disabled) > svg[data-disclosure-chevron] { opacity:.45; }
.planner-select-trigger > select:not([data-planner-select]) + svg[data-disclosure-chevron] { display:none; }

select[data-planner-select]:dir(rtl) {
    background-position:left var(--select-chevron-offset,9px) center!important;
}

select[data-planner-select]:hover:where(:not([data-touch-input] *)):not(:disabled):not([aria-invalid="true"]):not([aria-expanded="true"]) {
    background-color:var(--hover-background);
    color:var(--hover-color);
    border-color:var(--hover-border);
}

select[data-planner-select]:focus-visible {
    outline:0;
    box-shadow:inset 0 0 0 1px var(--focus,#66685f);
}

select[data-planner-select][aria-expanded="true"],
:is(.planner-shell, .task-details-dialog, .event-dialog, .focus-mode) select[data-planner-select][aria-expanded="true"] {
    background-color:var(--open-background);
    color:var(--open-color);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 15 L12 9 L18 15' stroke='%238b8b8b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

select[data-planner-select][aria-expanded="true"]:not([aria-invalid="true"]) {
    border-color:var(--open-border);
}

select[data-planner-select]:disabled {
    opacity:.45;
    cursor:default;
}

.sharing-field select[data-planner-select] {
    transition:var(--hover-transition),box-shadow 160ms ease,transform 100ms ease;
}

.sharing-field select[data-planner-select]:hover:where(:not([data-touch-input] *)):not(:disabled):not([aria-expanded="true"]) {
    background-color:var(--hover-background);
    color:var(--hover-color);
    border-color:var(--hover-border);
}

.sharing-field select[data-planner-select]:active:not(:disabled):not([aria-expanded="true"]) {
    transform:scale(.98);
    background-color:var(--accent-soft,#f4dfd6);
}

/* The filter already has a shared icon/border container. Keep it one control. */
.view-controls .filter-select:has(select[data-planner-select]) {
    border-radius:10px;
    transition:var(--hover-transition);
}

.view-controls .filter-select:has(select[data-planner-select]:focus-visible) {
    border-color:var(--focus,#66685f);
    box-shadow:inset 0 0 0 1px var(--focus,#66685f);
}

.view-controls .filter-select:has(select[data-planner-select][aria-expanded="true"]) {
    border-color:var(--open-border);
    background-color:var(--open-background);
    color:var(--open-color);
}

.view-controls .filter-select select[data-planner-select] {
    --select-chevron-offset:0px;
    padding-inline-end:23px;
    border-radius:0;
    background-color:transparent;
    box-shadow:none;
}

.forever-board-toolbar select[data-planner-select] {
    --select-chevron-offset:4px;
    padding-inline-start:6px;
    padding-inline-end:23px;
    border-radius:6px;
}

/* Keep the offscreen label inside the toolbar's horizontal scroll area. */
.forever-board-toolbar label:has(select[data-planner-select]) {
    position:relative;
}

.inline-day-note-calendar select[data-planner-select] {
    border-radius:0;
}

/* A manual top-layer popover escapes scrolling panels without reparenting. */
.planner-select-popup {
    position:fixed;
    z-index:600;
    inset:auto;
    display:none;
    gap:2px;
    box-sizing:border-box;
    min-width:160px;
    width:max-content;
    max-width:calc(100vw - 24px);
    max-height:min(360px,calc(100dvh - 24px));
    margin:0;
    padding:6px;
    overflow:auto;
    overscroll-behavior:contain;
    touch-action:pan-y pinch-zoom;
    scrollbar-width:inherit;
    scrollbar-color:inherit;
    border:1px solid var(--line,#dcd8ce);
    border-radius:12px;
    background:var(--paper,#f7f5ef);
    color:var(--ink,#262823);
    box-shadow:0 12px 40px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.08);
    font:400 .9375rem/1.4 var(--planner-font,var(--yako-font,sans-serif));
    text-align:start;
    white-space:normal;
    transform-origin:top center;
}

.planner-select-popup[data-canvas-zoom-surface] { touch-action:pan-y; }

.planner-select-popup:popover-open,
.planner-select-popup[data-fallback] {
    display:grid;
}

.planner-select-popup::backdrop {
    background:transparent;
    pointer-events:none;
}

.planner-select-popup[data-compact] { min-width:0; }
.planner-select-popup[data-compact] .planner-select-option[role="option"] { grid-template-columns:minmax(0,1fr); padding-inline:20px; text-align:center; font-size:19px; }
.planner-select-popup[data-compact] .planner-select-option[role="option"]::after { position:absolute; right:5px; }

.planner-select-popup .planner-select-option[role="option"] {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 18px;
    align-items:center;
    gap:12px;
    box-sizing:border-box;
    width:100%;
    min-width:0;
    min-height:40px;
    margin:0;
    padding:8px 10px;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:inherit;
    font:inherit;
    line-height:1.35;
    text-align:start;
    white-space:normal;
    overflow-wrap:anywhere;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:var(--hover-transition),box-shadow 160ms ease,transform 100ms ease;
}

.planner-select-popup .planner-select-option[role="option"]::after {
    content:"";
    grid-column:2;
    grid-row:1;
    justify-self:center;
    font-size:.9375rem;
    font-weight:600;
}

.planner-select-popup .planner-select-option[data-has-icon] {
    grid-template-columns:19px minmax(0,1fr) 18px;
}

.planner-select-option-icon {
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    color:var(--calendar-color,currentColor);
    pointer-events:none;
}

.planner-select-popup .planner-select-option[data-has-description] { row-gap:3px; }
.planner-select-option-description { grid-column:1; grid-row:2; color:var(--ink-soft,#66685f); font-size:.75rem; line-height:1.4; font-weight:400; }
.planner-select-option[data-has-icon] .planner-select-option-description { grid-column:2; }

.planner-select-option-label { min-width:0; }

.planner-select-popup .planner-select-option[data-has-icon]::after { grid-column:3; }

.planner-select-popup .planner-select-option[role="option"]:hover:where(:not([data-touch-input] *)):not([aria-disabled="true"]) {
    background:var(--hover-background);
    color:var(--hover-color);
}

.planner-select-popup .planner-select-option[role="option"][data-active="true"] {
    background:var(--paper-deep,#eeebe2);
}

.planner-select-popup .planner-select-option[role="option"][data-active="true"] {
    box-shadow:inset 0 0 0 1px var(--line,#dcd8ce);
}

.planner-select-popup .planner-select-option[role="option"][aria-selected="true"] {
    background:var(--accent-soft,#f4dfd6);
    color:var(--accent-deep,#9f422b);
}

.planner-select-popup .planner-select-option[role="option"][aria-selected="true"]::after {
    content:"";
}

body:has(.focus-session-length select[aria-expanded="true"]) .planner-select-popup .planner-select-option[role="option"] { grid-template-columns:minmax(0,1fr); }
body:has(.focus-session-length select[aria-expanded="true"]) .planner-select-popup .planner-select-option[role="option"]::after,
body:has(.focus-session-length select[aria-expanded="true"]) .planner-select-popup .planner-select-option[role="option"]::before { content:none; }
body:has(.focus-session-length select[aria-expanded="true"]) .planner-select-popup .planner-select-option[role="option"][aria-selected="true"] { border:0; box-shadow:none; }

.planner-select-popup .planner-select-option[role="option"][aria-selected="true"][data-active="true"] {
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 55%,transparent);
}

.planner-select-popup[data-canvas-calendar-picker] { border:0; }
.planner-select-popup[data-canvas-calendar-picker] .planner-select-option[role="option"] {
    grid-template-columns:minmax(0,1fr);
    border:0;
    box-shadow:none;
}
.planner-select-popup[data-canvas-calendar-picker] .planner-select-option[role="option"]::after,
.planner-select-popup[data-canvas-calendar-picker] .planner-select-option[role="option"]::before { content:none; }
.planner-select-popup[data-canvas-calendar-picker] .planner-select-option[role="option"][data-active="true"] { box-shadow:none; }

.planner-select-popup .planner-select-option[role="option"][aria-selected="true"]:hover:where(:not([data-touch-input] *)) {
    background:var(--hover-background);
    color:var(--hover-color);
}

.planner-select-popup .planner-select-option[role="option"]:active:not([aria-disabled="true"]) {
    transform:scale(.98);
    background:color-mix(in srgb,var(--accent,#c76345) 18%,var(--accent-soft,#f4dfd6));
}

.planner-select-popup .planner-select-option[role="option"][aria-disabled="true"] {
    opacity:.45;
    cursor:default;
}

.planner-select-popup .planner-select-group {
    margin:4px 0 0;
    padding:7px 10px 4px;
    color:var(--ink-soft,#66685f);
    font-size:.75rem;
    font-weight:500;
    line-height:1.4;
    overflow-wrap:anywhere;
}

@media (pointer:coarse) {
    .planner-select-popup .planner-select-option[role="option"] { min-height:44px; }
}

@media (prefers-reduced-motion:reduce) {
    .planner-select-trigger > svg[data-disclosure-chevron] { transition:none; }
    select[data-planner-select],
    :is(.planner-shell, .task-details-dialog, .event-dialog, .focus-mode) select[data-planner-select],
    .view-controls .filter-select:has(select[data-planner-select]) { transition:none; }
    .sharing-field select[data-planner-select],
    .planner-select-popup .planner-select-option[role="option"] { transition:none; transform:none; }
    .sharing-field select[data-planner-select]:active:not(:disabled),
    .planner-select-popup .planner-select-option[role="option"]:active:not([aria-disabled="true"]) { transform:none; }
    .planner-select-popup:popover-open,
    .planner-select-popup[data-fallback] { animation:none; }
}

@media (forced-colors:active) {
    .planner-select-trigger > svg[data-disclosure-chevron] { display:none; }
    select[data-planner-select],
    :is(.planner-shell, .task-details-dialog, .event-dialog, .focus-mode) select[data-planner-select],
    select[data-planner-select][aria-expanded="true"],
    :is(.planner-shell, .task-details-dialog, .event-dialog, .focus-mode) select[data-planner-select][aria-expanded="true"] {
        -webkit-appearance:auto;
        appearance:auto;
        background-image:none;
        background-color:Canvas;
        color:CanvasText;
    }
    select[data-planner-select]:focus-visible { outline:2px solid Highlight; outline-offset:-2px; box-shadow:none; }
    select[data-planner-select][aria-expanded="true"],
    :is(.planner-shell, .task-details-dialog, .event-dialog, .focus-mode) select[data-planner-select][aria-expanded="true"] {
        background-color:var(--open-background);
        color:var(--open-color);
    }
    .planner-select-popup { border-color:CanvasText; background:Canvas; color:CanvasText; box-shadow:none; }
    .planner-select-popup .planner-select-option[role="option"][data-active="true"] { outline:1px solid CanvasText; outline-offset:-2px; box-shadow:none; }
    .planner-select-popup .planner-select-option[role="option"][aria-selected="true"] { forced-color-adjust:none; background:Highlight; color:HighlightText; }
    .planner-select-popup .planner-select-option[role="option"][aria-selected="true"][data-active="true"] { outline-color:HighlightText; box-shadow:none; }
    .planner-select-popup .planner-select-option[role="option"][aria-disabled="true"] { color:GrayText; opacity:1; }
    .planner-select-popup .planner-select-group { color:GrayText; }
    .planner-select-option-icon { color:inherit; }
}
