/* ========================================================================= TV / 10-foot mode. Everything here is scoped to `html.tv`, which js/tv.js sets only on a television, so this file costs a phone nothing but the bytes. Three rules govern the whole sheet: · Type is sized for three metres, not thirty centimetres. · Focus must be unmistakable — a TV has no cursor and no hover, so the focus ring is the only thing telling you where you are. · The outer ~4% of a TV panel may be cropped by overscan, so nothing important is allowed to touch the edge. ========================================================================= */ html.tv { --t-xs: 17px; --t-sm: 19px; --t-md: 22px; --t-lg: 26px; --topbar-h: 88px; --tabbar-h: 86px; --wrap: 1680px; /* Overscan inset. Applied as padding on the page containers below rather than on , so fixed chrome can still span the full panel. */ --tv-safe: 3.5vmin; } html.tv body { font-size: var(--t-md); line-height: 1.45; } /* ---------- focus: the cursor a television does not have ---------- */ html.tv :focus { outline: none; } html.tv :focus-visible, html.tv a:focus, html.tv button:focus, html.tv input:focus, html.tv select:focus, html.tv textarea:focus, html.tv [tabindex]:focus { outline: 4px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); /* Focus never lands flush against a cropped edge. */ scroll-margin: 18vh 6vw; } /* Cards and covers lift as well as ring — at three metres an outline alone on a busy shelf of colourful covers is easy to lose. */ html.tv .card:focus-visible, html.tv .card:focus, html.tv a.card:focus, html.tv .book-card:focus { transform: scale(1.06); box-shadow: var(--shadow-3); z-index: 2; transition: transform .12s ease; } /* ---------- layout: bigger, calmer, inside the safe area ---------- */ html.tv .wrap, html.tv main, html.tv .page { padding-left: max(var(--tv-safe), 20px); padding-right: max(var(--tv-safe), 20px); } html.tv .topbar { height: var(--topbar-h); padding-top: calc(var(--tv-safe) / 2); } html.tv .tabbar { height: var(--tabbar-h); } html.tv .tabbar a { font-size: var(--t-sm); } html.tv .tabbar svg { width: 30px; height: 30px; } html.tv .btn { padding: 14px 26px; font-size: var(--t-md); border-radius: 999px; } html.tv .btn-sm { padding: 11px 20px; font-size: var(--t-sm); } html.tv .iconbtn { width: 56px; height: 56px; } html.tv .iconbtn svg { width: 30px; height: 30px; } /* Fewer, larger covers per row: a 50-inch panel across a room shows about five comfortably, where a desktop grid packs eight. */ html.tv .shelf-row, html.tv .grid, html.tv .book-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; } html.tv .logo-text { font-size: 28px; } html.tv h1 { font-size: 40px; } html.tv h2 { font-size: 30px; } /* Hover-only affordances and install prompts are noise on a set that has no pointer and cannot install a PWA. */ html.tv .install-banner, html.tv .tooltip { display: none !important; } /* ---------- reader ---------- */ html.tv .reader-bar { height: 84px; padding: 0 max(var(--tv-safe), 20px); } html.tv .reader-title b { font-size: 26px; } html.tv .reader-title small { font-size: 19px; } html.tv .reader-progress { height: 6px; } html.tv .side-panel { width: min(560px, 44vw); font-size: var(--t-md); padding-top: var(--tv-safe); } /* Desktop caps the book at a 1000px reading measure, which is right at a desk and wrong across a room — it would leave a comic page filling a third of a 50-inch panel. The television gets the whole width, and reader.js then scales the page art up to fill it. */ html.tv .book-frame { max-width: none; box-shadow: none; } html.tv .toc-list a { padding: 14px 16px; font-size: var(--t-md); } /* The page-turn read-out. It appears for a beat on every remote press so the viewer can see the book moved even when the art itself is near-identical between two panels, then gets out of the way. */ .tv-hud { position: fixed; z-index: 40; right: max(3.5vmin, 20px); bottom: max(3.5vmin, 20px); display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; background: rgba(15, 23, 42, .82); color: #fff; font-family: var(--font-ui); font-size: 22px; font-weight: 800; letter-spacing: .01em; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } .tv-hud.show { opacity: 1; transform: none; } .tv-hud b { color: #fbbf24; font-weight: 800; } /* ---------- /tv — the setup guide ---------- Not scoped to html.tv: this page is read on a laptop or a phone, by the parent doing the setting up, not on the television itself. */ .tv-guide { padding-top: 34px; padding-bottom: 60px; max-width: 780px; } .tv-guide > h1 { font-family: var(--font-display); font-size: 34px; margin-bottom: 6px; } .tv-guide > .sub { margin-bottom: 26px; } .tv-guide-card { padding: 26px 28px; margin-bottom: 18px; } .tv-guide-card h2 { font-family: var(--font-display); font-size: var(--t-lg); margin-bottom: 10px; color: var(--brand); } .tv-guide-card p { margin-bottom: 12px; color: var(--ink-2); } .tv-guide-card p:last-child { margin-bottom: 0; } .tv-guide-card code { font-family: var(--font-ui); font-size: .92em; background: var(--surface-2); padding: 2px 7px; border-radius: 6px; } .tv-url { font-family: var(--font-ui); font-size: 24px; letter-spacing: -.01em; background: var(--brand-soft); color: var(--brand-dark); padding: 14px 20px; border-radius: var(--r-sm); text-align: center; } /* The remote's button list. It used to double as an overlay inside the reader on a television's first run; that was removed on 2026-09-01 (on a real set the dismiss press did not always reach the page, so it could sit there with no way out). The list now lives only here, on the page a parent reads while setting the television up. */ .tv-help-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; } .tv-help-keys div { display: flex; align-items: center; gap: 14px; } .tv-help-keys kbd { flex-shrink: 0; min-width: 68px; text-align: center; font-family: var(--font-ui); font-weight: 800; font-size: var(--t-sm); background: var(--surface-2); border: 1.5px solid var(--line); border-bottom-width: 3px; border-radius: 8px; padding: 7px 10px; color: var(--ink-2); } .tv-help-keys kbd.red { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; } .tv-help-keys kbd.green { background: #dcfce7; border-color: #86efac; color: #15803d; } .tv-help-keys kbd.yellow { background: #fef3c7; border-color: #fcd34d; color: #a16207; } .tv-help-keys kbd.blue { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; } .tv-guide-card .tv-help-keys { margin-top: 4px; } .tv-guide-card .tv-help-keys div { font-size: var(--t-md); } @media (max-width: 700px) { .tv-help-keys { grid-template-columns: 1fr; } } .tv-guide-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }