/* v6: session replay with Quanta beside it, Activity rows, the portal in the new design. Loaded last. */

/* ---------- media viewer: left shows the replay or an attachment, right keeps the chat */
.mleft{display:flex;min-width:0;min-height:0}
.mleft>.player{flex:1;min-width:0}
.mock-app{position:absolute;inset:0;display:grid;grid-template-rows:28px 1fr;background:var(--raised)}
.ma-bar{background:var(--fill);border-bottom:1px solid var(--line)}
.ma-b{padding:22px 24px;display:grid;gap:14px;align-content:start}
.ma-t{font-size:15px;font-weight:500}
.ma-row{display:flex;gap:8px;min-height:28px;align-items:center}
.ma-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--fill);font-size:12.5px}
.ma-none{color:var(--t3);font-size:12.5px}
.ma-count{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;color:var(--t2);justify-self:start;padding:6px 10px;border-radius:8px;background:var(--fill)}
.ma-count b{font-weight:500;color:var(--t1);font-size:14px}
.ma-count.bad{box-shadow:0 0 0 2px var(--red);background:var(--red-tint)}
.ma-btn{display:block;width:96px;height:28px;border-radius:7px;background:var(--red);opacity:.85;margin-top:4px}
.ma-cur{position:absolute;left:31%;top:52%}
.ma-ring{position:absolute;left:18px;top:118px;width:150px;height:44px;border-radius:12px;border:2px dashed var(--red);pointer-events:none}
.player .screen>div.flash{animation:sqflash .6s ease}
@keyframes sqflash{0%{box-shadow:0 0 0 3px var(--red)}100%{box-shadow:var(--sh-card)}}
.thumbs{display:flex;gap:8px}
.thumbs button{position:relative;width:96px;aspect-ratio:16/10;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line);flex:none}
.thumbs button .mock-app{transform:scale(.18);transform-origin:0 0;width:555%;height:555%}
.thumbs button.on{box-shadow:0 0 0 2px var(--t1)}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--t1);color:var(--sheet)}
.att{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px;gap:12px}
.att-h{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line)}
.att-h b{display:block;font-weight:500}.att-h small{color:var(--t3);font-size:12px}
.att-b{flex:1;margin:0;padding:14px 16px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line);font:12.5px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--t2);overflow:auto;white-space:pre}

/* Quanta inside the replay */
.sq{display:flex;flex-direction:column;min-height:0;flex:1;padding:10px 10px 8px;gap:8px}
.sq-ctx{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--t3);padding:2px 4px}
.sq-ctx .ico{flex:none;margin-top:1px}
.sq-thread{flex:1;min-height:0;overflow-y:auto;display:grid;gap:12px;align-content:start;padding:2px 4px}
.sq-q{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px}
.sq-q .av{width:24px;height:24px}
.sq-bq{display:grid;gap:8px;font-size:13px;line-height:1.55;color:var(--t1)}
.sq-bq>*{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
.sq-bq b{font-weight:500}
.sq-me{justify-self:end;max-width:85%;padding:8px 11px;border-radius:12px 12px 4px 12px;background:var(--fill);font-size:13px}
.sq-moments{display:grid;border-radius:10px;box-shadow:0 0 0 1px var(--line);background:var(--sheet);overflow:hidden}
.sq-m{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border-bottom:1px solid var(--line)}
.sq-m:last-child{border-bottom:0}
.sq-m b{display:block;font-weight:500;font-size:12.5px}.sq-m small{display:block;color:var(--t3);font-size:12px}
.sq-m.bad{background:var(--red-tint)}.sq-m.bad small{color:var(--red-ink)}
.sq-jump{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:6px;background:var(--fill);font:500 11.5px/1 inherit;font-variant-numeric:tabular-nums;color:var(--t1);vertical-align:middle}
.sq-jump:hover{background:var(--t1);color:var(--sheet)}
.sq-acts{display:flex;gap:6px;flex-wrap:wrap}
.sq-files{display:grid;gap:6px}
.sq-files button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;box-shadow:0 0 0 1px var(--line);background:var(--sheet);text-align:left;color:var(--t1)}
.sq-files button:hover{box-shadow:0 0 0 1px var(--line-2);background:var(--hover)}
.sq-files button.hl{box-shadow:0 0 0 1px var(--red)}
.sq-files .th{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:var(--fill);color:var(--t2);flex:none}
.sq-files b{display:block;font-weight:500;font-size:12.5px}.sq-files small{display:block;color:var(--t3);font-size:12px}
.sq-code{display:grid;gap:4px;padding:9px 11px;border-radius:9px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);font-size:11.5px}
.sq-code code{font-size:12px;white-space:pre-wrap;word-break:break-word}
.sq-draft{padding:10px 12px;border-radius:9px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);color:var(--t2)}
.sq-sugg{display:flex;gap:6px;flex-wrap:wrap}
.sq-sugg:empty{display:none}
.sq-sugg button{height:26px;padding:0 10px;border-radius:999px;box-shadow:0 0 0 1px var(--line-2);font-size:12px;color:var(--t2);background:var(--sheet)}
.sq-sugg button:hover{box-shadow:0 0 0 1px var(--red);color:var(--t1);background:var(--red-tint)}
.sq-form{display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--sheet);box-shadow:0 0 0 1px var(--line-2)}
.sq-form:focus-within{box-shadow:0 0 0 1px var(--t3)}
.sq-form textarea{flex:1;border:0;background:none;resize:none;padding:6px 0;font:inherit;font-size:13px;color:var(--t1);outline:0;max-height:120px}
.sq-note{font-size:11.5px;color:var(--t4);text-align:center}

/* ---------- Activity rows */
.act-day{font-size:11.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 6px}
.act-day b{font-weight:500;color:var(--t2)}
.act-row{border-bottom:1px solid var(--line)}
.act-row:last-child{border-bottom:0}
.act-h{display:grid;grid-template-columns:auto minmax(0,220px) minmax(0,1fr) 56px 120px 16px;gap:12px;align-items:center;width:100%;padding:10px 14px;text-align:left;color:var(--t1)}
.act-h:hover{background:var(--hover)}
.act-h>.ico:last-child{color:var(--t3);transition:transform .2s}
.act-row.open .act-h>.ico:last-child{transform:rotate(180deg)}
.act-who{min-width:0}
.act-who b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-who small,.act-when small{display:block;color:var(--t3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-path{font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-when{text-align:right;font-size:12.5px}
.act-body{padding:4px 14px 14px 56px;animation:rise .3s cubic-bezier(.2,.8,.2,1) both}
.act-evs{list-style:none;margin:0;padding:0;display:grid;border-left:1px solid var(--line-2);margin-left:6px}
.act-evs li{display:grid;grid-template-columns:44px 22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0 5px 14px;position:relative;font-size:12.5px}
.act-evs li::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--sheet);box-shadow:0 0 0 1.5px var(--t4);transform:translateY(-50%)}
.act-evs li.f::before{box-shadow:0 0 0 1.5px var(--amber);background:var(--amber)}
.act-evs li.f>span:nth-child(3){color:var(--amber)}
.act-evs time{color:var(--t3);font-size:12px;font-variant-numeric:tabular-nums}
.act-ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--fill);color:var(--t2)}
.act-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chipbtn.on{box-shadow:inset 0 0 0 1px var(--t3);color:var(--t1);border-style:solid}
@media (max-width:820px){.act-h{grid-template-columns:auto minmax(0,1fr) auto 16px}.act-path,.act-when{display:none}.act-body{padding-left:14px}.act-evs li{grid-template-columns:40px 22px minmax(0,1fr)}.act-evs li>.xs{display:none}
 .media{grid-template-columns:minmax(0,1fr);height:auto}#modal .modal-h{flex-wrap:wrap}#modal .modal-h [data-tabs="mp"]{order:3;flex-basis:100%;margin-left:0!important;overflow-x:auto;scrollbar-width:none}.mleft{min-height:340px}.evs{min-height:520px}}

/* ---------- Portal, drawn in the new design */
.pt{--pa:#F5362D;flex:1;min-height:0;overflow-y:auto;background:var(--canvas);color:var(--t1);container-type:inline-size;display:flex;flex-direction:column;font-size:13.5px}
.pt-nav{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:18px;padding:0 24px;height:56px;background:color-mix(in srgb,var(--sheet) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pt-brand{display:flex;align-items:center;gap:9px;flex:none}
.pt-brand b{font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.pt-logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--pa);color:#fff}
.pt-logo svg{width:15px;height:15px}
.pt-nav nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.pt-nav nav button{height:32px;padding:0 11px;border-radius:8px;color:var(--t2);white-space:nowrap}
.pt-nav nav button:hover{color:var(--t1);background:var(--hover)}
.pt-nav nav button.on{color:var(--t1);background:var(--fill);font-weight:500}
.pt-r{display:flex;gap:6px;align-items:center;flex:none}
.pt-ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--t2)}
.pt-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;background:var(--sheet);box-shadow:0 0 0 1px var(--line-2);font-weight:500;font-size:13px;color:var(--t1);white-space:nowrap;flex:none}
.pt-btn.acc{background:var(--pa);color:#fff;box-shadow:none}
.pt-btn.acc svg{width:14px;height:14px}
.pt-main{flex:1}
.pt-wrap{max-width:960px;margin:0 auto;padding:28px 24px 40px}
.pt-narrow{max-width:720px}
.pt-2{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px}
.pt-side{display:grid;gap:2px;align-content:start;position:sticky;top:84px}
.pt-side h6{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin:14px 8px 6px}
.pt-side h6:first-child{margin-top:0}
.pt-side button{display:flex;align-items:center;height:30px;padding:0 8px;border-radius:7px;color:var(--t2);text-align:left}
.pt-side button span{margin-left:auto;color:var(--t3);font-size:12px;font-variant-numeric:tabular-nums}
.pt-side button span.badge{margin-left:0;font-size:11.5px}
.pt-side button.on{background:var(--fill);color:var(--t1);font-weight:500}
.pt-side button:hover{background:var(--hover)}
.pt-col{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;min-width:0}
.pt-ask{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:18px;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line)}
.pt-ask b{display:block;font-weight:500;font-size:17px;letter-spacing:-.02em}
.pt-ask small{color:var(--t3);font-size:12.5px}
.pt-ask-in{display:flex;align-items:center;gap:8px;height:42px;padding:0 5px 0 12px;border-radius:10px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line);color:var(--t3)}
.pt-ask-in span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-sort{display:flex;gap:4px;align-items:center}
.pt-sort button{height:28px;padding:0 10px;border-radius:7px;color:var(--t2)}
.pt-sort button.on{background:var(--sheet);box-shadow:0 0 0 1px var(--line);color:var(--t1);font-weight:500}
.pt-sort span{margin-left:auto;color:var(--t3);font-size:12px}
.pt-list{display:grid;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pt-post{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pt-post:last-child{border-bottom:0}
.pt-post:hover{background:var(--hover)}
.pt-post b{font-weight:500;font-size:14px;display:block}
.pt-post p{color:var(--t2);font-size:13px;margin-top:2px}
.pt-vote{display:grid;justify-items:center;align-content:center;gap:0;height:48px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--t2)}
.pt-vote b{font-size:13px;font-weight:500;color:var(--t1);font-variant-numeric:tabular-nums}
.pt-vote:hover{box-shadow:inset 0 0 0 1px var(--pa)}
.pt-vote.on{background:color-mix(in srgb,var(--pa) 12%,transparent);box-shadow:inset 0 0 0 1px var(--pa);color:var(--pa)}
.pt-vote.on b{color:var(--pa)}
.pt-meta{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--t3);flex-wrap:wrap}
.pt-meta span{display:inline-flex;align-items:center;gap:4px}
.pt-head{margin-bottom:20px}
.pt-head h1{font-size:28px;font-weight:500;letter-spacing:-.035em}
.pt-head p{color:var(--t2);margin-top:4px}
.pt-head.row{display:flex;align-items:flex-end;gap:12px}
.pt-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.pt-lanes section{display:grid;gap:8px;padding:10px;border-radius:14px;background:var(--fill)}
.pt-lane-h{display:flex;align-items:center;gap:8px;padding:2px 4px 4px}
.pt-lane-h b{font-weight:500}.pt-lane-h span:last-child{margin-left:auto;color:var(--t3);font-size:12px}
.pt-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--t4)}
.pt-dot.info{background:var(--blue)}.pt-dot.warn{background:var(--amber)}.pt-dot.ok{background:var(--green)}.pt-dot.bad{background:var(--red)}
.pt-card{padding:12px;border-radius:10px;background:var(--sheet);box-shadow:0 0 0 1px var(--line)}
.pt-card b{font-weight:500;display:block}
.pt-card .ml{margin-left:auto;color:var(--t1);font-weight:500}
.pt-entry{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.pt-entry-m{display:grid;gap:6px;align-content:start;justify-items:start;color:var(--t3);font-size:12px}
.pt-entry h2{font-size:19px;font-weight:500;letter-spacing:-.025em;margin-bottom:10px}
.pt-entry p{color:var(--t2);line-height:1.6}
.pt-cover{width:100%;height:auto;aspect-ratio:760/250;border-radius:12px;margin-bottom:12px;display:block;box-shadow:0 0 0 1px var(--line)}
.pt-react{display:flex;gap:6px;margin-top:12px}
.pt-react button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;box-shadow:0 0 0 1px var(--line-2);color:var(--t2);font-size:12px}
.pt-banner{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:var(--red-tint);box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 30%,transparent);margin-bottom:16px}
.pt-banner b{display:block;font-weight:500;font-size:15px}.pt-banner small{color:var(--t2);font-size:12.5px}
.pt-mons{display:grid;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pt-mon{display:grid;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pt-mon:last-child{border-bottom:0}
.pt-mon b{font-weight:500}
.pt-st{font-size:12.5px;font-weight:500}.pt-st.ok{color:var(--green)}.pt-st.bad{color:var(--red-ink)}
.pt-bars{height:28px;gap:2px}.pt-bars i{flex:1;width:auto}
.pt-h3{font-size:14.5px;font-weight:500;margin:26px 0 10px}
.pt-inc{display:grid;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pt-inc>div{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pt-inc>div:last-child{border-bottom:0}.pt-inc b{font-weight:500}
.pt-hero{display:grid;justify-items:center;gap:12px;padding:52px 24px 36px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--pa) 7%,transparent),transparent)}
.pt-hero h1{font-size:34px;font-weight:500;letter-spacing:-.04em}
.pt-hero small{color:var(--t3);font-size:12.5px}
.pt-search{display:flex;align-items:center;gap:10px;width:min(560px,100%);height:50px;padding:0 6px 0 16px;border-radius:12px;background:var(--sheet);box-shadow:0 0 0 1px var(--line-2),0 12px 30px -18px rgba(20,20,19,.35);color:var(--t3);text-align:left}
.pt-search span{flex:1}
.pt-colls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pt-coll{display:grid;gap:4px;justify-items:start;padding:16px;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);text-align:left;color:var(--t1)}
.pt-coll:hover{box-shadow:0 0 0 1px var(--line-2),0 10px 24px -16px rgba(20,20,19,.3)}
.pt-coll b{font-weight:500;margin-top:8px}.pt-coll small{color:var(--t3);font-size:12px}
.pt-cic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 12%,transparent);color:var(--pa)}
.pt-arts{display:grid;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pt-arts button{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;color:var(--t1)}
.pt-arts button:last-child{border-bottom:0}.pt-arts button:hover{background:var(--hover)}
.pt-arts span{flex:1}.pt-arts .ico{color:var(--t3)}
.pt-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--t4);font-size:12px;border-top:1px solid var(--line)}
.pt-foot svg{width:12px;height:12px}
@container (max-width:720px){
 .pt-nav{padding:0 14px;gap:10px;flex-wrap:wrap;height:auto;padding-top:10px}.pt-nav nav{order:3;flex-basis:100%;padding-bottom:6px}.pt-r{margin-left:auto}
 .pt-wrap{padding:20px 14px 28px}.pt-2{grid-template-columns:minmax(0,1fr)}.pt-side{display:none}
 .pt-lanes{grid-template-columns:minmax(0,1fr)}.pt-colls{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pt-entry{grid-template-columns:1fr;gap:8px}.pt-entry-m{display:flex;align-items:center}
 .pt-hero{padding:36px 14px 24px}.pt-hero h1{font-size:26px}.pt-search .pt-btn{padding:0 9px}
 .pt-head h1{font-size:24px}.pt-head.row{flex-wrap:wrap}.pt-banner{flex-wrap:wrap}
}

/* ---------- Rectify is the product, Quanta is its AI */
img.mark{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none;display:inline-block;vertical-align:-3px;background:#2a1a14}
.ask2 img.mark{width:18px;height:18px}
.center h1 img.mark,.qpage h1 img.mark{width:30px;height:30px;vertical-align:-5px}
.av.q{background:#2a1a14;overflow:hidden}
.av.q img{width:100%;height:100%;object-fit:cover;display:block}
.brandbar{display:flex;align-items:center;height:34px;padding:6px 10px 12px;color:var(--t1)}
.brandbar .rlogo{height:24px;width:auto;display:block}
.ws .logo{background:var(--fill-2);color:var(--t1);font-size:10.5px;font-weight:500;letter-spacing:.02em}
.av.rm{background:var(--fill);border-radius:6px}.av.rm svg{width:16px;height:16px}
.m-brand{display:none}
.pt-foot .rlogo{height:13px;width:auto}
.pt-btn img.mark{width:16px;height:16px}
@media (max-width:820px){.m-brand{display:inline-flex;align-items:center;margin-right:2px}.m-brand svg{height:20px;width:auto}}