/* Search (study started 7 October 2026). Loaded by compare/search-live.html and, as a Dev option on a phone, by the shop.
   Every rule starts from the study's own screen (.ss-screen) or from the shop's search window once the study has marked
   it (data-ss), so nothing here can reach the rest of the shop.
   Phone rules first (the designs are made at 390px wide); laptop rules go under one @media(min-width:601px) block. */

/* The shop's search window, made a full screen that does not change size as you type. */
#utilityDialog.search-dialog[data-ss]{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;animation:none;background:#fff}
#utilityDialog.search-dialog[data-ss]::backdrop{background:#fff;animation:none}
.ss-screen{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;color:var(--ink)}
.ss-screen :where(h3,p,ul){margin:0}

/* The field: Back, what you type, and a way to clear it. */
.ss-head{flex:none;display:flex;align-items:center;gap:2px;padding:10px 20px 10px 8px;border-bottom:1px solid var(--line);background:#fff}
.ss-back{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--forest)}
.ss-field{position:relative;display:block;flex:1;min-width:0}
.ss-field>.icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--quiet);pointer-events:none}
.ss-field input{width:100%;min-width:0;min-height:48px;border:1px solid var(--line-strong);border-radius:12px;padding:10px 44px 10px 42px;background:#fff;color:var(--ink);font:inherit;font-size:17px;-webkit-appearance:none;appearance:none}
.ss-field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--mint)}
.ss-field input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.ss-clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted)}
.ss-clear[hidden]{display:none}
.ss-clear .icon{width:18px;height:18px}

.ss-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 20px 28px}
.ss-foot{flex:none}
.ss-foot .dialog-status{margin:0 20px 10px}
/* The cart's total and View cart, as the shop's own bar at the foot of a phone. */
.ss-cart{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);background:#fff;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 4px #003a1c05}
.ss-cart[hidden]{display:none}
.ss-cart strong{display:block;font-size:19px;line-height:1.2}
.ss-cart small{display:block;font-size:14px;color:var(--muted)}

/* A heading over a run of results, with how many. */
.ss-group{margin-top:22px}
.ss-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:4px}
.ss-group-head h3{font:650 20px/1.25 var(--sans);letter-spacing:-.015em;color:var(--forest)}
.ss-group-head span{font-size:14px;color:var(--muted);white-space:nowrap}
.ss-more{margin-top:16px;font-size:14.5px;line-height:1.4;color:var(--muted)}
.ss-none{margin-top:28px;padding:26px 20px;border:1.5px dashed var(--line-strong);border-radius:16px;text-align:center}
.ss-none h3{font:600 20px/1.25 var(--serif);letter-spacing:-.01em;color:var(--forest);overflow-wrap:anywhere}
.ss-none p{margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--muted)}

/* A cover, drawn by show-pages.js and sized from its own width. A bundle is a stack of pages. */
.ss-cover{display:block;flex:none;width:58px;border:1px solid var(--line-strong);border-radius:4px;background:#fff}
.ss-cover .pg{display:block;border-radius:3px}
.ss-cover.is-stack{border-color:var(--forest);box-shadow:2px -2px 0 0 #fff,3px -3px 0 0 var(--forest);margin-top:3px}

/* One result: the cover and the words open the sheet; the price and Add sit at the right. */
.ss-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.ss-group>.ss-row:last-child{border-bottom:0}
.ss-open{display:flex;align-items:flex-start;gap:14px;min-width:0;border:0;padding:0;background:transparent;color:inherit;font:inherit;text-align:left}
.ss-text{display:block;min-width:0}
.ss-text b{display:block;font-size:16.5px;font-weight:650;line-height:1.28;color:var(--ink);overflow-wrap:anywhere}
.ss-text small{display:block;margin-top:3px;font-size:14px;line-height:1.35;color:var(--muted)}
.ss-text small.ss-why{color:var(--quiet);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* The cue that a row opens the sheet: the shop's own link words, in its link style. */
.ss-see{display:inline-block;margin-top:5px;font-size:14px;font-weight:600;line-height:1.3;color:var(--green-hover);text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}
.ss-buy{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.ss-screen .ss-price{display:flex;align-items:baseline;gap:6px;font-size:16px;white-space:nowrap}
.ss-screen .ss-price b{font-weight:700;color:var(--ink)}
.ss-screen .ss-price s{font-size:14px;color:var(--quiet)}
/* Owned and in a bundle: the shop's own two badges, and an owned name goes faint. */
.ss-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:600;white-space:nowrap}
.ss-badge .icon{width:16px;height:16px}
.ss-badge.is-bundle{background:var(--forest);color:#fff}
.ss-badge.is-owned{background:#fff;border:1.5px solid var(--green);color:var(--green)}
.ss-badge.is-owned .icon{stroke-width:2.6}
.is-owned .ss-text b{color:var(--muted)}
/* Plain lines (round two): the shop's own line in the full screen. The subject's sign, the name, the price; the whole
   line is the press. */
.ss-sign{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;color:var(--green)}
.ss-sign .icon{width:22px;height:22px}
.ss-row.is-plain{display:block;padding:0}
.ss-row.is-plain .ss-open{width:100%;align-items:center;gap:14px;min-height:64px;padding:12px 0}
.ss-row.is-plain .ss-text{flex:1}
.ss-row.is-plain .ss-sign{align-self:flex-start;margin-top:3px}
.ss-end{flex:none;display:flex;align-items:center}
.ss-state{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--forest);white-space:nowrap}
.ss-state .icon{width:16px;height:16px;stroke-width:2.4}
.ss-state.is-owned{color:var(--green)}

/* Lines with Add (round two): the same line, with the price and Add at its end. */
.ss-row.is-lines{padding:11px 0;gap:10px}
.ss-row.is-lines .ss-open{align-items:flex-start}
.ss-row.is-lines .ss-buy{flex-direction:row;align-items:center;gap:10px}
.ss-row.is-lines .ss-buy .button{padding:8px 12px;gap:6px}

/* Large covers (round two): the wishlist's row. The name has the full width beside the cover; the price and Add sit on
   the row's last line, in room kept for them under the words. */
.ss-row.is-large{position:relative;display:block;padding:16px 0}
.ss-row.is-large .ss-open{width:100%;gap:16px}
.ss-row.is-large .ss-text{padding-bottom:52px}
.ss-row.is-large .ss-cover{width:78px;border-radius:5px}
.ss-row.is-large .ss-text b{font-size:17px}
.ss-row.is-large .ss-buy{position:absolute;left:94px;right:0;bottom:16px;flex-direction:row;align-items:center;justify-content:space-between}
.ss-row.is-large .ss-price{font-size:17px}
.ss-row.is-large .ss-buy>:last-child{margin-left:auto}

/* A small phone: the price and Add go under the words, so a name keeps its room. */
@media(max-width:350px){
 .ss-body{padding-left:16px;padding-right:16px}
 .ss-head{padding-right:16px}
 .ss-row.is-rows,.ss-row.is-lines{grid-template-columns:minmax(0,1fr);gap:8px}
 .ss-row.is-rows .ss-buy{flex-direction:row;align-items:center;justify-content:space-between;padding-left:72px}
 .ss-row.is-lines .ss-buy{justify-content:space-between;padding-left:38px}
 .ss-row.is-large .ss-cover{width:66px}
 .ss-row.is-large .ss-open{gap:14px}
 .ss-row.is-large .ss-buy{left:80px}
}

/* ---- The laptop (round one, 7 October 2026). Three frames for the phone's pick, Picture rows. Wider than 600px only. ---- */
@media(min-width:601px){
 .ss-screen[class*="ss-pc-"] .ss-head{gap:10px;padding:14px 20px 14px 24px}
 .ss-screen[class*="ss-pc-"] .ss-body{padding:4px 24px 28px}
 .ss-screen[class*="ss-pc-"] .ss-cart{padding:14px 24px}
 .ss-screen[class*="ss-pc-"] .ss-foot .dialog-status{margin:0 24px 10px}
 .ss-close{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--forest);cursor:pointer}
 .ss-close:hover{background:var(--mint)}
 .ss-screen[class*="ss-pc-"] .ss-open{cursor:pointer}
 .ss-screen[class*="ss-pc-"] .ss-open:hover .ss-text b{text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px}
 .ss-screen[class*="ss-pc-"] .ss-clear{cursor:pointer}

 /* Window: in the middle, one size whatever is typed. */
 #utilityDialog.search-dialog[data-ss="pc-window"]{width:760px;max-width:calc(100vw - 48px);height:min(620px,calc(100dvh - 48px));margin:auto;border:1px solid var(--line);border-radius:20px;box-shadow:0 4px 16px #001a0a19}
 #utilityDialog.search-dialog[data-ss="pc-window"]::backdrop,#utilityDialog.search-dialog[data-ss="pc-panel"]::backdrop{background:rgba(10,28,17,.42)}

 /* Side panel: the laptop cart's frame, at the right. */
 #utilityDialog.search-dialog[data-ss="pc-panel"]{width:480px;max-width:100vw;height:100dvh;margin:0 0 0 auto;border-radius:16px 0 0 16px;box-shadow:0 4px 16px #001a0a19}

 /* Full screen: the field in the middle, the results in two columns, in the shop's own page width. */
 .ss-screen.ss-pc-full{--ss-edge:max(24px,calc((100vw - 1140px)/2))}
 .ss-screen.ss-pc-full .ss-head{position:relative;justify-content:center;padding:16px 84px}
 .ss-screen.ss-pc-full .ss-field{flex:0 1 720px}
 .ss-screen.ss-pc-full .ss-close{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
 .ss-screen.ss-pc-full .ss-body{padding-left:var(--ss-edge);padding-right:var(--ss-edge)}
 /* Each grade: its heading across the full width, its sheets two across under it (8 October 2026). */
 .ss-screen.ss-pc-full .ss-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}
 .ss-screen.ss-pc-full .ss-group-head{grid-column:1/-1}
 .ss-screen.ss-pc-full .ss-group>.ss-row:nth-last-child(2):nth-child(even){border-bottom:0}
 .ss-screen.ss-pc-full .ss-none{max-width:560px;margin-left:auto;margin-right:auto}
 .ss-screen.ss-pc-full .ss-cart{padding-left:var(--ss-edge);padding-right:var(--ss-edge)}
 .ss-screen.ss-pc-full .ss-foot .dialog-status{margin:0 var(--ss-edge) 10px}
}

/* ---- Laptop round two (8 October 2026), fitted to the navbar in the shop ("Search in the middle"). Type in the bar: a
   real field in the place of the navbar's field (520 wide, in the middle), the results dropping under the bar. ---- */
.ss-navreal,.ss-drop,.ss-scrim{display:none}
@media(min-width:1024px){
 html[data-ss-nav="pc-type"] .site-header .header-tools>[data-action="search"]{display:none}
 html[data-ss-nav="pc-type"] .site-header .header-inner{position:relative}
 .ss-navreal{display:block;position:absolute;top:calc(50% - 22px);left:calc(50% - min(520px,100% - 520px)/2);width:min(520px,100% - 520px)}
 .site-header .ss-field input{min-height:44px;font-size:16px}
 .site-header .ss-field>.icon{width:20px;height:20px;stroke-width:1.8;color:var(--ink)}
 /* The results, under the bar and over the page. */
 .ss-drop{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 12px 24px #001a0a1f}
 .ss-drop[hidden],.ss-scrim[hidden]{display:none}
 .ss-drop-in{position:relative;max-height:calc(100dvh - var(--header) - 96px);overflow-y:auto;overscroll-behavior:contain;padding:2px max(24px,calc((100vw - 1140px)/2)) 24px}
 .ss-drop-in :where(h3,p){margin:0}
 .ss-drop .ss-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}
 .ss-drop .ss-group-head{grid-column:1/-1}
 .ss-drop .ss-group>.ss-row:nth-last-child(2):nth-child(even){border-bottom:0}
 .ss-drop .ss-none{max-width:560px;margin-left:auto;margin-right:auto}
 .ss-drop .ss-open{cursor:pointer}
 .ss-drop-shut{position:absolute;right:16px;top:6px}
 .ss-scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(10,28,17,.42)}
 /* Full screen: its field sits where the navbar's does, so the bar's field seems to stay put. */
 .ss-screen.ss-pc-full .ss-field{flex:0 1 520px}
}