/* public/assets/css/player-extras.css – scenes, programs, resume, a11y for the player */

/* ── Helpers ─────────────────────────────────────────────────── */
.rk-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rk-hint { font-size: 0.84rem; color: var(--text2); margin: -.2rem 0 .7rem; line-height: 1.5; }
.player-wrap .card + .card { margin-top: .6rem; }

/* ── Resume ("continue where you left off") ──────────────────── */
.rk-resume-btn {
  display: flex; align-items: center; gap: .7rem; width: 100%; max-width: 340px;
  margin: .7rem auto .2rem; padding: .7rem 1rem; min-height: 56px;
  border-radius: var(--r); border: 1px solid var(--accent);
  background: linear-gradient(135deg, rgba(139,156,244,.16), rgba(196,168,130,.10));
  color: var(--text); font-family: 'Outfit', sans-serif; text-align: left; cursor: pointer;
  transition: background .2s, transform .15s;
}
.rk-resume-btn[hidden] { display: none; }
.rk-resume-btn:hover { background: rgba(139,156,244,.22); }
.rk-resume-btn:active { transform: scale(.98); }
.rk-resume-btn .icon { flex-shrink: 0; color: var(--accent); }
.rk-resume-txt { display: flex; flex-direction: column; min-width: 0; }
.rk-resume-title { font-weight: 500; font-size: 0.9rem; }
.rk-resume-detail { font-size: 0.8rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Scene cards ─────────────────────────────────────────────── */
.rk-scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .65rem; }
.rk-scene-card {
  --h: 200deg;
  position: relative; overflow: hidden; min-height: 128px; padding: 1rem 1rem;
  display: flex; flex-direction: column; justify-content: flex-start; gap: .2rem;
  border-radius: 12px; border: 1px solid var(--border2); cursor: pointer; text-align: left;
  color: var(--text); font-family: 'Outfit', sans-serif;
  background:
    radial-gradient(120% 90% at 100% 0%, hsla(var(--h), 55%, 45%, .32) 0%, transparent 60%),
    radial-gradient(90% 80% at 0% 100%, hsla(calc(var(--h) + 40deg), 45%, 35%, .22) 0%, transparent 65%),
    linear-gradient(to top, rgba(6, 8, 16, .62) 0%, rgba(6, 8, 16, .25) 55%, transparent 100%),
    var(--s2);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.rk-scene-card:hover { border-color: var(--accent); }
.rk-scene-card:active { transform: scale(.98); }
.rk-scene-card.active { border-color: var(--accent); box-shadow: 0 0 20px var(--glow); }
.rk-scene-card.active::after {
  content: ''; position: absolute; top: .6rem; right: .6rem; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.rk-scene-card .icon { flex: none; width: 1.6rem; height: 1.6rem; margin-bottom: .55rem; opacity: .95; }
.rk-scene-name { font-weight: 500; font-size: 1rem; line-height: 1.25; }
.rk-scene-desc { font-size: .86rem; color: var(--text); opacity: .88; line-height: 1.4; }
.rk-scene-card.featured { grid-column: 1 / -1; min-height: 120px; }
.rk-scene-card.featured .rk-scene-name { font-size: 1.18rem; }

/* ── Program cards ───────────────────────────────────────────── */
.rk-program-list { display: grid; grid-template-columns: 1fr; gap: .45rem; }
.rk-program-card {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 52px;
  padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--border);
  background: var(--s2); color: var(--text); font-family: 'Outfit', sans-serif;
  text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.rk-program-card:hover { border-color: var(--accent); }
.rk-program-card.active { border-color: var(--accent2); background: rgba(196,168,130,.08); }
.rk-program-card .icon { flex-shrink: 0; color: var(--accent); }
.rk-program-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk-program-name { font-weight: 500; font-size: 0.8rem; }
.rk-program-desc { font-size: 0.8rem; color: var(--text2); }
.rk-program-dur { font-size: 0.8rem; color: var(--text2); white-space: nowrap; }

.rk-prog-status { margin-top: .7rem; }
.rk-prog-status[hidden], .rk-prog-hero[hidden] { display: none; }
.rk-prog-bar { height: 4px; background: var(--s3); border-radius: 4px; overflow: hidden; }
.rk-prog-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 4px; transition: width 1s linear; }
.rk-prog-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .45rem; font-size: 0.84rem; color: var(--text2); }
.rk-prog-hero { max-width: 260px; margin: .5rem auto 0; }

/* ── Layer groups + noise colours ────────────────────────────── */
.rk-layer-group-title {
  font-size: 0.8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text2);
  margin: .9rem 0 .15rem;
}
.rk-layer-group-title:first-child { margin-top: 0; }
.rk-noise-colors { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .4rem; }
.rk-noise-chip {
  padding: .3rem .7rem; min-height: 32px; border-radius: 20px; cursor: pointer;
  background: var(--s2); border: 1px solid var(--border); color: var(--text2);
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; transition: .18s;
}
.rk-noise-chip[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: rgba(139,156,244,.1); }
button.tog { padding: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; }

/* ── Focus styles ────────────────────────────────────────────── */
.player-wrap :is(button, a, input, select, textarea, [tabindex]):focus-visible,
#play-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px;
}
#play-btn:focus-visible { border-radius: 50%; outline-offset: 4px; }
.tab-btn:focus-visible { border-radius: 20px; }

/* ── Big-target mode (min. 48px touch targets) ───────────────── */
html.rk-big .player-wrap :is(.tab-btn, .preset-btn, .timer-btn, .feat-btn, .btn-xs, .btn-sm, .rk-noise-chip, .mood-btn, .rk-program-card) {
  min-height: 48px; min-width: 48px;
}
html.rk-big .player-wrap :is(.tab-btn, .timer-btn, .feat-btn, .rk-noise-chip) { font-size: 0.82rem; padding-left: 1rem; padding-right: 1rem; }
html.rk-big .player-wrap .preset-btn { padding: .9rem .5rem; }
html.rk-big .player-wrap .p-name { font-size: 0.92rem; }
html.rk-big .player-wrap .rk-scene-card { min-height: 112px; }
html.rk-big .player-wrap .layer-row { min-height: 56px; }
html.rk-big .player-wrap .tog { width: 52px; height: 30px; border-radius: 15px; }
html.rk-big .player-wrap .tog::after { width: 22px; height: 22px; top: 3px; }
html.rk-big .player-wrap .tog.on::after { left: 26px; }
html.rk-big #play-btn { width: 76px; height: 76px; }
html.rk-big .player-wrap input[type=range] { height: 8px; }
html.rk-big .player-wrap input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
html.rk-big .player-wrap input[type=range]::-webkit-slider-runnable-track { height: 8px; }
html.rk-big .player-wrap input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
html.rk-big .player-wrap .l-vol { width: 110px; }

@media (pointer: coarse) {
  .rk-noise-chip { min-height: 40px; }
  .tab-btn { min-height: 40px; }
}

@media (min-width: 760px) {
  .rk-program-list { grid-template-columns: 1fr 1fr; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vis-ring, .hb-dot, .player-greeting { animation: none !important; }
  #bg-aurora { transition: none !important; }
  #breath-circle { transition: none !important; transform: none !important; }
  .rk-prog-fill, .tbar { transition: none !important; }
  .rk-scene-card, .rk-program-card, .rk-resume-btn, #play-btn, .tog, .tog::after { transition: none !important; }
  #play-btn:hover { transform: none; }
}