/* HEARTH Remote — the everyday controller. Phone-first, big touch targets,
   warm ember palette from 00-tokens.css. Sticky room chips at the top, a
   scrollable device grid + library strip, a "Play on…" bottom sheet, and a
   sticky transport bar pinned to the bottom of the viewport. */

.rmt {
  position: relative; z-index: 1;
  max-width: 640px; margin: 0 auto;
  padding: 0 clamp(12px, 4vw, 22px) calc(var(--xbar-h, 108px) + env(safe-area-inset-bottom, 0px) + 20px);
  min-height: 60vh;
}

/* ---- centered states (loading / pair / empty / error) ---- */
.rmt-center { min-height: 68vh; display: flex; align-items: center; justify-content: center; padding: 1.4rem 0; }
.rmt-loading { display: flex; align-items: center; gap: .6rem; color: var(--ink-dim); font-size: var(--step-1); }
.rmt-loading__mark { font-size: 1.4rem; animation: rmt-pulse 1.6s ease-in-out infinite; }
@keyframes rmt-pulse { 0%,100% { opacity: .5; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }

/* ---- header ---- */
.rmt-head {
  position: sticky; top: var(--bar); z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .85rem .1rem .55rem;
  background: linear-gradient(var(--bg) 68%, transparent);
}
.rmt-head__brand { display: flex; align-items: center; gap: .5rem; }
.rmt-head__mark { font-size: 1.35rem; filter: drop-shadow(0 0 10px var(--glow)); }
.rmt-head__name {
  font-family: var(--f-display); font-weight: 700; font-size: var(--step-1);
  letter-spacing: .02em;
}
.rmt-head__who {
  font-size: var(--step--1); color: var(--ember-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .28rem .7rem;
  background: var(--bg-hi); white-space: nowrap; max-width: 46vw;
  overflow: hidden; text-overflow: ellipsis;
}

/* ---- room chips ---- */
.rmt-rooms {
  position: sticky; top: calc(var(--bar) + 52px); z-index: 5;
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  padding: .35rem .1rem .7rem; margin: 0 -.1rem;
  background: linear-gradient(var(--bg) 70%, transparent);
  -webkit-overflow-scrolling: touch;
}
.rmt-rooms::-webkit-scrollbar { display: none; }
.rmt-chip {
  flex: 0 0 auto; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--bg-card); color: var(--ink-dim);
  border-radius: 999px; padding: .55rem 1.05rem; font-size: var(--step-0);
  font-weight: 500; letter-spacing: .01em; min-height: 44px;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.rmt-chip:hover { color: var(--ink); border-color: var(--ember); }
.rmt-chip.is-active {
  color: var(--bg); border-color: transparent;
  background: linear-gradient(150deg, var(--ember-soft), var(--ember));
  font-weight: 600; box-shadow: 0 4px 16px var(--glow);
}

/* ---- section titles ---- */
.rmt-sectitle {
  font-family: var(--f-ui); font-size: var(--step--1); letter-spacing: .28em;
  text-transform: uppercase; color: var(--ember); font-weight: 600;
  margin: 1.2rem .1rem .7rem;
}
.rmt-muted { color: var(--ink-mute); padding: .2rem .1rem 1rem; font-size: var(--step-0); }

/* ---- device grid + cards ---- */
.rmt-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 520px) { .rmt-grid { grid-template-columns: 1fr 1fr; } }

.rmt-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem .95rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.rmt-card__top { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.rmt-card__icon {
  font-size: 1.5rem; width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--bg-hi); border: 1px solid var(--line-soft);
}
.rmt-card__meta { display: flex; flex-direction: column; min-width: 0; }
.rmt-card__name {
  font-weight: 600; font-size: var(--step-0); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rmt-card__type { font-size: var(--step--1); color: var(--ink-mute); }
.rmt-card__ctrls { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

/* power toggle switch */
.rmt-pwr {
  --w: 62px; --h: 34px;
  position: relative; flex: 0 0 auto; cursor: pointer;
  width: var(--w); height: var(--h); border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg-raise);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.rmt-pwr__dot {
  position: absolute; top: 50%; left: 4px; transform: translateY(-50%);
  width: calc(var(--h) - 12px); height: calc(var(--h) - 12px);
  border-radius: 50%; background: var(--ink-mute);
  transition: left .2s var(--ease), background .2s var(--ease);
}
.rmt-pwr.is-on { background: linear-gradient(150deg, var(--ember-hot), var(--ember-deep)); border-color: transparent; }
.rmt-pwr.is-on .rmt-pwr__dot { left: calc(var(--w) - var(--h) + 4px); background: var(--ink); }

/* source selector */
.rmt-src, .rmt-field {
  appearance: none; -webkit-appearance: none;
  background: var(--bg-hi); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: .6rem 2rem .6rem .8rem; font-size: var(--step-0); min-height: 44px;
  cursor: pointer; flex: 1 1 auto; min-width: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c3b2a1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}
.rmt-src:focus, .rmt-field:focus { border-color: var(--ember); outline: none; }

/* ---- library strip ---- */
.rmt-strip {
  display: flex; gap: .8rem; overflow-x: auto; scrollbar-width: thin;
  padding: .2rem .1rem 1rem; margin: 0 -.1rem;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.rmt-strip::-webkit-scrollbar { height: 6px; }
.rmt-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.rmt-poster {
  flex: 0 0 auto; width: 128px; cursor: pointer; text-align: left;
  background: none; border: 0; padding: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .35rem;
}
.rmt-poster__art {
  width: 128px; height: 190px; border-radius: 12px;
  background: var(--bg-hi) center/cover no-repeat; border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.rmt-poster:hover .rmt-poster__art,
.rmt-poster:focus-visible .rmt-poster__art {
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 1px var(--ember);
}
.rmt-poster__ph { font-size: 2rem; opacity: .5; }
.rmt-poster__title {
  font-size: var(--step--1); color: var(--ink); font-weight: 500; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rmt-poster__year { font-size: .68rem; color: var(--ink-mute); }

/* ---- "Play on…" bottom sheet ---- */
.rmt-scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(10,7,5,.62);
  opacity: 0; transition: opacity .22s var(--ease); backdrop-filter: blur(2px);
}
.rmt-scrim.is-on { opacity: 1; }
.rmt-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: 640px; margin: 0 auto;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: .6rem clamp(14px, 4vw, 22px) calc(env(safe-area-inset-bottom, 0px) + 18px);
  box-shadow: 0 -18px 44px rgba(0,0,0,.55);
  transform: translateY(102%); transition: transform .26s var(--ease);
}
.rmt-sheet.is-on { transform: translateY(0); }
.rmt-sheet__grip {
  width: 40px; height: 4px; border-radius: 2px; background: var(--line);
  margin: .3rem auto .7rem;
}
.rmt-sheet__eyebrow { margin: 0 0 .2rem; }
.rmt-sheet__title {
  font-family: var(--f-display); font-size: var(--step-1); margin: 0 0 .8rem;
  color: var(--ink);
}
.rmt-sheet__list { display: flex; flex-direction: column; gap: .5rem; max-height: 56vh; overflow-y: auto; }
.rmt-target {
  display: flex; align-items: center; gap: .8rem; width: 100%; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
  padding: .75rem .85rem; text-align: left; min-height: 58px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.rmt-target:hover { border-color: var(--ember); background: var(--bg-hi); }
.rmt-target.is-busy { opacity: .6; }
.rmt-target__icon {
  font-size: 1.4rem; width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--bg-hi); border: 1px solid var(--line-soft);
}
.rmt-target__meta { display: flex; flex-direction: column; min-width: 0; }
.rmt-target__name { font-weight: 600; color: var(--ink); }
.rmt-target__sub { font-size: var(--step--1); color: var(--ink-mute); }

/* ---- transport bar (sticky bottom) ---- */
.rmt-xbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-width: 640px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "now all" "transport transport";
  gap: .5rem .8rem; align-items: center;
  padding: .6rem clamp(12px, 4vw, 20px) calc(env(safe-area-inset-bottom, 0px) + .6rem);
  background: color-mix(in srgb, var(--bg-raise) 92%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.rmt-xbar.is-live { border-top-color: var(--ember-deep); box-shadow: 0 -10px 30px var(--glow-hot); }
.rmt-xbar__now {
  grid-area: now; font-size: var(--step--1); color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.rmt-xbar__transport { grid-area: transport; display: flex; align-items: center; gap: .4rem; justify-content: center; }
.rmt-xbar__all { grid-area: all; display: flex; gap: .4rem; }

.rmt-xic {
  width: 46px; height: 46px; flex: 0 0 auto; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-card);
  color: var(--ink); font-size: 1.05rem; display: grid; place-items: center;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.rmt-xic:hover { border-color: var(--ember); color: var(--ember-soft); }
.rmt-xic--play {
  background: linear-gradient(150deg, var(--ember), var(--ember-hot)); color: var(--bg);
  border-color: transparent; width: 54px; height: 54px; font-size: 1.15rem;
}
.rmt-xic--play:hover { color: var(--bg); filter: brightness(1.05); }

.rmt-allbtn {
  cursor: pointer; border-radius: 999px; padding: .5rem .85rem; min-height: 44px;
  font-size: var(--step--1); font-weight: 600; white-space: nowrap;
  border: 1.5px solid var(--line); background: var(--bg-card); color: var(--ink-dim);
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.rmt-allbtn:hover { border-color: var(--ember); color: var(--ink); }
.rmt-allbtn--hot { color: var(--ember-soft); border-color: var(--ember-deep); }
.rmt-allbtn--hot:hover { background: var(--ember-deep); color: var(--ink); border-color: transparent; }
.rmt-allbtn:disabled { opacity: .55; cursor: default; }

/* ---- pair / empty / error cards ---- */
.rmt-pair, .rmt-empty {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.8rem 1.5rem 1.6rem;
  box-shadow: var(--shadow);
}
.rmt-pair { text-align: left; }
.rmt-pair__mark, .rmt-empty__mark { font-size: 2.4rem; filter: drop-shadow(0 0 16px var(--glow)); }
.rmt-empty__mark { display: block; margin-bottom: .4rem; }
.rmt-pair .eyebrow { margin: .7rem 0 .3rem; }
.rmt-pair__title, .rmt-empty__title { font-family: var(--f-display); font-size: var(--step-2); margin: 0 0 .5rem; }
.rmt-pair__sub, .rmt-empty__sub { color: var(--ink-dim); font-size: var(--step-0); margin: 0 0 1.1rem; line-height: 1.5; }
.rmt-lbl { display: block; font-size: var(--step--1); color: var(--ink-mute); margin: .9rem 0 .3rem; letter-spacing: .02em; }
.rmt-pair .rmt-field, .rmt-empty .rmt-field { width: 100%; }

.rmt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; width: 100%; margin-top: 1.2rem; cursor: pointer;
  border-radius: 12px; border: 0; font-size: var(--step-0); font-weight: 600;
  text-decoration: none; padding: 0 1.2rem;
  transition: filter .16s var(--ease), transform .12s var(--ease);
}
.rmt-btn--primary { background: linear-gradient(150deg, var(--ember), var(--ember-hot)); color: var(--bg); }
.rmt-btn--primary:hover { filter: brightness(1.06); }
.rmt-btn--primary:active { transform: translateY(1px); }
.rmt-btn:disabled { opacity: .6; cursor: default; }

/* ================================================================
   ROOM CONTROLLER (.rm2-) — activities row, room volume, source
   control surface (dpad / transport / persistent volume + power).
   ================================================================ */

/* inline loading row inside the body while a room loads */
.rm2-loadrow {
  display: flex; align-items: center; gap: .6rem;
  color: var(--ink-dim); font-size: var(--step-0); padding: 1.4rem .1rem;
}

/* ---- activities row (one big button per source) ---- */
.rm2-acts {
  display: flex; gap: .7rem; overflow-x: auto; scrollbar-width: none;
  padding: .1rem .1rem .3rem; margin: 0 -.1rem;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.rm2-acts::-webkit-scrollbar { display: none; }
.rm2-act {
  flex: 0 0 auto; scroll-snap-align: start; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  min-height: 60px; padding: .7rem 1.05rem .7rem .8rem;
  border-radius: 999px; border: 1.5px solid var(--line);
  background: linear-gradient(150deg, var(--bg-card), var(--bg-hi));
  color: var(--ink); font-size: var(--step-0); font-weight: 600;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .1s var(--ease);
}
.rm2-act:hover { border-color: var(--ember); box-shadow: 0 4px 16px var(--glow); }
.rm2-act:active { transform: translateY(1px); }
.rm2-act.is-busy { opacity: .6; }
.rm2-act__ic {
  font-size: 1.3rem; width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-raise); border: 1px solid var(--line-soft);
}
.rm2-act__lbl { white-space: nowrap; }

/* ---- room volume card ---- */
.rm2-volcard {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .7rem;
}
.rm2-volcard__meta { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.rm2-volcard__ic {
  font-size: 1.3rem; width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--bg-hi); border: 1px solid var(--line-soft);
}
.rm2-volcard__name {
  font-weight: 600; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* smart-outlet cards get a subtle plug accent */
.rm2-card--outlet .rmt-card__icon { background: var(--bg-raise); }

/* ---- shared round volume buttons ---- */
.rm2-vol__ctrls { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.rm2-volb {
  width: 52px; height: 52px; flex: 0 0 auto; cursor: pointer;
  border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg-hi);
  color: var(--ink); font-size: 1.3rem; font-weight: 700;
  display: grid; place-items: center;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .08s var(--ease);
}
.rm2-volb:hover { border-color: var(--ember); color: var(--ember-soft); }
.rm2-volb:active { transform: scale(.94); }

/* ================================================================
   SOURCE CONTROL SURFACE
   ================================================================ */
.rm2-cs__head {
  display: flex; align-items: center; gap: .7rem;
  margin: .8rem .1rem 1rem; min-width: 0;
}
.rm2-back {
  flex: 0 0 auto; cursor: pointer; min-height: 44px;
  border: 1.5px solid var(--line); background: var(--bg-card); color: var(--ink);
  border-radius: 999px; padding: .5rem 1rem; font-size: var(--step-0); font-weight: 600;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.rm2-back:hover { border-color: var(--ember); color: var(--ember-soft); }
.rm2-cs__title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.rm2-cs__ic { font-size: 1.35rem; filter: drop-shadow(0 0 8px var(--glow)); flex: 0 0 auto; }
.rm2-cs__name {
  font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- dpad (3×3 cross) ---- */
.rm2-dpad {
  display: grid; gap: .6rem; margin: .4rem auto 1.1rem;
  grid-template-columns: repeat(3, 1fr); max-width: 320px;
  grid-template-areas: ".  up  ." "left ok right" ".  down .";
}
.rm2-d-up { grid-area: up; } .rm2-d-down { grid-area: down; }
.rm2-d-left { grid-area: left; } .rm2-d-right { grid-area: right; }
.rm2-d-ok { grid-area: ok; }
.rm2-dbtn {
  min-height: 76px; cursor: pointer;
  border-radius: 18px; border: 1.5px solid var(--line); background: var(--bg-card);
  color: var(--ink); font-size: 1.4rem; display: grid; place-items: center;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .07s var(--ease);
}
.rm2-dbtn:hover { border-color: var(--ember); }
.rm2-dbtn:active { transform: scale(.95); }
.rm2-d-ok {
  font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .04em;
  color: var(--bg); border-color: transparent;
  background: linear-gradient(150deg, var(--ember), var(--ember-hot));
  box-shadow: 0 4px 18px var(--glow-hot);
}
.rm2-d-ok:hover { filter: brightness(1.06); border-color: transparent; }

/* ---- nav (back / home) + transport rows ---- */
.rm2-navrow, .rm2-trans {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: 0 auto 1rem; max-width: 320px;
}
.rm2-csb {
  min-width: 64px; height: 58px; flex: 1 1 0; cursor: pointer;
  border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg-card);
  color: var(--ink); font-size: 1.35rem; display: grid; place-items: center;
  transition: border-color .14s var(--ease), color .14s var(--ease), transform .07s var(--ease);
}
.rm2-csb:hover { border-color: var(--ember); color: var(--ember-soft); }
.rm2-csb:active { transform: scale(.95); }
.rm2-csb--trans.big {
  flex: 0 0 auto; min-width: 76px; font-size: 1.6rem;
  background: linear-gradient(150deg, var(--ember), var(--ember-hot));
  color: var(--bg); border-color: transparent;
}
.rm2-csb--trans.big:hover { color: var(--bg); filter: brightness(1.06); }

/* ---- persistent volume bar (control surface) ---- */
.rm2-vol {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  max-width: 320px; margin: 0 auto 1rem;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .8rem;
}
.rm2-vol__lbl {
  font-family: var(--f-ui); font-size: var(--step--1); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ember); font-weight: 600;
}

/* ---- persistent power/off ---- */
.rm2-offrow { max-width: 320px; margin: 0 auto; }
.rm2-off {
  width: 100%; min-height: 52px; cursor: pointer;
  border-radius: 14px; border: 1.5px solid var(--ember-deep);
  background: var(--bg-card); color: var(--ember-soft);
  font-size: var(--step-0); font-weight: 600;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.rm2-off:hover { background: var(--ember-deep); color: var(--ink); border-color: transparent; }
.rm2-off:disabled { opacity: .55; cursor: default; }

/* ---- misc ---- */
.rm2-empty-inline { padding: .2rem .1rem 1rem; }
.rm2-linkbtn { max-width: 320px; margin-top: .6rem; }
.rm2-target--here { border-color: var(--ember); background: var(--bg-hi); }

@media (prefers-reduced-motion: reduce) {
  .rmt-loading__mark, .rmt-sheet, .rmt-scrim, .rmt-poster__art, .rmt-chip,
  .rm2-act, .rm2-dbtn, .rm2-csb, .rm2-volb { animation: none !important; transition: none !important; }
}