:root{
  /* Docflix — dark cinematic */
  --ink:#0a0d17; --panel:#121828; --card:#1a2136; --card-2:#212a44;
  --red:#e11b26; --red-soft:#ff515b; --gold:#e7b24a;
  --d-text:#eef1f8; --d-muted:#8b93a9; --d-line:rgba(255,255,255,.09);
  /* CLIRNET — light clinical */
  --paper:#e9edf4; --surface:#ffffff; --surface-2:#f4f7fb;
  /* one primary blue across CLIRNET — matches --cl-primary further down, so headings (--navy),
     links/borders (--blue) and chip/badge accents (--cl-primary) all read as the same colour */
  --blue:#0d3368; --blue-2:#14356b; --teal:#159b8a; --navy:#0d3368;
  --text:#1b2438; --muted:#6a7288; --line:#e3e8f1;
  --ok:#159b8a;
  --font-d:"Sora",sans-serif; --font-b:"Inter",sans-serif; --font-m:"IBM Plex Mono",monospace;
  --r:14px; --r-sm:10px; --r-lg:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{font-family:var(--font-b);background:var(--ink);color:var(--d-text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--red);color:#fff}
/* keyboard focus — every card in this prototype is a div/anchor driven by onclick,
   so :focus-visible plus [role="button"] (see the keydown delegate in the script)
   are what make the whole flow operable without a mouse */
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.clirnet :focus-visible{outline-color:var(--cl-primary,#0d3368)}
[role="button"]{cursor:pointer}

.seg{display:flex;background:#0f1524;border:1px solid var(--d-line);border-radius:9px;padding:3px}
.seg button{font-family:var(--font-m);font-size:11px;padding:5px 11px;border-radius:6px;color:var(--d-muted);transition:.2s;letter-spacing:.02em}
.seg button.on{background:var(--red);color:#fff}
.seg.disabled{opacity:.35;pointer-events:none}
.seg-label{font-family:var(--font-m);font-size:10px;color:#586080;letter-spacing:.08em;text-transform:uppercase}

/* ============ VIEWS ============ */
.view{display:none}
.view.active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ DOCFLIX LANDING ============
   Landing only ever renders in this light, warm-red palette (or the light-blue
   variant lower down) — there is no dark landing state, so these are the only
   values that ever actually paint; the dark tokens in :root remain live for the
   persistent spec rail above, which stays dark on every view. */
/* compliance-style notice strip — sticky, pinned directly under the persistent
   spec rail, so it stays visible the whole time the visitor scrolls the landing page */
.prof-strip{position:sticky;top:0;z-index:150;background:var(--cl-primary,#0d3368);color:#fff;text-align:center;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.03em;padding:9px 16px}
.dnav{position:sticky;top:34px;z-index:100;display:flex;align-items:center;gap:26px;padding:14px 34px;
  background:linear-gradient(180deg,#fff6f4 0%,rgba(255,246,244,.88) 70%,transparent);backdrop-filter:blur(4px)}
.dnav .logo{font-family:var(--font-d);font-weight:800;font-size:22px;letter-spacing:-.01em}
.dnav .logo span{color:var(--red)}
.dnav a{color:var(--d-muted);font-size:13.5px;font-weight:500;letter-spacing:.02em;text-decoration:none;transition:.2s}
.dnav a:hover,.dnav a.active{color:var(--red)}
.dnav .grow{flex:1}

.hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;padding:0 34px 60px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(225,27,38,.22),transparent 55%),
    linear-gradient(115deg,#fff8f6 10%,#ffe9e6 44%,#ffd8d4 70%,#ffc6c3 100%);}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff6f4 6%,transparent 58%),linear-gradient(0deg,var(--ink),transparent 45%)}
.hero-stars{position:absolute;inset:0;opacity:.28;background-image:
  radial-gradient(1.4px 1.4px at 20% 30%,rgba(178,60,66,.5),transparent),
  radial-gradient(1.2px 1.2px at 60% 20%,rgba(178,60,66,.3),transparent),
  radial-gradient(1.6px 1.6px at 80% 60%,rgba(178,60,66,.4),transparent),
  radial-gradient(1px 1px at 40% 70%,rgba(178,60,66,.3),transparent),
  radial-gradient(1.3px 1.3px at 90% 40%,rgba(178,60,66,.3),transparent)}
.hero-inner{position:relative;z-index:2;max-width:620px}
.eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.hero h1{font-family:var(--font-d);font-weight:800;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.96;letter-spacing:-.02em;margin-bottom:16px}
.hero h1 .ln2{color:#c1121f}
.hero p{color:#4d3336;font-size:15.5px;line-height:1.6;max-width:500px;margin-bottom:26px}
.hero-meta{display:flex;gap:14px;margin-bottom:26px;font-family:var(--font-m);font-size:11.5px;color:var(--d-muted);flex-wrap:wrap}
.hero-meta span{display:flex;align-items:center;gap:6px}
.hero-meta i{width:6px;height:6px;border-radius:50%;background:var(--red);font-style:normal}
.btn-play{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-weight:600;font-size:15px;padding:14px 30px;border-radius:10px;transition:.2s;box-shadow:0 12px 30px -8px rgba(225,27,38,.6)}
.btn-play:hover{background:var(--red-soft);transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(10,35,71,.22);color:#0a2347;font-weight:600;font-size:15px;padding:14px 26px;border-radius:10px;margin-left:12px;transition:.2s;box-shadow:0 6px 18px -10px rgba(10,35,71,.4)}
.btn-ghost:hover{background:#fff0ee}
/* small variant — used for the row-head "view more" actions */
.btn-ghost.btn-sm{font-size:12.5px;padding:9px 18px;border-radius:8px;margin-left:0;gap:7px}
.btn-ghost .arw{transition:.2s}
.btn-ghost:hover .arw{transform:translateX(3px)}

.rows{padding:10px 0 50px;position:relative;z-index:3;}
.row{margin-bottom:44px}
.row-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 34px;margin-bottom:16px}
.row-head h2{font-family:var(--font-d);font-weight:700;font-size:22px;letter-spacing:-.01em}
.row-head .sub{font-size:12.5px;color:var(--d-muted);margin-top:2px}
.pulse{animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,27,38,.35)}50%{box-shadow:0 0 0 7px rgba(225,27,38,0)}}

.scroller{display:flex;gap:16px;overflow-x:auto;padding:6px 34px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#e6b8b6 transparent}
.scroller::-webkit-scrollbar{height:7px}.scroller::-webkit-scrollbar-thumb{background:#e6b8b6;border-radius:10px}

/* expert circles */
.exp{flex:none;width:132px;scroll-snap-align:start;text-align:center;cursor:pointer;transition:.2s}
.exp:hover{transform:translateY(-4px)}
.avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:26px;color:#fff;position:relative;box-shadow:0 8px 20px -10px rgba(120,30,36,.55)}
.avatar::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;transition:.2s}
/* photo overlays the initials circle; if it fails to load it removes itself and the initials show through */
.avatar img,.av img,.bav img,.ma img,.vav img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center top}
.av,.bav,.ma,.vav{position:relative}
.exp:hover .avatar::after{border-color:var(--red)}
.exp .nm{font-weight:600;font-size:13px;line-height:1.25}
.exp .sp{font-size:11px;color:var(--d-muted);margin-top:3px}
.exp .loc{font-family:var(--font-m);font-size:9.5px;color:var(--gold);margin-top:4px;letter-spacing:.05em}

/* show cards */
.show{flex:none;width:210px;scroll-snap-align:start;cursor:pointer;transition:.25s}
.show:hover{transform:translateY(-6px)}
.show .thumb{height:280px;border-radius:12px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:16px;box-shadow:0 14px 30px -16px rgba(120,30,36,.5)}
.show:hover .thumb{box-shadow:0 20px 40px -14px rgba(120,30,36,.55)}
/* artwork sits under the scrim; the inline gradient stays as the fallback if it fails to load */
.show .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.show .thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,8,10,.15) 0%,rgba(26,8,10,.35) 45%,rgba(26,8,10,.88) 100%)}
.show .tag{position:relative;z-index:2;align-self:flex-start;font-family:var(--font-m);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(193,18,31,.82);border:1px solid rgba(255,255,255,.28);padding:4px 9px;border-radius:20px;backdrop-filter:blur(4px)}
.show .st{position:relative;z-index:2;font-family:var(--font-d);font-weight:700;font-size:17px;line-height:1.1;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.show .sm{position:relative;z-index:2;font-size:11px;color:#f1dcd9;margin-top:4px;text-shadow:0 1px 5px rgba(0,0,0,.45)}
/* the rank numeral sits INSIDE the dark thumb scrim, so it stays light even on the light page */
.show .rank{position:absolute;left:-6px;bottom:-14px;z-index:1;font-family:var(--font-d);font-weight:800;font-size:110px;color:rgba(255,255,255,.2);-webkit-text-stroke:2px rgba(255,255,255,.42);line-height:1}

.footer-d{border-top:1px solid var(--d-line);padding:34px;display:flex;align-items:center;gap:16px;color:var(--d-muted);font-size:12.5px;flex-wrap:wrap}
.footer-d b{font-family:var(--font-d);color:var(--red)}

/* ============ LANDING · LIGHT THEME TOKENS ============
   Re-points the shared tokens (the same names the persistent dark spec rail
   above uses) to a warm light-red palette for the landing subtree — every
   component under DOCFLIX LANDING above already carries its light literal
   values directly, so this block only needs to supply the token layer. */
#view-landing{
  --ink:#fff6f4; --panel:#fffaf9; --card:#fff; --card-2:#ffeeec;
  --d-text:#2b1416; --d-muted:#8a6b6d; --d-line:rgba(178,60,66,.16);
  --gold:#0a2347;
  background:var(--ink);color:var(--d-text);
}
/* ============ LANDING · SHOWCASE (the only landing variation) ============ */
.lx-hero{position:relative;display:grid;grid-template-columns:.75fr 1.25fr;gap:18px 36px;align-items:center;padding:48px 44px 60px;overflow:hidden}
.lx-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 80% at 85% 20%,rgba(225,27,38,.15),transparent 60%),
  linear-gradient(160deg,#fff8f6 20%,#ffe9e6 62%,#ffd9d5 100%)}
/* headline row spans both hero columns; description/CTAs/stats sit left, slider right */
.lx-head{grid-column:1/-1;position:relative;z-index:2}
.lx-head h1{font-family:var(--font-d);font-weight:800;font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;letter-spacing:-.02em;margin:14px 0 4px}
.lx-head h1 span{color:#c1121f}
/* align-self:start pins the copy directly under the headline instead of centering it
   against the taller slider (no magic negative margin — holds at any viewport) */
.lx-copy{position:relative;z-index:2;align-self:start;padding-top:6px}
.lx-copy p{color:#4d3336;font-size:15.5px;line-height:1.65;max-width:460px;margin-bottom:26px}
.lx-stats{display:flex;gap:36px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(178,60,66,.18)}
.lx-stats b{display:block;font-family:var(--font-d);font-size:26px;font-weight:800;color:#0a2347}
.lx-stats span{font-size:11.5px;color:#8a6b6d}
/* rotating coverflow hero — 1·2·3·2·1: big active card centre, smaller cards flanking */
.lx-caro{position:relative;z-index:2;height:340px;min-width:0}
.lx-cc{position:absolute;top:50%;left:50%;width:52%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;cursor:pointer;
  border:5px solid #fff;box-shadow:0 24px 50px -20px rgba(120,30,36,.45);
  transform:translate(-50%,-50%) scale(.5);opacity:0;
  transition:transform .55s cubic-bezier(.22,.8,.3,1),opacity .55s ease}
.lx-cc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lx-cc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,6,8,.88));opacity:0;transition:.4s}
.lx-cc.on::after{opacity:1}
.lx-cc.pos0{transform:translate(-50%,-50%) scale(1);z-index:5;opacity:1}
.lx-cc.pos1{transform:translate(calc(-50% + 36%),-50%) scale(.8);z-index:3;opacity:.9}
.lx-cc.posm1{transform:translate(calc(-50% - 36%),-50%) scale(.8);z-index:3;opacity:.9}
.lx-cc.pos2{transform:translate(calc(-50% + 63%),-50%) scale(.62);z-index:1;opacity:.6}
.lx-cc.posm2{transform:translate(calc(-50% - 63%),-50%) scale(.62);z-index:1;opacity:.6}
.lx-ptag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--font-m);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(193,18,31,.85);padding:3px 8px;border-radius:12px;opacity:0;transition:.4s}
.lx-cc.on .lx-ptag{opacity:1}
/* title + meta appear only on the active centre card */
.lx-cinfo{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;color:#fff;opacity:0;transform:translateY(8px);transition:.4s .15s}
.lx-cc.on .lx-cinfo{opacity:1;transform:none}
.lx-cinfo b{display:block;font-family:var(--font-d);font-size:17px;font-weight:700;line-height:1.15}
.lx-cinfo span{display:block;font-size:11px;opacity:.85;margin-top:4px;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.lx-cinfo em{display:inline-flex;font-style:normal;margin-top:10px;background:var(--red);color:#fff;font-size:11px;font-weight:600;padding:6px 12px;border-radius:8px}
.lx-dots{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;gap:7px;z-index:6}
.lx-dots button{width:7px;height:7px;border-radius:50%;background:rgba(178,60,66,.3);padding:0;transition:.25s}
.lx-dots button.on{background:var(--red);width:20px;border-radius:5px}
/* section frame */
.lx-sec{padding:26px 0 8px}
.lx-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 44px;margin-bottom:16px;gap:14px;flex-wrap:wrap}
.lx-h h2{font-family:var(--font-d);font-weight:800;font-size:24px;letter-spacing:-.01em}
.lx-h .sub{font-size:12.5px;color:var(--d-muted);margin-top:3px}
/* expert cast strip — tall full-bleed portrait cards.
   proximity snapping + scroll-padding so the first card lines up with the section heading
   (mandatory snapping ignores the container's left padding and shifted the row) */
.lx-cast{display:flex;gap:16px;overflow-x:auto;padding:6px 44px 18px;scroll-snap-type:x proximity;scroll-padding-inline:44px;scrollbar-width:thin;scrollbar-color:#e6b8b6 transparent}
.lx-cast::-webkit-scrollbar{height:7px}.lx-cast::-webkit-scrollbar-thumb{background:#e6b8b6;border-radius:10px}
.lx-doc{flex:none;width:172px;aspect-ratio:3/4.1;border-radius:var(--r-lg);overflow:hidden;position:relative;cursor:pointer;scroll-snap-align:start;transition:.25s;box-shadow:0 14px 30px -16px rgba(120,30,36,.4)}
.lx-doc:hover{transform:translateY(-6px);box-shadow:0 22px 42px -16px rgba(120,30,36,.5)}
.lx-doc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:.3s}
.lx-doc:hover img{scale:1.05}
.lx-init{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:800;font-size:40px;color:rgba(255,255,255,.9)}
.lx-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(10,6,8,.88) 94%)}
.lx-info{position:absolute;left:13px;right:13px;bottom:12px;color:#fff;z-index:2}
.lx-info b{display:block;font-family:var(--font-d);font-size:14px;font-weight:700;line-height:1.25}
.lx-info span{display:block;font-size:10.5px;opacity:.85;margin-top:3px;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.lx-view{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--font-m);font-size:9px;color:#fff;background:rgba(10,35,71,.78);padding:4px 9px;border-radius:12px;opacity:0;transition:.2s}
.lx-doc:hover .lx-view{opacity:1}
/* bento mosaic — first tile spans 2×2 */
.lx-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:158px;gap:14px;padding:4px 44px 34px}
.lx-tile{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;transition:.25s;box-shadow:0 12px 28px -16px rgba(120,30,36,.35)}
.lx-tile:hover{transform:translateY(-4px);box-shadow:0 20px 40px -16px rgba(120,30,36,.5)}
.lx-tile.big{grid-column:span 2;grid-row:span 2}
.lx-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.35s}
.lx-tile:hover img{scale:1.05}
.lx-chip{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-m);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(193,18,31,.85);padding:4px 9px;border-radius:14px}
.lx-tinfo{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff}
.lx-tinfo b{display:block;font-family:var(--font-d);font-weight:700;font-size:15px;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.lx-tile.big .lx-tinfo b{font-size:20px}
.lx-tinfo span{font-size:11px;opacity:.85}
/* extra slider rows reuse the classic .scroller/.show cards but align to the showcase gutter */
.lx-row{padding-left:44px;padding-right:44px;scroll-snap-type:x proximity;scroll-padding-inline:44px}
/* why choose docflix */
.lx-why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:4px 44px 42px}
.lx-wcard{background:#fff;border:1px solid rgba(178,60,66,.16);border-radius:16px;padding:22px;box-shadow:0 10px 26px -18px rgba(120,30,36,.35);transition:.2s}
.lx-wcard:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(120,30,36,.45)}
.lx-wcard .ic{width:42px;height:42px;border-radius:12px;background:rgba(225,27,38,.1);color:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.lx-wcard .ic svg{width:20px;height:20px}
.lx-wcard b{display:block;font-family:var(--font-d);font-size:15px;font-weight:700;margin-bottom:7px;color:#2b1416}
.lx-wcard p{font-size:12.5px;line-height:1.55;color:#6b5254}
@media(max-width:920px){
  .lx-hero{grid-template-columns:1fr;padding:16px 24px 40px;gap:12px 36px}
  /* stacked hero: image carousel FIRST, headline + copy below it */
  .lx-caro{order:-1;height:250px;max-width:520px;margin:0 auto;width:100%}
  .lx-head h1{font-size:clamp(1.55rem,5.2vw,2.2rem)}
  .lx-h,.lx-cast,.lx-row{padding-left:24px;padding-right:24px}
  .lx-cast,.lx-row{scroll-padding-inline:24px}
  .lx-bento,.lx-why{grid-template-columns:repeat(2,1fr);padding-left:24px;padding-right:24px}
  /* at 2 columns, spanning both rows turns the big tile into a plain square banner —
     span the width only, so it reads as a wide hero strip above a normal 2-up grid */
  .lx-tile.big{grid-row:span 1}
  .lx-tile.big .lx-tinfo b{font-size:17px}
}
@media(max-width:520px){
  .lx-bento,.lx-why{grid-template-columns:1fr}
  .lx-tile.big{grid-column:span 1;grid-row:span 2}
  .lx-tile.big .lx-tinfo b{font-size:20px}
  .lx-stats{gap:24px}
}

/* ============ LANDING · BLUE THEME (matches the CLIRNET listing/detail palette) ============
   Applied via .blue on #view-landing — re-points the landing's red tokens and every
   hard-coded warm tint to the platform blues so landing → listing feels like one site. */
#view-landing.blue{
  --ink:#f3f6fb; --panel:#f8fafd; --card:#fff; --card-2:#e9eef7;
  --red:#0d3368; --red-soft:#14356b; --gold:#159b8a;
  --d-text:#16233c; --d-muted:#5f6c85; --d-line:rgba(13,51,104,.14);
}
#view-landing.blue .dnav{background:linear-gradient(180deg,#f3f6fb 0%,rgba(243,246,251,.88) 70%,transparent)}
#view-landing.blue .hero::before{background:
  radial-gradient(120% 90% at 78% 12%,rgba(13,51,104,.2),transparent 55%),
  linear-gradient(115deg,#f7fafd 10%,#e6edf8 44%,#d5e2f3 70%,#c4d6ee 100%)}
#view-landing.blue .hero::after{background:linear-gradient(90deg,#f3f6fb 6%,transparent 58%),linear-gradient(0deg,var(--ink),transparent 45%)}
#view-landing.blue .hero-stars{background-image:
  radial-gradient(1.4px 1.4px at 20% 30%,rgba(13,51,104,.5),transparent),
  radial-gradient(1.2px 1.2px at 60% 20%,rgba(13,51,104,.3),transparent),
  radial-gradient(1.6px 1.6px at 80% 60%,rgba(13,51,104,.4),transparent),
  radial-gradient(1px 1px at 40% 70%,rgba(13,51,104,.3),transparent),
  radial-gradient(1.3px 1.3px at 90% 40%,rgba(13,51,104,.3),transparent)}
#view-landing.blue .hero h1 .ln2,#view-landing.blue .lx-head h1 span{color:var(--cl-primary,#0d3368)}
#view-landing.blue .hero p,#view-landing.blue .lx-copy p{color:#3a4a66}
#view-landing.blue .btn-play{box-shadow:0 12px 30px -8px rgba(13,51,104,.5)}
#view-landing.blue .btn-login{box-shadow:0 8px 20px -8px rgba(13,51,104,.5)}
#view-landing.blue .btn-ghost{border-color:rgba(13,51,104,.22);color:#0d3368;box-shadow:0 6px 18px -10px rgba(13,51,104,.4)}
#view-landing.blue .btn-ghost:hover{background:#eef2f9}
#view-landing.blue .show .tag,#view-landing.blue .lx-ptag,#view-landing.blue .lx-chip{background:rgba(13,51,104,.85)}
#view-landing.blue .show .thumb{box-shadow:0 14px 30px -16px rgba(16,35,70,.5)}
#view-landing.blue .show:hover .thumb{box-shadow:0 20px 40px -14px rgba(16,35,70,.55)}
#view-landing.blue .avatar{box-shadow:0 8px 20px -10px rgba(16,35,70,.55)}
#view-landing.blue .scroller,#view-landing.blue .lx-cast{scrollbar-color:#b9c9e4 transparent}
#view-landing.blue .scroller::-webkit-scrollbar-thumb,#view-landing.blue .lx-cast::-webkit-scrollbar-thumb{background:#b9c9e4}
#view-landing.blue .lx-hero::before{background:radial-gradient(90% 80% at 85% 20%,rgba(13,51,104,.13),transparent 60%),
  linear-gradient(160deg,#f7fafd 20%,#e6edf8 62%,#d6e3f4 100%)}
#view-landing.blue .lx-stats{border-top-color:rgba(13,51,104,.16)}
#view-landing.blue .lx-stats b{color:#0d3368}
#view-landing.blue .lx-stats span{color:#5f6c85}
#view-landing.blue .lx-cc{box-shadow:0 24px 50px -20px rgba(16,35,70,.45)}
#view-landing.blue .lx-dots button{background:rgba(13,51,104,.25)}
#view-landing.blue .lx-dots button.on{background:#0d3368}
#view-landing.blue .lx-doc{box-shadow:0 14px 30px -16px rgba(16,35,70,.4)}
#view-landing.blue .lx-doc:hover{box-shadow:0 22px 42px -16px rgba(16,35,70,.5)}
#view-landing.blue .lx-tile{box-shadow:0 12px 28px -16px rgba(16,35,70,.35)}
#view-landing.blue .lx-tile:hover{box-shadow:0 20px 40px -16px rgba(16,35,70,.5)}
#view-landing.blue .lx-wcard{border-color:rgba(13,51,104,.14);box-shadow:0 10px 26px -18px rgba(16,35,70,.35)}
#view-landing.blue .lx-wcard:hover{box-shadow:0 18px 36px -18px rgba(16,35,70,.45)}
#view-landing.blue .lx-wcard .ic{background:rgba(13,51,104,.08);color:#0d3368}
#view-landing.blue .lx-wcard b{color:#16233c}
#view-landing.blue .lx-wcard p{color:#5a6780}

/* nav login button */
.btn-login{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-family:var(--font-b);
  font-weight:600;font-size:13.5px;padding:10px 24px;border-radius:8px;transition:.2s;box-shadow:0 8px 20px -8px rgba(225,27,38,.55)}
.btn-login:hover{background:var(--red-soft);transform:translateY(-1px)}

/* ============ CLIRNET (light) shells ============ */
.clirnet{background:var(--paper);color:var(--text);min-height:100vh}
.cnav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eef0f4;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:8px 22px;box-shadow:0 1px 0 0 #eef0f4}
/* on the landing page the "professionals only" strip still sticks at top:0 above
   this nav (unlike the other pages, which have nothing above it) — sit below it
   instead of colliding, matching where .dnav sits when it's the one showing */
#view-landing .cnav{top:34px}
.cn-logo{justify-self:start;display:flex;cursor:pointer;background:none;padding:0}
.cn-logo svg{width:50px;height:50px;display:block}
.cn-menu{justify-self:center;display:flex;align-items:center;gap:34px}
.cn-menu a{display:flex;align-items:center;gap:8px;color:#161616;font-family:var(--font-b);font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;transition:.15s}
.cn-menu a svg{height:18px;width:auto;flex:none;color:#161616}
.cn-menu a:hover{opacity:.7}
.cn-menu a.active{color:var(--cl-primary)}
.cn-menu a.active svg{color:var(--cl-primary)}
.cn-menu a .chev{display:inline-block;width:9px;height:9px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:2px}
.cn-tools{justify-self:end;display:flex;align-items:center;gap:16px;background:#F1F0F4;border-radius:26px;padding:9px 18px}
.cn-tools button{display:flex;color:#161616;padding:0;transition:.15s}
.cn-tools button:hover{opacity:.6}
.cn-tools svg{height:21px;width:auto;display:block}
/* mobile: menu hidden — collapse to logo | tools so the tools pill sits on the RIGHT */
@media(max-width:760px){
  .cn-menu{display:none}
  .cnav{grid-template-columns:auto 1fr}
  .cn-tools{grid-column:2}
}
.back{font-family:var(--font-m);font-size:12px;color:var(--blue);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.back:hover{text-decoration:underline}

/* sub-header: context + breadcrumb */
.cn-subhead{background:var(--surface);border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.crumb{font-family:var(--font-m);font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.crumb b{color:var(--navy)}
.crumb .sl{color:#c2c9d6}
.ctx-pill{margin-left:auto;font-family:var(--font-m);font-size:11px;background:rgba(10,35,71,.08);color:var(--blue);border:1px solid rgba(10,35,71,.22);padding:6px 13px;border-radius:20px;letter-spacing:.02em}

/* the 3-column grid — fixed-width sidebars flanking a flexible main column,
   same proportions as landing-page.html's own grid */
.cn-shell{display:grid;gap:16px;padding:20px 20px 70px;margin:0 auto;align-items:start;transition:grid-template-columns .35s ease}
.clirnet[data-cols="3"] .cn-shell{grid-template-columns:360px minmax(0,1fr) 400px}  /* left | main | right — matches landing-page.html's grid */
/* stack into a single column once side-by-side columns get cramped.
   MAIN CONTENT comes first on small screens; the sidebars follow below it. */
@media(max-width:1000px){
  .clirnet[data-cols="3"] .cn-shell{grid-template-columns:1fr}
  .clirnet[data-cols="3"] .cn-main{order:-1}
  /* the 720px feed cap only makes sense next to sidebars — release it when stacked */
  .clirnet[data-cols="3"] .grid,.clirnet[data-cols="3"] .tagbar,.clirnet[data-cols="3"] .list-top{max-width:none}
  /* LISTING page only — stacked order: cl-contrib card first, results feed second,
     then the rest of the left panel and the right widgets. The left column's wrappers
     become display:contents so its sections can be ordered against the main region. */
  #listingRoot[data-cols="3"] .cn-left,
  #listingRoot[data-cols="3"] #listLeftPanel,
  #listingRoot[data-cols="3"] #listLeftPanel .cl-stack{display:contents}
  #listingRoot[data-cols="3"] .cl-contrib{order:-3}
}
@media(max-width:760px){
  .cn-shell{padding:14px 14px 60px}
  .wire-note{margin:10px 14px 4px}
  /* on scroll the category tagbar pins just below the sticky header;
     while stuck it stretches edge-to-edge (cancels the 14px shell gutters) */
  #listingRoot .tagbar{position:sticky;top:66px;z-index:40;transition:margin .25s,border-radius .25s,box-shadow .25s}
  #listingRoot .tagbar.stuck{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;
    border-radius:0;border-left:0;border-right:0;box-shadow:0 10px 22px -14px rgba(20,30,60,.35)}
}
/* min-width:0 — grid items default to min-width:auto, which would let wide content
   (e.g. the Similar Content scroller) expand the column instead of scrolling inside it */
.region{position:relative;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card + .card{margin-top:18px}
.card h3{font-family:var(--font-d);font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px;letter-spacing:.01em}

/* LEFT: filters */
.filter-grp{margin-bottom:18px}
.filter-grp .lab{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.chip{display:block;width:100%;text-align:left;font-size:13px;color:var(--text);padding:8px 12px;border-radius:8px;border:1px solid transparent;transition:.15s;margin-bottom:5px}
.chip:hover{background:var(--surface-2)}
.chip.on{background:rgba(10,35,71,.08);color:var(--blue);font-weight:600;border-color:rgba(10,35,71,.2)}
.chip .n{float:right;font-family:var(--font-m);font-size:11px;color:var(--muted)}
.chip.on .n{color:var(--blue)}

/* MAIN: listing grid */
.list-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.list-top h1{font-family:var(--font-d);font-size:24px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.list-top .count{font-size:13px;color:var(--muted);margin-top:2px}
.sortby{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.sortby select{font-family:var(--font-b);font-size:12.5px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 32px 7px 12px;color:var(--text);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* category tag bar (top of the results feed) */
.tagbar{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px 10px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tagbar::-webkit-scrollbar{display:none}
.tagbar button{flex:none;font-family:var(--font-b);font-size:14px;font-weight:500;color:#3a4257;background:none;padding:9px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:.15s}
.tagbar button:hover{color:var(--cl-primary)}
.tagbar button.on{background:var(--cl-soft,#e7ecf5);color:var(--cl-primary,#0a2347);font-weight:600}
/* pinned to the right of the tag pills — outlined so it reads as a distinct action, not another filter tab */
.tagbar .tagbar-filter{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--cl-primary);background:var(--surface);border:1px solid rgba(13,51,104,.3);padding:8px 16px}
.tagbar .tagbar-filter:hover{background:var(--soft-bg);color:var(--cl-primary)}
.tagbar .tagbar-filter svg{width:15px;height:15px;flex:none}
.clirnet[data-cols="3"] .tagbar,.clirnet[data-cols="3"] .list-top{max-width:720px}
.clirnet.wire .tagbar{background:repeating-linear-gradient(135deg,#fff,#fff 9px,#f2f5fa 9px,#f2f5fa 18px)!important;border:1.5px dashed #9aa6bd!important}
.grid{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the 3-col left sidebar gets too narrow here for stat + Follow button + stat
     to share one row without squeezing/wrapping oddly */
  .clirnet[data-cols="3"] .cl-stats{flex-wrap:wrap;row-gap:10px}
  .clirnet[data-cols="3"] .cl-followbtn{order:3;flex-basis:100%;max-width:none}
}
@media(max-width:760px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){
  .grid{grid-template-columns:1fr}
}
/* 3-column variation overrides to a single-column feed (higher specificity, always wins) */
.clirnet[data-cols="3"] .grid{grid-template-columns:1fr;gap:16px;max-width:720px}

.dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center;cursor:pointer;transition:.2s;position:relative}
.dcard:hover{box-shadow:0 14px 30px -14px rgba(20,30,60,.35);transform:translateY(-3px);border-color:rgba(10,35,71,.3)}
.dcard .av{width:76px;height:76px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:22px;color:#fff}
.dcard .nm{font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--navy)}
.dcard .sp{font-size:12.5px;color:var(--blue);margin-top:4px;font-weight:500}
.dcard .lc{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;justify-content:center;gap:5px}
.lc svg{width:12px;height:12px;flex:none;color:var(--cl-primary);opacity:.75}
.dt-hero .lc svg{width:14px;height:14px}
.dcard .stats{display:flex;justify-content:center;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.dcard .stats div{font-size:11px;color:var(--muted)}
.dcard .stats b{display:block;font-family:var(--font-d);font-size:15px;color:var(--navy)}
.dcard .follow{margin-top:14px;width:100%;background:var(--surface-2);color:var(--blue);border:1px solid rgba(10,35,71,.3);font-weight:600;font-size:12.5px;padding:8px;border-radius:8px;transition:.15s}
.dcard .follow:hover{background:var(--soft-bg);border-color:var(--soft-bd);color:var(--blue)}
/* reusable outlined "line" button — tints with a soft wash of its own colour on hover */
.btn-line{width:100%;background:var(--surface);border:1px solid rgba(13,51,104,.3);color:var(--blue);
  font-weight:600;font-size:12.5px;padding:9px;border-radius:8px;transition:.15s}
.btn-line:hover{background:var(--soft-bg);border-color:var(--soft-bd)}
/* --- 3-column listing: expert cards become full-width horizontal feed rows --- */
/* padding/gap matched to .scard below, so the two full-width row types in the
   3-column feed (expert rows vs content rows) read as one system */
.clirnet[data-cols="3"] .dcard{display:flex;align-items:center;text-align:left;gap:16px;padding:14px 16px}
.clirnet[data-cols="3"] .dcard .av{margin:0;width:58px;height:58px;font-size:18px;flex:none}
.clirnet[data-cols="3"] .dcard .dc-body{display:flex;align-items:center;gap:26px;flex:1;min-width:0}
.clirnet[data-cols="3"] .dcard .dc-id{flex:1;min-width:0}
.clirnet[data-cols="3"] .dcard .lc{justify-content:flex-start}
.clirnet[data-cols="3"] .dcard .stats{border-top:none;padding-top:0;margin-top:0;flex:none}
.clirnet[data-cols="3"] .dcard .follow{width:auto;margin-top:0;padding:9px 20px;flex:none}
@media(max-width:560px){
  .clirnet[data-cols="3"] .dcard{flex-wrap:wrap;gap:14px}
  .clirnet[data-cols="3"] .dcard .dc-body{flex-wrap:wrap;gap:14px}
}

/* ---- content card — mirrors the platform's channel-profile ClinicalVideoCard ----
   order: type-badge row → title → 16:9 thumb (speaker overlaid top-left) → like/comment footer */
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:.2s;
  display:flex;flex-direction:column;gap:8px;padding:10px}
.vcard:hover{box-shadow:0 14px 30px -14px rgba(20,30,60,.35);transform:translateY(-3px)}
.vc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vc-type{display:flex;align-items:center;gap:6px;font-size:12px;color:#161616;min-width:0}
.vc-type span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-type svg{width:18px;height:18px;flex:none;color:var(--cl-primary)}
.vc-acts{display:flex;align-items:center;gap:4px;flex:none}
.vc-acts button{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#4a5266;transition:.15s}
.vc-acts button:hover{background:rgba(0,0,0,.08)}
.vc-acts svg{width:16px;height:16px}
.vcard .vh{font-family:var(--font-b);font-size:16px;font-weight:600;color:#111;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:rgba(30,40,60,.15)}
.vc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc-scrim{position:absolute;inset:0;background:rgba(0,0,0,.18);transition:.3s}
.vcard:hover .vc-scrim{background:rgba(0,0,0,.28)}
.vc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.42);border:2px solid rgba(255,255,255,.85);color:#fff;font-size:14px;
  display:flex;align-items:center;justify-content:center;padding-left:3px}
/* speaker sits on a dark top gradient so the name stays legible over any artwork */
/* the gradient band always spans the full thumb width — only its contents react to hover */
.vc-speaker{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:9px;padding:11px 12px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 55%,transparent 100%)}
.vc-speaker .vav{width:32px;height:32px;border-radius:50%;flex:none;font-size:11px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.vc-speaker .snm{font-size:13px;font-weight:600;line-height:1.25;text-shadow:0 1px 5px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.vc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.vc-foot .lft{display:flex;align-items:center;gap:15px}
.vc-stat{display:flex;align-items:center;gap:5px;font-size:13px;color:#3a4257}
.vc-stat svg{width:15px;height:15px;flex:none}
.vc-sponsor{font-family:var(--font-m);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;padding:3px 7px;white-space:nowrap}
/* --- 3-column listing: same card, just wider (thumb keeps its 16:9 ratio) --- */
.clirnet[data-cols="3"] .vcard{padding:14px;gap:10px}
.clirnet[data-cols="3"] .vcard .vh{font-size:17px}

/* --- 3-column listing feed: refined small full-width card (one style for every row).
   The thumb keeps a STRICT 16:9 ratio — only its width varies, height always follows. --- */
.sav{position:relative;flex:none;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-d)}
.sav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.scard{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;transition:.22s}
.scard:hover{box-shadow:0 18px 38px -18px rgba(20,30,60,.4);transform:translateY(-2px);border-color:rgba(13,51,104,.22)}
.scard .sc-th{position:relative;width:224px;aspect-ratio:16/9;border-radius:11px;overflow:hidden;flex:none;align-self:center;background:rgba(30,40,60,.15)}
.scard .sc-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.35s}
.scard:hover .sc-th img{scale:1.06}
.scard .sc-th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 55%,rgba(0,0,0,.38) 100%)}
.sc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(10,14,24,.55);backdrop-filter:blur(3px);border:1.5px solid rgba(255,255,255,.85);color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;padding-left:2px;opacity:.85;transition:.22s}
.scard:hover .sc-play{opacity:1;transform:translate(-50%,-50%) scale(1);background:var(--cl-primary);border-color:#fff}
.sc-dur{position:absolute;right:8px;bottom:8px;z-index:2;font-family:var(--font-m);font-size:10px;color:#fff;background:rgba(0,0,0,.6);padding:2px 7px;border-radius:5px}
.scard .bd{flex:1;min-width:0;display:flex;flex-direction:column;padding:2px 4px 2px 0}
.scard .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.sc-type{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--cl-primary);background:var(--cl-soft);
  padding:4px 11px;border-radius:14px;white-space:nowrap;overflow:hidden}
.sc-type svg{width:14px;height:14px;flex:none}
.scard .vc-acts{opacity:.55;transition:.2s}
.scard:hover .vc-acts{opacity:1}
.scard .tt{font-size:15px;font-weight:600;color:#111;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:.15s}
.scard:hover .tt{color:var(--cl-primary)}
.scard .spk{display:flex;align-items:center;gap:8px;min-width:0;margin-top:8px}
.scard .sav{width:26px;height:26px;font-size:9px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.scard .spk .sn{font-size:12.5px;font-weight:500;color:#3a4257;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .spk .sd{font-size:12.5px;color:var(--muted);white-space:nowrap}
.scard .ft{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:10px;border-top:1px solid var(--surface-2)}
.scard .ft .vc-sponsor{margin-left:auto}
/* narrow screens: the thumb shrinks in WIDTH only — aspect-ratio keeps 16:9 intact */
@media(max-width:560px){.scard .sc-th{width:138px}.scard .ft{gap:10px}}
/* wireframe treatment */
.clirnet.wire .scard{
  background:repeating-linear-gradient(135deg,#fff,#fff 9px,#f2f5fa 9px,#f2f5fa 18px)!important;border:1.5px dashed #9aa6bd!important;box-shadow:none!important}
.clirnet.wire .scard .sc-th{background:#d7deea!important}
.clirnet.wire .scard .sc-th img{display:none}
.clirnet.wire .scard .sc-th::after{background:none}
.clirnet.wire .sc-play,.clirnet.wire .sc-dur{color:#7d879c!important;background:none!important;border-color:#7d879c}
.clirnet.wire .sc-type{background:none;border:1px dashed #9aa6bd;color:#7d879c}
.clirnet.wire .sav{background:#d7deea!important;color:#7d879c!important;box-shadow:none}
.clirnet.wire .sav img{display:none}

/* RIGHT: widgets */
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:18px}
.widget .wh{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.mini{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.mini:last-child{border-bottom:none}
.mini:hover .mn{color:var(--blue)}
.mini .ma{width:38px;height:38px;border-radius:50%;flex:none;font-size:13px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-d)}
.mini .mn{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.2;transition:.15s}
.mini .ms{font-size:11px;color:var(--muted);margin-top:2px}
.promo{background:linear-gradient(140deg,var(--cl-soft,#e7ecf5),#fff);border:1px solid rgba(13,51,104,.14)}
.promo .ph{font-family:var(--font-d);font-weight:700;color:var(--navy);font-size:14px;line-height:1.3}
.promo p{font-size:12px;color:var(--muted);margin:8px 0 14px;line-height:1.5}
.promo button{background:var(--blue);color:#fff;font-weight:600;font-size:12.5px;padding:9px 14px;border-radius:8px;width:100%}
.aiadv .st{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ok);margin-bottom:2px}
.aiadv .st i{width:7px;height:7px;border-radius:50%;background:var(--ok);font-style:normal}
.aiadv .q{font-size:12.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-top:10px;line-height:1.4}

/* ============ DETAIL PAGE ============ */
.dt-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.dt-hero .bav{width:96px;height:96px;border-radius:50%;flex:none;font-family:var(--font-d);font-weight:700;font-size:30px;color:#fff;display:flex;align-items:center;justify-content:center}
.dt-hero .info{flex:1;min-width:220px}
.dt-hero h1{font-family:var(--font-d);font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.dt-hero .sp{color:var(--blue);font-weight:600;font-size:14px;margin-top:5px}
.dt-hero .lc{color:var(--muted);font-size:13px;margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dt-hero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.dt-hero .tags span{font-family:var(--font-m);font-size:11px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);padding:5px 11px;border-radius:20px}
.dt-actions{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
.dt-actions .primary{background:var(--blue);color:#fff;font-weight:600;font-size:13px;padding:11px 22px;border-radius:9px;transition:.15s}
.dt-actions .primary:hover{background:var(--blue-2)}
.dt-actions .sec{background:var(--surface);border:1px solid var(--line);color:var(--navy);font-weight:600;font-size:13px;padding:11px 18px;border-radius:9px}
.dt-actions .sec:hover{background:var(--soft-bg);border-color:var(--soft-bd);color:var(--blue)}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:18px}
.statbar div{padding:18px;text-align:center;border-right:1px solid var(--line)}
.statbar div:last-child{border-right:none}
.statbar b{display:block;font-family:var(--font-d);font-size:22px;color:var(--navy)}
.statbar span{font-size:11.5px;color:var(--muted)}
@media(max-width:560px){.statbar{grid-template-columns:repeat(2,1fr)}.statbar div:nth-child(2){border-right:none}}
.prose{font-size:14px;line-height:1.7;color:#3a4257}
.prose p{margin-bottom:12px}
.section-t{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-t::before{content:"";width:4px;height:16px;background:var(--blue);border-radius:2px}
.contentlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
/* in the shared 3-column shell this sits in the same width-capped main column as
   listing/channel-detail's video grid — match that single full-width-card look
   instead of auto-filling into a cramped 2-up grid */
.clirnet[data-cols="3"] .contentlist{grid-template-columns:1fr;gap:16px}

/* ============ CLIRNET CONTRIBUTOR PANEL (left sidebar) ============ */
:root{--cl-primary:#0d3368;--cl-soft:#e7ecf5;--cl-extralight:#f3f2f6;
  /* soft tints of the primary — outlined ("line") buttons tint instead of filling on hover */
  --soft-bg:rgba(13,51,104,.09);--soft-bd:rgba(13,51,104,.32)}
.cl-stack{display:flex;flex-direction:column;gap:16px}
.cl-contrib{background:var(--cl-extralight);border-radius:14px;overflow:hidden;position:relative}
/* on the Channels Discover page the page background is ALSO --cl-extralight
   (to match the featured-story frame there), which made this card invisible against
   it — scope the white-card treatment to just that page instead of globally, so
   Listing/Speaker Details/Video/Channel Details keep their shared lavender-tint look */
#channelsRoot .cl-contrib{background:var(--surface);border:1px solid var(--line)}
/* two floating pills side by side, same treatment — matches landing-page.html's
   Channel/Original-Programming badge pair instead of the old corner-tab shape */
.cl-contrib-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:16px 16px 0}
.cl-badge-contrib{background:var(--cl-soft);color:var(--cl-primary);border-radius:10px;padding:7px 13px;display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:600}
.cl-badge-contrib svg{width:15px;height:15px}
.cl-badge-spec{background:var(--cl-soft);color:var(--cl-primary);font-size:12px;font-weight:600;padding:7px 13px;border-radius:20px}
.cl-contrib-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:16px;text-align:center}
.cl-logo{width:88px;height:88px;border-radius:50%;margin:0 auto;border:2px solid var(--cl-primary);padding:5px;display:flex;align-items:center;justify-content:center}
.cl-logo .ring{width:100%;height:100%;border-radius:50%;display:flex;align-items:center; background-color: var(--cl-primary); justify-content:center;font-family:var(--font-d);font-weight:700;font-size:26px;color:#fff}
/* the Docflix channel's own contributor-panel ring uses the Docflix red, not the CLIRNET blue every doctor/contributor gets —
   inner circle stays white since the Docflix mark image is itself already red */
.cl-logo.docflix{border-color:var(--red)}
.cl-logo.docflix .ring{background-color:#fff}
.cl-name{font-family:var(--font-d);font-size:16px;font-weight:600;color:#111;line-height:1.25}
.cl-desc{font-size:13px;color:#555c6e;line-height:1.55}
.cl-desc a{color:var(--cl-primary);text-decoration:none;font-weight:500;display:block;margin-top:2px;cursor:pointer}
.cl-desc a:hover{text-decoration:underline}
.cl-stats{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.cl-stat{color:var(--cl-primary);font-size:12px;font-weight:400;line-height:1;white-space:nowrap}
.cl-stat b{display:block;font-family:var(--font-d);font-size:19px;font-weight:600;margin-bottom:5px}
.cl-followbtn{flex:1;max-width:150px;background:var(--cl-soft);color:var(--cl-primary);border:1px solid var(--soft-bd);border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.15s}
.cl-followbtn:hover{background:rgba(13,51,104,.16);border-color:var(--soft-bd);color:var(--cl-primary)}
.cl-followbtn svg{width:16px;height:16px}
/* matches landing-page.html's square share button sitting between the follow
   button and the Activities stat */
.cl-sharebtn{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--muted);transition:.15s}
.cl-sharebtn:hover{background:var(--surface-2);color:var(--cl-primary)}
.cl-sharebtn svg{width:16px;height:16px}
.cl-count{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cl-count button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 16px;font-size:13.5px;font-weight:500;color:#26303f;border-bottom:1px solid var(--line);transition:.15s}
.cl-count button:last-child{border-bottom:none}
.cl-count button:hover{background:var(--surface-2)}
.cl-count .lft{display:flex;align-items:center;gap:15px}
.cl-count .ico{width:20px;height:20px;color:var(--cl-primary);display:flex;flex:none}
.cl-count .ico svg{width:100%;height:100%}
.cl-count .num{color:var(--cl-primary);font-weight:600}
/* wireframe treatment for the panel */
.clirnet.wire .cl-contrib,.clirnet.wire .cl-count{
  background:repeating-linear-gradient(135deg,#fff,#fff 9px,#f2f5fa 9px,#f2f5fa 18px)!important;border:1.5px dashed #9aa6bd!important}
.clirnet.wire .cl-logo .ring{background:#d7deea!important;color:#7d879c!important}

/* ============ WIREFRAME MODE ============ */
.clirnet.wire .card,.clirnet.wire .dcard,.clirnet.wire .vcard,.clirnet.wire .widget,
.clirnet.wire .dt-hero,.clirnet.wire .statbar,.clirnet.wire .promo{
  background:repeating-linear-gradient(135deg,#fff,#fff 9px,#f2f5fa 9px,#f2f5fa 18px)!important;
  border:1.5px dashed #9aa6bd!important;box-shadow:none!important}
.clirnet.wire .av,.clirnet.wire .bav,.clirnet.wire .ma,.clirnet.wire .vc-thumb,.clirnet.wire .avatar,.clirnet.wire .vav{
  background:#d7deea!important;color:#7d879c!important}
/* wireframe mode stays photo-free — grey blocks only */
.clirnet.wire .av img,.clirnet.wire .bav img,.clirnet.wire .ma img,.clirnet.wire .vav img,.clirnet.wire .vc-thumb img{display:none}
.clirnet.wire .vc-scrim,.clirnet.wire .vc-speaker{background:none!important}
.clirnet.wire .vc-speaker,.clirnet.wire .vc-play{color:#7d879c!important}
.clirnet.wire .vc-speaker .snm{text-shadow:none}
.clirnet.wire .region{outline:1.5px dashed #b6c0d4;outline-offset:4px;border-radius:6px}
.region-tag{display:none}
.clirnet.wire .region-tag{display:inline-flex;align-items:center;gap:6px;position:absolute;top:-11px;left:12px;z-index:20;
  font-family:var(--font-m);font-size:10px;letter-spacing:.06em;background:var(--navy);color:#fff;padding:3px 9px;border-radius:5px;white-space:nowrap}
.clirnet.wire .region-tag b{color:var(--gold)}
.wire-note{display:none}
.clirnet.wire .wire-note{display:block;font-family:var(--font-m);font-size:11px;color:var(--navy);background:#fff7e0;border:1px dashed var(--gold);border-radius:8px;padding:10px 14px;margin:0 26px 4px}

/* ============ VIDEO DETAIL PAGE ============
   Mirrors the platform's ClinicalVideoDetails layout:
   player → title + divider → speciality badges + action bar → About → speakers → comments → similar */
.vd-stack{display:flex;flex-direction:column;gap:16px}
.vd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.vd-player{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0b1220;margin-bottom:14px}
.vd-player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.vd-player .pbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
  background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.9);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;padding-left:4px;transition:.2s}
.vd-player .pbtn:hover{background:var(--cl-primary);transform:translate(-50%,-50%) scale(1.06)}
.vd-player .dur{position:absolute;right:10px;bottom:10px;font-family:var(--font-m);font-size:11px;color:#fff;
  background:rgba(0,0,0,.65);padding:3px 8px;border-radius:5px}
.vd-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:#161616;line-height:1.35;margin-bottom:10px}
/* the platform's clr_v3_TtlDivider: 250px rail, 100px primary fill */
.ttl-div{position:relative;height:1px;width:250px;max-width:100%;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:16px}
.ttl-div span{position:absolute;top:0;left:0;height:100%;width:100px;background:var(--cl-primary)}
.vd-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vd-badges{display:flex;gap:8px;flex-wrap:wrap}
.badge-soft{background:var(--soft-bg);color:var(--cl-primary);font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:20px;border:1px solid transparent;transition:.15s}
.badge-soft:hover{background:var(--soft-bg);border-color:var(--soft-bd)}
.vd-acts{display:flex;align-items:flex-end;gap:12px;margin-left:auto}
.vd-act{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:#3a4257;transition:.15s}
.vd-act:hover{background:var(--soft-bg);border-color:var(--soft-bd);color:var(--cl-primary)}
.vd-act svg{width:19px;height:19px}
.vd-act .cnt{position:absolute;bottom:100%;right:0;margin-bottom:-6px;font-family:var(--font-m);font-size:10px;
  background:#eef0f4;color:#161616;padding:1px 5px;border-radius:4px}
.vd-about h4{font-family:var(--font-d);font-size:14px;font-weight:700;color:#161616;margin:16px 0 8px}
.vd-about p{font-size:14px;line-height:1.65;color:#161616;margin-bottom:10px}
.vd-more{display:flex;align-items:center;gap:6px;margin:4px auto 0;font-size:13px;color:var(--cl-primary);font-weight:500}
.vd-more:hover{text-decoration:underline}
.vd-sec-t{font-family:var(--font-d);font-size:18px;font-weight:700;color:#161616;margin-bottom:10px}
/* speaker block — 2-up grid, 48px avatar, 36px follow button */
.vd-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:700px){.vd-docs{grid-template-columns:1fr}}
.vd-doc{display:flex;align-items:center;gap:14px;background:var(--surface-2);border-radius:10px;padding:12px;cursor:pointer;transition:.15s}
.vd-doc:hover{background:var(--soft-bg)}
.vd-doc .dav{width:48px;height:48px;border-radius:50%;flex:none;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-d);font-weight:700;font-size:15px}
.vd-doc .dav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.vd-doc .dn{font-size:14px;font-weight:500;color:#161616}
.vd-doc .ds{font-size:12px;color:var(--muted);margin-top:2px}
.vd-doc .add{margin-left:auto;width:36px;height:36px;border-radius:50%;flex:none;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--cl-primary);transition:.15s}
.vd-doc .add:hover{background:var(--soft-bg);border-color:var(--soft-bd)}
.vd-doc .add svg{width:15px;height:15px}
/* comments */
.vd-cmt{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.vd-cmt:last-child{border-bottom:none}
.vd-cmt .cav{width:36px;height:36px;border-radius:50%;flex:none;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;font-family:var(--font-d)}
.vd-cmt .cav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.vd-cmt .cn{font-size:13px;font-weight:600;color:#161616}
.vd-cmt .ct{font-size:13px;color:#3a4257;line-height:1.55;margin-top:3px}
.vd-cmt .cd{font-family:var(--font-m);font-size:10px;color:var(--muted);margin-top:4px}
.vd-cbox{display:flex;gap:10px;margin-top:14px}
.vd-cbox input{flex:1;font-family:var(--font-b);font-size:13px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text);background:var(--surface)}
.vd-cbox input:focus{outline:none;border-color:var(--soft-bd)}
.vd-stars{display:flex;gap:3px;color:#e7b24a;font-size:14px;margin-left:auto}
/* similar content — horizontal scroller of the same content cards */
.vd-similar{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.vd-similar .vcard{flex:none;width:250px}
/* left column widgets */
.svc-card{background:var(--cl-extralight);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px}
.svc-card .ico{width:32px;height:32px;border-radius:7px;background:var(--cl-primary);color:#fff;display:flex;align-items:center;justify-content:center}
.svc-card .ico svg{width:17px;height:17px}
.svc-card h4{font-family:var(--font-d);font-size:14px;font-weight:700;color:#161616}
.svc-card p{font-size:13px;color:#555c6e;line-height:1.55}
.btn-soft{background:var(--soft-bg);color:var(--cl-primary);font-weight:600;font-size:12.5px;padding:8px 16px;border-radius:8px;
  border:1px solid transparent;transition:.15s;align-self:flex-end}
.btn-soft:hover{background:var(--soft-bg);border-color:var(--soft-bd)}
.topics{display:flex;gap:10px;flex-wrap:wrap}
.topic{background:rgba(20,25,40,.06);color:#26303f;font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:20px;transition:.15s}
.topic:hover{background:var(--soft-bg);color:var(--cl-primary)}
/* right column related content */
.rel-card{background:var(--cl-extralight);border-radius:var(--r);padding:18px}
.rel-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.rel-item{display:flex;gap:12px;cursor:pointer}
.rel-item .rt{width:82px;height:52px;border-radius:8px;flex:none;position:relative;overflow:hidden;background:#dde3ee}
.rel-item .rt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rel-item .rh{font-size:12.5px;font-weight:600;color:#161616;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rel-item:hover .rh{color:var(--cl-primary)}
.rel-item .rs{font-size:11px;color:var(--muted);margin-top:4px}
.rel-card .btn-soft{align-self:auto;width:100%;margin-top:16px;text-align:center;display:block}
/* sidebar ad / sponsor banner — mirrors the platform's SponsorCard banner slots (side-top / side-bottom) */
.ad-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;cursor:pointer;transition:.15s}
.ad-card:hover{box-shadow:0 10px 24px -14px rgba(20,30,60,.3)}
.ad-card .ad-tag{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.ad-card .ad-tag span{font-family:var(--font-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ad-card .ad-tag b{font-family:var(--font-m);font-size:9px;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.ad-banner{position:relative;width:100%;aspect-ratio:3/2;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad-banner .ad-txt{position:relative;z-index:2;text-align:center;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ad-banner .ad-txt b{display:block;font-family:var(--font-d);font-size:14px;font-weight:700}
.ad-banner .ad-txt i{font-style:normal;font-size:10.5px;opacity:.9}
.ad-card .ad-cta{margin-top:9px;font-size:11.5px;color:var(--cl-primary);font-weight:600;display:flex;align-items:center;gap:5px}
.clirnet.wire .ad-card{background:repeating-linear-gradient(135deg,#fff,#fff 9px,#f2f5fa 9px,#f2f5fa 18px)!important;border:1.5px dashed #9aa6bd!important}
.clirnet.wire .ad-banner{background:#d7deea!important}
.clirnet.wire .ad-banner img{display:none}
.clirnet.wire .ad-banner .ad-txt{color:#7d879c;text-shadow:none}
#dtAdTop:not(:empty){margin-bottom:18px}

/* wireframe treatment */
.clirnet.wire .vd-card,.clirnet.wire .svc-card,.clirnet.wire .rel-card{
  background:repeating-linear-gradient(135deg,#fff,#fff 9px,#f2f5fa 9px,#f2f5fa 18px)!important;border:1.5px dashed #9aa6bd!important}
.clirnet.wire .vd-player,.clirnet.wire .vd-doc .dav,.clirnet.wire .vd-cmt .cav,.clirnet.wire .rel-item .rt{background:#d7deea!important;color:#7d879c!important}
.clirnet.wire .vd-player img,.clirnet.wire .vd-doc .dav img,.clirnet.wire .vd-cmt .cav img,.clirnet.wire .rel-item .rt img{display:none}

/* ============ CHANNELS DISCOVER ============
   Single-column page template (no cn-shell sidebars) — matches the reference screenshot's
   layout, its own standalone template rather than the shared 3-column cn-shell pages
   (Listing/Speaker Details/Video/Channel Details all use that shared layout instead). */
/* this page gets its own page background — the generic .clirnet paper tone
   (blue-grey) clashed against the lavender family used by the feature card/rc-bar/
   contributor panel here, so match the page bg to that same lavender family instead */
#channelsRoot{background:var(--cl-extralight)}
.chan-shell{max-width:1500px;margin:0 auto;padding:20px 20px 70px}
.chan-hero{display:grid;grid-template-columns:3.4fr 1fr;gap:16px;margin-bottom:34px;align-items:stretch}
/* featured story — soft lavender frame holding image + channel bar + overlapping
   card + a dot-strip footer, matching the reference design */
/* var(--surface) (white), not --cl-extralight — the latter is also the page
   background here, which made this card blend invisibly into the page */
.chan-feature{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
/* redone as a plain row — image thumbnail on the left, channel-bar + copy card
   stacked in normal flow on the right, nothing absolutely overlapping the image */
.chan-feature-top{display:flex;align-items:stretch}
/* contained 16:9 thumbnail (~533×300 max) rather than stretching edge-to-edge across
   the hero column — width is the single source of truth, height just follows the ratio */
.chan-feature-stage{position:relative;flex:none;width:100%;max-width:533px;aspect-ratio:16/9}
.chan-feature-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chan-hot{position:absolute;top:12px;left:12px;z-index:2;width:32px;height:32px;border-radius:50%;background:var(--cl-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(0,0,0,.45)}
.chan-hot svg{width:16px;height:16px}
.chan-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;color:#161616;font-size:16px;display:flex;align-items:center;justify-content:center;padding-left:3px;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);transition:.15s}
.chan-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.chan-feature-body{flex:1;min-width:0;display:flex;flex-direction:column}
.chan-feature-bar{display:flex;align-items:center;gap:9px;background:var(--cl-soft);padding:12px 22px;font-weight:700;font-size:13.5px;color:#161616;cursor:pointer;transition:.15s}
.chan-feature-bar:hover{background:#dfe6f2}
.chan-feature-bar .mk{width:32px;height:32px;border-radius:50%;background:#fff;border:1.5px solid var(--red);position:relative;flex:none;overflow:hidden}
/* the mark's own inline style sizes it relative to its usual (larger, flex-centred)
   slots — at this small badge size flex-centring wasn't landing it dead-centre, so
   pin it with absolute+transform instead (!important overrides the inline style) */
.chan-feature-bar .mk img{position:absolute!important;top:50%!important;left:50%!important;
  transform:translate(-50%,-50%)!important;width:62%!important;height:62%!important;display:block!important}
.chan-fcard{flex:1;padding:18px 22px;display:flex;flex-direction:column;overflow:hidden}
.chan-ftag{font-size:12px;font-weight:600;color:var(--cl-primary)}
.chan-ftitle{font-family:var(--font-d);font-size:18px;font-weight:700;color:#161616;line-height:1.3;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chan-fdesc{font-size:12.5px;color:#555c6e;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chan-fspk{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.chan-fspk .sav{width:28px;height:28px;font-size:10px;flex:none}
.chan-fspk span{font-size:12.5px;font-weight:500;color:#3a4257}
.chan-fbtn{margin-left:auto;background:var(--cl-primary);color:#fff;font-weight:600;font-size:13px;padding:9px 22px;border-radius:8px;transition:.15s;flex:none}
.chan-fbtn:hover{background:var(--blue-2)}
.chan-feature-dots{display:flex;gap:6px;padding:12px 14px}
.chan-feature-dots span{width:20px;height:3px;border-radius:2px;background:rgba(13,51,104,.18)}
.chan-feature-dots span.on{background:var(--cl-primary)}
@media(max-width:900px){
  .chan-feature-top{flex-direction:column}
  .chan-feature-stage{max-width:none}
}
/* right-rail ad slot is intentionally a placeholder, not fabricated ad content */
.chan-ad-slot{height:100%;min-height:300px;border-radius:var(--r);border:1.5px dashed #9aa6bd;
  background:repeating-linear-gradient(135deg,#fff,#fff 9px,#f2f5fa 9px,#f2f5fa 18px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#7d879c;text-align:center;padding:20px}
.chan-ad-slot b{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:#fff;border:1px solid #9aa6bd;padding:3px 10px;border-radius:20px}
.chan-ad-slot span{font-size:12.5px;max-width:160px}
.chan-sec{margin-bottom:34px}
.chan-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.chan-h h2{font-family:var(--font-d);font-size:19px;font-weight:700;color:var(--navy)}
/* "Recommended Community" bar — single pill-shaped strip: label tag on the left,
   then a divider-separated inline list of channels (matches the reference image). */
.rc-bar{position:relative;display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.rc-bar::after{content:"";position:absolute;top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;background:var(--cl-soft);opacity:.7;z-index:0}
.rc-label{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;justify-content:center;gap:1px;background:var(--cl-soft);padding:14px 24px;border-radius:16px 0 40px 0}
.rc-label .r1{font-size:13px;color:#3a4257;font-weight:500}
.rc-label .r2{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--cl-primary)}
.rc-list{position:relative;z-index:1;flex:1;display:flex;align-items:center;overflow-x:auto;padding:8px 24px;scrollbar-width:none;min-width:0}
.rc-list::-webkit-scrollbar{display:none}
.rc-item{flex:none;display:flex;align-items:center;gap:10px;padding:8px 22px;cursor:pointer;transition:.15s;border-right:1px solid rgba(13,51,104,.16)}
.rc-item:last-child{border-right:none}
.rc-item:hover .rc-nm{text-decoration:underline}
.rc-ring{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--cl-primary);padding:2px;flex:none;display:flex;align-items:center;justify-content:center}
/* neutral placeholder-logo mark — reads as "a logo goes here", not a real brand colour */
.rc-logo-ph{width:100%;height:100%;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:#9aa6bd}
.rc-logo-ph svg{width:52%;height:52%}
.rc-nm{font-size:12.5px;font-weight:600;color:var(--cl-primary);line-height:1.3;white-space:nowrap}
.rc-fo{font-size:11px;color:var(--muted);white-space:nowrap;margin-top:1px}
@media(max-width:760px){.rc-bar{flex-direction:column}.rc-label{border-radius:16px 16px 0 0}.rc-bar::after{display:none}}
@media(max-width:460px){.rc-item{padding:8px 14px}.rc-label{padding:12px 16px}}
.chan-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1180px){.chan-grid{grid-template-columns:repeat(3,1fr)}.chan-hero{grid-template-columns:1fr}}
@media(max-width:760px){.chan-grid{grid-template-columns:repeat(2,1fr)}.chan-shell{padding:14px 14px 60px}}
@media(max-width:460px){.chan-grid{grid-template-columns:1fr}.chan-fcard{padding:16px}}
.chancard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:.2s;min-height:190px}
.chancard:hover{box-shadow:0 14px 30px -14px rgba(20,30,60,.35);transform:translateY(-3px);border-color:rgba(13,51,104,.25)}
.chancard .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.chancard .mark{width:52px;height:52px;border-radius:12px;background:var(--cl-soft);color:var(--cl-primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:18px;flex:none}
.chancard.docflix .mark{background:#fff;border:1.5px solid var(--red)}
.chancard .kind{font-family:var(--font-m);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);padding:3px 8px;border-radius:10px;white-space:nowrap;flex:none}
.chancard .tt{font-family:var(--font-d);font-size:15px;font-weight:700;color:#161616;line-height:1.3}
.chancard .ds{font-size:12.5px;color:var(--muted);line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chancard .vm{align-self:flex-end}

/* ============ LOGIN MODAL ============ */
.modal-ov{position:fixed;inset:0;z-index:600;background:rgba(10,8,12,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:.25s}
.modal-ov.open{opacity:1;pointer-events:auto}
.modal-card{background:#fff;border-radius:var(--r-lg);width:100%;max-width:400px;max-height:92vh;overflow-y:auto;position:relative;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);transform:translateY(14px) scale(.98);transition:.25s}
.modal-ov.open .modal-card{transform:none}
.modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#6a7288;font-size:15px;transition:.15s;z-index:2}
.modal-x:hover{background:rgba(0,0,0,.07);color:#161616}
.lg-head{padding:28px 28px 0;text-align:center}
.lg-logo{font-family:var(--font-d);font-weight:800;font-size:26px;color:#161616}
.lg-logo span{color:var(--red)}
/* the modal sits outside #view-landing, so it doesn't inherit the landing's own
   red/blue toggle — mirror it explicitly so the wordmark matches whichever
   theme the visitor was just looking at (the primary button is always CLIRNET
   blue already, since this modal gates the CLIRNET flow either way) */
#loginModal.blue .lg-logo span{color:var(--cl-primary,#0d3368)}
.lg-tag{font-size:11.5px;color:#6a7288;margin-top:4px}
.lg-body{padding:18px 28px 28px}
.lg-title{font-family:var(--font-d);font-size:20px;font-weight:700;color:#161616;margin-bottom:4px}
.lg-sub{font-size:12.5px;color:#6a7288;margin-bottom:18px;line-height:1.5}
/* floating-label inputs (mirrors the platform's FloatingLabel + Form.Control) */
.fl{position:relative;margin-bottom:14px;flex:1}
.fl input{width:100%;font-family:var(--font-b);font-size:14px;padding:20px 14px 7px;border:1px solid #dfe3ec;border-radius:10px;background:#fff;color:#161616;outline:none;transition:.15s}
.fl input:focus{border-color:var(--soft-bd);box-shadow:0 0 0 3px var(--soft-bg)}
.fl label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:13.5px;color:#8a90a3;pointer-events:none;transition:.15s}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label{top:13px;font-size:10px;color:var(--cl-primary)}
.fl.pw input{padding-right:46px}
.eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#6a7288;border-radius:50%;transition:.15s}
.eye:hover{background:rgba(0,0,0,.06)}
.eye svg{width:18px;height:18px}
/* spacing lives on the row so the ISD box and input stretch to the SAME height
   (a margin on .fl would stretch the flex line and misalign the select) */
.lg-row{display:flex;gap:10px;margin-bottom:14px}
.lg-row .fl{margin-bottom:0}
.lg-isd{width:96px;flex:none}
.lg-isd select{width:100%;height:100%;font-family:var(--font-b);font-size:14px;padding:0 24px 0 12px;border:1px solid #dfe3ec;border-radius:10px;background-color:#fff;color:#161616;outline:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8a90a3 50%),linear-gradient(135deg,#8a90a3 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:.15s}
.lg-isd select:focus{border-color:var(--soft-bd);box-shadow:0 0 0 3px var(--soft-bg)}
.lg-primary{width:100%;background:var(--cl-primary);color:#fff;font-weight:600;font-size:14px;padding:12px;border-radius:10px;margin-top:4px;transition:.15s}
.lg-primary:hover{background:#14356b}
.lg-secondary{width:100%;background:#fff;border:1px solid var(--soft-bd);color:var(--cl-primary);font-weight:600;font-size:13px;padding:11px;border-radius:10px;margin-top:10px;transition:.15s}
.lg-secondary:hover{background:var(--soft-bg)}
.lg-or{display:flex;align-items:center;gap:10px;color:#9aa1b5;font-size:11px;margin:12px 0 2px}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:#e6e9f2}
.lg-links{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
.lg-links a{font-size:12px;color:#6a7288;cursor:pointer}
.lg-links a:hover{color:var(--cl-primary);text-decoration:underline}
.lg-hint{font-size:12px;color:var(--ok);margin:-6px 0 12px}

.tip{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;font-family:var(--font-m);font-size:12px;padding:11px 20px;border-radius:24px;z-index:500;opacity:0;transition:.35s;pointer-events:none;box-shadow:0 12px 30px -8px rgba(0,0,0,.5)}
.tip.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ MOBILE / RESPONSIVE ============ */
@media(max-width:760px){
  /* docflix landing: tighter gutters, stacked hero CTAs */
  .dnav{padding:12px 20px}
  .hero{min-height:62vh;padding:0 20px 44px}
  .hero .btn-ghost,.lx-copy .btn-ghost{margin-left:0;margin-top:10px}
  .row-head{padding:0 20px;flex-wrap:wrap;gap:8px 12px}
  .scroller{padding:6px 20px 12px}
  .footer-d{padding:24px 20px}
}
@media(max-width:520px){
  /* hero carousel on phones: near-full-width centre card (flanks just peek at the
     edges), minimal space above/below so the artwork and its overlay text dominate */
  .lx-hero{padding:10px 16px 34px;gap:8px 36px}
  .lx-caro{height:198px}
  .lx-cc{width:88%;border-width:3px;border-radius:12px}
  .lx-cc.pos1{transform:translate(calc(-50% + 52%),-50%) scale(.82)}
  .lx-cc.posm1{transform:translate(calc(-50% - 52%),-50%) scale(.82)}
  .lx-cc.pos2,.lx-cc.posm2{opacity:0;pointer-events:none}
  .lx-cinfo{left:12px;right:12px;bottom:11px}
  .lx-cinfo b{font-size:15px}
  .lx-cinfo span{font-size:11px;margin-top:2px}
  .lx-cinfo em{margin-top:7px;padding:5px 12px;font-size:11px}
  .lx-dots{bottom:0}
  .lx-head .eyebrow{margin-bottom:6px}
  .lx-head h1{margin-top:8px}
  .lx-stats{flex-wrap:wrap;row-gap:14px}
}
@media(max-width:460px){
  .seg-label{display:none}
  /* full-width primary CTAs on phones (row-head "view more" buttons stay inline) */
  .btn-play,.btn-ghost:not(.btn-sm){width:100%;justify-content:center;margin:0 0 10px}
  .show{width:178px}
  .show .thumb{height:240px}
  /* clirnet chrome */
  .cnav{padding:8px 12px}
  .cn-logo svg{width:42px;height:42px}
  #listingRoot .tagbar{top:58px}   /* shorter header at this size — keep the tagbar flush under it */
  .cn-tools{gap:12px;padding:8px 14px}
  .cn-tools svg{height:19px}
  /* cards & pages */
  .card,.vd-card{padding:14px}
  .list-top h1{font-size:20px}
  .dt-hero{padding:18px;gap:16px}
  .dt-hero .bav{width:70px;height:70px;font-size:23px}
  .dt-hero h1{font-size:21px}
  .statbar div{padding:12px}
  .statbar b{font-size:18px}
  .vd-player .pbtn{width:50px;height:50px;font-size:16px}
  .vd-title{font-size:16px}
  .vd-similar .vcard{width:210px}
  .scard{gap:12px;padding:10px}
  .scard .sc-th{width:120px;border-radius:9px}
  .scard .spk .sd{display:none}
  .sc-play{width:30px;height:30px;font-size:9px}
  /* contributor panel: keep the stats row comfortable on ~320px screens */
  .cl-stat b{font-size:16px}
  .cl-followbtn{padding:7px 8px;font-size:12px}
  /* login modal */
  .modal-card{border-radius:var(--r)}
  .lg-head{padding:22px 20px 0}
  .lg-body{padding:16px 20px 22px}
}

/* ============ MOBILE READABILITY — type bumps ============
   Phone minimums: content text ≥12px, secondary ≥11.5px, micro-badges ≥10px,
   form inputs 16px (prevents iOS auto-zoom on focus). */
@media(max-width:520px){
  /* docflix landing */
  .hero-meta{font-size:12px}
  .exp .nm{font-size:13.5px}
  .exp .sp{font-size:12px}
  .exp .loc{font-size:10.5px}
  .show .tag{font-size:10.5px}
  .show .st{font-size:16px}
  .show .sm{font-size:12px}
  .row-head .sub,.lx-h .sub{font-size:13px}
  .lx-ptag,.lx-chip{font-size:10.5px}
  .lx-info b{font-size:14.5px}
  .lx-info span{font-size:11.5px}
  .lx-tinfo span{font-size:12px}
  .lx-stats b{font-size:22px}
  .lx-stats span{font-size:12.5px}
  .lx-wcard p{font-size:13px}
  /* clirnet listing + cards */
  .chip .n{font-size:11.5px}
  .dcard .sp{font-size:13px}
  .dcard .lc{font-size:12px}
  .dcard .stats div{font-size:11.5px}
  .vc-type{font-size:12.5px}
  .vc-sponsor{font-size:10px}
  .sc-type{font-size:11.5px}
  .sc-dur{font-size:10.5px}
  .scard .spk .sn{font-size:13px}
  .widget .wh{font-size:11px}
  .mini .mn{font-size:13px}
  .mini .ms{font-size:11.5px}
  .promo p{font-size:12.5px}
  .aiadv .st{font-size:11.5px}
  .aiadv .q{font-size:13px}
  /* detail + video pages */
  .dt-hero .tags span{font-size:11.5px}
  .statbar span{font-size:12px}
  .badge-soft{font-size:13px}
  .vd-doc .ds{font-size:12.5px}
  .vd-cmt .ct{font-size:13.5px}
  .vd-cmt .cd{font-size:10.5px}
  .rel-item .rh{font-size:13px}
  .rel-item .rs{font-size:11.5px}
  .topic{font-size:13px}
  .svc-card p{font-size:13.5px}
  .cl-stat{font-size:12.5px}
  .ad-card .ad-tag span,.ad-card .ad-tag b{font-size:10px}
  .ad-banner .ad-txt i{font-size:11.5px}
  .ad-card .ad-cta{font-size:12px}
  /* login modal — 16px inputs stop iOS zooming the page on focus */
  .fl input{font-size:16px}
  .lg-isd select{font-size:16px}
  .fl input:focus+label,.fl input:not(:placeholder-shown)+label{font-size:10.5px}
  .lg-tag{font-size:12px}
  .lg-sub{font-size:13px}
  .lg-links a{font-size:12.5px}
  /* toast */
  .tip{font-size:13px}
}