/* 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;
    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 14 14' fill='none'%3E%3Cpath d='m3.5 5.25 3.5 3.5 3.5-3.5' stroke='%238b8b8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 9px center;
    background-size:14px 14px;
    text-overflow:ellipsis;
    cursor:pointer;
    transition:background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease;
}

select[data-planner-select]:dir(rtl) {
    background-position:left 9px center;
}

select[data-planner-select]:hover:where(:not([data-touch-input] *)):not(:disabled):not([aria-invalid="true"]) {
    border-color:color-mix(in srgb,var(--ink-soft,#66685f) 60%,var(--line,#dcd8ce));
}

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(--accent-soft,#f4dfd6);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m3.5 8.75 3.5-3.5 3.5 3.5' stroke='%238b8b8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

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

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

/* 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:background-color 140ms ease,border-color 140ms ease;
}

.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(--accent,#c76345);
    background:var(--accent-soft,#f4dfd6);
}

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

.view-controls .filter-select select[data-planner-select]:dir(rtl) {
    background-position:left 0 center;
}

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

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

.forever-board-toolbar select[data-planner-select]:dir(rtl) {
    background-position:left 4px center;
}

.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:popover-open,
.planner-select-popup[data-fallback] {
    display:grid;
    animation:planner-select-appear 140ms cubic-bezier(.22,1,.36,1);
}

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

.planner-select-popup .planner-select-option[role="option"] {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 16px;
    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;
}

.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) 16px;
}

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

.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"]),
.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:"\2713";
}

.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 .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;
}

@keyframes planner-select-appear {
    from { opacity:0; transform:translateY(-4px); }
    to { opacity:1; transform:translateY(0); }
}

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

@media (prefers-reduced-motion:reduce) {
    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; }
    .planner-select-popup:popover-open,
    .planner-select-popup[data-fallback] { animation:none; }
}

@media (forced-colors:active) {
    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; }
    .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; }
}