/* ComicVision v0.9.3 - Public Netflix + Audible Reader Flow
   Public = content consumption. Admin/Review = protected workshop. */
:root{
  --cv-bg:#04050a;
  --cv-panel:rgba(255,255,255,.065);
  --cv-panel-strong:rgba(8,9,18,.78);
  --cv-line:rgba(255,255,255,.12);
  --cv-line-strong:rgba(255,255,255,.20);
  --cv-text:#f8f5ef;
  --cv-soft:#c9c3b8;
  --cv-muted:#8d8895;
  --cv-warm:#f2b660;
  --cv-cyan:#66d9ff;
  --cv-violet:#a78bff;
  --cv-green:#4ade80;
  --cv-red:#fb7185;
  --cv-radius:24px;
  --cv-control-h:36px;
  --cv-reader-bar:104px;
}
html,body{min-height:100%;}
body[data-cv-surface="public-home"],
body[data-cv-surface="public-reader"]{
  margin:0;
  background:radial-gradient(circle at 12% 0%,rgba(102,217,255,.14),transparent 32%),radial-gradient(circle at 86% 8%,rgba(167,139,255,.14),transparent 30%),linear-gradient(180deg,#04050a,#0d0e18 58%,#05060b);
  color:var(--cv-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
body[data-cv-surface="public-reader"]{overflow:hidden;}
.cv-public-shell *,.cv-reader-shell *{box-sizing:border-box;}
.cv-public-shell a,.cv-reader-shell a{color:inherit;text-decoration:none;}
.cv-public-topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(16px,3.2vw,46px);
  background:linear-gradient(180deg,rgba(4,5,10,.92),rgba(4,5,10,.58),transparent);
  backdrop-filter:blur(18px);
}
.cv-public-brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.04em;}
.cv-public-mark{width:30px;height:30px;border-radius:11px;background:linear-gradient(135deg,var(--cv-cyan),var(--cv-violet));box-shadow:0 0 30px rgba(102,217,255,.18);}
.cv-public-nav{display:flex;align-items:center;gap:10px;color:var(--cv-soft);font-size:13px;font-weight:760;}
.cv-public-pill,.cv-mini-pill{
  border:1px solid var(--cv-line);border-radius:999px;background:rgba(255,255,255,.055);color:var(--cv-soft);
  min-height:30px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;font-size:12px;font-weight:800;
}
.cv-public-pill:before{content:"";width:7px;height:7px;border-radius:99px;background:var(--cv-green);box-shadow:0 0 0 4px rgba(74,222,128,.12);}
.cv-public-hero{
  position:relative;min-height:min(72svh,700px);display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:clamp(18px,3vw,34px);align-items:end;padding:64px clamp(16px,3.2vw,46px) 28px;overflow:hidden;
}
.cv-public-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(4,5,10,.95),rgba(4,5,10,.58) 46%,rgba(4,5,10,.93)),var(--cv-hero-art);background-size:cover;background-position:center;opacity:.70;filter:saturate(1.08);z-index:-2;}
.cv-public-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,5,10,.92));z-index:-1;}
.cv-public-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cv-warm);font-weight:950;}
.cv-public-title{font-size:clamp(3.2rem,7.2vw,7.4rem);line-height:.86;letter-spacing:-.095em;margin:10px 0 12px;max-width:880px;}
.cv-public-lead{max-width:720px;color:var(--cv-soft);font-size:clamp(1rem,1.45vw,1.3rem);line-height:1.43;margin:0;}
.cv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.cv-btn{min-height:var(--cv-control-h);border:1px solid var(--cv-line);border-radius:999px;background:rgba(255,255,255,.075);color:var(--cv-text);padding:0 14px;font-size:13px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;}
.cv-btn.primary{border:0;background:linear-gradient(90deg,var(--cv-warm),#ffd89a);color:#1a1110;box-shadow:0 16px 38px rgba(242,182,96,.16);}
.cv-btn.ghost{background:rgba(0,0,0,.24);}
.cv-hero-cover{border:1px solid var(--cv-line);border-radius:28px;background:rgba(5,6,12,.62);backdrop-filter:blur(18px);overflow:hidden;box-shadow:0 32px 110px rgba(0,0,0,.40);}
.cv-hero-cover img{display:block;width:100%;height:390px;object-fit:cover;}
.cv-hero-cover-body{padding:14px;display:grid;gap:8px;}
.cv-public-main{padding:0 clamp(16px,3.2vw,46px) 46px;}
.cv-row-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:28px 0 12px;}
.cv-row-head h2{margin:0;font-size:clamp(1.35rem,2.6vw,2.65rem);letter-spacing:-.07em;}
.cv-row-head p{margin:4px 0 0;color:var(--cv-soft);font-size:13px;}
.cv-shelf{display:flex;gap:13px;overflow:auto;padding:3px 2px 17px;scroll-snap-type:x proximity;scrollbar-width:none;}
.cv-shelf::-webkit-scrollbar,.cv-page-strip::-webkit-scrollbar{display:none;width:0;height:0;}
.cv-cover-card{position:relative;flex:0 0 clamp(190px,18vw,250px);height:clamp(270px,28vw,345px);border:1px solid var(--cv-line);border-radius:23px;background:var(--cv-panel);overflow:hidden;box-shadow:0 18px 58px rgba(0,0,0,.32);cursor:pointer;scroll-snap-align:start;transition:transform .16s,border-color .16s;}
.cv-cover-card.featured{flex-basis:clamp(265px,29vw,390px);}
.cv-cover-card:hover{transform:translateY(-3px);border-color:rgba(242,182,96,.48);}
.cv-cover-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cv-cover-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(4,5,10,.22) 48%,rgba(4,5,10,.95));}
.cv-cover-content{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;}
.cv-cover-content h3{margin:0;font-size:20px;line-height:1.02;letter-spacing:-.055em;}
.cv-cover-content p{margin:6px 0 0;color:var(--cv-soft);font-size:12px;line-height:1.32;}
.cv-empty{border:1px dashed rgba(255,255,255,.18);background:rgba(0,0,0,.18);border-radius:22px;padding:24px;color:var(--cv-soft);}

/* Audible reader */
.cv-reader-shell{height:100svh;display:grid;grid-template-rows:44px minmax(0,1fr) var(--cv-reader-bar);gap:8px;padding:10px clamp(10px,1.6vw,20px);overflow:hidden;}
.cv-reader-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.cv-reader-brand{display:flex;align-items:center;gap:9px;min-width:0;font-weight:900;letter-spacing:-.04em;}
.cv-reader-status{display:flex;align-items:center;gap:8px;min-width:0;color:var(--cv-soft);font-size:12px;white-space:nowrap;}
.cv-reader-main{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:10px;align-items:stretch;}
.cv-reader-stage{min-width:0;min-height:0;border:1px solid var(--cv-line);background:rgba(2,3,9,.54);border-radius:24px;display:grid;place-items:center;padding:10px;overflow:hidden;box-shadow:0 28px 100px rgba(0,0,0,.38);}
.cv-reader-page{position:relative;display:grid;place-items:center;width:min(100%,calc((100svh - 180px) * (1055 / 1491)));max-width:100%;height:auto;aspect-ratio:1055/1491;line-height:0;border-radius:18px;overflow:hidden;contain:layout paint size;background:rgba(0,0,0,.25);}
.cv-reader-page img{width:100%;height:100%;object-fit:contain;border-radius:18px;box-shadow:0 18px 80px rgba(0,0,0,.50);}
.cv-reader-side{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;}
.cv-now-card,.cv-queue-card,.cv-reader-player{border:1px solid var(--cv-line);border-radius:22px;background:rgba(5,6,12,.60);backdrop-filter:blur(16px);padding:12px;min-width:0;}
.cv-now-title{font-size:18px;font-weight:950;letter-spacing:-.045em;line-height:1.05;margin:3px 0 4px;}
.cv-now-text{font-size:clamp(1.05rem,1.55vw,1.35rem);line-height:1.22;letter-spacing:-.035em;margin:10px 0;color:var(--cv-text);}
.cv-now-meta{color:var(--cv-soft);font-size:12px;display:flex;gap:7px;flex-wrap:wrap;}
.cv-queue-card{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);}
.cv-timeline{overflow:auto;display:grid;gap:7px;padding-right:2px;scrollbar-width:thin;}
.cv-segment{border:1px solid rgba(255,255,255,.085);border-radius:14px;background:rgba(255,255,255,.040);padding:8px;cursor:pointer;color:var(--cv-soft);}
.cv-segment.active{border-color:rgba(242,182,96,.65);background:rgba(242,182,96,.12);color:var(--cv-text);}
.cv-segment b{display:block;color:var(--cv-text);font-size:12px;margin-bottom:3px;}
.cv-segment span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.25;}
.cv-reader-player{display:grid;grid-template-columns:minmax(160px,1fr) auto minmax(220px,.8fr);align-items:center;gap:12px;padding:10px 12px;}
.cv-player-left{min-width:0;}
.cv-progress-label{font-size:12px;color:var(--cv-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cv-progress-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:7px;}
.cv-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cv-warm),var(--cv-cyan));transition:width .18s;}
.cv-player-controls{display:flex;align-items:center;justify-content:center;gap:8px;}
.cv-round{width:36px;height:36px;border-radius:999px;border:1px solid var(--cv-line);background:rgba(255,255,255,.07);color:var(--cv-text);font-weight:950;display:grid;place-items:center;cursor:pointer;}
.cv-round.play{width:48px;height:48px;border:0;background:linear-gradient(90deg,var(--cv-warm),#ffd89a);color:#17100e;font-size:18px;}
.cv-player-settings{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;}
.cv-select,.cv-range{height:32px;border:1px solid var(--cv-line);border-radius:999px;background:rgba(0,0,0,.20);color:var(--cv-text);font-size:12px;padding:0 9px;min-width:0;}
.cv-select{max-width:170px;}
.cv-range{width:86px;padding:0;}
.cv-page-strip{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;overflow:auto;padding:4px;z-index:4;}
.cv-page-chip{flex:0 0 auto;min-width:58px;height:32px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(3,4,10,.52);backdrop-filter:blur(12px);color:var(--cv-soft);font-size:12px;font-weight:900;cursor:pointer;}
.cv-page-chip.active{background:rgba(242,182,96,.18);border-color:rgba(242,182,96,.58);color:var(--cv-text);}

/* Admin laptop comfort layer. It does not change data model. */
body[data-cv-surface="admin-review"]{--side-w:clamp(252px,20vw,306px);}
body[data-cv-surface="admin-review"] .app{padding:8px clamp(6px,1vw,14px);gap:7px;}
body[data-cv-surface="admin-review"] .btn{min-height:32px;padding:0 10px;font-size:12px;}
body[data-cv-surface="admin-review"] .title{font-size:17px;}
body[data-cv-surface="admin-review"] .soft{font-size:11px;}
body[data-cv-surface="admin-review"] .card{padding:9px;border-radius:18px;}
.cv-admin-inspector-toggle{position:fixed;right:12px;top:54px;z-index:95;min-height:30px;border:1px solid var(--cv-line);border-radius:999px;background:rgba(4,5,10,.72);color:var(--cv-text);font-size:12px;font-weight:900;padding:0 10px;backdrop-filter:blur(14px);cursor:pointer;}
body.cv-inspector-collapsed[data-cv-surface="admin-review"] .main{grid-template-columns:minmax(0,1fr) 44px;}
body.cv-inspector-collapsed[data-cv-surface="admin-review"] .side,
body.cv-inspector-collapsed[data-cv-surface="admin-review"] [data-admin-zone="inspector"]{overflow:hidden;padding:6px;}
body.cv-inspector-collapsed[data-cv-surface="admin-review"] .side > *,
body.cv-inspector-collapsed[data-cv-surface="admin-review"] [data-admin-zone="inspector"] > *{display:none!important;}
body.cv-inspector-collapsed[data-cv-surface="admin-review"] .side:before,
body.cv-inspector-collapsed[data-cv-surface="admin-review"] [data-admin-zone="inspector"]:before{content:"Inspector";writing-mode:vertical-rl;display:grid;place-items:center;height:100%;color:var(--cv-soft);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}

@media(max-width:1366px){
  :root{--cv-control-h:34px;--cv-reader-bar:96px;}
  .cv-public-title{font-size:clamp(2.8rem,6.3vw,5.7rem);}
  .cv-public-hero{min-height:min(66svh,610px);grid-template-columns:minmax(0,1fr) minmax(230px,310px);}
  .cv-hero-cover img{height:320px;}
  .cv-reader-main{grid-template-columns:minmax(0,1fr) minmax(220px,270px);}
  .cv-reader-player{grid-template-columns:minmax(140px,1fr) auto minmax(180px,.7fr);}
  .cv-now-text{font-size:1.05rem;}
  body[data-cv-surface="admin-review"]{--side-w:clamp(238px,19vw,282px);}
  body[data-cv-surface="admin-review"] .facts{max-height:58px;}
}
@media(max-width:1080px){
  body[data-cv-surface="public-reader"]{overflow:auto;}
  .cv-public-hero{grid-template-columns:1fr;min-height:auto;padding-top:44px;}
  .cv-hero-cover{max-width:440px;}
  .cv-reader-shell{height:auto;min-height:100svh;grid-template-rows:auto auto auto;overflow:visible;}
  .cv-reader-main{grid-template-columns:1fr;}
  .cv-reader-page{width:min(100%,520px);}
  .cv-reader-player{grid-template-columns:1fr;position:sticky;bottom:8px;z-index:40;}
  .cv-player-settings{justify-content:flex-start;flex-wrap:wrap;}
  body[data-cv-surface="admin-review"] .main{grid-template-columns:1fr!important;}
  .cv-admin-inspector-toggle{display:none;}
}
@media(max-width:640px){
  .cv-public-topbar{padding:10px 14px;}.cv-public-nav .optional{display:none;}
  .cv-cover-card,.cv-cover-card.featured{flex-basis:74vw;height:340px;}
  .cv-reader-status{display:none;}.cv-page-strip{position:static;margin-top:8px;}
}