/* P2: review and delivery (HANDOFF §1-§7), ported from the frames' kit (p2.css, p2b.css) plus the R3 split comment control and mode bar (P1 kit p1.css 419-430, left to P2).
   Grid: paddings and gaps up to 16 even, above 16 multiples of 4. The .p2- names are the surfaces P2 added; app classes keep their own names. */
.ccs{display:inline-flex;align-items:stretch;height:32px;border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--hl-top)}
.ccs > :is(span,button){position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 10px 0 var(--s-3);color:var(--text-2)}
.ccs > :first-child{border-radius:var(--pill) 0 0 var(--pill)}
.ccs > :last-child{padding:0 10px 0 var(--s-2);border-left:1px solid var(--line);border-radius:0 var(--pill) var(--pill) 0}
.ccs .i{width:var(--icon-md);height:var(--icon-md)}
.ccs .cnt{min-width:18px;height:18px;padding:0 6px;border-radius:var(--r-sm);background:var(--accent);color:var(--ink);font:600 var(--fs-0)/18px var(--font);text-align:center}
.ccs > .hov{background:var(--raised);color:var(--text)}
.ccs.mode > :first-child{background:var(--accent-soft-2);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
/* P2 kit, part 2 (comments, editor, search, Approved, delivery, Optimization). Handoff values. */
.av.p2-a20{width:20px;height:20px;font-size:9px}
.av.p2-a16{width:16px;height:16px;font-size:8px}
.av.p2-a24{width:24px;height:24px;font-size:10px}

/* ---------- board, rework, menus (p2.css of the kit) ---------- */
.p2-off{opacity:.45;pointer-events:none}
.sk.p2-skn{display:inline-block;height:12px;vertical-align:middle;border-radius:var(--r-1)}

/* avatar 20 (R-01: the requester, never a cut name) and 24 (comments) */
.p2-av{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:color-mix(in oklab,var(--c) 22%,var(--raised));color:var(--c);font:600 9px/1 var(--font);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c) 40%,transparent);cursor:default}
.p2-av.s20{width:20px;height:20px}
.p2-av.s24{width:24px;height:24px;font-size:10px}

/* ---------- page head: title + one comment control (R-10, A-02) ---------- */
.p2-head{align-items:center;min-height:36px}   /* NAV-F0: the head is as tall as its button from the first paint */
.p2-head.pack-head{margin-bottom:var(--s-4)}   /* DS-3: Covers: its tabs 16 under the title, as on every page with a bar (Approved has none: its first block keeps 24) */
.p2-head .ccs{margin-left:auto}
.p2-tr{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.p2-vo{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font:500 var(--fs-1)/1 var(--font);box-shadow:var(--edge)}
.p2-vo .i{width:var(--icon-sm);height:var(--icon-sm)}
.p2-ccs > span{cursor:pointer}
/* subrow: tabs left; quiet order + page size right (R-09) */
.p2-sr-r{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
.p2-sr-r .pagesize{margin-left:0}
.p2-sr-r .pagesize[hidden]{display:flex!important;visibility:hidden}   /* DR-49: the sort keeps its place when the page size is off (In rework, empty) */

/* ---------- To review card (R-04, R-05, R-06, D-06) ---------- */
.p2-card .body{padding-block:var(--s-3) var(--s-2)}
.p2-card .title.p2-t2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* 2-line clamp; equal cards come from the row stretch (.foot margin-top:auto), at most 20 px under a one-line title */
.p2-card .meta{margin-top:2px}
.p2-card .foot{padding-top:var(--s-3)}
.p2-chov{border-color:var(--line-strong)}
.p2-cfoc{outline:2px solid var(--accent);outline-offset:2px}
/* just approved (R-03): the card says it in place for 10 s with Undo; no toast */
.p2-cdone{border-color:var(--green-line)}
.p2-cdone .media img{opacity:.5}
.p2-donef{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:34px}
.p2-done{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--green);font:600 var(--fs-2)/1 var(--font)}
.p2-done .i{width:var(--icon-md);height:var(--icon-md)}
/* FX-8c (UI-COVER-19): an Approve the server has not taken yet: amber border and mark, the decision in plain text, «Not saved yet» under it */
.p2-cwait{border-color:var(--amber-line)}
.p2-donef.wait .p2-done{color:var(--text);cursor:default}
.p2-donef.wait .p2-done .i{color:var(--amber)}
.p2-done-t{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.p2-done-t small{color:var(--amber);font:500 var(--fs-1)/1.2 var(--font)}

/* ---------- In rework (R-01, #20) ---------- */
.p2-sec + .p2-sec{margin-top:var(--s-7)}
.p2-sech{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);font-size:var(--fs-4);line-height:22px;font-weight:600}
/* P-03: numbered fix areas on the card picture: 1.5 px white marquee with a dark halo, number badge 16 */
.p2-mk{position:absolute;z-index:2;border:1.5px solid var(--white);border-radius:var(--r-hair);box-shadow:0 0 0 1px var(--art-shadow-2),inset 0 0 0 1px var(--art-shadow-1);pointer-events:none}
.p2-mk b{position:absolute;left:-1px;top:-1px;translate:-50% -50%;min-width:16px;height:16px;padding:0 var(--s-1);border-radius:var(--r-sm);background:var(--white);color:var(--ink);font:500 var(--fs-0)/16px var(--mono);text-align:center;box-shadow:0 0 0 1px var(--art-shadow-2),0 1px 3px var(--art-shadow-1)}
/* one status line: icon 16 + two words; requester avatar 20; ⋯ for in-progress cards */
.p2-stl{display:flex;align-items:center;gap:var(--s-2);height:28px;margin:var(--s-2) 0 0;font:500 var(--fs-2)/18px var(--font);color:var(--text)}
.p2-stl .av{margin-left:auto}   /* the kit renders the avatar as .av.p2-a20 (P.av, p2b.js): avatar and ⋯ flush right on every card (P2-m3) */
.p2-stl .icon-btn.sm{width:28px;height:var(--ctl-xs);margin-right:-4px}
.p2-rw .foot{padding-top:var(--s-2)}
.p2-rw .actions{align-items:center}
.btn.p2-send{flex:1}
.p2-rw .actions .icon-btn{flex:none;width:34px;height:var(--ctl-s);border:1px solid var(--line-strong);background:var(--raised)}
.p2-mon{background:var(--active)!important;color:var(--text)!important;box-shadow:var(--edge-strong)}
.p2-menu{position:fixed;z-index:var(--z-pop);width:220px;display:block}
.p2-menu .menu-item.red{color:var(--red)}
.p2-menu .menu-item.red .i{color:var(--red)}
/* inline confirm (popover) */
.p2-pop{position:fixed;z-index:var(--z-dialog);width:320px;padding:var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-4);background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3)}
.p2-pop h3{margin:0 0 6px;font-size:var(--fs-3);line-height:20px;font-weight:600}
.p2-pop p{margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p2-pop .p2-pa{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-4)}
.btn.p2-red{background:var(--red);border-color:transparent;color:#1a0b0d}

/* page states inside the body (R1): centred where the grid was */
.p2-body-st{display:grid;place-items:center;min-height:calc(100dvh - 300px);padding:var(--s-6) 0 var(--s-9)}


/* ---------- comments ---------- */
.p2-cml{position:fixed;z-index:var(--z-pop);display:flex;flex-direction:column}
.p2-cml .cm-lh{align-items:center}
.p2-cmc{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-2);background:var(--accent);color:var(--ink);font:600 var(--fs-0)/20px var(--font);text-align:center}
.p2-cml .cm-row{grid-template-columns:36px minmax(0,1fr) 10px}
.p2-cml .cm-rx{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-size:var(--fs-2);line-height:18px}
.p2-cml .cm-rw{font-size:var(--fs-1);line-height:16px;color:var(--text-2)}
.p2-cml .cm-rh .cm-time{margin-left:auto}
.p2-cme{padding:var(--s-4) var(--s-3) var(--s-2);color:var(--text-2)}
.p2-cmea{display:flex;justify-content:center;padding:0 0 var(--s-3)}
.p2-cmea kbd{margin-left:var(--s-1);padding:1px 6px;border-radius:var(--r-xs);background:var(--bg);box-shadow:var(--edge-strong);color:var(--text-3);font:500 var(--fs-1)/16px var(--font)}
/* the pin popover (comment mode): new comment with an @ mention list */
.p2-cpop{position:fixed;z-index:var(--z-pop-2);display:flex;flex-direction:column;width:352px;padding:0;overflow:visible}
.p2-cpop .cm-comp{border-top:0}
.p2-cpop .cm-tools{justify-content:flex-end;padding:0 var(--s-2) var(--s-2)}
.p2-ppl{position:absolute;left:58px;top:calc(100% + 6px);z-index:var(--z-pop-3);display:block;width:260px}
.p2-ppl .cm-person .av{width:24px;height:24px;font-size:10px}
.p2-ppl .cm-person small{margin-left:auto;color:var(--text-3);font-size:var(--fs-1);font-weight:500}

/* ---------- editor ---------- */
#editor .p2-sub{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#editor .p2-dt{color:var(--text-3)}
.p2-info{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:2px;border-radius:50%;color:var(--text-3)}
.p2-info .i{width:var(--icon-md);height:var(--icon-md)}
.p2-info:hover,.p2-info.on{background:var(--raised);color:var(--text)}
#editor .m-brand{margin-left:auto}
.btn.p2-apg{border-color:var(--line-strong);color:var(--text)}
#editor .frame{transition:none}
/* segmented: who makes the change (R-17) */
/* fix list: the composer is the next item (R-18) */
.p2-fl{flex:1;min-height:0;overflow:auto;margin:0;padding:var(--s-1) var(--s-2) var(--s-2);list-style:none;display:flex;flex-direction:column;gap:2px}
.p2-fix{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--s-3);padding:var(--s-3) var(--s-2) var(--s-3) var(--s-4);border-radius:var(--r-2)}
.p2-fix .fix-text{margin:var(--s-1) 0 0;font-size:var(--fs-3);line-height:20px}
.p2-fix .fix-areas{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.p2-fix .seg{margin-top:var(--s-2)}
.p2-ci{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) var(--s-2) var(--s-3) var(--s-4);border-radius:var(--r-2);background:var(--raised);box-shadow:var(--edge)}
.p2-ci .fix-areas{display:block;margin-bottom:var(--s-2);color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.p2-ci textarea{display:block;width:100%;min-height:64px;padding:10px var(--s-3);border:1px solid var(--accent);border-radius:var(--r-2);background:var(--bg);color:var(--text);font:400 var(--fs-3)/20px var(--font);resize:none;box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.p2-ci .p2-cih{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-2);color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.p2-ci kbd,.p2-k{padding:1px 6px;border-radius:var(--r-xs);background:var(--bg);box-shadow:var(--edge-strong);color:var(--text-3);font:500 var(--fs-1)/16px var(--font)}
/* panel foot: cost line (R-19) + the one button that names the result */
.p2-pf{display:grid;gap:var(--s-3);padding:var(--s-4);border-top:1px solid var(--line);background:var(--surface)}
.p2-cost{display:flex;align-items:center;gap:var(--s-2);margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p2-cost b{color:var(--text);font:500 var(--fs-2)/18px var(--mono)}
.p2-cost .link{margin-left:auto}
.p2-pf .btn.wide{width:100%}
/* empty Fixes (S-07, R-26, R-22) */
.p2-fe{flex:1;display:grid;align-content:center;justify-items:center;gap:0;padding:var(--s-6) var(--s-6) var(--s-7);text-align:center}
.p2-fe .st h3{max-width:28ch}
.p2-paths{display:grid;gap:var(--s-2);width:100%;margin-top:var(--s-6);text-align:left}
.p2-path{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s-3);align-items:start;padding:var(--s-3);border-radius:var(--r-3);background:var(--raised);box-shadow:var(--edge)}
.p2-path .p2-pic{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-2);background:var(--bg);color:var(--accent)}
.p2-path .p2-pic .i{width:var(--icon-lg);height:var(--icon-lg)}
.p2-path b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600}
.p2-path span{display:block;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p2-fe .link{margin-top:var(--s-4)}
/* Comments tab in the editor: threads with pins numbered as on the canvas */
.p2-th{flex:1;min-height:0;overflow:auto;padding:var(--s-1) 0 var(--s-2)}
.p2-thh{display:flex;align-items:center;gap:10px;padding:var(--s-2) var(--s-4)}
.p2-thh .p2-pn{display:grid;place-items:center;width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--accent);color:var(--ink);font:600 var(--fs-1)/1 var(--font)}
.p2-thh b{font-size:var(--fs-2);line-height:18px}
.p2-thh .btn{margin-left:auto}
.p2-th .cm-msgs{padding:0;overflow:visible}
.p2-th .cm-msg.hl{animation:none}
.p2-thx{margin:var(--s-2) var(--s-4) 0;padding-top:var(--s-3);border-top:1px solid var(--line);color:var(--text-3);font-size:var(--fs-1);line-height:16px}
/* popovers on the stage: (i) How this cover was made, Text, Approve with fixes */
.p2-spop{position:absolute;z-index:6;width:320px;padding:var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-4);background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3)}
.p2-spop h3{margin:0 0 var(--s-2);font-size:var(--fs-3);line-height:20px;font-weight:600}
.p2-spop p{margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p2-spop ul{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none;color:var(--text);font-size:var(--fs-2);line-height:18px}
.p2-spop li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s-2)}
.p2-spop li .i{width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--text-3)}
.p2-spop .p2-pa{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-4)}
.p2-spop .p2-pfact{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line);color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.p2-spop label{display:block;margin:0 0 var(--s-1);color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-weight:500}
.p2-spop .p2-in{display:block;width:100%;height:36px;margin-bottom:var(--s-3);padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--bg);color:var(--text);font:400 var(--fs-3)/34px var(--font)}
.p2-spop .p2-in.f{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.p2-spop .p2-hint{display:flex;align-items:center;gap:6px;margin:0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.p2-spop.p2-arrow-up::after{content:"";position:absolute;top:-6px;right:var(--ax,24px);width:10px;height:10px;background:var(--raised);border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong);rotate:45deg}
/* a moved layer over the true picture (R-15): the box only */
.p2-obj{position:absolute;outline:1.5px dashed rgb(var(--p-white-rgb) / .9);box-shadow:0 0 0 1px var(--art-shadow-1)}
.p2-obj b{position:absolute;width:10px;height:10px;border-radius:var(--r-xs);background:var(--white);translate:-50% -50%;box-shadow:0 0 0 1px var(--art-shadow-2)}
.p2-obj .p2-ghost{position:absolute;inset:0;outline:1px dashed rgb(var(--p-accent-rgb) / .55)}
.p2-chg{margin:0;padding:0 var(--s-2);list-style:none}
.p2-chg li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-2) var(--s-3) var(--s-4);border-radius:var(--r-2);font-size:var(--fs-3);line-height:20px}
.p2-chg li .i{width:var(--icon-lg);height:var(--icon-lg);color:var(--text-2)}
.p2-chg li small{color:var(--text-3);font-size:var(--fs-1)}
.p2-eh{margin:var(--s-2) var(--s-6) var(--s-1);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
/* the editor's toast: centred on the stage, 16 above the toolbar (R-20) */
/* in the toolbar row at the stage's left: never over the cover (the canvas keeps 80 px under it) nor the toolbar; width = min(340, (stage − toolbar) / 2 − 32), set by the frame */
#editor .p2-etoast{position:absolute;left:16px;bottom:16px;top:auto;translate:none;z-index:8;display:grid}

/* @lane SRCH begin: search */
/* ---------- search (R-27..R-30) ---------- */
#finder.p2-finder{grid-template-rows:auto auto minmax(0,1fr)}
#finder .f-head{max-width:904px;padding:var(--s-7) 0 var(--s-1)}
#finder .f-head input{font:400 var(--fs-5)/28px var(--font)!important;letter-spacing:0}
.p2-scope{max-width:904px;width:100%;margin:0 auto;padding:0 0 var(--s-3) 36px;color:var(--text-3);font-size:var(--fs-2);line-height:18px;border-bottom:1px solid var(--line)}
.p2-fb{display:grid;grid-template-columns:560px 320px;gap:var(--s-6);max-width:904px;width:100%;margin:0 auto;padding:var(--s-4) 0 var(--s-7);min-height:0;overflow:hidden}
.p2-fsl{position:relative;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.p2-fsl .f-group:first-child{margin-top:0}
.p2-fsl .f-group .d-h{position:sticky;top:0;z-index:2;margin:0;padding:6px var(--s-3);background:var(--bg);text-transform:none;letter-spacing:0;font:600 var(--fs-2)/18px var(--font);color:var(--text-2)}
.p2-fsl .f-group .d-h::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(180deg,var(--bg),rgba(12,15,26,0));opacity:0;pointer-events:none}
.p2-fsl .f-group .d-h.stuck::after{opacity:1}
.p2-fmore{display:flex;align-items:center;gap:6px;width:100%;height:36px;padding:0 var(--s-3) 0 88px;border-radius:var(--r-3);color:var(--accent);font:500 var(--fs-2)/18px var(--font);text-align:left}
.p2-fmore:hover{background:var(--raised)}
.p2-fmore .i{width:var(--icon-md);height:var(--icon-md)}
.p2-frow{grid-template-columns:64px minmax(0,1fr) 16px 24px!important;min-height:64px}
.p2-frow .fmeta{color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.p2-fp{display:flex;flex-direction:column;gap:0;min-width:0}
.p2-fpm{width:320px;aspect-ratio:418/564;border-radius:var(--r-3);overflow:hidden;background:var(--raised);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-2)}
.p2-fpm.wide{aspect-ratio:5/3}
.p2-fpm img{display:block;width:100%;height:100%;object-fit:cover}
.p2-fpt{margin:var(--s-4) 0 0;font-size:var(--fs-4);line-height:22px;font-weight:600}
.p2-fpp{margin:2px 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p2-fps{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-3) 0 var(--s-4);color:var(--text);font-size:var(--fs-2);line-height:18px}
.p2-fp .btn kbd{margin-left:var(--s-1);background:rgb(var(--p-navy-rgb) / .18);box-shadow:none;color:inherit}
.p2-fsl .p2-recent{margin:0 0 var(--s-1);padding:0 var(--s-3);color:var(--text-2);font:600 var(--fs-2)/18px var(--font)}
.p2-fsl .st{padding-top:var(--s-9)}

/* @lane SRCH end */
/* ---------- Approved (A-01..A-14) ---------- */
.p2-hc{color:var(--text-3);font:400 var(--fs-6)/32px var(--mono);letter-spacing:-.02em}
#a-note{margin:-8px 0 var(--s-4)}
#a-note .alert{margin:0}
.p2-chipon{border-color:var(--amber-line)!important;background:var(--amber-soft)!important;color:var(--text)!important}
.p2-chipon .i{width:var(--icon-sm);height:var(--icon-sm);color:var(--amber)}
.p2-chipon .i:last-child{color:var(--text-2)}
.p2-chipon .count{background:rgb(var(--p-amber-rgb) / .22)!important;color:var(--text)!important}
.p2-fdis{opacity:.45;pointer-events:none}
.p2-tile .media{display:block}
.p2-flag{position:absolute;top:8px;right:8px;z-index:3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--on-image);color:var(--amber);box-shadow:0 0 0 1px rgb(var(--p-amber-rgb) / .55)}
.p2-flag .i{width:var(--icon-xl);height:var(--icon-xl)}
.p2-ton{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--hl-top)}
/* drawer (A-06, A-08, D-08) */
.p2-drawer .d-head .sub{display:flex;align-items:center;gap:6px;margin:2px 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p2-dfoot{flex-wrap:nowrap}
.p2-dfoot .btn{flex:1 1 auto}
.p2-dfoot .icon-btn{flex:none;width:34px;height:var(--ctl-s);border:1px solid var(--line-strong);background:var(--raised)}
.p2-drawer .props dd .icon-btn{width:28px;height:var(--ctl-xs)}
.p2-hist{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.p2-hist li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:var(--s-2);align-items:center;font-size:var(--fs-2);line-height:18px;color:var(--text)}
.p2-hist li small{color:var(--text-3);font-size:var(--fs-1)}
.p2-ba{display:grid;grid-template-columns:160px 160px;justify-content:center;gap:var(--s-4);margin:0}
.p2-ba figure{margin:0}
.p2-ba .p2-bam{display:block;width:160px;height:213px;border-radius:var(--r-2);overflow:hidden;box-shadow:0 0 0 1px var(--line-strong)}
.p2-ba .p2-bam img{display:block;width:100%;height:100%;object-fit:cover}
.p2-ba figcaption{margin-top:var(--s-2);color:var(--text-2);font-size:var(--fs-1);line-height:16px;text-align:center}
.p2-ba figcaption b{display:block;color:var(--text);font-size:var(--fs-2);line-height:18px;font-weight:600}
/* P2-m1 (fix round 1): Catalogue tab: the 5:3 catalogue picture and the redraw at one height, each at its own ratio (no bars); widths share the body by ratio */
.p2-ba.p2-bac{display:flex;align-items:flex-start;gap:var(--s-4)}
.p2-bac figure{flex:0.7411 1 0;min-width:0}
.p2-bac figure.p2-bwide{flex:1.6667 1 0}
.p2-bac .p2-bam{width:100%;height:auto;aspect-ratio:836/1128}
.p2-bac .p2-bwide .p2-bam{aspect-ratio:5/3}
/* P2-07: the file name sits inside Technical details */
.d-tech .p2-techp{margin-top:var(--s-3)}
.p2-dtabs{display:flex;width:max-content;gap:2px;margin:0 auto var(--s-4);padding:2px;border-radius:var(--pill);background:var(--bg);border:1px solid var(--line)}
.p2-dtabs span{display:inline-flex;align-items:center;height:28px;padding:0 var(--s-3);border-radius:var(--pill);color:var(--text-2);font:500 var(--fs-2)/1 var(--font)}
.p2-dtabs span.on{background:var(--active);color:var(--text);box-shadow:var(--edge-strong)}
.p2-why{display:flex;gap:var(--s-2);margin:var(--s-4) 0 0;padding:10px var(--s-3);border-radius:var(--r-2);background:var(--amber-soft);font-size:var(--fs-2);line-height:18px}
.p2-why .i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--amber)}
.p2-live{display:block;width:100%;border-radius:var(--r-2);box-shadow:0 0 0 1px var(--line-strong)}
.p2-drawer .p2-pop,.p2-drawer .p2-menu{position:absolute}

/* ---------- System sheet use: R1 states come from P1's final kit (p1.js P.art / P.stateArt / P.stack, p1.css state block), re-copied in fix round 1; no local glyph rules ---------- */
/* E-12: a count is said once. The expanded sidebar already shows no count on the active item; the collapsed rail (the 1280 frames) still badged it,
   so the badge on the active rail icon goes; the active subtab carries the number. */
.tabs .tab.nv[aria-current=page] .count{display:none!important}
/* editor extras */
.p2-rg{display:flex;align-items:center;justify-content:center;gap:6px;margin:var(--s-4) 0 0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.p2-rg .link{margin:0}
.p2-thh .av{width:24px;height:24px;font-size:10px}
.p2-thh small{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.p2-th + .cm-comp{border-top:1px solid var(--line)}
.p2-sp{flex:1}
.p2-spop .btn{height:var(--ctl-s)}
.p2-tb{margin:0 var(--s-2) var(--s-1);padding:var(--s-1) 0;border-radius:var(--r-3)}
.p2-tb.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgb(var(--p-accent-rgb) / .16)}
.p2-tb .cm-msg{padding:var(--s-2)}
.cm-who .p2-res{margin-left:auto;width:28px;height:28px;color:var(--text-2)}
.p2-thx{margin:var(--s-2) var(--s-4) 0}
.p2-fbn{grid-template-columns:1fr}
.p2-fbn .p2-fp{display:none}
.p2-fbn .p2-fsl .st{padding-top:72px}
.p2-fsl .f-group + .f-group{margin-top:var(--s-4)}

/* ---------- Optimization (O-01..O-07) ---------- */
.p2-apx{font:300 var(--fs-6)/52px var(--mono)!important;color:var(--text-2)}
.op-setinfo .p2-oacts{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2)}
.op-setinfo .p2-ocap{margin-top:2px;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.op-setinfo .p2-ocap .link{padding:0;font-size:var(--fs-1)}
.op-setinfo .p2-obar{display:block;margin:var(--s-1) 0 2px;width:100%;max-width:280px;height:6px;border-radius:var(--r-xs);background:var(--raised);overflow:hidden}
.op-setinfo .p2-obar i{display:block;height:100%;border-radius:var(--r-xs);background:var(--amber)}
.op-setinfo .p2-il{padding:0;font-size:var(--fs-2)}
.p2-oro{display:flex;align-items:center;gap:var(--s-2);margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p2-oro .i{color:var(--text-3)}
.op-main.p2-omv{grid-template-columns:minmax(0,1fr)}
.op-setinfo .p2-vo{margin-left:var(--s-1);vertical-align:middle}
/* P2-01 / P2-02 (fix round 1): the row fills to 24 px above the viewport bottom (H set by P.optFit); both columns stretch to H; the picture is sized by P.optFit */
.op-main.p2-ofit{align-items:stretch}
.p2-ofit > .op-left,.p2-ofit > .op-right{min-height:0}
.p2-ofit .op-plate.op-profile{padding:var(--s-5)}
.p2-ofit .op-profile .op-controls{gap:var(--s-5)}
.op-plate.p2-oexp{flex:1 1 auto;min-height:134px;padding:var(--s-4) var(--s-5);gap:var(--s-2)}
.p2-oexhd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);height:20px}
.p2-oexhd h2{margin:0;font-size:var(--fs-2);line-height:20px;font-weight:600;color:var(--text-2)}
.p2-oexhd .icon-btn{margin:-4px -4px -4px 0}
.p2-oext{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.p2-ofit .op-strip{display:flex;gap:var(--s-2);margin:0;align-items:center;justify-content:center}
.p2-ofit .op-ex{flex:none;gap:0}
.p2-ofit .op-ex[aria-selected=true]{box-shadow:0 0 0 1px var(--accent),var(--glow-accent)}
.p2-ofit .op-exmedia{width:100%}
.p2-ofit .op-extitle{display:none}
.p2-ofit .op-figure{flex:1 1 auto;min-height:0}
.p2-ofit .op-stage{flex:1 1 auto;min-height:0}
.p2-ofit .op-scroll{align-items:center}
.p2-ofit .op-frame{flex:none;min-height:0}
/* viewer (O-04): the stage takes the width, the three examples stand in a rail beside it; no ⋯ (a viewer cannot replace examples) */
.p2-omv .op-figure{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);column-gap:var(--s-4);row-gap:var(--s-3)}
.p2-omv .op-meta{grid-column:1/-1}
.p2-omv .op-stage{grid-column:1;grid-row:2}
.p2-omv .op-strip{grid-column:2;grid-row:2;flex-direction:column;align-items:stretch;justify-content:flex-start}
/* R5 small-text share (≤ 40% list pages): meta lines, editor numbers, comment times and the thread summary at 13 */
.p2-fix .fix-text{margin:0}
.p2-fix .fix-top + .fix-text{margin-top:var(--s-1)}
.p2-thx{font-size:var(--fs-2);line-height:18px}
.p2-vo{font-size:var(--fs-2)}
/* state action row: the app's style.css gives .st-acts margin-left:auto (Style page header); inside a state the row centres under the art (P1 r2: Retry sat 84 px off centre) */
.st .st-acts{margin-left:0;margin-right:0;align-self:center}
/* P2-03 (fix round 1): Title and provider is a panel mode, never a popover over the canvas; the edited text layer is outlined on the cover */
.p2-spop.p2-txc{position:relative;z-index:auto;width:auto;margin:var(--s-1) var(--s-4) 0;background:var(--raised);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-1)}
.p2-txc h3{margin:0 0 var(--s-1)}
.p2-txc .p2-hint{margin:0 0 var(--s-4)}
.p2-txc .btn kbd{margin-left:6px;padding:2px 6px;border-radius:var(--r-xs);background:var(--bg);box-shadow:var(--edge-strong);color:var(--text-3);font:500 var(--fs-1)/16px var(--font)}
.p2-txc .btn.primary kbd{background:rgb(var(--p-navy-rgb) / .18);box-shadow:none;color:inherit}
.p2-objt{outline-color:rgb(var(--p-accent-rgb) / .8);box-shadow:0 0 0 1px var(--art-shadow-1),0 0 0 6px var(--accent-soft)}

.grid.p2-secs{display:block}
.p2-sec > .grid{display:grid}
/* R-03: the 10 s countdown under «Approved» (the card keeps its Undo while the person stays on the tab) */

.p2-head .cm-bar{margin-left:auto}
.cm-bar .ccs .cm-tool[aria-pressed=true]{background:var(--accent-soft-2)}

/* §5 Approved: the drawer keeps Undo and Remove behind the three dots (the buttons stay for their handlers) */
.p2-dfoot #d-undo,.p2-dfoot #d-remove{display:none}
.p2-flagbox{margin:0 0 var(--s-4)}
.p2-flagbox .p2-ba{margin:0}
.p2-ba:has(>figure:only-child){grid-template-columns:160px}   /* J1: one picture (no earlier approved attempt) */

/* P2 §3 (i) popover */
.p2-infopop{width:300px;padding:var(--s-4)}
.p2-ih{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600;margin-bottom:var(--s-2)}
.p2-il{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2);font-size:var(--fs-2);line-height:18px;color:var(--text-2)}
/* P2 §3 R-18: the composer is the next numbered item: the dashed marker beside the field, no "New fix" label */
#composer{display:flex;flex-direction:column;gap:0;padding:0;border-top:0;background:none;flex:1 0 auto}   /* FX-8 (UI-COVER-1): the composer keeps its own height and takes the free space; it never gives way, so the send foot stays inside the panel */
#fixlist{flex:0 1 auto}   /* P2 J5: the next-fix input sits under the list, the foot at the panel's bottom. FX-8: the list is the part that gives way and scrolls */
#composer #c-foot{margin-top:auto}
#composer .p2-cin{margin:var(--s-2) var(--s-4) 0;padding:var(--s-3);border-radius:var(--r-3);background:var(--raised)}
#composer [hidden]{display:none}
#composer .p2-cin{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:var(--s-3);row-gap:0;padding:var(--s-4) var(--s-4) var(--s-3)}
#composer .comp-head{display:contents}
#composer .comp-head>span:nth-child(2){display:none}
#composer .comp-head>.marker{grid-column:1;grid-row:1 / span 2;align-self:start;margin-top:2px}
#composer #c-areas{grid-column:2;grid-row:1;margin:0 0 var(--s-1);color:var(--text-3);font:400 var(--fs-1)/16px var(--font)}
#composer #c-areas:empty{display:none}
#composer #c-code{grid-column:2;justify-self:start;margin-bottom:var(--s-1)}
#composer textarea{grid-column:2;min-height:64px}
#composer .comp-row{grid-column:2;margin-top:var(--s-2)}
#composer #c-foot .c-svc{margin:0;gap:var(--s-2);font-size:var(--fs-2);line-height:18px}
#composer #c-foot .c-svc .link{margin-left:auto}
#composer #c-foot .c-cost{margin:0}
#composer .c-cost-i{display:inline-flex;vertical-align:-3px;margin-left:var(--s-1);color:var(--text-3);cursor:help}   /* FX-8b (UI-COVER-27): the (i) after «Makes attempt N of M» */
#composer .c-cost-i .i{width:var(--icon-sm);height:var(--icon-sm)}
#composer .c-cost-i:hover,#composer .c-cost-i:focus-visible{color:var(--text-2)}
#composer #c-foot .btn.wide{width:100%}
#composer .p2-c1{display:grid;gap:var(--s-2);justify-items:stretch}
#composer .p2-c1 .link{justify-self:center;font-size:var(--fs-2);line-height:18px}
#composer .p2-c1 .link:disabled{opacity:.45}
.p2-fix > div > .fix-text:first-child{margin-top:0}
/* P2 §3 (P2-03, R-22): Title and provider as a panel mode; the empty Fixes tab; the edit-myself list */
.panel.p2-txm #fixlist{display:none}
.panel .p2-chl{margin:var(--s-1) var(--s-4) var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p2-chg li small{white-space:nowrap}
.p2-fe{display:grid;justify-items:center;max-width:none;padding:var(--s-4);text-align:center}
.p2-fe .stv{width:100%}
.p2-fe .p2-path{width:100%;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.p2-fe .p2-path:hover{background:var(--raised)}
.p2-rgl{margin-top:var(--s-3);color:var(--text-3);font-size:var(--fs-2);line-height:18px}
.p2-rgl .link{margin:0;font-size:var(--fs-2)}
.p2-fe .stv p:empty{display:none}   /* FX-8 (UI-COVER-4): an approved cover's intro has no «Or approve» line */
/* FX-8 (OQ-6 «Закрепить и сворачивать», UI-COVER-4): the intro as its title line, while a fix is being written and under a flagged cover's note */
.p2-fe.p2-fe1{flex:none;display:block;margin:0;padding:var(--s-1) var(--s-2) 0;text-align:left}
.p2-hint{display:flex;align-items:center;gap:var(--s-2);margin:0;color:var(--text-2);font:400 var(--fs-2)/18px var(--font)}
.p2-hint .i{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-3)}
/* FX-8 (UI-COVER-3, 4; the status table): the status block over the fixes: the state's one name, the reason, the next step, the way on */
#ed-todo > div{flex:1;min-width:0}
#ed-todo .ed-todo-why{margin-top:2px;color:var(--text);overflow-wrap:anywhere}
#ed-todo .ed-todo-acts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
#ed-todo .ed-todo-acts:not(:has(> :not([hidden]))){display:none}
#ed-todo .ed-todo-acts .btn{margin-top:0}
#ed-todo[data-s=failed] > .i{color:var(--red)}
#ed-todo[data-s=stopped] > .i,#ed-todo[data-s=auto] > .i,#ed-todo[data-s=flagged] > .i{color:var(--amber)}
#ed-todo[data-s=run] > .i{color:var(--accent)}
#ed-todo[data-s=ok] > .i{color:var(--green)}
/* FX-8 (UI-COVER-6): a picture that didn't load. The stage holds the error state in the cover's own box; a card offers Try again and its Approve waits */
.frame.nopic > img{visibility:hidden}
.frame.nopic > .areas{display:none}
.frame > .ed-nopic{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:var(--s-6);border-radius:var(--r-2);box-shadow:0 0 0 1px var(--line)}
.media-err .link{position:relative;z-index:2;margin-top:var(--s-1);font-size:var(--fs-2);line-height:18px}   /* over .media-hit (z 1) */
.card:has(.media[data-error]) :is(.p2-go,[data-act=build]){background:var(--raised);border-color:var(--line);color:var(--text-3);box-shadow:none;cursor:not-allowed}
.p2-txc .p2-in{min-height:36px;resize:none;field-sizing:content;max-height:84px;line-height:20px;padding-top:6px;padding-bottom:6px}
.p2-txc textarea.p2-in{font:400 var(--fs-3)/20px var(--font)}
.p2-txc .tp-note{margin:-4px 0 var(--s-2);color:var(--red);font-size:var(--fs-1);line-height:16px}
.p2-objt{position:absolute;left:22%;width:56%;top:69%;height:27%;z-index:3;border:1.5px dashed var(--accent);border-radius:var(--r-xs);box-shadow:0 0 0 6px var(--accent-soft);pointer-events:none}
/* P2 §7: hero status cell holds the primary; plate B; the row fits the window */
.op-setinfo .p2-oact{display:flex;flex-direction:column;gap:var(--s-2);width:100%;margin-top:var(--s-2)}
.op-setinfo .p2-oact .op-primary{width:auto;align-self:flex-start}
.op-setinfo .p2-oact .op-run{width:100%;max-width:340px}
.op-setinfo .p2-oact [hidden]{display:none}
.op-setinfo .p2-oback{margin:0;padding:0;font-size:var(--fs-1);line-height:16px;color:var(--text-3)}
.op-setcell.celebrate{animation:op-shine var(--dur-5) var(--ease) both}
.op-setcell.celebrate .op-tic{animation:op-settle var(--dur-4) var(--ease) both}
.op-main.p2-ofit{grid-template-rows:minmax(0,1fr)}
.p2-ofit .op-exmore{display:none}
.p2-ofit .op-frame{min-height:0}
.p2-ofit .op-ex{padding:var(--s-1);box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.op-setcell.celebrate,.op-setcell.celebrate .op-tic{animation:none}}
.op-ccell[data-approx="1"] .op-hn::before{content:"≈ ";font-weight:300;opacity:.7}

/* J2/J3: the search no-result state and the page error states sit in a bounded room so the P1 size rule can fit the art */
.p2-none{display:grid;place-items:center;height:100%;min-height:0;padding:var(--s-4)}
.p2-foff{opacity:.5;pointer-events:none}
.p2-foff select,.p2-foff .chip{cursor:default}

/* P2 J1: a focus tip at the drawer edge never makes the drawer scroll sideways */
#drawer{overflow-x:hidden}
/* P2 J1 polish: the lone «Approved · date» caption reads on one line */
.p2-ba:has(>figure:only-child) figcaption b{display:inline}
.p2-sr-r .rk-select{height:var(--sortc-h)}   /* polish (DR-49): Select sits level with the sort pill */
/* FX-8 (UI-COVER-2): a fix written on a cover and not sent: one quiet amber line over the card's buttons (DR-112: a person must act), one press opens the editor */
.foot .p2-unsent{display:flex;align-items:center;gap:var(--s-1);max-width:100%;margin:0 0 var(--s-2);padding:0;border:0;background:none;color:var(--amber);font:500 var(--fs-2)/18px var(--font);cursor:pointer;transition:color var(--dur-2) ease}
.foot .p2-unsent .i{flex:none;width:16px;height:16px}
@media (hover:hover){.foot .p2-unsent:hover{color:var(--amber-hover)}}
.foot .p2-unsent:active{transform:translateY(1px)}
/* FX-8 (OQ-8b): the approval date and the approver, a quiet third line on the Approved tile */
.tile .tile-when{color:var(--text-3);font-variant-numeric:tabular-nums}
.tile .tile-when[hidden]{display:none}