/* ==========================================================================
   shelf - app layer on top of tokens.css + components.css
   1. Bridge: old token names -> new tokens, so screens not rebuilt yet
      still follow the chosen look, theme and accent.
   2. App shell: header (appbar + subtabs), tabbar, search page.
   3. Pick your look + Personalize.
   ========================================================================== */

/* ---------- 1. bridge (temporary until every screen is rebuilt) ---------- */
[data-look] {
  --bg2: var(--chrome);
  --card: var(--surface);
  --card2: var(--surface-2);
  --muted2: color-mix(in oklab, var(--muted) 72%, var(--bg));
  --accent2: var(--accent);
  --accent-bg: var(--accent-fill);
  --good: var(--ok);
  --good-dim: color-mix(in oklab, var(--ok) 20%, var(--bg));
  --warn: #D99A1E;
  --radius: min(var(--radius-card), 16px);
  --shadow: var(--shadow-float);
  --shadow-lg: var(--shadow-sheet);
  --topbar-bg: var(--chrome);
  --border-hover: color-mix(in oklab, var(--line) 70%, var(--text));
  --ghost-hover: var(--tone);
  --danger-border: color-mix(in oklab, var(--danger) 40%, var(--bg));
  --danger-soft: color-mix(in oklab, var(--danger) 12%, var(--bg));
  --pill-done-text: var(--ok);
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px));
}
body.no-tabbar { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
h1, h2, h3, h2.section { font-family: var(--font-display); letter-spacing: var(--display-tracking); }
h2.section { font-weight: var(--section-weight); text-transform: var(--section-transform); font-size: var(--fs-section); }
main#view { max-width: 430px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* Always reserve the scrollbar's space, so short pages (Games, a loading
   Discover) don't make the centered column jump sideways on desktop. */
html { scrollbar-gutter: stable; }
/* old buttons keep their look for now, at sane heights */
.btn { height: auto; min-height: 44px; }
.btn.sm { min-height: 34px; padding: 0 14px; }
.gate-switch a, .set-legal a, .sub a { color: var(--accent); }
/* old search rows: keep title and description stacked */
.results .r .meta { display: block; font-size: inherit; font-weight: inherit; gap: 0; }

/* ---------- 2. app shell ---------------------------------------------- */
.app-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 51;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
  transform: translateY(0); will-change: transform;
}
.app-head > * { max-width: 430px; margin-left: auto; margin-right: auto; }
.app-head .subtabs:empty { display: none; }
body.no-head .app-head { display: none; }
main#view { padding-top: calc(var(--appbar-h) + var(--subtab-h) + 14px + env(safe-area-inset-top, 0px)); }
body.no-head main#view { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }

.logo { color: var(--text); height: var(--tap); padding: 0 6px; margin-left: -6px; border-radius: var(--radius-control); }
.logo-mark { height: 21px; width: auto; color: var(--accent); flex: none; }
.logo-word { height: 17px; width: auto; color: var(--text); }
[data-look="soft"] .logo-mark { height: 22px; }
.icon-btn .ic { width: var(--icon-size); height: var(--icon-size); }
[data-look="soft"] .icon-btn[aria-current] { color: var(--accent); }
.avatar .ic { width: 18px; height: 18px; }
.avatar.has-letter { background: var(--text); color: var(--bg); }
[data-look="soft"] .avatar.has-letter { background: var(--accent-fill); color: var(--on-accent); }

.subtabs a { cursor: pointer; user-select: none; -webkit-user-select: none; }
.subtabs .badge {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  background: var(--accent-fill); color: var(--on-accent);
}
[data-look="marquee"] .subtabs .badge { background: var(--text); color: var(--bg); }
[data-look="soft"] .subtabs a[aria-current] .badge { background: var(--bg); color: var(--text); }

/* tabbar sits above the search page, below sheets and dialogs */
.tabbar { z-index: 60; }
.tab { cursor: pointer; }
.tab .ic { width: var(--icon-size); height: var(--icon-size); }
.tab-sections.none .tab-pill { opacity: 0; }
.tab-pill { transition: transform var(--dur-pill) var(--ease-pill), opacity var(--dur-pill) var(--ease-standard); }
[data-look="marquee"] .tab-extras .tab { border-radius: var(--radius-control); transition: background var(--dur-pill) var(--ease-standard), color var(--dur-pill) var(--ease-standard); }
[data-look="marquee"] .tab-extras .tab[aria-current] { background: var(--nav-pill); }
[data-look="marquee"] .tab-extras .tab[aria-current] .avatar.has-letter { background: var(--nav-pill-text); color: var(--nav-pill); }
/* Marquee: one orb slides across the whole bar (placeTabOrb in index.html); it replaces
   the section pill and the Discover/You backgrounds. */
.tab-orb { display: none; }
[data-look="marquee"] .tab-orb { display: block; position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--radius-control); background: var(--nav-pill); opacity: 0; pointer-events: none;
  transition: transform var(--dur-pill) var(--ease-pill), width var(--dur-pill) var(--ease-pill), opacity var(--dur-pill) var(--ease-standard); }
[data-look="marquee"] .tab-pill { display: none; }
[data-look="marquee"] .tab-extras .tab[aria-current] { background: transparent; }
.tab .avatar { width: 28px; height: 28px; font-size: 12px; }
/* signed out: just the person outline in the tab, no circle behind it */
.tab .avatar:not(.has-letter) { background: none; color: inherit; }
.tab .avatar:not(.has-letter) .ic { width: var(--icon-size); height: var(--icon-size); }
body.no-tabbar .tabbar { display: none; }
.toast { z-index: 160; }

/* search page: a full-screen layer under the tabbar (Back closes it) */
.overlay.search-overlay {
  z-index: 55; display: block; padding: 0; background: var(--bg);
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto;
  animation: search-in var(--dur-sheet) var(--ease-sheet);
}
@keyframes search-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.search-page {
  max-width: 430px; margin: 0 auto; min-height: 100%;
  padding: env(safe-area-inset-top, 0px) 0 calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom, 0px));
}
.search-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; height: calc(var(--appbar-h) + 8px); padding: 6px var(--gutter) 0 4px; background: var(--bg); }
.search-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px;
  padding: 0 4px 0 14px; border-radius: var(--radius-control);
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted);
}
.search-field:focus-within { box-shadow: inset 0 0 0 2px var(--text); }
[data-look="soft"] .search-field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.search-field input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font: inherit; font-size: 16px; color: var(--text); padding: 0; box-shadow: none; border-radius: 0;
}
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field .clear { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.search-field .clear[hidden] { display: none; }
.search-page .results {
  position: static; width: auto; max-height: none; overflow: visible;
  margin: 8px var(--gutter) 0; border: 0; box-shadow: none; background: transparent; border-radius: 0;
}
.search-page .results .r { border-bottom: 1px solid var(--line); padding: 10px 0; }
.search-page .results .r:hover { background: transparent; }
.search-page .res-head { padding: 18px 0 6px; font-family: var(--font-display); font-size: var(--fs-section); font-weight: var(--section-weight); text-transform: var(--section-transform); letter-spacing: var(--display-tracking); color: var(--text); }
.search-page .res-head.global { border-top: 0; margin-top: 8px; }
.search-hint { margin: 28px var(--gutter); color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 10px; }
#search-park { display: none; }

/* ---------- 3. pick your look ------------------------------------------ */
.choose-screen {
  position: fixed; inset: 0; z-index: 900; overflow-y: auto;
  background: var(--bg); color: var(--text); font-family: var(--font-body);
  transition: opacity var(--dur-sheet) var(--ease-standard);
}
.choose-screen.out { opacity: 0; pointer-events: none; }
.choose-screen .choose { max-width: 430px; margin: 0 auto; }
.choose-mark { width: 44px; height: auto; color: var(--accent); margin-bottom: 6px; }
.look-card { cursor: pointer; }
.look-name { color: var(--text); }
.btn .ic { width: 20px; height: 20px; }

/* ---------- Personalize ------------------------------------------------- */
.pagebar h1 { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); }
.pagebar .icon-btn { margin-left: 0; }
.settings { padding-bottom: 24px; }
.swatch { cursor: pointer; }
.swatch[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
  background: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
.swatch-name { display: none; }
.set-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
/* new pages sit edge to edge inside the old <main> padding */
.settings .set-group { background: none; border: 0; border-radius: 0; overflow: visible; margin: 0; }
[data-look="soft"] .settings .set-group.card { padding: 14px; border-radius: var(--radius-card); background: var(--surface); }

/* sections: reorder + show/hide (kept from the old Personalize) */
.sec-list { display: flex; flex-direction: column; gap: 6px; }
.sec-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 8px 0 4px; background: var(--surface); border-radius: var(--radius-row); }
[data-look="marquee"] .sec-row { border-bottom: 1px solid var(--line); background: transparent; padding-left: 0; }
.sec-row.dragging { box-shadow: var(--shadow-sheet); background: var(--surface); position: relative; z-index: 2; }
.sec-grip { width: 32px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; touch-action: none; flex: none; }
.sec-name { flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.sec-name .ic { color: var(--muted); }
.sec-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.toggle {
  position: relative; width: 50px; height: 30px; flex: none; border-radius: 999px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background var(--dur-pill) var(--ease-standard);
}
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform var(--dur-pill) var(--ease-pill);
}
.toggle[aria-checked="true"] { background: var(--text); box-shadow: none; }
[data-look="soft"] .toggle[aria-checked="true"] { background: var(--accent-fill); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }

/* Icons wrapped in a span (shelfIcon inside el("span")) sit on the text
   baseline and float high; make them blocks so flex centering is exact. */
span > svg.ic { display: block; }

/* ---------- App icon picker (Android app only) ---------- */
.appicon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.appicon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); }
.appicon-tile { width: 68px; height: 68px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.06); }
.appicon-tile svg { width: 56%; height: auto; }
.appicon-name { font-size: 12px; font-weight: 600; color: var(--muted); }
.appicon[aria-checked="true"] .appicon-tile { outline: 2.5px solid var(--text); outline-offset: 3px; }
.appicon[aria-checked="true"] .appicon-name { color: var(--text); }
.appicon-check { position: absolute; top: -4px; right: calc(50% - 42px); width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--text); color: var(--bg); }

/* Android app: no Apple sign-in (its web flow can't run inside the app) */
/* Apple sign-in visibility is decided in index.html (syncAppleButton) */

/* Marquee sub-tabs: one underline that slides between tabs (placeSubtabLine) */
[data-look="marquee"] .subtabs { position: relative; }
.subtab-line { display: none; }
[data-look="marquee"] .subtab-line { display: block; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); pointer-events: none;
  transition: transform var(--dur-pill) var(--ease-pill), width var(--dur-pill) var(--ease-pill); }
[data-look="marquee"] .subtabs.has-line a[aria-current] { box-shadow: none; }
/* Soft Stack: the selected chip slides. Chip fills move to ::before so the moving chip
   (.subtab-line) passes over the other chips' fills but under their labels. */
[data-look="soft"] .subtabs { position: relative; isolation: isolate; }
[data-look="soft"] .subtab-line { display: block; position: absolute; left: 0; top: 0; width: 0; z-index: -1; border-radius: var(--radius-chip); background: var(--text); pointer-events: none;
  transition: transform var(--dur-pill) var(--ease-pill), width var(--dur-pill) var(--ease-pill); }
[data-look="soft"] .subtabs.has-line a { position: relative; background: none; transition: color var(--dur-pill) ease; }
[data-look="soft"] .subtabs.has-line a::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--surface-2); }

/* switching between sibling tabs or sections: content glides in from that side (slideView) */
@keyframes view-from-r { from { opacity: .35; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes view-from-l { from { opacity: .35; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
#view.slide-from-r > * { animation: view-from-r .26s var(--ease-standard) both; }
#view.slide-from-l > * { animation: view-from-l .26s var(--ease-standard) both; }
#view.slide-from-r > .status-seg, #view.slide-from-l > .status-seg { animation: none; }   /* the switch you tapped stays put */
@media (prefers-reduced-motion: reduce) { #view.slide-from-r > *, #view.slide-from-l > * { animation: none; } }

/* ---------- Android app: use the whole screen (edge to edge) ----------
   Top: the status bar always sits on the page colour, even while the header slides away
   on scroll (overlays like detail pages sit above this and keep their art under it).
   Bottom: content runs on under the system buttons and fades into the page colour. */
.native-app body::before { content: ''; position: fixed; z-index: 52; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); pointer-events: none; }
.native-app body::after { content: ''; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; height: calc(env(safe-area-inset-bottom, 0px) + 40px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg) 72%, transparent) 55%, color-mix(in srgb, var(--bg) 92%, transparent));
  pointer-events: none; }
/* Marquee's tab bar already covers the bottom edge in one colour, so no fade there */
.native-app[data-look="marquee"] body::after { display: none; }