/* =====================================================================
   Series page ("Night Market"). Loaded only when $page == "single_novel",
   after ml-shell.css. Ported from the approved mockup kit
   (docs/ui-mockups/series-kit.css): every rule is scoped as
   `body .mls ...` so it wins over header.css's global element rules.
   Two themes, as in the mockups: dark (body.t-dd, the default) and
   light (body.t-d).
   ===================================================================== */

/* ===== theme tokens: the mockup's (docs/ui-mockups/night-shell.css) =====
   dark by default (body.t-dd), light with body.t-d */
.mls {
    --bg: #0a1015;
    --s1: #10191f;
    --s2: #16232b;
    --s3: #1e2f39;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .14);
    --tx: #e8eef0;
    --tx-2: #a9b8bf;
    --tx-3: #6f828c;
    --hi: #5ec4d6;
    --amber: #ffb547;
    --on-amber: #1d1302;
    --hot: #ff5d73;
    --r: 16px;
    --max: var(--ml-max, 1320px);
    --gut: var(--ml-gut, clamp(16px, 3vw, 32px));
    --tab-h: var(--ml-tab-h, 64px);
    --f-d: var(--ml-f-d, "Unbounded", system-ui, sans-serif);
    --f-b: var(--ml-f-b, "Onest", system-ui, sans-serif);
    color-scheme: dark;
}

body.t-d .mls {
    --bg: #f3f5f6;
    --s1: #ffffff;
    --s2: #eef2f4;
    --s3: #e2e9ec;
    --line: rgba(16, 30, 38, .09);
    --line-2: rgba(16, 30, 38, .16);
    --tx: #0e1a21;
    --tx-2: #3f525c;
    --tx-3: #73858e;
    --hi: #204051;
    --amber: #e8930c;
    --on-amber: #1d1302; /* dark text on amber in light theme too (white was 2.4:1) */
    color-scheme: light;
}

body.ml-series { background: #0a1015; }
body.ml-series.t-d { background: #f3f5f6; }

/* ===== base: undo header.css's global element rules inside the page ===== */
.mls {
    display: block;
    background: var(--bg);
    color: var(--tx);
    font: 400 15px/1.5 var(--f-b);
    overflow-x: clip;
    padding-bottom: 8px;
}
.mls *, .mls *::before, .mls *::after { box-sizing: border-box; }
.mls h1, .mls h2, .mls h3, .mls h4 { margin: 0; color: inherit; font-weight: inherit; line-height: inherit; }
.mls p { margin: 0; }
.mls a { color: inherit; text-decoration: none; transition: none; }
/* links keep their own colour on hover; header.css's old a:hover colours skip .mls (see header.css) */
.mls a:hover { text-decoration: none; }
body.t-dd .mls p, body.t-dd .mls li { color: inherit !important; }
.mls img { display: block; max-width: 100%; }
.mls ul, .mls ol, .mls dl { margin: 0; }
.mls button, .mls input, .mls select, .mls textarea { font: inherit; color: inherit; line-height: inherit; margin: 0; }
body.t-dd .mls input[type=text], body.t-dd .mls textarea { background-color: transparent; }
.mls :focus { outline: 0; }
.mls :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 8px; }
.mls .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.mls .ml-ico { width: 20px; height: 20px; }
body .mls .btn { line-height: 1.2; vertical-align: middle; text-align: center; user-select: none; }
body .mls .row { margin-left: 0; margin-right: 0; }
.mls .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== shared primitives (from the Night Market shell) ===== */
body .mls .cover{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--s2)}
body .mls .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
body .mls .cover img.is-broken{opacity:0}
body .mls .pop{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-6px);background:var(--s1);border:1px solid var(--line-2);border-radius:18px;padding:8px;box-shadow:0 24px 48px -16px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.2s;z-index:5}
body .mls .open>.pop{opacity:1;visibility:visible;transform:translate(-50%,0)}
body .mls .pop.list{min-width:200px;left:auto;right:0;transform:translateY(-6px)}
body .mls .open>.pop.list{transform:none}
body .mls .pop.list a{display:block;padding:9px 12px;border-radius:10px;color:var(--tx-2);height:auto}
body .mls .pop.list a:hover{background:var(--s2);color:var(--tx)}
body .mls .ibtn{width:40px;height:40px;border-radius:99px;border:1px solid var(--line-2);background:var(--s1);display:grid;place-items:center;cursor:pointer;color:var(--tx-2)}
body .mls .ibtn:hover{color:var(--tx)}
body .mls .ibtn svg{width:19px}
body .mls .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:99px;font-weight:700;font-size:14px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s,filter .2s,background .2s}
body .mls .btn:active{transform:scale(.97)}
body .mls .btn-amber{background:var(--amber);color:var(--on-amber)}
body .mls .btn-amber:hover{filter:brightness(1.08)}
body .mls .btn-ghost{border-color:var(--line-2);background:transparent;color:var(--tx)}
body .mls .btn-ghost:hover{background:var(--s2)}
body .mls .btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px)}
body .mls .btn-glass:hover{background:rgba(255,255,255,.18)}
body .mls .btn svg{width:18px}
@keyframes mls-pop{from{opacity:0;transform:translateY(-8px) scale(.98)}}
body .mls .h2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
body .mls .h2 h2{margin:0;font:700 clamp(19px,2.2vw,24px)/1.1 var(--f-d);letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
body .mls .h2 h2 .live{width:8px;height:8px;border-radius:9px;background:var(--hot);box-shadow:0 0 0 0 rgba(255,93,115,.6);animation:mls-pulse 2s infinite}
body .mls .more{font-weight:600;color:var(--hi);display:inline-flex;align-items:center;gap:4px;font-size:14px;white-space:nowrap}
body .mls .more svg{width:16px}
body .mls .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
body .mls .tab{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--tx-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
body .mls .tab[aria-selected="true"]{color:var(--tx);border-color:var(--amber)}
body .mls .tile{position:relative;min-width:0}
body .mls .tile .cover{box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
body .mls .tile .cover::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(5,10,14,.85))}
body .mls .badge{position:absolute;left:8px;bottom:8px;z-index:1;display:inline-flex;align-items:center;gap:4px;font:800 12px/1 var(--f-d);color:var(--on-amber);background:var(--amber);padding:6px 8px;border-radius:8px}
body .mls .badge svg{width:12px;height:12px}
body .mls .prem{position:absolute;right:8px;top:8px;z-index:1;width:26px;height:26px;border-radius:99px;background:rgba(0,0,0,.6);display:grid;place-items:center;color:var(--amber)}
body .mls .prem svg{width:13px}
body .mls .tile h3{margin:10px 0 3px;font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .mls .tile h3 a::after{content:"";position:absolute;inset:0}
body .mls .tile .m{display:flex;gap:6px;font-size:12px;color:var(--tx-3);white-space:nowrap;overflow:hidden}
body .mls .tile .m a{position:relative;z-index:1;color:var(--hi);overflow:hidden;text-overflow:ellipsis}
body .mls .tile .m a:hover{text-decoration:underline}
body .mls .panel{background:var(--s1);border:1px solid var(--line);border-radius:20px;padding:18px}
body .mls .panel .h2{margin-bottom:10px}
body .mls .panel .h2 h2{font-size:17px}
body .mls .cloud{display:flex;flex-wrap:wrap;gap:6px}
body .mls .cloud a{padding:7px 12px;border-radius:99px;background:var(--s2);font-size:13px;font-weight:500;color:var(--tx-2);border:1px solid transparent}
body .mls .cloud a:hover{border-color:var(--hi);color:var(--tx)}
body .mls .ad{border:1px dashed var(--line-2);border-radius:16px;display:grid;place-items:center;color:var(--tx-3);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;background:repeating-linear-gradient(45deg,transparent 0 12px,var(--s1) 12px 24px)}
/* ===== shell responsive ===== */
@keyframes mls-pulse{70%{box-shadow:0 0 0 8px rgba(255,93,115,0)}100%{box-shadow:0 0 0 0 rgba(255,93,115,0)}}

/* ===== series kit (docs/ui-mockups/series-kit.css) ===== */
/* Series-page kit: hero + tracking card, chapter table, about/edit, reviews, related/recs/lists,
   sidebar stats, modals and the shared header for the series sub-pages. Used with night-shell.css. */
body .mls [hidden]{display:none!important}
body .mls textarea{font:inherit;color:inherit}
/* ===== hero (tracking card) ===== */
body .mls .s-hero{position:relative;isolation:isolate;border-bottom:1px solid var(--line);overflow-x:clip}
body .mls .s-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-bg) center 25%/cover;filter:blur(70px) saturate(1.4);opacity:.18;transform:scale(1.2)}
body .mls .s-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 40%,var(--bg))}
body .mls .crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--tx-3);padding-top:20px;flex-wrap:wrap}
body .mls .crumbs a:hover{color:var(--tx)}
body .mls .crumbs [aria-current]{color:var(--tx-2)}
body .mls .top{display:grid;grid-template-columns:160px minmax(0,1fr) 360px;gap:clamp(20px,3vw,36px);align-items:center;padding:20px 0 28px}
body .mls .top .cover{border-radius:14px;box-shadow:0 24px 48px -24px rgba(0,0,0,.8)}
body .mls .meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
body .mls .meta span,body .mls .meta a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:var(--s2);font-size:12.5px;font-weight:600;color:var(--tx-2)}
body .mls .meta a:hover{color:var(--tx)}
body .mls .meta .on{background:color-mix(in srgb,#3ddc97 16%,transparent);color:#2fbf80}
body .mls .meta .on::before{content:"";width:6px;height:6px;border-radius:9px;background:currentColor}
body .mls .top h1{margin:0 0 10px;font:800 clamp(28px,4vw,50px)/1.02 var(--f-d);letter-spacing:-.035em;text-wrap:balance}
body .mls .top .by{margin:-2px 0 14px;font-size:14px;color:var(--tx-3)}
body .mls .top .by a{color:var(--hi);font-weight:600}
body .mls .line{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;color:var(--tx-3);font-size:14px}
body .mls .line .st{display:inline-flex;align-items:center;gap:5px}
body .mls .line .sv{display:inline-flex;align-items:center;gap:8px}
body .mls .line b{color:var(--tx);font-weight:700}
body .mls .line small{font-size:inherit}
body .mls .line .rate small::before{content:"("}
body .mls .line .rate small::after{content:")"}
body .mls .line .stars{display:inline-flex;gap:1px;color:var(--amber)}
body .mls .line .stars svg{width:15px;height:15px}
body .mls .hero-genres{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
body .mls .hero-genres a{padding:5px 11px;border-radius:99px;border:1px solid var(--line-2);font-size:12.5px;font-weight:600;color:var(--tx-2)}
body .mls .hero-genres a:hover{border-color:var(--hi);color:var(--tx)}
body .mls .track{position:relative;padding:20px;border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--hi) 16%,var(--s1)),var(--s1) 60%);border:1px solid var(--line-2)}
body .mls .track h3{margin:0 0 4px;font:700 17px/1.2 var(--f-d)}
body .mls .track p{margin:0 0 16px;color:var(--tx-2)!important;font-size:14px}
body .mls .track .btn{width:100%;height:46px}
body .mls .track .row{display:flex;gap:8px;margin-top:8px}
body .mls .track .row>*{flex:1;min-width:0}
body .mls .track .row .btn{height:40px}
body .mls .track .pop.list{left:0;right:auto;top:calc(100% + 8px)}
body .mls .prog{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-bottom:16px}
body .mls .ring{--p:0;width:78px;height:78px;border-radius:50%;background:conic-gradient(var(--amber) calc(var(--p)*1%),var(--s3) 0);display:grid;place-items:center}
body .mls .ring>div{width:62px;height:62px;border-radius:50%;background:var(--s1);display:grid;place-items:center;text-align:center;line-height:1}
body .mls .ring b{font:800 19px/1 var(--f-d)}
body .mls .ring small{display:block;font-size:10px;color:var(--tx-3);margin-top:3px}
body .mls .prog strong{display:block;font:700 15px/1.3 var(--f-b)}
body .mls .prog span{font-size:13px;color:var(--tx-3)}
body .mls .prog em{font-style:normal;color:var(--hot);font-weight:700}
/* ===== section bar + layout ===== */
body .mls .secbar{position:sticky;top:64px;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body .mls .secbar .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
body .mls .secbar .wrap::-webkit-scrollbar{display:none}
body .mls .secbar a,body .mls .secbar button{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:16px 14px 14px;font-weight:600;color:var(--tx-3);border:0;border-bottom:2px solid transparent;background:none;cursor:pointer}
body .mls .secbar a:hover,body .mls .secbar button:hover{color:var(--tx)}
body .mls .secbar [aria-current="true"],body .mls .secbar [aria-selected="true"]{color:var(--tx);border-color:var(--amber)}
body .mls .secbar sup{font:700 11px/1 var(--f-b);padding:3px 6px;border-radius:99px;background:var(--s3);color:var(--tx-2)}
body .mls .s-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,44px);margin-top:32px;align-items:start}
body .mls .s-main>section{scroll-margin-top:130px;margin-bottom:48px}
body .mls .side{display:flex;flex-direction:column;gap:20px}
body .mls .h2 .acts{display:flex;gap:14px;align-items:center}
body .mls .editlink{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--tx-3);border:0;background:none;padding:0;cursor:pointer}
body .mls .editlink:hover{color:var(--hi)}
body .mls .editlink svg{width:15px;height:15px}
body .mls .sub{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 12px/1 var(--f-b);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin:28px 0 12px}
body .mls .sub .editlink{letter-spacing:0;text-transform:none;font-size:12.5px}
body .mls .empty{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;border:1px dashed var(--line-2);color:var(--tx-2);font-size:14.5px;flex-wrap:wrap}
body .mls .empty .ico{width:42px;height:42px;border-radius:12px;background:var(--s2);display:grid;place-items:center;color:var(--hi);flex-shrink:0}
body .mls .empty .ico svg{width:20px}
body .mls .empty p{margin:0;flex:1;min-width:200px}
body .mls .empty p b{display:block;color:var(--tx);font-weight:600;margin-bottom:2px}
body .mls .empty .btn{height:38px}
/* ===== chapters ===== */
body .mls .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
body .mls .goto{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--s1);color:var(--tx-3);flex:1;min-width:170px;max-width:250px}
body .mls .goto:focus-within{border-color:var(--hi)}
body .mls .goto svg{width:17px;flex-shrink:0}
body .mls .goto input{border:0;background:none;outline:0;min-width:0;width:100%;height:100%;color:var(--tx)}
body .mls .goto kbd{font:600 11px/1 var(--f-b);border:1px solid var(--line-2);border-radius:6px;padding:4px 6px;color:var(--tx-3)}
body .mls .select{height:40px;border-radius:99px;border:1px solid var(--line-2);background:var(--s1);padding:0 14px;font-size:13.5px;font-weight:600;color:var(--tx-2);max-width:100%}
body .mls .toolbar .sp{flex:1}
body .mls .toolbar .btn{height:40px;padding:0 14px}
body .mls .tb-more{position:relative}
body .mls .tb-more .pop.list{min-width:230px}
body .mls .pop.list button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border-radius:10px;border:0;background:none;color:var(--tx-2);text-align:left;cursor:pointer;font-size:14px}
body .mls .pop.list button:hover:not(:disabled){background:var(--s2);color:var(--tx)}
body .mls .pop.list button:disabled{opacity:.5;cursor:not-allowed}
body .mls .pop.list button svg{width:16px}
body .mls .pop.list .sep{height:1px;background:var(--line);margin:4px 6px}
body .mls .chlist{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--s1)}
body .mls .chhead,body .mls .chrow{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.2fr) 110px;gap:12px;align-items:center;padding:0 16px}
body .mls .chhead{height:40px;font:700 11.5px/1 var(--f-b);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);border-bottom:1px solid var(--line);background:var(--s2)}
body .mls .chhead button{border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
body .mls .chhead button:hover{color:var(--tx)}
body .mls .chhead button svg{width:13px;height:13px}
body .mls .chrow{min-height:54px;border-top:1px solid var(--line);position:relative;transition:background .3s}
body .mls .chhead+.chrow{border-top:0}
body .mls .chrow:hover{background:var(--s2)}
body .mls .chrow.unread::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--amber)}
body .mls .chrow.flash{background:color-mix(in srgb,var(--amber) 18%,transparent)}
body .mls .chrow .ch{font:700 15px/1 var(--f-d);white-space:nowrap}
body .mls .chrow .ch a:hover{color:var(--hi)}
body .mls .chrow.read .ch{color:var(--tx-3);font-weight:500}
body .mls .chrow .g{color:var(--hi);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .mls .chrow time{display:flex;flex-direction:column;align-items:flex-end;gap:3px;line-height:1.1;white-space:nowrap}
body .mls .chrow time b{font-weight:600;font-size:13.5px;color:var(--tx-2)}
body .mls .chrow time small{font-size:11.5px;color:var(--tx-3);font-weight:500}
body .mls .chrow time.same b{color:var(--tx-3);font-weight:500}
body .mls .tick{width:22px;height:22px;border-radius:99px;border:1.5px solid var(--line-2);background:none;padding:0;display:grid;place-items:center;color:transparent;cursor:pointer}
body .mls .tick svg{width:13px}
body .mls .tick:hover{border-color:var(--hi)}
body .mls .read .tick{background:var(--s3);border-color:var(--s3);color:var(--tx-2)}
body .mls .lbl{font:700 10px/1 var(--f-b);letter-spacing:.08em;padding:3px 5px;border-radius:5px;margin-left:8px;vertical-align:2px}
body .mls .lbl.new{color:var(--on-amber);background:var(--amber)}
body .mls .lbl.part{color:var(--tx-2);background:var(--s3)}
body .mls .lbl.bm{color:var(--hi);background:color-mix(in srgb,var(--hi) 16%,transparent)}
body .mls .ch-empty{padding:28px;text-align:center;color:var(--tx-3)}
body .mls .pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:13px;color:var(--tx-3);flex-wrap:wrap}
body .mls .pages{display:flex;gap:6px;align-items:center}
body .mls .pages button{min-width:36px;height:36px;padding:0 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--s1);color:var(--tx-2);font-weight:600;cursor:pointer;display:grid;place-items:center}
body .mls .pages button svg{width:16px}
body .mls .pages button[aria-current="true"]{background:var(--tx);border-color:var(--tx);color:var(--bg)}
body .mls .pages button:disabled{opacity:.4;cursor:default}
body .mls .pages span{padding:0 4px}
/* ===== about ===== */
body .mls .syn{font-size:16.5px;line-height:1.7;color:var(--tx-2);max-width:70ch;margin:0}
body .mls .syn.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
body .mls .linkbtn{border:0;background:none;padding:0;color:var(--hi);font-weight:600;cursor:pointer;margin-top:8px;display:inline-flex;align-items:center;gap:4px}
body .mls .linkbtn svg{width:16px}
body .mls .alt{display:flex;flex-wrap:wrap;gap:6px}
body .mls .alt span{padding:6px 10px;border-radius:10px;background:var(--s1);border:1px solid var(--line);font-size:13.5px;color:var(--tx-2)}
body .mls .cloud a.tag{background:transparent;border-color:var(--line-2)}
/* inline editor */
body .mls .editor{margin-top:10px;padding:16px;border-radius:16px;background:var(--s1);border:1px solid var(--hi);box-shadow:0 0 0 4px color-mix(in srgb,var(--hi) 14%,transparent)}
body .mls .editor textarea,body .mls .editor input[type=text],body .mls .field input[type=text],body .mls .field textarea,body .mls .field select{width:100%;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);padding:10px 12px;font-size:14.5px;line-height:1.55;outline:0;resize:vertical}
body .mls .editor textarea:focus,body .mls .editor input:focus,body .mls .field input:focus,body .mls .field textarea:focus,body .mls .field select:focus{border-color:var(--hi)}
body .mls .editor .hint,body .mls .field .hint{display:block;font-size:12.5px;color:var(--tx-3);margin:8px 0 0}
body .mls .editor .hint a,body .mls .field .hint a{color:var(--hi);font-weight:600}
body .mls .editor .bar{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:12px;flex-wrap:wrap}
body .mls .editor .bar .note{margin-right:auto;font-size:12.5px;color:var(--tx-3)}
body .mls .editor .bar .btn{height:36px}
body .mls .checks{display:flex;flex-wrap:wrap;gap:6px}
body .mls .checks label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--tx-2);cursor:pointer;user-select:none}
body .mls .checks input{position:absolute;opacity:0;pointer-events:none}
body .mls .checks label:has(input:checked){background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
body .mls .checks label:has(input:focus-visible){outline:2px solid var(--amber);outline-offset:2px}
body .mls .tagedit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg)}
body .mls .tagedit span{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 10px;border-radius:99px;background:var(--s3);font-size:13px;font-weight:600}
body .mls .tagedit span button{border:0;background:none;padding:0 2px;color:var(--tx-3);cursor:pointer;display:grid}
body .mls .tagedit span button svg{width:14px}
body .mls .tagedit input{border:0;background:none;outline:0;flex:1;min-width:120px;height:30px}
/* ===== sidebar ===== */
body .mls .facts a{color:var(--hi)}
body .mls .yes{color:#2fbf80}
body .mls .panel-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
body .mls .panel-foot a{color:var(--hi);font-weight:600;display:inline-flex;align-items:center;gap:5px}
body .mls .panel-foot a svg{width:15px}
body .mls .ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
body .mls .ranks div{padding:12px 10px;border-radius:14px;background:var(--s2);min-width:0}
body .mls .ranks b{font:800 20px/1 var(--f-d);letter-spacing:-.02em}
body .mls .ranks small{display:block;color:var(--tx-3);font-size:11.5px;margin-top:6px}
body .mls .ranks.two{grid-template-columns:1fr 1fr}
body .mls .spark{display:flex;align-items:flex-end;gap:3px;height:56px;margin:14px 0 6px}
body .mls .spark i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--hi) 55%,transparent);min-height:2px}
body .mls .spark-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx-3)}
body .mls .side-links{display:flex;gap:16px;flex-wrap:wrap;padding:0 4px}
body .mls .side-links button,body .mls .side-links a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--tx-3);border:0;background:none;padding:0;cursor:pointer}
body .mls .side-links button:hover,body .mls .side-links a:hover{color:var(--tx)}
body .mls .side-links svg{width:15px}
/* ===== reviews ===== */
body .mls .rv{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
body .mls .score{padding:20px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
body .mls .score>b{display:block;font:800 52px/1 var(--f-d);letter-spacing:-.04em}
body .mls .stars{display:inline-flex;gap:2px;color:var(--amber)}
body .mls .stars svg{width:16px;height:16px}
body .mls .score .stars{display:flex;margin:8px 0 4px}
body .mls .score .stars svg{width:18px;height:18px}
body .mls .score>small{color:var(--tx-3);font-size:13px}
body .mls .bars{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
body .mls .bars li{display:grid;grid-template-columns:22px 1fr 18px;gap:8px;align-items:center;font-size:12px;color:var(--tx-3)!important}
body .mls .bars i{height:6px;border-radius:9px;background:var(--s3);overflow:hidden;display:block}
body .mls .bars i::after{content:"";display:block;height:100%;width:var(--w);background:var(--amber);border-radius:9px}
body .mls .subs{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:6px;font-size:13px}
body .mls .subs div{display:flex;justify-content:space-between;color:var(--tx-3)}
body .mls .subs b{color:var(--tx);font-weight:700}
body .mls .score .btn{width:100%;margin-top:16px}
body .mls .rv-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
body .mls .rv-tools .select{height:36px;font-size:13px}
body .mls .rlist{display:grid;gap:12px;align-content:start}
body .mls .rcard{padding:16px 18px;border-radius:18px;background:var(--s1);border:1px solid var(--line)}
body .mls .rcard.example{border-style:dashed}
body .mls .rcard header{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
body .mls .rcard .av{width:34px;height:34px;border-radius:99px;background:linear-gradient(135deg,#204051,#5ec4d6);display:grid;place-items:center;font:800 13px var(--f-d);color:#fff;flex-shrink:0}
body .mls .rcard header b{font-weight:600}
body .mls .rcard header small{color:var(--tx-3);font-size:12.5px}
body .mls .rcard header .r{margin-left:auto;display:flex;align-items:center;gap:8px}
body .mls .rcard header .stars svg{width:14px;height:14px}
body .mls .rcard h4{margin:4px 0 8px;font:700 16px/1.3 var(--f-b)}
body .mls .rcard p{margin:0;color:var(--tx-3)!important;font-size:14px}
body .mls .rmeta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
body .mls .rmeta span{font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:7px;background:var(--s2);color:var(--tx-2)}
body .mls .rmeta .spoil{background:color-mix(in srgb,var(--hot) 16%,transparent);color:var(--hot)}
body .mls .rbody{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:16px;align-items:start}
body .mls .rsubs{border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12.5px}
body .mls .rsubs div{display:flex;justify-content:space-between;padding:6px 10px;color:var(--tx-3)}
body .mls .rsubs div:nth-child(even){background:var(--s2)}
body .mls .rsubs div:first-child{font-weight:700;color:var(--tx)}
body .mls .skel{display:grid;gap:7px}
body .mls .skel i{height:9px;border-radius:9px;background:var(--s3);display:block}
body .mls .skel i:nth-child(2){width:92%}
body .mls .skel i:nth-child(3){width:78%}
body .mls .skel i:nth-child(4){width:55%}
body .mls .tagnote{font:700 10.5px/1 var(--f-b);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);border:1px solid var(--line-2);border-radius:6px;padding:4px 6px}
body .mls .helpful{display:flex;gap:6px;align-items:center;margin-top:12px;font-size:12.5px;color:var(--tx-3);flex-wrap:wrap}
body .mls .helpful button{height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--line-2);background:none;font-size:12.5px;font-weight:600;color:var(--tx-2);cursor:pointer}
body .mls .helpful button[aria-pressed="true"]{background:var(--hi);border-color:var(--hi);color:#06222a}
body .mls .helpful .rep{margin-left:auto;border:0;color:var(--tx-3)}
/* ===== related / recommendations / lists ===== */
body .mls .rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
body .mls .relcard{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:16px;border:1px solid var(--line);background:var(--s1)}
body .mls .relcard .cover{border-radius:8px}
body .mls .relcard b{display:block;font-weight:600;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .mls .relcard small{font-size:12px;color:var(--hi);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
body .mls .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
body .mls .rail::-webkit-scrollbar{display:none}
body .mls .rail .tile{scroll-snap-align:start}
body .mls .info-tip{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:99px;border:1px solid var(--line-2);color:var(--tx-3);font:700 11px/1 var(--f-b);cursor:help;margin-left:6px;vertical-align:3px}
body .mls .info-tip:hover::after,body .mls .info-tip:focus::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:240px;padding:10px 12px;border-radius:12px;background:var(--s3);color:var(--tx);font:500 12.5px/1.45 var(--f-b);letter-spacing:0;text-transform:none;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);z-index:5}
/* ===== modals ===== */
body .mls .mdl{position:fixed;inset:0;z-index:90;display:none;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;background:rgba(3,7,10,.6);backdrop-filter:blur(4px);overflow-y:auto}
body .mls .mdl.show{display:flex}
body .mls .mdl-box{width:100%;max-width:560px;background:var(--s1);border:1px solid var(--line-2);border-radius:22px;box-shadow:0 40px 80px -20px rgba(0,0,0,.7);animation:mls-pop .2s cubic-bezier(.2,.8,.2,1)}
body .mls .mdl-box.wide{max-width:720px}
body .mls .mdl-h{display:flex;align-items:center;gap:12px;padding:16px 18px 14px;border-bottom:1px solid var(--line)}
body .mls .mdl-h h3{margin:0;font:700 18px/1.2 var(--f-d);flex:1}
body .mls .mdl-h small{display:block;font:500 13px var(--f-b);color:var(--tx-3);margin-top:3px}
body .mls .mdl-h .ibtn{width:36px;height:36px}
body .mls .mdl-b{padding:18px}
body .mls .mdl-f{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
body .mls .mdl-f .note{margin-right:auto;font-size:12.5px;color:var(--tx-3)}
body .mls .steps{display:flex;gap:6px;margin-bottom:18px}
body .mls .steps i{flex:1;height:4px;border-radius:9px;background:var(--s3)}
body .mls .steps i.on{background:var(--amber)}
body .mls .step{display:none}
body .mls .step.on{display:block}
body .mls .step h4{margin:0 0 4px;font:700 15px var(--f-b)}
body .mls .step>p{margin:0 0 16px;color:var(--tx-3)!important;font-size:13.5px}
body .mls .bigstars{display:flex;gap:8px;justify-content:center;padding:10px 0}
body .mls .bigstars button,body .mls .ministars button{border:0;background:none;padding:2px;color:var(--tx-3);cursor:pointer;display:grid}
body .mls .bigstars svg{width:40px;height:40px}
body .mls .bigstars button.on,body .mls .ministars button.on{color:var(--amber)}
body .mls .bigstars button.on svg path,body .mls .ministars button.on svg path{fill:currentColor}
body .mls .starlabel{text-align:center;font-weight:600;color:var(--tx-2);min-height:22px}
body .mls .subrate{display:grid;gap:10px}
body .mls .subrate>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--s2)}
body .mls .ministars{display:flex;gap:2px}
body .mls .ministars svg{width:24px;height:24px}
body .mls .field{display:grid;gap:6px;margin-bottom:14px}
body .mls .field>label,body .mls .field>span.l{font-weight:600;font-size:14px}
body .mls .radios{display:flex;gap:8px;flex-wrap:wrap}
body .mls .radios label{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;border:1px solid var(--line-2);cursor:pointer;font-size:14px;font-weight:600;color:var(--tx-2)}
body .mls .radios input{accent-color:var(--amber)}
body .mls .radios label:has(input:checked){border-color:var(--amber);color:var(--tx)}
body .mls .field .count{justify-self:end;font-size:12px;color:var(--tx-3)}
body .mls .chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;max-height:46vh;overflow:auto;padding:2px}
body .mls .chgrid button{height:38px;border-radius:10px;border:1px solid var(--line);background:var(--s2);font:700 13px var(--f-d);color:var(--tx-2);cursor:pointer}
body .mls .chgrid button.read{background:var(--s3);color:var(--tx-3);font-weight:500}
body .mls .chgrid button.cur{border-color:var(--amber);color:var(--tx)}
body .mls .chgrid button:hover{border-color:var(--hi)}
body .mls .rangetabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
body .mls .rangetabs button{height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);background:none;font-size:13px;font-weight:600;color:var(--tx-2);cursor:pointer}
body .mls .rangetabs button[aria-pressed="true"]{background:var(--tx);color:var(--bg);border-color:var(--tx)}
body .mls .rangetabs button:disabled{opacity:.4;cursor:not-allowed}
body .mls .listpick{display:grid;gap:8px}
body .mls .listpick label{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line-2);cursor:pointer}
body .mls .listpick label:has(input:checked){border-color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent)}
body .mls .listpick input{accent-color:var(--amber)}
body .mls .listpick small{display:block;color:var(--tx-3);font-size:12.5px}
/* toast */
body .mls .toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,20px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--tx);color:var(--bg);font-weight:600;font-size:14px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);transition:.25s;max-width:calc(100vw - 32px)}
body .mls .toast.show{opacity:1;transform:translate(-50%,0)}
body .mls .toast svg{width:18px;flex-shrink:0;color:#2fbf80}
/* ===== sub-page header ===== */
body .mls .subhead{border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--hi) 7%,transparent),transparent)}
body .mls .subhead .wrap{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding-top:22px;padding-bottom:22px}
body .mls .subhead .cover{border-radius:10px}
body .mls .subhead .crumbs{padding:0;margin-bottom:6px}
body .mls .subhead h1{margin:0;font:800 clamp(22px,3vw,34px)/1.1 var(--f-d);letter-spacing:-.03em}
body .mls .subhead p{margin:4px 0 0;color:var(--tx-3)!important;font-size:14px}
body .mls .subhead .btn{height:40px}
body .mls .page{margin-top:28px}
body .mls .two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(20px,3vw,36px);align-items:start}
/* ===== responsive ===== */
@media (max-width:1180px){
body .mls .top{grid-template-columns:130px minmax(0,1fr) 320px}
}
@media (max-width:1023px){
body .mls .top{grid-template-columns:130px minmax(0,1fr)}
body .mls .track{grid-column:1 / -1}
body .mls .s-layout,body .mls .two{grid-template-columns:minmax(0,1fr)}
body .mls .side{display:grid;grid-template-columns:1fr 1fr;align-items:start}
body .mls .side .ad{display:none}
}
@media (max-width:767px){
body .mls .crumbs{font-size:12px;padding-top:14px}
/* phones: cover beside the title block, then stats, genres and tracking at full width */
body .mls .top{grid-template-columns:100px minmax(0,1fr);grid-template-areas:"cover head" "line line" "genres genres" "track track";gap:0 16px;padding:16px 0 22px;align-items:start}
body .mls .ttl{display:contents}
body .mls .top .cover{grid-area:cover;border-radius:12px}
body .mls .ttl-head{grid-area:head;align-self:center;min-width:0}
body .mls .meta{margin-bottom:10px;gap:5px}
body .mls .meta span,body .mls .meta a{font-size:11.5px;padding:4px 8px}
body .mls .top h1{font-size:clamp(22px,7vw,30px);line-height:1.1;margin-bottom:6px}
body .mls .top .by{margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .mls .line{grid-area:line;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:18px;padding:12px 0;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--s1) 70%,transparent)}
body .mls .line .st{flex-direction:column;justify-content:center;gap:5px;padding:0 6px;min-width:0;text-align:center}
body .mls .line .st+.st{border-left:1px solid var(--line)}
body .mls .line .sv{gap:5px}
body .mls .line .st b{font:700 17px/1 var(--f-d);letter-spacing:-.02em}
body .mls .line .st small{font-size:10.5px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3)}
body .mls .line .rate small::before,body .mls .line .rate small::after{content:none}
body .mls .line .stars svg{width:14px;height:14px}
body .mls .line .stars svg+svg{display:none}
body .mls .hero-genres{grid-area:genres;margin-top:14px}
body .mls .track{grid-area:track;margin-top:20px}
body .mls .secbar{top:56px}
body .mls .secbar a,body .mls .secbar button{padding:14px 10px 12px;font-size:14px}
body .mls .s-layout{margin-top:22px}
body .mls .s-main>section{scroll-margin-top:110px;margin-bottom:40px}
body .mls .goto{max-width:none;flex:1 1 100%}
body .mls .toolbar .select{flex:1}
body .mls .toolbar .btn .t{display:none}
body .mls .chhead{display:none}
body .mls .chrow{grid-template-columns:34px minmax(0,1fr) auto;padding:10px 12px;row-gap:2px}
body .mls .chrow .ch{grid-column:2}
body .mls .chrow .g{grid-column:2;grid-row:2;font-size:13px}
body .mls .chrow time{grid-column:3;grid-row:1 / span 2;font-size:12px}
body .mls .chrow .tick{grid-row:1 / span 2}
body .mls .chrow time .hm{display:block}
body .mls .pager{justify-content:center}
body .mls .pager>span{width:100%;text-align:center}
body .mls .side{grid-template-columns:1fr}
body .mls .rv{grid-template-columns:1fr}
body .mls .rbody{grid-template-columns:1fr}
body .mls .rail{grid-auto-columns:40%;margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 4px;scroll-padding:0 var(--gut)}
body .mls .mdl{padding:0;align-items:flex-end}
body .mls .mdl-box{border-radius:22px 22px 0 0;max-height:92vh;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
body .mls .bigstars svg{width:34px;height:34px}
body .mls .subhead .wrap{grid-template-columns:52px minmax(0,1fr);gap:12px;padding-top:16px;padding-bottom:16px}
body .mls .subhead .wrap>.btn{grid-column:1 / -1}
body .mls .toast{bottom:calc(var(--tab-h) + 16px)}
}
/* ===== sub-pages: shared pieces ===== */
body .mls .gate{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--amber) 10%,var(--s1));border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);margin-bottom:20px;flex-wrap:wrap}
body .mls .gate svg{width:20px;color:var(--amber);flex-shrink:0}
body .mls .gate p{margin:0;flex:1;min-width:200px;font-size:14px;color:var(--tx-2)!important}
body .mls .gate p b{color:var(--tx)}
body .mls .gate .btn{height:36px}
body .mls .seg{display:inline-flex;padding:3px;border-radius:99px;background:var(--s2);border:1px solid var(--line);flex-wrap:wrap}
body .mls .seg button{border:0;background:none;height:32px;padding:0 13px;border-radius:99px;font-size:13px;font-weight:600;color:var(--tx-2);cursor:pointer}
body .mls .seg button[aria-pressed="true"]{background:var(--tx);color:var(--bg)}
body .mls .tbl{width:100%;border-collapse:collapse;font-size:14px}
body .mls .tbl th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);font-weight:700;padding:0 12px 10px;border-bottom:1px solid var(--line)}
body .mls .tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
body .mls .tbl tr:last-child td{border-bottom:0}
body .mls .tbl .who{display:inline-flex;align-items:center;gap:8px;font-weight:600}
body .mls .tbl .who i{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;font:700 11px/1 var(--f-d);font-style:normal;background:linear-gradient(135deg,#204051,#5ec4d6);color:#fff}
body .mls .add,body .mls .rem{display:block;padding:3px 8px;border-radius:8px;margin:2px 0;font-size:13.5px;word-break:break-word}
body .mls .add{background:color-mix(in srgb,#2fbf80 14%,transparent);color:var(--tx)}
body .mls .rem{background:color-mix(in srgb,var(--hot) 13%,transparent);color:var(--tx-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--hot) 70%,transparent)}
body .mls .add::before{content:"+ ";color:#2fbf80;font-weight:700}
body .mls .rem::before{content:"− ";color:var(--hot);font-weight:700;display:inline-block;text-decoration:none}
body .mls .nil{color:var(--tx-3)}
body .mls .pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
body .mls .pick label{position:relative;cursor:pointer;display:grid;gap:8px;font-size:13.5px;font-weight:600;line-height:1.3}
body .mls .pick input{position:absolute;opacity:0;pointer-events:none}
body .mls .pick .cover{outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
body .mls .pick label:has(input:checked) .cover{outline-color:var(--amber)}
body .mls .pick label:has(input:focus-visible) .cover{outline-color:var(--hi)}
body .mls .pick label:has(input:checked)::after{content:"";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:99px;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1302' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat}
body .mls .pick label.done{opacity:.45;cursor:not-allowed}
body .mls .pick label small{display:block;font-weight:500;color:var(--tx-3);font-size:12px}
body .mls .sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--s1);border:1px solid var(--line-2);border-radius:14px;padding:6px;box-shadow:0 24px 48px -16px rgba(0,0,0,.55);max-height:300px;overflow:auto}
body .mls .sugg button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:6px 8px;border-radius:10px;text-align:left;font-size:14px;font-weight:600;color:var(--tx);cursor:pointer}
body .mls .sugg button:hover,body .mls .sugg button.on{background:var(--s2)}
body .mls .sugg img{width:30px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0}
body .mls .sugg small{display:block;font-weight:500;color:var(--tx-3);font-size:12px}
body .mls .sugg .none{padding:10px;color:var(--tx-3);font-size:13.5px}
body .mls .gloss{margin:0;display:grid;gap:10px;font-size:13.5px}
body .mls .gloss dt{font-weight:700}
body .mls .gloss dd{margin:2px 0 0;color:var(--tx-3)}
body .mls .sticky-side{position:sticky;top:84px}
@media (max-width:1023px){
body .mls .sticky-side{position:static}
}
@media (max-width:767px){
body .mls .tbl thead{display:none}
body .mls .tbl,body .mls .tbl tbody,body .mls .tbl tr,body .mls .tbl td{display:block;width:100%}
body .mls .tbl tr{padding:12px 0;border-bottom:1px solid var(--line)}
body .mls .tbl tr:last-child{border-bottom:0}
body .mls .tbl td{border:0;padding:3px 0}
body .mls .tbl td[data-l]::before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);font-weight:700;margin:6px 0 2px}
body .mls .pick{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media (max-width:767px){
body .mls .s-main .h2{flex-wrap:wrap;row-gap:6px}
}
/* ===== A: full-width area below the sidebar ===== */
body .mls .s-full{margin-top:8px}
body .mls .s-full>section,body .mls .s-full>.trio{margin-bottom:56px}
body .mls .s-full section{scroll-margin-top:130px}
body .mls .wide-reviews .rv{grid-template-columns:300px minmax(0,1fr);gap:28px}
body .mls .wide-reviews .rlist{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));align-items:start}
body .mls .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
body .mls .trio>section{min-width:0;display:flex;flex-direction:column;padding:20px;border-radius:20px;background:var(--s1);border:1px solid var(--line)}
body .mls .trio .h2{margin-bottom:14px}
body .mls .trio .h2 h2{font-size:17px;min-width:0}
body .mls .trio .empty{flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:0;border:0}
body .mls .trio .empty p{min-width:0;flex:0}
body .mls .trio .empty .btn{margin-top:auto}
body .mls .trio .rel-grid{grid-template-columns:1fr}
body .mls .trio .rail{grid-auto-columns:minmax(120px,1fr)}
@media (max-width:1240px){
body .mls .trio{grid-template-columns:1fr 1fr}
body .mls .trio>section:last-child{grid-column:1 / -1}
}
@media (max-width:1023px){
body .mls .wide-reviews .rv{grid-template-columns:240px minmax(0,1fr)}
}
@media (max-width:767px){
body .mls .s-full>section,body .mls .s-full>.trio{margin-bottom:40px}
body .mls .s-full section{scroll-margin-top:110px}
body .mls .wide-reviews .rv{grid-template-columns:1fr}
body .mls .wide-reviews .rlist{grid-template-columns:1fr}
body .mls .trio{grid-template-columns:1fr;gap:14px}
body .mls .trio>section{padding:16px}
body .mls .trio .h2 h2{white-space:normal}
body .mls .trio .empty{flex-direction:row;align-items:center;flex-wrap:wrap}
body .mls .trio .empty p{flex:1;min-width:180px}
body .mls .trio .empty .btn{margin-top:0}
}
/* ===== breadcrumbs with home icon; long titles ===== */
body .mls .crumbs{flex-wrap:nowrap;min-width:0}
body .mls .crumbs .home{display:grid;place-items:center;width:28px;height:28px;margin-left:-6px;border-radius:8px;color:var(--tx-3)}
body .mls .crumbs .home:hover{background:var(--s2);color:var(--tx)}
body .mls .crumbs .home svg{width:16px;height:16px}
body .mls .crumbs a{white-space:nowrap}
body .mls .crumbs .sl{opacity:.5}
body .mls .crumbs [aria-current]{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56ch}
body .mls .ttl{min-width:0}
body .mls .top h1{overflow-wrap:anywhere}
body .mls .top h1.t-m{font-size:clamp(26px,3.3vw,42px)}
body .mls .top h1.t-l{font-size:clamp(22px,2.5vw,32px);line-height:1.12;letter-spacing:-.025em}
body .mls .top h1.t-xl{font-size:clamp(19px,1.8vw,24px);line-height:1.22;letter-spacing:-.015em;text-wrap:pretty}
body .mls .subhead h1{overflow-wrap:anywhere}
body .mls .s-hero:has(.open){z-index:35}
/* the library dropdown opens over the sticky section bar */
/* ===== Details: label + value rows; long or multi-line values stack ===== */
body .mls .facts{margin:0}
body .mls .fact{display:grid;grid-template-columns:auto minmax(0,1fr) 22px;gap:4px 12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
body .mls .fact:first-child{border-top:0}
body .mls .fact dt{color:var(--tx-3)}
body .mls .fact dd{margin:0;min-width:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
body .mls .fact .fe{border:0;background:none;padding:2px;color:var(--tx-3);opacity:.55;cursor:pointer;display:grid;align-self:center;justify-self:end}
body .mls .fact .fe:hover,body .mls .fact .fe:focus-visible{opacity:1;color:var(--hi)}
body .mls .fact .fe svg{width:14px;height:14px}
body .mls .fact.stack{grid-template-columns:minmax(0,1fr) 22px}
body .mls .fact.stack dd{grid-column:1 / -1;grid-row:2;text-align:left;margin-top:4px}
body .mls .fact.stack .fe{grid-column:2;grid-row:1}
body .mls .fv{display:flex;flex-direction:column;gap:2px}
body .mls .fact:not(.stack) .fv{display:block}
body .mls .fv span{font-weight:500;color:var(--tx-2);line-height:1.45}
body .mls .fv b{font-weight:700;color:var(--tx);line-height:1.45}
body .mls .fv .gap{display:block;height:6px}
body .mls .fv.links{flex-direction:row;flex-wrap:wrap;gap:6px}
body .mls .fact.stack .fv.links a{padding:4px 10px;border-radius:99px;background:var(--s2);font-size:13px;font-weight:600;line-height:1.3}
body .mls .fact.stack .fv.links a:hover{background:var(--s3)}
body .mls .fv.clip{max-height:8.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
body .mls .more-fv{font-size:13px;margin-top:6px}
body .mls .facts>.editor.full{margin:2px 0 12px}
/* ===== related / recs / lists with data ===== */
body .mls .relcard .votes{display:inline-flex;align-items:center;gap:3px;font:700 12.5px/1 var(--f-b);color:var(--tx-2);padding:6px 8px;border-radius:99px;background:var(--s2)}
body .mls .relcard .votes svg{width:13px;color:var(--amber)}
body .mls .relcard:has(.votes){grid-template-columns:48px minmax(0,1fr) auto}
body .mls .relcard:hover{border-color:var(--line-2);background:var(--s2)}
body .mls .relcard small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .mls .trio .relcard{border:0;padding:6px;margin:0 -6px;background:none}
body .mls .trio .relcard:hover{background:var(--s2)}
body .mls .trio .rel-grid{gap:4px}
body .mls .card-foot{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;font-size:13.5px}
body .mls .card-foot a,body .mls .card-foot .linkbtn{color:var(--hi);font-weight:600;display:inline-flex;align-items:center;gap:5px;font-size:13.5px}
body .mls .card-foot svg{width:15px}
body .mls .lists{display:grid;gap:4px}
body .mls .rlrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:8px;margin:0 -8px;border-radius:14px}
body .mls .rlrow:hover{background:var(--s2)}
body .mls .rlrow .stack{display:flex;width:66px}
body .mls .rlrow .stack img{width:34px;height:48px;object-fit:cover;border-radius:6px;border:2px solid var(--s1);margin-left:-18px;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
body .mls .rlrow .stack img:first-child{margin-left:0}
body .mls .rlrow b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .mls .rlrow small{font-size:12.5px;color:var(--tx-3)}
/* ===== styled dropdowns ===== */
body .mls .dd{position:relative;display:inline-block;max-width:100%;vertical-align:middle}
body .mls .dd.block{display:block;width:100%}
body .mls .dd-native{position:absolute!important;left:0;top:0;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
body .mls .dd-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:40px;padding:0 12px 0 16px;border-radius:99px;border:1px solid var(--line-2);background:var(--s1);color:var(--tx);font:600 13.5px var(--f-b);cursor:pointer;white-space:nowrap}
body .mls .dd-btn:hover{border-color:color-mix(in srgb,var(--tx) 30%,transparent)}
body .mls .dd-btn span{overflow:hidden;text-overflow:ellipsis}
body .mls .dd-btn svg{width:16px;flex-shrink:0;color:var(--tx-3);transition:transform .2s}
body .mls .dd.on .dd-btn{border-color:var(--hi)}
body .mls .dd.on .dd-btn svg{transform:rotate(180deg)}
body .mls .dd-btn:disabled{opacity:.55;cursor:not-allowed}
body .mls .dd.block .dd-btn{border-radius:12px;height:44px;background:var(--bg);font-size:14.5px;font-weight:500}
body .mls .dd-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:100%;width:max-content;max-width:min(320px,calc(100vw - 32px));max-height:300px;overflow:auto;padding:6px;border-radius:14px;background:var(--s1);border:1px solid var(--line-2);box-shadow:0 24px 48px -16px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
body .mls .dd.up .dd-menu{top:auto;bottom:calc(100% + 6px);transform:translateY(4px)}
body .mls .dd.on .dd-menu{opacity:1;visibility:visible;transform:none}
body .mls .dd.block .dd-menu{width:100%;max-width:none}
body .mls .dd-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px 9px 8px;border:0;background:none;border-radius:9px;text-align:left;font-size:14px;color:var(--tx-2);cursor:pointer;white-space:nowrap}
body .mls .dd-menu button svg{width:15px;flex-shrink:0;opacity:0;color:var(--amber)}
body .mls .dd-menu [aria-selected="true"]{color:var(--tx);font-weight:600}
body .mls .dd-menu [aria-selected="true"] svg{opacity:1}
body .mls .dd-menu button:hover,body .mls .dd-menu button:focus-visible{background:var(--s2);color:var(--tx);outline:0}
body .mls .rv-tools .dd-btn{height:36px;font-size:13px}
body .mls .toolbar .dd-btn{min-width:150px}
/* ===== rails: arrows + drag ===== */
body .mls .rail-box{position:relative}
body .mls .rail-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:99px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--s1) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--tx);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:transform .15s,background .15s}
body .mls .rail-nav:hover{background:var(--s2);transform:translateY(-50%) scale(1.06)}
body .mls .rail-nav svg{width:18px}
body .mls .rail-nav.prev{left:-16px}
body .mls .rail-nav.next{right:-16px}
@media (hover:hover) and (pointer:fine){
body .mls .rail{cursor:grab}
body .mls .rail.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
body .mls .rail.dragging *{pointer-events:none}
}
@media (hover:none),(pointer:coarse){
body .mls .rail-nav{display:none}
}
/* ===== tags list + request ===== */
body .mls .tl-search{max-width:none;margin-bottom:12px}
body .mls .az{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
body .mls .az button{min-width:30px;height:28px;padding:0 6px;border-radius:8px;border:1px solid var(--line);background:none;font:700 12px var(--f-b);color:var(--tx-2);cursor:pointer}
body .mls .az button[aria-pressed="true"]{background:var(--tx);color:var(--bg);border-color:var(--tx)}
body .mls .tl-grid{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;max-height:44vh;overflow:auto;padding:2px}
body .mls .tl-grid button{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:99px;border:1px solid var(--line-2);background:none;font-size:13px;font-weight:500;color:var(--tx-2);cursor:pointer}
body .mls .tl-grid button:hover:not(:disabled){border-color:var(--hi);color:var(--tx)}
body .mls .tl-grid button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--on-amber);font-weight:600}
body .mls .tl-grid button svg{width:13px}
body .mls .tl-grid button:disabled{cursor:default}
body .mls .tl-grid .nil{width:100%;margin:8px 0 0;font-size:13px;color:var(--tx-3)}
body .mls .tr-similar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-4px 0 14px;font-size:13px;color:var(--tx-3)}
body .mls .tr-similar>span{width:100%}
body .mls .tr-similar button{padding:5px 10px;border-radius:99px;border:1px solid var(--line-2);background:none;font-size:12.5px;color:var(--tx-2);cursor:pointer}
body .mls .bad{color:var(--hot);font-weight:600}
body .mls .tr-ex{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--s2)}
body .mls .tr-ex img{width:34px;height:50px;border-radius:6px;object-fit:cover}
body .mls .tr-ex span{flex:1;min-width:0}
body .mls .tr-ex b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .mls .tr-ex small{font-size:12px;color:var(--tx-3)}
body .mls .tr-ex label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
body .mls .tr-ok{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--tx-2)}
body .mls .tr-ok input,body .mls .tr-ex input{accent-color:var(--amber)}
/* ===== mockup switches ===== */
@media (max-width:767px){
body .mls .toolbar .dd{flex:1;min-width:0}
body .mls .toolbar .dd-btn{min-width:0}
body .mls .crumbs [aria-current]{max-width:none}
body .mls .top h1.t-m{font-size:clamp(20px,6vw,26px)}
body .mls .top h1.t-l{font-size:18px;line-height:1.22}
body .mls .top h1.t-xl{font-size:16px;line-height:1.3}
body .mls .top h1.t-l,body .mls .top h1.t-xl{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
body .mls .top h1.full{display:block;-webkit-line-clamp:unset}
body .mls .chrow time{flex-direction:row;gap:5px;align-items:baseline}
}
body .mls .field>*{min-width:0}
body .mls .btn:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.6)}
body .mls .checks label:has(input:checked),body .mls .tl-grid button[aria-pressed="true"]{color:#1d1302}
body .mls .crumbs>*{flex-shrink:0}
body .mls .crumbs a:not(.home){min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;max-width:36ch}
body .mls .crumbs [aria-current]{flex-shrink:1}
/* closed menus take no space (they could widen the page); open ones fade in */
body .mls .dd-menu{display:none}
body .mls .dd.on .dd-menu{display:block;animation:mls-ddin .15s ease}
@keyframes mls-ddin{from{opacity:0;transform:translateY(-4px)}}
body .mls .dd.right .dd-menu{left:auto;right:0}
body .mls .rels .dd{grid-column:3}
@media (max-width:767px){
body .mls .rels .dd{grid-column:2 / -1;grid-row:2;width:100%}
body .mls .rels .dd-btn{height:34px}
}
/* ===== section bar on narrow screens: fewer, tighter tabs; edge fades when it still scrolls ===== */
body .mls .secbar .wrap{--ml:0px;--mr:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--ml),#000 calc(100% - var(--mr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--ml),#000 calc(100% - var(--mr)),transparent 100%)}
body .mls .secbar.fl .wrap{--ml:32px}
body .mls .secbar.fr .wrap{--mr:32px}
body .mls .secbar .s-sm{display:none}
@media (max-width:767px){
body .mls .secbar .m-hide{display:none}
body .mls .secbar .s-lg{display:none}
body .mls .secbar .s-sm{display:inline}
body .mls .secbar .wrap{gap:0}
body .mls .secbar a,body .mls .secbar button{flex:1 0 auto;justify-content:center;gap:6px;padding:14px 9px 12px;font-size:14px}
}
@media (max-width:420px){
body .mls .secbar sup.n-hide{display:none}
body .mls .secbar a,body .mls .secbar button{padding:13px 7px 11px;font-size:13.5px}
}
/* ===== chapter toolbar on phones: search + icons, then both dropdowns at half width ===== */
@media (max-width:767px){
body .mls .toolbar .goto{order:1;flex:1 1 0;min-width:0}
body .mls .toolbar>.btn,body .mls .toolbar>.tb-more{order:2}
body .mls .toolbar .sp{display:none}
body .mls .toolbar::after{content:"";order:3;flex-basis:100%;height:0;margin-top:-8px}
body .mls .toolbar .dd{order:4;flex:1 1 calc(50% - 4px);min-width:0}
}
@media (max-width:380px){
body .mls .pages{gap:4px}
body .mls .pages button{min-width:32px;height:32px;padding:0 7px;font-size:13px}
body .mls .pages span{padding:0 1px}
}
@media (max-width:420px){
body .mls .toolbar .dd-btn{gap:4px;padding:0 8px 0 12px;font-size:13px}
body .mls .toolbar .dd-btn svg{width:16px;height:16px;flex-shrink:0}
}
/* Cover image tools: a faint camera button on the cover (always shown), full strength on hover/focus/open */
body .mls .top .cv-wrap{position:relative;min-width:0}
@media (max-width:767px){
body .mls .top .cv-wrap{grid-area:cover}
}
body .mls .cv-tools{position:absolute;right:8px;bottom:8px;z-index:3}
body .mls .cv-btn{width:32px;height:32px;padding:0;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(10,10,14,.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:rgba(255,255,255,.72);display:grid;place-items:center;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
body .mls .cv-btn svg{width:16px;height:16px}
body .mls .cv-wrap:hover .cv-btn,body .mls .cv-btn:focus-visible,body .mls .cv-tools.open .cv-btn{background:rgba(10,10,14,.78);border-color:rgba(255,255,255,.28);color:#fff}
body .mls .cv-btn:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
@media (max-width:767px){
body .mls .cv-tools{right:6px;bottom:6px}
body .mls .cv-btn{width:28px;height:28px}
body .mls .cv-btn svg{width:14px;height:14px}
}
body .mls .cv-tools .pop.list{left:0;right:auto;top:calc(100% + 8px);min-width:190px}
body .mls .pop.list a svg{width:16px;vertical-align:-3px;margin-right:8px}
/* Report series: a quiet line at the foot of Details */
body .mls .facts-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--tx-3)}
body .mls .facts-foot button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--tx-2);cursor:pointer}
body .mls .facts-foot button:hover,body .mls .facts-foot button:focus-visible{color:var(--hi)}
body .mls .facts-foot svg{width:14px;height:14px}

/* ===== sub-pages (docs/ui-mockups/series-*.html) ===== */
/* ----- series-edit.html ----- */
body .mls[data-view="edit"] .view{display:none}
body .mls[data-view="edit"] .view.on{display:block}
body .mls[data-view="edit"] fieldset{border:0;margin:0;padding:0;min-width:0}
body .mls[data-view="edit"] fieldset:disabled{opacity:.6}
body .mls[data-view="edit"] .group{margin-bottom:20px}
body .mls[data-view="edit"] .group>.h2{margin-bottom:6px}
body .mls[data-view="edit"] .group>p.gd{margin:0 0 16px;color:var(--tx-3)!important;font-size:13.5px}
body .mls[data-view="edit"] .ef{padding:14px 0;border-top:1px solid var(--line)}
body .mls[data-view="edit"] .ef:first-of-type{border-top:0;padding-top:4px}
body .mls[data-view="edit"] .ef>label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;margin-bottom:8px}
body .mls[data-view="edit"] .ef .editor{margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
body .mls[data-view="edit"] .ef.changed>label::after{content:"Changed";font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
body .mls[data-view="edit"] .ef .undo{margin-left:auto;border:0;background:none;color:var(--hi);font-weight:600;font-size:13px;cursor:pointer;display:none}
body .mls[data-view="edit"] .ef.changed .undo{display:inline}
body .mls[data-view="edit"] .two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
body .mls[data-view="edit"] .two-col .ef:nth-of-type(2){border-top:0;padding-top:4px}
body .mls[data-view="edit"] .chg{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;font-size:14px}
body .mls[data-view="edit"] .chg li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;background:var(--s2)}
body .mls[data-view="edit"] .chg li button{border:0;background:none;color:var(--hi);font-weight:600;cursor:pointer;font-size:13px}
body .mls[data-view="edit"] .chg .none{background:none;padding:0;color:var(--tx-3)}
body .mls[data-view="edit"] .side-actions{display:grid;gap:8px}
body .mls[data-view="edit"] .side-actions .btn{width:100%}
body .mls[data-view="edit"] .rules{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--tx-2);font-size:13.5px}
body .mls[data-view="edit"] .diffrow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
body .mls[data-view="edit"] .diffrow b{font-size:14px}
body .mls[data-view="edit"] .hist-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
body .mls[data-view="edit"] .hist-tools .grow{flex:1}
body .mls[data-view="edit"] .example-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:36px 0 6px}
body .mls[data-view="edit"] .example-h h3{margin:0;font:700 17px var(--f-d)}
body .mls[data-view="edit"] .example-p{margin:0 0 14px;color:var(--tx-3);font-size:13.5px}
body .mls[data-view="edit"] .tbl td:first-child{white-space:nowrap;color:var(--tx-3)}
@media (max-width:767px){
body .mls[data-view="edit"] .two-col{grid-template-columns:1fr}
body .mls[data-view="edit"] .two-col .ef:nth-of-type(2){border-top:1px solid var(--line);padding-top:14px}
body .mls[data-view="edit"] .diffrow{grid-template-columns:1fr;gap:6px}
body .mls[data-view="edit"] .tbl td:first-child{white-space:normal}
}

/* ----- series-related.html ----- */
body .mls[data-view="related"] fieldset{border:0;margin:0;padding:0;min-width:0}
body .mls[data-view="related"] fieldset:disabled{opacity:.6}
body .mls[data-view="related"] .rels{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body .mls[data-view="related"] .rels li{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px;border-radius:16px;background:var(--s2);animation:in .3s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
body .mls[data-view="related"] .rels .cover{border-radius:8px}
body .mls[data-view="related"] .rels b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .mls[data-view="related"] .rels small{color:var(--tx-3);font-size:12.5px}
body .mls[data-view="related"] .rels .select{height:34px;font-size:13px}
body .mls[data-view="related"] .search{position:relative}
body .mls[data-view="related"] .search input{padding-left:38px!important}
body .mls[data-view="related"] .search>svg{position:absolute;left:12px;top:12px;width:18px;color:var(--tx-3);pointer-events:none}
body .mls[data-view="related"] .chosen{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;border:1px solid var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent)}
body .mls[data-view="related"] .chosen img{width:36px;height:52px;border-radius:6px;object-fit:cover}
body .mls[data-view="related"] .chosen b{flex:1;font-size:14.5px}
body .mls[data-view="related"] .chosen button{border:0;background:none;color:var(--hi);font-weight:600;cursor:pointer;font-size:13px}
body .mls[data-view="related"] .preview{font-size:13.5px;color:var(--tx-3);margin:2px 0 14px;padding:10px 12px;border-radius:12px;background:var(--s2)}
body .mls[data-view="related"] .preview b{color:var(--tx)}
body .mls[data-view="related"] .addbtn{width:100%}
@media (max-width:767px){
body .mls[data-view="related"] .rels li{grid-template-columns:44px minmax(0,1fr) auto;row-gap:8px}
body .mls[data-view="related"] .rels .select{grid-column:2 / -1;grid-row:2;width:100%}
}

/* ----- series-recommend.html ----- */
body .mls[data-view="recommend"] fieldset{border:0;margin:0;padding:0;min-width:0}
body .mls[data-view="recommend"] fieldset:disabled{opacity:.6}
body .mls[data-view="recommend"] .top25{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:r}
body .mls[data-view="recommend"] .top25 li{counter-increment:r;display:grid;grid-template-columns:30px 52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px 10px 6px;border-radius:16px;background:var(--s2);animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
body .mls[data-view="recommend"] .top25 li::before{content:counter(r);font:800 18px var(--f-d);text-align:center;color:var(--tx-3)!important}
body .mls[data-view="recommend"] .top25 li:first-child::before{color:var(--amber)!important}
body .mls[data-view="recommend"] .top25 .cover{border-radius:8px}
body .mls[data-view="recommend"] .top25 b{display:block;font-size:15px}
body .mls[data-view="recommend"] .top25 small{color:var(--tx-3);font-size:12.5px}
body .mls[data-view="recommend"] .vote{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);background:none;font-weight:700;font-size:13px;color:var(--tx-2);cursor:pointer}
body .mls[data-view="recommend"] .vote svg{width:16px}
body .mls[data-view="recommend"] .vote[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
body .mls[data-view="recommend"] .side .pick{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body .mls[data-view="recommend"] .side .pick label{font-size:12.5px}
body .mls[data-view="recommend"] .filter{margin-bottom:12px}
body .mls[data-view="recommend"] .howto{margin:0 0 14px;font-size:13.5px;color:var(--tx-3)}
body .mls[data-view="recommend"] .submit{width:100%;margin-top:16px}
body .mls[data-view="recommend"] .foot{font-size:12.5px;color:var(--tx-3);margin:12px 0 0}
body .mls[data-view="recommend"] .foot a{color:var(--hi);font-weight:600}
@media (max-width:1023px){
body .mls[data-view="recommend"] .side .pick{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:767px){
body .mls[data-view="recommend"] .side .pick{grid-template-columns:repeat(3,minmax(0,1fr))}
body .mls[data-view="recommend"] .top25 li{grid-template-columns:24px 44px minmax(0,1fr) auto;gap:10px}
}

/* ----- series-graph.html ----- */
body .mls[data-view="graph"] .filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--s1);border:1px solid var(--line);position:sticky;top:64px;z-index:20}
body .mls[data-view="graph"] .filters .dates{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx-3)}
body .mls[data-view="graph"] .filters input[type=date]{height:36px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--tx);padding:0 10px;font:600 13px var(--f-b);color-scheme:inherit}
body .mls[data-view="graph"] .series-pick{display:flex;flex-wrap:wrap;gap:6px;width:100%}
body .mls[data-view="graph"] .series-pick label{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--tx-2);cursor:pointer}
body .mls[data-view="graph"] .series-pick input{accent-color:var(--hi)}
body .mls[data-view="graph"] .series-pick label:has(input:checked){color:var(--tx);border-color:var(--hi)}
body .mls[data-view="graph"] .series-pick small{color:var(--tx-3);font-weight:500}
body .mls[data-view="graph"] .kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}
body .mls[data-view="graph"] .kpi{padding:14px 16px;border-radius:16px;background:var(--s1);border:1px solid var(--line)}
body .mls[data-view="graph"] .kpi small{display:block;font-size:12px;color:var(--tx-3);font-weight:600}
body .mls[data-view="graph"] .kpi b{display:block;font:800 26px/1.1 var(--f-d);margin-top:6px;letter-spacing:-.02em}
body .mls[data-view="graph"] .kpi span{font-size:12px;color:var(--tx-3)}
body .mls[data-view="graph"] .charts{display:grid;gap:20px}
body .mls[data-view="graph"] .card{background:var(--s1);border:1px solid var(--line);border-radius:20px;padding:18px 18px 12px;scroll-margin-top:200px}
body .mls[data-view="graph"] .card[hidden]{display:none}
body .mls[data-view="graph"] .card header{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:8px}
body .mls[data-view="graph"] .card h2{margin:0;font:700 17px/1.2 var(--f-d)}
body .mls[data-view="graph"] .card header p{margin:3px 0 0;font-size:13px;color:var(--tx-3)!important}
body .mls[data-view="graph"] .card header .acts{margin-left:auto;display:flex;gap:6px}
body .mls[data-view="graph"] .card .note{font-size:12.5px;color:var(--tx-3);margin:8px 0 4px}
body .mls[data-view="graph"] .plot{position:relative}
body .mls[data-view="graph"] .plot svg{display:block;width:100%;overflow:visible}
body .mls[data-view="graph"] .plot text{fill:var(--tx-3);font:500 11px var(--f-b)}
body .mls[data-view="graph"] .plot .grid line{stroke:var(--line);stroke-width:1}
body .mls[data-view="graph"] .plot .base{stroke:var(--line-2)}
body .mls[data-view="graph"] .plot .ln{fill:none;stroke:var(--hi);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
body .mls[data-view="graph"] .plot .gap{fill:none;stroke:var(--tx-3);stroke-width:1.5;stroke-dasharray:3 4}
body .mls[data-view="graph"] .plot .bar{fill:color-mix(in srgb,var(--hi) 65%,transparent)}
body .mls[data-view="graph"] .plot .bar.on{fill:var(--hi)}
body .mls[data-view="graph"] .plot .dot{fill:var(--hi);stroke:var(--s1);stroke-width:2}
body .mls[data-view="graph"] .plot .cross{stroke:var(--tx-3);stroke-width:1;stroke-dasharray:2 3}
body .mls[data-view="graph"] .tip{position:absolute;pointer-events:none;z-index:3;transform:translate(-50%,calc(-100% - 12px));padding:8px 10px;border-radius:10px;background:var(--tx);color:var(--bg);font-size:12.5px;line-height:1.35;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
body .mls[data-view="graph"] .tip b{display:block;font-size:13.5px}
body .mls[data-view="graph"] .tview{margin-top:8px;max-height:280px;overflow:auto}
body .mls[data-view="graph"] .tview .tbl td,body .mls[data-view="graph"] .tview .tbl th{padding:7px 10px}
body .mls[data-view="graph"] .flat{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:6px 0 8px}
body .mls[data-view="graph"] .flat b{font:800 44px/1 var(--f-d);letter-spacing:-.03em}
body .mls[data-view="graph"] .flat p{margin:0;flex:1;min-width:220px;color:var(--tx-2)!important;font-size:14px}
body .mls[data-view="graph"] .sub-h{display:flex;align-items:center;justify-content:space-between;margin:34px 0 14px;gap:12px}
body .mls[data-view="graph"] .sub-h h2{margin:0;font:700 clamp(19px,2.2vw,24px)/1.1 var(--f-d)}
body .mls[data-view="graph"] .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:1023px){
body .mls[data-view="graph"] .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
body .mls[data-view="graph"] .pair{grid-template-columns:1fr}
}
@media (max-width:767px){
body .mls[data-view="graph"] .filters{top:56px;position:static}
body .mls[data-view="graph"] .kpis{grid-template-columns:1fr 1fr}
body .mls[data-view="graph"] .kpi b{font-size:22px}
body .mls[data-view="graph"] .filters .dates{width:100%}
body .mls[data-view="graph"] .filters .dates input{flex:1;min-width:0}
body .mls[data-view="graph"] .card{padding:14px 12px 10px}
}


/* ===== live-site overrides (not in the mockup) ===== */

/* the shell header is 64px, and 56px below 900px (the mockup switched at 768px) */
@media (max-width: 899.98px) {
    body .mls .secbar { top: 56px; }
}

/* covers that fail to load keep the tinted placeholder */
body .mls .cover img.is-broken { opacity: 0; }

/* ads sit in the sidebar and between sections */
body .mls .side .ad-slot { text-align: center; }
body .mls .ad-row { margin: 0 0 32px; text-align: center; }

/* a busy state while a request runs */
body .mls .busy { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* status chip colours beyond "ongoing" */
body .mls .meta .done { background: color-mix(in srgb, var(--hi) 16%, transparent); color: var(--hi); }
body .mls .meta .hold { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
body .mls .meta .done::before, body .mls .meta .hold::before { content: ""; width: 6px; height: 6px; border-radius: 9px; background: currentColor; }

/* premium chapters */
body .mls .lbl.prem { display: inline-grid; place-items: center; padding: 2px 4px; color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
body .mls .lbl.prem svg { width: 11px; height: 11px; }

/* library menu on the tracking card */
body .mls .lib { position: relative; }
body .mls .lib > .btn { width: 100%; }
body .mls .lib > .btn .ml-ico:last-child { width: 16px; margin-left: auto; }
body .mls .lib-menu { min-width: 100%; max-height: 320px; overflow: auto; left: 0; right: auto; top: calc(100% + 8px); }
body .mls .lib-menu button .ml-ico { opacity: 0; color: var(--amber); }
body .mls .lib-menu button[aria-checked="true"] { color: var(--tx); font-weight: 600; }
body .mls .lib-menu button[aria-checked="true"] .ml-ico { opacity: 1; }
body .mls .lib-menu [data-unlist] .ml-ico, body .mls .lib-menu a .ml-ico { opacity: 1; color: inherit; }
body .mls .pop.list a { display: flex; align-items: center; gap: 8px; font-size: 14px; }
body .mls .pop.list a .ml-ico { width: 16px; }
body .mls .lib-none { display: block; padding: 9px 12px; font-size: 13px; color: var(--tx-3); }

/* description: paragraphs, clamped to about four lines until "Read more" */
body .mls .syn { display: block; }
body .mls .syn p + p { margin-top: .8em; }
body .mls .syn.clamp { display: block; max-height: calc(1.7em * 4); overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

/* review text */
body .mls .rtext { color: var(--tx-2); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
body .mls .rtext.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
body .mls .helpful button span { color: var(--tx-3); margin-left: 2px; }
body .mls .wide-reviews .card-foot { margin-top: 12px; }

/* a description short enough to fit needs no fade */
body .mls .syn.clamp.fits { max-height: none; -webkit-mask-image: none; mask-image: none; }

/* toasts can carry a link (e.g. to reading list settings) */
body .mls .toast.show { pointer-events: auto; }
body .mls .toast a { color: inherit; text-decoration: underline; }
body .mls .toast.bad svg { color: var(--amber); }

/* the tracking card while a library change runs */
body .mls .track.busy { opacity: .6; pointer-events: none; }

/* activity ranks with many digits */
body .mls .ranks b { display: block; white-space: nowrap; }
body .mls .ranks b.sm { font-size: 17px; }
body .mls .ranks b.xs { font-size: 14.5px; }

/* modals and toasts sit above the site header (z-index 1030), like Bootstrap's modals */
body .mls .mdl { z-index: 1050; }
body .mls .toast { z-index: 1060; }

/* inline editing */
body .mls .none { color: var(--tx-3); font-size: 14px; }
body .mls .editor.busy { opacity: .6; pointer-events: none; }
body .mls .editor .hint .linkbtn { font-size: inherit; }
body .mls .tagedit { position: relative; }
body .mls .tagedit input { flex: 1; min-width: 140px; }
body .mls .tag-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; max-height: 280px; overflow: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--s1); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55); }
body .mls .tag-sug button[data-sug] { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--tx-2); text-align: left; font-size: 14px; cursor: pointer; }
body .mls .tag-sug button[aria-selected="true"], body .mls .tag-sug button[data-sug]:hover { background: var(--s2); color: var(--tx); }
body .mls .tag-sug p { margin: 0; padding: 8px 10px; font-size: 13.5px; color: var(--tx-3); }

/* Phone sheets: header and footer stay put, only the body scrolls (Save / Load more always in reach). */
@media (max-width: 767px) {
  body .mls .mdl-box { display: flex; flex-direction: column; overflow: hidden; }
  body .mls .mdl-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body .mls .mdl-h, body .mls .mdl-f { flex: none; }
}

/* Ratings & reviews page (docs/ui-mockups/series-reviews.html) */
body .mls .mine { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line); margin-bottom: 24px; }
body .mls .mine p { margin: 0; flex: 1; min-width: 220px; color: var(--tx-2); font-size: 14px; }
body .mls .mine p b { color: var(--tx); }
body .mls .mine .stars svg { width: 16px; }
body .mls .hide-sp { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tx-2); margin-left: auto; cursor: pointer; }
body .mls .hide-sp input { accent-color: var(--amber); }
body .mls .rlist-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--tx-3); }
body .mls .rv-tools { align-items: center; }
body .mls .rcard.sp-hidden .rbody, body .mls .rcard.sp-hidden h4 { filter: blur(6px); user-select: none; }
body .mls .rcard.sp-hidden { cursor: pointer; }
body .mls .pages a, body .mls .pages span.off { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--s1); color: var(--tx-2); font-weight: 600; display: grid; place-items: center; text-decoration: none; }
body .mls .pages a:hover { border-color: var(--hi); color: var(--tx); }
body .mls .pages a svg, body .mls .pages span.off svg { width: 16px; }
body .mls .pages a[aria-current="page"] { background: var(--tx); border-color: var(--tx); color: var(--bg); }
body .mls .pages span.off { opacity: .4; }
@media (max-width: 767px) {
  body .mls .pages a, body .mls .pages span.off { min-width: 32px; height: 32px; padding: 0 7px; font-size: 13px; }
}

/* All chapters: long series have dozens of ranges, so the tabs stay one scrolling row (as in the mockup). */
body .mls .rangetabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
body .mls .rangetabs::-webkit-scrollbar { display: none; }
body .mls .rangetabs button { flex: none; }

/* Edit history: the optional "why" note saved with an edit */
body .mls[data-view="edit"] .tbl .why { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--tx-3); white-space: normal; max-width: 260px; }

/* the old site CSS gives every <label> margin-bottom:8px, which lifts the label-wrapped search box above the selects */
body .mls .goto{margin:0}

/* Big numbers fit their box: each <b> carries --w (its width in em, from ml_text_em()) */
@supports (container-type:inline-size) {
  body .mls .ranks div { container-type: inline-size; }
  body .mls .ranks b, body .mls .ranks b.sm, body .mls .ranks b.xs { font-size: min(20px, calc(100cqi / var(--w, 4))); }
  body .mls .ring > div { container-type: inline-size; }
  body .mls .ring b { font-size: min(19px, calc(78cqi / var(--w, 2))); }
}

/* No releases at all: invite the first one */
body .mls .ch-empty p { margin: 8px auto 16px; max-width: 360px; font-size: 13.5px; line-height: 1.5; }
body .mls .ch-empty .btn { display: inline-flex; }

/* Half-star picker (review dialog): a filled star over the outline, clipped to half or whole */
body .mls .bigstars button, body .mls .ministars button { position: relative; touch-action: manipulation; }
body .mls .bigstars button .sf, body .mls .ministars button .sf { position: absolute; inset: 2px; display: grid; color: var(--amber); clip-path: inset(0 100% 0 0); pointer-events: none; }
body .mls .bigstars button .sf svg path, body .mls .ministars button .sf svg path { fill: currentColor; }
body .mls .bigstars button.half, body .mls .ministars button.half { color: var(--amber); }
body .mls .bigstars button.half .sf, body .mls .ministars button.half .sf { clip-path: inset(0 50% 0 0); }
body .mls .bigstars button.on .sf, body .mls .ministars button.on .sf { clip-path: none; }