/* zg.css — the zoomg template over the v3 shell (2026-10-24).
   Loaded only when shell.php decides the zg mode (html[data-zg]): readers who
   chose the light version, or ?zg=1. Last in the head, so it wins over
   main.css without !important wars. Measured off zoomg.ir at 375:
     ad 96px that scrolls away, header 58px black and sticky (menu and search
     at the right edge, logo in the middle, account at the left), a light page.
   Phases (docs: the migration plan artifact): 0 chrome, 1 articles, 2 lists,
   3 film/series/TV, 4 music, 5 the rest. Each phase adds its section below. */

/* ═══ phase 0: chrome ═══════════════════════════════════════════════════ */
html[data-zg]{ --zg-bg:#f1f2f4; --zg-card:#fff; --zg-ink:#131415; --zg-mut:#5b6066; --zg-line:#e2e4e8; --zg-chip:#f4ee40; --zg-chipfg:#14421a }
html[data-zg] .app-main{padding-top:0}
/* the sub-header rows (chips, fal row, mobile search bar) and the ‹ › buttons:
   zoomg has none of them; the menu carries search and every section */
html[data-zg] .appsub,
html[data-zg] .ir2-histnav{display:none!important}

/* the demo ad: full bleed by the shadow trick (no 100vw, no sideways scroll) */
html[data-zg] .zg-ad{position:relative;height:96px;background:#1b1d20;color:#fff;
  box-shadow:0 0 0 100vmax #1b1d20;clip-path:inset(0 -100vmax)}
html[data-zg] .zg-ad[hidden]{display:none}
html[data-zg] .zg-adin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:100%;color:#fff}
html[data-zg] .zg-adin b{font-size:16px;font-weight:900}
html[data-zg] .zg-adin span{font-size:13px;opacity:.7;direction:ltr}
html[data-zg] .zg-adx{position:absolute;top:0;left:0;width:44px;height:44px;border:0;
  background:rgba(0,0,0,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer}

/* the header: sticky inside the scroller, black edge to edge */
html[data-zg] .app-top.v3top{
  position:sticky;top:0;z-index:60;height:58px;padding:0 6px;margin:0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;
  background:#000;border:0;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax)}
html[data-zg] .app-top .tb-left,
html[data-zg] .app-top .tb-user{display:contents}
html[data-zg] .app-top .tb-browse,
html[data-zg] .app-top .tb-search,
html[data-zg] .app-top .tb-searchbtn,
html[data-zg] .app-top .tb-lang{display:none!important}
html[data-zg] .app-top .tb-brand{grid-column:2;grid-row:1;padding:0}
html[data-zg] .app-top .tb-brand img{height:30px;width:auto}
html[data-zg] .app-top .tb-burger{grid-column:1;grid-row:1;justify-self:start;display:flex!important;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0;border:0;border-radius:8px;background:none;color:#fff}
html[data-zg] .app-top .tb-burger svg{display:none}
html[data-zg] .app-top .tb-burger svg.zg-ic{display:block;width:26px;height:26px}
html[data-zg] .app-top .tb-login,
html[data-zg] .app-top .tb-avawrap{grid-column:3;grid-row:1;justify-self:end}
html[data-zg] .app-top .tb-login{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;
  padding:0;border:0;border-radius:8px;background:none;color:#fff}
html[data-zg] .app-top .tb-login svg{width:28px;height:28px}
html[data-zg] .app-top .tb-burger:hover,
html[data-zg] .app-top .tb-login:hover{background:rgba(255,255,255,.12)}
html[data-zg] .app-top .tb-ava img,
html[data-zg] .app-top .tb-ava-ph{width:32px;height:32px}

/* the menu drawer: search first, then the sections */
html[data-zg] .zg-sform{display:flex;gap:8px;margin:4px 0 6px}
html[data-zg] .zg-sform input{flex:1;min-width:0;height:46px;border:1.5px solid rgba(255,255,255,.18);border-radius:10px;padding:0 14px;
  font:inherit;font-size:16px;color:inherit;background:rgba(255,255,255,.06)}
html[data-zg] .zg-sform input:focus{outline:none;border-color:var(--zg-chip)}
html[data-zg] .zg-sform button{flex:0 0 auto;height:46px;padding:0 16px;border:0;border-radius:10px;background:var(--zg-chip);color:var(--zg-chipfg);
  font:inherit;font-size:15px;font-weight:800;cursor:pointer}
html[data-zg] .zg-adv{display:block;font-size:15px;opacity:.75;padding:2px 2px 8px;text-align:right}

/* ═══ shared blocks (.zgk): the /lite card system on inner pages ═══════════
   A copy of lite.php's inline rules, scoped: lite must stay one request, so
   it keeps its own. Light card on the page whatever the page's ground. */
html[data-zg] .zgk{--bg:var(--zg-bg);--card:var(--zg-card);--fg:var(--zg-ink);--mut:var(--zg-mut);--line:var(--zg-line);--shade:#eceef1;
  color:var(--fg);font-size:16px;line-height:1.5;text-align:right}
html[data-zg] .zgk.card{background:var(--card);border-radius:10px;padding:16px;margin:16px 0}
html[data-zg] .zgk a{color:inherit;text-decoration:none}
html[data-zg] .zgk img{display:block;max-width:100%;background:var(--shade)}
html[data-zg] .zgk .nocov{display:block;background:var(--shade)}
html[data-zg] .zgk .ic{width:17px;height:17px;flex:0 0 17px}
html[data-zg] .zgk .sh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
html[data-zg] .zgk .sh h2{font-size:20px;font-weight:900;line-height:1.4;margin:0;color:var(--fg)}
html[data-zg] .zgk .sh a{display:flex;align-items:center;gap:2px;font-size:15px;font-weight:700;color:var(--mut);white-space:nowrap;padding:6px 0}
html[data-zg] .zgk .tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 6px;padding:0 16px 10px;border-bottom:1px solid var(--line)}
html[data-zg] .zgk .tabs::-webkit-scrollbar{display:none}
html[data-zg] .zgk .tab{flex:0 0 auto;border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:7px 15px;
  font:inherit;font-size:15px;font-weight:700;line-height:1.4;cursor:pointer;white-space:nowrap;color:var(--mut)}
html[data-zg] .zgk .tab[aria-selected="true"]{background:var(--fg);border-color:var(--fg);color:var(--card)}
html[data-zg] .zgk .tp[hidden]{display:none}
html[data-zg] .zgk .rows{display:grid;grid-template-columns:minmax(0,1fr)}
html[data-zg] .zgk .row{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line)}
html[data-zg] .zgk .rows > .row:first-child{border-top:0}
html[data-zg] .zgk .row img,html[data-zg] .zgk .row .nocov{flex:0 0 128px;width:128px;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:6px}
html[data-zg] .zgk .row .rb{flex:1;min-width:0}
html[data-zg] .zgk .row h3{font-size:16px;font-weight:700;line-height:1.5;margin:0;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html[data-zg] .zgk .row:hover h3{text-decoration:underline}
html[data-zg] .zgk .meta{display:block;font-size:14px;color:var(--mut);margin-top:5px}
html[data-zg] .zgk .shelf{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:4px;--ar:1;--w:150px}
html[data-zg] .zgk .shelf::-webkit-scrollbar{display:none}
html[data-zg] .zgk .shelf.short{--ar:3/5;--w:140px}
html[data-zg] .zgk .shelf.poster{--ar:2/3;--w:140px}
html[data-zg] .zgk .tl{position:relative;flex:0 0 var(--w);min-width:0;scroll-snap-align:start;display:block}
html[data-zg] .zgk .tl img,html[data-zg] .zgk .tl .nocov{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;border-radius:8px}
html[data-zg] .zgk .tl h4{font-size:15px;font-weight:700;margin:8px 0 0;line-height:1.4;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;text-align:right}
html[data-zg] .zgk .tl .m{display:block;font-size:14px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:860px){
  html[data-zg] .zgk.card{padding:20px}
  html[data-zg] .zgk .tabs{margin:0 -20px 6px;padding:0 20px 12px}
  html[data-zg] .zgk .rows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  html[data-zg] .zgk .rows > .row:nth-child(2){border-top:0}
  html[data-zg] .zgk .shelf{--w:170px}
}

/* the breadcrumb, zoomg's «مسیر صفحه» */
html[data-zg] .zg-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--zg-mut);margin:4px 0 10px}
html[data-zg] .zg-crumb a{color:var(--zg-mut)}
html[data-zg] .zg-crumb a:hover{color:var(--zg-ink);text-decoration:underline}

/* ═══ phase 1: the article (/mag/…, /news/…) ════════════════════════════
   zoomg's article on a phone: a light page, the headline big and black, a
   quiet meta line, the body at a reading size. The blocks after it are .zgk. */
html[data-zg] .magpost .magkick{display:none}
html[data-zg] .magpost .magh1{font-size:24px;font-weight:900;line-height:1.6;color:var(--zg-ink)}
html[data-zg] .magpost .magmeta{font-size:14px;color:var(--zg-mut)}
html[data-zg] .magpost .magbody{font-size:17px;line-height:2.05}
html[data-zg] .magpost .magback{display:none}

/* ═══ phase 2: the lists (/news, /mag, /tags, /news/archive) ═════════════
   zoomg's category page: breadcrumb, a big title, the list in one white card,
   the «پیشنهاد» block at the foot. The lists keep their own markup; this only
   gives it zoomg's shape. */
html[data-zg] .v3-light{background:var(--zg-bg)}
html[data-zg] .zg-pagehead{padding:10px 2px 0}
html[data-zg] .zg-pagefoot{padding:0 0 8px}
html[data-zg] .nwpg .nwin,
html[data-zg] .tagpage .magin{background:var(--zg-card);border-radius:10px;padding:16px;margin:8px 0 16px}
html[data-zg] .nwpg .magkick,
html[data-zg] .tagpage .magkick{display:none}
html[data-zg] .nwpg .magh1,
html[data-zg] .tagpage .magh1{font-size:24px;font-weight:900;color:var(--zg-ink);margin:0 0 4px}
html[data-zg] .nwpg .magmeta,
html[data-zg] .tagpage .magmeta{font-size:14px;color:var(--zg-mut)}
html[data-zg] .nwrow{border-top:1px solid var(--zg-line);padding:12px 0}
html[data-zg] .nwrow .nwt{font-size:16px;font-weight:700;line-height:1.55;color:var(--zg-ink)}
html[data-zg] .nwrow .nwa{font-size:14px;color:var(--zg-mut)}
html[data-zg] .nwpg .magback,
html[data-zg] .tagpage .magback{display:none}
html[data-zg] .magrid{gap:12px}
html[data-zg] .tagcard{border-top:1px solid var(--zg-line);padding:12px 0}
html[data-zg] .tagcard .tagtt{font-size:16px;font-weight:700;color:var(--zg-ink)}
html[data-zg] .tagcard .tagdt,
html[data-zg] .tagcard .tagkick{font-size:14px;color:var(--zg-mut)}
/* /mag's picture cards as zoomg rows: the cover becomes the 128x72 thumb on
   the right and the caption, lifted out of it, sits beside it */
html[data-zg] .magrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
html[data-zg] .magrid .nwrtile{position:relative;display:block;min-height:96px;height:auto;aspect-ratio:auto;padding:12px 0;margin:0;
  border-top:1px solid var(--zg-line);border-radius:0;background:none;box-shadow:none;overflow:visible}
html[data-zg] .magrid .nwrtile:first-child{border-top:0}
html[data-zg] .magrid .nwrcov{position:static!important;display:block;width:128px;height:72px;aspect-ratio:auto;border-radius:6px;
  background-color:#eceef1;background-size:cover;background-position:center;overflow:hidden}
html[data-zg] .magrid .nwrcov::before,
html[data-zg] .magrid .nwrcov::after{display:none!important}
html[data-zg] .magrid .nwrcap{position:absolute;top:12px;right:141px;left:0;bottom:auto;padding:0;background:none!important;color:var(--zg-ink);text-shadow:none}
html[data-zg] .magrid .nwrtt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;
  font-size:16px;font-weight:700;line-height:1.5;color:var(--zg-ink)}
html[data-zg] .magrid .nwrts{display:block;font-size:14px;color:var(--zg-mut);margin-top:4px}
html[data-zg] .magrid .nwrpin{display:none}
@media (min-width:860px){ html[data-zg] .magrid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px} html[data-zg] .magrid .nwrtile:nth-child(2){border-top:0} }

/* ═══ phase 3: film, series, TV on the light ground ═════════════════════
   The pages keep their markup. What was white text on the old dark page and
   now sits on paper is set back to ink; what still sits on a dark box (the
   player, the members gate over it) keeps its white. */
html[data-zg] .v3-light .magback{color:var(--zg-ink)}
html[data-zg] .v3-light .fgate,
html[data-zg] .v3-light .fgate *:not(input):not(button):not(a.igk-go){color:#f3f3f3}
html[data-zg] .v3-light .fgate .igk-i{color:#111}

/* ═══ phase 4: music on the light ground ════════════════════════════════
   The synced lyrics were white-on-dark; on paper they take the values the
   old paper skin used for the same lines (paper.css), so the line being sung
   still stands out from the ones around it. */
html[data-zg] .v3-light .songpg .lln{color:rgba(31,31,31,.34)}
html[data-zg] .v3-light .songpg .lln:hover{color:rgba(31,31,31,.62)}
html[data-zg] .v3-light .songpg .lln.past{color:rgba(31,31,31,.22)}
html[data-zg] .v3-light .songpg .lln.active{color:#1f1f1f;text-shadow:none}
html[data-zg] .v3-light .songpg .lyr-fa{color:var(--zg-mut)}
/* the remaining white-on-paper and gold-on-paper texts: /shows, a show, /search */
html[data-zg] .v3-light .pgsub,
html[data-zg] .v3-light .shcard .sh,
html[data-zg] .v3-light .shcard .sd,
html[data-zg] .v3-light .es{color:var(--zg-mut)}
html[data-zg] .v3-light .ep,
html[data-zg] .v3-light .tly{color:#8a6a12}
/* grey text on paper is the theme's own --muted, which the dark theme set to
   white at 60%: redefined for the light ground, it fixes every page at once */
html[data-zg] .v3-light,
html[data-zg] .v3-light [class]{--muted:#5b6066}   /* pages redefine it on their own wrappers (.spg) */
html[data-zg] .v3 .srchpg .trow .tly{color:#8a6a12;font-size:13px}
html[data-zg] .v3 .spg .eprow .es{font-size:13px}
html[data-zg] .v3-light .et span{color:#8a6a12}


/* ═══ the drawer: menu and search in one light panel (2026-10-24) ═════════ */
html.zgd-lock, html.zgd-lock body{overflow:hidden}
html[data-zg] .zg-drawer{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.45);direction:rtl}
html[data-zg] .zg-drawer[hidden]{display:none}
html[data-zg] .zgd-card{position:absolute;top:0;inset-inline:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  background:var(--zg-card);color:var(--zg-ink);padding:calc(12px + env(safe-area-inset-top)) 16px 18px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
html[data-zg] .zgd-top{display:flex;gap:8px;align-items:center;margin-bottom:12px}
html[data-zg] .zgd-form{flex:1;min-width:0;margin:0}
html[data-zg] .zgd-form input{width:100%;box-sizing:border-box;height:48px;border:1.5px solid var(--zg-line);border-radius:10px;padding:0 14px;
  font:inherit;font-size:16px;color:var(--zg-ink);background:var(--zg-bg)}
html[data-zg] .zgd-form input:focus{outline:none;border-color:var(--zg-ink)}
html[data-zg] .zgd-x{flex:0 0 44px;height:44px;border:0;border-radius:10px;background:var(--zg-bg);color:var(--zg-ink);font-size:24px;line-height:1;cursor:pointer}
html[data-zg] .zgd-res{border:1px solid var(--zg-line);border-radius:10px;overflow:hidden}
html[data-zg] .zgd-res[hidden],html[data-zg] .zgd-nav[hidden]{display:none}
html[data-zg] .zgd-res a{display:block;padding:10px 14px;border-top:1px solid var(--zg-line);color:var(--zg-ink);text-decoration:none}
html[data-zg] .zgd-res .zgd-h + a,html[data-zg] .zgd-res a:first-child{border-top:0}
html[data-zg] .zgd-res b{display:block;font-size:15px;font-weight:700;line-height:1.5;unicode-bidi:plaintext;text-align:right}
html[data-zg] .zgd-res span{display:block;font-size:13px;color:var(--zg-mut);unicode-bidi:plaintext;text-align:right}
html[data-zg] .zgd-h{padding:8px 14px 3px;font-size:13px;font-weight:800;color:var(--zg-mut);background:#eceef1}
html[data-zg] .zgd-res .zgd-all{font-weight:800;text-align:center}
html[data-zg] .zgd-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
html[data-zg] .zgd-nav a{display:block;padding:12px 6px;font-size:16px;font-weight:700;color:var(--zg-ink);text-decoration:none;border-bottom:1px solid var(--zg-line)}
html[data-zg] .zgd-nav a:hover{background:#eceef1}
html[data-zg] .app-top #zgMenuBtn{grid-column:1;grid-row:1;justify-self:start;display:flex!important;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0;border:0;border-radius:8px;background:none;color:#fff}

/* covers in the drawer's results (his ask, 2026-10-24: «برای اصلی کامل بیاید») */
html[data-zg] .zgd-res a{display:flex;align-items:center;gap:12px}
html[data-zg] .zgd-res .zgd-all{display:block}
html[data-zg] .zgd-t{flex:1;min-width:0}
html[data-zg] .zgd-c{flex:0 0 auto;display:block;width:48px;height:48px;border-radius:6px;object-fit:cover;background:#eceef1}
html[data-zg] .zgd-round{border-radius:50%}
html[data-zg] .zgd-poster{width:40px;height:60px}
html[data-zg] .zgd-wide{width:72px;height:48px}
html[data-zg] .zgd-logo{object-fit:contain;background:#fff;border:1px solid var(--zg-line)}

/* ── before going default (2026-10-25 audit, every page type at 375 and 1280) ──
   /mag rows: newsband.css paints a caption inside a cover white through four
   classes and an element; the row layout needs the same weight to win */
html[data-zg] .magrid .nwrtile .nwrcov .nwrcap span.nwrtt{color:var(--zg-ink);text-shadow:none}
html[data-zg] .magrid .nwrtile .nwrcov .nwrcap span.nwrts{color:var(--zg-mut);text-shadow:none}
/* the song page's queue was white on paper */
html[data-zg] .v3-light .song-flow h4{color:var(--zg-mut)}
html[data-zg] .v3-light .ir2-sd-row .tt{color:var(--zg-ink)}
html[data-zg] .v3-light .ir2-sd-row .ta{color:var(--zg-mut)}
html[data-zg] .v3-light .ir2-sd-row.on{background:rgba(231,200,115,.24)}
html[data-zg] .v3-light .ir2-sd-row.on .tt{color:#8a6a12}
/* the artist page's tool buttons were white on a 7% white wash */
html[data-zg] .v3-light .qpbtn{color:var(--zg-ink);background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.14)}
/* plain links and inline gold text on paper: the site gold is for dark grounds */
html[data-zg] .v3-light a:not([class]){color:#8a6a12}
html[data-zg] .v3-light [style^="color:var(--gold)"]{color:#8a6a12!important}
/* the phone radio widget is dark in every mode: its played-tracks ticker and
   artist line had taken the paper's dark ink */
html[data-zg] .vhw .vhw-a{color:rgba(255,255,255,.75)!important}
html[data-zg] .vhw .vhw-tick,html[data-zg] .vhw .vhw-tick i{color:rgba(255,255,255,.7)!important}
html[data-zg] .vhw .vhw-tick b{color:#fff!important}
html[data-zg] .v3-light .sgnews-all{color:#8a6a12}