* { box-sizing: border-box; } /* ============================================================ Theme system — identical palette set to Looper Web / Sound-it-out. CSS variables, themes layered via [data-theme][data-mode] on . Default: Classic Dark. ============================================================ */ :root { --bg: #000000; --panel: #0a0a0a; --border: #2a2a2a; --text: #ffffff; --muted: #888; --empty: #0f0f0f; --chip-bg: #141414; --chip-border: #2a2a2a; --button-bg: #1a1a1a; --button-fg: #ffffff; --button-border: #2a2a2a; --button-hover: #2a2a2a; --accent: #f8d060; --accent-fg: #2a1a00; --modal-bg: #0a0a0a; --shadow: 0 8px 30px rgba(0,0,0,0.7); --link: #5aa9ff; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ---------- Classic ---------- */ [data-theme="classic"][data-mode="light"] { --bg: #f5f0e8; --panel: #fffdf7; --border: #2d2416; --text: #2d2416; --muted: #7a6a52; --empty: #e5d8b8; --chip-bg: #e8e0d0; --chip-border: #8a7860; --button-bg: #2d2416; --button-fg: #fffdf7; --button-border: #2d2416; --button-hover: #4a3a22; --accent: #ffe066; --accent-fg: #7a4800; --modal-bg: #fffdf7; --shadow: 4px 4px 0 #2d2416; --link: #1a5aaa; } [data-theme="classic"][data-mode="dark"] { --bg: #000000; --panel: #0a0a0a; --border: #2a2a2a; --text: #ffffff; --muted: #888; --empty: #0f0f0f; --chip-bg: #141414; --chip-border: #2a2a2a; --button-bg: #1a1a1a; --button-fg: #fff; --button-border: #2a2a2a; --button-hover: #2a2a2a; --accent: #f8d060; --accent-fg: #2a1a00; --modal-bg: #0a0a0a; --shadow: 0 4px 20px rgba(0,0,0,0.85); --link: #5aa9ff; } /* ---------- Ocean ---------- */ [data-theme="ocean"][data-mode="light"] { --bg: #b8d8f0; --panel: #d6eaf8; --border: #1a4f8a; --text: #1a3a6e; --muted: #3a6fa0; --empty: #cce3f4; --chip-bg: #7ec8e8; --chip-border: #1a5a9a; --button-bg: #1a5aaa; --button-fg: #fff; --button-border: #0d3a7a; --button-hover: #2a6abb; --accent: #fff0a0; --accent-fg: #7a4800; --modal-bg: #d6eaf8; --shadow: 4px 4px 0 #1a4f8a; --link: #0d3a7a; } [data-theme="ocean"][data-mode="dark"] { --bg: #000000; --panel: #04080f; --border: #1a4a7a; --text: #80c8ff; --muted: #3a6080; --empty: #06101c; --chip-bg: #08182e; --chip-border: #1a4a7a; --button-bg: #0d2a4a; --button-fg: #80c8ff; --button-border: #1a4a7a; --button-hover: #143a6a; --accent: #f8d060; --accent-fg: #2a1a00; --modal-bg: #04080f; --shadow: 0 4px 20px rgba(0,40,80,0.6); --link: #80c8ff; } /* ---------- Periwinkle ---------- */ [data-theme="periwinkle"][data-mode="light"] { --bg: #d4ccf0; --panel: #e8e2fa; --border: #4a2a8a; --text: #3a1a7a; --muted: #7a5aaa; --empty: #d0bff0; --chip-bg: #b8a8e8; --chip-border: #6030b0; --button-bg: #6030b8; --button-fg: #fff; --button-border: #4a2090; --button-hover: #7040c8; --accent: #fff0a0; --accent-fg: #7a4800; --modal-bg: #e8e2fa; --shadow: 4px 4px 0 #4a2a8a; --link: #4a2090; } [data-theme="periwinkle"][data-mode="dark"] { --bg: #000000; --panel: #06040e; --border: #4a2080; --text: #c098f0; --muted: #50308a; --empty: #0c0518; --chip-bg: #14082a; --chip-border: #4a2080; --button-bg: #28104a; --button-fg: #c098f0; --button-border: #4a2080; --button-hover: #38156a; --accent: #f8d060; --accent-fg: #2a1a00; --modal-bg: #06040e; --shadow: 0 4px 20px rgba(60,20,140,0.6); --link: #c098f0; } /* ---------- Cotton Candy ---------- */ [data-theme="cottoncandy"][data-mode="light"] { --bg: #fce4f0; --panel: #fff0f8; --border: #c0186a; --text: #8a0050; --muted: #c060a0; --empty: #f8d5ec; --chip-bg: #f8b8dc; --chip-border: #d02880; --button-bg: #d02880; --button-fg: #fff; --button-border: #8a0050; --button-hover: #e03890; --accent: #fff0a0; --accent-fg: #7a4800; --modal-bg: #fff0f8; --shadow: 4px 4px 0 #c0186a; --link: #8a0050; } [data-theme="cottoncandy"][data-mode="dark"] { --bg: #000000; --panel: #0a0408; --border: #7a1450; --text: #f888c0; --muted: #703858; --empty: #110610; --chip-bg: #1f0a18; --chip-border: #7a1450; --button-bg: #3a0a25; --button-fg: #f888c0; --button-border: #7a1450; --button-hover: #5a1038; --accent: #f8d060; --accent-fg: #2a1a00; --modal-bg: #0a0408; --shadow: 0 4px 20px rgba(140,20,100,0.6); --link: #f888c0; } /* ---------- Matrix (always dark) ---------- */ [data-theme="matrix"] { --bg: #000000; --panel: #000a00; --border: #00aa30; --text: #00ff41; --muted: #008820; --empty: #001000; --chip-bg: #001400; --chip-border: #00aa30; --button-bg: #001800; --button-fg: #00ff41; --button-border: #00aa30; --button-hover: #002000; --accent: #00ff41; --accent-fg: #000; --modal-bg: #000a00; --shadow: 0 4px 20px rgba(0,255,65,0.25); --link: #00ff41; } /* ============================================================ Base layout ============================================================ */ html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; /* don't let iOS inflate text on rotate */ text-size-adjust: 100%; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; } body { display: flex; flex-direction: column; min-height: 100dvh; padding-left: var(--safe-left); padding-right: var(--safe-right); } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ Top bar ============================================================ */ .top-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; padding-top: calc(12px + var(--safe-top)); background: var(--panel); border-bottom: 1px solid var(--border); } .bar-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .bar-right { display: flex; align-items: center; gap: 10px; } .logo { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; color: var(--text); } .logo-accent { color: var(--accent); } .status-chip { font-size: 11px; color: var(--muted); padding: 4px 10px; border-radius: 10px; background: var(--chip-bg); border: 1px solid var(--chip-border); white-space: nowrap; font-variant-numeric: tabular-nums; } .status-chip[data-state="loading"] { color: var(--accent); } .status-chip[data-state="error"] { color: #ff8a8a; border-color: #5a2a2a; } .bar-btn { background: var(--button-bg); color: var(--button-fg); border: 1px solid var(--button-border); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .bar-btn:hover { background: var(--button-hover); } .bar-btn:active { transform: translateY(1px); } .bar-btn[disabled] { opacity: 0.5; cursor: progress; } .icon-btn { background: var(--button-bg); color: var(--button-fg); border: 1px solid var(--button-border); width: 40px; height: 40px; padding: 0; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; } .icon-btn:hover { background: var(--button-hover); } /* ============================================================ Stories ============================================================ */ .stories { flex: 1 1 auto; width: 100%; max-width: 820px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; } .story-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: border-color .12s ease, transform .08s ease; display: flex; gap: 14px; align-items: flex-start; } .story-card:hover { border-color: var(--accent); } .story-card:active { transform: translateY(1px); } .card-thumb { flex: 0 0 108px; height: 108px; border-radius: 10px; overflow: hidden; background: var(--empty); } .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { flex: 1 1 auto; min-width: 0; } .story-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .coverage-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 10px; background: var(--accent); color: var(--accent-fg); white-space: nowrap; } .coverage-badge[data-single="true"] { background: var(--chip-bg); color: var(--muted); border: 1px solid var(--chip-border); } .story-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .engine-tag { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-left: auto; } .engine-tag[data-engine="ai"] { color: var(--accent); } .story-headline { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--text); } .story-summary { font-size: 14px; line-height: 1.55; color: var(--text); opacity: 0.92; margin: 0 0 12px; } .outlet-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .outlet-chips .also { font-size: 11px; color: var(--muted); margin-right: 2px; } .outlet-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 12px; background: var(--chip-bg); color: var(--text); border: 1px solid var(--chip-border); white-space: nowrap; cursor: pointer; } .outlet-chip:hover { background: var(--button-hover); } .outlet-chip[data-lead="true"] { border-color: var(--accent); } .outlet-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .outlet-chip[data-tier="2"] .dot { background: var(--muted); } .outlet-chip[data-tier="3"] .dot { background: var(--chip-border); } /* ============================================================ Empty / loading / error ============================================================ */ .empty-state { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; } .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--chip-border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ Footer ============================================================ */ .foot { border-top: 1px solid var(--border); background: var(--panel); padding: 14px 18px calc(14px + var(--safe-bottom)); text-align: center; } .foot-note { font-size: 11px; color: var(--muted); line-height: 1.5; } /* ============================================================ Modals ============================================================ */ .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); } .modal-backdrop[hidden] { display: none; } .modal-card { position: relative; background: var(--modal-bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px 18px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .modal-card.small-card { max-width: 380px; } .modal-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; } .modal-title { font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } /* Appearance modal */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; margin: 8px 0 4px; } .theme-chip { background: var(--chip-bg); color: var(--text); border: 1px solid var(--chip-border); padding: 10px 6px; border-radius: 8px; font-size: 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; } .theme-chip:hover { background: var(--button-hover); } .theme-chip.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .theme-chip-emoji { font-size: 18px; line-height: 1.1; } .theme-chip-name { font-weight: 700; letter-spacing: 0.3px; } #lightDarkToggle { width: 100%; margin-top: 12px; background: var(--chip-bg); color: var(--text); border: 1px solid var(--chip-border); padding: 10px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; } #lightDarkToggle:hover { background: var(--button-hover); } /* Story detail modal */ .detail-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 10px; margin-bottom: 10px; background: var(--accent); color: var(--accent-fg); } .detail-headline { font-size: 21px; font-weight: 800; line-height: 1.3; margin: 0 0 10px; } .detail-summary { font-size: 15px; line-height: 1.6; margin: 0 0 18px; opacity: 0.95; } .detail-sub { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .outlet-row { display: block; padding: 11px 12px; margin-bottom: 8px; background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 10px; } .outlet-row:hover { background: var(--button-hover); text-decoration: none; } .outlet-row[data-lead="true"] { border-color: var(--accent); } .outlet-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .outlet-row-name { font-size: 12px; font-weight: 800; color: var(--accent); } .outlet-row[data-tier="2"] .outlet-row-name { color: var(--text); } .outlet-row[data-tier="3"] .outlet-row-name { color: var(--muted); } .outlet-row-time { font-size: 10px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; } .outlet-row-title { font-size: 14px; line-height: 1.4; color: var(--text); } /* ============================================================ Editorial-lean (bias) chips ============================================================ */ .lean-chip { font-size: 9px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; white-space: nowrap; border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--muted); cursor: help; } .lean-chip[data-lean="left"] { background: #1c3a6e; color: #9cc4ff; border-color: #2a5499; } .lean-chip[data-lean="lean-left"] { background: #16314f; color: #8fb8e8; border-color: #234a73; } .lean-chip[data-lean="center"] { background: #2a2f25; color: #b7c79a; border-color: #444c38; } .lean-chip[data-lean="lean-right"] { background: #4a1f1f; color: #e8a0a0; border-color: #6e2e2e; } .lean-chip[data-lean="right"] { background: #6e1f1f; color: #ffb0b0; border-color: #993030; } .lean-chip[data-lean="unrated"] { background: var(--chip-bg); color: var(--muted); } /* State-controlled outlets — deliberately off the L/R axis, amber to stand out */ .lean-chip[data-lean="state"] { background: #4a3410; color: #f5c451; border-color: #7a571a; } /* ============================================================ Cross-source analysis (consensus / divergence / framing) ============================================================ */ .analysis { background: rgba(127,127,127,0.06); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; } .an-sec { margin-bottom: 12px; } .an-sec:last-of-type { margin-bottom: 4px; } .an-sec .detail-sub { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .an-list { margin: 0; padding-left: 18px; } .an-list li { font-size: 13.5px; line-height: 1.5; margin-bottom: 4px; color: var(--text); } .an-chips { display: flex; flex-wrap: wrap; gap: 6px; } .an-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 10px; background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--text); text-transform: capitalize; } .an-chip-n { font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; } .an-diff { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; margin-bottom: 6px; background: var(--chip-bg); border: 1px solid var(--chip-border); border-left: 3px solid var(--accent); border-radius: 6px; } .an-diff-point { font-size: 12.5px; font-weight: 700; color: var(--text); } .an-diff-detail { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .an-frame { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; margin-bottom: 6px; background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 6px; } .an-frame-src { font-size: 11px; font-weight: 800; color: var(--accent); } .an-frame-obs { font-size: 12.5px; line-height: 1.45; color: var(--text); } .an-disclaimer { font-size: 10.5px; color: var(--muted); line-height: 1.45; margin: 8px 0 0; font-style: italic; } /* ============================================================ Sources modal ============================================================ */ .modal-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; } .modal-note b { color: var(--text); font-weight: 600; } .add-source { background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 10px; padding: 10px; margin-bottom: 14px; } .add-row { display: flex; gap: 8px; margin-bottom: 8px; } .add-row:last-child { margin-bottom: 0; } .add-source input, .add-source select { flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--chip-border); border-radius: 7px; padding: 8px 10px; font-size: 13px; } .add-source #addUrl { flex: 2 1 0; } .add-source #addBtn { flex: 0 0 auto; } .add-status { font-size: 12px; margin-top: 6px; min-height: 1px; color: var(--muted); } .add-status[data-state="ok"] { color: #6cf09a; } .add-status[data-state="error"] { color: #ff8a8a; } .add-status[data-state="loading"] { color: var(--accent); } .src-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .src-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .source-list { display: flex; flex-direction: column; gap: 6px; } .src-loading { font-size: 13px; color: var(--muted); padding: 12px; text-align: center; } .src-row { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 9px; background: var(--chip-bg); border: 1px solid var(--chip-border); } .src-row[data-enabled="false"] { opacity: 0.5; } .src-main { flex: 1 1 auto; min-width: 0; } .src-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .src-name { font-size: 13px; font-weight: 700; color: var(--text); } .src-badge { font-size: 8px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: var(--accent); color: var(--accent-fg); } .src-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .src-del { flex: 0 0 auto; background: none; border: 1px solid var(--chip-border); color: var(--muted); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 12px; } .src-del:hover { color: #ff8a8a; border-color: #5a2a2a; } /* iOS-style toggle */ .src-toggle { position: relative; display: inline-block; width: 40px; height: 23px; flex: 0 0 auto; cursor: pointer; } .src-toggle input { opacity: 0; width: 0; height: 0; } .src-slider { position: absolute; inset: 0; border-radius: 23px; background: var(--chip-border); transition: background .15s ease; } .src-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .15s ease; } .src-toggle input:checked + .src-slider { background: var(--accent); } .src-toggle input:checked + .src-slider::before { transform: translateX(17px); } /* ============================================================ Toast ============================================================ */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--chip-bg); color: var(--text); padding: 10px 16px; border-radius: 8px; border: 1px solid var(--chip-border); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 250; } .toast.visible { opacity: 1; } /* ============================================================ Tabs (categories) ============================================================ */ .tabs { position: sticky; top: var(--header-h, 58px); z-index: 40; display: flex; gap: 6px; padding: 8px 14px; background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; background: var(--chip-bg); color: var(--text); border: 1px solid var(--chip-border); padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .tab:hover { background: var(--button-hover); } .tab.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .tab-emoji { font-size: 13px; } /* ============================================================ Detail-modal thumbnail ============================================================ */ .detail-thumb { width: 100%; max-height: 280px; overflow: hidden; border-radius: 10px; margin: 0 0 14px; background: var(--empty); } .detail-thumb img { width: 100%; height: 100%; max-height: 280px; object-fit: cover; display: block; } /* ============================================================ Fun gallery (image-forward grid) ============================================================ */ .stories[data-layout="gallery"] { max-width: 1100px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .gallery-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .12s ease, transform .08s ease; } .gallery-card:hover { border-color: var(--accent); } .gallery-card:active { transform: translateY(1px); } .gallery-thumb { aspect-ratio: 16 / 10; background: var(--empty); overflow: hidden; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-card[data-no-thumb] { background: var(--chip-bg); } .gallery-body { padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; } .gallery-title { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--text); margin: 0; } .gallery-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; } .gallery-src { font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ Responsive ------------------------------------------------------------ Layout is single-column at every width (best line length for reading). Breakpoints tune density; the coarse-pointer block handles touch ergonomics independently of width (covers phones, tablets, and touch laptops alike). ============================================================ */ /* ---- Tablets (portrait phablets up to small laptops) ---- */ @media (max-width: 900px) { .stories { max-width: 100%; padding: 16px 20px 36px; } } /* ---- Phones ---- */ @media (max-width: 560px) { .top-bar { gap: 8px; padding: 10px 12px; padding-top: calc(10px + var(--safe-top)); } .logo { font-size: 20px; } .bar-right { gap: 8px; } .bar-btn { padding: 8px 12px; font-size: 12px; } .story-card { padding: 14px 15px; border-radius: 12px; gap: 11px; } .card-thumb { flex-basis: 84px; height: 84px; } .story-headline { font-size: 16px; } .story-summary { font-size: 13.5px; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .tabs { top: var(--header-h, 52px); } .stories { padding: 14px 12px 32px; gap: 12px; } /* Detail modal goes near-fullscreen so long source lists are scrollable */ .modal-card { max-height: 94vh; border-radius: 16px 16px 0 0; } .modal-backdrop { padding: 0; align-items: flex-end; } .modal-card.small-card { border-radius: 16px; align-self: center; margin: 0 14px; } .modal-backdrop:has(.small-card) { align-items: center; padding: 16px; } .detail-headline { font-size: 19px; } /* Stack the add-feed inputs so they don't overflow on a phone */ .add-row { flex-wrap: wrap; } .add-source input, .add-source select, .add-source #addBtn { flex: 1 1 100%; } .an-diff-detail { word-break: break-word; } } /* ---- Very small phones: shed the status chip (info is in the footer) ---- */ @media (max-width: 410px) { #status { display: none; } .logo { font-size: 18px; } .bar-btn { padding: 8px 10px; } .outlet-chips .also { width: 100%; margin-bottom: 2px; } } /* ---- Touch devices (phones + tablets + touch laptops): bigger hit areas. Width-independent so an iPad in landscape still gets comfy targets. ---- */ @media (hover: none) and (pointer: coarse) { .bar-btn { padding: 11px 16px; font-size: 14px; min-height: 44px; } .icon-btn { width: 46px; height: 46px; font-size: 20px; } .outlet-chip { padding: 8px 12px; min-height: 36px; } .outlet-row { padding: 14px 14px; } .theme-chip { min-height: 64px; } #lightDarkToggle { padding: 13px 14px; min-height: 48px; } .src-row { padding: 12px 12px; } .src-toggle { width: 46px; height: 27px; } .src-slider::before { width: 21px; height: 21px; } .src-toggle input:checked + .src-slider::before { transform: translateX(19px); } .src-del { width: 34px; height: 34px; } .add-source input, .add-source select { padding: 11px 10px; } .modal-close { font-size: 30px; padding: 8px 12px; } /* No hover state on touch — use the active press for feedback instead */ .story-card:hover { border-color: var(--border); } .story-card:active { border-color: var(--accent); transform: translateY(1px); } }