/* ============================================================
DAPS.Web — consumer streaming screen layout (WO5).
Browse · Watch · Channel · Reader. Faithful CSS translation of the
design-system/ui_kits/daps-streaming/*Screen.jsx layout wrappers.
RULE: design tokens ONLY for colour / font / radius / motion. A few
structural px (grid track sizes, hairlines, tiny chip offsets) are
permitted where no token applies. Components themselves come from the
WO3/WO4 Tag Helpers — this file only composes and positions them.
============================================================ */
/* ---- shared screen padding wrapper ---- */
.screen {
padding: var(--space-5) var(--space-8) var(--space-12);
}
/* ---- card link wrapper (content cards navigate via an ) ---- */
.card-link {
display: block;
text-decoration: none;
color: inherit;
border-radius: var(--card-radius);
}
.card-link:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
/* ---- responsive content grid (auto-fill, minmax 240) ---- */
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-5);
}
/* ============================================================
Browse / Home
============================================================ */
.browse-filters {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
margin-bottom: var(--space-6);
}
/* Featured hero — 2-col poster + identity panel */
.featured {
display: grid;
grid-template-columns: 1.6fr 1fr;
border-radius: var(--card-radius);
overflow: hidden;
border: 1px solid var(--border-subtle);
margin-bottom: var(--space-8);
}
.featured__poster {
position: relative;
aspect-ratio: 16 / 9;
background-color: var(--bg-tertiary);
background-size: cover;
background-position: center;
}
.featured__scrim {
position: absolute;
inset: 0;
background: var(--player-scrim-bottom);
}
.featured__badge {
position: absolute;
top: var(--space-3);
left: var(--space-3);
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-button);
background: var(--player-scrim);
color: var(--on-media);
font-family: var(--font-body);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
}
.featured__badge i {
width: 14px;
height: 14px;
color: var(--accent-secondary);
}
.featured__panel {
padding: var(--space-6);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-3);
background: var(--card-bg);
}
.featured__eyebrow {
font-family: var(--font-body);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
color: var(--accent-primary);
}
.featured__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h1);
line-height: var(--lh-heading);
letter-spacing: var(--ls-display);
color: var(--text-primary);
}
.featured__meta {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--text-muted);
}
.featured__actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-1);
}
/* Shelves */
.shelf {
margin-bottom: var(--space-8);
}
.shelf__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.shelf__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h2);
color: var(--text-primary);
}
.shelf__seeall {
border: none;
background: transparent;
color: var(--accent-primary);
font-family: var(--font-body);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
cursor: pointer;
min-height: 44px;
padding: 0 var(--space-2);
}
/* Muted secondary line in a shelf head (e.g. the search result count). */
.shelf__meta {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--text-muted);
}
/* ============================================================
History — page header toolbar (pause/resume + clear-all) and the per-card
"Remove from history" overlay (09e Phase 2). Tokens only.
============================================================ */
.history-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.history-head__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h1);
color: var(--text-primary);
}
.history-head__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.history-head__form { margin: 0; }
/* Each history card wraps its navigating plus a sibling remove