/* Touch and small screens. Two separate axes: pointer:coarse is about the
input (44px targets), max-width is about the room. Written in that order. */
/* === Mobile boards: Feed and Playlist ===
Two DOM scrollers covering the canvas, toggled by data-feed-lens on .
Keyed off attribute not width — entry is a manual choice, tablets get them too. */
#mobile-feed, #mobile-playlist {
--feed-inset-top: calc(max(12px, env(safe-area-inset-top)) + var(--chrome-button-h) + 20px);
--feed-inset-bottom: calc(calc(max(12px, env(safe-area-inset-bottom)) + var(--dock)) + var(--chrome-button-h) + 12px);
display: none;
position: fixed;
inset: 0;
z-index: 2;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: contain;
/* The scrollbar's room kept on both sides, so the column centres on the
window - the centre line the now-playing bar under it keeps (chrome.css). */
scrollbar-gutter: stable both-edges;
background: color-mix(in srgb, var(--ink) 6%, var(--paper));
contain: layout paint;
-webkit-overflow-scrolling: touch;
}
#mobile-feed { --feed-w: 940px; }
#mobile-playlist {
--feed-w: 520px;
--pl-gutter: clamp(14px, 4.5vw, 22px);
/* Clears the now-playing bar at the foot */
--feed-inset-bottom: calc(calc(max(16px, env(safe-area-inset-bottom)) + var(--dock)) + 78px);
}
:root[data-board-mode="mobile"]:not([data-feed-lens="playlist"]) #mobile-feed { display: block; }
:root[data-board-mode="mobile"][data-feed-lens="playlist"] #mobile-playlist { display: block; }
/* visibility not display — viewport.ts caches the box size */
:root[data-board-mode="mobile"] #viewport { visibility: hidden; }
/* Pen only shows on Feed (editable masthead), not Playlist (album hero) */
:root[data-board-mode="mobile"][data-feed-lens="playlist"] #mobile-header-edit-btn { display: none; }
/* Playlist has no selection or undo — editing chrome hidden */
:root[data-board-mode="mobile"][data-feed-lens="playlist"] .drawer-row { display: none; }
/* The Playlist's column moves right as the sidebar comes in, and centres in
the room the panel leaves, as the toolbar does (chrome.css). Padding and not
`left`, so the column moves and the background stays under the panel.
#mobile-playlist sits before #sidebar in index.html, so a sibling rule
cannot reach it. Above 600 px only: narrower, the panel covers the screen. */
@media not all and (max-width: 600px) {
#mobile-playlist { transition: padding-left var(--dur-base) var(--ease-back); }
:root:has(#sidebar.is-open) #mobile-playlist {
padding-left: calc(max(var(--panel-inset), env(safe-area-inset-left)) + min(var(--sidebar-w), 100vw - 28px));
}
}
.feed-sheet {
box-sizing: border-box;
position: relative;
width: min(100% - 24px, var(--feed-w));
margin-inline: auto;
margin-block: var(--feed-inset-top) var(--feed-inset-bottom);
min-height: calc(100dvh - var(--feed-inset-top) - var(--feed-inset-bottom));
/* No side padding — masthead is full-bleed, tiles inset themselves */
padding: 0 0 20px;
overflow: hidden;
border-radius: var(--radius);
background: color-mix(in srgb, var(--accent) 6%, #fff);
box-shadow: var(--shadow-1);
}
/* On a phone the Feed's sheet is the width of the screen, with square corners,
and the cards stand one card gap (GAP in ui/feed.ts) from its edges. Its top
and foot stay under the buttons and over the bar
(research/old/done-2026-09-15.md, R19). */
@media (max-width: 600px) {
#mobile-feed .feed-sheet { width: 100%; border-radius: 0; }
#mobile-feed .feed-grid { width: calc(100% - 20px); }
}
/* ::before so it multiplies against the sheet fill, not the photographs */
.feed-sheet::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
/* Masthead — the board name, styled by styleFeedMasthead() in feed/playlist.
Width capped so the 3:2 band does not overgrow on desktop sheets. */
.feed-masthead {
width: 100%;
max-width: 440px;
margin-inline: auto;
aspect-ratio: 3 / 2;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
overflow: hidden;
}
.feed-title {
margin: 0;
min-width: 0;
max-width: 100%;
font-family: var(--font-display);
font-size: calc(clamp(20px,
calc(var(--mobile-board-width, 0px) * var(--mobile-title-scale, 0.13)),
calc(var(--mobile-board-width, 0px) * var(--mobile-title-cap, 0.1875))
) * var(--mobile-title-fit, 1));
transform:
translateY(calc(var(--mobile-header-height, 0px) * var(--mobile-title-offset, 0) / 100))
scaleY(var(--mobile-title-stretch, 1));
transform-origin: 50% 52%;
line-height: normal;
padding-block: 0.2em 0.45em;
text-align: center;
text-wrap: balance;
overflow-wrap: anywhere;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.feed-title[data-nowrap] { white-space: pre; flex: none; max-width: none; }
.feed-title.is-default { opacity: 0.45; }
/* A press on the name opens the masthead editor (ui/feed.ts). */
.feed-title[role="button"] { cursor: pointer; }
/* Masonry grid — tiles positioned absolutely by ui/feed.ts */
.feed-grid {
position: relative;
width: calc(100% - 24px);
margin: 0 auto;
}
/* content-visibility: auto skips paint for offscreen tiles */
.feed-tile {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
border-radius: var(--leaf);
background: var(--paper-3);
box-shadow: var(--shadow-1);
content-visibility: auto;
}
/* Wherever card shadows are on, a tile stands off the sheet on a soft drop
shadow (R8). Harsh stays flat, as its cards on the canvas do. Keyed to the
shadow flag rather than to the Full stop, which left Balanced - shadows on -
with flat tiles and made the Card shadows switch do nothing here. The third
:not() is Light before ui/quality.ts has written the flags (tokens.css). */
:root:not([data-q-shadows="off"], [data-whimsy="2"], [data-quality="light"]:not([data-q-shadows])) .feed-tile {
box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent),
0 4px 12px -2px color-mix(in srgb, var(--ink) 24%, transparent);
}
/* A fence's name across the wall, over its cards (feedRuns() in ui/feed.ts).
The caption rule of the fence on the canvas (fences.css), laid flat. */
.feed-band {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 0 2px 6px;
border-bottom: 1px solid var(--rule);
}
.feed-band-name {
font-family: var(--font-body);
font-size: var(--t-small);
font-weight: 600;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.feed-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fill vs fit follows data-fit, the same attribute the canvas card keys
object-fit off (items.css). Written by writeTileFit() in ui/feed.ts from the
board-wide Fill/Fit option and any per-item override, so a photo set to Fit on
the board fits here too - letterboxed against the tile's own paper. */
.feed-tile[data-fit="contain"] > img,
.feed-tile[data-fit="contain"] video { object-fit: contain; }
/* Loading shimmer: shown while a tile's picture resolves - ui/feed.ts adds
.is-loading and drops it on the first paint. GPU-only, no image decode, and it
sits under the ![]()
, so it vanishes the instant real pixels land. Offscreen
tiles skip it for free (content-visibility above). The tile's own --paper-3
shows through the transparent band. */
.feed-tile.is-loading::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%,
color-mix(in srgb, var(--ink) 7%, transparent) 50%, transparent 70%);
background-size: 220% 100%;
animation: feed-shimmer 1.3s ease-in-out infinite;
}
@keyframes feed-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* Video: a poster with a play badge, swapped for a live