/* SameHome v0.8 — Bento redesign (dark)
 * Plain CSS, no Tailwind, no external dependencies.
 * Palette + card recipe transcribed from refer/mockups-directions.html.
 */

/* -------------------------------------------------------------------------- *
 *  Design tokens
 * -------------------------------------------------------------------------- */

:root {
  --bg:            #0a0a0a;
  --bg-elevated:   #0f0f0f;
  --card:          #141414;
  --card-hover:    #1a1a1a;

  --fg:            #f5f5f7;
  --fg-soft:       #cccccc;
  --muted:         #999999;
  --faint:         #666666;

  --border:        #222222;
  --border-strong: #333333;

  --gold:          #e0b86e;
  --gold-soft:     rgba(224, 184, 110, 0.27); /* E0B86E44 */
  --gold-glow:     rgba(224, 184, 110, 0.53); /* E0B86E88 */

  --serif: "New York", "Songti SC", "STSong", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
           "Helvetica Neue", "Segoe UI", "Microsoft YaHei", sans-serif;

  --radius-card: 20px;
  --radius-thumb: 12px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
}

/* -------------------------------------------------------------------------- *
 *  Reset + base
 * -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}

p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

::selection { background: var(--gold); color: #000; }

.gold { color: var(--gold); }

/* -------------------------------------------------------------------------- *
 *  Container
 * -------------------------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* -------------------------------------------------------------------------- *
 *  Top nav
 * -------------------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.85);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
          backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
}

.site-nav__brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  flex: 0 0 auto;
  color: var(--fg);
}

.site-nav__brand:hover { color: var(--fg); }

.site-nav__spacer { flex: 1 1 auto; }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav__links::-webkit-scrollbar { display: none; }

.site-nav__link {
  padding: 6px 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav__link:hover { color: var(--fg); }

.site-nav__link--active {
  color: var(--fg);
  border-bottom-color: var(--gold);
}

.site-nav__link__count {
  color: var(--faint);
  font-size: 11px;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- *
 *  Page hero — shared by every sub-page (apps / music / moments).
 *  A single class family so the three pages breathe on the same rhythm.
 * -------------------------------------------------------------------------- */

.page-header {
  padding: 56px 0 32px;
}

.page-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.page-title {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--fg);
}

.page-title__num {
  color: var(--gold);
  font-size: 0.6em;
  vertical-align: 0.25em;
  margin-left: 0.4em;
  letter-spacing: 0;
}

.page-kicker {
  color: var(--muted);
  font-size: 14px;
  max-width: 60ch;
  line-height: 1.75;
}

/* -------------------------------------------------------------------------- *
 *  Filter chips + search
 * -------------------------------------------------------------------------- */

.apps-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}

.chip-row::-webkit-scrollbar { display: none; }

.chip {
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 12.5px;
  color: var(--fg-soft);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip:hover { border-color: var(--border-strong); }

.chip--active {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  font-weight: 500;
}

.chip__count {
  opacity: 0.55;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
}

.chip--active .chip__count { opacity: 0.75; }

.apps-search {
  position: relative;
  flex: 0 0 220px;
}

.apps-search__input {
  width: 100%;
  padding: 8px 14px 8px 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 12.5px;
  color: var(--fg);
  font-family: var(--sans);
  transition: border-color 0.15s ease;
}

.apps-search__input:focus {
  outline: none;
  border-color: var(--gold);
}

.apps-search__input::placeholder { color: var(--faint); }

.apps-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--muted);
  pointer-events: none;
}

/* -------------------------------------------------------------------------- *
 *  Apps grid + card
 * -------------------------------------------------------------------------- */

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-bottom: 80px;
}

.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  color: var(--fg-soft);
}

.app-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-soft);
  background: var(--card-hover);
  color: var(--fg-soft);
}

.app-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.app-card__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-thumb);
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  object-fit: cover;
}

.app-card__thumb--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  color: #000;
  background: linear-gradient(135deg, var(--gold) 0%, #8f6f3d 100%);
}

.app-card__title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.app-card__name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.app-card__idx {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold);
  opacity: 0.5;
  letter-spacing: 0.02em;
  padding-top: 2px;
}

.app-card__desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  flex: 1 1 auto;
}

.app-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.app-card__foot .cat { color: var(--fg-soft); }
.app-card__foot .dot { opacity: 0.4; }
.app-card__foot .store {
  margin-left: auto;
  color: var(--gold);
}

.app-card:hover .app-card__foot .store {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Secondary chip: apps with their own website surface a small gold pill
 * before the App Store link. Click routing lives in apps.html (delegated). */
.app-card__homepage {
  margin-left: auto;                    /* pushes .store to the far right */
  padding: 3px 8px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  color: var(--gold);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.app-card__homepage:hover,
.app-card__homepage:focus-visible {
  background: rgba(224, 184, 110, 0.1);
  border-color: var(--gold);
  outline: none;
}

.app-card__foot .app-card__homepage + .store {
  margin-left: 0;                       /* homepage chip already took margin-left:auto */
}

/* Deep-link highlight — utils.js adds .is-highlighted for ~2s on the card
 * the hash router jumps to. Both music.html and moments.html rely on this. */

.is-highlighted {
  box-shadow: 0 0 0 2px var(--gold-soft), 0 0 24px -4px rgba(224, 184, 110, 0.35);
  transition: box-shadow 0.4s ease;
}

/* -------------------------------------------------------------------------- *
 *  Bento home — index.html
 *  6-col dense grid on desktop → 4 on tablet → 2 on phone.
 *  Card recipes match refer/mockups-directions.html verbatim.
 * -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  padding: 32px 0 80px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-soft);
}

.section-label {
  grid-column: span 6;
  padding: 24px 0 4px;
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.section-label .muted {
  margin-left: 8px;
  color: var(--faint);
  letter-spacing: 0.05em;
  text-transform: none;
  font-size: 11.5px;
}

/* Hero */
.hero-card {
  grid-column: span 4;
  grid-row: span 2;
  padding: 32px;
  background: linear-gradient(135deg, #141414 0%, #1e1712 100%);
  border-color: rgba(224, 184, 110, 0.13); /* #E0B86E22 */
}

.hero-eyebrow {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-brand {
  font-family: var(--serif);
  font-size: clamp(40px, 4.5vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
}

.hero-brand .gold { color: var(--gold); }

.hero-desc {
  color: #a5a5a5;
  font-size: 15px;
  max-width: 44ch;
  line-height: 1.7;
  margin-top: 14px;
}

.hero-meta {
  display: flex;
  gap: 20px;
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-meta strong {
  color: var(--fg-soft);
  font-weight: 500;
}

/* Player teaser */
.player-card {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(160deg, #1a1a1a 0%, #241812 100%);
  cursor: pointer;
}

.player-cover {
  width: 100%;
  height: 52%;
  border-radius: 12px;
  /* Vinyl SVG layered on top of the warm gold-to-plum radial gradient. */
  background-image: url('./decor/player-vinyl.svg'),
                    radial-gradient(circle at 30% 30%, var(--gold), #7a5c34 55%, #241812 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 92% auto, cover;
  margin-bottom: 12px;
}

.player-eyebrow {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.player-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
}

.player-sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

/* Featured app */
.feat-app {
  grid-column: span 2;
  grid-row: span 2;
  padding: 22px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.85);
}

.feat-app:hover { border-color: rgba(255, 255, 255, 0.12); }

.feat-app-num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--serif);
  color: var(--gold);
  font-size: 24px;
  opacity: 0.5;
  letter-spacing: 0.02em;
}

.feat-app-cat {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.feat-app-name {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
}

.feat-app-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  line-height: 1.6;
  flex: 1 1 auto;
}

.feat-app-link {
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* Latest moment */
.moment-preview-card {
  grid-column: span 3;
  grid-row: span 2;
  cursor: pointer;
}

.moment-preview-card .moment-eyebrow {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.moment-preview-card .moment-photo {
  width: 100%;
  height: 55%;
  border-radius: 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #3d5a3d, #1a2e1a);
  object-fit: cover;
  display: block;
}

.moment-preview-card .moment-text {
  color: var(--fg-soft);
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.moment-preview-card .moment-date {
  color: var(--faint);
  font-size: 11.5px;
  margin-top: 8px;
  letter-spacing: 0.05em;
}

/* About */
.about-card {
  grid-column: span 3;
  grid-row: span 2;
  scroll-margin-top: 84px; /* clear the sticky nav when linked as #about */
}

.about-eyebrow {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.about-text {
  color: #c5c5c5;
  font-size: 14.5px;
  line-height: 1.75;
}

.about-text p + p { margin-top: 10px; }
.about-link { color: var(--gold); }

/* CTA to sub-pages */
.cta-card {
  grid-column: span 2;
  grid-row: span 2;
  padding: 24px;
  background: var(--bg-elevated);
  border: 1px solid #1e1e1e;
  cursor: pointer;
}

.cta-card:hover {
  border-color: var(--gold-glow);
  background: #131110;
}

.cta-eyebrow {
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cta-title {
  font-family: var(--serif);
  font-size: 38px;
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1;
}

.cta-title .arrow {
  color: var(--gold);
  margin-left: 0.3em;
  font-family: var(--sans);
  font-size: 28px;
}

.cta-sub {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin-top: 8px;
}

/* -------------------------------------------------------------------------- *
 *  Bento decorations — SVG art layered onto cards
 *
 *  Each card gets a ::before pseudo painted with a decorative SVG, positioned
 *  toward an anchor edge and pinned behind the copy. The `.card` base rule
 *  already provides `position: relative` and `overflow: hidden`, so the pseudo
 *  clips at the card border. Copy is lifted with `z-index: 1` so the art
 *  stays behind. Absolutely-positioned children (like `.feat-app-num`) get
 *  `z-index: 2` so they float on top of the art AND the copy.
 * -------------------------------------------------------------------------- */

.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./decor/hero-orbit.svg');
  background-repeat: no-repeat;
  background-position: right -30px bottom -20px;
  background-size: 360px auto;
  pointer-events: none;
  z-index: 0;
}
.hero-card > * { position: relative; z-index: 1; }

.feat-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right -14px bottom -14px;
  background-size: 190px auto;
  pointer-events: none;
  z-index: 0;
}
#feat-1::before { background-image: url('./decor/feat-wing.svg'); }
#feat-2::before { background-image: url('./decor/feat-lumen.svg'); }
#feat-3::before { background-image: url('./decor/feat-tick.svg'); }

/* Keep the numeric badge floating above the art (badge is position:absolute). */
.feat-app > *:not(.feat-app-num) { position: relative; z-index: 1; }
.feat-app-num { z-index: 2; }

.moment-preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./decor/moment-lines.svg');
  background-repeat: no-repeat;
  background-position: right -8px center;
  background-size: 280px auto;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}
.moment-preview-card > * { position: relative; z-index: 1; }

/* Empty state — shared across sub-pages */

.page-empty {
  padding: 64px 20px;
  text-align: center;
  color: var(--faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
}

.apps-empty { grid-column: 1 / -1; }

/* -------------------------------------------------------------------------- *
 *  Music page — track list
 * -------------------------------------------------------------------------- */

.tracks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 140px; /* leave room for the sticky mini-player */
}

.track {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  color: var(--fg-soft);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
}

/* All tracks currently share the #same_005 channel tag — showing it on
   every row turns useful metadata into visual repetition. Hide until we
   have a heterogenous tag mix; the DOM node stays for future reveal. */
.track__tag { display: none; }
.track__meta:empty,
.track__meta:has(> *:only-child.track__tag) { display: none; }

.track:hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
}

.track--current {
  background: rgba(224, 184, 110, 0.06);
  border-color: var(--gold-soft);
}

.track__idx {
  flex: 0 0 32px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.track--current .track__idx { color: var(--gold); }

.track__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 14px;
  width: 32px;
}

.track__bars span {
  width: 2px;
  background: var(--gold);
  animation: track-bars 0.9s ease-in-out infinite;
}

.track__bars span:nth-child(1) { height: 100%; animation-delay: 0s; }
.track__bars span:nth-child(2) { height: 55%;  animation-delay: 0.2s; }
.track__bars span:nth-child(3) { height: 85%;  animation-delay: 0.4s; }

@keyframes track-bars {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1.0); }
}

.track__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.track__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track--current .track__title { color: var(--gold); }

.track__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.track__meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
}

.track__tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.06em;
}

.track__dur {
  flex-shrink: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  order: 20;
}

/* Share button is global-absolute by default (moment cards want that);
   in the flat track row it stacked on top of .track__dur, so pull it
   INTO the flex row and hide until row hover. */
.track [data-share-slot] {
  order: 10;
  display: inline-flex;
  align-items: center;
}
.track .share-btn {
  position: static;
  top: auto;
  right: auto;
  width: 28px;
  height: 28px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.track:hover .share-btn,
.track:focus-within .share-btn {
  opacity: 0.65;
  pointer-events: auto;
  transform: translateX(0);
}
.track .share-btn:hover { opacity: 1; color: var(--gold); }

/* -------------------------------------------------------------------------- *
 *  Sticky mini-player (music page)
 * -------------------------------------------------------------------------- */

.mini-player {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(150%);
  z-index: 60;
  width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  transition: transform 0.35s cubic-bezier(0.3, 1, 0.4, 1);
}

.mini-player.is-visible { transform: translateX(-50%) translateY(0); }

.mini-player__disc {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.mini-player__ring,
.mini-player__progress {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.mini-player__ring circle { stroke: rgba(255, 255, 255, 0.08); }
.mini-player__progress circle {
  stroke: var(--gold);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.15s linear;
}

.mini-player__disc-inner {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-player__disc-inner::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}

.mini-player.is-playing .mini-player__disc-inner {
  animation: mini-spin 6s linear infinite;
}

@keyframes mini-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.mini-player__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.mini-player__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-player__sub {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-player__btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.mini-player__btn:hover { background: rgba(255, 255, 255, 0.18); }
.mini-player__btn:active { transform: scale(0.92); }
.mini-player__btn svg { width: 16px; height: 16px; }

/* Prev / Next + Play cluster on the right of the pill. */
.mini-player__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mini-player__nav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.mini-player__nav:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg); }
.mini-player__nav:active { transform: scale(0.9); }
.mini-player__nav svg { width: 14px; height: 14px; }

/* Fret bar on the current track — anchors the eye on the playing row. */
.track--current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}

/* Row hover: number becomes a play triangle so the click affordance is obvious.
   The playing row keeps its animated bars, so this only fires on other rows. */
.track:not(.track--current):hover .track__idx {
  color: transparent;
  position: relative;
}
.track:not(.track--current):hover .track__idx::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0b86e'><path d='M8 5v14l11-7z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

/* Keyboard-shortcut hint row under the page header. */
.kbd-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.02em;
}

.kbd-hint { display: inline-flex; align-items: center; gap: 6px; }

.kbd-hint kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--card);
  color: var(--fg-soft);
  line-height: 1;
}

/* Play-mode toggle — lives on the kbd-hints row, clickable AND has an R
   keyboard shortcut. State communicated via icon + label + gold ring. */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg-soft);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.mode-toggle:hover { color: var(--gold); border-color: var(--gold-soft); }

/* Non-default modes glow gold so the state reads at a glance. */
.mode-toggle[data-mode="one"],
.mode-toggle[data-mode="shuffle"] {
  color: var(--gold);
  border-color: var(--gold-soft);
  background: rgba(224, 184, 110, 0.06);
}

.mode-toggle .mode-icon { flex-shrink: 0; }
.mode-toggle .mode-label { line-height: 1; }

/* Mobile: hide only the kbd chips (no physical keyboard), but keep the
   mode toggle button — it's the only mode-switching affordance on touch. */
@media (max-width: 640px) {
  .kbd-hint { display: none; }
}

/* -------------------------------------------------------------------------- *
 *  Moments page — feed
 * -------------------------------------------------------------------------- */

.moments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 80px;
}

.moment {
  position: relative;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.moment:hover {
  border-color: var(--border-strong);
  background: var(--card-hover);
}

.moment__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.moment__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.moment__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.moment__author {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
}

.moment__time {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.04em;
}

.moment__body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--fg-soft);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.moment__body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.moment__body a:hover { opacity: 0.8; }

.moment__images {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.moment__images--1 { grid-template-columns: 1fr; }
.moment__images--2 { grid-template-columns: 1fr 1fr; }
.moment__images--3 { grid-template-columns: repeat(3, 1fr); }

.moment__images img {
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  background: var(--bg-elevated);
}

.moment__images--1 img { max-height: 460px; object-fit: cover; }
.moment__images--2 img,
.moment__images--3 img { aspect-ratio: 1 / 1; object-fit: cover; }

.moment__images img:hover { opacity: 0.9; transform: scale(0.995); }

/* -------------------------------------------------------------------------- *
 *  Share button + poster modal + toast
 *  (Ports the v0.7 flow from the old inline <style> in index.html.
 *   Same layout, palette re-mapped onto the Bento tokens.)
 * -------------------------------------------------------------------------- */

.share-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.share-btn:hover {
  opacity: 1;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.04);
}

.share-btn svg { width: 14px; height: 14px; }

.share-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  opacity: 0;
  overflow-y: auto;
  transition: opacity 0.3s ease;
}

.share-modal.is-open { display: flex; opacity: 1; }

.share-modal__panel {
  width: 100%;
  max-width: 22rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
}

.share-modal__status {
  min-height: 16px;
  font-size: 11px;
  color: var(--muted);
}

.share-modal__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.share-modal__hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
  margin: 0;
  padding: 0 12px;
}

.share-modal__hint strong { color: var(--gold); font-weight: 500; }

.share-modal__url {
  font: 10px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--faint);
  word-break: break-all;
  text-align: center;
  padding: 0 8px;
  -webkit-user-select: all;
          user-select: all;
}

.share-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.share-modal__btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg);
  border: none;
  border-radius: 999px;
  font: 12px inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.share-modal__btn:hover { background: rgba(255, 255, 255, 0.2); }

.share-modal__btn--primary {
  background: rgba(224, 184, 110, 0.9);
  color: #000;
  font-weight: 500;
}

.share-modal__btn--primary:hover { background: var(--gold); }

#shToast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  max-width: 85vw;
  text-align: center;
  white-space: pre-line;
  word-break: break-all;
  z-index: 210;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid var(--border-strong);
  font-size: 12px;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}

/* -------------------------------------------------------------------------- *
 *  Footer
 * -------------------------------------------------------------------------- */

.site-foot {
  padding: 40px 0 56px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--faint);
  text-align: center;
  letter-spacing: 0.06em;
}

.site-foot__line + .site-foot__line { margin-top: 5px; }

.site-foot__sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 8px;
  vertical-align: middle;
  opacity: 0.5;
}

/* -------------------------------------------------------------------------- *
 *  Responsive — 900px (tablet, 2 columns)
 * -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .page-header { padding: 40px 0 20px; }

  .apps-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 22px;
  }

  .apps-search { flex: 0 0 auto; width: 100%; }

  .apps-grid { grid-template-columns: repeat(2, 1fr); }

  .site-nav__inner { gap: 20px; }
  .site-nav__links { gap: 18px; }

  /* Bento home — 4-col grid: hero still 4-wide, player takes a horizontal strip */
  .bento { grid-template-columns: repeat(4, 1fr); }
  .section-label { grid-column: span 4; }
  .hero-card { grid-column: span 4; grid-row: span 2; }
  .player-card { grid-column: span 4; grid-row: span 1; flex-direction: row; align-items: center; gap: 16px; }
  .player-card .player-cover { width: 68px; height: 68px; margin-bottom: 0; flex: 0 0 68px; }
  .feat-app { grid-column: span 2; }
  .moment-preview-card, .about-card { grid-column: span 4; }
  .cta-card { grid-column: span 4; grid-row: span 1; flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-card .cta-title { font-size: 32px; }
}

/* -------------------------------------------------------------------------- *
 *  Responsive — 640px (phone, 1 column)
 * -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 14px; }

  .site-nav__inner { gap: 14px; height: 56px; }
  .site-nav__brand { font-size: 20px; }
  .site-nav__links { gap: 14px; }
  .site-nav__link { font-size: 13px; }

  .page-header { padding: 28px 0 16px; }
  .page-title { font-size: 30px; }
  .page-kicker { font-size: 13.5px; }

  .apps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 56px;
  }

  .app-card { min-height: auto; padding: 18px; }
  .app-card__head { gap: 12px; margin-bottom: 10px; }
  .app-card__thumb { width: 44px; height: 44px; }
  .app-card__name { font-size: 15.5px; }
  .app-card__desc { font-size: 12.5px; }

  /* Music page */
  .track { padding: 12px 14px; gap: 12px; }
  .track__idx { flex-basis: 26px; font-size: 11px; }
  .track__bars { width: 26px; }
  .track__title { font-size: 13.5px; }
  .track__meta { font-size: 11px; }
  .tracks-list { padding-bottom: 120px; }
  .mini-player { padding: 8px 10px; }
  .mini-player__disc { width: 36px; height: 36px; }
  .mini-player__title { font-size: 12.5px; }
  .mini-player__btn { width: 34px; height: 34px; }

  /* Moments page */
  .moments-list { gap: 12px; padding-bottom: 56px; }
  .moment { padding: 16px 18px; border-radius: 16px; }
  .moment__body { font-size: 13px; line-height: 1.7; }
  .moment__images { gap: 4px; margin-top: 12px; }
  .moment__images--1 img { max-height: 320px; }

  /* Share modal */
  .share-modal { padding: 12px; }

  /* Bento home — 2-col grid, everything mostly spans full width */
  .bento { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px 0 56px; }
  .section-label { grid-column: span 2; padding: 12px 0 0; font-size: 10.5px; }
  .section-label .muted { display: block; margin: 4px 0 0; }

  .hero-card { grid-column: span 2; grid-row: span 2; padding: 22px; }
  .hero-brand { font-size: 34px; }
  .hero-desc { font-size: 13.5px; line-height: 1.65; }
  .hero-meta { gap: 12px; font-size: 9.5px; flex-wrap: wrap; }

  .player-card { grid-column: span 2; grid-row: span 1; }
  .player-card .player-cover { width: 60px; height: 60px; flex: 0 0 60px; }
  .player-title { font-size: 15px; }

  .feat-app { grid-column: span 2; grid-row: span 2; padding: 20px; }
  .feat-app-num { font-size: 20px; top: 12px; right: 16px; }
  .feat-app-name { font-size: 16.5px; }
  .feat-app-desc { font-size: 12.5px; }

  .moment-preview-card, .about-card { grid-column: span 2; grid-row: span 2; padding: 20px; }
  .moment-preview-card .moment-photo { height: 42%; }
  .about-text { font-size: 13.5px; line-height: 1.7; }

  .cta-card { grid-column: span 2; grid-row: span 1; padding: 18px 20px; flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-card .cta-title { font-size: 28px; }
  .cta-card .cta-sub { display: none; }
}