/* Serious Endeavor — the Kohlrabi design language, in a bookish register. Warm-paper light theme, ink-blue accent, soft radii. No build step. Themes switch via [data-theme] on ; every color goes through variables. */ :root, [data-theme="paper"] { color-scheme: light; --bg: #faf4ed; --surface: #fffaf3; --surface-2: #f2e9e1; --surface-raised: #fffdf8; --ink: #1c1c1e; --ink-strong: #000000; --muted: #6c6c70; --subtle: #8e8e93; --line: #dfdad9; --line-strong: #cecacd; --accent: #1e5a8a; --accent-hover: #174a72; --accent-soft: #dce9f5; --gold: #a86a12; /* v0.2.10: darkened for 3.0 contrast on paper */ --gold-soft: #fae9cc; --warn: #8a5a10; --iris: #7c6cf0; --iris-soft: #e6e2fd; --danger: #cf2a1e; /* v0.2.10: darkened for 4.5 contrast on paper */ --danger-soft: #fbe3e1; --on-accent: #ffffff; --focus-ring: rgba(30,90,138,.22); --shadow-color: rgba(28,28,30,.10); --shadow-soft-color: rgba(28,28,30,.07); --backdrop: rgba(0,0,0,.32); --nav-bg: rgba(255,253,248,.82); --shadow: 0 14px 34px var(--shadow-color); --shadow-soft: 0 6px 18px var(--shadow-soft-color); --radius-sm: 14px; --radius-md: 20px; --radius-lg: 22px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; } [data-theme="ember"] { color-scheme: dark; --bg: #221a13; --surface: #2c231a; --surface-2: #3a2e21; --surface-raised: #342a1f; --ink: #f2e9da; --ink-strong: #fffdf8; --muted: #bfae95; --subtle: #937f60; --line: #4a3b2b; --line-strong: #5c4b37; --accent: #e2a557; --accent-hover: #c98f42; --accent-soft: rgba(226,165,87,.16); --gold: #e2a557; --gold-soft: rgba(226,165,87,.16); --warn: #e8b96a; --iris: #9d8ff5; --iris-soft: rgba(157,143,245,.18); --danger: #ef7d68; --danger-soft: rgba(239,125,104,.16); --on-accent: #241a10; --focus-ring: rgba(226,165,87,.28); --shadow-color: rgba(0,0,0,.40); --shadow-soft-color: rgba(0,0,0,.30); --backdrop: rgba(0,0,0,.60); --nav-bg: rgba(44,35,26,.85); } [data-theme="sage"] { color-scheme: light; --bg: #f4f2e9; --surface: #faf8ef; --surface-2: #e9e5d3; --surface-raised: #fffdf6; --ink: #20241f; --ink-strong: #0c0e0b; --muted: #66685e; --subtle: #8a8c7e; --line: #dbd7c4; --line-strong: #c8c3ac; --accent: #2e6b4e; --accent-hover: #245741; --accent-soft: #d9e9dd; --gold: #b57a1c; /* v0.2.10: darkened for 3.0 contrast on sage */ --gold-soft: #f4e5c4; --warn: #8a5a10; --iris: #6c5ce7; --iris-soft: #e4e0fb; --danger: #c23829; /* v0.2.10: darkened for 4.5 contrast on sage */ --danger-soft: #f9dfda; --on-accent: #ffffff; --focus-ring: rgba(46,107,78,.22); --shadow-color: rgba(32,36,31,.10); --shadow-soft-color: rgba(32,36,31,.07); --backdrop: rgba(20,24,18,.36); --nav-bg: rgba(250,248,239,.85); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; } .app { max-width: 520px; margin: 0 auto; min-height: 100dvh; } /* ===== Icons (inline Tabler sprite) ===== */ .icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; } .icon.sm { width: 16px; height: 16px; } .icon.tab-ico { width: 22px; height: 22px; } .icon.logo { width: 26px; height: 26px; color: var(--accent); } .e-ico { width: 42px; height: 42px; color: var(--subtle); margin-bottom: 10px; } /* ===== Top bar (fixed, translucent, iOS-26-safe) ===== */ header.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; max-width: 520px; margin: 0 auto; height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 4px 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; border-bottom: 1px solid var(--line); background-color: var(--bg); background-image: linear-gradient(var(--nav-bg), var(--nav-bg)); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); } header.topbar .title { position: absolute; left: 0; right: 0; top: env(safe-area-inset-top); bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0 56px; font-family: var(--font-serif); font-size: 21px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* ===== Bottom nav (fixed, translucent) ===== */ nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background-color: var(--bg); background-image: linear-gradient(var(--nav-bg), var(--nav-bg)); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); } nav.tabs button { border: 0; background: none; padding: 6px 0; cursor: pointer; color: var(--muted); font-size: 10px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--font-sans); } nav.tabs button.active { color: var(--accent); } main { padding: calc(54px + env(safe-area-inset-top) + 12px) 12px calc(96px + env(safe-area-inset-bottom)); } .tab { display: none; } .tab.active { display: block; } /* ===== Cards ===== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 16px; margin-bottom: 12px; } .card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .muted { color: var(--muted); font-size: 13px; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--font-sans); font-size: 16px; font-weight: 700; cursor: pointer; } .btn:active { background: var(--accent-hover); } a.btn { text-decoration: none; } .btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); } .btn.secondary:active { background: var(--surface-2); } .btn.small { width: auto; min-height: 44px; padding: 0 18px; font-size: 14px; white-space: nowrap; } .btn.danger { background: var(--danger-soft); color: var(--danger); } /* ===== Forms ===== */ label.field { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin: 10px 0 4px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], select, textarea { width: 100%; min-height: 44px; padding: 8px 12px; font-size: 16px; font-family: var(--font-sans); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .row { display: flex; gap: 8px; align-items: center; } .row.between { justify-content: space-between; } /* ===== Segmented control ===== */ .seg { display: flex; background: var(--surface-2); border-radius: 999px; padding: 3px 14px 3px 3px; gap: 2px; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg button { flex: 1 0 auto; border: 0; background: none; border-radius: 999px; min-height: 44px; font-family: var(--font-sans); font-size: 13px; font-weight: 750; color: var(--muted); cursor: pointer; white-space: nowrap; padding: 0 10px; } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); } /* ===== Book rows ===== */ .book-row { display: flex; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); cursor: pointer; width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; text-align: left; font-family: var(--font-sans); color: var(--ink); } .book-row:last-child { border-bottom: 0; } .cover { width: 52px; aspect-ratio: 2/3; object-fit: cover; flex: none; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); } .cover.fallback { display: grid; place-items: center; font-family: var(--font-serif); font-size: 20px; color: var(--subtle); } /* Barcode scan viewfinder */ .scan-wrap { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: #111; aspect-ratio: 4 / 3; } .scan-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .scan-frame { position: absolute; inset: 22% 12%; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); pointer-events: none; } /* Shelf picker (add-to-shelf flow) */ .shelf-pick { display: flex; flex-direction: column; gap: 8px; } .shelf-opt { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); padding: 12px 14px; cursor: pointer; font-family: var(--font-sans); width: 100%; } .shelf-opt:active { border-color: var(--accent); } .shelf-opt .icon { color: var(--accent); width: 22px; height: 22px; flex: none; } .shelf-opt strong { display: block; font-size: 15px; } .shelf-opt small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .book-row .t { font-weight: 700; font-size: 14px; letter-spacing: -.01em; line-height: 1.3; } .book-row .a { font-size: 12px; color: var(--muted); margin-top: 2px; } .book-row .meta { font-size: 12px; color: var(--muted); margin-top: 4px; } .mini-bar { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin-top: 6px; } .mini-bar .fill { height: 100%; background: var(--accent); border-radius: 4px; } .stars-line { display: flex; gap: 2px; margin-top: 5px; } .stars-line svg { width: 14px; height: 14px; } .stars-line .on { color: var(--gold); } .stars-line .on svg { fill: currentColor; } .stars-line .off { color: var(--line-strong); } .stars-inline { display: inline-flex; gap: 1px; vertical-align: -.15em; } .stars-inline svg { width: 13px; height: 13px; } .stars-inline .on { color: var(--gold); } .stars-inline .on svg { fill: currentColor; } .stars-inline .off { color: var(--line-strong); } .quick-add { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 750; color: var(--accent); cursor: pointer; font-family: var(--font-sans); } .quick-add.added { color: var(--muted); } /* ===== Library: filter chips + shelf tags ===== */ .chipbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; padding: 0 0 4px; } .fchip { flex: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-sans); white-space: nowrap; } .fchip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .shelf-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; margin-top: 6px; } .goalbar { margin: 10px 0; } .goalbar .lbl { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 5px; } .goalbar .track { height: 12px; background: var(--surface-2); border-radius: 7px; overflow: hidden; } .goalbar .fill { height: 100%; background: var(--accent); border-radius: 7px; transition: width .2s; } .pace { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; background: var(--accent-soft); color: var(--accent); margin-top: 10px; line-height: 1.5; } .pace.behind { background: var(--gold-soft); color: var(--warn); } /* ===== Kohlrabi-style charts ===== */ .kchart { width: 100%; height: auto; display: block; } .chart-readout { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; min-height: 18px; } /* ===== Star rating input ===== */ .stars { display: flex; gap: 4px; margin: 6px 0 0; } .stars button { border: 0; background: none; cursor: pointer; padding: 4px; color: var(--line-strong); line-height: 1; } .stars button svg { width: 32px; height: 32px; } .stars button.lit { color: var(--gold); } .stars button.lit svg { fill: currentColor; } /* ===== Numeric text inputs (pages read, goal) ===== */ .pages-input { width: 120px; text-align: center; font-size: 20px; font-weight: 800; } /* ===== Friends / feed ===== */ .avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 17px; } .avatar.me { background: var(--accent); color: var(--on-accent); } .friend-row { display: flex; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; font-family: var(--font-sans); color: var(--ink); text-align: left; cursor: pointer; } .friend-row:last-child { border-bottom: 0; } .friend-row .n { font-weight: 700; font-size: 14px; } .friend-row .s { font-size: 12px; color: var(--muted); margin-top: 2px; } .follow-btn { flex: none; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; min-height: 44px; padding: 0 14px; font-size: 13px; font-weight: 750; color: var(--accent); cursor: pointer; font-family: var(--font-sans); } .follow-btn.off { color: var(--muted); } .feed-item { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); } .feed-item:last-child { border-bottom: 0; } .feed-item .avatar { width: 36px; height: 36px; font-size: 14px; } .feed-item .txt { font-size: 13px; line-height: 1.45; } .feed-item .txt strong { font-weight: 750; } .feed-item .txt .em { font-family: var(--font-serif); font-style: italic; } .feed-item .when { font-size: 11px; color: var(--subtle); margin-top: 2px; } /* ===== Modal dialog (centered, dimmed backdrop) ===== */ .sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 20px 16px; } .sheet { position: relative; background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; padding: 20px 18px; box-shadow: 0 24px 70px var(--shadow-color); } .sheet h2 { margin: 0 0 4px; padding-right: 96px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-family: var(--font-serif); } .sheet .byline { color: var(--muted); font-size: 13px; margin-bottom: 10px; } .sheet .desc { font-size: 14px; line-height: 1.6; color: var(--ink); } .sheet .desc.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .sheet-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; } .sheet-share { position: absolute; top: 12px; right: 56px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; } .sheet-share:active { background: var(--accent-soft); color: var(--accent); } /* ===== Form dialogs (Add a person, profile, manual add, scan): header row with an inline close instead of the floating circle. ===== */ .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; } .sheet-head h2 { margin: 0; padding-right: 0; } .sheet-close-inline { flex: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 10px; color: var(--muted); cursor: pointer; } .sheet-close-inline:active { color: var(--ink); background: var(--surface-2); } /* ===== Toast (share fallbacks) ===== */ .toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(16px); background: var(--ink); color: var(--bg); font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1.5; padding: 12px 18px; border-radius: 999px; max-width: 88vw; text-align: center; opacity: 0; transition: opacity .3s, transform .3s; z-index: 60; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .chip { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 10px; } .sheet-cover { display: flex; gap: 14px; margin-bottom: 12px; } .sheet-cover .cover { width: 110px; } /* ===== Two-tap destructive remove (book sheet) ===== */ .remove-zone { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; } .remove-link { border: 0; background: none; cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--subtle); padding: 12px 16px; } .remove-link:active { color: var(--muted); } .remove-link.armed { color: var(--danger); font-weight: 800; } /* ===== Standalone share view (#s= links) ===== */ .share-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); } .share-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); max-width: 420px; width: 100%; padding: 28px 24px; text-align: center; } .share-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-serif); font-size: 20px; font-weight: 700; margin-bottom: 20px; letter-spacing: -.01em; } .share-brand .icon { width: 26px; height: 26px; color: var(--accent); } .share-cover { width: 150px; aspect-ratio: 2/3; object-fit: cover; display: block; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); margin: 0 auto 16px; } .share-cover.fallback { display: grid; place-items: center; color: var(--subtle); } .share-cover.fallback .icon { width: 56px; height: 56px; } .share-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.25; } .share-author { color: var(--muted); font-size: 14px; margin-bottom: 12px; } .share-pill { display: inline-block; font-size: 12px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 6px 14px; margin-bottom: 12px; } .share-card .stars-line { justify-content: center; margin-bottom: 14px; } .share-card .stars-line svg { width: 22px; height: 22px; } .share-review { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.6; text-align: left; color: var(--ink); margin-bottom: 20px; } .linklike { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px 0; font-family: var(--font-sans); } .row-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; } /* ===== Settings ===== */ .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .theme-opt { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); padding: 12px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-family: var(--font-sans); } .theme-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); } .theme-opt .nm { font-size: 13px; font-weight: 750; } .theme-opt .swatches { display: flex; gap: 4px; } .theme-opt .sw { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(0,0,0,.14); } /* ===== Stats ===== */ .dist-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; } .dist-row .k { width: 76px; display: flex; gap: 2px; color: var(--gold); flex: none; } .dist-row .k svg { width: 13px; height: 13px; fill: currentColor; } .dist-row .track { flex: 1; height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; } .dist-row .fill { height: 100%; background: var(--gold); border-radius: 6px; } .dist-row .v { width: 28px; text-align: right; color: var(--muted); font-weight: 700; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stat-cell { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; text-align: center; } .stat-cell .v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .stat-cell .k { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 4px; } /* ===== Misc ===== */ .empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; } .empty strong { display: block; color: var(--ink); font-size: 20px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.02em; font-family: var(--font-serif); } .empty-state { padding: 36px 20px; text-align: center; } .empty-state .icon.xl { width: 44px; height: 44px; color: var(--muted); opacity: .55; } .empty-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 10px 0 6px; } .fab { position: fixed; z-index: 15; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; } .fab .icon { width: 26px; height: 26px; } .fab:active { background: var(--accent-hover); } .fab[hidden] { display: none; } .local-note { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; line-height: 1.5; } .big-count { font-size: 44px; font-weight: 800; letter-spacing: -.03em; } .big-count small { font-size: 18px; color: var(--muted); font-weight: 700; } /* ===== "Finding a book for X" target banner (Discover) ===== */ .target-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 1.5; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; } .target-banner[hidden] { display: none; } .target-cancel { border: 0; background: none; cursor: pointer; padding: 0; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; } /* ============ v0.2.9 refinement pass: motion, feedback, consistency ============ */ /* Dialog entrance: gentle fade + scale (was a bottom-sheet slide-up). */ .sheet-backdrop { animation: se-fade-in .22s ease-out; } .sheet { animation: se-modal-in .22s cubic-bezier(.32,.72,.35,1); } @keyframes se-fade-in { from { opacity: 0; } } @keyframes se-modal-in { from { transform: scale(.96) translateY(10px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop { animation: none; } } /* Tap feedback — these controls previously had no pressed state. */ .book-row:active, .friend-row:active { background: var(--surface-2); } .fchip:active { background: var(--surface-2); } .fchip[aria-pressed="true"]:active { filter: brightness(.93); } nav.tabs button:active { color: var(--accent); } .theme-opt:active { border-color: var(--accent); } .follow-btn:active, .quick-add:active { background: var(--surface-2); } .shelf-opt:active { border-color: var(--accent); background: var(--accent-soft); } /* Visible keyboard focus (pairs with the sheet focus-trap work). */ button:focus-visible, a.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Larger dialog close/share targets (36px -> 44px). */ .sheet-close, .sheet-share { width: 44px; height: 44px; } .sheet-share { right: 64px; } .sheet h2 { padding-right: 116px; } /* The fallback letter tile stays tiny on the sheet's large cover — scale it up. */ .sheet-cover .cover.fallback { font-size: 44px; } /* Star-rating touch targets to 44px (were 40px). */ .stars button { padding: 6px; } /* Unify the two empty-state styles (19px/36px vs 20px/40px). */ .empty-title { font-size: 20px; } .empty-state { padding: 40px 20px; } /* v0.3.0 — accounts */ /* Auth form error + password hint. */ .auth-err { color: var(--danger, #b3261e); font-size: 13px; line-height: 1.5; font-weight: 600; margin-top: 10px; } .pw-hint { font-size: 12px; color: var(--muted); margin-top: 6px; min-height: 16px; } /* Sync status line under the account card (tap to retry). */ .sync-line { margin-top: 12px; } /* Private-profile toggle row. */ .check-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; line-height: 1.45; cursor: pointer; } .check-row input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); } /* Readers card: search input spacing. */ #people-search { margin-bottom: 4px; } #people-results { margin-bottom: 4px; }