/* Rain Sounds: the capsule look, the default (<html data-ui="capsule">; ?ui=glass shows the
   older frosted-glass look). Dark glossy pills instead of frosted glass, colour that glows from
   inside, and a light that runs round the rim of whatever is playing or chosen.
   Builds on base.css and app.css. */

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* a layer's level, registered so it can glide between values */
@property --l { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@keyframes capSpin { to { --spin: 360deg; } }
@keyframes capBreath { 50% { opacity: .55; } }

html[data-ui="capsule"] {
  --cap-fill: linear-gradient(180deg, rgba(16,18,24,.7) 0%, rgba(10,12,16,.66) 52%, rgba(10,12,16,.68) 100%);
  --cap-gloss: linear-gradient(180deg, rgba(255,255,255,.09), transparent 36%);
  --cap-edge: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.12);
  --cap-drop: 0 calc(14*var(--u)) calc(30*var(--u)) calc(-12*var(--u)) rgba(0,0,0,.55);
}
/* Daylight has dark text, so its capsules are pale gloss instead */
html[data-ui="capsule"][data-theme="daylight"] {
  --cap-fill: linear-gradient(180deg, rgba(246,250,251,.8) 0%, rgba(236,243,245,.74) 52%, rgba(230,239,242,.78) 100%);
  --cap-gloss: linear-gradient(180deg, rgba(255,255,255,.55), transparent 40%);
  --cap-edge: inset 0 0 0 1px rgba(9,28,34,.08), inset 0 1px 0 rgba(255,255,255,.8);
  --cap-drop: 0 calc(14*var(--u)) calc(30*var(--u)) calc(-14*var(--u)) rgba(9,28,34,.22);
}
html[data-ui="capsule"][data-theme="daylight"] :is(.btn:not(.primary), .fchip, .tool):hover {
  background: var(--cap-gloss), linear-gradient(180deg, rgba(255,255,255,.9), rgba(240,246,248,.85));
}

/* each sound layer has its own colour */
html[data-ui="capsule"] [data-k="rain"]    { --lc: #6fb6ff; }
html[data-ui="capsule"] [data-k="thunder"] { --lc: #b48cff; }
html[data-ui="capsule"] [data-k="wind"]    { --lc: #8fe3d0; }
html[data-ui="capsule"] [data-k="roof"]    { --lc: #ffb36b; }
html[data-ui="capsule"] [data-k="window"]  { --lc: #9fd6ff; }
html[data-ui="capsule"] [data-k="drips"]   { --lc: #5fd0ff; }
html[data-ui="capsule"] [data-k="leaves"]  { --lc: #6fdc8c; }
html[data-ui="capsule"] [data-k="waves"]   { --lc: #3fa9ff; }
html[data-ui="capsule"] [data-k="city"]    { --lc: #ff5fb8; }
html[data-ui="capsule"] [data-k="fire"]    { --lc: #ff7a45; }
html[data-ui="capsule"] [data-k="noise"]   { --lc: #c9c9d6; }

/* ───────────── Surfaces: dark gloss, no frosted blur ───────────── */
/* plain class selectors only, so the specific rules further down (popover, library cards, tubes) win */
html[data-ui="capsule"] :is(.sidebar, .card, .tool, .chip, .btn, .fchip, .glass) {
  background: var(--cap-gloss), var(--cap-fill);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--cap-edge), var(--cap-drop);
  outline: 0;
}
html[data-ui="capsule"] :is(.btn:not(.primary), .fchip, .tool):hover {
  background: var(--cap-gloss), linear-gradient(180deg, rgba(24,27,34,.72), rgba(14,16,21,.66));
}
html[data-ui="capsule"] .card::after, html[data-ui="capsule"] .chip::after { display: none; }   /* no sheen sweep */

/* the running light round a rim: the playing card, the chosen place, the play button */
html[data-ui="capsule"] :is(.card.big, .scene-card.current, .card.row:hover, .card.row:focus-visible)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: calc(1.6*var(--u)); pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--spin),
    transparent 0turn, transparent .52turn,
    color-mix(in oklab, var(--accent) 70%, transparent) .7turn, #fff .77turn,
    color-mix(in oklab, var(--accent) 70%, transparent) .84turn, transparent .98turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: capSpin 4.2s linear infinite;
}
html[data-ui="capsule"] .stage:not(.is-playing) .card.big::before { animation-duration: 12s; opacity: .55; }

/* ───────────── Home: the rail ───────────── */
html[data-ui="capsule"] .card.big {
  border-radius: calc(44*var(--u));
  background:
    var(--cap-gloss),
    radial-gradient(90% 60% at 50% 115%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 70%),
    var(--cap-fill);
}
html[data-ui="capsule"] .is-playing .card.big {
  box-shadow: var(--cap-edge), var(--cap-drop), 0 0 calc(34*var(--u)) color-mix(in oklab, var(--accent) 38%, transparent);
}
/* the up-next places: horizontal pills with a coloured glow underneath */
html[data-ui="capsule"] .card.row {
  border-radius: 999px; padding: 0 calc(24*var(--u)) 0 calc(30*var(--u));
  background:
    var(--cap-gloss),
    radial-gradient(70% 90% at 50% 130%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%),
    var(--cap-fill);
  transition: transform .45s var(--e-out), box-shadow .4s var(--e-soft);
}
html[data-ui="capsule"] .card.row:hover {
  transform: translateX(calc(-6*var(--u)));
  box-shadow: var(--cap-edge), var(--cap-drop), 0 0 calc(26*var(--u)) color-mix(in oklab, var(--accent) 34%, transparent);
}
html[data-ui="capsule"] .card.row { gap: calc(14*var(--u)); }
html[data-ui="capsule"] .card.row .meta { flex: 1; min-width: 0; }
html[data-ui="capsule"] .card.row .meta :is(small, strong, span) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="capsule"] .card.row .len { flex: none; gap: calc(9*var(--u)); }
/* a quieter minutes figure gives the place name room, so it rarely needs the ellipsis */
html[data-ui="capsule"] .card.row .len b { font-size: calc(31*var(--u)); }
html[data-ui="capsule"] .card.row .meta strong { font-size: calc(17.5*var(--u)); }
html[data-ui="capsule"] .card.row .ico { width: calc(26*var(--u)); height: calc(26*var(--u)); }

/* ───────────── Home: the sound layers as glowing pills ───────────── */
html[data-ui="capsule"] .layers { gap: calc(12*var(--u)); }
html[data-ui="capsule"] .layer {
  position: relative; flex: 1; min-width: 0; overflow: hidden; isolation: isolate;
  padding: calc(13*var(--u)) calc(20*var(--u)) calc(12*var(--u)) calc(22*var(--u));
  border-radius: 999px;
  background: var(--cap-gloss), var(--cap-fill);
  box-shadow: var(--cap-edge), var(--cap-drop), 0 0 calc(22*var(--u)) color-mix(in oklab, var(--lc) calc(var(--l, 0%) * .45), transparent);
  transition: --l .25s var(--e-out), box-shadow .3s var(--e-soft);
}
/* the level fills the pill from the left in the layer's colour; the pill clips it, so the
   left end follows the pill's curve and the leading edge stays a straight, lit line */
html[data-ui="capsule"] .layer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: inset(0 calc(100% - var(--l)) 0 0);
  background:
    linear-gradient(90deg, transparent calc(var(--l) - 1px), color-mix(in oklab, var(--lc) 75%, white) 0),
    linear-gradient(90deg, color-mix(in oklab, var(--lc) 10%, transparent), color-mix(in oklab, var(--lc) 40%, transparent));
  background-size: 100% 100%, var(--l) 100%;          /* the colour ramp spans the filled part, at any level */
  background-repeat: no-repeat;
  transition: filter .2s;
}
html[data-ui="capsule"] .layer:hover::before { filter: brightness(1.25); }
html[data-ui="capsule"] .layer:focus-visible { outline: calc(2*var(--u)) solid #fff; outline-offset: calc(3*var(--u)); }
html[data-ui="capsule"] .layer .v { justify-content: space-between; }
html[data-ui="capsule"] .layer b { font-size: calc(28*var(--u)); }
html[data-ui="capsule"] .layer .ic { font-size: calc(22*var(--u)); color: color-mix(in oklab, var(--lc) 55%, white); }
html[data-ui="capsule"] .layer > span { margin-top: calc(4*var(--u)); font-size: calc(12*var(--u)); }
html[data-ui="capsule"] .layer .lv { display: none; }
html[data-ui="capsule"] .layer.muted::before { opacity: .25; }

/* ───────────── Play button and chips ───────────── */
html[data-ui="capsule"] .tool.play {
  background: radial-gradient(circle at 50% 35%, color-mix(in oklab, var(--accent) 45%, #1a1d24), #0e1015);
  box-shadow: var(--cap-edge), 0 0 0 calc(5*var(--u)) rgba(255,255,255,.05), 0 0 calc(22*var(--u)) color-mix(in oklab, var(--accent) 45%, transparent);
}
html[data-ui="capsule"] .is-playing .tool.play { animation: none; }
html[data-ui="capsule"][data-theme="daylight"] .tool.play { background: radial-gradient(circle at 50% 35%, #fff, color-mix(in oklab, var(--accent) 25%, #e8f0f2)); }
html[data-ui="capsule"] .is-playing .tool.play::after {
  border-radius: 50%; box-shadow: 0 0 calc(30*var(--u)) color-mix(in oklab, var(--accent) 60%, transparent);
  animation: capBreath 2.6s ease-in-out infinite;
}
html[data-ui="capsule"] .btn.primary {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 80%, white), color-mix(in oklab, var(--accent) 70%, #0b0d12));
  color: #071016; box-shadow: 0 0 calc(22*var(--u)) color-mix(in oklab, var(--accent) 45%, transparent);
}
html[data-ui="capsule"] .fchip[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent) 85%, white); color: #071016;
  box-shadow: 0 0 calc(16*var(--u)) color-mix(in oklab, var(--accent) 50%, transparent);
}

/* ───────────── Sidebar ───────────── */
html[data-ui="capsule"] .sidebar { border-radius: 999px; }
html[data-ui="capsule"] .nav a[aria-current="page"] .ic {
  color: color-mix(in oklab, var(--accent) 60%, white);
  filter: drop-shadow(0 0 calc(8*var(--u)) color-mix(in oklab, var(--accent) 80%, transparent));
}

/* ───────────── Library: landscape cards that show the whole photo ───────────── */
html[data-ui="capsule"] .lib-grid {
  grid-template-columns: repeat(auto-fill, minmax(calc(250*var(--u)), 1fr));
  gap: calc(20*var(--u)) calc(18*var(--u));
  padding-top: calc(12*var(--u));
}
html[data-ui="capsule"] .scene-card {
  position: relative; overflow: visible; isolation: isolate;
  padding: calc(8*var(--u)); border-radius: calc(30*var(--u));
  background:
    var(--cap-gloss),
    radial-gradient(80% 60% at 50% 120%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    var(--cap-fill);
  transition: transform .45s var(--e-out), box-shadow .4s var(--e-soft);
}
html[data-ui="capsule"] .scene-card:hover {
  transform: translateY(calc(-5*var(--u)));
  box-shadow: var(--cap-edge), 0 0 calc(26*var(--u)) color-mix(in oklab, var(--accent) 38%, transparent);
}
html[data-ui="capsule"] .scene-card.current {
  box-shadow: var(--cap-edge), 0 0 calc(34*var(--u)) color-mix(in oklab, var(--accent) 52%, transparent);
}
/* the photo at its own shape (the scene thumbnails are 560 x 313), so none of it is cropped */
html[data-ui="capsule"] .sc-play { aspect-ratio: 560 / 313; border-radius: calc(22*var(--u)); }
html[data-ui="capsule"] .sc-play img { transform: none; }
html[data-ui="capsule"] .scene-card:hover .sc-play img { transform: scale(1.03); }
html[data-ui="capsule"] .sc-play::after { background: none; }
html[data-ui="capsule"] .sc-go { top: 50%; bottom: auto; right: 50%; margin: calc(-20*var(--u)) calc(-20*var(--u)) 0 0; }
html[data-ui="capsule"] .sc-meta { padding: calc(11*var(--u)) calc(10*var(--u)) calc(6*var(--u)); }
html[data-ui="capsule"] .sc-meta small { font-size: calc(10.5*var(--u)); letter-spacing: calc(.9*var(--u)); }
html[data-ui="capsule"] .sc-meta strong { font-size: calc(16*var(--u)); }
html[data-ui="capsule"] .sc-meta span { font-size: calc(12.5*var(--u)); color: rgba(var(--ink-rgb), .82); }
html[data-ui="capsule"] .sc-tools { top: calc(16*var(--u)); right: calc(16*var(--u)); }
html[data-ui="capsule"] .badge-live { top: calc(16*var(--u)); left: calc(16*var(--u)); bottom: auto; transform: none; white-space: nowrap; }

/* ───────────── Mixer: tubes glow in their layer's colour, as bright as they are loud ───────────── */
html[data-ui="capsule"] .tube-glass {
  background: var(--cap-gloss), var(--cap-fill);
  box-shadow: var(--cap-edge), 0 0 calc(26*var(--u)) color-mix(in oklab, var(--lc) var(--l, 0%), transparent);
  transition: box-shadow .35s var(--e-out);
}
html[data-ui="capsule"] .tube-water {
  background: linear-gradient(180deg, color-mix(in oklab, var(--lc) 70%, white) 0%, color-mix(in oklab, var(--lc) 55%, #0b0d12) 100%);
  box-shadow: 0 calc(-2*var(--u)) calc(14*var(--u)) color-mix(in oklab, var(--lc) 70%, transparent);
}
html[data-ui="capsule"] .tube .ic { color: color-mix(in oklab, var(--lc) 55%, white); }

/* ───────────── Search and quiz pop-ups: dim the scene, never blur it ───────────── */
html[data-ui="capsule"] .overlay { background: rgba(2,6,10,.62); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ui="capsule"] :is(.palette-box, .quiz-box) {
  background: var(--cap-gloss), linear-gradient(180deg, rgba(16,18,24,.94), rgba(10,12,16,.92));
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: calc(30*var(--u));
}
html[data-ui="capsule"][data-theme="daylight"] .overlay { background: rgba(220,232,236,.6); }
html[data-ui="capsule"][data-theme="daylight"] :is(.palette-box, .quiz-box) {
  background: var(--cap-gloss), linear-gradient(180deg, rgba(250,252,253,.97), rgba(240,246,248,.95));
}

/* the Display popover and the sound-version menu sit over other things, so they are solid */
html[data-ui="capsule"] .var-menu.glass { background: var(--cap-gloss), linear-gradient(180deg, rgba(18,20,26,.96), rgba(11,13,17,.95)); }
html[data-ui="capsule"][data-theme="daylight"] .var-menu.glass { background: var(--cap-gloss), linear-gradient(180deg, rgba(250,252,253,.97), rgba(240,246,248,.96)); }
html[data-ui="capsule"] .tube-var { background: color-mix(in oklab, var(--lc) 22%, rgba(255,255,255,.06)); }
html[data-ui="capsule"] .display-pop { background: var(--cap-gloss), linear-gradient(180deg, rgba(18,20,26,.96), rgba(11,13,17,.95)); }
html[data-ui="capsule"][data-theme="daylight"] .display-pop { background: var(--cap-gloss), linear-gradient(180deg, rgba(250,252,253,.97), rgba(240,246,248,.96)); }

/* ───────────── Settings and the other panels ───────────── */
html[data-ui="capsule"] .set-card { border-radius: calc(32*var(--u)); }
html[data-ui="capsule"] .toggle[aria-checked="true"] {
  background: color-mix(in oklab, var(--accent) 80%, white);
  box-shadow: 0 0 calc(14*var(--u)) color-mix(in oklab, var(--accent) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui="capsule"] :is(.card.big, .scene-card.current, .card.row:hover)::before { animation: none; }
  html[data-ui="capsule"] .is-playing .tool.play::after { animation: none; }
}

/* Keyboard focus: always visible, in the text colour so it shows in light and dark themes */
html[data-ui="capsule"] :is(.tool, .btn, .fchip, .chip, .card, .glass, .handle, .toggle, .seg button, .range, a):focus-visible {
  outline: max(2px, calc(2*var(--u))) solid rgb(var(--ink-rgb)); outline-offset: calc(3*var(--u));
}