@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap'); /* ---- Colour schemes ------------------------------------------------------------------------ Every colour in the app comes from these tokens. A scheme redefines them on any element with data-theme, so the whole app follows and the Appearance previews each carry their own. Each colour has a light scheme (its name) and a dark one (name-dark); a preference of name-auto is resolved to one or the other in JS from the system setting. "night" is the old name of olive-dark, kept for pages that load before JS maps it. */ :root,[data-theme="olive"]{ --bg:#f3f1e8;--bg-2:#e5e3d5;--surface:#fbfaf4;--surface-2:#f4f3e5;--line:#cbc9b7;--line-strong:#b8b6a2; --ink:#30382b;--ink-2:#4c5945;--muted:#71766b; --accent:#9da253;--accent-hover:#b0b665;--accent-strong:#6e742f;--on-accent:#20271d;--accent-soft:#e9e8d0;--accent-line:#bec181; --danger:#994842;--danger-fill:#8f3033;--danger-fill-hover:#732528;--danger-soft:#f3e1dc; --chrome:#30382b;--chrome-2:#4a5742;--chrome-ink:#bbc4b3;--chrome-ink-strong:#fff;--chrome-accent:#c9ce78; --shadow-rgb:48 56 43;color-scheme:light; } [data-theme="fox"]{ --bg:#f6efe7;--bg-2:#eadfd2;--surface:#fffaf4;--surface-2:#f8ede0;--line:#dccbb8;--line-strong:#c6b19a; --ink:#3b2a22;--ink-2:#5e4436;--muted:#85705f; --accent:#d9772b;--accent-hover:#e58a43;--accent-strong:#a24f14;--on-accent:#2a1407;--accent-soft:#f6dcc0;--accent-line:#e3b387; --danger:#a13a2e;--danger-fill:#9a3226;--danger-fill-hover:#7a261c;--danger-soft:#f5dcd6; --chrome:#3b2a22;--chrome-2:#5a4034;--chrome-ink:#d9c6b8;--chrome-ink-strong:#fff;--chrome-accent:#f0a868; --shadow-rgb:59 42 34;color-scheme:light; } [data-theme="sea"]{ --bg:#eef3f1;--bg-2:#dde7e4;--surface:#fafdfc;--surface-2:#eaf3f0;--line:#c3d3cf;--line-strong:#a9bfba; --ink:#1d3136;--ink-2:#37525a;--muted:#62777b; --accent:#3f9a8f;--accent-hover:#52aca1;--accent-strong:#22685f;--on-accent:#06201c;--accent-soft:#d6ece8;--accent-line:#9fcfc7; --danger:#a2433d;--danger-fill:#963a35;--danger-fill-hover:#772d29;--danger-soft:#f4dfdc; --chrome:#1d3940;--chrome-2:#2f5660;--chrome-ink:#b6ccd0;--chrome-ink-strong:#fff;--chrome-accent:#8fd3c8; --shadow-rgb:29 57 64;color-scheme:light; } [data-theme="plum"]{ --bg:#f6f0f3;--bg-2:#eadfe5;--surface:#fffbfd;--surface-2:#f7eef3;--line:#d8c7d0;--line-strong:#c3adb9; --ink:#36202f;--ink-2:#573b4d;--muted:#7f6977; --accent:#b0567d;--accent-hover:#c2688f;--accent-strong:#85345a;--on-accent:#fff;--accent-soft:#f1d9e4;--accent-line:#dca7bf; --danger:#a33a3a;--danger-fill:#963333;--danger-fill-hover:#772828;--danger-soft:#f5dcdc; --chrome:#3a2433;--chrome-2:#57394d;--chrome-ink:#d6c1cf;--chrome-ink-strong:#fff;--chrome-accent:#f0a6c8; --shadow-rgb:58 36 51;color-scheme:light; } [data-theme="olive-dark"],[data-theme="night"]{ --bg:#171a15;--bg-2:#272c23;--surface:#1f231c;--surface-2:#252a21;--line:#363c31;--line-strong:#4a5143; --ink:#e9ecdf;--ink-2:#c7cbbb;--muted:#979d8b; --accent:#b4ba68;--accent-hover:#c5cb7a;--accent-strong:#cfd48a;--on-accent:#1a1d10;--accent-soft:#2e3423;--accent-line:#535a36; --danger:#e08a80;--danger-fill:#b4473f;--danger-fill-hover:#963a33;--danger-soft:#3b2421; --chrome:#111410;--chrome-2:#2a3024;--chrome-ink:#a9b09d;--chrome-ink-strong:#fff;--chrome-accent:#c9ce78; --shadow-rgb:0 0 0;color-scheme:dark; } [data-theme="fox-dark"]{ --bg:#1b1512;--bg-2:#2d231d;--surface:#231b17;--surface-2:#2a211b;--line:#3d3029;--line-strong:#54433a; --ink:#f3e8df;--ink-2:#d6c6b9;--muted:#a8968a; --accent:#e58a43;--accent-hover:#f09a56;--accent-strong:#f3ad74;--on-accent:#2a1407;--accent-soft:#3a2719;--accent-line:#6b4527; --danger:#e88a7e;--danger-fill:#b4473f;--danger-fill-hover:#963a33;--danger-soft:#3d2320; --chrome:#140f0c;--chrome-2:#33271f;--chrome-ink:#c2aea0;--chrome-ink-strong:#fff;--chrome-accent:#f0a868; --shadow-rgb:0 0 0;color-scheme:dark; } [data-theme="sea-dark"]{ --bg:#111a1b;--bg-2:#1f2d2e;--surface:#172223;--surface-2:#1c292a;--line:#2c3d3e;--line-strong:#405557; --ink:#e2eeec;--ink-2:#bfd2cf;--muted:#8ea5a2; --accent:#52aca1;--accent-hover:#66bdb2;--accent-strong:#86d1c6;--on-accent:#06201c;--accent-soft:#1d3634;--accent-line:#2f5f59; --danger:#e38b83;--danger-fill:#b04740;--danger-fill-hover:#93392f;--danger-soft:#3a2322; --chrome:#0c1415;--chrome-2:#22393b;--chrome-ink:#a3bcbd;--chrome-ink-strong:#fff;--chrome-accent:#8fd3c8; --shadow-rgb:0 0 0;color-scheme:dark; } [data-theme="plum-dark"]{ --bg:#1a1418;--bg-2:#2c2129;--surface:#22191f;--surface-2:#291e25;--line:#3c2d37;--line-strong:#54414d; --ink:#f1e5ec;--ink-2:#d5c2cd;--muted:#a3909b; --accent:#c2688f;--accent-hover:#d17ca0;--accent-strong:#e19bbb;--on-accent:#2a0f1c;--accent-soft:#3a2331;--accent-line:#6b3a53; --danger:#e8898a;--danger-fill:#b3444a;--danger-fill-hover:#94363b;--danger-soft:#3d2226; --chrome:#130d11;--chrome-2:#362630;--chrome-ink:#c3aebb;--chrome-ink-strong:#fff;--chrome-accent:#f0a6c8; --shadow-rgb:0 0 0;color-scheme:dark; } :root{--fox:#d9772b;--shadow:0 16px 42px rgb(var(--shadow-rgb)/.16);--shadow-soft:0 2px 0 rgb(var(--shadow-rgb)/.04);--radius:10px;--tabbar:60px} /* ---- Base ---------------------------------------------------------------------------------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.45;overscroll-behavior-y:none} button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} button:disabled{cursor:not-allowed;opacity:.55} :focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px} .hidden{display:none!important} /* The hidden attribute always hides, whatever display a component's own rule sets. */ [hidden]{display:none!important} h2,h3{font-family:Fraunces,serif;margin:0;color:var(--ink)} h2{font-size:clamp(1.85rem,3.2vw,2.8rem)} h3{font-size:1.28rem} a{color:var(--accent-strong)} .eyebrow{font:500 12px 'DM Mono',monospace;letter-spacing:.11em;color:var(--accent-strong);margin:0 0 .55rem} .hint{color:var(--muted);font-size:.85rem;margin:.25rem 0} .author{color:var(--ink-2);margin:0;font-size:.9rem} .form-error{min-height:1.1rem;margin:0;color:var(--danger);font-size:.86rem} .empty{border:1px dashed var(--line);border-radius:var(--radius);padding:2.5rem 1.5rem;text-align:center;color:var(--muted);grid-column:1/-1} .empty h3{margin-bottom:.35rem} .empty p{margin:0} /* ---- Brand --------------------------------------------------------------------------------- */ .brand{display:flex;align-items:center;gap:.45rem;font:600 1.35rem/1 Fraunces,serif;letter-spacing:-.01em;color:inherit} .brand img{width:36px;height:36px;flex:0 0 auto} .brand-header{display:none} /* ---- Form controls and buttons ------------------------------------------------------------- */ label{display:grid;gap:.4rem;font-weight:600;font-size:.88rem;color:var(--ink-2)} label small{font-weight:400;color:var(--muted)} input,textarea,select{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.7rem .75rem;color:var(--ink)} input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85} textarea{min-height:82px;resize:vertical} .primary,.secondary,.danger,.text-button{border:0;border-radius:8px;font-weight:700;padding:.72rem 1rem} .primary{background:var(--accent);color:var(--on-accent)} .primary:hover{background:var(--accent-hover)} .secondary{background:var(--bg-2);color:var(--ink)} .secondary:hover{background:color-mix(in srgb,var(--bg-2) 82%,var(--ink))} .danger{background:var(--danger-fill);color:#fff} .danger:hover{background:var(--danger-fill-hover)} .text-button{padding:0;background:transparent;color:var(--chrome-ink);text-align:left} .link-button{border:0;background:none;padding:.2rem 0;color:var(--accent-strong);font-weight:600;text-decoration:underline;text-underline-offset:3px;justify-self:start} .icon-button{border:0;background:var(--bg-2);color:var(--ink);border-radius:50%;height:38px;width:38px;min-width:38px;font-size:1.35rem;line-height:1} .button-icon{display:inline-flex;align-items:center;justify-content:center;min-width:1.2em;font-size:1.15em;line-height:1} .button-icon svg,.search-icon svg{display:block;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .compact-action{display:inline-flex;align-items:center;justify-content:center;gap:.4rem} .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem} .badge{display:inline-block;margin-left:.35rem;padding:.1rem .45rem;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font:500 10px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;vertical-align:.12em} .badge.admin{background:var(--accent-soft);color:var(--accent-strong)} .badge.disabled{background:var(--danger-soft);color:var(--danger)} .segmented{display:flex;gap:.25rem;padding:.25rem;border-radius:999px;background:var(--bg-2);width:max-content;max-width:100%} .segmented button{border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-weight:700;font-size:.85rem;padding:.35rem 1rem;min-height:36px;display:inline-flex;align-items:center;gap:.4rem} /* Chosen options in tabs, switchers and filters: the theme's accent, with its own text color. */ .segmented button.active{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-soft)} .segmented button.active .hint,.segmented button.active span{color:inherit;opacity:.75} .count-pill{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 .3rem;border-radius:999px;background:var(--fox);color:#fff;font-size:.68rem;font-weight:700} /* ---- Sign-in -------------------------------------------------------------------------------- */ .auth-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.2fr .8fr} .auth-intro{padding:clamp(2rem,8vw,9rem);background:var(--chrome);color:var(--chrome-ink-strong);display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;min-height:100dvh} .auth-intro .brand{font-size:1.6rem} .auth-intro .brand img{width:48px;height:48px} .auth-intro h1{font:600 clamp(2.5rem,5vw,5rem)/1.04 Fraunces,serif;max-width:680px;margin:.2rem 0 1.2rem} .auth-intro .eyebrow{color:var(--chrome-accent)} .lede{font-size:1.1rem;line-height:1.6;max-width:470px;color:color-mix(in srgb,var(--chrome-ink-strong) 82%,var(--chrome))} .quiet{font-size:.85rem;color:var(--chrome-ink);margin:4rem 0 0} .auth-card{max-width:430px;width:100%;justify-self:center;align-self:center;padding:2.5rem} .auth-tabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--line);margin-bottom:1.8rem} .auth-tabs button{padding:.6rem 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-weight:600} .auth-tabs .active{border-color:var(--accent-strong);color:var(--ink)} .auth-form,.form-panel{display:grid;gap:1rem} .auth-alternatives{display:grid;gap:.6rem;margin-top:1.2rem} .auth-divider{display:flex;align-items:center;gap:.8rem;margin:0 0 .2rem;color:var(--muted);font:500 11px 'DM Mono',monospace;letter-spacing:.11em;text-transform:uppercase} .auth-divider::before,.auth-divider::after{content:"";flex:1;border-top:1px solid var(--line)} .auth-provider{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:46px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:600;padding:.6rem 1rem;transition:background-color .15s ease,border-color .15s ease} .auth-provider:hover{background:var(--bg-2);border-color:var(--line-strong)} .auth-provider svg{width:20px;height:20px;flex:0 0 auto} #passkey-sign-in svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .invite-banner{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;padding:.8rem .9rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft);color:var(--ink);font-size:.9rem} .invite-banner img{width:30px;height:30px} /* ---- App shell: sidebar on wide screens ---------------------------------------------------- */ .app-shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh;min-height:100dvh} .sidebar{background:var(--chrome);color:var(--chrome-ink-strong);padding:1.5rem 1.1rem;display:flex;flex-direction:column} .sidebar .brand{padding:0 .4rem} .library-name{font:500 .78rem 'DM Mono',monospace;color:var(--chrome-ink);margin:2.2rem .4rem 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar nav{display:grid;gap:.3rem} .nav-item{position:relative;border:0;background:transparent;color:var(--chrome-ink);text-align:left;padding:.65rem .7rem;border-radius:8px;font-weight:600;display:flex;gap:.7rem;align-items:center;transition:background-color .18s ease,color .18s ease} .nav-item.active,.nav-item:hover{background:var(--chrome-2);color:var(--chrome-ink-strong)} .nav-item .button-icon{font-size:1.2rem} .sidebar-bottom{margin-top:auto;padding:2rem .4rem 0} .workspace{min-width:0;padding:clamp(1.25rem,4vw,3.5rem);max-width:1440px;width:100%;margin:0 auto} header{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:2rem} .header-title{min-width:0} .header-actions{display:flex;gap:.5rem;align-items:center} .header-actions button{display:inline-flex;align-items:center;gap:.35rem} .workspace-sticky{display:contents} .toolbar{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem} .library-reading-tracker{display:flex;align-items:center;gap:.65rem;width:min(100%, 560px);min-height:42px;margin:0 0 .65rem;padding:.3rem .65rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft);color:var(--ink);text-align:left;cursor:pointer} .library-reading-tracker:hover,.library-reading-tracker:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent)} .reading-tracker-icon{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--surface);color:var(--accent-strong)} .reading-tracker-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .reading-tracker-copy{display:flex;align-items:center;gap:.5rem;min-width:0;flex:1} .reading-tracker-copy strong{flex:0 0 auto;font-size:.78rem;line-height:1.2;white-space:nowrap} .reading-tracker-count{padding:.16rem .48rem;border:1px solid var(--accent-line);border-radius:999px;background:var(--surface);color:var(--accent-strong);font-size:.72rem;font-weight:700;line-height:1.2;white-space:nowrap} .reading-tracker-arrow{font-size:1.1rem;color:var(--accent-strong)} .search{position:relative;max-width:560px;width:100%;display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);padding:0 .8rem;border-radius:999px;background:var(--surface)} .search-icon{color:var(--muted);display:flex} .search input{border:0;padding:.7rem 0;background:transparent;min-width:0} .search input:focus{outline:0} .search:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} .count{font:500 11px 'DM Mono',monospace;color:var(--muted);white-space:nowrap} /* ---- Settings menu (fixed, positioned from the Settings nav item in JS) --------------------- */ .settings-menu{position:fixed;z-index:50;min-width:200px;padding:.45rem;border:1px solid color-mix(in srgb,var(--chrome-ink-strong) 10%,transparent);border-radius:12px;background:var(--chrome);box-shadow:0 16px 42px rgb(var(--shadow-rgb)/.32);display:grid;gap:.1rem} .settings-menu-label{margin:0 0 .2rem;padding:.35rem .6rem .45rem;border-bottom:1px solid color-mix(in srgb,var(--chrome-ink-strong) 10%,transparent);font:500 11px 'DM Mono',monospace;letter-spacing:.11em;color:var(--chrome-accent)} .settings-menu-item{display:flex;align-items:center;gap:.7rem;width:100%;border:0;background:transparent;color:var(--chrome-ink);padding:.62rem .7rem;border-radius:8px;font-weight:600;text-align:left;transition:background-color .18s ease,color .18s ease} .settings-menu-item .button-icon{font-size:1.1rem} .settings-menu-item:hover,.settings-menu-item.active{background:var(--chrome-2);color:var(--chrome-ink-strong)} /* ---- Bookshelf ----------------------------------------------------------------------------- */ .book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem} .shelf-group{grid-column:1/-1;display:flex;align-items:baseline;gap:.5rem;margin:.9rem 0 0;font-size:1.1rem} .shelf-group:first-child{margin-top:0} .shelf-group span{font:500 11px 'DM Mono',monospace;color:var(--muted)} .book-card{position:relative;appearance:none;display:block;width:100%;aspect-ratio:2/3;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-soft);text-align:left;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .book-card img{-webkit-user-drag:none;user-drag:none} .book-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);transition:.18s} .book-cover-frame{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--bg-2)} .book-cover{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:var(--bg-2);opacity:0} .book-cover.loaded{opacity:1} .book-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:1rem;background:linear-gradient(160deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 88%,var(--ink)))} /* A cover without artwork: title and author set like a plain jacket, sized to the cover (cqi). */ .book-fallback,.recommendation-fallback,.details-cover-blank{container-type:inline-size} .fallback-text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55em;width:100%;height:100%;padding:14% 11%;text-align:center} .fallback-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;overflow-wrap:break-word;hyphens:auto;font:600 max(8px,14.5cqi)/1.15 Fraunces,serif;color:var(--ink)} .fallback-rule{flex:none;width:26%;height:max(1px,1.6cqi);border-radius:2px;background:var(--accent)} .fallback-author{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:max(6.5px,8.5cqi);line-height:1.25;color:var(--ink-2)} .fallback-mark{display:flex;align-items:center;justify-content:center;width:48%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--ink) 17%,transparent);border-radius:50%;color:color-mix(in srgb,var(--ink) 46%,transparent);background:color-mix(in srgb,var(--surface) 40%,transparent)} .fallback-mark svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .copy-badge{position:absolute;z-index:2;right:.45rem;bottom:.45rem;background:rgb(var(--shadow-rgb)/.84);color:#fff;font:600 11px 'DM Mono',monospace;padding:.12rem .45rem;border-radius:999px} .rec-badge{position:absolute;z-index:2;left:.45rem;bottom:.45rem;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--fox);color:#fff;box-shadow:0 1px 3px rgb(0 0 0/.25)} .rec-badge svg{width:13px;height:13px;fill:currentColor;stroke:none} .select-badge{position:absolute;z-index:2;top:.45rem;right:.45rem;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--surface) 96%,transparent);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:transparent;opacity:0;transform:scale(.7);transition:.15s} .book-card.select-mode .select-badge{opacity:1;transform:scale(1)} .book-card.selected{border-color:var(--accent-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 43%,transparent)} .book-card.selected .select-badge{opacity:1;transform:scale(1);border-color:var(--accent-strong);background:var(--accent);color:var(--on-accent)} .selection-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:-1rem 0 1.4rem;padding:.75rem 1rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft)} .selection-bar div{display:flex;flex-wrap:wrap;gap:.5rem} .trash-intro{margin-bottom:1.4rem} /* ---- Locations ----------------------------------------------------------------------------- */ .locations-layout{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(300px,1.3fr);gap:1.2rem} .location-list{display:grid;gap:.4rem;margin-top:1rem} .location-row{display:flex;justify-content:space-between;align-items:center;padding:.7rem;border-bottom:1px solid var(--bg-2)} .location-row:last-child{border:0} .location-row span{font:12px 'DM Mono',monospace;color:var(--muted)} button.location-row{width:100%;border:0;background:transparent;color:var(--ink);text-align:left} button.location-row:hover,button.location-row.active{border-radius:8px;background:var(--bg-2)} button.location-row:active{transform:scale(.99)} .location-detail{margin-top:1rem;scroll-margin-top:110px} .location-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)} .location-detail-actions{display:flex;align-items:flex-end;gap:.65rem} .location-detail-actions label{min-width:170px} .location-detail .book-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} /* ---- Dialogs ------------------------------------------------------------------------------- */ dialog{border:0;border-radius:14px;padding:0;max-width:min(680px,calc(100vw - 2rem));width:100%;box-shadow:var(--shadow);background:var(--surface);color:var(--ink)} dialog::backdrop{background:rgb(var(--shadow-rgb)/.62);backdrop-filter:blur(2px)} .modal-form,.details{padding:1.5rem;position:relative} /* its own hidden labels stay inside its scroll, not the dialog's */ .modal-form{display:grid;gap:1rem} .modal-header{display:flex;justify-content:space-between;align-items:start;gap:1rem} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .wide{grid-column:1/-1} .modal-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:.3rem} .gemini-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center;color:#fff;background:rgb(var(--shadow-rgb)/.86);backdrop-filter:blur(2px);border-radius:14px} .gemini-overlay p{margin:0;font-weight:600} .spinner{width:36px;height:36px;border:3px solid rgb(255 255 255/.3);border-top-color:#fff;border-radius:50%;animation:gemini-spin .8s linear infinite} @keyframes gemini-spin{to{transform:rotate(360deg)}} /* Add-book entry: photo, barcode scan, ISBN lookup, cover picker. */ /* Add a book: a chooser first, then only the chosen way (scan, photo, search, type it in). The details and copy fields appear once a book is found, or straight away for Type it in. */ .add-chooser{display:grid;gap:.6rem} .add-chooser button{display:flex;align-items:center;gap:.9rem;width:100%;min-height:64px;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--ink);text-align:left} .add-chooser button:first-child{border-color:var(--accent-line);background:linear-gradient(135deg,var(--accent-soft),var(--surface))} .add-chooser button:hover{background:var(--bg-2)} .add-chooser svg{flex:0 0 auto;width:26px;height:26px;fill:none;stroke:var(--accent-strong);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .add-chooser span{display:grid;gap:.1rem} .add-chooser strong{font-family:Fraunces,serif;font-size:1.05rem} .add-chooser small{color:var(--ink-2);font-size:.8rem} .add-back{justify-self:start;padding:0} #book-form:not([data-step="choose"]) .add-chooser,#book-form[data-step="choose"] .add-back{display:none} #book-form[data-step="choose"] :is(.photo-section,.scan-section,#scanner-panel,.lookup-section,#lookup-status,#book-match,#add-edition-options,#cover-picker,#book-catalog-fields,#book-more,#book-duplicate,.book-copy-fields,.add-hint,.modal-actions .primary){display:none} #book-form:not([data-step="photo"]) .photo-section,#book-form:not([data-step="scan"]) :is(.scan-section,#scanner-panel),#book-form:not([data-step="search"]) .lookup-section{display:none} #book-form[data-step="scan"]:has(#scanner-panel:not(.hidden)) .scan-section{display:none} #book-form:is([data-step="photo"],[data-step="scan"],[data-step="search"]):not(.book-matched) :is(#book-catalog-fields,#book-more,.book-copy-fields,.add-hint,.modal-actions .primary){display:none} .photo-section{display:grid;gap:.8rem;padding:1rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:linear-gradient(135deg,var(--accent-soft),var(--surface))} .photo-section strong,.scan-section strong,.cover-picker strong{font-family:Fraunces,serif;font-size:1.05rem} .photo-section p,.scan-section p{margin:.15rem 0 0;color:var(--ink-2);font-size:.82rem} .photo-actions{display:flex;align-items:end;gap:.7rem} .photo-actions label{flex:1} .photo-pick{display:flex!important;min-height:46px;padding:.72rem 1rem;align-items:center;justify-content:center;border-radius:8px;background:var(--chrome);color:var(--chrome-ink-strong)!important;font-weight:700!important;text-align:center} .photo-pick input,.image-pick input{position:absolute;width:1px;height:1px;opacity:0} .photo-buttons{flex:1;display:flex;gap:.5rem;min-width:0} .photo-actions .photo-buttons .photo-pick{flex:1} .photo-actions .photo-buttons .gallery-pick{flex:0 0 52px;padding:0} .gallery-pick svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .scan-section{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)} .scanner-panel{position:relative;overflow:hidden;background:#101410;border-radius:var(--radius);color:#fff;padding:.75rem} .scanner-panel video{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:6px} .scanner-line{position:absolute;left:10%;right:10%;top:45%;height:2px;background:var(--accent);box-shadow:0 0 10px 2px var(--accent)} .scanner-panel .hint{color:#e1e7dc;margin:.6rem 0} .scanner-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 .8rem} .image-pick,.text-action{display:inline-block;width:auto;color:#d3d985;font-size:.82rem;font-weight:600} .text-action{border:0;background:none;padding:0} .lookup-section{display:grid;gap:.8rem;padding:.85rem 1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)} .lookup-section strong{font-family:Fraunces,serif;font-size:1.05rem} .lookup-section>div>p{margin:.15rem 0 0;color:var(--ink-2);font-size:.82rem} .lookup-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:.65rem;align-items:end} .lookup-row label{margin:0;min-width:0} .lookup-results .hint{margin:0 0 .5rem} .lookup-results ul{display:grid;gap:.45rem;max-height:340px;margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain} .lookup-result{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.75rem;align-items:center;width:100%;padding:.45rem .6rem .45rem .45rem;border:2px solid transparent;border-radius:var(--radius);background:var(--surface);color:var(--ink);text-align:left} .lookup-result:hover{border-color:var(--line)} .lookup-result.selected{border-color:var(--accent-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent)} .lookup-result img,.lookup-result-blank{display:block;width:44px;height:64px;border-radius:4px;object-fit:cover;background:var(--bg-2)} .lookup-result-text{display:grid;gap:.1rem;min-width:0} .lookup-result-text strong{font-family:inherit;font-size:.95rem;line-height:1.25;overflow-wrap:anywhere} .lookup-result-text strong span{font-weight:500;color:var(--ink-2)} .lookup-result-text .author{font-size:.85rem} .lookup-result-text .hint{margin:0;font-size:.78rem;overflow-wrap:anywhere} .cover-picker{padding:1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)} .cover-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.7rem;margin-top:.8rem} .cover-option{min-width:0;padding:.35rem;border:2px solid transparent;border-radius:var(--radius);background:var(--surface);color:var(--ink);text-align:left} .cover-option.selected{border-color:var(--accent-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent)} .cover-option img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:5px;background:var(--bg-2)} .cover-option span{display:block;overflow:hidden;margin-top:.35rem;color:var(--muted);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap} /* Book details sheet. */ .details-top{display:flex;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1rem} .sheet-edition{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .7rem;margin:.85rem 0} .sheet-edition .hint{font-size:.8rem} .edition-picker{display:grid;gap:.7rem;padding:1rem;margin:.4rem 0 1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)} .edition-picker.hidden{display:none} .edition-picker h3{font-size:1rem} .edition-picker>.hint{margin:0;font-size:.83rem} .edition-picker-list{display:grid;gap:.45rem;max-height:360px;overflow-y:auto;overscroll-behavior:contain} .edition-picker-list .lookup-result{grid-template-columns:44px minmax(0,1fr)} .edition-picker-list .hint{font-size:.77rem;line-height:1.4} .edition-isbn-search{display:flex;align-items:end;flex-wrap:wrap;gap:.5rem} .edition-isbn-search label{flex:1 1 160px;margin:0;font-size:.82rem} .edition-isbn-search button{min-height:38px} .details-top p{margin:.2rem 0;color:var(--muted)} .details-top-actions{display:flex;align-items:flex-start;gap:.4rem;flex:0 0 auto} .icon-button svg{display:block;width:17px;height:17px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .details-cover-wrap{position:relative;width:92px;flex:0 0 92px;aspect-ratio:2/3} .details-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:7px;background:var(--bg-2)} .details-cover-blank{background:linear-gradient(160deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 88%,var(--ink)))} .details-cover-blank .fallback-mark{display:none} .details-cover-image{z-index:1;opacity:0} .details-cover-image.loaded{opacity:1} .details-info{flex:1;min-width:0;display:flex;min-height:138px;flex-direction:column;justify-content:flex-start} .details-title{font-size:1.75rem;line-height:1.08;overflow-wrap:anywhere} .details-title-medium{font-size:1.42rem} .details-title-long{font-size:1.15rem;line-height:1.13} .details-author{line-height:1.25;overflow-wrap:anywhere} .details-author-medium{font-size:.82rem} .details-author-long{font-size:.74rem} .details-publication{margin-top:auto!important;overflow-wrap:anywhere} .subtitle{margin:.1rem 0;color:var(--ink-2);font-size:.95rem} .description{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin:1rem 0;white-space:pre-line} .description.clamp:not(.expanded){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden} .description.clamp:has(+ .description-toggle){margin-bottom:.3rem} .description-toggle{display:block;width:fit-content;margin:.25rem 0 1rem auto;padding:.2rem 0;border:0;background:none;color:var(--accent-strong);font-weight:700;font-size:.85rem} .copy-list{display:grid;gap:.6rem;margin:1rem 0} .copy-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;background:var(--bg);padding:.75rem;border-radius:8px} .copy-row-body{flex:1;min-width:0} .copy-row p{margin:0;font-size:.88rem} .copy-row p.copy-note{margin:.2rem 0 0;font-size:.78rem;color:var(--muted)} .copy-row .condition{font:12px 'DM Mono',monospace;color:var(--accent-strong);flex-shrink:0} .copy-edit-section{display:grid;gap:.45rem;margin-top:.25rem;padding-top:1rem;border-top:1px solid var(--line)} .copy-edit-section h3{font-size:1.08rem} /* The book editor: one scroll in three parts (the book, this edition, yours), under a header with Save and a bar to jump between them. Rare details wait behind "+ Add" chips. */ /* Columns that can shrink: a long title or location name is cut short, never widens the page. */ .edit-form{gap:0;grid-template-columns:minmax(0,1fr)} .edit-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .edit-header{flex-direction:column;align-items:stretch;gap:.65rem} .edit-header-row{display:flex;align-items:center;gap:.75rem} .edit-header-title{flex:1;min-width:0} .edit-header-title h2{font-size:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .edit-jump{display:flex;gap:.3rem;padding:.25rem;border-radius:999px;background:var(--bg-2)} .edit-jump button{flex:1;min-width:0;min-height:36px;padding:0 .2rem;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-weight:700;font-size:.85rem} .edit-jump button[aria-current="true"]{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 3px rgb(var(--shadow-rgb)/.18)} .edit-section{display:grid;gap:.85rem;padding:1.25rem 0;border-bottom:1px solid var(--line)} .edit-section:last-of-type{border-bottom:0;padding-bottom:.25rem} .edit-section h3{font-size:1.08rem} .edit-section .edit-cover{margin:0} .edit-add{display:flex;flex-wrap:wrap;gap:.45rem} .edit-add[hidden]{display:none} .edit-add-chip{display:inline-flex;align-items:center;gap:.3rem;min-height:34px;padding:.3rem .8rem;border:1px dashed var(--line-strong);border-radius:999px;background:transparent;color:var(--ink-2);font-weight:600;font-size:.85rem} .edit-add-chip[hidden]{display:none} .edit-add-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .edit-add-chip:hover{border-color:var(--accent-strong);color:var(--accent-strong)} .edit-suggest{display:flex;align-items:center;gap:.65rem;margin:-.25rem 0 0;padding:.55rem .8rem;border-radius:10px;background:var(--accent-soft);font-size:.92rem} .edit-suggest[hidden]{display:none} .edit-suggest-text{flex:1;min-width:0;display:grid} .edit-series{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem} .edit-series label:first-child{grid-column:1/-1} .series-coverage-hint{margin:.1rem 0 .4rem;font-size:.78rem} .edit-suggest small{color:var(--muted);font-size:.78rem} .edit-suggest svg,.edit-found svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--accent-strong);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .edit-found{display:flex;align-items:center;gap:.75rem;margin:0;padding:.75rem .9rem;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft)} .edit-found[hidden]{display:none} .edit-found div{flex:1;min-width:0;display:grid;gap:.1rem} .edit-found span{font-size:.84rem;color:var(--ink-2)} .edit-found .secondary{padding:.5rem .95rem} .edit-note{margin:-.45rem 0 0} .edit-form .copy-edit-section{gap:.6rem;margin:0;padding-top:1.25rem;border-top:0} .edit-section h3 small{margin-left:.35rem;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--muted)} /* Contain WebKit native select text overflow without clipping the native picker. */ .edit-copy{overflow:hidden;display:grid;gap:.6rem;justify-items:start;padding:.85rem;border-radius:12px;background:var(--bg)} .edit-copy>.form-grid{width:100%} .edit-copy .hint{margin:-.3rem 0 0} .edit-copy textarea{min-height:64px} .edit-copy .edit-add-chip{min-height:30px;font-size:.8rem} .edit-actions,.filter-actions{position:sticky;bottom:-1.5rem;z-index:3;display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem -1.5rem -1.5rem;padding:.85rem 1.5rem;background:var(--surface);border-top:1px solid var(--bg-2)} .edit-actions .form-error{flex:1 0 100%;margin:0} .edit-actions .form-error:empty{display:none} .edit-actions .primary,.filter-actions .primary{flex:1;min-width:0;min-height:48px;border-radius:999px} .edit-actions .secondary,.filter-actions .secondary{min-height:48px;padding:0 1.2rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:700} .edit-actions .secondary:disabled{opacity:.45;cursor:default} .details-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem} .details-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem} /* One book sheet for every book (static/book-sheet.js): context bar, header, description, friends, copies, Similar books, and the status bar pinned to the bottom. */ .sheet-bar{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(max-content,1fr);align-items:center;gap:.4rem;margin-bottom:.9rem} .sheet-bar-side{display:flex;gap:.4rem} .sheet-bar-side.end{justify-content:flex-end} .sheet-context-wrap{min-width:0;display:flex;justify-content:center} .sheet-context{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;min-height:30px;padding:.25rem .75rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:.78rem;font-weight:700} .sheet-context span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sheet-context svg,.sheet-reason svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sheet-reason.verdict{padding:.65rem .8rem;border-radius:var(--radius);font-weight:700;color:var(--ink)} .verdict-yes,.verdict-other{background:var(--accent-soft);border:1px solid var(--accent-line)} .verdict-no{background:var(--bg-2);border:1px solid var(--line)} .verdict svg{color:var(--accent-strong)} .book-sheet .details-top-actions{display:none} .sheet-reason{display:flex;align-items:flex-start;gap:.4rem;margin:.8rem 0 0;color:var(--ink-2);font-size:.84rem} .sheet-reason svg{margin-top:.15rem;color:var(--accent-strong)} .sheet-friends{display:grid;gap:.7rem;margin:1rem 0;padding:.85rem 1rem;border-radius:var(--radius);background:var(--surface-2)} .sheet-friends .eyebrow{margin:0} .sheet-friend{display:flex;gap:.65rem;align-items:flex-start} .sheet-friend p{margin:0;font-size:.88rem;line-height:1.4;color:var(--ink)} .sheet-friend time{margin-left:.3rem;font:500 10px 'DM Mono',monospace;color:var(--muted);white-space:nowrap} .sheet-friend .quote{color:var(--ink-2);font-style:italic} .sheet-friend .link-button{margin-top:.2rem;font-size:.82rem} .sheet-section-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem} .sheet-section-head .eyebrow{margin:0} .sheet-section-head .link-button{display:inline-flex;align-items:center;gap:.3rem;text-decoration:none;min-height:36px} .sheet-section-head .link-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .sheet-place{display:grid;gap:.45rem;margin-top:1rem} .place-row{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .7rem;border-radius:10px;background:var(--bg)} .place-pin{flex:0 0 auto;display:grid;place-items:center;width:32px;height:38px;color:var(--accent-strong)} .place-pin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .place-body{flex:1;min-width:0} .place-select{display:block} .place-select select{width:100%;min-height:38px;padding:.35rem 2rem .35rem .1rem;border:0;background:transparent;color:var(--ink);font-weight:600;font-size:.95rem;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer} /* Chrome marks a dropdown as keyboard-focused even when tapped, so no outline here; the native picker opening is the feedback. */ .place-select select:focus,.place-select select:focus-visible{outline:none;box-shadow:none} .copy-condition{display:flex;align-items:center;gap:.5rem;margin:.1rem 0 .3rem .1rem;font-size:.8rem;color:var(--muted)} .copy-condition input{flex:1;min-width:0;min-height:34px;padding:.3rem .5rem;font-size:.9rem} .place-detail{margin:0 0 .15rem .1rem;font-size:.8rem;color:var(--muted)} /* The editor makes form controls taller; keep location rows the same height as on the sheet. */ .form-grid .place-select select{min-height:38px} .sheet-place .form-error:empty{display:none} .sheet-footer-links{display:flex;justify-content:center;margin-top:1.2rem} .danger-link{color:var(--danger);min-height:40px} .sheet-actions{position:sticky;bottom:-1.5rem;z-index:3;display:flex;gap:.6rem;margin:1.2rem -1.5rem -1.5rem;padding:.85rem 1.5rem;background:var(--surface);border-top:1px solid var(--bg-2)} .status-button{flex:1;min-width:0;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px} .status-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .status-chevron{opacity:.7} .sheet-actions .shop-toggle{min-height:48px;padding:0 1.2rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:700} .sheet-actions .shop-toggle::after{content:"▾";margin-left:.35rem;font-weight:500} .status-picker{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center} .status-picker-backdrop{position:absolute;inset:0;background:rgb(var(--shadow-rgb)/.45)} .status-picker-panel{position:relative;width:min(420px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;padding:1rem;border-radius:18px;background:var(--surface);box-shadow:var(--shadow)} .status-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.8rem} .status-picker-head .eyebrow{margin-bottom:.2rem} .status-picker-head h3{margin:0;font-size:1.2rem;line-height:1.2} .status-options{display:grid;gap:.5rem} .status-option{display:flex;align-items:center;gap:.8rem;width:100%;min-height:60px;padding:.6rem .8rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left} .status-option:hover{border-color:var(--accent-line)} .status-option.on{border:2px solid var(--accent);background:var(--accent-soft);padding:calc(.6rem - 1px) calc(.8rem - 1px)} .status-option:disabled{opacity:.6} .status-option-icon{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--bg-2);color:var(--accent-strong)} .status-option.on .status-option-icon{background:var(--surface)} .status-option-text{flex:1;display:grid;gap:.1rem;min-width:0} .status-option-text strong{font-size:.95rem} .status-option-text span{font-size:.8rem;color:var(--muted)} .status-option-check{color:var(--accent-strong)} .status-option svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Book editor: the cover at the top, with its candidates below. */ .edit-cover{display:flex;align-items:center;gap:1rem;margin:.9rem 0 .6rem} .edit-cover-current{position:relative;flex:0 0 72px;aspect-ratio:2/3;border-radius:7px;overflow:hidden;background:var(--bg-2)} .edit-cover-current .book-fallback,.edit-cover-current .recommendation-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .edit-cover-current .book-fallback{display:grid;place-items:center} .edit-cover-text{flex:1;min-width:0} .edit-cover-text .hint{margin:.1rem 0 .5rem} .edit-cover-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .edit-cover-actions .secondary{padding:.55rem .9rem} #edit-form .cover-choices{margin:0 0 1.2rem} .cover-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .7rem} .cover-choices>.empty,.cover-choices>.recommendations-status{grid-column:1/-1} .cover-choice{display:flex;flex-direction:column;gap:.25rem;min-width:0;padding:.35rem;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ink);text-align:left} .cover-choice.selected{border-color:var(--accent);background:var(--accent-soft)} .cover-choice-image{display:block;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--bg-2)} .cover-choice-image img{width:100%;height:100%;object-fit:cover;display:block} .cover-choice-badge{align-self:flex-start;margin-top:.15rem;padding:.1rem .45rem;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font-size:.68rem;font-weight:700} .cover-choice-badge.edition{background:var(--accent-soft);color:var(--accent-strong)} .cover-choice-note,.cover-choice-source{font-size:.72rem;line-height:1.25;color:var(--muted);overflow-wrap:anywhere} .cover-choice-note{color:var(--ink-2)} /* Add a book: after a match, catalog details fold into a card; your copy's fields stay open. */ .book-matched :is(#book-catalog-fields,#book-more){display:none} .book-match{display:flex;align-items:center;gap:.9rem;margin:.4rem 0 1rem;scroll-margin-top:6.5rem;padding:.8rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft)} .book-match-cover{position:relative;flex:0 0 64px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--bg-2)} .book-match-cover .book-fallback,.book-match-cover .recommendation-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .book-match-cover .book-fallback{display:grid;place-items:center} .book-match-text{flex:1;min-width:0;display:grid;gap:.15rem} .book-match-text strong{font:600 1.05rem/1.2 Fraunces,serif;color:var(--ink);overflow-wrap:anywhere} .book-match-text>span{font-size:.86rem;color:var(--ink-2)} .book-match-text .hint{margin:0;font-size:.78rem} .book-match .link-button{align-self:flex-start;flex:0 0 auto;white-space:nowrap} .book-match-actions{display:grid;gap:.4rem;flex:none;align-self:flex-start} .book-copy-fields{margin-top:1rem} /* Adding a book by hand: title, author, where and reading first; the rest folded. */ .book-more{margin-top:1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)} .book-more>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;cursor:pointer;list-style:none} .book-more>summary::-webkit-details-marker{display:none} .book-more>summary>span:first-child{display:grid;gap:.1rem;min-width:0} .book-more>summary .hint{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .book-more[open]>summary .settings-chevron{transform:translateY(2px) rotate(225deg)} .book-more>.form-grid{padding:0 1rem 1rem} /* The book is already in the library: say so, and offer the three things that could be meant. */ .book-duplicate{display:grid;gap:.7rem;margin-top:1rem;padding:.9rem 1rem;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft)} .book-duplicate p{margin:0} .book-duplicate-actions{display:flex;flex-wrap:wrap;gap:.5rem} .book-matched .book-copy-fields{margin-top:0} /* Recommend-to-friends panel inside the details sheet. */ .recommend-panel{display:grid;gap:.6rem;margin:1rem 0;padding:.9rem 1rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft)} .recommend-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem} .recommend-panel-head strong{display:flex;align-items:center;gap:.45rem} .recommend-panel-head svg{width:16px;height:16px;fill:var(--fox)} .recommend-panel p{margin:0;font-size:.86rem;color:var(--ink-2)} .recommend-panel .quote{font-style:italic} .recommend-panel .avatar{background:var(--surface)} .recommend-panel textarea{min-height:64px;background:var(--surface)} .recommend-panel-actions{display:flex;flex-wrap:wrap;gap:.5rem} .recommend-panel-actions button{padding:.55rem .85rem;font-size:.85rem} /* ---- Similar books, wishlist and friends' picks share one card ----------------------------- */ .recommendations-section{margin-top:1.25rem;padding-top:1.2rem;border-top:1px solid var(--line)} .recommendations-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.85rem} .recommendations-heading .eyebrow{margin-bottom:.2rem} #recommendations-title{white-space:nowrap} .recommendations-heading-side{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.35rem .6rem} .recommendations-heading-side>span{color:var(--muted);font:500 10px 'DM Mono',monospace;white-space:nowrap} .recommendations-refresh{display:inline-flex;align-items:center;gap:.3rem;min-height:32px;padding:.35rem .65rem;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink-2);font-size:.74rem;font-weight:700} .recommendations-refresh:hover{background:var(--bg-2);color:var(--ink)} .recommendations-refresh svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .recommendations-refresh:disabled svg{animation:gemini-spin .8s linear infinite} .recommendations-status{min-height:90px;display:flex;align-items:center;justify-content:center;padding:1rem;border-radius:var(--radius);background:var(--bg);color:var(--muted);text-align:center} .recommendations-status p{margin:0;font-size:.85rem} .author-books-more{display:block;width:100%;margin-top:.8rem} .recommendation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;min-height:120px} .recommendation-card{position:relative;min-width:0;padding:.75rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);display:flex;flex-direction:column;align-items:flex-start} /* Owned / on-wishlist state sits in the card's top-right corner instead of a line of its own. */ .card-status{display:inline-flex;align-items:center;gap:.25rem;padding:.18rem .5rem .18rem .4rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:.68rem;font-weight:700;line-height:1.2;white-space:nowrap} .recommendation-card>.card-status{position:absolute;top:.6rem;right:.6rem;z-index:1} .card-status svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .card-status.wished{background:color-mix(in srgb,var(--fox) 16%,var(--surface));color:color-mix(in srgb,var(--fox) 72%,var(--ink))} .card-status.wished svg{fill:currentColor;stroke:none} .has-status .recommendation-open .recommendation-copy,.has-status .feed-from{padding-right:5.4rem} /* Catalog header: back/close on top, the status pill tucked underneath at the bottom right. */ .details-top-actions.stacked{flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;gap:.9rem} .details-nav{display:flex;gap:.4rem} #wishlist-grid .recommendation-card,.feed .recommendation-card{background:var(--surface)} .recommendation-open{display:flex;align-items:flex-start;gap:.7rem;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit} .recommendation-cover-frame{position:relative;display:block;width:64px;flex:0 0 64px;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--bg-2)} .recommendation-fallback{align-items:center;justify-content:center;padding:.6rem} .recommendation-cover{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;opacity:0} .recommendation-cover.loaded{opacity:1} .recommendation-copy{min-width:0;padding-top:.1rem} .recommendation-copy strong{display:-webkit-box;overflow:hidden;color:var(--ink);font:600 .9rem/1.25 Fraunces,serif;-webkit-box-orient:vertical;-webkit-line-clamp:2} .recommendation-copy .recommendation-author{display:block;margin-top:.2rem;color:var(--ink-2);font-size:.76rem;line-height:1.3} .recommendation-reason{margin:.55rem 0 .4rem;color:var(--ink-2);font-size:.76rem;line-height:1.35} .recommendation-badge{display:inline-block;border-radius:999px;background:var(--accent-soft);color:var(--ink);font-size:.68rem;font-weight:700;padding:.2rem .5rem;margin-bottom:.4rem} .recommendation-actions{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.2rem} .recommendation-actions button,.recommendations-status button{border:0;border-radius:7px;background:var(--bg-2);color:var(--ink);font-size:.72rem;font-weight:700;padding:.42rem .6rem;min-height:32px} .recommendation-actions button:hover,.recommendations-status button:hover{background:var(--accent);color:var(--on-accent)} .recommendation-actions .shop-toggle::after{content:"▾";margin-left:.3rem;font-weight:500} .reading-card{overflow:hidden;padding-bottom:.9rem} .reading-card .recommendation-open{min-height:96px} .reading-card .recommendation-actions{width:100%;align-items:center} .reading-card .recommendation-actions .reading-page-position{display:inline-flex;align-items:baseline;gap:.22rem;max-width:7rem;min-height:36px;margin-left:auto;padding:.25rem .1rem;border:0;border-bottom:1px solid var(--accent-line);border-radius:0;background:transparent;color:var(--accent-strong);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:pointer} .reading-card .recommendation-actions .reading-page-position:hover,.reading-card .recommendation-actions .reading-page-position:focus-visible{border-bottom-color:var(--accent);background:transparent;color:var(--ink);outline-offset:2px} .reading-page-kicker{color:var(--ink-2);font-size:.7rem;font-weight:600} .reading-page-number{font:700 1.1rem/1 Fraunces,serif} .reading-page-total{font-size:.7rem;font-weight:600} .reading-progress-fields{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:end;gap:.4rem} .reading-progress-fields label{display:grid;gap:.3rem;min-width:0;font-weight:600} .reading-progress-fields input{width:100%;min-width:0;padding-inline:.55rem;font-variant-numeric:tabular-nums} .reading-progress-slash{align-self:end;padding-bottom:.6rem;color:var(--ink-2);font:600 1.1rem Fraunces,serif} .reading-progress-fields button{min-height:44px;padding:.5rem .7rem} .reading-progress-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--bg-2)} .reading-progress-line::before{content:"";display:block;width:var(--reading-progress);height:100%;background:var(--accent)} .recommendation-skeleton{height:130px;border-radius:var(--radius);background:linear-gradient(90deg,var(--bg-2),var(--bg),var(--bg-2));background-size:200% 100%;animation:recommendation-pulse 1.3s ease-in-out infinite} @keyframes recommendation-pulse{to{background-position:-200% 0}} .recommendation-detail-cover{float:left;width:100px;max-height:150px;object-fit:cover;border-radius:7px;margin:0 1rem .6rem 0} .recommendation-series-title{grid-column:1/-1;margin:.45rem 0 0;color:var(--ink);font:600 1rem Fraunces,serif} .wishlist-share-panel{display:grid;gap:1rem;margin-bottom:1.4rem} .wishlist-share-panel .hint{margin:.15rem 0 0;max-width:460px} .wishlist-share-panel{gap:.7rem} .share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} .share-head h3{margin:0} .toggle-wrap{position:relative;flex:0 0 auto;padding-top:.2rem} /* Status tooltip under the toggle: fades in on change and out after a moment. */ .toggle-tip{position:absolute;z-index:5;top:calc(100% + 10px);right:-4px;width:max-content;max-width:min(260px,70vw);padding:.5rem .7rem;border-radius:8px;background:var(--ink);color:var(--bg);font-size:.8rem;font-weight:600;line-height:1.3;box-shadow:var(--shadow);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s ease,transform .18s ease} .toggle-tip::before{content:"";position:absolute;top:-5px;right:18px;width:10px;height:10px;background:inherit;transform:rotate(45deg)} .toggle-tip.show{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.toggle-tip{transition:none}} /* A toggle switch built on a real checkbox, so it keeps keyboard and screen reader behaviour. */ .switch{appearance:none;-webkit-appearance:none;flex:0 0 auto;position:relative;width:48px;height:28px;margin:0;padding:0;border:0;border-radius:999px;background:var(--line-strong);cursor:pointer;transition:background-color .18s ease} .switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.25);transition:transform .18s ease} .switch:checked{background:var(--accent)} .switch:checked::after{transform:translateX(20px)} .switch:disabled{opacity:.6} .friend-wishlist-link{display:flex;align-items:center;gap:.7rem;width:100%;margin-top:.7rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-weight:600;text-align:left} .friend-wishlist-link svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--fox);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .friend-wishlist-link>span:first-of-type{flex:1;display:grid} .friend-wishlist-link .hint{margin:0;font-weight:400;font-size:.78rem} .wishlist-share-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .wishlist-share-controls input{width:auto;min-width:220px;max-width:320px;font:12px 'DM Mono',monospace;background:var(--bg)} .privacy-settings{display:grid;gap:1rem} .privacy-settings>div+div{padding-top:1rem;border-top:1px solid var(--line)} .privacy-settings .wishlist-share-controls{margin:.55rem 0 0} .privacy-settings>.hint{margin:0} /* Shop menu: anchored to its button with CSS anchor positioning where available (placed before the first paint, follows the button while the sheet scrolls, flips when there's no room); static/shop.js positions it in browsers without it. */ .shop-menu{position:fixed;inset:auto;margin:6px 0;width:230px;padding:.4rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;position-visibility:anchors-visible;opacity:0;transform:scale(.97);transition:opacity .14s ease,transform .14s ease,overlay .14s allow-discrete,display .14s allow-discrete} .shop-menu:popover-open{display:grid;gap:.1rem;opacity:1;transform:none} @starting-style{.shop-menu:popover-open{opacity:0;transform:scale(.97)}} .shop-menu.shop-menu-placing{visibility:hidden} .shop-menu-label{margin:0;padding:.3rem .55rem .4rem;font:500 11px 'DM Mono',monospace;letter-spacing:.11em;color:var(--accent-strong)} .shop-menu a{display:grid;gap:.05rem;padding:.5rem .55rem;border-radius:8px;color:var(--ink);text-decoration:none} .shop-menu a strong{font-size:.85rem} .shop-menu a strong::after{content:" ↗";font-weight:500;color:var(--muted)} .shop-menu a span{font-size:.74rem;color:var(--muted)} .shop-menu a:hover,.shop-menu a:focus-visible{background:var(--bg-2)} /* ---- Friends ------------------------------------------------------------------------------- */ .friends-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;max-width:860px} .friends-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap} .friend-filter{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none} .friend-filter::-webkit-scrollbar{display:none} .friend-filter button{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem .3rem .3rem;background:var(--surface);color:var(--ink-2);font-size:.78rem;font-weight:700;min-height:36px} .friend-filter button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .friend-filter button.all{padding-left:.75rem} .avatar{display:inline-grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font:600 .8rem Fraunces,serif;text-transform:uppercase} .avatar.large{width:40px;height:40px;font-size:1rem} .avatar[data-person]{cursor:pointer} /* A profile photo fills the circle; the initial shows until there is one. */ .avatar.has-photo,.avatar-button.has-photo,.admin-avatar.has-photo{overflow:hidden;background:var(--bg-2)} .avatar img,.avatar-button img,.admin-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} /* Positioning a new profile photo: it moves under a circle; outside the circle is dimmed. */ #photo-dialog{max-width:420px} .photo-crop{padding:1rem} .crop-stage{position:relative;width:min(300px,100%);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:12px;background:#000;touch-action:none;cursor:grab;user-select:none} .crop-stage:active{cursor:grabbing} .crop-stage::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgb(0 0 0/.55);outline:2px solid rgb(255 255 255/.85);pointer-events:none} .crop-image{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none} .crop-zoom{display:flex;align-items:center;gap:.7rem;width:min(300px,100%);margin:0 auto;font-weight:700;color:var(--muted)} .crop-zoom input{flex:1;accent-color:var(--accent-strong)} .crop-hint{margin:0;text-align:center} .import-preview{display:grid;gap:.7rem;padding:.9rem;border-radius:12px;background:var(--surface-2)} .import-preview p{margin:0} .check-row{display:flex;align-items:flex-start;gap:.6rem;font-weight:600} .check-row input{width:20px;height:20px;margin-top:.1rem;flex:none;accent-color:var(--accent-strong)} .check-row small{display:block;font-weight:400;color:var(--ink-2);font-size:.82rem} .photo-picker{display:flex;align-items:center;gap:1rem;margin-bottom:1rem} .photo-picker .account-actions{align-items:center} .feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem} .feed-from{display:flex;align-items:center;gap:.45rem;margin:0 0 .6rem;color:var(--muted);font-size:.76rem;width:100%} .feed-from strong{color:var(--ink);font-weight:700} .feed-from time{margin-left:auto;font:500 10px 'DM Mono',monospace;white-space:nowrap} .feed-note{position:relative;margin:.6rem 0 .5rem;padding:.1rem 0 .1rem .75rem;border-left:3px solid var(--fox);color:var(--ink);font-size:.84rem;line-height:1.4;font-style:italic} .people-panel{display:grid;gap:1rem} .people-panel h3{font-size:1.1rem} .invite-actions{display:flex;flex-wrap:wrap;gap:.5rem} .add-friend-form{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:end} .person-list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem} .person-row{display:flex;align-items:center;gap:.7rem;padding:.6rem .1rem;border-bottom:1px solid var(--bg-2)} .person-row:last-child{border-bottom:0} .person-row .person-text{flex:1;min-width:0} .person-row .person-text strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .person-row .person-text span{color:var(--muted);font-size:.78rem} .person-row .row-actions{display:flex;gap:.35rem;flex:0 0 auto} .person-row .row-actions button{padding:.45rem .7rem;font-size:.78rem;border-radius:7px} .friend-card{padding:.55rem 0;border-bottom:1px solid var(--bg-2)} .friend-card:last-child{border-bottom:0} .friend-card-head{display:flex;align-items:center;gap:.5rem} .friend-card-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:.65rem;padding:.15rem 0;border:0;background:none;color:var(--ink);text-align:left} .friend-card-toggle strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .friend-card .chevron{flex:0 0 auto;color:var(--muted);font-size:1.2rem;line-height:1;transition:transform .15s ease} .friend-card.open .chevron{transform:rotate(90deg)} .friend-card .row-actions{display:flex;gap:.35rem;flex:0 0 auto} .friend-card .row-actions button{padding:.42rem .65rem;font-size:.78rem;border-radius:7px} .friend-card-body{display:grid;gap:.55rem;justify-items:start;padding:.65rem 0 .2rem calc(40px + .65rem)} .friend-facts{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0} .friend-facts dt{font:500 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .friend-facts dd{margin:.1rem 0 0;font-size:.86rem} .danger-link{color:var(--danger)} .section-label{margin:.2rem 0 .1rem;font:500 11px 'DM Mono',monospace;letter-spacing:.1em;color:var(--muted);text-transform:uppercase} .invite-link-row{display:flex;gap:.5rem;align-items:center} .invite-link-row input{font:12px 'DM Mono',monospace;background:var(--bg)} .form-success{margin:0;color:var(--accent-strong);font-weight:600;font-size:.9rem} .form-success:empty,#forgot-form .form-error:empty{display:none} .forgot-link{justify-self:center;font-size:.88rem} .notice{margin:0;padding:.7rem .9rem;border-radius:var(--radius);font-weight:600;font-size:.9rem} .discover-notice{margin-bottom:1rem;background:var(--surface-2);color:var(--ink-2);font-weight:500} .notice.ok{background:var(--accent-soft);color:var(--ink)} .notice.error{background:var(--danger-soft);color:var(--danger)} /* ---- Appearance ---------------------------------------------------------------------------- */ .theme-modes{margin-bottom:.9rem} .theme-mode-note{margin:-.4rem 0 .9rem} .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;max-width:860px} .theme-option{display:grid;gap:.55rem;padding:.55rem;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left} .theme-option.active{border-color:var(--accent-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)} .theme-option-name{display:flex;align-items:center;justify-content:space-between;padding:0 .2rem .1rem;font-weight:700;font-size:.9rem} .theme-option-name span{color:var(--muted);font-weight:500;font-size:.72rem} .theme-preview{display:grid;grid-template-rows:1fr 16px;height:108px;overflow:hidden;border-radius:9px;background:var(--bg);border:1px solid var(--line)} .theme-preview-body{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:9px} .theme-preview-body i{display:block;border-radius:3px;background:var(--bg-2)} .theme-preview-body i:nth-child(2){background:var(--accent)} .theme-preview-body i:nth-child(3){background:var(--surface);border:1px solid var(--line)} .theme-preview-bar{background:var(--chrome);display:flex;justify-content:space-around;align-items:center} .theme-preview-bar b{width:10px;height:4px;border-radius:2px;background:var(--chrome-ink)} .theme-preview-bar b:first-child{background:var(--chrome-accent)} .theme-preview.split{grid-template-rows:1fr;background:none;border:0;grid-template-columns:1fr 1fr;gap:0} .theme-preview.split>div{display:grid;grid-template-rows:1fr 16px;background:var(--bg);border:1px solid var(--line)} .theme-preview.split>div:first-child{border-radius:9px 0 0 9px} .theme-preview.split>div:last-child{border-radius:0 9px 9px 0} /* ---- Install and offline -------------------------------------------------------------------- */ .install-banner{position:relative;display:flex;align-items:center;gap:.7rem;max-width:760px;margin:0 0 .8rem;padding:.65rem .65rem .65rem .75rem;border:1px solid var(--accent-line);border-radius:14px;background:var(--accent-soft)} /* Offered on the Library only: elsewhere it pushed each tab's content down a fifth of the screen. */ body[data-view]:not([data-view="shelf"]) .install-banner{display:none} .install-banner img{width:40px;height:40px;border-radius:10px;flex:0 0 auto} .install-banner-text{flex:1;min-width:0;display:grid;gap:.1rem} .install-banner strong{font-size:.92rem} .install-banner-text span{font-size:.78rem;color:var(--ink-2);line-height:1.3} .install-banner-actions{display:flex;gap:.4rem;flex:0 0 auto} .install-banner .primary,.install-banner .secondary{padding:.5rem .85rem;font-size:.85rem;text-decoration:none;white-space:nowrap} .install-banner .icon-button{width:32px;height:32px;min-width:32px;font-size:1.1rem;background:transparent} /* The notifications offer is the same card, with a bell where the app icon goes. */ .notify-banner-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;flex:0 0 auto;background:var(--accent);color:var(--on-accent)} .notify-banner-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* Computers: a fuller card in the sidebar's colours. */ @media(min-width:761px){ /* The editor scrolls itself (as on a phone), so its header stays put with Save in reach. */ .edit-form,.filter-sheet{max-height:calc(100dvh - 2em - 6px);overflow:auto} .filter-sheet .modal-header,.edit-form .edit-header{position:sticky;top:-1.5rem;z-index:3;margin:-1.5rem -1.5rem 0;padding:1.5rem 1.5rem .8rem;background:var(--surface);border-bottom:1px solid var(--bg-2)} .install-banner{gap:1.1rem;max-width:880px;margin:0 0 1.4rem;padding:1.1rem 3rem 1.1rem 1.1rem;border:0;border-radius:16px;background:var(--chrome);color:var(--chrome-ink-strong);box-shadow:0 10px 30px rgb(var(--shadow-rgb)/.18)} .install-banner img{width:56px;height:56px;border-radius:14px;box-shadow:0 2px 8px rgb(0 0 0/.25)} .notify-banner-icon{width:56px;height:56px;border-radius:14px;box-shadow:0 2px 8px rgb(0 0 0/.25)} .notify-banner-icon svg{width:28px;height:28px} .install-banner strong{font:600 1.2rem/1.2 Fraunces,serif;color:var(--chrome-ink-strong)} .install-banner-text span{font-size:.88rem;color:var(--chrome-ink);line-height:1.4} .install-banner .primary{padding:.62rem 1.1rem;font-size:.9rem;border-radius:999px} .install-banner .secondary{padding:.62rem 1.1rem;font-size:.9rem;border-radius:999px;background:var(--chrome-2);color:var(--chrome-ink-strong)} .install-banner .secondary:hover{background:color-mix(in srgb,var(--chrome-2) 80%,#fff)} .install-banner .icon-button{position:absolute;top:.5rem;right:.5rem;color:var(--chrome-ink)} .install-banner .icon-button:hover{background:var(--chrome-2);color:var(--chrome-ink-strong)} } .install-steps{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;counter-reset:step} .install-steps li{display:flex;align-items:center;gap:.8rem;padding:.75rem;border-radius:var(--radius);background:var(--bg);font-size:.92rem} .install-steps li>span:last-child{display:block;line-height:1.4} .install-steps .hint{display:block;margin:.15rem 0 0;font-size:.78rem} .install-step-icon{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:#0a84ff} .install-step-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .install-step-icon circle{fill:currentColor;stroke:none} .install-step-icon img{width:30px;height:30px;border-radius:7px} .offline-notice{margin:0 0 .8rem;padding:.55rem .8rem;border-radius:var(--radius);background:var(--danger-soft);color:var(--danger);font-size:.84rem;font-weight:600} /* ---- Account and admin --------------------------------------------------------------------- */ .account-layout{display:grid;gap:1rem;max-width:760px} .account-panel{display:grid;gap:1rem} /* Settings → Account: one list of rows; each opens in place, so settings never become a long scroll. */ .panel.settings-list{display:grid;padding:0;overflow:hidden} .settings-row{border-top:1px solid var(--line)} .settings-row:first-child{border-top:0} .settings-row>summary,.settings-switch-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1.1rem;cursor:pointer;list-style:none} .settings-switch-row{cursor:default} .settings-row>summary::-webkit-details-marker{display:none} .settings-row>summary>span:first-child,.settings-switch-row>span:first-child{display:grid;gap:.15rem;min-width:0} .settings-row .hint{margin:0;overflow-wrap:anywhere} .settings-chevron{flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .18s ease} .settings-row[open]>summary .settings-chevron{transform:translateY(2px) rotate(225deg)} .settings-row>summary:hover{background:var(--bg)} .settings-body{padding:0 1.1rem 1.1rem} .switch{flex:none;position:relative;width:46px;height:28px;min-height:0;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background-color .18s ease} .switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.25);transition:transform .18s ease} .switch[aria-checked="true"]{background:var(--accent-strong)} .switch[aria-checked="true"]::after{transform:translateX(18px)} .switch:disabled{opacity:.6} .account-panel h3,.admin-summary h3{margin:0 0 .2rem} .account-actions{display:flex;flex-wrap:wrap;gap:.5rem} .method-block{display:grid;gap:.8rem;padding-top:1rem;border-top:1px solid var(--line)} .account-panel>.method-row{padding-top:1rem;border-top:1px solid var(--line)} .method-row{display:flex;align-items:center;justify-content:space-between;gap:1rem} .method-row .hint{margin:.15rem 0 0} .method-row>button{flex:0 0 auto} .method-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem} .method-list .method-row{padding:.65rem .8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)} .password-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;align-items:end} .account-notice{margin:0;min-height:0;font-weight:600;font-size:.9rem} .account-notice.ok{padding:.7rem .9rem;border-radius:var(--radius);background:var(--accent-soft);color:var(--ink)} .account-notice.error{padding:.7rem .9rem;border-radius:var(--radius);background:var(--danger-soft);color:var(--danger)} .admin-summary{display:grid;gap:.8rem;margin-bottom:1rem} .admin-summary .eyebrow,.admin-summary .hint{margin:0} .admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem} .admin-stat{display:grid;gap:.1rem;padding:.7rem .85rem;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line)} .admin-stat strong{font-size:1.5rem;line-height:1.1} .admin-stat span{font-size:.8rem;color:var(--muted)} .admin-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem} .admin-search{flex:1 1 220px;max-width:none} .admin-filters{overflow-x:auto;scrollbar-width:none} .admin-filters button{white-space:nowrap} .admin-count{font:500 11px 'DM Mono',monospace;color:var(--muted)} .admin-dev{margin-top:1rem;padding:.8rem 1rem} .admin-dev>summary{display:flex;align-items:baseline;gap:.6rem;cursor:pointer;list-style:none;font-size:.9rem} .admin-dev>summary::-webkit-details-marker{display:none} .admin-dev>summary .hint{margin:0;font-size:.8rem} .admin-dev .account-actions{margin-top:.7rem} .admin-dev .secondary{padding:.45rem .8rem;font-size:.85rem} .admin-sort{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--muted);white-space:nowrap} .admin-sort select{width:auto;padding:.5rem .6rem} #admin-notice{margin-bottom:1rem} #admin-notice:empty{display:none} .admin-list{display:grid;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden} .admin-list>.empty{border:0;border-radius:0} .admin-user+.admin-user{border-top:1px solid var(--line)} .admin-user.is-disabled .admin-user-row{opacity:.7} .admin-user-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.8rem;padding:.75rem 1rem;cursor:pointer;list-style:none} .admin-user-row::-webkit-details-marker{display:none} .admin-user-row:hover{background:var(--surface-2)} .admin-user[open]>.admin-user-row{background:var(--surface-2)} .admin-avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-weight:700} .admin-user-name{min-width:0} .admin-user-name .badge{vertical-align:.1em} .admin-user-name .hint{display:block;margin:.1rem 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admin-user-meta{display:grid;justify-items:end;gap:.1rem;font-size:.82rem;color:var(--ink-2);text-align:right;white-space:nowrap} .admin-user-meta span+span{color:var(--muted)} .admin-chevron{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 .2rem .2rem;transition:transform .15s ease} .admin-user[open] .admin-chevron{transform:rotate(-135deg);margin:.2rem .2rem 0} .admin-user-body{display:grid;gap:1rem;padding:1rem 1rem 1.1rem;border-top:1px solid var(--line)} .admin-groups{display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:1rem 2.5rem} .admin-group-label{margin:0 0 .45rem;font:500 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-strong)} .admin-facts{display:grid;gap:.35rem;margin:0} .admin-facts>div{display:flex;justify-content:space-between;gap:.8rem} .admin-facts dt{font-size:.82rem;color:var(--muted)} .admin-facts dd{margin:0;font-size:.85rem;text-align:right} .admin-methods{display:flex;flex-wrap:wrap;gap:.35rem;margin:0} .admin-methods .badge{margin:0} .admin-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.45rem;padding-top:.9rem;border-top:1px dashed var(--line)} .admin-actions-main{display:flex;flex-wrap:wrap;gap:.45rem} .admin-actions button{padding:.5rem .75rem;font-size:.82rem} .admin-actions .hint{margin:0} @media(max-width:760px){ .admin-user-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.7rem .8rem} .admin-groups{grid-template-columns:1fr} .admin-user-meta{grid-column:2;grid-row:2;display:flex;gap:.3rem;justify-items:start} .admin-user-meta span+span::before{content:"· ";} .admin-chevron{grid-column:3;grid-row:1/3} .admin-sort{flex:1 1 auto} .admin-sort select{flex:1} .admin-actions{flex-direction:column;align-items:stretch} } @media(prefers-reduced-motion:reduce){.admin-chevron{transition:none}} .admin-reset label{font-size:.82rem;color:var(--ink-2)} .admin-reset-row{display:flex;gap:.5rem;margin-top:.4rem} .admin-reset-row input{font:12px 'DM Mono',monospace} /* ---- Phones -------------------------------------------------------------------------------- */ /* New release ready: a small bar above the tab bar (phones) or at the bottom right. */ .update-bar{position:fixed;right:1.2rem;bottom:1.2rem;z-index:40;display:flex;align-items:center;gap:.7rem;max-width:min(420px,calc(100vw - 2rem));padding:.6rem .6rem .6rem 1rem;border-radius:14px;background:var(--chrome);color:var(--chrome-ink-strong);box-shadow:0 10px 30px rgb(0 0 0/.3);font-size:.9rem} .update-bar .primary{padding:.5rem .9rem;border-radius:999px} .update-bar .icon-button{width:34px;height:34px;min-width:34px;background:transparent;color:var(--chrome-ink);font-size:1.1rem} /* ---- Navigation: Library · Discover · ＋ · Lists · Friends, settings behind the avatar ------- */ .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .nav-add{margin:.5rem 0;background:var(--accent);color:var(--on-accent)} .nav-add:hover{background:var(--accent-hover);color:var(--on-accent)} .avatar-button{width:40px;height:40px;border:0;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font:600 1.05rem Fraunces,serif;display:grid;place-items:center} .header-actions .avatar-button{display:grid;place-items:center;padding:0;line-height:1;gap:0} .avatar-button:hover,.avatar-button[aria-expanded="true"]{background:var(--accent-line)} .toolbar{gap:.5rem} #library-menu-button{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px} #library-menu-button svg,.library-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #library-menu-button svg{fill:currentColor} .library-menu{width:max-content;min-width:200px;max-width:calc(100vw - 2rem)} .library-menu button{display:flex;align-items:center;gap:.6rem;width:100%;white-space:nowrap;min-height:42px;padding:.5rem .6rem;border:0;border-radius:8px;background:transparent;color:var(--ink);font-weight:600;text-align:left} .library-menu button:hover,.library-menu button:focus-visible{background:var(--bg-2)} .library-menu-separator{height:1px;margin:.25rem .4rem;background:var(--line)} .library-menu [data-library-go="attention"] .attention-badge{margin-left:auto} .filter-chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;margin:0 0 1rem;padding:2px 0} /* Library: Sort and filter. The button's count, what's on as pills that wrap, and the sheet. */ .filter-button{position:relative;display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px} .filter-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .filter-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent-strong);color:var(--surface);font-size:.7rem;font-weight:700;line-height:18px;text-align:center} .filter-count[hidden]{display:none} .kind-switch{display:flex;gap:.3rem;margin:0 0 .8rem;padding:.25rem;border-radius:999px;background:var(--bg-2)} .kind-switch[hidden]{display:none} .kind-switch button{flex:1;min-width:0;min-height:36px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-weight:700;font-size:.85rem;white-space:nowrap} .kind-switch button span{margin-left:.3rem;font-size:.75rem;opacity:.6} .kind-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 3px rgb(var(--shadow-rgb)/.18)} .kind-switch button[aria-pressed="true"] span{opacity:.75} .active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0 0 1rem} .active-filters[hidden]{display:none} .active-filter span{margin-left:.2rem;font-size:1.05rem;line-height:1} .active-filters .link-button{margin-left:.2rem;font-size:.85rem} .filter-sheet{gap:0} .filter-group{display:grid;gap:.65rem;padding:1rem 0;border-bottom:1px solid var(--line)} .filter-group:last-of-type{border-bottom:0} .filter-group h3{font-size:1.02rem} .filter-group h3 span{margin-left:.3rem;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--muted)} .filter-choices{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem} .filter-choices .link-button{font-size:.85rem} .filter-choice-count{margin-left:.35rem;font-size:.75rem;opacity:.6} .filter-chips::-webkit-scrollbar{display:none} .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;min-height:36px;padding:0 .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:.84rem;font-weight:600} .chip:hover{border-color:var(--accent-line)} .chip.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .chip.active .filter-choice-count{opacity:.75} .chip-select{padding:0 .3rem 0 .8rem} .chip-select select{field-sizing:content;width:auto;min-width:0;max-width:11rem;padding:.3rem .2rem;border:0;background:transparent;color:inherit;font:inherit} .chip-select.active select option{color:var(--ink);background:var(--surface)} /* Wide screens: a grid that fills the width (one book spans it all). Phones: see the media query. */ .discover-cover .book-fallback{display:grid;place-items:center} .lists-tabs{margin-bottom:1rem} /* Read: one compact row per book, grouped by year. */ .read-year+.read-year{margin-top:1.4rem} .read-year h3{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .5rem;font-size:1.15rem} .read-year h3 .hint{font:500 11px 'DM Mono',monospace;letter-spacing:.06em} .read-rows{list-style:none;margin:0;padding:0;display:grid;gap:.35rem} .read-row{display:flex;align-items:center;gap:.8rem;width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-align:left} .read-row:hover{background:var(--bg-2)} .read-row-cover{position:relative;flex:0 0 auto;width:38px;aspect-ratio:2/3;border-radius:4px;overflow:hidden;background:var(--bg-2)} .read-row-cover>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .read-row-text{flex:1;min-width:0;display:grid} .read-row-text strong{font-family:Fraunces,serif;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .read-row-text span{color:var(--ink-2);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .read-row time{flex:0 0 auto;font:500 11px 'DM Mono',monospace;color:var(--muted)} .recommendation-actions svg{width:14px;height:14px;margin-right:.3rem;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lists-hint{margin:0 0 .8rem} /* ---- Discover ----------------------------------------------------------------------------- */ .discover-row{margin:0 0 1.6rem} .discover-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem} .discover-toolbar .discover-tabs{margin-bottom:0} .discover-for-you{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.2rem} .discover-for-you h3{margin:0;font-size:1.2rem} #discover-friends:not(:empty){padding-bottom:1.1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)} #discover-friends .discover-row{margin-bottom:0} #discover-friends .discover-card{flex-basis:92px;width:92px;max-width:92px} #discover-friends .discover-cover{width:92px} #discover-friends .discover-row-head h3{font-size:1rem} #discover-refresh{font-size:.8rem;white-space:nowrap;padding:.5rem .7rem} .insight-added{width:min(100%,560px);margin:.4rem 0 1.35rem} .insight-added-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:.55rem} .insight-added-count{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;min-width:0;min-height:82px;padding:.65rem .8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer} .insight-added-count:hover,.insight-added-count:focus-visible,.insight-added-count[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line)} .insight-added-count strong{font:600 1.65rem/1 Fraunces,serif} .insight-added-count span{color:var(--ink-2);font-size:.72rem;font-weight:600;white-space:nowrap} .insight-added .insight-books{width:100%;margin:.5rem 0 0} .insight-card{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;width:min(100%,480px);margin:.5rem 0 1rem;padding:1.2rem 1.35rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft);color:var(--ink);text-align:left;cursor:pointer} .insight-card:hover,.insight-card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line)} .insight-card-kicker{color:var(--accent-strong);font:700 .68rem 'DM Mono',monospace;letter-spacing:.1em} .insight-card strong{font:600 clamp(1.7rem,5vw,2.25rem)/1.15 Fraunces,serif} .insight-card>span:last-child{color:var(--ink-2);font-size:.87rem} .insight-card>span:last-child span{margin-left:.3rem;color:var(--accent-strong)} .insight-books{width:min(100%,480px);margin-bottom:1.5rem} .insight-books h3{margin:.3rem 0 .55rem;font-size:1rem} .insight-books button{display:flex;flex-direction:column;gap:.15rem;width:100%;padding:.65rem .1rem;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left} .insight-books button:hover{color:var(--accent-strong)} .insight-books button span{color:var(--muted);font-size:.78rem} .insight-timeline{width:min(100%,560px);padding:1.15rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .insight-timeline h3{margin:.35rem 0 1rem;font:600 clamp(1.25rem,4vw,1.55rem)/1.2 Fraunces,serif} .insight-timeline-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:390px} .insight-timeline-book{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer} .insight-timeline-book:hover strong,.insight-timeline-book:focus-visible strong{color:var(--accent-strong)} .insight-timeline-cover{position:relative;display:block;width:86px;max-width:100%;aspect-ratio:2/3;overflow:hidden;border-radius:6px;background:var(--bg-2);box-shadow:var(--shadow-soft)} .insight-timeline-cover .book-fallback,.insight-timeline-cover .recommendation-cover{position:absolute;inset:0;width:100%;height:100%} .insight-timeline-copy{display:flex;flex-direction:column;gap:.15rem;min-width:0;width:100%} .insight-timeline-label{color:var(--accent-strong);font:700 .65rem 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase} .insight-timeline-copy strong{font-size:.85rem;line-height:1.25;overflow-wrap:anywhere} .insight-timeline-copy>span:last-child{color:var(--muted);font-size:.75rem} .insight-authors{width:min(100%,560px);margin-top:1.4rem} .insight-authors h3{margin:.35rem 0 .65rem;font:600 clamp(1.25rem,4vw,1.55rem)/1.2 Fraunces,serif} .insight-author-group{border-bottom:1px solid var(--line)} .insight-author-stack{display:flex;align-items:center;gap:.85rem;width:100%;min-height:84px;padding:.45rem 0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer} .insight-author-stack:hover .insight-author-copy strong,.insight-author-stack:focus-visible .insight-author-copy strong{color:var(--accent-strong)} .insight-author-covers{position:relative;flex:none;width:82px;height:70px} .insight-author-cover{position:absolute;bottom:0;width:42px;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--surface);border-radius:4px;background:var(--bg-2);box-shadow:var(--shadow-soft)} .insight-author-cover:nth-child(1){left:0;z-index:1;transform:rotate(-6deg)} .insight-author-cover:nth-child(2){left:18px;z-index:2} .insight-author-cover:nth-child(3){left:36px;z-index:3;transform:rotate(6deg)} .insight-author-cover .book-fallback,.insight-author-cover .recommendation-cover{position:absolute;inset:0;width:100%;height:100%} .insight-author-copy{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1} .insight-author-copy strong{font-size:.94rem;overflow-wrap:anywhere} .insight-author-copy>span{color:var(--muted);font-size:.78rem} .insight-author-arrow{padding-right:.2rem;color:var(--accent-strong)} .insight-author-books{margin:0 0 .7rem 97px;width:auto} .insight-series{width:min(100%,560px);margin-top:1.45rem} .insight-series-card{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;width:100%;margin:.5rem 0 .6rem;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer} .insight-series-card:hover,.insight-series-card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line)} .insight-series-card strong{font:600 clamp(1.2rem,4vw,1.5rem)/1.2 Fraunces,serif} .insight-series-card>span{color:var(--ink-2);font-size:.82rem;line-height:1.4} .insight-series-card em{color:var(--ink);font-style:normal;font-weight:700} .insight-series-card>span span{color:var(--accent-strong)} .insight-series .insight-books{width:100%;margin-bottom:.5rem} .insight-thread{width:min(100%,560px);margin-top:1.45rem} .insight-thread-card{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;width:100%;margin:.5rem 0 .6rem;padding:1rem 1.15rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft);color:var(--ink);text-align:left;cursor:pointer} .insight-thread-card:hover,.insight-thread-card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line)} .insight-thread-card strong{font:600 clamp(1.2rem,4vw,1.5rem)/1.2 Fraunces,serif} .insight-thread-card>span{color:var(--ink-2);font-size:.8rem} .insight-thread-card>span span{color:var(--accent-strong)} .insight-thread .insight-books{width:100%;margin-bottom:.5rem} .insight-thread-next{padding:.35rem 0;font-size:.8rem} .discover-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:.7rem} .discover-row-head h3{margin:0;font-size:1.2rem} .discover-row-head em{font-style:italic} .discover-scroll{display:flex;gap:.8rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem} .discover-scroll::-webkit-scrollbar{display:none} .discover-card{flex:0 0 112px;width:112px;min-width:0;max-width:112px;display:flex;flex-direction:column;gap:.25rem;padding:0;border:0;background:transparent;color:var(--ink);text-align:left} .discover-card strong{font-size:.82rem;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .discover-card strong,.discover-card>span:last-child{max-width:100%} .discover-card>span:last-child{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .discover-cover{position:relative;display:block;width:112px;aspect-ratio:2/3;border-radius:7px;overflow:hidden;background:var(--bg-2);box-shadow:0 2px 6px rgb(var(--shadow-rgb)/.14)} .discover-cover .book-fallback,.discover-cover .recommendation-cover{position:absolute;inset:0;width:100%;height:100%} .discover-badge{position:absolute;left:.35rem;bottom:.35rem;z-index:2} .discover-badge .avatar{background:var(--surface);box-shadow:0 1px 4px rgb(0 0 0/.2)} .discover-date{position:absolute;right:.35rem;top:.35rem;z-index:2;padding:.1rem .4rem;border-radius:999px;background:var(--surface);color:var(--ink);font:500 10px 'DM Mono',monospace} .discover-skeleton{flex:0 0 112px;aspect-ratio:2/3;border-radius:7px;background:linear-gradient(90deg,var(--bg-2),var(--surface-2),var(--bg-2));background-size:200% 100%;animation:shimmer 1.3s linear infinite} @keyframes shimmer{to{background-position:-200% 0}} /* ---- Friends: people strip, requests, activity feed, profile and people sheets ------------ */ .avatar.xl{width:52px;height:52px;font-size:1.3rem} .avatar.xxl{width:76px;height:76px;font-size:2rem} .avatar.add{background:transparent;border:1.5px dashed var(--accent);color:var(--accent-strong)} .avatar.add svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} /* Alerts: the bell beside the profile button, and its panel. */ .header-actions{display:flex;align-items:center;gap:.45rem} .header-actions .alerts-button{position:relative;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);display:grid;place-items:center} .alerts-button:hover,.alerts-button[aria-expanded="true"]{background:var(--bg-2);color:var(--ink)} .alerts-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .nav-item .button-icon{position:relative} .nav-badge{position:absolute;top:-6px;left:calc(50% + 4px);min-width:17px;height:17px;padding:0 .3rem;border-radius:999px;background:var(--fox);color:#fff;font-size:.64rem;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--chrome, var(--bg))} .alerts-badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 .3rem;border-radius:999px;background:var(--fox);color:#fff;font-size:.64rem;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--bg)} .alerts-panel{position:fixed;z-index:50;width:min(360px,calc(100vw - 1rem));max-height:min(70vh,560px);overflow:auto;padding:.5rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)} .alerts-title{margin:0;padding:.35rem .5rem .5rem;font:500 11px 'DM Mono',monospace;letter-spacing:.11em;color:var(--accent-strong)} .alerts-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem} .alert-item{position:relative;display:flex;align-items:flex-start;gap:.6rem;width:100%;padding:.6rem .6rem .6rem .75rem;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;font-size:.86rem;line-height:1.4} .alert-item:hover{background:var(--bg-2)} .alert-item.new{background:var(--accent-soft)} .alert-item.new .avatar{background:var(--surface)} .alert-text{flex:1;min-width:0} .alert-quote{display:block;color:var(--ink-2);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .alert-item time{flex:0 0 auto;font:500 10px 'DM Mono',monospace;color:var(--muted);margin-top:.2rem} .alerts-empty{margin:0;padding:.4rem .5rem .7rem;color:var(--muted);font-size:.86rem} .new-dot{position:absolute;top:.5rem;left:.35rem;width:8px;height:8px;border-radius:50%;background:var(--fox);box-shadow:0 0 0 2px var(--accent-soft)} .new-tag{padding:.05rem .4rem;border-radius:999px;background:var(--fox);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.02em} .people-strip{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:none;padding:.2rem 0} .people-strip::-webkit-scrollbar{display:none} .person-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:64px;padding:0;border:0;background:transparent;color:var(--ink);font-size:.78rem;font-weight:600} .person-chip>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .person-chip.invite{color:var(--accent-strong)} .request-card{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;padding:.75rem .9rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--accent-soft)} .request-card .person-text{flex:1;min-width:8rem;display:grid} .request-card .person-text span{color:var(--ink-2);font-size:.8rem} .request-card .row-actions{display:flex;gap:.4rem} .request-card .row-actions button{padding:.5rem .8rem;font-size:.82rem} .activity-feed{display:grid;gap:.7rem} .activity-card{background:var(--surface)} .activity-card .feed-from{margin-bottom:.55rem} .feed-person{display:inline-flex;align-items:center;gap:.45rem;padding:0;border:0;background:none;color:inherit;font:inherit} .feed-person:disabled{cursor:default;opacity:1} .activity-card .recommendation-copy .stars{margin-top:.3rem} .activity-card .recommendation-copy .feed-note{margin:.4rem 0 0} .stars{color:#a07d12;letter-spacing:.06em;font-size:.9rem;white-space:nowrap} .stars span{color:var(--line)} /* Remove friend: a quiet icon beside ×, confirmed before anything happens. */ .quiet-action{display:grid;place-items:center;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)} .quiet-action:hover,.quiet-action:focus-visible,.quiet-action:active{background:color-mix(in srgb,var(--danger) 22%,transparent)} .quiet-action svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .profile-head{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin:-.4rem 0 1rem;text-align:center} .profile-head h2{margin:.35rem 0 0;font-size:1.6rem} .profile-head h2:focus{outline:none} .profile-head .hint{margin:0} /* Keep the horizontal cover rows within the sheet instead of sizing the grid to every cover. */ .in-common{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-bottom:1.2rem} .in-common .discover-row{min-width:0} .profile-head h2,.in-common .discover-row-head h3{overflow-wrap:anywhere} .in-common .discover-row-head h3{font-size:1rem} .in-common .discover-card{flex-basis:84px;width:84px;max-width:84px} .in-common .discover-card strong{font-size:.76rem} .in-common .discover-card>span:last-child{font-size:.7rem} .profile-tabs{width:100%;margin-bottom:1rem} .profile-tabs button{flex:1 1 0;flex-wrap:wrap;justify-content:center;min-width:0;column-gap:.3rem;row-gap:0;padding:.5rem .3rem;font-size:.82rem} .profile-tabs .hint{margin:0;font-size:.72rem} .profile-sheet .notice{margin-bottom:.8rem} .cover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .7rem} .friend-library-tools{display:grid;gap:.55rem;margin:0 0 1rem} .friend-library-tools label{margin:0;min-width:0} .friend-library-tools input,.friend-library-tools select{width:100%;min-width:0;min-height:42px} .friend-library-selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem} .friend-library-selects label:last-child{grid-column:1/-1} .friend-library-count{margin:0;font-size:.8rem} .cover-tile{position:relative;display:flex;flex-direction:column;gap:.25rem;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;min-width:0} /* Placeholder and cover are layered in one 2:3 frame (as on every other card), not stacked. */ .tile-cover{position:relative;display:block;width:100%;aspect-ratio:2/3;border-radius:7px;overflow:hidden;background:var(--bg-2)} .tile-cover .book-fallback,.tile-cover .recommendation-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tile-cover .book-fallback{display:grid;place-items:center} .cover-tile strong{font-size:.8rem;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .cover-tile>span:last-child{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile-flag{position:absolute;top:.35rem;right:.35rem;padding:.1rem .45rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:.66rem;font-weight:700} .people-sheet h2{margin:0 0 1rem} .people-sheet .notice{margin-bottom:.8rem} .people-section{display:grid;gap:.6rem;padding:1rem 0;border-top:1px solid var(--bg-2)} .people-section .eyebrow{margin:0} .people-section .hint{margin:0} .switch-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:400} .switch-row>span{display:grid;gap:.15rem} .switch-row strong{color:var(--ink)} .person-link{width:100%;border:0;border-bottom:1px solid var(--bg-2);background:transparent;color:var(--ink);text-align:left} .person-list li:last-child .person-link{border-bottom:0} /* Lists → Reading: the note after finishing a book. */ .finished-note{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin:0 0 1rem;padding:.9rem 2.6rem .9rem .9rem;border:1px solid var(--accent-line);border-radius:14px;background:var(--accent-soft)} .finished-check{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--accent);color:var(--on-accent)} .finished-check svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .finished-text{display:grid;gap:.1rem;flex:1 1 180px;min-width:0} .finished-text em{font-style:italic} .finished-text span{font-size:.85rem;color:var(--ink-2)} .finished-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem} .finished-actions button{display:inline-flex;align-items:center;gap:.35rem;min-height:38px;padding:.45rem .9rem;border-radius:999px;font-size:.88rem} .finished-actions .link-button{padding:.45rem .3rem;border-radius:0} .finished-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round} .finished-actions [data-finished=review] svg{fill:#c79a16;stroke:none} .finished-close{position:absolute;top:.4rem;right:.4rem;width:32px;height:32px;min-width:32px;background:transparent;font-size:1.1rem} /* Reviews and comments inside a book's sheet. */ .sheet-friends .hint{margin:0} /* Series: a volume's number on its cover (By series), a series as one stack (Series stacked), and the series sheet. */ .volume-badge{position:absolute;left:.4rem;bottom:.4rem;z-index:2;padding:.1rem .45rem;border-radius:999px;background:rgb(0 0 0/.62);color:#fff;font:600 .72rem Inter,sans-serif} .series-stack .book-cover-frame{box-shadow:5px -5px 0 -1px var(--bg-2),5px -5px 0 0 var(--line),10px -10px 0 -2px var(--bg-2),10px -10px 0 -1px var(--line)} .series-stack{overflow:visible;margin:10px 10px 0 0;width:calc(100% - 10px)} .stack-badge{position:absolute;left:.4rem;right:.4rem;bottom:.4rem;z-index:2;overflow:hidden;padding:.2rem .5rem;border-radius:999px;background:rgb(0 0 0/.66);color:#fff;font:600 .72rem Inter,sans-serif;white-space:nowrap;text-overflow:ellipsis;text-align:center} .series-sheet h2{margin:.2rem 0 .1rem} .details-series{margin:.35rem 0 0;font-size:.85rem;color:var(--ink-2)} .details-series .link-button{font-size:.85rem} .series-have{margin:.6rem 0 .4rem;font-weight:600;color:var(--ink-2)} .series-missing{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem} .series-missing-row{cursor:default} .series-missing-row .read-row-text{opacity:.75} .series-missing-cover{display:grid;place-items:center;border:1px dashed var(--line-strong);background:transparent;color:var(--muted);font-size:.75rem;font-weight:700} .series-missing-row .link-button{flex:0 0 auto;font-size:.85rem} .series-status{margin-top:.8rem} .series-missing button{display:inline-flex;align-items:center;gap:.35rem} .series-missing svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2} /* Needs attention */ .attention-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:760px;margin-bottom:1rem} .attention-toolbar .hint{margin:0} .attention-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;flex:0 0 auto;min-height:40px;margin-left:auto;padding:.55rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);white-space:nowrap} .attention-toolbar button:hover{background:var(--bg-2)} .attention-toolbar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .attention-refresh-status{max-width:760px;margin:0 0 1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:.88rem} .attention-refresh-status[hidden]{display:none} .attention-refresh-status p{margin:.1rem 0} .attention-refresh-status>div{margin-top:.55rem} .attention-refresh-status ul{max-height:180px;overflow-y:auto;margin:.25rem 0 0;padding-left:1.2rem} .attention-refresh-status li{margin:.15rem 0} .attention-refresh-status li span{color:var(--ink-2)} @media(max-width:540px){.attention-toolbar .hint{display:none}} #attention-content{display:grid;gap:1rem;max-width:760px} .attention-section{--attention-tone:var(--accent-strong);display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;min-width:0;border-left:3px solid var(--attention-tone);padding:1rem 1.15rem} .attention-section[data-attention="coverless"]{--attention-tone:var(--fox)} .attention-section[data-attention="duplicates"]{--attention-tone:var(--muted)} .attention-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.7rem;min-width:0} .attention-toggle{display:flex;align-items:center;gap:.65rem;min-width:0;min-height:42px;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer} .attention-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px} .attention-icon,.attention-chevron{display:grid;place-items:center;flex:0 0 auto;color:var(--attention-tone)} .attention-icon{width:34px;height:34px;border-radius:10px;background:var(--accent-soft)} .attention-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .attention-toggle-text{min-width:0;font:600 1.05rem/1.2 Fraunces,serif} .attention-toggle-text .hint{display:inline-block;margin-left:.3rem;padding:.1rem .4rem;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font:700 .7rem/1.4 Inter,sans-serif;vertical-align:.1rem} .attention-chevron{margin-left:auto;width:25px;height:25px;border-radius:50%;background:var(--bg-2);color:var(--ink-2);transition:transform .16s,background .16s} .attention-chevron svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .attention-toggle[aria-expanded="true"] .attention-chevron{transform:rotate(180deg);background:var(--accent-soft)} .attention-actions{display:flex;justify-content:flex-end;min-width:0} .attention-action-compact{display:none} .attention-actions .secondary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;max-width:100%;min-height:40px;text-align:center} .attention-actions button svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2} @media(max-width:540px){.attention-action-full{display:none}.attention-action-compact{display:inline}} @media(max-width:400px){.attention-head{grid-template-columns:minmax(0,1fr) minmax(0,43%)}.attention-section{padding:.85rem}.attention-icon{width:30px;height:30px}.attention-chevron{width:22px;height:22px}.attention-toggle{gap:.4rem}} .attention-body[hidden]{display:none} .attention-explanation{margin:0 0 .6rem} .attention-feedback:empty{display:none} .attention-feedback{margin:0} .attention-group{padding:.3rem 0;border-top:1px solid var(--line)} .series-candidates{margin-top:.75rem} .series-candidate .read-row-text strong{overflow-wrap:anywhere;white-space:normal;text-overflow:clip} .series-candidate .read-row-text small{margin-top:.2rem;color:var(--muted);font-size:.75rem} .series-more{margin-top:.65rem} .duplicate-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.3rem .6rem;min-width:0} .duplicate-choice .read-row{min-width:0} .duplicate-choice .read-row-text strong,.duplicate-choice .read-row-text span{overflow-wrap:anywhere;white-space:normal;text-overflow:clip} .duplicate-choice-actions{display:flex;gap:.4rem;justify-content:flex-end} .duplicate-choice-actions button{min-height:36px;padding:.35rem .65rem;font-size:.82rem} .duplicate-kept{grid-column:1/-1;padding-left:.6rem;color:var(--ink-2);font-size:.8rem} @media(max-width:540px){.duplicate-choice{grid-template-columns:minmax(0,1fr)}.duplicate-choice-actions{padding-right:.2rem}} #attention-count{margin-left:auto} .attention-badge{min-width:1.3rem;padding:.1rem .4rem;border-radius:999px;background:var(--fox);color:#fff;font-size:.7rem;font-weight:700;text-align:center} #library-menu-button{position:relative} #library-attention-badge{top:-3px;left:auto;right:-5px} #bulk-series-progress{width:100%;height:.65rem;accent-color:var(--accent)} #bulk-series-status{overflow-wrap:anywhere} #bulk-series-dialog .modal-actions{flex-wrap:wrap} #bulk-series-background{flex-basis:100%;order:1} .series-job-notice{position:fixed;z-index:55;right:1rem;bottom:calc(var(--tabbar, 64px) + env(safe-area-inset-bottom) + 1rem);width:min(370px, calc(100vw - 2rem));padding:1rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overflow-wrap:anywhere} .series-job-notice p{font-size:.85rem;margin:.4rem 0} .series-job-notice .form-error:empty{display:none} .series-job-actions{display:flex;gap:.5rem;margin-top:.7rem} .series-job-compact{display:none} .series-job-notice.is-running{width:min(250px, calc(100vw - 2rem));padding:0;border-color:var(--line);box-shadow:var(--shadow-soft)} .series-job-notice.is-running > [role=status],.series-job-notice.is-running .series-job-open-label{display:none} .series-job-notice.is-running .series-job-actions{display:block;margin:0} .series-job-notice.is-running #series-job-view{display:block;width:100%;min-height:48px;padding:.55rem .75rem;border:0;background:transparent;text-align:left} .series-job-notice.is-running .series-job-compact{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.4rem .75rem;font-size:.78rem;font-weight:500} #series-job-count{color:var(--muted);font-variant-numeric:tabular-nums} #series-job-progress{grid-column:1 / -1;width:100%;height:3px;border:0;border-radius:999px;overflow:hidden;accent-color:var(--accent);background:var(--bg-2)} #series-job-progress::-webkit-progress-bar{background:var(--bg-2)} #series-job-progress::-webkit-progress-value{background:var(--accent)} #series-job-progress::-moz-progress-bar{background:var(--accent)} #series-lookup-status:empty{display:none} .finished-on{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin:.5rem 0 0;font-size:.85rem;color:var(--ink-2)} .finished-on svg{width:15px;height:15px;fill:none;stroke:var(--accent-strong);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .finished-on .link-button{font-size:.85rem} .finished-on-field{display:flex;align-items:center;gap:.8rem} .finished-on-field input{flex:1;min-width:0} .status-finished{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line)} .sheet-hide{margin:-.4rem 0 .8rem;font-size:.85rem;color:var(--muted)} .sheet-hide .link-button{color:var(--muted);font-weight:600} .rec-hide{color:var(--muted)} .sheet-friends-more{display:grid;gap:.7rem} .sheet-friends-more-button{justify-self:start;font-size:.85rem} .my-review{display:flex;align-items:center;justify-content:space-between;gap:.8rem} .my-review p{margin:0;font-size:.88rem} .empty-review span{color:var(--ink-2);font-size:.88rem} .empty-review button{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;font-size:.85rem;border-radius:999px} .empty-review svg{width:16px;height:16px;fill:#a07d12} .my-review.editing{display:block} .review-form{display:grid;gap:.6rem} .star-input{display:flex;gap:.15rem;margin:0;padding:0;border:0} .star-input legend{width:100%;margin-bottom:.3rem;font-weight:700;font-size:.88rem;color:var(--ink)} .star-input label{display:block;cursor:pointer} .star-input input{position:absolute;opacity:0;width:1px;height:1px} .star-input label>span[aria-hidden]{display:grid;place-items:center;width:40px;height:40px;font-size:1.7rem;color:var(--line-strong)} .star-input input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px} .star-input[data-rating="1"] label:nth-of-type(-n+1)>span[aria-hidden],.star-input[data-rating="2"] label:nth-of-type(-n+2)>span[aria-hidden],.star-input[data-rating="3"] label:nth-of-type(-n+3)>span[aria-hidden],.star-input[data-rating="4"] label:nth-of-type(-n+4)>span[aria-hidden],.star-input[data-rating="5"] label>span[aria-hidden]{color:#c79a16} .review-form textarea{min-height:80px;background:var(--surface)} .review-actions{display:flex;align-items:center;gap:.5rem} .review-actions .danger-link{margin-left:auto} .review-body{white-space:pre-line;color:var(--ink-2)} .sheet-friend-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1rem;margin-top:.15rem} .thread-toggle{display:inline-flex;align-items:center;gap:.3rem;text-decoration:none;min-height:34px;font-size:.82rem} .thread-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round} /* Comments, laid out like Reddit's: no boxes or dividers, a thread line down the side, a small name-and-time line, the text, and the actions behind "⋯". */ .comment-thread{flex-basis:100%;display:grid;gap:.75rem;margin:.4rem 0 .15rem} /* The thread line runs beside the comments only; the comment box below spans the full width. */ .comment-list{display:grid;gap:.8rem;padding:.1rem 0 .1rem .7rem;border-left:2px solid var(--line)} /* Under a friend's review or pick, the thread takes the row's full width, not just the column beside the avatar. */ .sheet-friend .comment-thread{flex:0 0 calc(100% + 28px + .65rem);margin-left:calc(-28px - .65rem)} .comment{min-width:0} .comment-thread .form-error:empty{display:none} .comment-meta{display:flex;align-items:center;gap:.35rem;min-height:24px;font-size:.75rem;color:var(--muted)} .comment-meta strong{color:var(--ink);font-weight:600} .comment-meta time{margin:0;font:inherit;color:inherit} .avatar.small{width:20px;height:20px;font-size:.6rem} .comment-body{margin:.1rem 0 0;font-size:.9rem;line-height:1.42;white-space:pre-line;overflow-wrap:anywhere;color:var(--ink)} .comment-tools{position:relative;margin-left:auto} .comment-more{display:grid;place-items:center;width:32px;height:24px;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted)} .comment-more:hover,.comment-more[aria-expanded="true"]{background:var(--bg-2);color:var(--ink)} .comment-more svg{width:18px;height:18px;fill:currentColor;stroke:none} .comment-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:5;display:grid;min-width:140px;padding:.3rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 8px 24px rgb(0 0 0/.14)} .comment-menu button{min-height:40px;padding:.5rem .8rem;border:0;border-radius:8px;background:transparent;color:var(--ink);font-weight:600;font-size:.9rem;text-align:left} .comment-menu button:hover{background:var(--bg-2)} .comment-menu .danger-link{color:var(--danger);min-height:40px} .comment-edit{display:grid;gap:.5rem;margin-top:.35rem} .comment-edit-actions{display:flex;justify-content:flex-end;gap:.5rem} .comment-edit-actions button{min-height:38px;padding:.45rem .95rem;border-radius:999px} .comment-edit textarea{min-height:40px;padding:.5rem .9rem;font-size:16px;line-height:1.35;resize:none;background:var(--surface)} /* Like Reddit's: a slim filled bar, with a small Post inside it once there's something to post. */ .comment-form{display:flex;align-items:flex-end;gap:.3rem;padding:.15rem .15rem .15rem 0;border-radius:20px;background:var(--surface)} .comment-form:focus-within{box-shadow:0 0 0 2px var(--accent-line)} .comment-form textarea{flex:1;min-width:0;min-height:34px;padding:.4rem .9rem;border:0;border-radius:18px;background:transparent;font-size:16px;line-height:1.35;resize:none;box-shadow:none;outline:none} .comment-form button{min-height:32px;padding:.3rem .85rem;border-radius:999px;font-size:.85rem} @media(max-width:760px){ .auth-shell{grid-template-columns:1fr} .auth-intro{min-height:auto;padding:calc(1.5rem + env(safe-area-inset-top)) 1.4rem 1.8rem;gap:1.2rem} .auth-intro .brand{justify-content:center} .auth-intro h1{font-size:2.35rem;margin-bottom:.6rem} .lede{font-size:1rem} .quiet{display:none} .auth-card{padding:1.6rem 1.25rem calc(2rem + env(safe-area-inset-bottom))} .auth-form input,.auth-form button{min-height:46px} /* A fixed app shell: the workspace scrolls on its own so browser chrome can't jolt the tab bar. */ body.app-active{height:100dvh;overflow:hidden} body.app-active .app-shell{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden} body.app-active .workspace{order:1;flex:1 1 0;height:0;min-height:0;padding:0 .85rem 1.5rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch} /* Bottom tab bar: icon over a small label, centred in the space above the home indicator. */ body.app-active .sidebar{order:2;flex:0 0 auto;flex-direction:row;padding:.3rem .5rem calc(.3rem + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgb(var(--shadow-rgb)/.18);contain:layout paint} .sidebar .brand,.library-name,.sidebar-bottom{display:none} .sidebar nav{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:.1rem;align-items:center} .sidebar .nav-add{align-self:center;justify-self:center;margin:0;width:50px;height:50px;min-height:0!important;padding:0!important;border-radius:50%;background:var(--accent)!important;color:var(--on-accent)!important;box-shadow:0 2px 8px rgb(0 0 0/.25)} .sidebar .nav-add .button-label{display:none!important} .sidebar .nav-add .button-icon{width:auto!important;height:auto!important;background:none!important;font-size:1.6rem} .filter-chips{margin:0 -.85rem .9rem;padding:2px .85rem} .update-bar{left:.85rem;right:.85rem;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + .9rem);max-width:none} .people-strip{margin:0 -.85rem;padding:.2rem .85rem} .discover-scroll{margin:0 -.85rem;padding-left:.85rem;padding-right:.85rem} /* Phones: one book spans the width; several scroll sideways, each nearly full width so the next peeks in. */ .nav-item{flex-direction:column;justify-content:center;gap:.2rem;min-height:var(--tabbar);padding:.2rem 0;background:transparent!important;font-size:.66rem;letter-spacing:.01em} .nav-item .button-icon{display:grid;place-items:center;width:52px;height:30px;border-radius:999px;font-size:1.3rem;transition:background-color .18s ease} .nav-item.active .button-icon{background:var(--chrome-2)} .nav-item:active .button-icon{transform:scale(.94)} /* Compact top bar: view title, centred brand, actions. The search sits directly beneath. */ body.app-active .workspace-sticky{position:sticky;top:0;z-index:8;display:block;margin:0 -.85rem .8rem;padding:0 .85rem;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;margin:0;padding:calc(.45rem + env(safe-area-inset-top)) 0 .45rem;min-height:calc(52px + env(safe-area-inset-top))} header .eyebrow{display:none} header h2{font-size:1.12rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand-header{display:flex;font-size:1.12rem;color:var(--ink)} .brand-header img{width:32px;height:32px} .header-actions{justify-self:end;gap:.35rem} .nav-item .button-label{display:block} .selection-bar button .button-label{display:none} .toolbar{margin:0 0 .6rem} .search{max-width:none;min-height:42px;padding:0 .75rem} .search input{font-size:16px;padding:.55rem 0} .selection-bar{flex-direction:row;align-items:center;gap:.5rem;margin:0 0 .6rem;padding:.45rem .55rem} .selection-bar strong{margin-right:auto;font-size:.8rem;white-space:nowrap} .selection-bar div{flex-wrap:nowrap;gap:.3rem} .selection-bar button{width:40px;min-width:40px;height:40px;padding:0;border-radius:50%;display:inline-grid;place-items:center} .book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem} .book-card{border-radius:8px} .book-card:hover{transform:none;box-shadow:var(--shadow-soft)} .copy-badge{font-size:10px;right:.3rem;bottom:.3rem} .rec-badge{left:.3rem;bottom:.3rem;width:20px;height:20px} .fallback-mark{width:56%} .panel{padding:1.05rem} h3{font-size:1.15rem} .trash-intro{margin-bottom:.9rem} .locations-layout{grid-template-columns:1fr;gap:.8rem} button.location-row{min-height:54px;padding:.7rem .6rem} .location-detail{margin-top:.8rem;padding:1rem;scroll-margin-top:70px} .location-detail-header{flex-direction:column;align-items:stretch} .location-detail-actions{justify-content:space-between} .location-detail-actions label{min-width:0;flex:1} .location-detail .book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem} /* Dialogs become bottom sheets with sticky header and actions. */ dialog{max-width:100vw;width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;max-height:calc(100dvh - env(safe-area-inset-top) - .5rem)} .gemini-overlay{border-radius:18px 18px 0 0} .modal-form,.details{max-height:calc(100dvh - env(safe-area-inset-top) - .5rem);overflow:auto;padding:1rem .95rem calc(1rem + env(safe-area-inset-bottom))} .modal-header{position:sticky;top:-1rem;z-index:2;margin:-1rem -.95rem 0;padding:1rem .95rem .8rem;background:var(--surface);border-bottom:1px solid var(--bg-2)} .modal-header h2{font-size:1.4rem} .modal-actions{position:sticky;bottom:calc(-1rem - env(safe-area-inset-bottom));z-index:2;margin:0 -.95rem calc(-1rem - env(safe-area-inset-bottom));padding:.8rem .95rem calc(.8rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--bg-2)} .modal-actions button{min-height:46px;flex:1} .form-grid{grid-template-columns:1fr} .wide{grid-column:auto} .edit-form .form-grid{grid-template-columns:minmax(0,1fr)} .edit-form .edit-pair{grid-template-columns:repeat(2,minmax(0,1fr))} .edit-pair .wide{grid-column:1/-1} .edit-header-title h2{font-size:1.1rem} .edit-actions,.filter-actions{bottom:calc(-1rem - env(safe-area-inset-bottom));margin:1rem -.95rem calc(-1rem - env(safe-area-inset-bottom));padding:.75rem .95rem calc(.75rem + env(safe-area-inset-bottom))} .form-grid input,.form-grid select,.form-grid textarea{min-height:46px} .scan-section,.photo-actions{flex-direction:column;align-items:stretch} .scan-section .secondary,.photo-pick{width:100%;min-height:46px} .photo-buttons{width:100%} .photo-actions .photo-buttons .gallery-pick{width:52px} .scanner-panel video{max-height:40dvh} .image-pick,.text-action{min-height:44px;padding:.6rem 0} .lookup-row{grid-template-columns:minmax(0,1fr) auto} .lookup-query{grid-column:1/-1} .lookup-row button{min-height:46px} .details::before{content:"";display:block;width:38px;height:4px;margin:-.35rem auto .8rem;border-radius:2px;background:var(--line)} .sheet-bar{margin-bottom:.7rem} .sheet-actions{bottom:calc(-1rem - env(safe-area-inset-bottom));margin:1rem -.95rem calc(-1rem - env(safe-area-inset-bottom));padding:.75rem .95rem calc(.75rem + env(safe-area-inset-bottom))} .status-picker{align-items:flex-end} .status-picker-panel{width:100%;border-radius:20px 20px 0 0;padding:1rem .95rem calc(1rem + env(safe-area-inset-bottom))} .details-top{gap:.85rem;padding-bottom:.85rem} .details-cover-wrap{width:72px;flex-basis:72px} .details-info{min-height:108px} .details-title{font-size:1.35rem} .details-title-medium{font-size:1.14rem} .details-title-long{font-size:1rem} .details-author-medium{font-size:.78rem} .details-author-long{font-size:.7rem} .description{font-size:.88rem;margin:.8rem 0} .copy-list{margin:.8rem 0} .copy-row{padding:.7rem .75rem} .details-actions{display:grid;grid-template-columns:46px 1fr 1fr;margin-top:1.1rem} .details-actions button{min-height:46px;padding:.6rem .5rem} .recommendations-section{margin-top:1rem;padding-top:1rem} .recommendations-heading{align-items:flex-start} .recommendation-grid,.feed{grid-template-columns:1fr;gap:.55rem} .recommendation-card{padding:.65rem} .recommendation-cover-frame{width:54px;flex-basis:54px} .recommendation-reason{margin:.45rem 0 .35rem} .wishlist-share-panel{margin-bottom:.9rem} .wishlist-share-controls input{max-width:none;flex:1;min-width:0} .person-row{flex-wrap:wrap;row-gap:.5rem} .person-row .row-actions{flex:1 0 100%;padding-left:calc(40px + .7rem)} .person-row .row-actions button{flex:1} .friends-toolbar{flex-direction:column;align-items:stretch} /* Four equal segments across the full width, allowed to shrink, so they never push past the edge. */ .segmented{width:100%} .segmented button{flex:1 1 0;min-width:0;justify-content:center;padding:.35rem .3rem;font-size:.82rem} .kind-switch button,.edit-jump button{font-size:.82rem} .add-friend-form{grid-template-columns:1fr} .add-friend-form button{min-height:44px} .invite-actions>button{flex:1 1 auto;min-height:44px} .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem} .method-row{align-items:stretch;flex-direction:column} .method-row>button{width:100%} .account-actions>button{flex:1 1 auto} } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.spinner{animation:none}.book-card:hover{transform:none;transition:none}.shop-menu{transition:none}.recommendations-refresh svg{animation:none!important}} .import-job-notice{position:fixed;z-index:56;left:1rem;bottom:calc(var(--tabbar, 64px) + env(safe-area-inset-bottom) + 1rem);width:min(320px,calc(100vw - 2rem));max-height:50vh;overflow:auto;padding:.8rem;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .import-job-notice p{margin:.45rem 0} .import-job-notice progress,.import-preview progress{display:block;width:100%;margin:.5rem 0;accent-color:var(--accent-strong)} #dev-library-review{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)} #dev-library-review>label{display:block;margin-bottom:.7rem} .dev-review-book{padding:.8rem 0;border-bottom:1px solid var(--line)} .dev-review-book>summary{cursor:pointer;font-weight:600} .dev-review-book p{font-size:.85rem} .dev-review-cover{width:72px;max-height:110px;object-fit:contain;margin-top:.8rem} .dev-review-book .cover-choice img{width:72px;height:108px;object-fit:contain} .dev-review-book [data-series-editor] input{width:100%;min-width:0} .dev-review-book [data-series-editor] .account-actions>label{flex:1 1 130px;min-width:0} .correction-card{padding:.8rem 0;border-bottom:1px solid var(--line)} .correction-card>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap} .correction-card p{font-size:.85rem} .correction-changes{list-style:none;padding:0;max-height:320px;overflow:auto;margin:.7rem 0} .correction-changes li{display:grid;gap:.25rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.85rem;overflow-wrap:anywhere} .correction-card .check-row{margin:.8rem 0} /* Owner library review: separate recommendations, judgment calls and maintenance. */ #dev-library-review{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)} #dev-library-review>h3{margin:0 0 .35rem} .dev-library-picker{display:flex;align-items:flex-end;gap:.65rem;flex-wrap:wrap;margin:1rem 0} .dev-library-picker label{flex:1 1 230px;min-width:0;margin:0} .dev-library-picker select{width:100%;min-width:0} .dev-library-picker>button{margin-bottom:0;min-height:42px} .dev-library-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:1rem} .dev-library-stats>div{display:flex;flex-direction:column;gap:.2rem;padding:.75rem;background:var(--surface-2);border-radius:10px} .dev-library-stats strong{font-size:1.3rem;font-variant-numeric:tabular-nums;font-weight:600} .dev-library-stats span{font-size:.75rem;color:var(--muted)} .dev-review-workspace{display:grid;gap:1rem;margin-top:1.2rem} .dev-review-section{min-width:0;border:1px solid var(--line);border-radius:12px;padding:1rem;background:var(--surface)} .dev-review-section>header{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;flex-wrap:wrap;margin-bottom:.8rem} .dev-review-section>header>div{flex:1 1 220px} .dev-review-section h4{font-size:1rem;margin:0 0 .3rem} .dev-review-section header .hint{margin:0;line-height:1.5} .dev-suggestions{border-color:var(--accent-line);border-top:3px solid var(--accent)} .dev-review-actions{display:flex;gap:.5rem;flex-wrap:wrap;padding:.6rem 0} .dev-review-section .correction-card{padding:.85rem 0} .dev-review-section .correction-card:last-child{border-bottom:0} .dev-review-section .correction-card>summary{line-height:1.5} .dev-review-section .correction-changes{background:var(--surface-2);border-radius:8px;padding:.25rem .75rem} .dev-review-section [data-dev-review-queue]:not(:empty){margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line)} .dev-maintenance{background:var(--surface-2)} .dev-maintenance>summary{cursor:pointer;font-weight:600;line-height:1.5} .dev-maintenance>summary .hint{display:block;font-weight:400;margin:.2rem 0 0} .dev-maintenance h5{font-size:.85rem;margin:1.1rem 0 .35rem} .dev-job-record{border-top:1px solid var(--line);padding:.7rem 0;font-size:.85rem} .dev-job-record>summary{cursor:pointer} @media(max-width:540px){ .dev-library-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .dev-review-section{padding:.8rem} .dev-review-section>header>button{font-size:.8rem} .dev-review-actions>button{flex:1 1 170px} } .dev-job-record>progress{width:100%} .dev-job-log{margin-top:.7rem;border-top:1px solid var(--line);padding-top:.6rem} .dev-job-log>summary{cursor:pointer} .dev-job-log ol{max-height:340px;overflow:auto;list-style:none;padding:0;margin:.6rem 0} .dev-job-log li{display:grid;gap:.3rem;padding:.65rem 0;border-bottom:1px solid var(--line)} .dev-job-log time{font-size:.72rem;color:var(--muted)} .dev-job-log p{margin:.3rem 0;line-height:1.5;overflow-wrap:anywhere} .dev-fix-history{list-style:none;padding:0} .dev-fix-history li{display:grid;gap:.25rem;padding:.65rem 0;border-bottom:1px solid var(--line)} .dev-fix-history span{font-size:.8rem;color:var(--muted)} .dev-job-record .text-button,.dev-fix-history .text-button{justify-self:start;font-size:.8rem} /* Dev review has its own live job panel; keep the personal floating notice out of its controls. */ body[data-view="admin"] #import-job-notice{display:none} .dev-backups{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)} .dev-backups h3{margin:0 0 .4rem} .dev-backups [role=status]{margin:.75rem 0;font-size:.85rem;line-height:1.5} .dev-backup-history{list-style:none;padding:0;max-height:340px;overflow:auto} .dev-backup-history li{display:grid;gap:.35rem;padding:.8rem 0;border-top:1px solid var(--line);font-size:.82rem} .dev-backup-history p{margin:0} .dev-backup-history code{font-size:.72rem;overflow-wrap:anywhere} .correction-card .read-row-text strong,.correction-card .read-row-text span{white-space:normal;overflow-wrap:anywhere;text-overflow:clip} /* Small floating beta entry point on the left edge. */ #beta-feedback-button{position:fixed;left:calc(.5rem + env(safe-area-inset-left));top:75%;transform:translateY(-50%);opacity:.8;z-index:90;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:44px;min-height:48px;padding:5px;border:1px solid var(--accent);border-radius:14px;background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-soft);font-size:.6rem;font-weight:700;line-height:1.1} #beta-feedback-button[hidden]{display:none} #beta-feedback-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #beta-feedback-button:hover,#beta-feedback-button:focus-visible{background:var(--accent-hover);border-color:var(--accent-hover);opacity:1} #beta-feedback-dialog{width:min(440px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);border:1px solid var(--line);border-radius:20px;inset:0;margin:auto} #beta-feedback-form{display:grid;gap:1.1rem;padding:1.25rem;max-height:calc(100dvh - 2rem);overflow:auto} #beta-feedback-form textarea{min-height:120px;resize:vertical} #beta-feedback-form [role=status]:empty{display:none} #dev-feedback{padding:1rem 0;border-bottom:1px solid var(--line)} .feedback-entry{padding:.8rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere} .feedback-entry small{display:block;color:var(--muted);margin-top:.2rem} .feedback-entry p{white-space:pre-wrap;margin:.5rem 0} #beta-feedback-form .modal-header,#beta-feedback-form .modal-actions{position:static;margin:0;padding:0;border:0} #beta-feedback-form .hint{margin:0} #beta-feedback-form h2{margin:0;font-size:1.65rem;line-height:1.2} #beta-feedback-form .feedback-heading .hint{margin-top:.4rem;font-size:.78rem;line-height:1.5;color:var(--muted)} #beta-feedback-form .modal-header{gap:.5rem;align-items:flex-start;padding-bottom:.2rem} #beta-feedback-form .modal-header .icon-button{flex:0 0 auto;width:36px;height:36px;min-height:36px;border-radius:50%;font-size:1.4rem} #beta-feedback-form>label{gap:.4rem;font-size:.82rem} #beta-feedback-form select,#beta-feedback-form textarea{border-radius:12px;background:var(--bg);font-size:1rem} #beta-feedback-form .modal-actions{gap:.6rem} #beta-feedback-form .modal-actions button{border-radius:999px;min-height:44px;padding:.6rem 1.2rem} #beta-feedback-form .modal-actions .secondary{border:1px solid var(--line);background:transparent} #settings-feedback[hidden]{display:none} /* Explicit navigation for installed apps without browser controls. */ .back-button{display:inline-flex;align-items:center;justify-content:center;gap:.2rem;min-height:44px;padding:.3rem .5rem .3rem 0;border:0;border-radius:10px;background:transparent;color:var(--accent-strong);font-size:.85rem;font-weight:700;white-space:nowrap} .back-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .back-button:hover{background:var(--accent-soft)} .back-button[hidden]{display:none} .header-title:has(#view-back:not([hidden])) .eyebrow{display:none} #view-back{margin-top:-.4rem} #beta-feedback-form[hidden],#beta-feedback-success[hidden]{display:none} #beta-feedback-success{display:grid;justify-items:center;gap:.9rem;padding:2rem 1.5rem;text-align:center} #beta-feedback-success h2{margin:0;font-size:1.5rem} #beta-feedback-success p{margin:0;line-height:1.5} #beta-feedback-success button{min-height:44px;border-radius:999px;padding:.65rem 1.75rem;margin-top:.3rem} .feedback-success-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong)} .feedback-success-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .feedback-delete{border-radius:999px;min-height:40px;padding:.45rem .9rem;font-size:.8rem} .beta-panel[hidden]{display:none} .beta-panel{padding:1.25rem} .beta-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.9rem} .beta-panel h2{margin:0;font-size:1.5rem} .beta-panel .icon-button{flex-shrink:0} .beta-menu-options{display:grid;gap:.5rem} .beta-menu-options button{display:flex;align-items:center;gap:.75rem;width:100%;min-height:52px;padding:.8rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font-weight:600;text-align:left} .beta-menu-options button:hover{background:var(--accent-soft)} .beta-menu-options button>span:last-child{margin-left:auto;color:var(--muted)} .beta-menu-options svg{display:block;width:21px;height:21px;fill:none;stroke:var(--accent-strong);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #beta-feedback-form>[data-beta-back]{justify-self:start;margin-bottom:-.6rem} #beta-changelog>.hint{margin:.4rem 0 1rem} .beta-timeline{border-left:2px solid var(--accent-line);padding-left:1rem;margin-left:.25rem} .beta-timeline section{position:relative;margin-bottom:1.4rem} .beta-timeline section::before{content:'';position:absolute;left:-1.36rem;top:.3rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)} .beta-timeline h3{font-size:.95rem;margin:0 0 .5rem} .beta-timeline ul{padding-left:1rem;margin:0;color:var(--ink-2);font-size:.84rem;line-height:1.6} .beta-timeline li+li{margin-top:.3rem}