/* SmartNote dropdowns (4 October 2026): one look for every menu in the shop, closed and open, on a PC and on a phone.
   dropdowns.js puts a button and a list in place of each <select>, which stays in the page, hidden, and still holds the value.
   Closed: 48px tall for a thumb, 16px medium text, one forest chevron. Open: a white list with a hairline border and a small, crisp
   shadow (BRAND.md: no glows), 46px rows, the chosen one in pale green with a tick. Widths are left to each layout. */
.dd-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.dd-button{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;min-width:128px;max-width:100%;height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);font:500 16px/1.2 var(--sans);text-align:left;cursor:pointer;transition:border-color .16s}
.dd-button:hover,.dd-button[aria-expanded="true"]{border-color:var(--forest)}
.dd-button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.dd-button:disabled{color:var(--quiet);background:var(--soft);cursor:default}
.dd-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-chevron{flex:none;color:var(--forest);transition:transform .16s}
.dd-button[aria-expanded="true"] .dd-chevron,.fs-pick:has(.dd-button[aria-expanded="true"]) .fs-chevron{transform:rotate(180deg)}
/* Where the old menu filled its space, the button does too. */
:is(.field,.filter-subject,.library-controls-row,.library-filter-panel,.library-view) .dd-button{display:flex;width:100%}
/* The shop header's menus draw their own box, value and arrow: there the button is a clear layer over that box. */
.dd-cover{position:absolute;inset:0;width:100%;height:100%;min-width:0;padding:0;border:0;border-radius:inherit;background:none}
.dd-cover:focus-visible{outline:0}
:root .fs-pick{min-height:48px;padding:0 14px;border-radius:10px;font-weight:500;transition:border-color .16s}
:root .fs-pick:has(.dd-button[aria-expanded="true"]){border-color:var(--forest)}
:root .fs-pick .fs-chevron{flex:none;color:var(--forest);transition:transform .16s}

.dd-panel{position:fixed;z-index:1000;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;box-shadow:0 2px 6px #1e4c2b1f;font:400 16px/1.3 var(--sans);color:var(--ink)}
.dd-option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:8px 12px;border-radius:8px;cursor:pointer}
.dd-option.is-active{background:var(--soft)}
.dd-option[aria-selected="true"]{background:var(--mint);color:var(--forest);font-weight:600}
.dd-option[aria-selected="true"].is-active{background:var(--mint-deep)}
.dd-option[aria-disabled="true"]{color:var(--quiet);cursor:default}
.dd-check{flex:none;color:var(--green);visibility:hidden}
.dd-option[aria-selected="true"] .dd-check{visibility:visible}
@media(prefers-reduced-motion:reduce){.dd-button,.dd-chevron,.fs-chevron{transition:none}}
/* My library's grade menu was 120px wide, which cut "All grades" short at this text size. */
@media(min-width:601px){:root .my-sheets-page .library-controls-row{grid-template-columns:minmax(180px,1.2fr) 150px minmax(220px,1fr) 165px}}