/* Great Barrington Items — family choosing app. "Clean & Bright" look:
near-white page, pale hairline borders, SQUARE corners, Arial labels,
Georgia only for the entry heading. Ratings = Option 2 greens ending in a GREY Pass.
Everything else (links, primary buttons, selection) = a restrained crisp blue. */
:root{
--ink:#1f1f1f; --ink-soft:#7a7a72; --page:#fafaf7; --card:#ffffff; --section:#fafaf7; --line:#e7e6e1;
--blue:#1a5f9c; --accent:#2166a5; --red:#7a1f1f;
/* Ratings — Option 2 "Cleaner greens", fading to a GREY Pass */
--lvl5:#1e7d4c; --lvl4:#3fa168; --lvl3:#6cc08d; --lvl2:#8bca9f; --lvl1:#a8a8a0;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}
/* Long item names and book titles must break rather than push the page sideways. */
.cname,.cid,.cat-name,.booktitle,.bookmeta,.bookcat,.tagchip,.dtag,.dmeta,.dlinks,.dfunc,.dset,
.detail-card h2,.ask-card h2,.finishblock h3{overflow-wrap:anywhere}
/* A menu must never be wider than the space it sits in — the commonest cause of a sideways page. */
.toolbar select,.toolbar input{max-width:100%;min-width:0}
.hidden{display:none !important}
body.modal-open{overflow:hidden}
button{font-family:inherit}
.btn{background:var(--card);border:1px solid var(--line);padding:8px 14px;font-size:15px;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);font-size:17px}
.btn-done{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-small{padding:5px 10px;font-size:13px}
.btn.toggle{border-color:var(--accent);color:var(--accent)}
.btn.toggle.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#btnOverview .homeicon{font-size:1.45em;line-height:.65;vertical-align:-.08em;margin-right:2px}
.err{color:var(--red);font-weight:bold}
/* Entry */
.entry{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:20px}
.entry-card{background:var(--card);border:1px solid var(--line);padding:30px 34px;max-width:520px;text-align:center}
.entry-card h1{margin:0 0 10px;font:700 28px Georgia,"Times New Roman",serif}
.entry-card input{font-size:20px;padding:9px 12px;border:1px solid var(--line);width:180px;text-align:center;margin:8px 10px 8px 0}
/* Top bar */
.topbar{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line);padding:10px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.who{display:flex;flex-direction:column;gap:3px;min-width:240px}
#whoName{font-weight:bold;font-size:19px}
.progress-text{font-size:13px;color:var(--ink-soft)}
/* The little "saved" word. Empty (and invisible) until central saving is switched on. */
.savestatus{font-size:12px}
.savestatus:empty{display:none}
.savestatus.ok{color:var(--lvl4)}
.savestatus.busy{color:var(--accent)}
.savestatus.wait{color:#a8600f}
.progressbar{height:8px;background:#e7e6e1;overflow:hidden;width:260px}
#progressFill{height:100%;width:0;background:var(--lvl4);transition:width .3s}
.topbtns{display:flex;gap:14px;align-items:center}
.modeswitch{display:inline-flex;border:1px solid var(--accent);background:var(--card)}
.modebtn{border:0;border-right:1px solid var(--accent);background:var(--card);color:var(--accent);padding:9px 16px;font-size:15px;font-weight:bold;cursor:pointer}
.modebtn:last-child{border-right:0}
.modebtn.on{background:var(--accent);color:#fff}
.modebtn.on::before{content:"\2713 "}
.modebtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px;position:relative;z-index:1}
/* Toolbar (Zone B — find items) */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 18px;font-size:14px}
.toolbar select,.toolbar input{font-size:14px;padding:6px 8px;border:1px solid var(--line);background:#fff}
#search{min-width:220px}
.countline{padding:0 18px 8px;color:var(--ink-soft);font-size:13px}
.zoneC{background:var(--section);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zoneC-label{font-weight:bold;color:var(--ink-soft)}
.zonelabel{font-size:11px;font-weight:bold;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:8px 18px 0}
/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:0 18px 90px}
.card{background:var(--card);border:1px solid var(--line);overflow:hidden;position:relative;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;cursor:pointer;background:#eee}
/* An elongated photo shows WHOLE in its square tile — no zoomed-in middle slice (7/31). */
.card img.wholephoto{object-fit:contain;background:#f0efec}
.card .cname{padding:7px 9px 2px;font-size:14px;line-height:1.25;cursor:pointer}
.card .cid{padding:0 9px 7px;font-size:11px;color:var(--ink-soft)}
.card .pick{position:absolute;top:6px;left:6px;width:22px;height:22px;accent-color:var(--accent);cursor:pointer;z-index:2}
.card .lvlstrip{height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;color:#fff;background:#f0efec}
.lvl-blank .lvlstrip{color:var(--ink-soft);background:#f0efec}
.lvl-5 .lvlstrip{background:var(--lvl5)} .lvl-4 .lvlstrip{background:var(--lvl4)}
.lvl-3 .lvlstrip{background:var(--lvl3)} .lvl-2 .lvlstrip{background:var(--lvl2)}
.lvl-1 .lvlstrip{background:var(--lvl1)}
.lvl-2 .lvlstrip{color:#fff}
.card.locked{opacity:.85}
/* Sampler tiles (Overview + Browse-by folder/function/set) — photo, name, count. NO colored band. */
.card.sampler{cursor:pointer}
.card.sampler:hover{border-color:var(--accent)}
.card.sampler img{cursor:pointer}
.card .cat-name{font-weight:bold;font-size:15px;cursor:pointer}
.card .lockband{position:absolute;top:6px;right:6px;background:#3d3d3d;color:#fff;font-size:11px;font-weight:bold;padding:3px 8px;z-index:2}
.showmore-wrap{text-align:center;padding:0 0 100px}
.desc-search{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px}
.desc-search input{width:18px;height:18px}
.hierarchybar{margin:0 18px 6px;padding:8px 12px;background:#f4f7fa;border-left:3px solid var(--accent);font-size:14px;color:var(--ink-soft)}
/* The pinned "Showing:" strip (Sarah's pick 8/02 — Option B): one line, rides with the trail. */
.filterstrip{margin:0 18px 6px;padding:8px 12px;font-size:15px;cursor:pointer;
background:#eef4fb;border-left:3px solid var(--accent);border-bottom:2px solid var(--accent);color:var(--ink)}
.filterstrip.indemand-strip{background:var(--indemand-soft);border-left-color:var(--indemand);border-bottom-color:var(--indemand)}
.strip-x{float:right;font-weight:800;margin-right:0.65em} /* Sarah 8/02: in from the far right edge by about one character */
/* Your-ratings counts for ordinary categories (8/02): neutral blues, never the magenta. */
.mylevelsbar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 18px 8px;
padding:8px 12px;background:#f4f7fa;border:2px solid var(--accent);font-size:14px;color:var(--ink)}
.mylevels-head{color:var(--ink)}
.mylevelsbar .mychip{border-color:var(--accent)}
.lvlchip[data-only]{cursor:pointer}
.hierarchybar a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hierarchybar .crumb-current{font-weight:bold;color:var(--ink)}
.hierarchybar .crumb-sep{margin:0 7px;color:var(--ink-soft)}
.subcatbar{margin:0 18px 12px;padding:9px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.8;color:var(--ink-soft)}
.subcatbar .subcat-title{font-weight:bold;color:var(--ink);margin-right:8px}
.subcatbar a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;margin-right:13px;display:inline-block;max-width:100%;white-space:normal}
.subcatbar a.on{font-weight:bold;color:var(--ink);text-decoration-thickness:2px}
.subcatbar .subcat-status{display:block;font-size:12.5px;color:var(--ink-soft)}
/* ===== Books — a TEXT-FIRST reading list (Sarah's design 7/23) ===== */
.booklist{padding:0 18px 90px}
.bookcat{margin:18px 0 6px;font-size:15px;font-weight:bold;color:var(--ink);border-bottom:2px solid var(--line);padding-bottom:6px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.catall{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.catall .lvlbtn{padding:5px 9px;font-size:12px}
.catall-label{font-weight:normal;font-size:12.5px;color:var(--ink)}
.bookrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-top:0;padding:8px 12px}
.bookrow:first-of-type{border-top:1px solid var(--line)}
.bookrow:hover{background:#f7fbff}
.booktitle{flex:1 1 320px;min-width:220px;cursor:pointer;font-size:15.5px;line-height:1.3}
.booktitle b{font-weight:bold}
.bookauthor{color:var(--ink-soft);font-size:14px}
.bookmeta{flex:0 0 auto;font-size:12px;color:var(--ink-soft);min-width:110px}
.bm-note{display:inline-block;margin-left:6px}
.bookbtns{display:flex;flex-wrap:wrap;gap:4px;flex:0 0 auto}
.bookbtns .lvlbtn{padding:6px 9px;font-size:12.5px}
.bookrow.rated{border-left:5px solid var(--lvl3)}
.bookrow.rated-5{border-left-color:var(--lvl5)} .bookrow.rated-4{border-left-color:var(--lvl4)}
.bookrow.rated-3{border-left-color:var(--lvl3)} .bookrow.rated-2{border-left-color:var(--lvl2)}
.bookrow.rated-1{border-left-color:var(--lvl1)}
.bookshelfnote{background:#eef4fb;border-left:3px solid var(--accent);padding:8px 12px;font-size:14px;margin:8px 0}
@media(max-width:640px){
/* On a phone the category is already the heading right above, so drop it — but KEEP the note,
which is the only extra thing a title carries. */
.bookmeta{flex:1 1 100%;min-width:0;order:2;font-size:13px}
.bookmeta:not(.has-note){display:none}
.bm-cat{display:none}
.bm-note{margin-left:0}
.bookbtns{order:3}
.booktitle{flex:1 1 100%;order:1}
}
/* ===== The app's own question box — replaces the browser's plain grey pop-ups ===== */
/* Sarah, 8/01: "The warning/confirmations is insanely wide for something so brief! Please change
this! Just make two stacked rows whose box is just wider than the contents." The box used to
stretch to a fixed 540px whatever was in it. Now it sizes to its own contents — the message on
one row, the buttons on the next — and only stops growing at 540px or the edge of the screen. */
.detail-card.ask-card{width:auto;min-width:min(300px,100%);max-width:min(540px,calc(100vw - 24px));margin-top:5vh}
.ask-card h2{margin:0 0 10px;font-size:21px;line-height:1.3}
.ask-body{font-size:15.5px;line-height:1.55;margin:0 0 4px}
.ask-warn{background:#fdf3ea;border-left:4px solid #a8600f;padding:10px 13px;font-size:14.5px;margin:12px 0;color:var(--ink)}
.ask-levels{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.ask-levels .lvlbtn{padding:15px 16px;font-size:16px;text-align:left;width:100%}
.ask-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:16px}
.ask-btns .btn{padding:12px 22px;font-size:15.5px;min-height:48px}
.ask-btns .btn-cancel{color:var(--ink)}
.ask-btns .btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
/* Selection bar */
.selbar{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:2px solid var(--accent);padding:10px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;z-index:40}
.selbtns{display:flex;flex-wrap:wrap;gap:6px}
.lvlbtn{border:0;color:#fff;padding:9px 13px;font-size:14px;font-weight:bold;cursor:pointer}
.lvlbtn.b5{background:var(--lvl5)} .lvlbtn.b4{background:var(--lvl4)} .lvlbtn.b3{background:var(--lvl3)}
.lvlbtn.b2{background:var(--lvl2)} .lvlbtn.b1{background:var(--lvl1)}
.lvlbtn.bclear{background:#fff;color:var(--ink);border:1px solid var(--line)}
.lvlbtn.on{outline:4px solid var(--ink);outline-offset:2px;transform:scale(1.06);box-shadow:0 3px 10px rgba(0,0,0,.35);font-weight:900;position:relative}
.lvlbtn.on::before{content:"\2713 "}
/* Overlays. height:100dvh = the space actually visible on a phone once the address bar and the
on-screen keyboard have taken their share; the plain 100vh line above it is the fallback for
older browsers. overscroll-behavior stops a drag inside the card from scrolling the page behind. */
.overlay{position:fixed;inset:0;height:100vh;height:100dvh;background:rgba(20,20,15,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;overscroll-behavior:contain;padding:24px 12px}
.detail-card{background:var(--card);border:1px solid var(--line);max-width:860px;width:100%;padding:20px 24px;position:relative}
.detail-card h2{margin:2px 40px 6px 0;font-size:22px}
.dclose{position:absolute;top:10px;right:12px;font-size:26px;background:none;border:0;cursor:pointer;color:var(--ink-soft)}
.dmain{width:100%;max-height:52vh;object-fit:contain;background:#f0efec}
.dmeta{font-size:13.5px;color:var(--ink-soft);margin:8px 0}
/* clickable links on the item page */
.dlinks{font-size:14px;margin:8px 0;color:var(--ink)}
.dlinks a,.dfunc a,.dset a{color:var(--blue);text-decoration:underline;cursor:pointer}
.dlinks a:hover,.dfunc a:hover,.dset a:hover,.dtag:hover{color:var(--accent)}
.dset{font-size:15px;margin:8px 0;background:#eef4fb;border-left:3px solid var(--accent);padding:8px 12px}
.dset-hint{color:var(--ink-soft);font-size:13px}
/* The set strip (Sarah's 8/02 design): the marked group line, the sibling pieces with their
tick-boxes and current-rating badges, and the rate-the-ticked row. */
.dsetstrip{margin:8px 0;background:#eef4fb;border-left:4px solid var(--accent);padding:9px 12px}
.dsetline{font-weight:700;font-size:15px;margin-bottom:6px}
.dsetline a{color:var(--blue);text-decoration:underline}
.dsibs{display:flex;flex-wrap:wrap;gap:6px 14px}
.dsib{display:inline-flex;align-items:center;gap:6px}
.dsib.here .sibcard span{font-weight:700}
.dsib .sibcard{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none}
.dsib .sibcard:hover span{color:var(--blue);text-decoration:underline}
.dsib .sibcard img{width:44px;height:44px;object-fit:cover;border:1px solid var(--line)}
.sibtick{width:17px;height:17px;cursor:pointer}
.siblvl{font-size:12px;font-weight:700;padding:1px 6px;border:1px solid var(--line);white-space:nowrap}
/* Badge colours are the app's OWN five level colours (Version 2, the even fade) — never new ones. */
.siblvl.l5{background:var(--lvl5);color:#fff}.siblvl.l4{background:var(--lvl4);color:#fff}
.siblvl.l3{background:var(--lvl3);color:#fff}.siblvl.l2{background:var(--lvl2);color:#1a1a1a}
.siblvl.l1{background:var(--lvl1);color:#1a1a1a}
.siblock{font-size:12px;color:var(--ink-soft)}
.dsibrate{margin-top:8px;font-weight:600}
.dsibrate .lvlbtn{margin:2px 3px 0 0}
.dpair{font-size:15px;margin:8px 0;background:#fdf3e7;border-left:4px solid #b5762a;padding:8px 12px}
.partwant{display:block;margin:8px 0 2px;font-size:14.5px;font-weight:600;cursor:pointer}
.partwant input{width:16px;height:16px;vertical-align:-3px;margin-right:5px;cursor:pointer}
.dmeta .relprev{color:var(--blue);text-decoration:underline;cursor:pointer}
.dmeta .relprev:hover{color:var(--accent)}
.dtags{margin:6px 0}
.dtags .dtag{display:inline-block;background:#f0efec;padding:3px 10px;margin:2px 3px 2px 0;font-size:12.5px;color:var(--blue);text-decoration:none;cursor:pointer;border:1px solid var(--line)}
.dtags .dtag:hover{background:#dbe9f8}
/* Tag panel */
.tagfilter{width:100%;font-size:16px;padding:8px 10px;border:1px solid var(--line);margin:8px 0 12px}
.taggrid{column-count:4;column-gap:14px}
@media(max-width:900px){.taggrid{column-count:3}}
@media(max-width:640px){.taggrid{column-count:2}}
.tagchip{display:block;break-inside:avoid;padding:4px 6px;font-size:13.5px;color:var(--blue);text-decoration:none;cursor:pointer}
.tagchip:hover{background:#dbe9f8;color:var(--accent)}
.tagpanel-card{max-height:82vh;overflow:auto}
.dphotos{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.dphotos .pthumb{background:none;border:0;padding:0;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;max-width:120px}
.dphotos .pthumb img{height:86px;width:100%;max-width:100%;object-fit:cover;border:1px solid var(--line)}
.dphotos .pthumb:hover img{border-color:var(--accent)}
.dphotos .pthumb.on img{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.dphotos .plabel{font-size:11.5px;color:var(--ink-soft);display:block;text-align:center;margin-top:2px}
.dexpand{margin:6px 0 4px}
.dexpand img{width:100%;max-height:70vh;object-fit:contain;background:#f0efec;border:1px solid var(--accent);cursor:zoom-in;display:block}
.dexpand-cap{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:3px}
.dfunc{font-size:14px;margin:6px 0}
.dfunc b{color:var(--ink)}
.dnav{display:flex;justify-content:space-between;margin-top:14px}
.dcomment{width:100%;min-height:60px;border:1px solid var(--line);padding:8px;font-family:inherit;font-size:15px;margin-top:6px}
.locknote{background:#f0efec;border:1px solid var(--line);padding:10px 14px;font-weight:bold;margin:10px 0}
.finish-list{margin:10px 0}
/* The finish screen keeps ITEMS and BOOKS visibly separate so nobody has to guess which list is unfinished. */
.finishblock{border:1px solid var(--line);border-left:5px solid var(--accent);padding:12px 16px;margin:14px 0;background:var(--card)}
.finishblock h3{margin:0 0 6px;font-size:16px;letter-spacing:.02em}
.finishblock.done{border-left-color:var(--lvl4);background:#f4faf6}
.finishalt{font-size:13.5px;margin:10px 0 0}
.bigmsg{font-size:18px}
/* ==========================================================================
PHONE LAYOUT (added 2026-07-23)
Everything below only applies on a narrow screen. Nothing above changes,
so the desktop view Sarah already approved is untouched.
Three things drive it:
1. Anything you tap is at least 44 pixels tall — an average fingertip.
2. Anything you type into is 16px text — smaller than that and iPhones
zoom the whole page in the moment you tap the box.
3. Nothing is allowed to push the page sideways.
========================================================================== */
@media(max-width:640px){
/* Never let anything drag the page sideways. "clip" instead of "hidden" (7/31): "hidden"
quietly turned the page into its own scrolling box, which is what stopped ANYTHING —
the old top bar included — from staying pinned while a phone scrolls. "clip" trims
sideways overflow without that side effect. */
html,body{max-width:100%;overflow-x:clip}
/* tighter side margins — 18px each side wastes a tenth of a phone screen */
.toolbar,.countline,.zonelabel,.grid,.booklist,.selbar,.topbar{padding-left:12px;padding-right:12px}
.grid{gap:10px;padding-bottom:110px}
.booklist{padding-bottom:110px}
/* top bar: name and progress on one line, the three buttons on their own line */
.topbar{padding-top:8px;padding-bottom:8px;gap:8px}
.who{min-width:0;flex:1 1 100%}
#whoName{font-size:17px}
.progressbar{width:100%}
.topbtns{flex:1 1 100%;gap:6px}
.topbtns .btn{flex:1 1 0;min-height:46px;font-size:15px;padding:8px 6px}
/* every tapped thing gets a fingertip-sized target */
.btn{min-height:46px;padding:10px 14px;font-size:15px}
.btn-small{min-height:40px;padding:8px 12px;font-size:14px}
.lvlbtn{min-height:46px;padding:11px 12px;font-size:14.5px}
.card .pick{width:30px;height:30px;top:8px;left:8px}
.dclose{font-size:30px;padding:6px 10px;top:4px;right:4px;line-height:1}
/* typing boxes at 16px so the phone does not zoom in when you tap them */
.toolbar select,.toolbar input,.dcomment,.tagfilter,.entry-card input{font-size:16px}
.toolbar select,.toolbar input{min-height:44px;padding:8px 10px}
.toolbar label{display:flex;align-items:center;gap:6px;flex:1 1 100%}
.toolbar label select{flex:1 1 auto;min-width:0}
#search,#bookSearch{flex:1 1 100%;min-width:0;width:100%}
#groupPickWrap{flex:1 1 100%;display:flex}
#groupPickWrap select{flex:1 1 auto;min-width:0;width:100%}
.zoneC-label,.zoneC .btn{flex:1 1 100%}
.toolbar{gap:8px;padding-top:10px;padding-bottom:10px}
.toolbar .btn{flex:1 1 auto}
/* the grid: two columns on a phone */
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.card .cname{font-size:13.5px}
.card .lvlstrip{height:30px;font-size:12.5px}
/* books: title on its own line, the five rating buttons spread across underneath */
.bookrow{padding:10px 12px;gap:8px}
.booktitle{flex:1 1 100%;min-width:0;font-size:16px}
.bookbtns{flex:1 1 100%;gap:5px}
.bookbtns .lvlbtn{flex:1 1 0;min-width:0;min-height:46px;padding:10px 4px;font-size:12.5px;text-align:center}
.bookcat{font-size:16px;gap:8px}
/* six whole-category buttons across a phone squeezes "Interested" onto two lines and
splits the word — three across, two rows, gives every label room */
.catall{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.catall .lvlbtn{min-width:0;min-height:44px;padding:9px 4px;font-size:12.5px}
.catall-label{flex:1 1 100%;font-size:13px}
/* overlays: use the whole screen, and keep the buttons reachable */
.overlay{padding:10px 8px 60px;align-items:flex-start}
.detail-card{padding:16px 14px 40px}
.detail-card h2{font-size:19px;margin-right:52px}
.dmain{max-height:44vh;max-height:44dvh}
.dexpand img{max-height:60vh;max-height:60dvh}
/* Two class names, not one: the wide-screen rule above is now .detail-card.ask-card, which
outranks a plain .ask-card and was silently cancelling this phone margin (caught in the cold
review, 8/01). On a phone the question box sits near the top, where a thumb can reach it. */
.detail-card.ask-card{margin-top:2vh}
.ask-btns{justify-content:stretch}
.ask-btns .btn{flex:1 1 auto}
.dnav{gap:10px}
.dnav .btn{flex:1 1 0}
/* The ✕ pins to the corner of the SCREEN, not the top of a very long card — otherwise it
scrolls away and there is no way to shut the item page on a phone. */
.dclose{position:fixed;top:10px;right:10px;width:46px;height:46px;background:var(--card);
border:1px solid var(--line);color:var(--ink);z-index:60;display:flex;
align-items:center;justify-content:center;padding:0}
/* the selection bar can grow tall on a phone — cap it, let it scroll, clear the home bar */
.selbar{padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:6px;max-height:45vh;overflow:auto}
/* six rating buttons across a phone clips "Interested" — three across, two rows, instead.
This applies both in the bar at the bottom and on the item's own page. */
.selbtns{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.selbtns .lvlbtn{min-width:0;min-height:48px;padding:11px 4px;font-size:13px}
/* The selection bar wraps to several rows on a phone. When it is showing, the list below it
gets extra room so its last row is never trapped underneath. (has-selbar is put on the page
by the app whenever the bar appears.) */
.grid,.booklist,.showmore-wrap{padding-bottom:120px}
body.has-selbar .grid,body.has-selbar .booklist,body.has-selbar .showmore-wrap{padding-bottom:240px}
/* the "chosen" outline is 4px with a 2px offset — at a 5px gap it overlaps its neighbour */
.lvlbtn.on{outline:0;transform:none;box-shadow:inset 0 0 0 3px var(--ink)}
.lvlbtn.on::before{content:"\2713 "}
}
/* ---- Touch screens: no stuck "hover" look, and a real pressed look instead ----
On a phone, tapping something applies the hover style and LEAVES it there, so the last book
row you touched keeps looking selected. These rules undo that and give a proper press. */
@media (hover:none){
.btn:hover{border-color:var(--line)}
.card.sampler:hover{border-color:var(--line)}
.bookrow:hover{background:var(--card)}
.dtags .dtag:hover{background:#f0efec}
.tagchip:hover{background:none;color:var(--blue)}
.dphotos .pthumb:hover img{border-color:var(--line)}
.dlinks a:hover,.dfunc a:hover,.dset a:hover,.dtag:hover,.dmeta .relprev:hover{color:var(--blue)}
}
.btn:active,.lvlbtn:active{filter:brightness(.92);transform:translateY(1px)}
.bookrow:active{background:#eef4fb}
.card.sampler:active,.card img:active{border-color:var(--accent)}
.tagchip:active,.dtags .dtag:active{background:#dbe9f8}
.btn:focus-visible,.lvlbtn:focus-visible,.tagchip:focus-visible,.dtag:focus-visible,
.dclose:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Small phones (iPhone SE and similar) */
@media(max-width:420px){
.grid{grid-template-columns:repeat(2,1fr);gap:8px}
.taggrid{column-count:1}
.card .cname{font-size:13px}
.bookbtns .lvlbtn,.catall .lvlbtn,.selbtns .lvlbtn{font-size:11.5px;padding:10px 2px}
.entry-card{padding:22px 18px}
.entry-card h1{font-size:24px}
}
/* ---------- The categories everyone wants: the limit strip and the ordering panel ----------
Added 2026-07-29 for the in-demand categories (Rene Pots, MYL art, Objets d'Art, wall art,
Tiffin Black, Tiffin Blue). Clean & Bright throughout: white cards, hairline borders, square
corners, the restrained blue for chrome, and the same green-to-grey rating colours. */
.indemandbar{
background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blue);
padding:10px 12px; margin:0 0 10px; color:var(--ink); font-size:14px; line-height:1.45;
}
.indemand-head{ margin-bottom:8px; }
.indemand-levels{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
/* the ordering panel */
.rank-card{ max-width:640px; }
.rank-ok{ color:var(--ink); background:var(--section); border:1px solid var(--line);
padding:8px 10px; margin:8px 0; font-size:14px; }
.ranklist{ margin:10px 0; }
.rankrow{
display:flex; align-items:center; gap:10px; background:var(--card);
border:1px solid var(--line); padding:6px 8px; margin-bottom:6px;
/* touch-action moved OFF the row 8/05 (her phone report: a finger on ANY row could not
scroll the ladder — only the GRIP starts a drag, so only the grip may refuse scrolling). */
}
.rankrow.dragging{ opacity:.6; border-color:var(--blue); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.rankrow.overcap{ border-left:4px solid var(--red); }
.rankgrip{ cursor:grab; font-size:20px; color:var(--ink-soft); padding:0 4px; user-select:none;
touch-action:none; /* the grip alone drags; everywhere else a thumb scrolls */ }
.rankgrip:active{ cursor:grabbing; }
.ranknum{ min-width:26px; text-align:right; font-weight:700; color:var(--ink); }
.rankthumb{ width:44px; height:44px; object-fit:cover; border:1px solid var(--line); }
.rankname{ flex:1; color:var(--ink); }
.rankbtns{ display:flex; gap:4px; }
.rankbtns .btn{ min-width:34px; }
/* the split erase buttons on the finish screen */
.eraserow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0; }
.erasenote{ color:var(--ink); font-size:13px; }
.finishline{ margin:6px 0; color:var(--ink); }
@media (max-width:600px){
.rankthumb{ width:36px; height:36px; }
.rankname{ font-size:14px; }
.indemand-levels{ flex-direction:column; align-items:flex-start; gap:6px; }
}
/* ---------- The in-demand strip: bigger and more prominent (7/29 refinement) ---------- */
.indemandbar{
background:linear-gradient(180deg, #fbf6ea 0%, #f6efdf 100%);
border:1px solid #e2d3a8; border-left:6px solid #b8860b;
padding:14px 16px; margin:0 0 12px; color:var(--ink); font-size:15px; line-height:1.5;
}
.indemand-title{ font-size:17px; font-weight:800; color:#7a5a06; margin-bottom:6px; letter-spacing:.01em; }
.indemand-head{ margin-bottom:10px; }
.indemand-steps{
display:flex; flex-direction:column; gap:4px; margin:8px 0 12px;
padding:8px 10px; background:var(--card); border:1px solid var(--line);
}
.indemand-step{ display:flex; align-items:baseline; gap:8px; color:var(--ink); }
.stepnum{
display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;
background:var(--blue); color:#fff; border-radius:50%; font-weight:700; font-size:13px;
flex-shrink:0;
}
.indemand-levels{ display:flex; flex-direction:column; gap:8px; }
.indemand-count{ display:inline-flex; align-items:baseline; gap:6px; color:var(--ink); }
.bignum{ font-size:22px; font-weight:800; color:var(--ink); }
/* rank thumbnails: bigger, and clickable to open the item */
.rankthumb{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line); cursor:zoom-in; }
.rankname{ display:flex; flex-direction:column; gap:2px; }
.rankover{ font-size:12px; color:var(--red); font-weight:700; }
@media (max-width:600px){
.rankthumb{ width:56px; height:56px; }
}
/* the choose-one dialog: stacked buttons so long labels are readable */
.ask-btns-stack{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.ask-btns-stack .btn{ text-align:left; padding:10px 12px; }
/* the narrowing tags — what is currently narrowing this view, each with its own ✕ */
.narrowbar{
display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
background:var(--card); border:1px solid var(--line); padding:8px 10px; margin:0 0 8px;
font-size:14px; color:var(--ink);
}
.narrow-label{ font-weight:700; color:var(--ink); }
.narrowchip{
display:inline-flex; align-items:center; gap:6px;
background:#eaf1f9; color:var(--ink); border:1px solid #bcd2ea;
padding:3px 4px 3px 10px;
}
.narrowchip button{
background:none; border:none; color:var(--blue); font-size:16px; font-weight:700;
padding:0 6px; cursor:pointer; line-height:1;
}
.narrowchip button:hover{ color:var(--red); }
/* the map — where a fresh search's matches live */
.wherebar{
background:#f4f8fb; border:1px solid #cddbea; border-left:5px solid var(--blue);
padding:10px 12px; margin:0 0 10px; color:var(--ink); font-size:14px;
}
.where-title{ font-weight:700; color:var(--ink); margin-bottom:6px; }
.where-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:4px 0; }
.where-label{ font-weight:700; color:var(--ink-soft); min-width:112px; }
.wherechip{
display:inline-block; padding:3px 10px; background:var(--card); border:1px solid var(--line);
color:var(--blue); text-decoration:none; font-size:13px;
}
.wherechip:hover{ background:#eaf1f9; border-color:#bcd2ea; }
.wherechip.flat{ color:var(--ink); cursor:default; }
.wherechip b{ color:var(--ink); }
/* the map bar's show/hide toggle */
.wherebtn{
background:none; border:none; color:var(--blue); font-size:14px; font-weight:700;
cursor:pointer; padding:2px 0; text-align:left;
}
.wherebtn:hover{ text-decoration:underline; }
.wherecount{ color:var(--ink-soft); font-weight:400; font-size:13px; }
#whereBody{ margin-top:6px; }
#whereBody.hidden{ display:none; }
/* the enlarged photo panel opened from a rank row */
.peekphoto{ text-align:center; margin:8px 0 12px; }
.peekimg{ max-width:100%; max-height:60vh; object-fit:contain; border:1px solid var(--line); }
/* ---------- IN DEMAND — the one magenta, used everywhere the idea appears (Sarah, 7/29) ---------- */
:root{ --indemand:#c2185b; --indemand-soft:#fdf0f6; }
/* the strip on an In-Demand category's page: ONE compact wrapping row, magenta-framed */
.indemandbar{
display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
background:var(--indemand-soft); border:2px solid var(--indemand);
padding:8px 12px; margin:0 0 8px; color:var(--ink); font-size:14px; line-height:1.5;
}
.indemand-row{ display:contents; } /* children sit directly on the bar's flex row */
.indemand-head{ color:var(--ink); }
.indemand-word{ color:var(--indemand); }
/* THE RECEIVING CAP, stated right in the magenta box (Sarah's order, 8/03: "that has to be said
in the Magenta box - then the explanation goes in How it works"). Her wording: "Initial cap of
5 pieces." It must read as a plain fact, not as a warning and not as a button — so it takes the
In-Demand magenta on the box's own background and nothing else. */
.indemand-recvcap{ color:var(--indemand); white-space:nowrap; }
/* ---------- TOP TREASURES (Sarah's picks, 8/04): deep GOLD with the star, everywhere;
never magenta. The gold is dark enough for white letters to pass her contrast law. ---------- */
:root{ --treasure:#8a6a00; --treasure-soft:#fffdf4; }
/* The sidebar line is an ORDINARY sidebar line (her ruling 8/04) — it uses .sidebtn like its
neighbours, so there is no gold-door style here any more. */
/* the tile banner: replaces the rating's words on a treasured tile, everywhere it appears */
.lvlstrip.ttstrip{ background:var(--treasure); color:#fff; }
/* the Choose screen */
.tt-pickhead{ margin:18px 0 6px; font-size:17px; }
.pickerbar{ display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 10px; }
.pickerbar input[type=search]{
flex:1; min-width:170px; border:2px solid var(--ink); padding:8px 10px; font-size:14.5px;
}
.ttgrid{ display:flex; gap:12px; flex-wrap:wrap; }
.tttile{ width:150px; border:1px solid var(--line); background:var(--card); position:relative; display:flex; flex-direction:column; }
.tttile img{ width:100%; height:100px; object-fit:cover; }
.tttile .nm{ font-size:12.5px; font-weight:bold; padding:5px 7px 1px; min-height:30px; }
.tttile .cidline{ font-size:10.5px; color:#5c5c54; padding:0 7px 4px; }
.tttile .ttlvl{ display:block; text-align:center; color:#fff; font-weight:bold; font-size:12px; padding:3px 2px; }
.ttlvl.l5{ background:var(--lvl5); } .ttlvl.l4{ background:var(--lvl4); } .ttlvl.l3{ background:var(--lvl3); }
.ttlvl.l2{ background:var(--lvl2); } .ttlvl.l1{ background:var(--lvl1); }
.tt-add{
border:0; border-top:2px solid var(--treasure); background:var(--treasure-soft); color:var(--ink);
font-weight:bold; font-size:12.5px; padding:6px 2px; cursor:pointer; margin-top:auto;
}
.tt-add:hover{ background:#fff7dd; }
/* THE ORDER NUMBERS ARE PLAIN BLACK ON WHITE (her ruling 8/04: "Rank order numbers - these are
unreadable. Just use regular black numbers on white!!"). The coloured blocks that used to sit
behind them are gone; the red row keeps its red border, which is the signal that matters. */
.ttnum{ background:none; color:var(--ink); }
/* positions past the 4: RED, her call ("the lower numbers show as red, or whatever") */
.ttrow.ttovercap{ border:2px solid var(--red); background:#fdf3f3; }
.ttrow.ttovercap .ttnum{ background:none; color:var(--ink); }
.ttrow .rankover{ color:var(--red); }
.tt-setnote{ font-weight:normal; font-size:12px; color:#5c5c54; }
.tt-empty{ padding:14px 4px; font-size:14.5px; }
.ttfinish{ border:2px solid var(--treasure); background:var(--treasure-soft); }
/* A rank-order-only category (Sarah's 8/03 trial, Tiffin Blue): no rating buttons, three acts. */
.rankonly{ margin-top:10px; }
.rankonly-line{
background:var(--indemand-soft); border:2px solid var(--indemand);
padding:8px 10px; margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--ink);
}
/* The "Put in my Rank Order" button carries the same weight as a top rating button, because in
this category it IS the strong act. Deliberately NOT one of the five rating colours. */
.lvlbtn.brank{ background:var(--indemand); color:#fff; border-color:var(--indemand); font-weight:800; }
.lvlbtn.brank.on{ box-shadow:inset 0 0 0 3px #fff, 0 0 0 3px var(--indemand); }
.indemand-lvl{
display:inline-flex; align-items:center; gap:6px; padding:3px 8px;
background:var(--card); border:2px solid var(--indemand);
}
.bignum{ font-size:16px; font-weight:800; color:var(--ink); }
/* Over the limit (Sarah's pick 7/30): the box stays exactly as normal; the ONLY change is
the count and the words "N over" each get a flat double-pass yellow paintbrush stroke.
Nothing tilted, the cap number is never touched, nothing button-like. */
.overbrush{
display:inline-block; padding:4px 12px 5px; font-weight:800; color:#111; line-height:1.2;
background:url("data:image/svg+xml;utf8,") no-repeat;
background-size:100% 100%;
}
.overbrush-num{
display:inline-block; padding:3px 10px 4px; font-weight:800; color:#111; line-height:1.2;
background:url("data:image/svg+xml;utf8,") no-repeat;
background-size:100% 100%;
}
.indemand-others{ color:var(--ink); font-size:13px; }
.indemand-how{ color:var(--blue); text-decoration:none; font-size:13px; white-space:nowrap; }
.indemand-how:hover{ text-decoration:underline; }
/* Easier to read (Sarah, 8/04): a size up from the old 13px small print, and the rewritten
explanations are BULLETS, one fact per line, never a run-on paragraph. */
.indemand-how-box{
flex-basis:100%; background:var(--card); border:1px solid var(--line);
padding:8px 12px; font-size:14px; color:var(--ink); line-height:1.5;
}
.indemand-how-box ul{ margin:6px 0 2px 18px; padding:0; }
.indemand-how-box li{ margin:3px 0; }
/* In-Demand category tiles on the samplers: magenta frame + diagonal corner banner */
.card.sampler{ position:relative; overflow:hidden; }
.indemand-tile{ outline:3px solid var(--indemand); outline-offset:-3px; }
.indemand-ribbon{
position:absolute; top:14px; right:-34px; z-index:2;
transform:rotate(45deg);
background:var(--indemand); color:#fff;
font-size:12px; font-weight:700; letter-spacing:.03em;
padding:3px 40px; pointer-events:none;
box-shadow:0 1px 3px rgba(0,0,0,.25);
}
/* The small SET banner on a stays-together set's tile (Sarah, 8/04) — same corner ribbon as
In Demand but a calm slate blue, so "set" reads as information, never as competition. */
.set-ribbon{
position:absolute; top:10px; right:-38px; z-index:2;
transform:rotate(45deg);
background:#3c5a74; color:#fff;
font-size:11px; font-weight:700; letter-spacing:.06em;
padding:2px 40px; pointer-events:none;
box-shadow:0 1px 3px rgba(0,0,0,.25);
}
/* the finish screen's In-Demand block carries the same magenta edge */
.indemand-finish{ border-left-color:var(--indemand) !important; }
/* the tick-boxes on the rank rows */
.rankpick{ width:20px; height:20px; flex-shrink:0; accent-color:var(--indemand); }
/* ================= THE COMBINED DESIGN (Sarah, 7/30): sidebar index + trail spine ================= */
/* The layout: index column on the left, pictures on the right. */
.layout{ display:flex; align-items:flex-start; }
.mainarea{ flex:1; min-width:0; }
/* The sidebar — one tool per line, always in the same place. */
.sidebar{
width:224px; min-width:224px;
background:var(--card); border-right:1px solid var(--line);
padding:14px 14px 22px;
position:sticky; top:78px; align-self:flex-start;
max-height:calc(100vh - 90px); overflow:auto;
}
.sidehead{ font-size:11.5px; font-weight:bold; letter-spacing:.06em; text-transform:uppercase;
color:var(--ink-soft); margin:0 0 8px; }
.sidebar #search{ width:100%; min-width:0; font-size:14px; padding:7px 26px 7px 9px; border:1px solid var(--line); }
/* The little ✕ INSIDE the search box — clears just the typed word (Sarah's yes, 7/31).
It appears only while there is something typed; the browser's own tiny ✕ is turned off
so there are never two. */
.searchwrap{ position:relative; display:block; }
.searchwrap input{ width:100%; box-sizing:border-box; }
.searchx{ display:none; position:absolute; right:5px; top:50%; transform:translateY(-50%);
border:0; background:none; font-size:15px; font-weight:bold; color:var(--ink-soft);
cursor:pointer; padding:4px 6px; line-height:1; }
.searchx:hover{ color:var(--red); }
.searchwrap input:not(:placeholder-shown) + .searchx{ display:block; }
input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none; }
/* The ✕ shows on the phone too (Sarah, 7/31 — her earlier note meant it was MISSING there,
not unwanted; an earlier hide-on-phone rule from misreading that note is removed). */
/* A search that found nothing says so, dark and readable, right in the picture area. */
.noresults{ grid-column:1 / -1; padding:24px 6px; font-size:16px; color:var(--ink); }
.sidebar .desc-search{ display:flex; align-items:center; gap:6px; margin:7px 0 0; white-space:normal; }
.sidediv{ border-top:1px solid var(--line); margin:11px 0; }
.sidebtn{
display:block; width:100%; text-align:left; background:none; border:0;
font-size:14.5px; color:var(--ink); padding:7px 8px; cursor:pointer;
border-left:3px solid transparent;
}
.sidebtn:hover{ background:#f4f7fa; }
.sidebtn.on{ background:#eef4f7; border-left-color:var(--accent); font-weight:bold; }
.sidebtn.toggle.on{ background:var(--accent); color:#fff; border-left-color:var(--accent); }
.sideclear{ color:var(--red); }
.sidejump{ display:block; margin:8px 0 0; font-size:13px; color:var(--ink-soft); }
.sidejump label{ display:block; margin:0 0 4px; }
.sidejump select{ width:100%; font-size:13.5px; padding:6px 7px; border:1px solid var(--line); background:#fff; }
.sidelabel{ display:block; font-size:13px; color:var(--ink-soft); }
.sidelabel select{ width:100%; font-size:13.5px; padding:6px 7px; border:1px solid var(--line); background:#fff; margin-top:4px; }
/* The trail spine — the one big "you are here" line above the pictures. */
.hierarchybar{ font-size:17px; padding:12px 16px; margin:10px 18px 8px;
background:#eef4f7; border-left:4px solid var(--accent); color:var(--ink); }
.hierarchybar .crumb-hint{ font-size:13.5px; color:var(--ink-soft); margin-left:8px; }
.hierarchybar .indemand-word{ font-size:12px; margin-left:8px; }
/* The scoreboard strip: every line is a deliberate line — nothing wraps mid-thought. */
.indemand-board{ display:grid; grid-template-columns:max-content max-content 1fr;
gap:3px 14px; align-items:center; flex-basis:100%; }
.ind-cell{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ind-label{ font-weight:bold; }
.ind-also{ grid-column:1 / -1; font-size:13px; color:var(--ink); }
/* The phone: the sidebar folds into a slide-in panel behind the ☰ Find items button. */
.drawerbtn{ display:none; }
.drawerback{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:55; }
body.drawer-open .drawerback{ display:block; }
@media (max-width:860px){
.drawerbtn{ display:inline-block; }
.sidebar{
position:fixed; left:0; top:0; bottom:0; z-index:60; width:270px; max-height:none;
transform:translateX(-105%); transition:transform .18s ease; box-shadow:2px 0 14px rgba(0,0,0,.25);
padding-top:18px;
}
body.drawer-open .sidebar{ transform:none; }
.hierarchybar{ margin:8px 10px 6px; font-size:15.5px; }
}
/* ================= 7/30 AFTERNOON TWEAK ROUND (Sarah's list) ================= */
/* The In-Demand CHIPS LINE (her pick: mockup 5). Two groups: the capped chips, then the
count-only chips — groups wrap as units, so the first break falls after Really Want. */
.indemand-chips{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; flex-basis:100%; }
.chipgroup{ display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lvlchip{ display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
background:var(--card); border:2px solid var(--indemand); }
.lvlchip.plainchip{ border-color:#e3b7cb; font-size:13px; }
.lvlchip .btn-small{ padding:3px 8px; font-size:12.5px; }
/* View within this category: aligned columns instead of a run-on line (7/30). */
.subcat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:3px 20px; margin-top:4px; }
.subcat-grid a{ margin-right:0; }
/* The where-the-matches-live map: hyperlinked words in aligned columns — the Pick-a-tag
panel is the model (7/30: "hyperlinked words, not buttons"). */
.where-group{ margin:7px 0 2px; }
.where-label{ font-weight:700; color:var(--ink); margin-bottom:2px; }
.where-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:2px 20px; }
.wherelink{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; font-size:14px; }
.wherelink:hover{ background:#eaf1f9; }
/* The pop-up rating bar: sits over the picture area only (not the sidebar), edged in the
Really Want green so it is easy to notice (her suggestion 7/30). */
.selbar{ left:224px; border:3px solid var(--lvl4); border-bottom:0; }
@media (max-width:860px){ .selbar{ left:0; } }
/* The little "?" beside Include descriptions — hover for the explanation. */
.hintmark{ display:inline-block; width:16px; height:16px; line-height:16px; text-align:center;
border:1px solid var(--ink-soft); border-radius:50%; font-size:11px; color:var(--ink);
cursor:help; }
/* The item pop-up: two columns on a wide screen, capped to the window (7/30 — it always ran
below the bottom of Sarah's screen). Photos left, words and rating right. */
.detail-card{ max-width:1120px; max-height:94vh; overflow:auto; }
.dcols{ display:grid; grid-template-columns:minmax(300px, 46%) 1fr; gap:0 20px; align-items:start; }
.dcols .dmain{ max-height:52vh; width:100%; object-fit:contain; background:#f2f0ea; }
@media (max-width:900px){ .dcols{ display:block; } }
/* Related items now show a small photo with the name (7/30). */
.drelated .relcard{ display:inline-flex; align-items:center; gap:7px; margin:4px 12px 4px 0; }
.drelated .relcard img{ width:44px; height:44px; object-fit:cover; border:1px solid var(--line); }
/* Under an enlarged photograph: every item that appears in it, linked. */
.dinphoto{ background:var(--section); border:1px solid var(--line); padding:8px 10px;
margin-top:6px; font-size:14px; }
.dinphoto a{ display:inline-block; color:var(--blue); text-decoration:underline;
text-underline-offset:2px; margin:2px 14px 2px 0; }
/* ================= 7/30 ~1 PM ROUND (Sarah's screenshots) ================= */
/* The top bar: name, count, progress and the saved note in ONE row, not stacked. */
.who{ flex-direction:row; align-items:center; gap:14px; flex-wrap:wrap; }
.who .progressbar{ width:180px; }
/* THE "IN DEMAND" WORDS, third attempt — and the first two moved them the WRONG WAY.
Sarah, 8/01 12:24 PM: "The letter 'I' of 'In Demand' should be approximately where the space is
now between 'In' and 'Demand'." She is describing the words' position ALONG the diagonal band.
The 7/30 attempt and the 8/01 morning attempt both adjusted the space ACROSS the band instead,
which is why she saw no improvement either time.
MEASURED on a real In-Demand tile, four settings compared side by side:
36/36 (the old one) — the words START 4 PIXELS ABOVE THE TILE'S TOP EDGE. That is the overlap.
48/24 — words start 5 pixels BELOW the top edge and end 1 pixel inside the right edge.
50/22 — 6 below, exactly ON the right edge.
52/20 — 8 below, but 2 pixels PAST the right edge, so the tail of "Demand" would clip.
48/24 is kept: it clears the top edge AND keeps the whole word on the tile. The band's total
length is unchanged (72 pixels of padding either way), so the ribbon itself has not moved. */
.indemand-ribbon{ padding:5px 24px 5px 48px; top:12px; right:-32px; line-height:1; }
/* The In-Demand strip: the BOX flexes to its contents, sits centered in the picture
area, and everything inside stays left-aligned (her call, 7/30). The trick: the bar
stacks its rows in a COLUMN — a wrapping row always greedily grabs the full width,
which is exactly the too-wide box she flagged twice. */
.indemandbar{ flex-direction:column; align-items:flex-start; gap:8px;
width:fit-content; max-width:calc(100% - 36px); margin:10px auto 8px; }
.indemandbar .indemand-chips{ flex-basis:auto; }
/* The how-it-works words wrap INSIDE the box's natural width and never widen it (Sarah, 7/31):
width:0 keeps the text out of the box's size-to-contents math; min-width:100% then lets it
fill whatever width the other rows set. */
.indemandbar .indemand-how-box{ flex-basis:auto; width:0; min-width:100%; box-sizing:border-box; }
/* The paler chips and the Set-aside chip are quiet clicks now — same look, hand cursor. */
.plainchip[data-only]{ cursor:pointer; }
.plainchip[data-only]:hover{ border-color:var(--indemand); }
.asidechip{ cursor:pointer; }
/* One consistent left edge for everything above the pictures (the ragged-left fix):
the trail's words start 20px in (16px padding + 4px blue edge), so every other bar
starts 20px in too. */
.wherebar{ margin:0 18px 8px; padding-left:20px; }
.subcatbar{ margin:0 18px 12px; padding-left:20px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.narrowbar{ margin-left:18px; margin-right:18px; padding-left:20px; }
/* The item card: id beside the name; 3-line description with a "more" link. */
.did{ font-size:14px; font-weight:normal; color:var(--ink-soft); white-space:nowrap; }
.ddesc.clamped{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.dmore{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; font-size:14px; }
.dtags a, .dlinks a, .dfunc a{ color:var(--blue); }
/* The enlarged photo: picture left, the items-in-this-photo list on the RIGHT as one
clean column (7/30 — the flowing link soup looked a mess). */
.dexpand-row{ display:flex; gap:16px; align-items:flex-start; }
.dexpand-pic{ flex:1; min-width:0; }
.dexpand-row .dinphoto{ width:250px; min-width:200px; margin-top:0; }
.dexpand-row .dinphoto a{ display:block; margin:0 0 7px; }
@media (max-width:900px){ .dexpand-row{ display:block; } .dexpand-row .dinphoto{ width:auto; margin-top:8px; } }
/* Similar / related: clean aligned columns, not a wrapping soup. */
.drelated{ display:block; }
.drelated .relcard{ display:flex; margin:6px 0 0; }
/* The full-screen photo pop-over (main photo click): tap anywhere to pop back. */
.lightbox{ position:fixed; inset:0; z-index:90; background:rgba(20,20,20,.88);
display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:zoom-out; }
.lightbox img{ max-width:94vw; max-height:88vh; object-fit:contain; background:#fff; padding:4px; }
.lightbox-cap{ color:#fff; font-size:14px; margin-top:10px; }
.lightbox.hidden{ display:none; }
/* The pop-up rating bar: I'm-Done blue, thicker, with a visible bottom edge — and the
box flexes to its contents and sits centered over the picture column, the same as the
In-Demand strip (her call, 7/30 afternoon). 112px = half the sidebar's width, so the
centre line is the picture column's centre, not the window's. */
.selbar{ left:224px; right:0; margin:0 auto;
width:fit-content; max-width:calc(100vw - 260px); flex-wrap:nowrap; white-space:nowrap;
bottom:8px; border:4px solid var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.25); }
@media (max-width:1250px){ .selbar{ flex-wrap:wrap; white-space:normal; } }
@media (max-width:860px){ .selbar{ left:0; right:0; max-width:calc(100vw - 16px); } }
/* ================= 7/30 EVENING — THE BOOKS REDESIGN (Sarah's list) ================= */
/* Titles: NEVER bold (ugly, her word) — a 15px medium weight; authors NEVER pale grey. */
.booktitle{font-weight:500;font-size:15px;flex:1 1 auto;min-width:0}
.bookauthor{color:var(--ink);font-weight:400}
/* The rows are compact now (tick + title + badge), so they flow into as many columns as
the window fits — three on a wide screen, one on a phone. */
.bookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:0 22px;margin-bottom:6px}
.bookrow{flex-wrap:nowrap;padding:6px 10px;border-top:1px solid var(--line)}
.bookgrid .bookrow:first-of-type{border-top:1px solid var(--line)}
.bookpick{width:18px;height:18px;flex-shrink:0}
.bookbadge{color:#fff;font-size:12px;font-weight:bold;padding:3px 8px;white-space:nowrap;flex-shrink:0}
.bookbadge.b5{background:var(--lvl5)} .bookbadge.b4{background:var(--lvl4)} .bookbadge.b3{background:var(--lvl3)}
.bookbadge.b2{background:var(--lvl2)} .bookbadge.b1{background:var(--lvl1);color:var(--ink)}
/* The category heading's one tick-box ticks the whole category. */
.catpick-label{display:flex;align-items:center;gap:8px;cursor:pointer}
.catpick{width:18px;height:18px}
/* Book category headings wear the trail spine's clothes — pale blue, blue left edge,
larger words — so they stand apart from the rows (Sarah, 7/30 evening). */
.bookcat{background:#eef4f7;border-left:4px solid var(--accent);border-bottom:0;
padding:10px 14px;font-size:17px;margin:20px 0 8px}
/* The book card: narrower — a book card carries little — with Author and Category sharing
one row (built in the page code). */
.detail-card.bookcard{max-width:600px}
/* All six rating actions (five levels + Clear) on ONE row on every card — items and books —
sized so they still fit when the chosen one wears its border and checkmark (Sarah, 7/30). */
.detail-card .selbtns{flex-wrap:nowrap}
.detail-card .selbtns .lvlbtn{flex:1 1 auto;min-width:0;padding:9px 3px;font-size:12.5px;white-space:nowrap;text-align:center}
.detail-card .selbtns .lvlbtn.on{transform:none;outline-width:3px;outline-offset:1px;font-weight:bold}
@media (max-width:700px){ .detail-card .selbtns{flex-wrap:wrap} }
/* Every book row shows at most TWO text lines — long titles trim with "…" and the full
words live on the book's card; every row the same height, so the list sits clean. */
.booktitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
/* ================= 7/30 ~2:30 PM ROUND (Sarah's screenshots) ================= */
/* The enlarged photo fills the whole LEFT column; everything-in-this-photo lives in the
RIGHT column as tidy columns (the old side-by-side split "broke" the left column). */
.dexpandlinks{ background:var(--section); border:1px solid var(--line);
padding:8px 10px; margin-top:10px; font-size:14px; }
.dinphoto-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
gap:2px 16px; margin-top:4px; }
.dexpandlinks a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px;
display:block; margin:2px 0; }
#dexpand > img{ width:100%; object-fit:contain; cursor:zoom-in; border:1px solid var(--line); }
/* "Set aside for me" chip inside the magenta In-Demand box. */
.asidechip{ background:#fff; }
/* Readable custom tooltips (the browser's own were tiny and a mile wide). */
.tipwrap{ position:relative; }
/* ONE hover description for the whole app (Sarah's design, 8/01): hovering any rating button
pops its meaning up, the way hovering "Clear rating / selection" already did — which is the
one she pointed at and liked. Her two conditions are met by the placing code in app.js: the
box is CENTERED over the button being hovered, never left-aligned, and it never runs past the
edge of the screen (the old version was a fixed 260px pinned to the button's left corner, so
it was cut off on narrower screens — she flagged that too). It fades in after a short pause
and ignores the mouse, so it reads as a quiet explanation and never as something in the way. */
.hovertip{
position:fixed; left:0; top:0; z-index:120; pointer-events:none;
background:#243036; color:#fff; font-size:14px; line-height:1.45; font-weight:normal;
padding:9px 13px; text-align:center; white-space:normal;
box-shadow:0 3px 12px rgba(0,0,0,.3);
opacity:0; transition:opacity .14s ease;
}
.hovertip.on{ opacity:1; }
/* ============ 7/31 midday round (Sarah's orders) ============ */
/* On a wide screen the TRAIL replaces the top bar when you scroll (her design 7/31):
the top bar scrolls away naturally and the Groups › … › category line pins to the
very top, so moving up a level never needs a scroll. At the top of the page (and on
every fresh screen) the top bar is right there again. Phones keep the old behavior —
their top bar carries the ☰ Find items button and must stay reachable. */
@media (min-width:861px){
.topbar{ position:static; }
/* 8/02: the whole pin stack (trail + the "Showing:" strip) pins as ONE unit. */
#pinStack{ position:sticky; top:0; z-index:45; box-shadow:0 1px 0 var(--line); background:#fdfdfb; }
.sidebar{ top:8px; max-height:calc(100vh - 16px); }
}
/* The phone gets the same rule (Sarah, 7/31: nothing stayed pinned on mobile at all) —
the top bar scrolls away and the trail pins, carrying its own ☰ button.
8/02: pinned by position:FIXED, not sticky — Sarah's Firefox-on-Android screenshots
showed sticky sliding up under the collapsing address bar until only a sliver of the
☰ was left. A fixed bar stays put; #pinSpacer (set by JS) holds its room in the page. */
.trailfind{ display:none; }
@media (max-width:860px){
.topbar{ position:static; }
#pinStack{ position:fixed; top:0; left:0; right:0; z-index:45;
box-shadow:0 1px 0 var(--line); background:#eef4f7; }
/* Left edges line up (Sarah's phone screenshot, 8/02): 3px border + 9px padding = the
same 12px start the top bar and the tiles use. No side margins on the pinned rows. */
#pinStack .hierarchybar{ background:#eef4f7; margin:0; padding:8px 12px 8px 9px; }
#pinStack .filterstrip{ margin:0; padding:8px 12px 8px 9px; }
.trailfind{ display:inline-block; border:1px solid var(--accent); background:#fff;
color:var(--accent); font-size:15px; line-height:1; padding:5px 9px; margin-right:10px;
cursor:pointer; vertical-align:middle; }
}
/* ---- HER 8/04 CORRECTION: Top Treasures is a SCREEN in the main column, never a pop-up.
The bar sits above the ordinary tiles; the tiles are ticked with the ordinary check marks;
the bottom bar carries the one gold act. ---- */
.ttbar{ margin:0 18px 10px; padding:14px 16px; border:2px solid var(--treasure);
border-left-width:8px; background:var(--treasure-soft); border-radius:10px; }
.tt-h{ margin:0 0 6px; font-size:22px; }
.tt-lead{ margin:0 0 10px; font-size:16px; line-height:1.5; }
.ttacts{ display:flex; gap:8px; flex-wrap:wrap; }
/* HER 8/05 LAYOUT: the order button sits TO THE SIDE of "Choose your Top Treasures", and the
category links sit right below that line. Links look like the subcategory rows everywhere
else — plain underlined words, the active one bold and dark. */
.tt-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tt-head .tt-h{ margin:0; }
.tt-first{ margin:8px 0 2px; font-size:15px; }
/* HER 8/05 CORRECTION: the category links line up in COLUMNS, exactly like the search-results
map and the subcategory rows — never one long run-on row, which is hard to read. Same grid
as .where-grid so the two screens match. */
.ttcats{ margin-top:8px; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
gap:2px 20px; font-size:14px; line-height:1.7; }
.ttcats a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.ttcats a:hover{ background:#eaf1f9; }
.ttcats a.on{ font-weight:bold; color:var(--ink); text-decoration-thickness:2px; }
/* HER 8/05 ORDER: Tags open in the main column like Groups and Categories. The list spans the
whole picture area; the columns come from .taggrid exactly as in the old panel. */
.tagbrowse{ grid-column:1 / -1; background:#fff; border:1px solid var(--line);
border-radius:10px; padding:14px 16px; }
/* "2 selected:" was too faint to read against the bar (her ruling 8/04) — dark and bold now. */
#selCount{ color:var(--ink); font-weight:800; font-size:16.5px; }
.lvlbtn.btreasure{ background:var(--treasure); color:#fff; border-color:var(--treasure);
font-weight:800; }
/* the Rank button that now rides the pinned "Showing:" strip so it survives the fold */
.strip-rank{ margin-left:10px; vertical-align:middle; }