/* responsive.css — one set of rules for every screen, following the apps' logic (lib/device-mode.js sets the html classes).
   Phones (< 600px): one column + bottom nav.  Tablets / computers: rails + middle, profile capped and centered like the app's
   AdaptiveLayout.  Big monitors (1800px+): wider rails, and the default profile splits into two panes like the app's wide
   (landscape, regular-width) layout: identity on the left, tabs + content on the right.  TVs / consoles: 10-foot sizing,
   overscan-safe margins, big focus rings for the remote (lib/tv-nav.js). Loaded after every theme stylesheet. */

/* The middle column is a size container: theme stylesheets use @container (min-width: …) to cap and center their profile. */
#view-container { container-type: inline-size; container-name: bmview; }

/* Real viewport height (phone browser bars / TV overscan make 100vh lie) */
.bm-left-rail, .bm-right-rail { height: calc(var(--bm-vh, 1vh) * 100); }

/* ── Phones in landscape: short screens never get tall heroes ── */
html.bm-short .bm-profile-cover-tall, html.bm-short .bm-profile-cover { height: min(46vh, 240px) !important; }
html.bm-short .bm-trinity-stack-3.bm-trinity-stack-desktop { --tm: min(180px, 34vh) !important; }

/* ── Things that only appeared on hover must be reachable without a mouse (phones, tablets, TVs) ── */
html.bm-no-hover .bm-np-close { opacity: 1; }

/* ── Big monitors / ultrawide (1800px+) ── */
@media (min-width: 1800px) {
  :root { --bm-max-w: 2400px; --bm-left-rail-w: 300px; --bm-right-rail-w: 400px; }
}
/* Every profile fills the whole middle column, edge to edge, at every size (no centered cap).
   App-family themes (BlvckMeta / After Hours / Voltage): the cover and the Trinity grow with the column (container units), so big
   monitors and TVs get a big Trinity in the center instead of a small one in a sea of black. */
@container bmview (min-width: 700px) {
  :is(html[data-theme="blvckmeta"], html[data-theme="afterhours"], html[data-theme="voltage"]) .bm-trinity-stack-3.bm-trinity-stack-desktop {
    --tm: clamp(300px, 34cqw, 640px); --ts: calc(var(--tm) * 0.62); --to: calc(var(--tm) * 0.2);
  }
  :is(html[data-theme="blvckmeta"], html[data-theme="afterhours"], html[data-theme="voltage"]) .bm-profile-cover.bm-profile-cover-tall {
    height: clamp(380px, 40cqw, 660px);
  }
}

/* Every theme's main photos grow on big screens too (desktop monitors, TVs): sizes follow the middle column's width (cqw), never
   smaller than the phone/tablet size each theme already sets. */
@container bmview (min-width: 1000px) {
  html[data-theme="darkroom"] .bm-drp-media { --s: clamp(256px, 30cqw, 520px); }
  html[data-theme="darkroom"] .bm-drp-media.big { --s: clamp(330px, 38cqw, 640px); }
  html[data-theme="darkroom"] .bm-drp-backdrop { height: clamp(300px, 34cqw, 560px); }
  html[data-theme="marquee"] .bm-mqx { --mq-cover-h: clamp(180px, 22cqw, 380px); --mq-photo: clamp(128px, 15cqw, 240px); }
  html[data-theme="bloom"] .bm-blx { --bl-photo: clamp(148px, 17cqw, 260px); }
  html[data-theme="ultraviolet"] .bm-uv-avatar { width: clamp(220px, 26cqw, 440px); }
  html[data-theme="ultraviolet"] .bm-uv-hero, html[data-theme="ultraviolet"] .bm-uv-hero.has-cover { height: clamp(300px, 32cqw, 540px); }
  :is(html[data-theme="blush"], html[data-theme="purpleRain"]) .bm-glass-wrap .bm-glass-cover { height: clamp(220px, 26cqw, 440px); }
  :is(html[data-theme="blush"], html[data-theme="purpleRain"]) .bm-glass-wrap .bm-glass-circle.main { width: clamp(172px, 20cqw, 340px); height: clamp(172px, 20cqw, 340px); margin: 0 calc(clamp(172px, 20cqw, 340px) * -0.26); }
  :is(html[data-theme="blush"], html[data-theme="purpleRain"]) .bm-glass-wrap .bm-glass-circle.side { width: clamp(110px, 12.8cqw, 218px); height: clamp(110px, 12.8cqw, 218px); }
  html[data-theme="royalPalace"] .bm-rpp-window { height: clamp(250px, 30cqw, 480px); }
  html[data-theme="royalPalace"] .bm-rpp-trinity { height: clamp(200px, 24cqw, 380px); margin-top: calc(clamp(200px, 24cqw, 380px) * -0.48); }
  html[data-theme="royalPalace"] .bm-rpp-center { width: clamp(186px, 22cqw, 350px); height: clamp(186px, 22cqw, 350px); margin: calc(clamp(186px, 22cqw, 350px) / -2) 0 0 calc(clamp(186px, 22cqw, 350px) / -2); }
  html[data-theme="noir"] .bm-nrp-cover { height: clamp(380px, 40cqw, 660px); }
  html[data-theme="noir"] .bm-nrp-trinity { height: clamp(220px, 26cqw, 440px); }
  html[data-theme="tribune"] .bm-trp-photo-col { flex-basis: clamp(320px, 34cqw, 560px); width: clamp(320px, 34cqw, 560px); }
  html[data-theme="tribune"] .bm-trp-photo { height: clamp(320px, 34cqw, 560px); }
  html[data-theme="sage"] .bm-sagep-main { width: clamp(170px, 18cqw, 300px); height: calc(clamp(170px, 18cqw, 300px) * 1.27); }
  html[data-theme="sage"] .bm-sagep-side { height: clamp(150px, 16cqw, 260px); }
  html[data-theme="loft"] .bm-loftp-trinity { height: clamp(240px, 28cqw, 480px); }
  html[data-theme="den"] .bm-den-wrap { --den-d: clamp(240px, 24cqw, 420px); }
  html[data-theme="den"] .bm-den-wrap .bm-den-cover { height: clamp(230px, 28cqw, 460px); }
  html[data-theme="homeroom"] .bm-hr-wrap { max-width: none; --hr-d: clamp(240px, 24cqw, 420px); }
  html[data-theme="homeroom"] .bm-hr-wrap .bm-hr-cover { height: clamp(230px, 28cqw, 460px); }
}

/* ── Post media (lib/post-video.js): a post's photo or video keeps its own shape and fills the post's width — landscape is wide,
   tall phone video is capped at 4:5 — on phones, desktops and TVs alike. The old fixed 440px portrait box is gone. ── */
.bm-post-media-wrap { aspect-ratio: auto; max-width: none; max-height: none; width: 100%; display: block !important; position: relative; }
.bm-post-media-wrap > img.bm-post-media { width: 100%; height: auto !important; max-height: 85vh; object-fit: contain; }
.bm-post-media-wrap > video.bm-post-media { width: 100%; height: auto !important; max-height: 85vh; object-fit: contain; display: block; }
.bm-post-media-wrap.bm-pv-sized > video.bm-post-media { height: 100% !important; max-height: none; }
.bm-post-media-wrap.bm-pv-tall { max-width: min(100%, 560px) !important; margin-left: auto; margin-right: auto; }
.bm-me-porch-feed .bm-post-media-wrap > video.bm-post-media, .bm-me-porch-feed .bm-post-media-wrap > img.bm-post-media { height: auto; }
.bm-pv { position: relative; }
.bm-pv video.bm-post-media { cursor: pointer; }
.bm-pv-sound { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,.62); color: #fff; font: 700 12px Inter, system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bm-pv-sound:hover, .bm-pv-sound:focus-visible { background: var(--bm-accent, #d4a63c); color: var(--bm-on-accent, #000); outline: none; }
.bm-pv.bm-pv-loud .bm-pv-sound { display: none; }
html.bm-tv .bm-pv-sound { font-size: 16px; padding: 12px 18px; }

/* ── Tablets in portrait (600–1024px tall screens): a little more breathing room ── */
html.bm-regular.bm-portrait:not(.bm-tv) .bm-view-container { padding-bottom: 24px; }

/* ── TVs, streaming sticks, consoles: the 10-foot experience ── */
html.bm-tv { scroll-behavior: smooth; }
html.bm-tv body { cursor: none; }
@media (min-width: 1200px) { html.bm-tv body { zoom: 1.25; } }
@media (min-width: 2400px) { html.bm-tv body { zoom: 1.9; } }                 /* 4K TVs that report full 3840px */
html.bm-tv .bm-layout { padding: 2.5vh 3vw; box-sizing: border-box; }         /* overscan-safe edges */
html.bm-tv :focus { outline: none; }
html.bm-tv :focus-visible, html.bm-tv .bm-tv-focus, html.bm-tv :focus {
  outline: 4px solid var(--bm-accent, #d4a63c) !important; outline-offset: 4px !important;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--bm-accent, #d4a63c) 28%, transparent) !important;
  border-radius: 12px; position: relative; z-index: 3;
}
html.bm-tv .bm-nav-item, html.bm-tv .bm-subtab, html.bm-tv button, html.bm-tv a { transition: transform .12s ease; }
html.bm-tv .bm-nav-item:focus, html.bm-tv .bm-subtab:focus, html.bm-tv .bm-post-card:focus-within { transform: scale(1.04); }
html.bm-tv .bm-now-playing { top: calc(2.5vh + 14px); }
html.bm-tv .bm-compose-fab { display: none; }                                 /* Create lives in the nav; a floating button is unreachable by D-pad */
html.bm-tv input, html.bm-tv textarea, html.bm-tv select { font-size: 18px; }

@media (prefers-reduced-motion: reduce) { html.bm-tv { scroll-behavior: auto; } html.bm-tv * { transition: none !important; } }

/* ── Sign in with your phone (lib/tv-link.js) ── */
.bm-tvl { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bm-tvl-card { width: min(94vw, 720px); background: var(--bm-card, #151515); color: var(--bm-text-primary, #fff); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 26px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); font-family: Inter, system-ui, sans-serif; }
.bm-tvl-k { font-size: 22px; font-weight: 900; margin-bottom: 12px; }
.bm-tvl-p { color: var(--bm-text-muted, #bbb); margin: 8px 0 14px; font-size: 16px; }
.bm-tvl-small { color: var(--bm-text-muted, #999); font-size: 13px; margin: 10px 0; }
.bm-tvl-grid { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; text-align: left; }
.bm-tvl-qr { width: 240px; height: 240px; background: #fff; border-radius: 18px; padding: 14px; }
.bm-tvl-qr svg { width: 100%; height: 100%; display: block; }
.bm-tvl-steps { margin: 0; padding-left: 22px; font-size: 18px; line-height: 1.5; }
.bm-tvl-steps li { margin: 6px 0; }
.bm-tvl-code { font: 900 34px/1.1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 6px; color: var(--bm-accent, #d4a63c); margin: 14px 0 6px; }
.bm-tvl-code.big { font-size: 46px; }
.bm-tvl-btn { display: block; width: 100%; padding: 14px; border-radius: 14px; font-weight: 800; font-size: 16px; margin-top: 10px; cursor: pointer; border: 1px solid var(--bm-accent, #d4a63c); }
.bm-tvl-btn.solid { background: var(--bm-accent, #d4a63c); color: var(--bm-on-accent, #000); }
.bm-tvl-btn.ghost { background: transparent; color: var(--bm-text-primary, #fff); border-color: rgba(255,255,255,.2); }
.bm-tvl-input { width: 100%; box-sizing: border-box; padding: 14px; font: 800 24px ui-monospace, Menlo, monospace; letter-spacing: 4px; text-align: center; text-transform: uppercase; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; }
.bm-tvl-input.bad { border-color: #ff5a5a; }
.bm-tvl-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid currentColor; background: transparent; color: inherit; font-weight: 700; font-size: 15px; cursor: pointer; opacity: .9; }
.bm-tvl-hint { position: relative; z-index: 5; margin: 12px auto; max-width: 460px; padding: 12px 16px; border-radius: 14px; background: #d4a63c; color: #141414; font: 600 14px/1.35 Inter, system-ui, sans-serif; text-align: center; }
@media (max-width: 560px) { .bm-tvl-grid { grid-template-columns: 1fr; text-align: center; } .bm-tvl-qr { margin: 0 auto; width: 200px; height: 200px; } .bm-tvl-steps { text-align: left; } }
html.bm-tv .bm-tvl-card { width: min(90vw, 980px); padding: 40px; }
html.bm-tv .bm-tvl-qr { width: 340px; height: 340px; }
html.bm-tv .bm-tvl-steps { font-size: 24px; }
html.bm-tv .bm-tvl-code.big { font-size: 64px; }