/* Overview preview (card layout). Shares style.css (pane, frost, rim, glyph, social discs, badge).
   Cards: thin-rim glass slabs drawn like the homepage pane (same squircle, same rim strokes); no bezel. */
@font-face { font-family: 'MPSRounded'; src: url('assets/fonts/Nunito-VariableFont_wght.ttf') format('truetype'); font-weight: 200 1000; font-display: block; }
:root { --rounded: ui-rounded, 'SF Pro Rounded', 'MPSRounded', system-ui, sans-serif; }

/* The scroller always fills the pane, so the pane's squircle clip-path (#pane, from app.js) is what cuts scrolled
   content at the rounded edge, vertically (portrait) and horizontally (landscape). */
#scroll { position: absolute; inset: 0; overscroll-behavior: contain; outline: none; }
#scroll.stack { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; }
/* Rolodex (desktop + landscape): no scrolling, cards placed by transforms; near-flat perspective */
#scroll.wheel.drum { perspective: 6000px; }
#scroll.wheel { overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#col { position: relative; display: flex; }
#scroll.stack #col { flex-direction: column; align-items: center; margin: 0 auto; }
#scroll.wheel #col { display: block; position: absolute; left: 0; top: 0; }
#scroll.wheel .ocard { position: absolute; will-change: transform, opacity; transform-origin: 50% 50%; backface-visibility: hidden; cursor: pointer; }
#scroll.wheel .ocard.front { cursor: auto; }
#scroll.wheel .ocard.side video { pointer-events: none; }
.ocard > .ph.side { text-align: left; }
/* Rolodex simplifications: side cards have no own frost and no drop shadow; titles go flat on side cards and while
   the wheel turns (the front card's glass title fades back in at rest) */
#scroll.wheel.drum .ocard { transform-origin: 50% 100%; }
#scroll.wheel.sidelite .ocard.side > .cfrost { display: none; }
#scroll.wheel.sidelite .ocard.side > svg.cbg, #scroll.wheel.sidenoshadow .ocard.side > svg.cbg { filter: none !important; }
.ocard > svg.cdim { display: none; position: absolute; left: 0; top: 0; pointer-events: none; z-index: 9; opacity: 0; }
#scroll.cascade .ocard > svg.cdim { display: block; }
.gtitle { position: relative; }
.gflat { display: none; }
#scroll.wheel .gflat { display: flex; flex-direction: column; align-items: center; position: absolute; left: 0; right: 0; top: 0;
  font-family: 'RammettoOne', sans-serif; white-space: nowrap; color: var(--flatFill); text-shadow: var(--flatShadow);
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease-out, visibility 0s linear 0.18s; }
#scroll.wheel .gtitle > .tline { transition: opacity 0.18s ease-out, visibility 0s linear 0s; }
#scroll.wheel.flatmove.moving .gflat, #scroll.wheel.sideflat .ocard.side .gflat { opacity: 1; visibility: inherit; transition: opacity 0.12s ease-out, visibility 0s; }
#scroll.wheel.flatmove.moving .gtitle > .tline, #scroll.wheel.sideflat .ocard.side .gtitle > .tline { opacity: 0; visibility: hidden; transition: opacity 0.12s ease-out, visibility 0s linear 0.12s; }

.sblabel { font-family: 'RammettoOne', sans-serif; font-weight: normal; text-transform: uppercase; color: var(--sbFill); text-shadow: var(--sbShadow); }
/* page heading in the back-chip row (chip: top 12, 46 tall): inside the scroller on portrait, fixed on landscape */
#ovHeading { display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 46px; flex: none; margin: 0; }
#col > #ovHeading { width: 100%; height: 70px; padding-top: 12px; }
#pane > #ovHeading { position: absolute; left: 0; right: 0; top: 12px; height: 46px; pointer-events: none; z-index: 3; }

/* ---- card-shaped glass pane ---- */
.ocard { position: relative; flex: none; margin: 0; }
.ocard > .cfrost { position: absolute; left: 0; top: 0; pointer-events: none; }
.ocard > svg.cbg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ocard > svg.crim { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.vwrap { position: absolute; overflow: hidden; background: #000; }
.vwrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; outline: none; }
/* keep Chromium's native control bar (buttons + timeline) inside the rounded bottom corners */
.vwrap video::-webkit-media-controls-panel { padding-left: var(--ctlX, 0px); padding-right: var(--ctlX, 0px); padding-bottom: var(--ctlB, 0px); box-sizing: border-box; }
.vwrap video:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: -3px; }
.ctext { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ctext .kicker { font-size: 13px; line-height: 1.2; letter-spacing: 0.02em; }
.gtitle { display: flex; flex-direction: column; align-items: center; font-weight: normal; pointer-events: none; margin: 0; }
.gtitle .tline { display: flex; flex-direction: row; }
.gtitle .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ocard .ph { font-family: var(--rounded); font-weight: 600; line-height: 1.42; color: var(--phFill); text-shadow: var(--phShadow); font-style: normal; }

/* ---- back chip + pager chips (FAQ BackChip = DeckControlButtonStyle, diameter 46) ---- */
.sgs { position: relative; flex: none; isolation: isolate; }
.sgs > svg.sgsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.sgs > .sgsh { position: absolute; inset: 0; pointer-events: none; z-index: -2; }
/* pressed (lit) state: cross-fade of pre-drawn layers, opacity only; easeOut 0.25 s like the app */
.sgs > .lit { opacity: 0; transition: opacity 0.25s cubic-bezier(0, 0, 0.58, 1); will-change: opacity; }
.sgs > .sgsh:not(.lit) { transition: opacity 0.25s cubic-bezier(0, 0, 0.58, 1); }
.sgs.pressed > .lit { opacity: 1; }
.sgs.pressed > .sgsh:not(.lit) { opacity: 0; }
.sgs > svg:not(.sgsvg) { transition: color 0.25s cubic-bezier(0, 0, 0.58, 1), filter 0.25s cubic-bezier(0, 0, 0.58, 1); }
.sgs.pressed, #back.pressed { color: #fff; }
.sgs.pressed > svg:not(.sgsvg) { filter: drop-shadow(0.56px -1.4px 0 rgba(0,0,0,0.34)); }
#back { position: absolute; left: 16px; top: 12px; width: 46px; height: 46px; border-radius: 23px; display: grid; place-items: center;
  color: var(--chipIcon); text-decoration: none; outline: none; z-index: 5; -webkit-tap-highlight-color: transparent; }
#back svg:not(.sgsvg), .pg svg:not(.sgsvg) { width: 19px; height: 19px; filter: drop-shadow(0.56px -1.4px 0 rgba(0,0,0,0.24)); }
#back:focus-visible > svg.sgsvg:not(.lit), .pg:focus-visible > svg.sgsvg:not(.lit) { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 3px; border-radius: 23px; }
#pager { position: absolute; display: none; gap: 14px; z-index: 4; }
#pager.on { display: flex; }
.pg { width: 46px; height: 46px; border-radius: 23px; border: 0; padding: 0; background: none; display: grid; place-items: center;
  color: var(--chipIcon); cursor: pointer; outline: none; transition: opacity 0.2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

#appstore, #social { z-index: 4; }