/* The "Find your cheat sheets" header: Toolbar with the subtitle below on PC; on phones, today's header without its search box, or Two menus from Dev options. */

/* Current, without the search box: the shop's own header with one thing removed. */
html[data-find-study="nosearch"] #shop .section-head .search-field{display:none}

/* Every other study draws its own header and hides the shop's. */
html[data-find-study]:not([data-find-study="current"],[data-find-study="nosearch"]) #shop :is(.section-head,#shopFilters){display:none}

.fs{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}
.fs-title{margin:0;font:600 43px/1.15 var(--serif);letter-spacing:-.035em;color:var(--ink)}
.fs-intro{margin:14px 0 0;max-width:570px;font-size:18px;line-height:1.5;color:var(--muted)}
.fs-bar{display:flex;align-items:center;gap:32px;margin-top:20px}
.fs-field{display:flex;align-items:center;gap:10px;min-width:0}
.fs-label{flex:none;font-size:14px;font-weight:600;color:var(--ink)}
.fs-seg{display:flex;gap:6px}
.fs-chip{flex:none;min-height:46px;min-width:50px;padding:0 13px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--ink);font:500 16px/1.2 var(--sans);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.fs-chip:hover{border-color:var(--forest)}
.fs-chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
.fs-short{display:none}

/* A native menu behind our own text: the device's own picker does the choosing. */
.fs-pick{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;min-width:320px;padding:0 12px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;font-size:16px;color:var(--ink);cursor:pointer}
.fs-pick:hover{border-color:var(--forest)}
.fs-pick-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-pick select{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px}
.fs-pick:focus-within{outline:3px solid var(--green);outline-offset:2px}

/* Search closes the controls row on the right. */
.fs-search{position:relative;flex:none;width:260px;margin-left:auto;color:var(--muted)}
.fs-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none}
.fs-search input{width:100%;height:46px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;padding:0 12px 0 40px;font:400 16px/1 var(--sans);color:var(--ink)}
.fs-search input:focus{border-color:var(--green)}

/* Two menus side by side, each with its label above. */
.fs-menus .fs-bar{align-items:flex-end;gap:16px}
.fs-menus .fs-field{display:block}
.fs-menus .fs-label{display:block;margin-bottom:8px}
.fs-menus .fs-field-grade .fs-pick{min-width:170px}

/* The subtitle on a PC: below the heading, or left out. */
@media(width > 600px) {
 .fs-intro-none .fs-intro{display:none}
}
@media(width > 600px) and (max-width:1214px) {
 .fs-search{width:210px}
 .fs-pick{min-width:250px}
 .fs-bar{gap:22px}
}
/* Tablet widths: the row wraps, and search takes the second line. */
@media(width > 600px) and (max-width:960px) {
 .fs-bar{flex-wrap:wrap;gap:14px 22px}
 .fs-field-subject{flex:1}
 .fs-pick{min-width:0;flex:1}
 .fs-search{flex:1 1 100%;width:auto;margin-left:0}
}

@media(max-width:600px) {
 /* Long subject names wrapped the shop's results title onto two or three lines and moved the sheets, so the studies show the count only. */
 html[data-find-study]:not([data-find-study="current"],[data-find-study="nosearch"]):not(.fs-searching) #shopResults .results-heading h3{display:none}
 html[data-find-study]:not([data-find-study="current"],[data-find-study="nosearch"]):not(.fs-searching) #shopResults .results-heading p{margin:0;font-size:14px}
 .fs{padding-bottom:20px;margin-bottom:20px}
 .fs-title{font-size:34px}
 .fs-intro{margin-top:13px;font-size:16px}
 /* Phones already have search in the site header, one tap away. */
 .fs-search{display:none}
 /* Grade and Subject are headings above their controls in every study. */
 .fs-field{display:block}
 .fs-label{display:block;margin-bottom:7px;font-size:13px}
 .fs-seg{gap:8px}
 .fs-seg .fs-chip{flex:1;min-width:0;padding:0}
 .fs-pick{min-width:0;min-height:48px}
 .fs-toolbar .fs-bar{display:block;margin-top:20px}
 .fs-toolbar .fs-field+.fs-field{margin-top:16px}
 .fs-menus .fs-bar{display:grid;grid-template-columns:minmax(118px,max-content) minmax(0,1fr);gap:10px;margin-top:20px}
 .fs-menus .fs-label{margin-bottom:7px}
 .fs-menus .fs-field-grade .fs-pick{min-width:0}
 .fs-menus .fs-field-subject .fs-full{display:none}
 .fs-menus .fs-field-subject .fs-short{display:inline}
}

/* Phones: the shop's own List / Cards switch is the only one; the Dev copy of it is hidden. */
@media(max-width:600px) {
 .dev-group[aria-labelledby="devViewLabel"]{display:none}
}