/* Posts: the tab, the post room and the team board (studio/posts.js, SOCIAL.md "Posts"). Tokens and parts from ds.css. */

/* ---------- the Posts tab ---------- */
.po-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap}
.po-h1{margin-top:var(--sp-4)}
.po-lead{margin-top:var(--sp-3);max-width:600px}
.po-eye{display:inline-flex;align-items:center;gap:6px;font-family:var(--wide);font-stretch:115%;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-2xs);color:var(--c-mute);margin:0}
.po-eye svg{width:14px;height:14px}
.po-sub{font-size:var(--fs-xs);color:var(--c-mute);line-height:1.45}
.po-sub .so-pi{width:20px;height:20px;border-radius:30%;vertical-align:middle;margin-right:4px}
.po-sub .so-pi svg{width:12px;height:12px}

.po-accts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6)}
.po-acct{display:inline-flex;align-items:center;gap:var(--sp-2);padding:6px 14px 6px 6px;border:1px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-surface);font:inherit;color:inherit;cursor:pointer;text-align:left}
.po-acct:hover{border-color:var(--c-border-hover)}
.po-acct .so-pi{width:30px;height:30px;border-radius:50%}
.po-at{display:flex;flex-direction:column;line-height:1.2}
.po-at b{font-size:var(--fs-sm);color:var(--c-strong)}
.po-at span{font-size:var(--fs-2xs);color:var(--c-mute);font-weight:650}
.po-acct.attention{border-color:var(--c-bad);background:var(--c-bad-soft)}
.po-acct.attention .po-at span{color:var(--c-bad-ink)}
.po-acct.none .po-at b{color:var(--c-accent)}

.po-tabs{display:flex;gap:var(--sp-1);margin-top:var(--sp-7);padding:var(--sp-1);background:var(--c-sunk);border-radius:var(--r-lg);overflow-x:auto;scrollbar-width:none}
.po-tabs::-webkit-scrollbar{display:none}
.po-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--ctl-md);padding:0 var(--sp-4);border:0;border-radius:var(--r-md);background:none;font:inherit;font-weight:700;font-size:var(--fs-sm);color:var(--c-text-2);cursor:pointer;white-space:nowrap}
.po-tab svg{width:18px;height:18px}
.po-tab .so-pi{width:24px;height:24px;background:none}
.po-tab.on{background:var(--c-surface);color:var(--c-strong);box-shadow:var(--sh-0)}
.po-n{font-size:var(--fs-2xs);font-weight:750;padding:1px 7px;border-radius:var(--r-pill);background:var(--c-surface-2);color:var(--c-mute)}
.po-tab.on .po-n{background:var(--c-strong);color:var(--c-on-dark)}

.po-look{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.po-fail{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--c-bad-soft);color:var(--c-bad-ink);font-size:var(--fs-sm)}
.po-fail>svg{width:20px;height:20px;flex:none}
.po-fail .po-sub{color:var(--c-bad-ink)}
.po-lined{display:flex;flex-direction:column;gap:var(--sp-2)}
.po-rail{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-1)}
.po-mini{display:flex;align-items:center;gap:var(--sp-3);flex:none;width:260px;padding:var(--sp-2);border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);font:inherit;color:inherit;text-align:left;cursor:pointer}
.po-mini b{display:block;font-size:var(--fs-sm);color:var(--c-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.po-tools{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.po-stats{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);color:var(--c-mute)}
.po-stats b{color:var(--c-strong);font-size:var(--fs-md)}
.po-ctl{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.po-ctl .ds-select,.po-ctl .ds-input{width:auto}
.po-seg{display:inline-flex;padding:3px;border:1px solid var(--c-border-2);border-radius:var(--r-sm);background:var(--c-surface)}
.po-seg button{display:grid;place-items:center;width:32px;height:28px;border:0;border-radius:var(--r-xs);background:none;color:var(--c-mute);cursor:pointer}
.po-seg button svg{width:16px;height:16px}
.po-seg button.on{background:var(--c-strong);color:var(--c-on-dark)}

/* the wall: phone-shaped cards */
.po-wall{display:grid;gap:var(--sp-5) var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:var(--sp-5)}
.po-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.po-frame{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;background:var(--c-strong);box-shadow:var(--sh-1);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.po-card:hover .po-frame,.po-card:focus-visible .po-frame{transform:translateY(-3px);box-shadow:var(--sh-2)}
.po-card:focus-visible{outline:none}.po-card:focus-visible .po-frame{outline:3px solid var(--c-accent);outline-offset:3px}
.po-img,.po-hov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.po-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-on-dark-2)}
.po-ph svg{width:36px;height:36px}
.po-frame::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(to top,color-mix(in srgb,var(--c-strong) 88%,transparent),transparent);pointer-events:none}
.po-badges{position:absolute;top:var(--sp-3);left:var(--sp-3);display:flex;gap:4px;z-index:1}
.po-badges .so-pi{width:28px;height:28px;border-radius:50%;background:var(--c-surface);box-shadow:var(--sh-0)}
.po-badges .so-pi svg{width:15px;height:15px}
.po-flag{position:absolute;top:var(--sp-3);right:var(--sp-3);z-index:1;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-strong);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.02em}
.po-flag.top{background:var(--c-mark)}
.po-flag svg{width:12px;height:12px}
.po-big{position:absolute;left:var(--sp-4);bottom:var(--sp-3);z-index:1;display:flex;align-items:baseline;gap:6px;color:var(--c-on-dark)}
.po-big b{font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:var(--fs-2xl);letter-spacing:-.02em;line-height:1}
.po-big span{font-size:var(--fs-xs);font-weight:700;color:var(--c-on-dark-2)}
.po-body{display:flex;flex-direction:column;gap:6px;padding:0 var(--sp-1)}
.po-title{font-size:var(--fs-sm);color:var(--c-strong);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.po-meta{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);color:var(--c-text-2);font-weight:650}
.po-meta span{display:inline-flex;align-items:center;gap:3px}
.po-meta svg{width:14px;height:14px;color:var(--c-mute)}
.po-day{margin-left:auto;color:var(--c-mute);font-weight:600}
.po-split{display:flex;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-2xs);font-weight:750;color:var(--c-text-2)}
.po-split span{display:inline-flex;align-items:center;gap:3px}
.po-split .so-pi{width:18px;height:18px;border-radius:30%}
.po-split .so-pi svg{width:11px;height:11px}
.po-times{font-size:var(--fs-2xs);font-weight:750;color:var(--c-mute)}
.po-times.up{color:var(--c-ok)}
.po-more{display:flex;justify-content:center;margin-top:var(--sp-7)}

/* the list and the team table */
.po-tablewrap{padding:0;overflow:auto;margin-top:var(--sp-5)}
.po-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.po-table th{position:sticky;top:0;background:var(--c-surface);text-align:right;padding:var(--sp-3);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--c-mute);border-bottom:1px solid var(--c-border);white-space:nowrap}
.po-table th:first-child,.po-table td:first-child{text-align:left}
.po-table td{padding:var(--sp-3);border-bottom:1px solid var(--c-border);text-align:right;white-space:nowrap;color:var(--c-text-2)}
.po-table td b{color:var(--c-strong)}
.po-table tbody tr{cursor:pointer}
.po-table tbody tr:hover,.po-table tbody tr:focus-visible{background:var(--c-surface-2);outline:none}
.po-table td:nth-child(2) .so-pi,.po-table td:nth-child(3) .so-pi{width:28px;height:28px}
.po-th{border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}
.po-th.on{color:var(--c-strong)}
.po-cell{display:flex;align-items:center;gap:var(--sp-3);min-width:240px;white-space:normal}
.po-cell b{display:block;color:var(--c-strong)}
.po-tag{display:inline-block;padding:0 7px;border-radius:var(--r-pill);background:var(--c-mark);color:var(--c-strong);font-size:var(--fs-2xs);font-weight:800}
.po-err{display:block;max-width:240px;white-space:normal;color:var(--c-bad-ink)}
.po-hi{color:var(--c-ok);font-weight:800}

/* ---------- the post room ---------- */
body.po-open{overflow:hidden}
.po-room{position:fixed;inset:0;z-index:90;overflow-y:auto;background:var(--c-strong);color:var(--c-on-dark)}
.po-rwrap{max-width:1280px;margin:0 auto;padding:0 var(--sp-5) var(--sp-9)}
.po-rtop{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) 0;background:var(--c-strong)}
.po-rtt{display:flex;flex-direction:column;min-width:0}
.po-rtt b{font-size:var(--fs-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.po-rtt span{font-size:var(--fs-xs);color:var(--c-on-dark-2)}
.po-x,.po-nav{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid var(--c-dark-line);border-radius:50%;background:var(--c-dark-2);color:var(--c-on-dark);cursor:pointer}
.po-x svg,.po-nav svg{width:20px;height:20px}
.po-nav:disabled{opacity:.35;cursor:default}
.po-x.dark{border-color:var(--c-border-2);background:var(--c-surface);color:var(--c-strong)}
.po-rload{padding:var(--sp-9) 0}
.po-rbody{display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.po-stage{position:sticky;top:84px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.po-phone{position:relative;width:100%;aspect-ratio:9/16;max-height:calc(100vh - 170px);border-radius:var(--r-2xl);overflow:hidden;background:var(--c-dark-2);border:6px solid var(--c-dark-2);box-shadow:var(--sh-2)}
.po-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--c-dark-2)}
.po-ov{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-8) var(--sp-4) 52px;background:linear-gradient(to top,color-mix(in srgb,var(--c-strong) 80%,transparent),transparent);pointer-events:none}
.po-ovh{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}
.po-ovh .so-pi{width:26px;height:26px;border-radius:50%;background:var(--c-surface)}
.po-ovh .so-pi svg{width:14px;height:14px}
.po-phone.playing .po-ov{opacity:0;transition:opacity var(--t-fast)}
.po-ov p{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);line-height:1.4;color:var(--c-on-dark);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.po-stageacts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
.po-stageacts .btn{gap:6px}
.po-stageacts .so-pi{width:22px;height:22px;background:none}
.po-stageacts svg{width:15px;height:15px}

.po-side{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.po-rtabs{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.po-rtabs button{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--ctl-md);padding:0 var(--sp-4);border:1px solid var(--c-dark-line);border-radius:var(--r-pill);background:var(--c-dark-2);color:var(--c-on-dark-2);font:inherit;font-weight:700;font-size:var(--fs-sm);cursor:pointer}
.po-rtabs button .so-pi{width:24px;height:24px;border-radius:50%;background:var(--c-surface)}
.po-rtabs button .so-pi svg{width:13px;height:13px}
.po-rtabs button .num{font-weight:800;color:var(--c-on-dark)}
.po-rtabs button.on{background:var(--c-mark);border-color:var(--c-mark);color:var(--c-strong)}
.po-rtabs button.on .num{color:var(--c-strong)}
.po-rstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.po-rs{display:flex;flex-direction:column;gap:2px;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-dark-2);border:1px solid var(--c-dark-line)}
.po-rsi svg{width:18px;height:18px;color:var(--c-mark)}
.po-rs b{font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:var(--fs-2xl);line-height:1.1;letter-spacing:-.02em}
.po-rs span:last-child{font-size:var(--fs-xs);color:var(--c-on-dark-2);font-weight:650}
.po-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-2)}
.po-eng,.po-cmp{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-dark-2);border:1px solid var(--c-dark-line)}
.po-eng .po-eye,.po-cmp .po-eye{color:var(--c-on-dark-2)}
.po-eng .po-sub,.po-cmp .po-sub{color:var(--c-on-dark-2)}
.po-cmpt{margin:0;font-size:var(--fs-sm);color:var(--c-on-dark-2)}
.po-cmpt b{font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:var(--fs-xl);color:var(--c-on-dark);margin-right:4px}
.po-cbar{width:100%;height:10px;display:block}
.po-ctrack{fill:var(--c-dark-line)}
.po-cyou.s1{fill:var(--c-series-1)}.po-cyou.s2{fill:var(--c-series-2)}.po-cyou.s3{fill:var(--c-series-3)}.po-cyou.s4{fill:var(--c-series-4)}
.po-cmark{stroke:var(--c-mark);stroke-width:2}

/* light cards inside the dark room: the chart, the comments, the details */
.po-card2{padding:var(--sp-5);border-radius:var(--r-xl);background:var(--c-surface);color:var(--c-text)}
.po-card2 .po-eye{color:var(--c-mute)}
.po-chart{margin-top:var(--sp-1)}
.po-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.po-line.s1{stroke:var(--c-series-1)}.po-line.s2{stroke:var(--c-series-2)}.po-line.s3{stroke:var(--c-series-3)}.po-line.s4{stroke:var(--c-series-4)}
.po-dot{stroke:var(--c-surface);stroke-width:2}
.po-dot.s1{fill:var(--c-series-1)}.po-dot.s2{fill:var(--c-series-2)}.po-dot.s3{fill:var(--c-series-3)}.po-dot.s4{fill:var(--c-series-4)}
.po-chart .po-dl{fill:var(--c-text-2);font-size:12px;font-weight:700;font-family:var(--body)}
.po-cross{stroke:var(--c-border-2);stroke-width:1;stroke-dasharray:3 3}

.po-chd{justify-content:space-between}
.po-cf{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.po-cl2{display:flex;flex-direction:column;margin-top:var(--sp-3)}
.po-c{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--c-border)}
.po-c:first-child{border-top:0}
.po-c.reply{padding-left:var(--sp-9);border-top:0;padding-top:0}
.po-ch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:var(--fs-sm)}
.po-ch b{color:var(--c-strong)}
.po-ch .so-pi{width:20px;height:20px;border-radius:30%}
.po-ch .so-pi svg{width:12px;height:12px}
.po-you{padding:0 7px;border-radius:var(--r-pill);background:var(--c-accent-soft);color:var(--c-accent-ink);font-size:var(--fs-2xs);font-weight:800}
.po-ct{margin:4px 0 0;font-size:var(--fs-md);line-height:1.45;color:var(--c-text);overflow-wrap:anywhere}
.po-c.own .po-ct{color:var(--c-text-2)}
.po-cl{display:inline-flex;align-items:center;gap:3px;margin-top:4px}
.po-cl svg{width:12px;height:12px}
.po-none{margin:var(--sp-4) 0 0}
.po-reply{display:inline-flex;align-items:center;gap:4px;margin-top:var(--sp-3)}
.po-reply svg{width:14px;height:14px}
.po-det summary{cursor:pointer;font-weight:750;color:var(--c-strong)}
.po-dl{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-4) 0 0}
.po-dl div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--sp-3)}
.po-dl dt{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--c-strong);font-size:var(--fs-sm)}
.po-dl dt .so-pi{width:22px;height:22px;border-radius:30%}
.po-dl dd{margin:0;font-size:var(--fs-sm);color:var(--c-text-2)}
.po-cap{white-space:pre-wrap}
.po-mono{font-family:ui-monospace,monospace;font-size:var(--fs-2xs)}

/* questions people asked */
.po-qs{margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-xl);background:var(--c-accent-soft)}
.po-qs .po-eye{color:var(--c-accent-ink)}
.po-qs>.so-row{justify-content:space-between}
.po-qlist{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:var(--sp-3)}
.po-qi{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:0;border-radius:var(--r-lg);background:var(--c-surface);font:inherit;color:inherit;text-align:left;cursor:pointer;box-shadow:var(--sh-0)}
.po-qi:hover{box-shadow:var(--sh-1)}
.po-qt{display:block;font-size:var(--fs-sm);font-weight:650;color:var(--c-strong);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.po-go{color:var(--c-accent);font-weight:750;font-size:var(--fs-xs);flex:none}
.po-qnote{display:flex;gap:var(--sp-2);align-items:flex-start;margin-top:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-accent-soft);color:var(--c-accent-ink);font-size:var(--fs-xs);line-height:1.45}
.po-qnote svg{width:16px;height:16px;flex:none;margin-top:1px}
.po-q2{padding:0 7px;border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-on-dark);font-size:var(--fs-2xs);font-weight:800}
.po-q2.done{background:var(--c-ok-soft);color:var(--c-ok-ink)}

/* the best post */
.po-spot{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--sp-6);align-items:center;margin-top:var(--sp-5);padding:var(--sp-5);border-radius:var(--r-2xl);background:var(--c-strong);color:var(--c-on-dark)}
.po-spotf{position:relative;display:block;aspect-ratio:9/16;border:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--c-dark-2);cursor:pointer;box-shadow:0 0 0 3px var(--c-mark)}
.po-spott{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.po-spoth{font-size:clamp(24px,3vw,38px);color:var(--c-on-dark);margin:0;overflow-wrap:anywhere}
.po-spotn{margin:0;color:var(--c-on-dark-2);font-size:var(--fs-md)}
.po-spotn b{font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:var(--fs-2xl);color:var(--c-on-dark)}
.po-hi2{color:var(--c-mark);font-weight:800}
.po-split.lg{gap:var(--sp-4);font-size:var(--fs-sm);color:var(--c-on-dark-2)}
.po-split.lg svg{width:15px;height:15px}
.po-split.lg .so-pi{width:24px;height:24px;background:var(--c-surface)}
.po-split.lg .so-pi svg{width:13px;height:13px}

/* when posts do best: one hue, light to dark (sequential); empty cells sunk */
.po-heat{display:flex;flex-direction:column;gap:var(--sp-4)}
.po-heatl{margin:0;font-size:var(--fs-md);color:var(--c-text-2)}
.po-heatl b{color:var(--c-strong)}
.po-hgrid{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr));gap:4px;align-items:stretch}
.po-hh{font-size:var(--fs-2xs);font-weight:750;color:var(--c-mute);text-align:center;text-transform:uppercase;letter-spacing:.08em}
.po-hr{font-size:var(--fs-xs);font-weight:650;color:var(--c-text-2);padding-right:var(--sp-2);display:flex;align-items:center}
.po-hc{display:grid;place-items:center;min-height:40px;border-radius:var(--r-xs);font-size:var(--fs-2xs);font-weight:750;color:var(--c-strong)}
.po-hc.he{background:var(--c-surface-2)}
.po-hc.h0{background:color-mix(in srgb,var(--c-series-1) 10%,var(--c-surface))}
.po-hc.h1{background:color-mix(in srgb,var(--c-series-1) 24%,var(--c-surface))}
.po-hc.h2{background:color-mix(in srgb,var(--c-series-1) 42%,var(--c-surface))}
.po-hc.h3{background:color-mix(in srgb,var(--c-series-1) 66%,var(--c-surface));color:var(--c-on-dark)}
.po-hc.h4{background:var(--c-series-1);color:var(--c-on-dark)}
.po-hkey{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--c-mute)}
.po-hkey i.po-hc{min-height:12px;width:22px;display:inline-block}

/* ---------- the team board ---------- */
body.po-boardopen{overflow:hidden}
.po-page{position:fixed;inset:0;z-index:80;overflow-y:auto;background:var(--c-bg);padding:var(--sp-7) var(--sp-4) var(--sp-10)}
.po-bwrap{max-width:1280px;margin:0 auto}
.po-btop{display:flex;align-items:flex-start;gap:var(--sp-4)}
.pd-stats.po-bstats{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:var(--sp-6)}
.pd-stat.hot{border-color:var(--c-bad);background:var(--c-bad-soft)}
.pd-stat.hot .n{color:var(--c-bad-ink)}
.po-rec{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4)}
.po-btools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6)}
.po-btools .po-cf{margin:0}
.po-q{gap:6px}

@media (max-width:960px){
 .po-rbody{grid-template-columns:1fr;gap:var(--sp-5)}
 .po-stage{position:static}
 .po-phone{max-width:340px;max-height:62vh}
 .po-rtabs{position:sticky;top:74px;z-index:1;padding:var(--sp-2) 0;background:var(--c-strong)}
}
@media (max-width:640px){
 .po-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-3)}
 .po-big b{font-size:var(--fs-xl)}
 .po-meta .po-day{display:none}
 .po-rstats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .po-two{grid-template-columns:1fr}
 .po-rwrap{padding:0 var(--sp-4) var(--sp-9)}
 .po-c.reply{padding-left:var(--sp-7)}
 .po-on{display:none}
 .po-spot{grid-template-columns:96px minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-4)}
 .po-hc{min-height:32px;font-size:9px}
 .po-hr{font-size:10px}
 .po-dl div{grid-template-columns:1fr;gap:2px}
 .pd-stats.po-bstats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .po-tools{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.po-frame{transition:none}.po-card:hover .po-frame{transform:none}}