/* ════════════════════════════════════════════════════════════════════════
   Koma — the sheet viewer (stage F2). Loaded after koma.css, koma-mobile.css and koma-app.css.
   Sections 2 and 6 are the viewer rules of the approved system, ported from g-polish/system.css and
   g-polish/mobile.css with the same tokens; the rest is what a real file needs and the prototype did not:
   the pan / zoom stage, loading and failure states, the comment composer, replies, the native PDF frame.
   Tokens only, logical properties only. The one exception is drawing geometry: the sheet box and its
   pins are placed with physical left / top (a drawing does not mirror), set through the CSSOM.

   CLASS INDEX
   ─ shell     .app.is-viewer   .viewer   .viewer__body   .viewer__main   .vgone
   ─ top bar   .viewer .topbar   .crumbs h1   .vtop__ed   .vtop__ball
   ─ tools     .vtools   .vtools__zoom
   ─ canvas    .vcanvas (.is-dragging .is-adding .is-static)   .vsheet (.is-gliding)   .vsheet__img   .vsheet__pdf   .vsheet__detail   .vpins
               .pin--new   .vfill   .vframe   .vtext   .vstate   .vload   .vskel   .vblock
   ─ panel     .vpanel   .vpanel__head   .vpanel__sub   .vpanel__body   .vpanel__anchor   .vpanel__foot
               .vpanel__due   .vpanel__actions(--more)   .vrail   .vrail__btn   .vrail__count   .cbar
               .vfilter   .vnote   .vcompose   .thread__replies   .thread__r   .edition__wide   .vcap   .vacts
   ─ phone     .m-viewer   .m-canvas   .m-stage   .m-plan   .m-float   .m-tools   .m-pager   .m-fab   .m-hint   .m-load
               .m-peek   .m-full   .m-step   .m-comment   .m-reply   .m-resolve   .m-decide   .m-edchip
               state on .viewer: data-m-state="peek | comment"   data-m-load
   ════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. shell: a full-window task screen ───────── */
.app.is-viewer{grid-template-columns:minmax(0,1fr)}
.app.is-viewer .app__top,.app.is-viewer .app__bottom{display:none}
:where(.k) .viewer{display:flex;flex-direction:column;flex:1;min-block-size:0;min-inline-size:0;overflow:hidden;background:var(--c-canvas)}
:where(.k) .vgone{flex:1;display:grid;place-items:center;background:var(--c-app)}
:where(.k) .viewer .topbar>.logo{flex:none}
:where(.k) .crumbs h1{flex:0 1 auto;min-inline-size:48px;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;color:var(--c-ink)}
:where(.k) .crumbs h1 .num{font-weight:500;color:var(--c-text-2);margin-inline-end:var(--sp-1)}
:where(.k) .vtop__ed{flex:none;margin-inline-start:var(--sp-2)}
:where(.k) .vtop__ed .select__native{max-inline-size:216px}
:where(.k) .vtop__ball{flex:0 2 auto;min-inline-size:72px;font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-3)}
:where(.k) .viewer .topbar>.btn,:where(.k) .viewer .topbar>.more{flex:none}

/* ───────── 2. the approved viewer (ported) ───────── */
:where(.k) .viewer .topbar{padding-inline:var(--sp-3) var(--sp-4)}
:where(.k) .vtools{display:flex;align-items:center;gap:var(--sp-1);block-size:44px;flex:none;min-inline-size:0;padding-inline:var(--sp-3);background:var(--c-surface);border-block-end:1px solid var(--c-line)}
:where(.k) .vtools .vr{margin-inline:var(--sp-2)}
:where(.k) .vtools.is-wrap{block-size:auto;min-block-size:44px;padding-block:6px;row-gap:var(--sp-1)}
:where(.k) .vtools__zoom{min-inline-size:44px;text-align:center;font-size:var(--fs-13);font-weight:500;color:var(--c-text-2)}
:where(.k) .viewer__body{flex:1;min-block-size:0;display:flex}
:where(.k) .viewer__main{flex:1;min-inline-size:0;display:flex;flex-direction:column}
:where(.k) .vload{position:absolute;inset-block-end:var(--sp-6);inset-inline:0;margin-inline:auto;inline-size:280px;display:flex;flex-direction:column;gap:var(--sp-2);color:var(--c-text-2);font-size:var(--fs-12);line-height:var(--lh-12);text-align:center}
/* side panel, docked on the inline-end side */
:where(.k) .vpanel{inline-size:var(--w-vpanel);flex:none;display:flex;flex-direction:column;min-block-size:0;background:var(--c-surface);border-inline-start:1px solid var(--c-line)}
:where(.k) .vpanel__head{display:flex;align-items:stretch;gap:var(--sp-1);padding-inline:var(--sp-2) var(--sp-2);border-block-end:1px solid var(--c-line);flex:none}
:where(.k) .vpanel__head .tabs{box-shadow:none;flex:1;padding-inline:var(--sp-2);--tabs-pad:var(--sp-2)}
:where(.k) .vpanel__head .tabs__tab{block-size:44px}
:where(.k) .vpanel__head .btn{align-self:center}
:where(.k) .vpanel__sub>span:first-child{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .vpanel__sub>.grow{display:none}
:where(.k) .vpanel__sub>.btn{flex:0 1 auto;max-inline-size:55%}
:where(.k) .vpanel__sub{display:flex;align-items:center;gap:var(--sp-3);block-size:40px;padding-inline:var(--sp-4);font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);border-block-end:1px solid var(--c-line);flex:none}
:where(.k) .vpanel__sub b{font-weight:600;color:var(--c-ink)}
:where(.k) .vpanel__body{flex:1;min-block-size:0;overflow:auto}
:where(.k) .vpanel__foot{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4) var(--sp-4);border-block-start:1px solid var(--c-line);flex:none}
:where(.k) .vpanel__due{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-2)}
:where(.k) .vpanel__due>span:not(.avatar):not(.due){flex:1 1 auto;min-inline-size:0;overflow-wrap:anywhere}
:where(.k) .vpanel__due>.grow{display:none}
:where(.k) .vpanel__due>.due{flex:none;line-height:var(--lh-13)}
/* decision buttons are sized by their labels and share the row; when the labels do not fit side by side they stack */
:where(.k) .vpanel__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
:where(.k) .vpanel__actions>.btn{flex:1 1 auto}
:where(.k) .vpanel__actions>.btn--primary{flex-grow:1.25}
/* collapsed rail */
:where(.k) .vrail{inline-size:var(--w-vrail);flex:none;display:none;flex-direction:column;align-items:center;gap:var(--sp-1);padding-block:var(--sp-2);background:var(--c-surface);border-inline-start:1px solid var(--c-line)}
:where(.k) .vrail__btn{flex-direction:column;gap:2px;block-size:44px;inline-size:36px;padding:0}
:where(.k) .vrail__count{font-size:11px;line-height:12px;font-weight:600;color:var(--c-text-3)}
:where(.k) .vrail__count--mine{color:var(--c-accent)}
:where(.k) .vrail .vr{inline-size:20px;block-size:1px;margin-block:var(--sp-1)}
:where(.k) .viewer.is-collapsed .vpanel{display:none}
:where(.k) .viewer.is-collapsed .vrail{display:flex}
:where(.k) .cbar{display:none;align-items:center;gap:var(--sp-3);block-size:48px;flex:none;padding-inline:var(--sp-4) var(--sp-3);background:var(--c-surface);border-block-start:1px solid var(--c-line);font-size:var(--fs-13);line-height:var(--lh-13)}
:where(.k) .viewer.is-collapsed .cbar{display:flex}
:where(.k) .cbar{min-inline-size:0}
:where(.k) .cbar b{font-weight:600;white-space:nowrap;flex:0 2 auto;min-inline-size:40px;overflow:hidden;text-overflow:ellipsis}
:where(.k) .cbar .mine{flex:0 1 auto}
:where(.k) .cbar__text{color:var(--c-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:48px;flex:0 4 auto}
/* ───────── 3. canvas: the stage, the sheet, pins, states ───────── */
:where(.k) .vcanvas{flex:1;min-block-size:0;position:relative;overflow:hidden;background:var(--c-canvas);touch-action:none;cursor:grab;outline:none;user-select:none;-webkit-user-select:none}
:where(.k) .vcanvas.is-dragging{cursor:grabbing}
:where(.k) .vcanvas.is-adding{cursor:crosshair}
:where(.k) .vcanvas.is-static{cursor:default;touch-action:auto;user-select:auto;-webkit-user-select:auto}
:where(.k) .vcanvas:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)}
/* on the light canvas the white sheet separates with a hairline and a very soft shadow */
:where(.k) .vsheet{position:absolute;top:0;left:0;direction:ltr;background:var(--sheet);box-shadow:0 0 0 1px var(--c-line-strong),0 1px 2px rgba(20,23,26,.05),0 4px 12px rgba(20,23,26,.05);will-change:transform}
:where(.k) .vsheet[hidden]{display:none}
:where(.k) .vsheet.is-gliding{transition:transform var(--t-base) var(--ease),width var(--t-base) var(--ease),height var(--t-base) var(--ease)}
:where(.k) .vsheet__img{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none;-webkit-user-drag:none}
/* a PDF page: the whole page on one canvas, and a sharper patch over the visible part when zoomed far in */
:where(.k) .vsheet__pdf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
:where(.k) .vsheet__detail{display:block;position:absolute;pointer-events:none}
:where(.k) .vpins{position:absolute;inset:0}
:where(.k) .vpins .pin{cursor:pointer}
:where(.k) .vpins .pin.is-selected{z-index:2}
:where(.k) .pin--new{background:var(--c-accent);z-index:3;cursor:default}
:where(.k) .vfill{position:absolute;inset:0;display:flex;background:var(--c-canvas);cursor:default}
:where(.k) .vfill[hidden]{display:none}
:where(.k) .vfill.is-loading>*{visibility:hidden}
:where(.k) .vframe{flex:1;min-inline-size:0;inline-size:100%;block-size:100%;border:0;background:var(--sheet)}
:where(.k) .vtext{flex:1;min-inline-size:0;max-inline-size:840px;margin:var(--sp-6) auto;padding:var(--sp-8);overflow:auto;background:var(--sheet);box-shadow:0 0 0 1px var(--c-line-strong),0 4px 12px rgba(20,23,26,.05);font-family:var(--sans);font-size:var(--fs-14);line-height:24px;color:var(--c-ink);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
:where(.k) .vtext:focus-visible{box-shadow:0 0 0 1px var(--c-line-strong),0 0 0 3px var(--c-accent)}
:where(.k) .vstate{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
:where(.k) .vstate>*{pointer-events:auto}
:where(.k) .vstate:empty{display:none}
:where(.k) .vskel{inline-size:min(72%,(100vh - 260px)*1.5);aspect-ratio:3/2;border-radius:0;background:var(--sheet);box-shadow:0 0 0 1px var(--c-line)}
:where(.k) .vblock{padding:var(--sp-8) var(--sp-6);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);cursor:default;user-select:text;-webkit-user-select:text}
:where(.k) .vblock .thumb{margin-block-end:var(--sp-3)}
:where(.k) .vblock .thumb .ic{inline-size:28px;block-size:28px}
:where(.k) .vblock .empty__title{overflow-wrap:anywhere}
:where(.k) .vskel-line{margin-block-start:var(--sp-3)}
:where(.k) .vskel-btn{inline-size:100%;block-size:var(--h-ctl-lg)}
:where(.k) .vpanel__head--skel{align-items:center;block-size:45px;padding-inline:var(--sp-4)}
:where(.k) .vtools>.skel{margin-inline:var(--sp-1)}
:where(.k) .viewer__main>div>.banner{flex:none}

/* ───────── 4. panel: what the prototype showed in one state only ───────── */
:where(.k) .vpanel__anchor{position:relative;block-size:0;margin-inline:var(--sp-4);flex:none}
:where(.k) .vpanel__anchor>.dialog--pop{inline-size:auto;inset-inline:0;inset-block-end:var(--sp-2)}
:where(.k) .dialog--pop.dialog--down{inset-block:calc(100% + var(--sp-2)) auto;inset-inline:auto 0}
:where(.k) .dialog--pop .dialog__body:empty{display:none}
:where(.k) .dialog--pop .dialog__body p{color:var(--c-text-2);overflow-wrap:anywhere}
:where(.k) .vpanel__foot[hidden]{display:none}
:where(.k) .vpanel__due b{font-weight:600;color:var(--c-accent)}
:where(.k) .vpanel__due .avatar .ic{inline-size:12px;block-size:12px}
:where(.k) .vpanel__actions--more>.btn{flex:1 1 0}
:where(.k) .vpanel__sub{position:sticky;inset-block-start:0;z-index:1;background:var(--c-surface)}
:where(.k) .vpanel__sub>.btn{flex:none}
:where(.k) .vfilter{display:inline-flex;align-items:center;gap:var(--sp-1);flex:none;block-size:var(--h-ctl-sm);padding-inline:var(--sp-2);border-radius:var(--r-md);color:var(--c-text-2);cursor:pointer;position:relative}
:where(.k) .vfilter:hover{background:var(--c-hover);color:var(--c-ink)}
:where(.k) .vfilter:focus-within{box-shadow:var(--focus)}
:where(.k) .vfilter .select__native{font-size:var(--fs-12);font-weight:500;max-inline-size:96px}
:where(.k) .vnote{display:flex;align-items:flex-start;gap:var(--sp-2);margin:0;padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-2);background:var(--c-subtle);border-block-end:1px solid var(--c-line)}
:where(.k) .vnote>.ic{margin-block-start:1px;color:var(--c-text-3)}
:where(.k) .vnote>span{flex:1 1 0;min-inline-size:0;padding-block:1px}
:where(.k) .vnote>.btn{margin-block:-4px}
:where(.k) .thread__text,:where(.k) .thread__r p,:where(.k) .m-comment__text{white-space:pre-wrap}
:where(.k) .thread:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)}
:where(.k) .thread__head>.grow{flex:1 1 0}
:where(.k) .thread__replies{display:flex;flex-direction:column;gap:var(--sp-3);margin-block-start:var(--sp-3);margin-inline-start:28px;padding-inline-start:var(--sp-3);border-inline-start:2px solid var(--c-accent-line)}
:where(.k) .thread__rhead{display:flex;align-items:baseline;gap:var(--sp-2);min-inline-size:0;font-size:var(--fs-12);line-height:var(--lh-12)}
:where(.k) .thread__rhead b{font-size:var(--fs-13);font-weight:600;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}
:where(.k) .thread__rhead .t3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;flex:0 100 auto}
:where(.k) .thread__rhead time{margin-inline-start:auto;flex:none;color:var(--c-text-3);white-space:nowrap}
:where(.k) .thread__r p{margin-block-start:2px;font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-ink);overflow-wrap:anywhere}
:where(.k) .thread__foot .ic{flex:none}
:where(.k) .thread__resolve{margin-inline-start:-10px}
:where(.k) .thread__actions>.grow{flex:1 1 0}
:where(.k) .vcompose{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:var(--c-accent-tint);border-block-end:1px solid var(--c-line)}
:where(.k) .vcompose .thread__head b{max-inline-size:none}
:where(.k) .vcompose__where{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin:0;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-2)}
:where(.k) .vcompose__where>.btn{margin-block:-4px;block-size:24px}
:where(.k) .vcompose .textarea{min-block-size:72px}
:where(.k) .vcompose__to{inline-size:100%;background:var(--c-surface)}
:where(.k) .vcompose__to .select__native{flex:1 1 0;min-inline-size:0;max-inline-size:none;font-weight:400}
:where(.k) .vcompose .thread__actions{justify-content:flex-end}
:where(.k) .edition__wide{grid-column:1/-1;margin:0}
:where(.k) .edition__actions--tight{margin-block-start:var(--sp-2)}
:where(.k) .edition__shown{font-size:var(--fs-12);line-height:var(--lh-12);margin-inline-end:auto}
:where(.k) .edition__note b{font-weight:600;color:var(--c-ink)}
:where(.k) .edition .thumb .ic{inline-size:20px;block-size:20px}
:where(.k) .vlink{color:var(--c-accent);font-weight:500}
:where(.k) .vlink:hover{text-decoration:underline;text-underline-offset:3px}
:where(.k) .vpre{white-space:pre-wrap}
:where(.k) .dl dd b{font-weight:600}
:where(.k) .vcap{display:flex;align-items:center;gap:var(--sp-2);margin:0;padding:var(--sp-4) var(--sp-4) var(--sp-2);border-block-start:1px solid var(--c-line);font-size:var(--fs-12);line-height:var(--lh-12);font-weight:600;color:var(--c-text-2)}
:where(.k) .vgroup{margin-inline:var(--sp-4);border:1px solid var(--c-line)}
:where(.k) .vquiet{margin:0;padding:0 var(--sp-4) var(--sp-4);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-3)}
:where(.k) .vrow{padding:var(--sp-2) var(--sp-4) var(--sp-4)}
:where(.k) .vacts{margin:0;padding:0 var(--sp-4) var(--sp-4);list-style:none;display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-2)}
:where(.k) .vacts li{display:flex;align-items:baseline;gap:var(--sp-3);min-inline-size:0}
:where(.k) .vacts li>span{flex:1 1 0;min-inline-size:0;overflow-wrap:anywhere}
:where(.k) .vacts b{font-weight:600;color:var(--c-ink)}
:where(.k) .vacts time{flex:none;font-size:var(--fs-12);color:var(--c-text-3);white-space:nowrap}
:where(.k) .cbar__pos{font-size:var(--fs-12);flex:none}
:where(.k) .cbar>.btn,:where(.k) .cbar>.pin,:where(.k) .cbar>.vr,:where(.k) .cbar>.tag{flex:none}
:where(.k) .vrail__btn .ic{flex:none}

/* ───────── 5. phone: bar pieces ───────── */
:where(.k) .m-bar__sheet{display:flex;flex-direction:column;min-inline-size:0;flex:1 1 0;padding-inline:var(--sp-1)}
:where(.k) .m-bar__sheet b{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-16);line-height:var(--lh-16);font-weight:600;white-space:nowrap}
:where(.k) .m-bar__sheet b .status{font-weight:400;font-size:var(--m-fs-13);line-height:var(--m-lh-13);overflow:hidden;text-overflow:ellipsis;min-inline-size:0}
:where(.k) .m-bar__sheet small{font-size:var(--m-fs-13);line-height:var(--m-lh-13);color:var(--c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.k) .m-edchip{display:inline-flex;align-items:center;gap:var(--sp-1);block-size:36px;padding-inline:var(--sp-3);border:1px solid var(--c-line-strong);border-radius:var(--r-lg);font-size:var(--m-fs-13);line-height:var(--m-lh-13);font-weight:600;white-space:nowrap;flex:none;position:relative}
:where(.k) .m-edchip::after{content:"";position:absolute;inset-inline:0;inset-block:calc(var(--sp-1)*-1)}
:where(.k) .m-edchip:active{background:var(--c-pressed)}
:where(.k) .m-edchip .ic{color:var(--c-text-3)}

/* ───────── 6. phone: the approved viewer (ported) ───────── */
:where(.k) .m-viewer{background:var(--c-canvas)}
:where(.k) .m-canvas{flex:1;min-block-size:0;position:relative;overflow:hidden;background:var(--c-canvas)}
:where(.k) .m-plan .pin{inline-size:32px;block-size:32px;font-size:var(--m-fs-15);box-shadow:0 0 0 2px var(--c-surface),0 1px 4px rgba(20,23,26,.3)}
:where(.k) .m-plan .pin::after{content:"";position:absolute;inset:calc(var(--sp-2)*-1);border-radius:50%}   /* 48px touch target */
:where(.k) .m-plan .pin.is-selected{box-shadow:0 0 0 2px var(--c-surface),0 0 0 6px var(--c-accent),0 0 0 8px var(--c-surface)}
:where(.k) .m-plan{box-shadow:0 0 0 1px var(--c-line-strong),0 4px 12px rgba(20,23,26,.05)}   /* the sheet edge on the light canvas */
/* floating controls: one column in the thumb corner, always above the sheet, never over the pins */
:where(.k) .m-float{position:absolute;inset-inline-start:var(--sp-3);inset-block-end:calc(var(--m-sheet-h) + var(--sp-3));display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);transition:inset-block-end var(--t-base) var(--ease),opacity var(--t-base) var(--ease);pointer-events:none}
:where(.k) .m-float>*{pointer-events:auto}
:where(.k) .m-tools{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line-strong);box-shadow:var(--e-1);overflow:hidden}
:where(.k) .m-tools__btn{display:grid;place-items:center;inline-size:var(--m-tap);block-size:var(--m-tap);color:var(--c-ink);transition:background var(--t-fast) var(--ease)}
:where(.k) .m-tools__btn+.m-tools__btn{border-block-start:1px solid var(--c-line)}
:where(.k) .m-tools__btn:active,:where(.k) .m-tools__btn[aria-pressed="true"]{background:var(--c-pressed)}
:where(.k) .m-pager{flex-direction:row;align-items:center}
:where(.k) .m-pager .m-tools__btn+.m-tools__btn{border-block-start:0}
:where(.k) .m-pager .m-tools__btn:disabled{color:var(--c-text-3);opacity:.5}
:where(.k) .m-pager__n{min-inline-size:44px;padding-inline:var(--sp-1);text-align:center;font-size:var(--m-fs-15);line-height:var(--m-lh-15);font-weight:600;color:var(--c-ink)}
:where(.k) [data-m-load] .m-pager{display:none}
:where(.k) .m-fab{display:inline-flex;align-items:center;gap:var(--sp-2);block-size:var(--m-tap-lg);padding-inline:var(--sp-4) var(--sp-5);border-radius:999px;background:var(--c-ink);color:var(--c-surface);font-size:var(--m-fs-15);line-height:var(--m-lh-15);font-weight:600;white-space:nowrap;box-shadow:0 0 0 2px var(--c-surface),var(--e-1);transition:background var(--t-fast) var(--ease)}
:where(.k) .m-fab:active{background:var(--c-ink-hover)}
:where(.k) .m-fab[aria-pressed="true"]{background:var(--c-accent)}
:where(.k) [data-m-state="comment"] .m-float{opacity:0;pointer-events:none}
:where(.k) [data-m-state="comment"] .m-float>*{pointer-events:none}
/* slow network / loading */
:where(.k) .m-load{position:absolute;inset-inline:var(--sp-8);inset-block-start:calc((100% - var(--m-sheet-h))/2 - 48px);display:none;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;color:var(--c-text-2);font-size:var(--fs-14);line-height:var(--lh-14)}
:where(.k) .m-load b{display:block;font-size:var(--fs-16);line-height:var(--lh-16);font-weight:600;color:var(--c-ink)}
:where(.k) .m-load .spinner{inline-size:24px;block-size:24px}
:where(.k) [data-m-load] .m-load{display:flex}
:where(.k) [data-m-load] .m-plan{visibility:hidden}
:where(.k) [data-m-load] .m-tools{display:none}
:where(.k) [data-m-load] .m-fab{opacity:.5;pointer-events:none}
:where(.k) [data-m-load] .m-decide .btn{opacity:.5;pointer-events:none}   /* nothing can be decided before the sheet is on screen */

/* bottom sheet */
:where(.k) .m-step .m-iconbtn{z-index:1}
:where(.k) .m-peek{display:flex;flex-direction:column;gap:var(--sp-2);inline-size:100%;flex:none;padding:0 var(--m-gutter) var(--sp-3);text-align:start}
:where(.k) .m-peek__top{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-16);line-height:var(--lh-16);font-weight:600}
:where(.k) .m-peek__top .mine--text{font-size:var(--m-fs-15)}
:where(.k) .m-peek__top .ic{margin-inline-start:auto;color:var(--c-text-2)}
:where(.k) .m-peek__line{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--m-fs-15);line-height:var(--lh-16);color:var(--c-text-2);min-inline-size:0}
:where(.k) .m-peek__line b{font-weight:600;color:var(--c-ink);flex:none}
:where(.k) .m-peek__line>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}
:where(.k) .m-full{display:none;flex-direction:column;flex:1;min-block-size:0}
:where(.k) [data-m-state="comment"] .m-peek{display:none}
:where(.k) [data-m-state="comment"] .m-full{display:flex}
:where(.k) .m-step{display:flex;align-items:center;gap:var(--sp-1);flex:none;padding-inline:var(--m-gutter) var(--sp-2);margin-block-start:calc(var(--sp-2)*-1);font-size:var(--m-fs-15);line-height:var(--m-lh-15);font-weight:600}
:where(.k) .m-step .t3{font-weight:400}
:where(.k) .m-step .m-iconbtn{inline-size:var(--m-tap);block-size:var(--m-tap)}
:where(.k) .m-full__body{flex:1;min-block-size:0;overflow-y:auto;padding:var(--sp-1) var(--m-gutter) var(--sp-3)}
:where(.k) .m-comment__head{display:flex;align-items:center;gap:var(--sp-2);min-block-size:var(--m-tap-min)}
:where(.k) .m-comment__head .pin--static{inline-size:24px;block-size:24px;font-size:var(--m-fs-13)}
:where(.k) .m-comment__who{display:flex;flex-direction:column;min-inline-size:0}
:where(.k) .m-comment__who b{font-size:var(--fs-16);line-height:var(--lh-14);font-weight:600}
:where(.k) .m-comment__who small{font-size:var(--m-fs-13);line-height:var(--m-lh-13);color:var(--c-text-3);white-space:nowrap}
:where(.k) .m-comment__text{margin-block:var(--sp-1) var(--sp-2);font-size:var(--fs-16);line-height:var(--lh-16);color:var(--c-ink);text-wrap:pretty}
:where(.k) .m-comment__foot{display:flex;align-items:center;gap:var(--sp-2);min-block-size:24px;font-size:var(--m-fs-13);line-height:var(--m-lh-13);color:var(--c-text-3)}
:where(.k) .m-reply{display:flex;align-items:center;gap:var(--sp-2);margin-block-start:var(--sp-3)}
:where(.k) .m-decide{flex:none;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--m-gutter) calc(var(--sp-4) + var(--m-safe-b));border-block-start:1px solid var(--c-line);background:var(--c-surface)}
:where(.k) .m-decide__due{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-text-2)}
:where(.k) .m-decide__due .due{font-size:var(--m-fs-13);margin-inline-start:auto}
/* in peek the decision row stays (buttons only); the due line appears when the sheet is expanded */
:where(.k) [data-m-state="peek"] .m-decide__due{display:none}
:where(.k) .m-decide__actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--sp-2)}
:where(.k) .m-decide__actions .m-btn{padding-inline:var(--sp-2)}

/* modal confirmation sheet (the deliberate second step) */

/* ───────── 7. phone: what the real viewer adds ───────── */
:where(.k) .m-stage{position:absolute;inset:0}
:where(.k) .m-canvas .vfill,:where(.k) .m-canvas>.vstate{inset-block-end:var(--m-sheet-h)}
:where(.k) .m-canvas .vtext{margin:0;padding:var(--sp-4);box-shadow:none;font-size:var(--m-fs-15);line-height:var(--m-lh-15)}
:where(.k) .m-canvas .vblock{margin-inline:var(--m-gutter)}
:where(.k) .m-canvas .vskel{inline-size:84%}
:where(.k) [data-m-load] .vsheet{visibility:hidden}
:where(.k) .m-edchip__native{position:absolute;inset:0;inline-size:100%;block-size:100%;appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;opacity:0;font-size:16px;cursor:pointer}   /* the chip shows the short label; the native list sits invisibly over it (16px: no zoom on focus in iOS) */
:where(.k) .m-edchip:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(29,85,207,.16)}
:where(.k) .m-hint{position:absolute;inset-block-start:var(--sp-3);inset-inline:var(--m-gutter);display:flex;justify-content:center;pointer-events:none}
:where(.k) .m-hint[hidden]{display:none}
:where(.k) .m-hint .tooltip{block-size:auto;min-block-size:32px;padding:var(--sp-1) var(--sp-3);white-space:normal;text-align:center;font-size:var(--m-fs-13);line-height:var(--m-lh-13)}
:where(.k) .m-peek--pick .m-peek__top{font-size:var(--m-fs-15);line-height:var(--m-lh-15)}
:where(.k) .m-peek--pick .m-peek__line{gap:var(--sp-2)}
:where(.k) .m-peek--pick .btn{block-size:var(--m-tap-min);font-size:var(--m-fs-15)}
:where(.k) .m-full__body--flush{padding:0}
:where(.k) .m-full__body .vcompose{margin-inline:calc(var(--m-gutter)*-1);background:none;border:0;padding-block:var(--sp-1) 0}
:where(.k) .m-full__body .vcompose>.thread__head{display:none}
:where(.k) .m-full__body .vcompose__where{font-size:var(--m-fs-13);line-height:var(--m-lh-13)}
:where(.k) .m-full__body .vcompose__to{block-size:var(--m-tap)}
:where(.k) .m-full__body .vcompose__to .select__native{font-size:var(--fs-16)}
:where(.k) .m-full__body .vcompose .thread__actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
:where(.k) .m-full__body .thread__replies{margin-inline-start:0;margin-block:var(--sp-2) var(--sp-3)}
:where(.k) .m-full__body .thread__r p{font-size:var(--m-fs-15);line-height:var(--m-lh-15)}
:where(.k) .m-full__body .thread__rhead b{font-size:var(--m-fs-15)}
:where(.k) .m-full__body .thread__rhead,:where(.k) .m-full__body .thread__rhead time{font-size:var(--m-fs-13)}
:where(.k) .m-comment__foot .ic{flex:none}
:where(.k) .m-resolve{display:flex;margin-block-start:var(--sp-2)}
:where(.k) .m-resolve .btn{flex:1 1 auto;border-color:var(--c-line-strong)}
:where(.k) .m-decide__due>span:not(.avatar):not(.due){flex:1 1 0;min-inline-size:0}
:where(.k) .m-decide__due b{font-weight:600;color:var(--c-accent)}
:where(.k) .m-decide__actions--one{grid-template-columns:minmax(0,1fr)}
:where(.k) .m-decide .btn:disabled{opacity:.5}
:where(.k) .m-decide .btn--primary:disabled{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-surface)}   /* waiting for the sheet: the action keeps its shape, dimmed */
:where(.k) .m-viewer .m-bar .more__menu{inset-inline-end:0}
:where(.k) .vskel-sheet{position:absolute;inset-inline:0;inset-block-end:0;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6) var(--m-gutter);background:var(--c-surface);border-start-start-radius:var(--m-r-sheet);border-start-end-radius:var(--m-r-sheet);box-shadow:var(--m-e-sheet)}
:where(.k) .vskel-sheet .skel--btn{inline-size:100%;block-size:var(--m-tap-lg)}
@media (prefers-reduced-motion:reduce){ :where(.k) .vsheet.is-gliding{transition:none} }