/* ui_kits/watchover-app/app.css
   ──────────────────────────────────────────────────────────────
   Watchover App UI kit — phone frame chrome + screen-shell glue.
   This file NEVER redefines wo-* component styles; everything
   here is app-specific scaffolding under the `app-` prefix.
   Zero raw hex — stone / pine / coral / semantic tokens only.
   ────────────────────────────────────────────────────────────── */

/* ═══ Stage + device frame ════════════════════════════════════ */
.app-stage {
  height: 100vh; /* fixed: the scale transform keeps the phone inside */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stone-100);
  overflow: hidden;
}

/* Bezel — warm near-black stone, scaled to fit by index.html JS. */
.app-device {
  flex-shrink: 0;
  padding: 12px;
  border-radius: 56px;
  background: var(--stone-900);
  box-shadow:
    var(--shadow-pop),
    inset 0 0 0 2px var(--stone-700);
}

/* The 390×844 screen itself. */
.app-screen {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border-radius: 44px;
  background: var(--paper);
}

/* ═══ Screen shell — header / scrollable content / bottom nav ═ */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.app-shell > .wo-header { flex-shrink: 0; min-height: var(--header-h); }
.app-shell > .wo-nav    { flex-shrink: 0; min-height: var(--bottomnav-h); }

.app-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}
/* Flush variant when a screen manages its own gutters
   (e.g. channel detail with an edge-to-edge sticky footer). */
.app-content--flush {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.app-content--flush > .wo-footer { margin-top: auto; }
.app-pad { padding: var(--sp-4) var(--sp-5) var(--sp-4); }

/* ═══ Small shared glue ═══════════════════════════════════════ */

/* Unstyled tap wrapper so wo-video / wo-vrow / wo-channel can be
   real <button> elements (≥44px targets, keyboard focusable).
   No `display` here — the wo-* block owns its own display value. */
.app-tap {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Monogram fill for hero avatars / gradient thumbs. */
.app-mono {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-on-brand);
  font-family: var(--font-text);
  font-weight: var(--w-bold);
}

/* Warm gradient placeholder inside wo-video__thumb / wo-vrow__thumb
   (the thumb block already absolutely positions any media child). */
.app-thumb {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.65);
}

/* Generic white card for blocks that have no wo- card of their own
   (e.g. the score verdict block on channel detail). */
.app-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}

.app-note {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.app-row-actions { display: flex; gap: var(--sp-2); }
.app-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Verdict badge tint missing from core Badge (no --flag variant):
   composed WITH .wo-badge, colors only. */
.app-badge--flag { background: var(--flag-50); color: var(--flag-700); }

/* ═══ Child mode glue ═════════════════════════════════════════ */

/* Watchover lockup on the coral header. */
.app-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}
.app-lockup__badge {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface-card);
  color: var(--play);
}
.app-lockup__badge svg { width: 16px; height: 16px; }
.app-lockup__word {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: inherit;
}

.app-greeting { margin: var(--sp-2) 0 var(--sp-1); }

/* Horizontal channel avatar strip (child home). */
.app-chstrip {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--sp-5));
  padding: var(--sp-1) var(--sp-5) var(--sp-2);
  scrollbar-width: none;
}
.app-chstrip::-webkit-scrollbar { display: none; }
.app-chstrip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
  width: 64px;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-chstrip__name {
  max-width: 64px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two-column child feed grid. */
.app-videogrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-4);
}

/* Calm end-of-feed line — the restraint is the point. */
.app-feedend {
  padding: var(--sp-8) 0 var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ═══ Watch screen glue ═══════════════════════════════════════ */
.app-watch-title {
  margin: var(--sp-4) 0 var(--sp-3);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}

/* Fake progress bar shown in the (pretend) playing state. */
.app-progress {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: 56px;
  z-index: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.28);
}
.app-progress__fill {
  width: 38%;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--play);
}

/* ═══ PIN screen glue ═════════════════════════════════════════ */
.app-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding-top: var(--sp-8);
}
.app-pin__lock {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand);
}
.app-pin__lock svg { width: 24px; height: 24px; }
.app-pin__help {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  min-height: 20px;
}
.app-pin__error { color: var(--flag-700); font-weight: var(--w-medium); }
.app-pin__hint {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.app-pin .wo-pin { margin: var(--sp-4) 0 var(--sp-2); }
/* Stretch wrapper so the numpad grid can fill its 280px max width. */
.app-pin__pad { align-self: stretch; margin-top: var(--sp-4); }

/* ═══ Parent mode glue ════════════════════════════════════════ */

/* Review-queue card: wo-channel--card stacked so the approve /
   dismiss actions sit under the channel line. */
.app-queuecard { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.app-queuecard__main {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.app-queuecard--done { opacity: 0.6; }

.app-stack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Channel detail: centered full score block inside its card. */
.app-scoreblock { display: flex; justify-content: center; text-align: center; }

.app-footer-actions { display: flex; gap: var(--sp-3); }