/* PhysicsDNA: mistakes, answer writing and book components (enhanced by assets/js/enh/cards.js).
   Everything is prefixed pd-; colours come from the theme tokens. The answer-sheet "paper" and book covers are
   deliberately fixed colours (real paper / real covers) in both themes. */

.pd-content{--f-hand:"Caveat","Segoe Print","Bradley Hand",cursive}
.pd-sr{position:absolute!important;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.pd-eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pd-chip{font-family:var(--f-mono);font-size:.7rem;padding:4px 10px;border-radius:999px;background:var(--sunk);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap;line-height:1.4}
.pd-ok{color:var(--good);font-weight:600}
.pd-no{color:var(--bad);font-weight:600}
.pd-content [data-pd-ready] button{font:inherit;cursor:pointer}

/* small buttons and pills used inside components */
.pd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:999px;font:inherit;font-weight:600;font-size:.88rem;line-height:1.3;border:1px solid transparent;text-decoration:none!important;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,color .2s;text-align:center}
.pd-btn:hover{transform:translateY(-1px)}
.pd-btn-primary{background:var(--accent);color:var(--accent-ink)}
.pd-btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.pd-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.pd-btn-gold,.pd-content a.pd-btn-gold{background:var(--t-book);color:#1A1205;padding:12px 18px;font-size:.93rem}
.pd-btn-sm{padding:7px 13px;font-size:.84rem}
.pd-pills{display:flex;flex-wrap:wrap;gap:6px}
.pd-pills button{padding:7px 13px;border-radius:999px;border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--muted);background:var(--surface);line-height:1.3}
.pd-pills button:hover{border-color:var(--accent)}
.pd-pills button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* ================= MISTAKE CARD ================= */
.pd-content .pd-mistake{border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden;scroll-margin-top:96px;padding:0}
.pd-content .pd-mistake:not(.pd-mk){padding:18px 22px;display:grid;gap:10px}
.pd-content .pd-mistake:not(.pd-mk) .pd-m-wrong{font-family:var(--f-hand);font-size:1.3rem}
.pd-content .pd-mk > *{margin:0}
.pd-content .pd-mk[hidden]{display:none}
.pd-mk + .pd-mk,.pd-content .pd-mk + .pd-mk{margin-top:22px}
.pd-mk-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:20px 22px 16px;align-items:start}
.pd-mk-no{font-family:var(--f-display);font-size:2.6rem;line-height:.9;color:var(--t-mistake);font-style:italic}
.pd-content .pd-mk .pd-mk-title{font-size:1.35rem;line-height:1.25;margin:0;padding:0}
.pd-mk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.pd-mk-risk{font-family:var(--f-mono);font-size:.68rem;padding:3px 9px;border-radius:999px;background:var(--bad-soft);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);line-height:1.5}
.pd-mk-freq{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.68rem;color:var(--muted)}
.pd-mk-bars{display:inline-flex;gap:3px}
.pd-mk-bars i{width:6px;height:12px;border-radius:2px;background:var(--line)}
.pd-mk-bars i.on{background:var(--t-mistake)}
.pd-mk-vs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pd-mk-vs.is-one{grid-template-columns:1fr}
.pd-mk-vs > div{padding:18px 22px;display:grid;gap:10px;align-content:start;min-width:0}
.pd-mk-wrong{background:color-mix(in srgb,var(--bad-soft) 60%,var(--surface));border-right:1px solid var(--line)}
.pd-mk-right{background:color-mix(in srgb,var(--good-soft) 60%,var(--surface))}
.pd-mk-lab{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.pd-mk-wrong .pd-mk-lab{color:var(--bad)}
.pd-mk-right .pd-mk-lab{color:var(--good)}
.pd-mk-hand{font-family:var(--f-hand);font-size:1.4rem;line-height:1.35;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.pd-content .pd-mk-hand > *,.pd-content .pd-mk-body > *{margin:0;max-width:none}
.pd-mk-hand s,.pd-mk-hand del{text-decoration-color:var(--bad);text-decoration-thickness:2px}
.pd-mk-body{display:grid;gap:8px;font-size:.97rem;color:var(--ink);min-width:0}
.pd-mk-body mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;max-width:100%;margin:.4em 0!important}
.pd-mk-extra{padding:16px 22px;border-top:1px solid var(--line);display:grid;gap:10px}
.pd-content .pd-mk-extra > *{margin:0}
.pd-mk-why{padding:16px 22px;border-top:1px solid var(--line);display:grid;gap:6px;font-size:.96rem}
.pd-content .pd-mk-why p{margin:0}
.pd-mk-t{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pd-content .pd-mk .pd-mk-rule{margin:0 22px 18px;border-radius:14px;background:var(--band);color:var(--band-ink);padding:14px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.pd-mk-ic{width:32px;height:32px;border-radius:50%;background:var(--signal);color:#1A1205;display:grid;place-items:center;font-weight:700}
.pd-content .pd-mk-rule p{font-size:.98rem;color:var(--band-ink);margin:0}
.pd-mk-rule mjx-container{color:var(--band-ink)!important}
.pd-mk-chk{border-top:1px dashed var(--line);padding:16px 22px;display:grid;gap:10px}
.pd-content .pd-mk-chk p{margin:0}
.pd-mk-q{color:var(--ink);font-weight:500}
.pd-mk-opts{display:flex;flex-wrap:wrap;gap:8px}
.pd-mk-o{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:.92rem;line-height:1.4;text-align:left}
.pd-mk-o:hover:not([disabled]){border-color:var(--accent)}
.pd-mk-o[disabled]{cursor:default}
.pd-mk-o.is-right{border-color:var(--good);background:var(--good-soft);color:var(--good);font-weight:600}
.pd-mk-o.is-wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.pd-mk-res{font-size:.9rem}
.pd-mk-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 22px;border-top:1px solid var(--line);background:var(--tint)}
.pd-mk-flag{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.85rem;font-weight:600;color:var(--ink-2);line-height:1.3}
.pd-mk-flag:hover{border-color:var(--t-mistake)}
.pd-mk-flag[aria-pressed="true"]{border-color:var(--t-mistake);color:var(--t-mistake);background:var(--bad-soft)}
.pd-content .pd-mk-more{margin:0;font-size:.85rem}
.pd-content .pd-mk-more a{color:var(--accent);font-weight:600;text-decoration:none!important}
@media (max-width:680px){
  .pd-mk-vs{grid-template-columns:1fr}
  .pd-mk-wrong{border-right:0;border-bottom:1px solid var(--line)}
  .pd-mk-head,.pd-mk-vs > div,.pd-mk-why,.pd-mk-chk,.pd-mk-extra{padding-left:18px;padding-right:18px}
  .pd-content .pd-mk .pd-mk-rule{margin-left:18px;margin-right:18px}
  .pd-mk-foot{padding-left:18px;padding-right:18px}
}

/* filter + my list */
.pd-mk-filter{display:flex;justify-content:space-between;align-items:center;gap:10px 12px;flex-wrap:wrap}
.pd-mylist{border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:12px;background:var(--tint);scroll-margin-top:96px}
.pd-mylist-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pd-mylist-top b{color:var(--ink);font-family:var(--f-display);font-weight:500;font-size:1.25rem;line-height:1.25}
.pd-mylist-count{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.pd-meter{display:flex;gap:4px}
.pd-meter i{flex:1;height:8px;border-radius:9px;background:var(--line)}
.pd-meter i.on{background:var(--t-mistake)}
.pd-content .pd-mylist ul.pd-mylist-ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pd-content .pd-mylist-ul li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.93rem;margin:0;line-height:1.55}
.pd-content .pd-mylist-ul li::marker{content:none}
.pd-content .pd-mylist-ul a{text-decoration:none!important;color:var(--ink)!important}
.pd-mylist-ul a:hover b{color:var(--accent)}
.pd-mylist-rule{display:block;color:var(--muted)}
.pd-mylist-n{font-family:var(--f-display);font-style:italic;color:var(--t-mistake);font-size:1.3rem;line-height:1}
.pd-content .pd-mylist-ul li.pd-mylist-empty{display:block;color:var(--muted)}
.pd-mylist-act{display:flex;gap:10px;flex-wrap:wrap}

/* ================= SPOT THE MISTAKE ================= */
.pd-content .pd-spot{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);padding:0}
.pd-content .pd-spot:not(.pd-spot-on){padding:16px 20px}
.pd-content .pd-spot-on > *{margin:0}
.pd-spot-head{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--tint);display:grid;gap:6px}
.pd-content .pd-spot-head > *{margin:0}
.pd-content .pd-spot-head .pd-spot-q{color:var(--ink);font-size:1.02rem;font-weight:600;line-height:1.5}
.pd-content .pd-spot-head .pd-spot-sub{font-size:.9rem;color:var(--muted)}
.pd-spot-sheet{padding:18px 20px 18px 56px;position:relative;background-color:var(--surface);background-image:repeating-linear-gradient(transparent 0 39px,color-mix(in srgb,var(--accent) 12%,transparent) 39px 40px);display:grid}
.pd-spot-sheet::before{content:"";position:absolute;left:40px;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--bad) 35%,transparent)}
.pd-content button.pd-spot-line{display:block;width:100%;text-align:left;font-family:var(--f-hand);font-size:1.45rem;line-height:40px;min-height:40px;color:var(--ink);padding:0 10px;border:0;border-radius:8px;position:relative;background:none;transition:background .15s;overflow-wrap:anywhere}
.pd-spot-line:hover:not([disabled]){background:var(--accent-soft)}
.pd-spot-line[disabled]{cursor:default}
.pd-spot-ln{position:absolute;left:-40px;top:0;font-family:var(--f-mono);font-size:.7rem;color:var(--muted);width:28px;text-align:center}
.pd-spot-line.is-bad{background:var(--bad-soft);text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:2px}
.pd-spot-line.is-miss{background:var(--signal-soft)}
.pd-spot-foot{padding:16px 20px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:.95rem}
.pd-content .pd-spot-foot p,.pd-content .pd-spot-ex > *{margin:0}
.pd-spot-hint{color:var(--muted)}
.pd-spot-ex{display:grid;gap:8px}
.pd-spot-again{justify-self:start}
@media (max-width:520px){
  .pd-spot-sheet{padding-left:44px;padding-right:12px}
  .pd-spot-sheet::before{left:32px}
  .pd-spot-ln{left:-36px}
  .pd-content button.pd-spot-line{font-size:1.3rem}
}

/* ================= ANSWER SHEET ================= */
.pd-content .pd-answer-sheet{padding:0}
.pd-content .pd-answer-sheet:not(.pd-as-on){border:1px solid var(--line);border-radius:20px;padding:16px 20px}
.pd-content .pd-as-on > *{margin:0}
.pd-as{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}
.pd-as-q{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:16px 18px;border-bottom:1px solid var(--line)}
.pd-as-qn{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);padding-top:4px}
.pd-content .pd-as-q p{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.6}
.pd-as-mk{font-family:var(--f-mono);font-size:.76rem;padding:4px 10px;border-radius:8px;border:1px solid var(--line);white-space:nowrap;color:var(--ink)}
.pd-as-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:var(--tint);border-bottom:1px solid var(--line)}
.pd-seg{display:flex;gap:4px;padding:4px;background:var(--sunk);border:1px solid var(--line);border-radius:999px;max-width:100%}
.pd-seg button{white-space:nowrap;padding:6px 13px;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--muted);background:none;border:0;line-height:1.35}
.pd-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pd-switch{display:inline-flex;align-items:center;gap:10px;font-size:.85rem;font-weight:500;color:var(--ink);cursor:pointer;margin:0}
.pd-switch input{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;transition:background .2s;margin:0;flex:none}
.pd-switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.pd-switch input:checked{background:var(--bad)}
.pd-switch input:checked::after{transform:translateX(16px)}
.pd-as-paper{position:relative;background-color:#FFFEFA;color:#1D2A44;background-image:repeating-linear-gradient(transparent 0 35px,#DCE6F2 35px 36px);padding:18px 92px 18px 54px;min-height:240px}
.pd-as-paper::before{content:"";position:absolute;left:38px;top:0;bottom:0;width:1px;background:#E8A9A4}
.pd-as-paper::after{content:"";position:absolute;right:76px;top:0;bottom:0;width:1px;background:#E8A9A4}
.pd-as-l{position:relative;font-family:var(--f-hand);font-size:1.38rem;line-height:36px;min-height:36px;color:#1D2A44;overflow-wrap:anywhere}
.pd-as-l a{color:#2453D6}
.pd-as-l.is-eq{font-family:var(--f-body);font-size:1rem;padding:4px 0;line-height:1.6}
.pd-as-l mjx-container{color:#1D2A44!important}
.pd-as-l mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;max-width:100%;margin:.3em 0!important}
.pd-as-l.is-fig{padding:6px 0;line-height:1.4}
.pd-as-l.is-fig svg,.pd-as-l.is-fig img{width:100%;max-width:330px;height:auto;display:block}
.pd-as-l.is-fig figure{margin:0}
.pd-as-l.is-fig figcaption{font-family:var(--f-hand);font-size:1.1rem;color:#1D2A44;text-align:left;margin:4px 0 0}
.pd-as-l.is-miss{color:#8A95A8}
.pd-as-mm{position:absolute;right:-84px;top:4px;width:64px;text-align:center;font-family:var(--f-hand);font-size:1.35rem;color:#C2413A;font-weight:600;line-height:1.1;opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s}
.pd-as-note{display:block;font-family:var(--f-hand);font-size:1.15rem;color:#C2413A;line-height:1.25;margin:2px 0 4px;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .3s}
.pd-as.is-pen .pd-as-mm{opacity:1;transform:none}
.pd-as.is-pen .pd-as-note{max-height:90px;opacity:1}
.pd-as-total{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--tint)}
.pd-as-stamp{font-family:var(--f-hand);font-size:1.6rem;color:var(--bad);font-weight:600;line-height:1;border:2px solid var(--bad);border-radius:50%;width:70px;height:70px;display:grid;place-items:center;transform:rotate(-8deg);opacity:.25;transition:opacity .3s;flex:none;white-space:nowrap}
.pd-as.is-pen .pd-as-stamp{opacity:1}
.pd-as-vd{flex:1;min-width:200px;font-size:.92rem}
.pd-content .pd-as-vd p{margin:0}
@media (max-width:560px){
  .pd-as-paper{padding:14px 62px 14px 34px}
  .pd-as-paper::before{left:22px}
  .pd-as-paper::after{right:52px}
  .pd-as-mm{right:-60px;width:52px;font-size:1.15rem}
  .pd-as-l{font-size:1.25rem}
  .pd-seg button{padding:6px 10px;font-size:.8rem}
  .pd-as-q{grid-template-columns:auto minmax(0,1fr)}
  .pd-as-mk{grid-column:2;justify-self:start}
  .pd-as-vd{min-width:0;flex-basis:160px}
}

/* ================= MARKS SPLIT ================= */
.pd-split{border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:12px;background:var(--surface)}
.pd-split-bar{display:flex;height:40px;border-radius:10px;overflow:hidden;gap:3px}
.pd-split-bar div{display:grid;place-items:center;color:var(--paper);font-size:.82rem;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden}
.pd-split-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;font-size:.9rem;line-height:1.45}
.pd-split-list div{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center}
.pd-split-list i{width:12px;height:12px;border-radius:3px}
.pd-split-list b,.pd-split-total b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}
.pd-split-total{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed var(--line);padding-top:10px;font-size:.88rem;color:var(--muted)}
@media (max-width:560px){.pd-split-list{grid-template-columns:1fr}}

/* ================= SELF-GRADE ================= */
.pd-grade{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.pd-gr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.97rem;line-height:1.5;margin:0}
.pd-gr:hover{background:var(--tint)}
.pd-gr input{width:18px;height:18px;accent-color:var(--t-answer);margin:0}
.pd-gr em{font-style:normal;font-family:var(--f-mono);font-size:.78rem;color:var(--t-answer)}
.pd-gres{padding:16px 18px;background:var(--tint);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.pd-gres-big{font-family:var(--f-display);font-size:2.2rem;color:var(--ink);line-height:1;font-weight:500;white-space:nowrap}
.pd-gres-big small{font-size:1rem;color:var(--muted)}
.pd-content .pd-gres p{font-size:.92rem;margin:0}

/* ================= BOOK CARD ================= */
.pd-content .pd-book{border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);padding:clamp(18px,3vw,28px)}
.pd-content .pd-book:not(.pd-bk){display:grid;gap:10px}
.pd-content .pd-bk{container-type:inline-size}
.pd-content .pd-bk > *{margin:0}
.pd-bk-in{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px 26px;align-items:center}
.pd-bk.is-noside .pd-bk-in{grid-template-columns:150px minmax(0,1fr)}
.pd-bk-c3d{perspective:800px;display:grid;place-items:center}
.pd-bk-cover{--bc:#24418F;width:150px;max-width:100%;aspect-ratio:3/4.1;border-radius:4px 10px 10px 4px;background:linear-gradient(135deg,var(--bc),color-mix(in srgb,var(--bc) 70%,#000));color:#fff;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 8px 0 0 rgba(0,0,0,.2),0 22px 30px -16px rgba(20,33,61,.6);transform:rotateY(-14deg);transition:transform .5s;overflow:hidden}
.pd-bk-cover:hover{transform:rotateY(0)}
.pd-bk-cover small{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8;line-height:1.4}
.pd-bk-cover b{font-family:var(--f-display);font-weight:500;font-size:1.25rem;line-height:1.1;overflow-wrap:anywhere}
.pd-bk-cover span{font-size:.75rem;opacity:.85;line-height:1.3}
.pd-bk-cover.has-img{padding:0;background:var(--sunk)}
.pd-bk-cover.has-img img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.pd-bk-mid{display:grid;gap:12px;min-width:0;align-content:center}
.pd-content .pd-bk-mid > *{margin:0}
.pd-content .pd-bk .pd-bk-title{font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.15;margin:0}
.pd-bk-mid p{font-size:.95rem}
.pd-bk-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pd-bk-facts div{padding:9px 14px;display:grid;gap:1px;border-bottom:1px solid var(--line);min-width:0;line-height:1.4}
.pd-bk-facts div:nth-child(odd){border-right:1px solid var(--line)}
.pd-bk-facts div:nth-last-child(-n+2){border-bottom:0}
.pd-bk-facts.is-odd div:last-child{grid-column:1/-1;border-right:0}
.pd-bk-facts.is-odd div:nth-last-child(2){border-bottom:1px solid var(--line)}
.pd-bk-facts span{font-size:.72rem;color:var(--muted)}
.pd-bk-facts b{font-size:.93rem;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.pd-bk-side{display:grid;gap:10px;justify-items:center;text-align:center}
.pd-bk-ring{position:relative;width:118px;height:118px}
.pd-bk-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.pd-bk-arc{transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1)}
.pd-bk-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:2.2rem;color:var(--ink);font-weight:500;line-height:1}
.pd-bk-ring small{position:absolute;left:0;right:0;bottom:28px;font-family:var(--f-mono);font-size:.6rem;color:var(--muted)}
.pd-bk-buy{display:grid;gap:8px;width:100%;margin-top:4px}
.pd-bk-buy .pd-btn{width:100%}
.pd-content .pd-bk-disc{font-size:.72rem;color:var(--muted);line-height:1.45;margin:0}
/* default (article width): cover | details, verdict row underneath */
.pd-bk-side{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;align-items:center;gap:6px 20px;border-top:1px solid var(--line);padding-top:18px}
.pd-bk-side .pd-bk-ring{grid-row:span 2}
.pd-bk-side .pd-bk-vl{align-self:end}
.pd-bk-side .pd-bk-buy{display:flex;flex-wrap:wrap;gap:8px;align-self:start;margin:0}
.pd-bk-side .pd-bk-buy .pd-btn{width:auto}
.pd-bk-side .pd-bk-disc{flex-basis:100%}
@container (min-width:880px){
  .pd-bk-in{grid-template-columns:170px minmax(0,1fr) 220px}
  .pd-bk.is-noside .pd-bk-in{grid-template-columns:170px minmax(0,1fr)}
  .pd-bk-side{grid-column:auto;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;border-top:0;padding-top:0;gap:10px}
  .pd-bk-side .pd-bk-ring{grid-row:auto}
  .pd-bk-side .pd-bk-buy{display:grid;width:100%}
  .pd-bk-side .pd-bk-buy .pd-btn{width:100%}
}
@container (max-width:520px){
  .pd-bk-in,.pd-bk.is-noside .pd-bk-in{grid-template-columns:minmax(0,1fr)}
  .pd-bk-cover{transform:none;width:130px}
  .pd-bk-side{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .pd-bk-side .pd-bk-ring{grid-row:auto}
  .pd-bk-side .pd-bk-buy{display:grid;width:100%}
  .pd-bk-side .pd-bk-buy .pd-btn{width:100%}
}

/* ================= BUY / SKIP + PROS / CONS (CSS only, columns block) ================= */
.pd-content .wp-block-columns.pd-buyskip,.pd-content .wp-block-columns.pd-proscons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:0}
.pd-content .pd-buyskip > .wp-block-column,.pd-content .pd-proscons > .wp-block-column{border-radius:16px;padding:18px 20px;display:grid;gap:10px;align-content:start;margin:0!important;min-width:0}
.pd-content .pd-buyskip > .wp-block-column > *,.pd-content .pd-proscons > .wp-block-column > *{margin:0}
.pd-content .pd-buyskip > .wp-block-column:nth-child(odd){background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 30%,transparent)}
.pd-content .pd-buyskip > .wp-block-column:nth-child(even){background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent)}
.pd-content .pd-buyskip .wp-block-heading{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;line-height:1.4}
.pd-content .pd-buyskip > .wp-block-column:nth-child(odd) .wp-block-heading{color:var(--good)}
.pd-content .pd-buyskip > .wp-block-column:nth-child(even) .wp-block-heading{color:var(--bad)}
.pd-content .pd-buyskip > .wp-block-column:nth-child(odd) .wp-block-heading::before{content:"✓ "}
.pd-content .pd-buyskip > .wp-block-column:nth-child(even) .wp-block-heading::before{content:"✗ "}
.pd-content .pd-buyskip ul{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:.96rem;color:var(--ink)}
.pd-content .pd-buyskip li{margin:0}
.pd-content .pd-proscons > .wp-block-column{border:1px solid var(--line);background:var(--surface)}
.pd-content .pd-proscons .wp-block-heading{font-family:var(--f-body);font-size:1rem;font-weight:700;line-height:1.4}
.pd-content .pd-proscons > .wp-block-column:nth-child(odd) .wp-block-heading{color:var(--good)}
.pd-content .pd-proscons > .wp-block-column:nth-child(even) .wp-block-heading{color:var(--bad)}
.pd-content .pd-proscons ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.95rem}
.pd-content .pd-proscons li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;margin:0}
.pd-content .pd-proscons li::before{font-weight:700;font-family:var(--f-mono)}
.pd-content .pd-proscons > .wp-block-column:nth-child(odd) li::before{content:"+";color:var(--good)}
.pd-content .pd-proscons > .wp-block-column:nth-child(even) li::before{content:"−";color:var(--bad)}
@media (max-width:620px){.pd-content .wp-block-columns.pd-buyskip,.pd-content .wp-block-columns.pd-proscons{grid-template-columns:minmax(0,1fr)}}

/* ================= SCORE BARS ================= */
.pd-scores{display:grid;gap:12px;border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--surface)}
.pd-sc-row{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) 46px;gap:14px;align-items:center;font-size:.92rem;line-height:1.4}
.pd-sc-row > span{color:var(--ink-2)}
.pd-sc-bar{height:10px;border-radius:9px;background:var(--line);overflow:hidden}
.pd-sc-bar i{display:block;height:100%;border-radius:9px;background:var(--t-book);width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pd-sc-row b{font-family:var(--f-mono);font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:520px){.pd-sc-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.pd-sc-row .pd-sc-bar{grid-column:1/-1;grid-row:2}}

/* ================= TABLES: compare + chapter guide ================= */
.pd-content figure.pd-compare,.pd-content figure.pd-chapter-guide{position:relative;border:1px solid var(--line);border-radius:18px;overflow-x:auto;margin-left:0;margin-right:0;background:var(--surface)}
.pd-content .pd-compare table,.pd-content .pd-chapter-guide table{width:100%;border-collapse:collapse;table-layout:auto;font-size:.92rem;line-height:1.5;margin:0;border:0}
.pd-content .pd-compare table{min-width:560px}
.pd-content .pd-chapter-guide table{min-width:500px}
.pd-content .pd-compare th,.pd-content .pd-compare td,.pd-content .pd-chapter-guide th,.pd-content .pd-chapter-guide td{padding:12px 14px;border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pd-content .pd-compare thead th,.pd-content .pd-compare .pd-thead-row > *{background:var(--tint);font-weight:600;color:var(--ink);font-size:.88rem;white-space:nowrap}
.pd-content .pd-compare thead th:first-child,.pd-content .pd-compare .pd-thead-row > :first-child{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pd-content .pd-compare thead,.pd-content .pd-chapter-guide thead{border:0}
.pd-cmp-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:1px}
.pd-content .pd-compare .pd-cmp-rowh{font-weight:500;color:var(--ink-2);width:26%}
.pd-content .pd-compare tbody tr:last-child > *{border-bottom:0}
.pd-content .pd-compare td.pd-win{background:color-mix(in srgb,var(--signal-soft) 80%,var(--surface));color:var(--ink);font-weight:600}
.pd-content .pd-compare td.pd-win .pd-star{color:var(--signal)}
.pd-content .pd-compare td small,.pd-content .pd-chapter-guide td small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.pd-content .pd-compare tbody tr:hover > *{background-color:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
.pd-content .pd-compare figcaption.pd-cmp-note{margin:0;padding:10px 14px;border-top:1px solid var(--line);background:var(--tint);font-size:.82rem;color:var(--muted);text-align:left;position:sticky;left:0}
.pd-cmp-note span{color:var(--signal)}

.pd-cg-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center}
.pd-content .pd-cg-bar p{margin:0;font-size:.95rem}
.pd-content .pd-cg-bar + figure.pd-chapter-guide{margin-top:12px}
.pd-content .pd-chapter-guide thead th,.pd-content .pd-chapter-guide .pd-thead-row > *{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--tint);white-space:nowrap}
.pd-content .pd-chapter-guide tbody tr:last-child > *{border-bottom:0}
.pd-content .pd-chapter-guide tr[hidden]{display:none}
.pd-content .pd-chapter-guide td.pd-cg-no{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);width:44px}
.pd-content .pd-chapter-guide td.pd-cg-n{color:var(--ink);font-weight:500}
.pd-content .pd-chapter-guide .pd-cg-off{display:none}
.pd-tag{font-family:var(--f-mono);font-size:.68rem;padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid;display:inline-block;line-height:1.5}
.pd-tag-must{color:var(--good);background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.pd-tag-opt{color:var(--signal);background:var(--signal-soft);border-color:color-mix(in srgb,var(--signal) 35%,transparent)}
.pd-tag-skip{color:var(--muted);background:var(--sunk);border-color:var(--line)}
.pd-cg-more{padding:10px 14px;text-align:center;border-top:1px solid var(--line);background:var(--tint);position:sticky;left:0}
.pd-cg-more button{color:var(--accent);font-weight:600;font-size:.88rem;background:none;border:0}