/* TOTEM — phone-first layer (staged 2026-10-02, Cleo). Loaded after each page's own CSS
   on /watch/, /broadcast/ and /meet/. Restyles only; no page logic depends on it.
   Brand kit: Cormorant Garamond display · Inter body · gold #C8A84E. Contrast measured
   (WCAG 2.2 AA) for both themes — see the staging report. */
:root{
  --tm-bg:#0A0E1A; --tm-bg2:#0E1422; --tm-panel:#111829; --tm-line:#26314A;
  --tm-ink:#F4EFE2; --tm-mut:#A9B1BC; --tm-gold:#C8A84E; --tm-gold-text:#D8BA62; --tm-on-gold:#0A0E1A;
  --tm-danger:#F08A7E; --tm-radius:14px; --tm-top:56px;
}
html[data-theme="light"]{
  --tm-bg:#F5F0E8; --tm-bg2:#FFFFFF; --tm-panel:#FFFDF8; --tm-line:#DCCFB4;
  --tm-ink:#1C1A15; --tm-mut:#55504A; --tm-gold:#C8A84E; --tm-gold-text:#6E5410; --tm-on-gold:#1C1A15;
  --tm-danger:#A8321F;
}

@media (max-width: 600px){
  html, body{background:var(--tm-bg) !important; color:var(--tm-ink)}
  body{-webkit-text-size-adjust:100%; overflow-x:hidden}
  *:focus-visible{outline:2px solid var(--tm-gold) !important; outline-offset:2px}

  /* ── Fixed chrome: one tidy top band instead of stacked buttons ── */
  #app-back{top:calc(env(safe-area-inset-top) + 10px) !important; left:12px !important; height:36px !important;
    padding:0 12px !important; border-radius:999px !important; font:500 14px/36px Inter,system-ui,sans-serif !important;
    background:var(--tm-panel) !important; color:var(--tm-ink) !important; border:1px solid var(--tm-line) !important; z-index:60 !important}
  #chy-launch{top:calc(env(safe-area-inset-top) + 10px) !important; left:auto !important; right:12px !important; height:36px !important;
    border-radius:999px !important; font:500 13px/34px Inter,system-ui,sans-serif !important; padding:0 12px !important;
    background:var(--tm-panel) !important; color:var(--tm-ink) !important; border:1px solid var(--tm-line) !important; z-index:60 !important}
  #lobby-mute{position:fixed !important; top:calc(env(safe-area-inset-top) + 10px) !important; bottom:auto !important;
    right:auto !important; left:50% !important; transform:translateX(-50%) !important; height:36px !important; padding:0 12px !important;
    border-radius:999px !important; font:500 13px/34px Inter,system-ui,sans-serif !important; z-index:60 !important;
    background:var(--tm-panel) !important; color:var(--tm-gold-text) !important; border:1px solid var(--tm-line) !important}
  .ampam-help-btn{left:auto !important; right:8px !important; bottom:calc(env(safe-area-inset-bottom) + 16px) !important;
    width:40px !important; height:40px !important; font-size:18px !important; opacity:.92}
  body:has(nav.bottom-nav) .ampam-help-btn{bottom:calc(env(safe-area-inset-bottom) + 72px) !important}

  /* ── Header: compact, one line of brand, scrollable nav chips ── */
  .topbar{display:block !important; padding:calc(env(safe-area-inset-top) + var(--tm-top)) 16px 12px !important;
    background:var(--tm-bg) !important; border-bottom:1px solid var(--tm-line) !important; height:auto !important}
  .topbar .brand{display:flex !important; align-items:center !important; gap:10px !important; width:auto !important}
  .topbar .brand .totem-acronym, .topbar .brand .sub, .topbar .brand .tagline{display:none !important}
  .topbar .brand .title{font:600 22px/1.15 "Cormorant Garamond",Georgia,serif !important; letter-spacing:.06em !important;
    color:var(--tm-gold-text) !important; white-space:nowrap !important}
  .topbar nav{display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:8px !important;
    margin:12px -16px 0 !important; padding:0 16px 2px !important; scrollbar-width:none; position:static !important; width:auto !important}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{flex:none !important; display:inline-flex !important; align-items:center !important; min-height:36px !important;
    padding:0 14px !important; border-radius:999px !important; border:1px solid var(--tm-line) !important;
    font:500 14px/1 Inter,system-ui,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; color:var(--tm-ink) !important; white-space:nowrap !important;
    text-decoration:none !important; background:var(--tm-panel) !important; position:static !important}
  .topbar nav .totem-theme-toggle{flex:none !important; width:36px !important; height:36px !important}

  /* ── Lobby card: solid surface, no grey wash ── */
  .lobby{margin:0 !important; padding:24px 16px calc(env(safe-area-inset-bottom) + 112px) !important;
    background:var(--tm-panel) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
    max-width:none !important; width:auto !important; backdrop-filter:none !important}
  .lobby::before, .lobby::after{display:none !important}
  .lobby .totem-pole-wrap{height:44px !important; margin:0 auto 8px !important}
  .lobby .totem-pole-wrap svg{height:44px !important}
  .lobby h1{font:600 32px/1.1 "Cormorant Garamond",Georgia,serif !important; letter-spacing:.04em !important;
    color:var(--tm-ink) !important; margin:4px 0 4px !important; text-align:center !important}
  .lobby .lobby-sub{font:italic 18px/1.3 "Cormorant Garamond",Georgia,serif !important; color:var(--tm-gold-text) !important;
    text-align:center !important; margin:0 0 6px !important}
  .lobby .totem-acronym{display:none !important}
  .lobby .treaty{font:400 13px/1.45 Inter,system-ui,sans-serif !important; letter-spacing:0 !important; text-transform:none !important;
    color:var(--tm-mut) !important; text-align:center !important; margin:0 0 20px !important}

  /* ── Forms: 16px inputs (no iOS zoom), clear labels, 48px targets ── */
  .lobby .row{display:block !important}
  .lobby .row .field{width:auto !important; margin-right:0 !important}
  .lobby .field{margin:0 0 16px !important}
  .lobby label{display:block !important; font:600 12px/1.3 Inter,system-ui,sans-serif !important; letter-spacing:.06em !important;
    text-transform:uppercase !important; color:var(--tm-mut) !important; margin:0 0 8px !important}
  .lobby label span{text-transform:none !important; letter-spacing:0 !important; font-weight:400 !important}
  .lobby input:not([type=checkbox]):not([type=radio]):not([type=file]), .lobby select, .lobby textarea{width:100% !important;
    min-height:50px !important; font:400 16px/1.3 Inter,system-ui,sans-serif !important; color:var(--tm-ink) !important;
    background:var(--tm-bg2) !important; border:1px solid var(--tm-line) !important; border-radius:12px !important;
    padding:12px 14px !important; box-sizing:border-box !important}
  .lobby input::placeholder{color:var(--tm-mut) !important; opacity:.85}
  .lobby input:focus, .lobby select:focus{border-color:var(--tm-gold) !important; box-shadow:0 0 0 3px rgba(200,168,78,.25) !important}
  .lobby input[type=file]{font-size:14px !important; color:var(--tm-ink) !important; max-width:100% !important}
  .lobby .hint{font:400 13px/1.45 Inter,system-ui,sans-serif !important; color:var(--tm-mut) !important}
  .lobby .toggle{display:flex !important; align-items:flex-start !important; gap:12px !important; padding:10px 0 !important}
  .lobby .toggle input[type=checkbox]{flex:none !important; width:24px !important; height:24px !important; margin:2px 0 0 !important;
    accent-color:var(--tm-gold)}
  .lobby .toggle label{font:400 15px/1.4 Inter,system-ui,sans-serif !important; text-transform:none !important; letter-spacing:0 !important;
    color:var(--tm-ink) !important; margin:0 !important}
  .lobby .rtmp{margin:12px 0 16px !important; padding:16px !important; border:1px solid var(--tm-line) !important;
    border-radius:var(--tm-radius) !important; background:var(--tm-bg2) !important}
  .lobby .rtmp h3{font:600 20px/1.2 "Cormorant Garamond",Georgia,serif !important; color:var(--tm-ink) !important; margin:0 0 6px !important}
  .lobby .platform-row{display:block !important; margin:0 0 12px !important}
  .lobby .platform-row label{margin:0 0 6px !important}
  .lobby .btn, .lobby button.btn{width:100% !important; min-height:52px !important; border-radius:12px !important;
    font:600 18px/1 "Cormorant Garamond",Georgia,serif !important; letter-spacing:.04em !important;
    background:var(--tm-gold) !important; color:var(--tm-on-gold) !important; border:0 !important}
  .lobby .btn.sc-launch{background:transparent !important; color:var(--tm-ink) !important; border:1px solid var(--tm-line) !important;
    font:500 15px/1 Inter,system-ui,sans-serif !important}
  .lobby .err{font:500 14px/1.4 Inter,system-ui,sans-serif !important; color:var(--tm-danger) !important}

  /* ── /meet/ tabs and bottom bar ── */
  .lobby .tabs{display:flex !important; gap:0 !important; margin:0 0 20px !important; border-bottom:1px solid var(--tm-line) !important}
  .lobby .tabs .tab{flex:1 !important; min-height:48px !important; font:600 15px/1.2 Inter,system-ui,sans-serif !important;
    letter-spacing:0 !important; color:var(--tm-mut) !important; background:none !important}
  .lobby .tabs .tab.active{color:var(--tm-gold-text) !important; box-shadow:inset 0 -3px 0 var(--tm-gold) !important}
  .sc-divider{margin-left:0 !important; margin-right:0 !important}
  nav.bottom-nav{background:var(--tm-panel) !important; border-top:1px solid var(--tm-line) !important;
    padding-bottom:env(safe-area-inset-bottom) !important; height:auto !important}
  nav.bottom-nav a{min-height:56px !important; color:var(--tm-mut) !important}
  nav.bottom-nav a.active{color:var(--tm-gold-text) !important}
  nav.bottom-nav a span{font:600 11px/1.2 Inter,system-ui,sans-serif !important; letter-spacing:.02em !important}

  /* ── Welcome tour: readable heading, no tiny self-screenshot ── */
  .ampam-onboard{width:calc(100vw - 32px) !important; max-width:420px !important; border-radius:var(--tm-radius) !important}
  .ampam-onboard-shot{display:none !important}
  .ampam-onboard-body{padding:20px !important}
  .ampam-onboard-body h1, .ampam-onboard-body h2, .ampam-onboard-body h3, .ampam-onboard .ampam-help-title{
    color:#F4EFE2 !important; font:600 24px/1.2 "Cormorant Garamond",Georgia,serif !important}
  .ampam-onboard-body, .ampam-onboard-body p, .ampam-onboard-body div{font:400 16px/1.5 Inter,system-ui,sans-serif !important; color:#E9E4D6 !important}
  .ampam-onboard-body h1, .ampam-onboard-body h2, .ampam-onboard-body h3{font:600 24px/1.2 "Cormorant Garamond",Georgia,serif !important; color:#F4EFE2 !important}
  .ampam-onboard-btn{min-height:44px !important; font-size:15px !important}
}

/* ── "Live now" list (all widths) ── */
.tm-live{margin:0 0 20px; padding:14px; border:1px solid var(--tm-line); border-radius:var(--tm-radius); background:var(--tm-bg2); text-align:left}
.tm-live h2{display:flex; align-items:center; gap:8px; margin:0 0 10px; font:600 13px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tm-mut)}
.tm-live h2 .tm-dot{width:9px; height:9px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 3px rgba(229,72,77,.2)}
.tm-live .tm-empty{font:400 14px/1.4 Inter,system-ui,sans-serif; color:var(--tm-mut); margin:0}
.tm-live a.tm-item{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 12px; margin:0 0 8px;
  border-radius:12px; background:var(--tm-panel); border:1px solid var(--tm-line); text-decoration:none; color:var(--tm-ink)}
.tm-live a.tm-item:last-child{margin-bottom:0}
.tm-live .tm-item .tm-t{flex:1; min-width:0}
.tm-live .tm-item b{display:block; font:600 16px/1.3 Inter,system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tm-live .tm-item small{display:block; font:400 13px/1.3 Inter,system-ui,sans-serif; color:var(--tm-mut)}
.tm-live .tm-item .tm-go{flex:none; font:600 14px/1 Inter,system-ui,sans-serif; color:var(--tm-on-gold); background:var(--tm-gold);
  border-radius:999px; padding:9px 14px}