/*
 * Doctor reels (#173/#174). The site's tailwind.min.css is a fixed build
 * without opacity colours or arbitrary values (bg-black/40, aspect-[9/16],
 * text-[11px] … are simply absent), so the reel pages carry their own.
 */
.mdr-916 { aspect-ratio: 9 / 16; }

/* ── the feed: full screen, like TikTok / Instagram (owner, 2026-10-19) ───── */
.mdr-stage { position: fixed; inset: 0; z-index: 40; background: #000; color: #fff; overflow: hidden; }
.mdr-bg { display: none; }
.mdr-brand, .mdr-nav { display: none; }
.mdr-col { position: relative; width: 100%; height: 100%; margin: 0 auto; overflow: hidden; background: #000; }
.mdr-feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.mdr-feed::-webkit-scrollbar { display: none; }
.mdr-item { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden; }
.mdr-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.mdr-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

.mdr-top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; gap: .55rem;
           padding: max(.6rem, env(safe-area-inset-top)) .6rem 2rem;
           background: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 65%, transparent); pointer-events: none; }
.mdr-top > * { pointer-events: auto; }
.mdr-top-row { display: flex; align-items: center; gap: .5rem; }
.mdr-title { flex: 1; text-align: center; font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.mdr-icon { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center;
            color: #fff; font-size: 1.05rem; background: rgba(0, 0, 0, .28); }
.mdr-chips { min-width: 0; display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mdr-chips::-webkit-scrollbar { display: none; }
.mdr-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: 999px;
            font-size: 14px; font-weight: 700; white-space: nowrap; color: #fff;
            background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .45);
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mdr-chip i { font-size: 12px; opacity: .9; }
.mdr-chip:hover { border-color: #fff; }
.mdr-chip.is-on { background: #dc2626; border-color: #dc2626; color: #fff; box-shadow: 0 4px 14px rgba(220, 38, 38, .45); }
.mdr-more { display: flex; width: fit-content; align-items: center; gap: .3rem; margin-top: .35rem; font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.mdr-side { position: absolute; bottom: 7.5rem; left: .5rem; z-index: 10; display: flex; flex-direction: column; align-items: center;
            gap: 1.05rem; color: #fff; text-align: center; }
.mdr-act { width: 3rem; height: 2.6rem; display: grid; place-items: center; font-size: 1.85rem; color: #fff;
           filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); transition: transform .12s; }
.mdr-act:active { transform: scale(.88); }
.mdr-act-sm { font-size: 1.35rem; height: 2rem; }
.mdr-emoji { font-size: 1.9rem; line-height: 1; }
.mdr-count { display: block; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.mdr-avatar { position: relative; margin-bottom: .55rem; }
.mdr-avatar img { width: 3.1rem; height: 3.1rem; border-radius: 999px; object-fit: cover; border: 2px solid #fff; background: #333; }
.mdr-avatar button { position: absolute; left: 50%; bottom: -.6rem; transform: translateX(-50%); width: 1.35rem; height: 1.35rem;
                     border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; display: grid; place-items: center; }
.mdr-avatar button.is-on { background: #fff; color: #dc2626; }
.mdr-picker { position: absolute; bottom: 0; left: 3.4rem; display: flex; gap: .25rem; padding: .35rem; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.mdr-picker button { width: 2.5rem; height: 2.5rem; border-radius: 999px; font-size: 1.5rem; display: grid; place-items: center; transition: transform .15s; }
.mdr-picker button:hover { transform: scale(1.25); }
.mdr-picker button.is-on { background: #fee2e2; }

.mdr-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; padding: 5rem 1rem 1.1rem 4.5rem; color: #fff;
            padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
            background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 60%, transparent);
            text-shadow: 0 1px 2px rgba(0, 0, 0, .45); pointer-events: none; }
.mdr-info a, .mdr-info button { pointer-events: auto; }
.mdr-sub { font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.mdr-kind { display: inline-block; padding: .1rem .55rem; border-radius: 6px; background: rgba(220, 38, 38, .92); font-size: 11px; font-weight: 700; text-shadow: none; }
.mdr-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mdr-cta { display: flex; width: fit-content; align-items: center; gap: .45rem; margin-top: .7rem; padding: .55rem 1.1rem; border-radius: 10px;
           background: #dc2626; color: #fff; font-size: 14px; font-weight: 800; text-shadow: none; box-shadow: 0 6px 18px rgba(220, 38, 38, .35); }
.mdr-cta-ghost { background: rgba(255, 255, 255, .2); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mdr-ghost { background: rgba(255, 255, 255, .16); }
.mdr-muted { color: rgba(255, 255, 255, .7); font-size: 11px; }

.mdr-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; height: 3px; background: rgba(255, 255, 255, .18); }
.mdr-progress span { display: block; height: 100%; background: #fff; margin-right: 0; margin-left: auto; transition: width .25s linear; }
.mdr-paused { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; font-size: 3.5rem; color: rgba(255, 255, 255, .85);
              filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
.mdr-heart { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; pointer-events: none; font-size: 6rem; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .4)); }

.mdr-empty { display: grid; place-items: center; text-align: center; padding: 0 2rem;
             background: radial-gradient(circle at 50% 35%, #3b0a0a, #000 70%); }
.mdr-empty-ic { display: inline-grid; place-items: center; width: 5rem; height: 5rem; border-radius: 999px; font-size: 2rem; background: rgba(255, 255, 255, .1); }

/* desktop: a phone-shaped column over the reel's own blurred poster */
@media (min-width: 768px) {
    .mdr-stage { background: #111; }
    .mdr-bg { display: block; position: absolute; inset: -40px; background: #111 center / cover no-repeat; filter: blur(40px) brightness(.45); transition: background-image .3s; }
    .mdr-col { width: calc((100vh - 2rem) * 9 / 16); width: calc((100dvh - 2rem) * 9 / 16); max-width: 100%; height: calc(100vh - 2rem); height: calc(100dvh - 2rem);
               margin-top: 1rem; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
    .mdr-brand { display: block; position: absolute; top: 1.25rem; right: 1.5rem; z-index: 30; padding: .5rem .9rem; border-radius: 12px; background: rgba(255, 255, 255, .95); }
    .mdr-brand img { height: 2.25rem; width: auto; }
    .mdr-nav { display: flex; flex-direction: column; gap: .75rem; position: absolute; top: 50%; left: 2rem; transform: translateY(-50%); z-index: 30; }
    .mdr-nav button { width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem; }
    .mdr-nav button:hover { background: rgba(255, 255, 255, .28); }
}

.mdr-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); }
.mdr-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 28rem; margin: 0 auto; background: #fff; color: #111827;
             border-radius: 1.5rem 1.5rem 0 0; max-height: 75vh; display: flex; flex-direction: column; }
.mdr-toast { position: fixed; bottom: 1.5rem; left: 0; right: 0; z-index: 70; text-align: center; }

.mdr-tiny { font-size: 10px; }
.mdr-small { font-size: 11px; }
.mdr-cta-shadow { box-shadow: 0 10px 25px rgba(205, 0, 0, .2); }
.mdr-max80 { max-height: 80vh; }
.mdr-thumb-fade { background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent); }
.mdr-badge-dark { background: rgba(0, 0, 0, .5); }