/* PiCiviQ — Article (prototype "DETAIL" + zoom). */
.detail-wrap{padding-block:20px 50px}
.ca-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
a.tag:hover{filter:brightness(.95)}
.tag.prem{background:var(--gold);color:#3a2a00}
.d-title{font-size:clamp(23px,4vw,34px);font-weight:800;letter-spacing:-.02em;max-width:28ch}
.d-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:12.5px;color:var(--faint);font-weight:600}
.d-meta b{color:var(--muted)}

/* share */
.sharebar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:13px 16px;margin:16px 0 4px}
.sharebar .sl{font-size:13px;font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:7px;margin-right:2px}
.sharebar .sl svg{width:16px;height:16px;color:var(--purple)}
.sbtn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer;text-decoration:none;transition:.12s;font-family:inherit}
.sbtn:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.sbtn.wa{color:#11743A}.sbtn.tg{color:#15709F}.sbtn.tw{color:var(--text)}.sbtn.fb{color:#1464D2}
:root[data-theme="dark"] .sbtn.wa{color:#3FD07A}:root[data-theme="dark"] .sbtn.tg{color:#5CC2F2}:root[data-theme="dark"] .sbtn.fb{color:#6AA6FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sbtn.wa{color:#3FD07A}:root:not([data-theme="light"]) .sbtn.tg{color:#5CC2F2}:root:not([data-theme="light"]) .sbtn.fb{color:#6AA6FF}}
.sbtn.brand{background:var(--grad);color:#fff;border-color:transparent}
.share-sep{width:1px;align-self:stretch;background:var(--border);margin-inline:2px}

/* layout: infographic left, panel right */
.d-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;margin-top:24px;align-items:start}
.no-figure .d-layout{grid-template-columns:minmax(0,860px)}
.d-figure{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;position:sticky;top:calc(var(--nav-h) + 14px)}
.admin-bar .d-figure{top:calc(var(--nav-h) + 46px)}
.d-figure figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}
.info-img{display:block;width:100%;padding:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);cursor:zoom-in;position:relative;font:inherit}
.info-img img{width:100%;height:auto;display:block}
.zoom-hint{display:block;background:var(--grad);color:#fff;font-size:13.5px;font-weight:700;padding:11px;text-align:center}
.d-col{min-width:0}

/* blocks */
.blk{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.blk-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.blk-ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff;font-size:16px}
.ic-delta{background:linear-gradient(135deg,var(--coral),var(--purple))}
.ic-find{background:linear-gradient(135deg,var(--indigo),var(--sky))}
.ic-trap{background:linear-gradient(135deg,var(--coral),#c0392b)}
.ic-take{background:linear-gradient(135deg,var(--purple),var(--indigo))}
.ic-rev{background:linear-gradient(135deg,var(--sky),var(--teal))}
.ic-360{background:var(--grad)}
.ic-src{background:linear-gradient(135deg,var(--sky),var(--muted))}
.blk-head h2{font-size:17px;font-weight:700}
.blk p{font-size:14.5px}
.blk .delta{background:var(--grad-soft);border-radius:12px;padding:15px 17px;font-size:14.5px}
.delta p{margin:0}.delta p+p{margin-top:8px}
.flist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.flist li{display:flex;gap:11px;font-size:14px}
.flist .n{width:24px;height:24px;border-radius:8px;background:var(--surface-2);color:var(--purple);font-weight:700;font-size:12px;display:grid;place-items:center;flex:none}
.flist b{font-weight:600}
.grid360{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v360{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px;border-top:3px solid var(--indigo)}
.v360.p{border-top-color:var(--purple)}.v360.m{border-top-color:var(--teal)}.v360.s{border-top-color:var(--sky)}.v360.g{border-top-color:var(--coral)}
.v360 h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:9px}
.v360 ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:6px}
.v360 li{font-size:13px}
.concept-body p{font-size:14.5px}.concept-body p+p{margin-top:10px}.concept-body b{font-weight:600}
.term{color:var(--purple);font-weight:600}

/* mcq */
.mcq .q{font-size:15px;font-weight:600;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.opt{display:flex;align-items:flex-start;gap:11px;text-align:left;width:100%;cursor:pointer;background:var(--surface-2);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text);transition:.12s;font:inherit}
.opt:hover{border-color:var(--border-strong)}
.opt .k{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--surface);border:1px solid var(--border-strong);color:var(--muted)}
.opt .t{font-size:14px;padding-top:2px}
.opt.correct{background:var(--good-bg);border-color:var(--good)}.opt.correct .k{background:var(--good-solid);border-color:var(--good-solid);color:#fff}
.opt.wrong{background:var(--trap-bg);border-color:var(--trap)}.opt.wrong .k{background:var(--trap);border-color:var(--trap);color:#fff}
.opts.done .opt{cursor:default}.opts.done .opt:not(.correct):not(.wrong){opacity:.6}
.verdict{margin-top:9px;font-size:13px;font-weight:600}
.verdict:empty{display:none}
.verdict.ok{color:var(--good-text)}.verdict.no{color:var(--trap)}
.traps{margin-top:15px;display:flex;flex-direction:column;gap:9px}
.traps[hidden]{display:none}
.traps h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--coral);margin:0}
.trow{display:flex;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--trap);border-radius:10px;padding:10px 12px}
.trow.ok{border-left-color:var(--good)}
.trow .tk{width:20px;height:20px;border-radius:6px;background:var(--trap);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.trow.ok .tk{background:var(--good-solid)}
.trow p{font-size:12.5px}

/* takeaways, revision, sources */
.take{display:flex;gap:10px;padding:10px 0}
.take .n{width:24px;height:24px;border-radius:8px;background:var(--grad);color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center;flex:none}
.take p{font-size:13.5px}
.take+.take{border-top:1px solid var(--border)}
.rev-track{display:flex;gap:8px;flex-wrap:wrap}
.rev-pill{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600}
.rev-pill .dot{width:18px;height:18px;border-radius:50%;background:var(--grad);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.rev-pill.due{border-color:var(--coral);color:color-mix(in srgb,var(--coral) 70%,var(--text))}
.blk .rev-note{font-size:12.5px;color:var(--muted);margin-top:12px}
.srclist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.srclist li{font-size:13px;color:var(--muted);display:flex;gap:9px}
.srclist li::before{content:"▪";color:var(--teal)}
.srclist a{color:var(--indigo)}

/* podcast + video */
.pod-block{background:linear-gradient(135deg,color-mix(in srgb,var(--purple) 12%,var(--surface)),color-mix(in srgb,var(--teal) 10%,var(--surface)));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.pod-block .pt,.vid-block .pt{display:flex;align-items:center;gap:11px}
.pod-block .pic{width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none}
.pod-block .pic svg,.vid-block .pic svg{width:20px;height:20px}
.pod-block .ph,.vid-block .ph{font-size:15px;font-weight:700}
.pod-block .psub,.vid-block .psub{font-size:12px;color:var(--muted);font-weight:600}
.pod-block audio{width:100%;margin-top:12px;height:40px}
.vid-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.vid-block .pic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--coral),var(--purple));color:#fff;display:grid;place-items:center;flex:none}
.lite-yt{position:relative;display:block;width:100%;margin-top:12px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9;cursor:pointer}
.lite-yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88}
.lite-yt-play{position:absolute;inset:0;margin:auto;width:68px;height:48px;border-radius:14px;background:#FF0000;color:#fff;display:grid;place-items:center}
.lite-yt-play svg{width:26px;height:26px}
.lite-yt:hover .lite-yt-play{filter:brightness(1.1)}
.vid-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;margin-top:12px;display:block}

/* zoom dialog */
.zoom-box{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(2,10,35,.94);color:#fff}
.zoom-box[open]{display:flex;flex-direction:column}
.zoom-box::backdrop{background:rgba(2,10,35,.6)}
.zoom-scroll{flex:1;overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 56px) 12px calc(env(safe-area-inset-bottom,0px) + 40px);text-align:center}
.zoom-scroll img{width:100%;max-width:1000px;height:auto;border-radius:8px;cursor:zoom-in;display:inline-block}
.zoom-scroll img.big{max-width:none;width:200%;cursor:zoom-out}
@media (min-width:900px){.zoom-scroll img.big{width:1600px}}
.zoom-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#02113B;font-size:18px;font-weight:700;cursor:pointer;z-index:2}
.zoom-tip{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);text-align:center;color:rgba(255,255,255,.75);font-size:12px;margin:0;pointer-events:none}
html.zoom-open{overflow:hidden}

@media (max-width:900px){
  .d-layout{grid-template-columns:1fr}
  .d-figure{position:static}
}
@media (max-width:560px){
  .grid360{grid-template-columns:1fr}
  .blk{padding:16px}
  .share-sep{display:none}
}
/* Reading progress: a thin brand line under the header (scroll-driven, no JS; skipped where unsupported) */
@supports (animation-timeline:scroll()){
  .single-current_affair .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);animation:pq-progress linear both;animation-timeline:scroll(root)}
  @keyframes pq-progress{to{transform:scaleX(1)}}
}