/* ════════════════════════════════════════════════════════════════════════
   Koma (קומה) — the approved design system (direction 2+3, "G / polish", approved 2026-10-04). See /DESIGN.md.
   Ported from design/concepts/2026-10-04/g-polish/system.css + projects.css with identical tokens.
   Every component rule is scoped with :where(.k): it applies only inside a container that carries the class
   "k" (the shell regions and the rebuilt screens), with unchanged specificity. Screens that are not rebuilt
   yet live in a ".legacy" container and are styled by app.css + themes.css; the two never mix.
   The demo drawings of the prototype (.pbox / .koma-plan / .ov) and the viewer (stage F2) are not ported.
   Direction-agnostic: logical properties only (inline/block). Works in dir="rtl" and dir="ltr".
   The only physical coordinates are drawing geometry (pins: inline left/top % on .pbox, which is an
   LTR box on purpose — a plan does not mirror).

   CLASS INDEX  (flat specificity, one class per component part; states = .is-* or ARIA)
   ─ base        .num  .ic  .ic--flip  .t2  .t3  .grow  .vr  .sr
   ─ logo        .logo  .logo__mark  .logo__word  (.logo--onink)
   ─ shell       .app  .app__main  .sidebar  .sidebar__brand  .sidebar__label  .sidebar__foot
                 .nav  .nav__item[aria-current]  .nav__count  .nav__meta  .nav__dot  .userbtn
                 .topbar  .topbar__title  .topbar__sub  .crumbs  .page  .page__body
   ─ buttons     .btn (secondary)  .btn--primary  .btn--ghost  .btn--danger  .btn--link
                 .btn--sm  .btn--lg  .btn--icon  .btn--block   states :hover/.is-hover :active/.is-active
                 :focus-visible/.is-focus  :disabled  .is-loading (+ .spinner)  [aria-pressed=true]
   ─ forms       .field  .field__ic  .field__input  .field__hint  .field--error  .field--disabled
                 .input  .textarea  .select  .form  .form__label  .form__help  .form__error  .check
   ─ navigation  .tabs  .tabs__tab[aria-selected]  .tabs__count   .seg  .seg__btn[aria-pressed]
                 .chip[aria-pressed]  .chip__count  .chip__x
   ─ indicators  .status  .status--wait|return|ok|old|draft|error   .mine  .mine--text
                 .unread  .badge  .badge--accent  .tag  .due  .due--soon  .due--late  .kbd-hint
   ─ avatar      .avatar  .avatar--xs|sm|lg  .avatar--me  .avatars
   ─ drawing     .pbox  .thumb  .thumb--sm|lg|xl  .thumb--tile  .thumb--crop  .thumb__mark
                 .pin  .pin--me  .pin--done  .pin--sm  .pin--static  .pin.is-selected  .legend
   ─ lists       .list  .list__head  .list__count  .group (white card around rows)
                 .row  .row--one  .row__flag  .row__body  .row__title  .row__num  .row__meta
                 .row__end  .row__what  .row__when
                 states: .is-hover  [aria-selected=true]/.is-selected  .is-unread  .is-done
                         .is-error  .is-disabled      (waiting-for-me = a .mine inside .row__end)
   ─ table       .table  .table--sticky  .table__group  .table__num   row states as for .row
   ─ cards       .card  .card__label  .sheet-card (+ states)  .sheet-card__thumb  .sheet-card__body
                 .project-card  .project-card__thumbs  .stepper
   ─ panels      .panel  .panel__head  .panel__body  .panel__foot
   ─ feedback    .toast  .toast--ok|error  .banner  .banner--info|warn|error|offline
                 .progress  .progress__bar  .progress--error  .skel  .skel--text|thumb|circle
                 .empty  .empty__ic  .empty__title  .empty__text  .dropzone  .dropzone.is-over
   ─ overlays    .tooltip  .menu  .menu__item  .menu__sep  .menu__label  .dialog  .dialog__head
                 .dialog__body  .dialog__foot  .scrim
   ─ inbox       .split  .split__list  .split__detail  .detail  .detail__head  .detail__title
                 .detail__meta  .detail__body  .detail__foot  .stage  .caption  .quiet-note
   ─ viewer      .viewer  .viewer__body  .vtools  .vtools__zoom  .vcanvas  .vsheet  .vload
                 .vpanel  .vpanel__head  .vpanel__sub  .vpanel__body  .vpanel__foot  .vrail
                 .thread  .thread.is-selected  .thread__head  .thread__text  .thread__foot
                 .thread__reply  .edition  .edition.is-current  .dl  .cbar
                 state classes on .viewer: .is-collapsed  .is-compare
   ════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. TOKENS ───────── */
:root{
  /* surfaces */
  --c-app:#F5F8FC;          /* app background: sidebar, list column, page gutters */
  --c-surface:#FFFFFF;      /* panels, cards, bars, paper */
  --c-subtle:#F5F8FC;       /* table header, quiet fill on white */
  --c-hover:#EEF3F9;        /* hover on white */
  --c-hover-app:#EAF0F8;    /* hover on the app background */
  --c-pressed:#D9E2EF;      /* pressed, selected-neutral */
  --c-stage:#EAF0F8;        /* light drawing stage (preview) */
  --c-canvas:#E6ECF4;       /* viewer canvas: light neutral, no decoration (approved 2026-10-04) */
  /* text */
  --c-ink:#0F1A2E;          /* primary text, primary button */
  --c-ink-hover:#1C2A44;
  --c-text-2:#3E4C66;       /* secondary text  (8.4:1 on white) */
  --c-text-3:#5B6B85;       /* tertiary text   (5.9:1 on white, 4.9:1 on --c-hover-app) */
  --c-text-off:#9AA1AB;     /* disabled only */
  /* lines */
  --c-line:#D9E2EF;         /* hairline */
  --c-line-strong:#C3CFE0;  /* control borders, thumbnails */
  /* accent — selection, links, focus, "yours" */
  --c-accent:#0A3D8F;       /* 6.4:1 on white */
  --c-accent-hover:#071F4A;
  --c-accent-tint:#E6EFFC;  /* selected row, mine marker */
  --c-accent-line:#A9C3EC;  /* selected card border */
  /* status: dot / text / tint */
  --c-wait:#9A5B00;          /* status dot only. No amber text or tint anywhere (one-blue rule) */
  --c-return:#C8383B; --c-return-text:#C8383B; --c-return-tint:#FDF0EE;
  --c-ok:#1B8A5A;            /* status dot only */
  --c-old:#9AA1AB;
  --c-danger:#C8383B; --c-danger-hover:#A82E31;
  /* drawing */
  --sheet:#FFFFFF;          /* sheet paper — always equals --plan-bg */
  --plan-ink:#1B2430;
  --rev:#D23F31;            /* revision cloud / new edition */
  /* type: size / line-height */
  --fs-12:12px; --lh-12:16px;
  --fs-13:13px; --lh-13:20px;
  --fs-14:14px; --lh-14:20px;
  --fs-16:16px; --lh-16:24px;
  --fs-20:20px; --lh-20:28px;
  --sans:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* spacing, 4px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  /* radii */
  --r-sm:4px;  /* thumbnails, tags, badges */
  --r-md:6px;  /* controls */
  --r-lg:8px;  /* cards, panels, menus */
  --r-xl:12px; /* dialog */
  /* elevation: overlays only */
  --e-1:0 1px 2px rgba(15,26,46,.06),0 4px 12px rgba(15,26,46,.08);    /* menu, popover, toast, tooltip */
  --e-2:0 2px 6px rgba(15,26,46,.06),0 16px 40px rgba(15,26,46,.16);   /* dialog */
  /* focus */
  --focus:0 0 0 2px var(--c-surface),0 0 0 4px var(--c-accent);
  /* motion */
  --t-fast:100ms; --t-base:150ms; --ease:cubic-bezier(.2,0,.2,1);
  /* metrics */
  --h-ctl:32px; --h-ctl-sm:28px; --h-ctl-lg:40px;
  --h-topbar:56px; --w-sidebar:240px; --w-vpanel:360px; --w-vrail:48px;
  --w-list:clamp(520px,36vw,600px);   /* inbox list column: 520 up to 1440 wide, grows to 600 on wider windows */
  --w-row-end:72px;                   /* minimum of a row's end column; it grows with its content … */
  --w-row-end-max:168px;              /* … up to this cap, then its labels truncate */
  --w-pop:328px;                      /* confirm popover */
  --z-menu:30; --z-pop:40; --z-toast:60;
}

/* ───────── 2. BASE ───────── */
:where(.k),:where(.k) *{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-ink);background:var(--c-app);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums;overflow-x:hidden;overflow-wrap:break-word}
:where(.k) button,:where(.k) input,:where(.k) select,:where(.k) textarea{font:inherit;color:inherit}
:where(.k) button{background:none;border:0;cursor:pointer;text-align:start}
:where(.k) a{color:inherit;text-decoration:none}
:where(.k) ul,:where(.k) ol{list-style:none}
:where(.k) h1,:where(.k) h2,:where(.k) h3,:where(.k) h4{font-size:inherit;line-height:inherit;font-weight:600}
:where(.k) [hidden]{display:none!important}
:where(.k) :focus{outline:none}
:where(.k) :focus-visible,:where(.k) .is-focus{outline:none;box-shadow:var(--focus)}
:where(.k) .num{direction:ltr;unicode-bidi:isolate}
:where(.k) .ic{inline-size:16px;block-size:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] :where(.k) .ic--flip{transform:scaleX(-1)}
[dir="ltr"] :where(.k) .ic--flip{transform:none}
:where(.k) .t2{color:var(--c-text-2)} :where(.k) .t3{color:var(--c-text-3)}
:where(.k) .grow{flex:1 1 0;min-inline-size:0}
:where(.k) .vr{inline-size:1px;block-size:20px;background:var(--c-line);flex:none}
:where(.k) .sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
/* long text: a container either wraps (.wrap) or truncates on one line (.clip). system.js adds a title to every truncated element */
:where(.k) .clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}
:where(.k) .wrap{overflow-wrap:anywhere;min-inline-size:0}

/* ───────── 3. LOGO ───────── */
:where(.k) .logo{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--c-ink)}
:where(.k) .logo__mark{inline-size:24px;block-size:24px;flex:none;display:block}
:where(.k) .logo__word{font-family:'Outfit',var(--sans);font-size:19px;line-height:24px;font-weight:800;letter-spacing:0;direction:ltr;unicode-bidi:isolate;color:var(--c-accent)}
:where(.k) .logo__word b{font-weight:inherit;color:var(--brand-box,#3FA9F5)}
:where(.k) .logo--onink{color:#fff;--brand-box:#6EC1FF;--mark-p:#fff;--mark-frame:#6EC1FF;--mark-bg:var(--c-accent)}
:where(.k) .logo--onink .logo__word{color:#fff}

/* ───────── 4. APP SHELL ───────── */
.app{display:grid;grid-template-columns:var(--w-sidebar) minmax(0,1fr);block-size:100vh;overflow:hidden}
.app__main{display:flex;flex-direction:column;min-inline-size:0;min-block-size:0}
:where(.k) .sidebar{display:flex;flex-direction:column;background:var(--c-app);border-inline-end:1px solid var(--c-line);padding:0 var(--sp-3) var(--sp-3);min-block-size:0}
:where(.k) .sidebar__brand{display:flex;align-items:center;block-size:var(--h-topbar);padding-inline:var(--sp-2);flex:none}
:where(.k) .sidebar__label{font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;color:var(--c-text-3);padding:var(--sp-5) var(--sp-2) var(--sp-2)}
:where(.k) .sidebar__foot{margin-block-start:auto;display:flex;flex-direction:column;gap:var(--sp-2)}
:where(.k) .nav{display:flex;flex-direction:column;gap:2px}
:where(.k) .nav__item{display:flex;align-items:center;gap:var(--sp-2);block-size:var(--h-ctl);min-inline-size:0;padding-inline:var(--sp-2);white-space:nowrap;border-radius:var(--r-md);color:var(--c-text-2);font-weight:500;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
:where(.k) .nav__item:hover,:where(.k) .nav__item.is-hover{background:var(--c-hover-app);color:var(--c-ink)}
:where(.k) .nav__item[aria-current="page"]{background:var(--c-surface);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-line)}
:where(.k) .nav__item[aria-current="page"]:focus-visible{box-shadow:var(--focus)}
:where(.k) .nav__label{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
:where(.k) .nav__count{margin-inline-start:auto;flex:none;font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;color:var(--c-text-3)}
:where(.k) .nav__item[aria-current="page"] .nav__count{color:var(--c-accent);font-weight:600}
:where(.k) .nav__meta{margin-inline-start:auto;flex:0 0 auto;max-inline-size:45%;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-12);line-height:var(--lh-12);font-weight:400;color:var(--c-text-3)}
:where(.k) .nav__dot{inline-size:16px;block-size:16px;flex:none;display:grid;place-items:center}
:where(.k) .nav__dot::before{content:"";inline-size:8px;block-size:8px;border-radius:2px;border:1.5px solid currentColor;opacity:.7}
:where(.k) .userbtn{display:flex;align-items:center;gap:var(--sp-2);inline-size:100%;padding:var(--sp-2);border-radius:var(--r-md);border-block-start:0;transition:background var(--t-fast) var(--ease)}
:where(.k) .userbtn:hover,:where(.k) .userbtn.is-hover{background:var(--c-hover-app)}
:where(.k) .userbtn>span:not(.avatar){flex:1 1 auto;min-inline-size:0}
:where(.k) .userbtn b,:where(.k) .userbtn small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .userbtn b{display:block;font-size:var(--fs-13);line-height:var(--lh-12);font-weight:600}
:where(.k) .userbtn small{display:block;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .userbtn .ic{margin-inline-start:auto;color:var(--c-text-3)}
:where(.k) .topbar{display:flex;align-items:center;gap:var(--sp-3);block-size:var(--h-topbar);flex:none;padding-inline:var(--sp-6);background:var(--c-surface);border-block-end:1px solid var(--c-line)}
:where(.k) .topbar__title{font-size:var(--fs-20);line-height:var(--lh-20);font-weight:700;letter-spacing:-.005em;white-space:nowrap;flex:0 0 auto;max-inline-size:40%;overflow:hidden;text-overflow:ellipsis}
:where(.k) .topbar__sub{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-text-2);white-space:nowrap;flex:0 4 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
:where(.k) .topbar__search{flex:0 1 300px;min-inline-size:168px}
:where(.k) .topbar .status,:where(.k) .topbar .mine{flex:0 1 auto;min-inline-size:72px}
:where(.k) .topbar__sub b{font-weight:600;color:var(--c-ink)}
:where(.k) .crumbs{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-3);white-space:nowrap;flex:0 8 auto;min-inline-size:152px}
:where(.k) .crumbs a{flex:0 3 auto;min-inline-size:24px;overflow:hidden;text-overflow:ellipsis}
:where(.k) .crumbs b{flex:0 1 auto;min-inline-size:48px;overflow:hidden;text-overflow:ellipsis}
:where(.k) .crumbs a:hover{color:var(--c-ink)}
:where(.k) .crumbs b{font-weight:600;color:var(--c-ink);font-size:var(--fs-14)}
:where(.k) .page{flex:1;min-block-size:0;overflow:auto}
:where(.k) .page__body{padding:var(--sp-6);max-inline-size:1200px}

/* ───────── 5. BUTTONS ───────── */
:where(.k) .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;block-size:var(--h-ctl);padding-inline:var(--sp-3);border-radius:var(--r-md);border:1px solid var(--c-line-strong);background:var(--c-surface);color:var(--c-ink);font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500;white-space:nowrap;flex:none;min-inline-size:0;max-inline-size:100%;position:relative;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
:where(.k) .btn__label{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
:where(.k) .btn:hover,:where(.k) .btn.is-hover{background:var(--c-hover);border-color:#BFC5CD}
:where(.k) .btn:active,:where(.k) .btn.is-active,:where(.k) .btn[aria-pressed="true"]{background:var(--c-pressed);border-color:#BFC5CD}
:where(.k) .btn--primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
:where(.k) .btn--primary:hover,:where(.k) .btn--primary.is-hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}
:where(.k) .btn--primary:active,:where(.k) .btn--primary.is-active{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}
:where(.k) .btn--ghost{border-color:transparent;background:transparent;color:var(--c-text-2)}
:where(.k) .btn--ghost:hover,:where(.k) .btn--ghost.is-hover{background:var(--c-hover);border-color:transparent;color:var(--c-ink)}
:where(.k) .btn--ghost:active,:where(.k) .btn--ghost.is-active,:where(.k) .btn--ghost[aria-pressed="true"]{background:var(--c-pressed);border-color:transparent;color:var(--c-ink)}
:where(.k) .btn--danger{background:var(--c-surface);border-color:#E7B4AF;color:var(--c-return-text)}
:where(.k) .btn--danger:hover,:where(.k) .btn--danger.is-hover{background:var(--c-return-tint);border-color:#DC938C}
:where(.k) .btn--danger:active,:where(.k) .btn--danger.is-active{background:#FBE1DE;border-color:#DC938C}
:where(.k) .btn--danger.btn--primary{background:var(--c-danger);border-color:var(--c-danger);color:#fff}
:where(.k) .btn--danger.btn--primary:hover,:where(.k) .btn--danger.btn--primary.is-hover{background:var(--c-danger-hover);border-color:var(--c-danger-hover)}
:where(.k) .btn--danger.btn--primary:active,:where(.k) .btn--danger.btn--primary.is-active{background:#8E2019;border-color:#8E2019}
:where(.k) .btn--link{border-color:transparent;background:transparent;color:var(--c-accent);padding-inline:var(--sp-2)}
:where(.k) .btn--link:hover,:where(.k) .btn--link.is-hover{background:var(--c-accent-tint);border-color:transparent;color:var(--c-accent-hover)}
:where(.k) .btn--sm{block-size:var(--h-ctl-sm);padding-inline:10px;font-size:var(--fs-12)}
:where(.k) .btn--lg{block-size:var(--h-ctl-lg);padding-inline:var(--sp-4);font-size:var(--fs-14)}
:where(.k) .btn--icon{inline-size:var(--h-ctl);padding-inline:0}
:where(.k) .btn--icon.btn--sm{inline-size:var(--h-ctl-sm)}
:where(.k) .btn--block{inline-size:100%}
:where(.k) .btn:disabled,:where(.k) .btn.is-disabled{background:var(--c-subtle);border-color:var(--c-line);color:var(--c-text-off);cursor:not-allowed}
:where(.k) .btn--ghost:disabled,:where(.k) .btn--link:disabled{background:transparent;border-color:transparent}
:where(.k) .btn.is-loading{color:transparent!important;pointer-events:none}
:where(.k) .btn.is-loading .ic{visibility:hidden}
:where(.k) .btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;inline-size:14px;block-size:14px;border-radius:50%;border:2px solid var(--c-text-3);border-block-start-color:transparent;animation:k-spin .7s linear infinite}
:where(.k) .btn--primary.is-loading::after{border-color:#fff;border-block-start-color:transparent}
:where(.k) .spinner{inline-size:16px;block-size:16px;flex:none;border-radius:50%;border:2px solid var(--c-line-strong);border-block-start-color:var(--c-ink);animation:k-spin .7s linear infinite}
@keyframes k-spin{to{transform:rotate(360deg)}}

/* ───────── 6. FORMS ───────── */
:where(.k) .field{display:flex;align-items:center;gap:var(--sp-2);block-size:var(--h-ctl);padding-inline:10px;border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:where(.k) .field:hover,:where(.k) .field.is-hover{border-color:#B4BBC4}
:where(.k) .field:focus-within,:where(.k) .field.is-focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(29,85,207,.16)}
:where(.k) .field__ic{color:var(--c-text-3)}
:where(.k) .field__input{flex:1;min-inline-size:0;border:0;background:none;outline:0;font-size:var(--fs-13);line-height:var(--lh-13)}
:where(.k) .field__input:focus-visible{box-shadow:none}
:where(.k) .field__input::placeholder,:where(.k) .textarea::placeholder,:where(.k) .input::placeholder{color:var(--c-text-3);opacity:1}
:where(.k) .field__input::-webkit-search-cancel-button{display:none}
:where(.k) .field__hint{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .field--lg{block-size:var(--h-ctl-lg)}
:where(.k) .field--error,:where(.k) .field--error:hover{border-color:var(--c-return)}
:where(.k) .field--error:focus-within,:where(.k) .field--error.is-focus{border-color:var(--c-return);box-shadow:0 0 0 3px rgba(208,59,47,.16)}
:where(.k) .field--disabled,:where(.k) .field--disabled:hover{background:var(--c-subtle);border-color:var(--c-line);color:var(--c-text-off);cursor:not-allowed}
:where(.k) .field--disabled .field__input::placeholder{color:var(--c-text-off)}
:where(.k) .textarea{display:block;inline-size:100%;min-block-size:56px;padding:6px 10px;border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);font-size:var(--fs-13);line-height:var(--lh-13);resize:none;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:where(.k) .textarea:hover{border-color:#B4BBC4}
:where(.k) .textarea:focus,:where(.k) .textarea.is-focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(29,85,207,.16)}
:where(.k) .select{display:inline-flex;align-items:center;gap:var(--sp-2);block-size:var(--h-ctl);min-inline-size:0;max-inline-size:100%;padding-inline:var(--sp-3) var(--sp-2);border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);font-size:var(--fs-13);line-height:var(--lh-13);white-space:nowrap;flex:none;transition:background var(--t-fast) var(--ease)}
:where(.k) .select:hover,:where(.k) .select.is-hover{background:var(--c-hover)}
:where(.k) .select b{font-weight:600}
:where(.k) .select__label{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
:where(.k) .select .ic{color:var(--c-text-3)}
:where(.k) .form{display:flex;flex-direction:column;gap:var(--sp-1)}
:where(.k) .form__label{font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500}
:where(.k) .form__help{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .form__error{display:flex;align-items:flex-start;gap:var(--sp-1);font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-return-text)}
:where(.k) .check{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-13);line-height:var(--lh-13);cursor:pointer}
:where(.k) .check input{appearance:none;inline-size:16px;block-size:16px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:var(--c-surface);display:grid;place-items:center;flex:none}
:where(.k) .check input:checked{background:var(--c-accent);border-color:var(--c-accent)}
:where(.k) .check input:checked::after{content:"";inline-size:8px;block-size:4px;border:solid #fff;border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg)}

/* ───────── 7. TABS · SEGMENTED · CHIPS ───────── */
/* tabs never wrap and never push: when they do not fit, the strip scrolls and system.js shows a chevron + fade at the side that has more */
:where(.k) .tabs{display:flex;align-items:stretch;gap:var(--sp-1);min-inline-size:0;box-shadow:inset 0 -1px 0 var(--c-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative}
:where(.k) .tabs::-webkit-scrollbar{display:none}
:where(.k) .tabs__nav{position:sticky;z-index:1;flex:none;display:grid;place-items:center;inline-size:40px;color:var(--c-text-2);cursor:pointer}
:where(.k) .tabs__nav:hover{color:var(--c-ink)}
:where(.k) .tabs__nav .ic{position:relative}
:where(.k) .tabs__nav--prev{inset-inline-start:calc(var(--tabs-pad,0px)*-1);margin-inline-end:-40px;justify-items:start;padding-inline-start:var(--sp-1)}
:where(.k) .tabs__nav--next{inset-inline-end:calc(var(--tabs-pad,0px)*-1);margin-inline-start:-40px;justify-items:end;padding-inline-end:var(--sp-1)}
/* the fade is a physical gradient, so it is paired per direction like .ic--flip */
[dir="ltr"] :where(.k) .tabs__nav--next,[dir="rtl"] :where(.k) .tabs__nav--prev{background:linear-gradient(to left,var(--tabs-bg,var(--c-surface)) 55%,transparent)}
[dir="ltr"] :where(.k) .tabs__nav--prev,[dir="rtl"] :where(.k) .tabs__nav--next{background:linear-gradient(to right,var(--tabs-bg,var(--c-surface)) 55%,transparent)}
:where(.k) .tabs__tab{display:inline-flex;align-items:center;gap:6px;block-size:40px;padding-inline:var(--sp-2);font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500;color:var(--c-text-2);white-space:nowrap;border-block-end:2px solid transparent;flex:none;border-radius:var(--r-sm) var(--r-sm) 0 0;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
:where(.k) .tabs__tab:hover,:where(.k) .tabs__tab.is-hover{color:var(--c-ink);border-block-end-color:var(--c-line-strong)}
:where(.k) .tabs__tab[aria-selected="true"]{color:var(--c-ink);font-weight:600;border-block-end-color:var(--c-accent)}
:where(.k) .tabs__tab:focus-visible,:where(.k) .tabs__nav:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)}
:where(.k) .tabs__tab:disabled{color:var(--c-text-off);cursor:not-allowed;border-block-end-color:transparent}
:where(.k) .tabs__count{font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;color:var(--c-text-3)}
:where(.k) .tabs__tab[aria-selected="true"] .tabs__count{color:var(--c-text-2)}
:where(.k) .seg{display:inline-flex;padding:2px;gap:2px;border-radius:var(--r-md);background:var(--c-pressed);flex:none}
:where(.k) .seg__btn{display:inline-flex;align-items:center;gap:6px;block-size:28px;padding-inline:10px;border-radius:var(--r-sm);font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500;color:var(--c-text-2);white-space:nowrap;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
:where(.k) .seg__btn:hover,:where(.k) .seg__btn.is-hover{color:var(--c-ink)}
:where(.k) .seg__btn[aria-pressed="true"]{background:var(--c-surface);color:var(--c-ink);box-shadow:0 0 0 1px rgba(15,26,46,.08)}
:where(.k) .seg__btn[aria-pressed="true"]:focus-visible{box-shadow:var(--focus)}
:where(.k) .chip{display:inline-flex;align-items:center;gap:6px;block-size:var(--h-ctl-sm);padding-inline:10px;border-radius:999px;border:1px solid var(--c-line-strong);background:var(--c-surface);font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500;color:var(--c-text-2);white-space:nowrap;flex:none;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
:where(.k) .chip:hover,:where(.k) .chip.is-hover{background:var(--c-hover);color:var(--c-ink)}
:where(.k) .chip[aria-pressed="true"]{background:var(--c-accent-tint);border-color:var(--c-accent-line);color:var(--c-accent)}
:where(.k) .chip:disabled{background:var(--c-subtle);border-color:var(--c-line);color:var(--c-text-off);cursor:not-allowed}
:where(.k) .chip__count{font-size:var(--fs-12);font-weight:500;color:var(--c-text-3)}
:where(.k) .chip[aria-pressed="true"] .chip__count{color:var(--c-accent)}
:where(.k) .chip__x{inline-size:12px;block-size:12px;margin-inline-end:-2px}

/* ───────── 8. INDICATORS ───────── */
:where(.k) .status{display:inline-block;position:relative;vertical-align:bottom;min-inline-size:0;max-inline-size:100%;padding-inline-start:14px;font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.k) .status::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:-4px;inline-size:8px;block-size:8px;border-radius:50%;background:var(--c-old)}
:where(.k) .status--wait::before{background:var(--c-wait)}
:where(.k) .status--return::before{background:var(--c-return)}
:where(.k) .status--ok::before{background:var(--c-ok)}
:where(.k) .status--old{color:var(--c-text-3)}
:where(.k) .status--draft::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c-old)}
:where(.k) .status--error{color:var(--c-return-text)}
:where(.k) .status--error::before{background:var(--c-return)}
:where(.k) .status--sm{font-size:var(--fs-12);line-height:var(--lh-12)}
/* "waiting for me / אצלך": the single place the accent is used as a fill */
:where(.k) .mine{display:inline-block;vertical-align:bottom;block-size:20px;min-inline-size:0;max-inline-size:100%;padding-inline:6px;border-radius:var(--r-sm);background:var(--c-accent-tint);color:var(--c-accent);font-size:var(--fs-12);line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
:where(.k) .mine--text{display:inline;vertical-align:baseline;white-space:normal;background:none;padding-inline:0;block-size:auto;max-inline-size:none;overflow:visible;font-size:inherit;line-height:inherit}
/* on a tinted (selected) surface the marker and tags turn white */
:where(.k) .row.is-selected .mine,:where(.k) .row[aria-selected="true"] .mine,:where(.k) .table .is-selected .mine,:where(.k) .table [aria-selected="true"] .mine,:where(.k) .thread.is-selected .mine,:where(.k) .edition.is-current .mine,:where(.k) .edition.is-current .tag{background:var(--c-surface)}
:where(.k) .unread{display:block;inline-size:6px;block-size:6px;border-radius:50%;background:var(--c-accent);flex:none}
:where(.k) .badge{display:inline-grid;place-items:center;min-inline-size:18px;block-size:18px;padding-inline:5px;border-radius:999px;background:var(--c-pressed);color:var(--c-text-2);font-size:11px;line-height:1;font-weight:600;flex:none}
:where(.k) .badge--accent{background:var(--c-accent);color:#fff}
:where(.k) .tag{display:inline-block;vertical-align:bottom;block-size:20px;min-inline-size:0;max-inline-size:100%;padding-inline:6px;border-radius:var(--r-sm);background:var(--c-hover);color:var(--c-text-2);font-size:var(--fs-12);line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
:where(.k) .due{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);white-space:nowrap}
/* one-blue rule: a near date is neutral emphasis, an overdue one uses the single attention colour. No amber, no red */
:where(.k) .due--soon{color:var(--c-ink);font-weight:500}
:where(.k) .due--late{color:var(--c-accent);font-weight:600}

/* ───────── 9. AVATAR ───────── */
:where(.k) .avatar{display:inline-grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--c-pressed);color:var(--c-text-2);font-size:11px;line-height:1;font-weight:600;flex:none}
:where(.k) .avatar--xs{inline-size:20px;block-size:20px;font-size:9px}
:where(.k) .avatar--sm{inline-size:24px;block-size:24px;font-size:10px}
:where(.k) .avatar--lg{inline-size:36px;block-size:36px;font-size:13px}
:where(.k) .avatar--me{background:var(--c-accent-tint);color:var(--c-accent)}
:where(.k) .avatars{display:inline-flex}
:where(.k) .avatars .avatar{box-shadow:0 0 0 2px var(--c-surface)}
:where(.k) .avatars .avatar+.avatar{margin-inline-start:-6px}

/* ───────── 10. DRAWING: plan box, thumbnails, pins ───────── */
/* .pbox is an LTR geometry box (a plan does not mirror). Children reset to the document direction. */

/* discipline overlays injected by system.js on [data-ov] (drawing content, not UI) */

/* thumbnail: default 60×40 · --sm 48×32 · --lg 84×56 · --xl 120×80 */
:where(.k) .thumb{position:relative;display:block;flex:none;inline-size:60px;block-size:40px;overflow:hidden;background:var(--sheet);border:1px solid var(--c-line-strong);border-radius:var(--r-sm);direction:ltr}

:where(.k) .thumb--sm{inline-size:48px;block-size:32px}

:where(.k) .thumb--lg{inline-size:84px;block-size:56px}

:where(.k) .thumb--xl{inline-size:120px;block-size:80px}

:where(.k) .thumb--tile{display:grid;place-items:center;background:var(--c-subtle);border-color:var(--c-line);color:var(--c-text-3);direction:inherit}
:where(.k) .thumb--old{opacity:.55}
/* marker slot: a small flag on the thumbnail's corner (unread / mine / count) */
:where(.k) .thumb__mark{position:absolute;inset-block-start:3px;inset-inline-end:3px;inline-size:8px;block-size:8px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 1.5px #fff}

/* pins: positioned with inline style="left:X%;top:Y%" (drawing coordinates) */
:where(.k) .pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--c-ink);color:#fff;font-size:var(--fs-12);font-weight:600;line-height:1;box-shadow:0 0 0 2px #fff;transition:box-shadow var(--t-fast) var(--ease)}
:where(.k) .pin:hover,:where(.k) .pin.is-hover{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(15,26,46,.25)}
:where(.k) .pin--me{background:var(--c-accent)}
:where(.k) .pin--done{background:#7A828D}
:where(.k) .pin.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--c-accent)}
:where(.k) .pin:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--c-accent)}
:where(.k) .pin--sm{inline-size:12px;block-size:12px;font-size:0;box-shadow:0 0 0 1.5px #fff}
:where(.k) .pin--static{position:static;transform:none;inline-size:20px;block-size:20px;font-size:11px;box-shadow:none;flex:none}
:where(.k) .legend{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-2);white-space:nowrap}
:where(.k) .legend{min-inline-size:0;flex:0 1 auto}
:where(.k) .legend span{display:inline-block;position:relative;min-inline-size:0;max-inline-size:100%;padding-inline-start:20px;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
:where(.k) .legend span::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:-1px;inline-size:14px;block-size:2px;border-radius:1px;background:var(--rev)}
:where(.k) .legend .legend__old::before{background:var(--c-accent)}

/* ───────── 11. LISTS & ROWS ───────── */
:where(.k) .list{display:flex;flex-direction:column}
:where(.k) .list__head{display:flex;align-items:center;gap:var(--sp-2);block-size:36px;min-inline-size:0;white-space:nowrap;padding-inline:var(--sp-4);font-size:var(--fs-12);line-height:var(--lh-12);font-weight:600;color:var(--c-text-2)}
:where(.k) .list__head>span:first-child{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
:where(.k) .list__count{font-weight:500;color:var(--c-text-3);flex:none}
:where(.k) .group{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden}
:where(.k) .group>li+li,:where(.k) .group>.row+.row{border-block-start:1px solid var(--c-line)}
/* two-line row: 72px. columns = lead (thumb/avatar) · body · end. .row__flag = unread dot in the start gutter */
:where(.k) .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--sp-3);inline-size:100%;min-block-size:72px;padding:var(--sp-3) var(--sp-4);background:var(--c-surface);color:var(--c-ink);position:relative;transition:background var(--t-fast) var(--ease)}
:where(.k) .row:hover,:where(.k) .row.is-hover{background:var(--c-hover)}
:where(.k) .row:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)}
:where(.k) .row[aria-selected="true"],:where(.k) .row.is-selected{background:var(--c-accent-tint)}
:where(.k) .row__flag{position:absolute;inset-inline-start:5px;inset-block-start:50%;margin-block-start:-3px;inline-size:6px;block-size:6px}
:where(.k) .row__body{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
:where(.k) .row__title{display:flex;align-items:baseline;gap:var(--sp-2);font-size:var(--fs-14);line-height:var(--lh-14);font-weight:500;min-inline-size:0}
:where(.k) .row__title>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}
:where(.k) .row__num{font-weight:500;color:var(--c-text-2);flex:0 0 auto;max-inline-size:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .row__meta{font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .row__end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-inline-size:var(--w-row-end);max-inline-size:var(--w-row-end-max)}
:where(.k) .row__end>*{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis}
:where(.k) .row.is-unread .row__title{font-weight:600}
:where(.k) .row.is-unread .row__num{color:var(--c-ink)}
:where(.k) .row.is-unread .row__meta{color:var(--c-text-2)}
:where(.k) .row.is-done .row__title,:where(.k) .row.is-done .row__num{color:var(--c-text-2);font-weight:400}
:where(.k) .row.is-error .row__meta{color:var(--c-return-text)}
:where(.k) .row.is-disabled{pointer-events:none}
:where(.k) .row.is-disabled .row__title,:where(.k) .row.is-disabled .row__num,:where(.k) .row.is-disabled .row__meta,:where(.k) .row.is-disabled .due{color:var(--c-text-off)}
:where(.k) .row.is-disabled .thumb{opacity:.45}
/* compact two-line row: 64px (FYI lists, small thumbnail) */
:where(.k) .row--compact{min-block-size:64px;padding-block:var(--sp-2)}
/* one-line row: 40px */
:where(.k) .row--one{display:flex;gap:var(--sp-3);min-block-size:40px;padding-block:0;padding-inline:var(--sp-4);font-size:var(--fs-13);line-height:var(--lh-13)}
:where(.k) .row--one .ic{color:var(--c-text-3)}
:where(.k) .row--one .row__num{min-inline-size:64px}
:where(.k) .row__what{color:var(--c-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}
:where(.k) .row__when{margin-inline-start:auto;color:var(--c-text-3);font-size:var(--fs-12);white-space:nowrap;flex:none}

/* ───────── 12. TABLE ───────── */
:where(.k) .table{inline-size:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-13);line-height:var(--lh-13);background:var(--c-surface)}
:where(.k) .table th{block-size:36px;padding-inline:var(--sp-3);text-align:start;font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;color:var(--c-text-3);background:var(--c-subtle);border-block-end:1px solid var(--c-line);white-space:nowrap}
:where(.k) .table--sticky th{position:sticky;inset-block-start:0;z-index:1}
:where(.k) .table td{block-size:44px;padding-inline:var(--sp-3);border-block-end:1px solid var(--c-line);vertical-align:middle;white-space:nowrap;transition:background var(--t-fast) var(--ease)}
:where(.k) .table th:first-child,:where(.k) .table td:first-child{padding-inline-start:var(--sp-4)}
:where(.k) .table th:last-child,:where(.k) .table td:last-child{padding-inline-end:var(--sp-4)}
:where(.k) .table tbody tr:hover td,:where(.k) .table tr.is-hover td{background:var(--c-subtle)}
:where(.k) .table tr[aria-selected="true"] td,:where(.k) .table tr.is-selected td{background:var(--c-accent-tint)}
:where(.k) .table tr.is-unread .table__title{font-weight:600}
:where(.k) .table tr.is-disabled td{color:var(--c-text-off)}
:where(.k) .table__group td{block-size:32px;background:var(--c-surface);font-size:var(--fs-12);font-weight:600;color:var(--c-text-2);padding-block-start:var(--sp-2)}
:where(.k) .table__num{font-weight:500;color:var(--c-text-2)}
:where(.k) .table__title{font-weight:500;color:var(--c-ink)}
:where(.k) .table__end{text-align:end}

/* ───────── 13. CARDS ───────── */
:where(.k) .card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4)}
:where(.k) .card__label{font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;color:var(--c-text-3);margin-block-end:var(--sp-1)}
/* note: a labelled piece of text inside a card (request, return reason, task source). Head wraps, text wraps */
:where(.k) .note__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px var(--sp-3);font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .note__head b{font-weight:500}
:where(.k) .note__head span:last-child{margin-inline-start:auto}
:where(.k) .note__text{margin-block-start:var(--sp-1);overflow-wrap:anywhere}
:where(.k) .note__text+.note__text{margin-block-start:var(--sp-2)}
:where(.k) .sheet-card{display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;position:relative;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:where(.k) .sheet-card:hover,:where(.k) .sheet-card.is-hover{border-color:var(--c-line-strong);box-shadow:0 1px 2px rgba(15,26,46,.06)}
:where(.k) .sheet-card[aria-selected="true"],:where(.k) .sheet-card.is-selected{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
:where(.k) .sheet-card:focus-visible{box-shadow:var(--focus)}
:where(.k) .sheet-card__thumb{display:block;position:relative;padding:var(--sp-3);background:var(--c-stage);border-block-end:1px solid var(--c-line);direction:ltr}

:where(.k) .sheet-card__mark{position:absolute;inset-block-start:var(--sp-2);inset-inline-end:var(--sp-2);direction:inherit}
:where(.k) .sheet-card__body{display:flex;flex-direction:column;gap:2px;padding:10px var(--sp-3) var(--sp-3)}
:where(.k) .sheet-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-12);line-height:var(--lh-12)}
:where(.k) .sheet-card__num{font-weight:500;color:var(--c-text-2);font-size:var(--fs-13)}
:where(.k) .sheet-card__title{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .sheet-card__meta{display:flex;align-items:center;gap:6px;margin-block-start:6px;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);white-space:nowrap}

:where(.k) .sheet-card.is-old .sheet-card__title{color:var(--c-text-2);font-weight:400}
:where(.k) .sheet-card.is-error{border-color:#E7B4AF}
:where(.k) .project-card{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-4);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:where(.k) .project-card:hover,:where(.k) .project-card.is-hover{border-color:var(--c-line-strong);box-shadow:0 1px 2px rgba(15,26,46,.06)}
:where(.k) .project-card__name{font-size:var(--fs-16);line-height:var(--lh-16);font-weight:600}
:where(.k) .project-card__sub{font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-3)}
:where(.k) .project-card__thumbs{display:flex;gap:var(--sp-2)}
:where(.k) .project-card__foot{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);padding-block-start:var(--sp-3);border-block-start:1px solid var(--c-line);white-space:nowrap}
:where(.k) .stepper{display:flex;gap:3px}
:where(.k) .stepper i{inline-size:16px;block-size:3px;border-radius:2px;background:var(--c-pressed)}
:where(.k) .stepper i.is-on{background:var(--c-ink)}

/* ───────── 14. PANEL ───────── */
:where(.k) .panel{display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);min-block-size:0;overflow:hidden}
:where(.k) .panel__head{display:flex;align-items:center;gap:var(--sp-2);min-block-size:48px;padding-inline:var(--sp-4);border-block-end:1px solid var(--c-line);font-weight:600;flex:none}
:where(.k) .panel__body{padding:var(--sp-4);flex:1;min-block-size:0;overflow:auto}
:where(.k) .panel__foot{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--c-line);flex:none}

/* ───────── 15. FEEDBACK ───────── */
:where(.k) .toast{display:inline-flex;align-items:center;gap:var(--sp-3);min-block-size:44px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--c-ink);color:#fff;font-size:var(--fs-13);line-height:var(--lh-13);box-shadow:var(--e-1);max-inline-size:440px}
:where(.k) .toast .ic{color:#C9CED6}
:where(.k) .toast--ok .ic:first-child{color:#6FD19C}
:where(.k) .toast--error .ic:first-child{color:#FF9D94}
:where(.k) .toast__action{font-weight:600;color:#fff;padding:2px 6px;margin-inline-start:var(--sp-2);border-radius:var(--r-sm);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
:where(.k) .toast__action:hover{background:rgba(255,255,255,.12)}
:where(.k) .banner{display:flex;align-items:center;gap:var(--sp-3);min-inline-size:0;min-block-size:40px;padding:var(--sp-2) var(--sp-4);font-size:var(--fs-13);line-height:var(--lh-13);background:var(--c-subtle);color:var(--c-text-2);border-block-end:1px solid var(--c-line)}
:where(.k) .banner b{font-weight:600;color:var(--c-ink)}
:where(.k) .banner--inline{border:1px solid var(--c-line);border-radius:var(--r-lg)}
:where(.k) .banner--info{background:var(--c-accent-tint);border-color:#D5E0F8;color:#173F99}
:where(.k) .banner--info b{color:#123378}
/* a warning is a neutral block; when it needs the user's attention use --info (the one blue). No amber tint */
:where(.k) .banner--warn{background:var(--c-subtle);border-color:var(--c-line-strong);color:var(--c-text-2)}
:where(.k) .banner--warn b{color:var(--c-ink)}
:where(.k) .banner--error{background:var(--c-return-tint);border-color:#F3CFCB;color:var(--c-return-text)}
:where(.k) .banner--error b{color:#8A1F17}
:where(.k) .banner--offline{background:var(--c-ink);border-color:var(--c-ink);color:#D5D9DF}
:where(.k) .banner--offline b{color:#fff}
:where(.k) .banner>span{min-inline-size:0;overflow-wrap:anywhere}
:where(.k) .banner__action{margin-inline-start:auto;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
:where(.k) .progress{display:block;inline-size:100%;block-size:4px;border-radius:2px;background:var(--c-pressed);overflow:hidden}
:where(.k) .progress__bar{display:block;block-size:100%;inline-size:var(--p,0%);border-radius:2px;background:var(--c-ink);transition:inline-size var(--t-base) var(--ease)}
:where(.k) .progress--error .progress__bar{background:var(--c-return)}
:where(.k) .progress--onink{background:rgba(255,255,255,.18)}
:where(.k) .progress--onink .progress__bar{background:#fff}
:where(.k) .skel{display:block;border-radius:var(--r-sm);background:var(--c-pressed);animation:k-pulse 1.4s ease-in-out infinite}
:where(.k) .skel--text{block-size:10px;border-radius:5px}
:where(.k) .skel--thumb{inline-size:60px;block-size:40px;flex:none}
:where(.k) .skel--circle{border-radius:50%}
@keyframes k-pulse{50%{opacity:.55}}
:where(.k) .empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-1);padding:var(--sp-10) var(--sp-6);max-inline-size:400px;margin-inline:auto}
:where(.k) .empty__ic{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:var(--r-lg);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text-2);margin-block-end:var(--sp-3)}
:where(.k) .empty__ic .ic{inline-size:20px;block-size:20px}
:where(.k) .empty__title{font-size:var(--fs-16);line-height:var(--lh-16);font-weight:600}
:where(.k) .empty__text{font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-2);text-wrap:balance}
:where(.k) .empty__actions{display:flex;gap:var(--sp-2);margin-block-start:var(--sp-4)}
:where(.k) .empty--sm{padding:var(--sp-6) var(--sp-4)}
:where(.k) .empty--sm .empty__title{font-size:var(--fs-14);line-height:var(--lh-14)}
:where(.k) .dropzone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-1);padding:var(--sp-8) var(--sp-6);border:1px dashed #B4BBC4;border-radius:var(--r-lg);background:var(--c-surface);transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
:where(.k) .dropzone.is-over{background:var(--c-accent-tint);border-color:var(--c-accent)}
:where(.k) .dropzone--row{flex-direction:row;align-items:center;text-align:start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
:where(.k) .dropzone__txt{min-inline-size:0;overflow-wrap:anywhere}
:where(.k) .dropzone--row .dropzone__txt{flex:1 1 0}
:where(.k) .dropzone:not(.dropzone--row) .btn{margin-block-start:var(--sp-3)}

/* ───────── 16. OVERLAYS ───────── */
:where(.k) .tooltip{display:inline-flex;align-items:center;gap:var(--sp-2);block-size:28px;padding-inline:var(--sp-2);border-radius:var(--r-md);background:var(--c-ink);color:#fff;font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;white-space:nowrap;box-shadow:var(--e-1)}
:where(.k) .tooltip span{color:#B9C0C9}
:where(.k) .menu{display:flex;flex-direction:column;min-inline-size:216px;padding:var(--sp-1);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);box-shadow:var(--e-1)}
:where(.k) .menu__item{display:flex;align-items:center;gap:var(--sp-2);block-size:var(--h-ctl);padding-inline:var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-ink);inline-size:100%;transition:background var(--t-fast) var(--ease)}
:where(.k) .menu__item .ic{color:var(--c-text-3)}
:where(.k) .menu__item:hover,:where(.k) .menu__item.is-hover{background:var(--c-hover)}
:where(.k) .menu__item[aria-checked="true"]{font-weight:600}
:where(.k) .menu__item--danger,:where(.k) .menu__item--danger .ic{color:var(--c-return-text)}
:where(.k) .menu__item:disabled{color:var(--c-text-off);cursor:not-allowed}
:where(.k) .menu__end{margin-inline-start:auto;font-size:var(--fs-12);color:var(--c-text-3)}
:where(.k) .menu__sep{block-size:1px;background:var(--c-line);margin:var(--sp-1) calc(var(--sp-1)*-1)}
:where(.k) .menu__label{padding:6px var(--sp-2) var(--sp-1);font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;color:var(--c-text-3)}
:where(.k) .scrim{position:fixed;inset:0;background:rgba(15,26,46,.4);display:grid;place-items:center;z-index:50}
:where(.k) .dialog{inline-size:440px;max-inline-size:calc(100vw - 32px);border-radius:var(--r-xl);background:var(--c-surface);box-shadow:var(--e-2);overflow:hidden}
:where(.k) .dialog__head{padding:var(--sp-5) var(--sp-6) 0;font-size:var(--fs-16);line-height:var(--lh-16);font-weight:600}
:where(.k) .dialog__body{padding:var(--sp-2) var(--sp-6) var(--sp-5);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-text-2)}
:where(.k) .dialog__foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);background:var(--c-subtle);border-block-start:1px solid var(--c-line)}
/* confirm popover: the compact second step before approve / return. A .dialog anchored above its trigger group
   (parent = .pop-anchor), over a light click-away scrim. Escape, "cancel" and the scrim all back out. */
:where(.k) .pop-anchor{position:relative}
:where(.k) .scrim--light{background:rgba(15,26,46,.16);z-index:calc(var(--z-pop) - 1);display:block}
:where(.k) .dialog--pop{position:absolute;z-index:var(--z-pop);inset-block-end:calc(100% + var(--sp-2));inset-inline-start:0;inline-size:var(--w-pop);max-inline-size:calc(100vw - 32px);border:1px solid var(--c-line)}
:where(.k) .dialog--pop .dialog__head{padding:var(--sp-4) var(--sp-4) 0;font-size:var(--fs-14);line-height:var(--lh-14);overflow-wrap:anywhere}
:where(.k) .dialog--pop .dialog__body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-1) var(--sp-4) var(--sp-4);font-size:var(--fs-13);line-height:var(--lh-13)}
:where(.k) .dialog--pop .dialog__foot{padding:var(--sp-3) var(--sp-4)}
:where(.k) .dialog--pop .banner{align-items:flex-start;padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
:where(.k) .dialog--pop .banner .ic{margin-block-start:2px}
:where(.k) .dialog--pop .banner__action{display:block;margin:2px 0 0;text-align:start}
:where(.k) .toast-host{position:fixed;inset-inline:0;inset-block-end:var(--sp-6);display:grid;place-items:center;pointer-events:none;z-index:var(--z-toast)}
:where(.k) .toast-host .toast{pointer-events:auto}
/* action bar with an overflow strategy (.detail__foot, .vtools). system.js measures it:
   1. everything fits → nothing changes
   2. [data-collapse="n"] items move into the "more" menu, highest n first; primary and secondary actions carry no data-collapse and stay
   3. still too wide → .is-compact: [data-iconable] buttons drop their label (title + aria-label remain)
   4. still too wide → .is-wrap: the bar wraps to a second line; labels truncate as the last resort */
:where(.k) .actions{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}
:where(.k) .actions.is-measuring{flex-wrap:nowrap!important}
:where(.k) .actions.is-measuring>*{flex-shrink:0!important}
:where(.k) .actions.is-compact [data-iconable]{inline-size:var(--h-ctl);padding-inline:0}
:where(.k) .actions.is-compact [data-iconable] .btn__label{display:none}
:where(.k) .actions.is-wrap{flex-wrap:wrap}
:where(.k) .actions.is-wrap>.btn,:where(.k) .actions.is-wrap>.field{flex:0 1 auto}
:where(.k) .more{position:relative;display:inline-flex;flex:none}
:where(.k) .more__menu{position:absolute;z-index:var(--z-menu);inset-block-end:calc(100% + var(--sp-1));inset-inline-end:0;max-inline-size:min(320px,calc(100vw - 32px))}
:where(.k) .more--down .more__menu{inset-block-end:auto;inset-block-start:calc(100% + var(--sp-1))}
:where(.k) .more--flip .more__menu{inset-inline-end:auto;inset-inline-start:0}
:where(.k) .menu__item>span{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ───────── 17. INBOX ("עליי") — split view ───────── */
:where(.k) .split{flex:1;min-block-size:0;display:grid;grid-template-columns:var(--w-list) minmax(0,1fr)}
:where(.k) .split__list{display:flex;flex-direction:column;min-inline-size:0;min-block-size:0;overflow:auto;padding:0 var(--sp-4) var(--sp-4);background:var(--c-app)}
:where(.k) .split__list .tabs{margin-inline:calc(var(--sp-4)*-1);padding-inline:var(--sp-2);--tabs-pad:var(--sp-2);background:var(--c-surface);position:sticky;inset-block-start:0;z-index:2;flex:none}
:where(.k) .split__list .list__head{padding-inline:var(--sp-1);margin-block-start:var(--sp-2)}
:where(.k) .quiet-note>span{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .quiet-note>span+span{flex:none;margin-inline-start:auto}
:where(.k) .quiet-note{display:flex;align-items:center;gap:var(--sp-2);margin-block-start:auto;padding:var(--sp-4) var(--sp-1) 0;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .split__detail{min-inline-size:0;min-block-size:0;display:flex}
:where(.k) .detail{flex:1;display:flex;flex-direction:column;min-inline-size:0;min-block-size:0;background:var(--c-surface);border-inline-start:1px solid var(--c-line)}
:where(.k) .detail__head{padding:var(--sp-4) var(--sp-6) var(--sp-3);border-block-end:1px solid var(--c-line);flex:none}
:where(.k) .detail__title{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0;font-size:var(--fs-16);line-height:var(--lh-16)}
:where(.k) .detail__title h2{font-weight:600;flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .detail__title .num,:where(.k) .detail__kind{font-weight:500;color:var(--c-text-2);flex:0 0 auto;max-inline-size:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .detail__pager{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);white-space:nowrap;flex:none}
:where(.k) .detail__meta>*{min-inline-size:0;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .detail__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin-block-start:var(--sp-2);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-2)}
:where(.k) .detail__body{flex:1;min-block-size:0;overflow:auto;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6)}
:where(.k) .detail__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3)}
:where(.k) .detail__foot{display:flex;align-items:center;gap:var(--sp-2);min-block-size:57px;padding:var(--sp-3) var(--sp-6);border-block-start:1px solid var(--c-line);flex:none}
:where(.k) .detail__foot .field{flex:1 1 200px;min-inline-size:120px;max-inline-size:480px}
:where(.k) .detail__foot>.dialog--pop{inset-inline-start:var(--sp-6)}

:where(.k) .stage{display:block;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-stage)}

/* cropped stage: the plan zoomed on one point (--px/--py = the point in % of the plan, --z = zoom). Pins live inside the plan box */

/* facts: label / value pairs in a detail without a drawing */
:where(.k) .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3) var(--sp-4)}
:where(.k) .facts dt{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .facts dd{margin-block-start:2px;overflow-wrap:anywhere}
:where(.k) .detail .dropzone{padding:var(--sp-6)}
:where(.k) .detail .dropzone>.ic{inline-size:20px;block-size:20px;color:var(--c-text-3)}
:where(.k) .dropzone__title{font-weight:500}
:where(.k) .dropzone__hint{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .detail__cap{font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;color:var(--c-text-3)}
:where(.k) .detail .group .row{min-block-size:56px;padding-block:var(--sp-2)}
:where(.k) .caption{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}

/* ───────── 18. VIEWER ───────── */

/* the sheet is fitted to whatever canvas is left: nothing ever sits under the panel */
/* on the light canvas the white sheet separates with a hairline and a very soft shadow */

/* side panel, docked on the inline-end side */

/* decision buttons are sized by their labels and share the row; when the labels do not fit side by side they stack */

/* collapsed rail */

/* threads */
:where(.k) .thread{display:block;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--c-line);transition:background var(--t-fast) var(--ease);cursor:pointer}
:where(.k) .thread:hover,:where(.k) .thread.is-hover{background:var(--c-subtle)}
:where(.k) .thread.is-selected{background:var(--c-accent-tint);cursor:default;padding-block:var(--sp-4)}
:where(.k) .thread__head{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0;font-size:var(--fs-13);line-height:var(--lh-13)}
/* when the head is too narrow the role and time give way first, then the name and the marker share what is left */
:where(.k) .thread__head b{font-weight:600;flex:0 1 auto;min-inline-size:0;max-inline-size:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .thread__head .mine{flex:0 1 auto;min-inline-size:0;max-inline-size:45%}
:where(.k) .thread__head .t3{flex:0 100 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .thread__head time{flex:none}
:where(.k) .thread__head time,:where(.k) .thread__time{margin-inline-start:auto;font-size:var(--fs-12);color:var(--c-text-3);white-space:nowrap}
:where(.k) .thread__text{margin-block-start:6px;padding-inline-start:28px;font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
:where(.k) .thread__text{overflow-wrap:anywhere}
:where(.k) .thread.is-selected .thread__text{display:block;font-size:var(--fs-14);color:var(--c-ink)}
:where(.k) .thread__foot>span{min-inline-size:0;overflow-wrap:anywhere}
:where(.k) .thread__foot{display:flex;align-items:center;gap:var(--sp-2);margin-block-start:var(--sp-2);padding-inline-start:28px;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .thread__reply{display:flex;flex-direction:column;gap:var(--sp-2);margin-block-start:var(--sp-3);padding-inline-start:28px}
:where(.k) .thread__actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2)}
:where(.k) .thread.is-resolved .thread__text{color:var(--c-text-3)}
/* editions */
:where(.k) .edition{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-4);border-block-end:1px solid var(--c-line)}
:where(.k) .edition.is-current{background:var(--c-accent-tint)}
:where(.k) .edition>div{min-inline-size:0}
:where(.k) .edition__title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600}
:where(.k) .edition__meta{margin-block-start:2px;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .edition__note{margin-block-start:var(--sp-2);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-2)}
:where(.k) .edition__meta,:where(.k) .edition__note{overflow-wrap:anywhere}
:where(.k) .edition__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin-block-start:var(--sp-3)}
:where(.k) .dl dt,:where(.k) .dl dd{min-inline-size:0;overflow-wrap:anywhere}
/* label column follows its longest label, capped at 45% of the panel; long labels wrap */
:where(.k) .dl{display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);gap:var(--sp-3) var(--sp-3);padding:var(--sp-4);font-size:var(--fs-13);line-height:var(--lh-13)}
:where(.k) .dl dt{color:var(--c-text-3)}
/* selected-comment bar: only when the panel is collapsed; docked under the canvas, never over the sheet */

/* ───────── 19. MOTION PREFERENCES ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}}

/* ════════════════════════════════════════════════════════════════════════
   Projects list (pl-*) and project workspace (pj-*). Tokens only, logical properties only.

   CLASS INDEX
   ─ page frame   .pl-strip (white band: tabs + end controls)  .pl-bar (filter row on the app background)
                  .pl-body (padded scroll content)  .pl-foot (result / pager bar)
   ─ table        .pl-card (white card that keeps sticky headers working)  .pl-table  .pl-table--roomy (56px rows)
                  .pl-table--dense (44px rows)  .pl-proj (+ __txt __name __addr, --line)  .pl-stage  .pl-n
                  .pl-late  .pl-act  .pl-sorted  .pl-grp (+ __btn __sum)  .pl-hit  .pl-pinmark  .pl-clip
   ─ two-project  .pl-two  .pl-big (+ __cover __head __name __sub __foot)  .pl-facts  .pl-wait (+ __head __rows)
                  .pl-hint
   ─ grid view    .pl-grid  .pl-cover
   ─ project page .pj-band  .pj-facts  .pj-stages (labelled stage stepper)  .pj-groups  .pj-group
                  (+ __head __cards)  .pj-sheet (table cell: thumbnail + number)
   ════════════════════════════════════════════════════════════════════════ */

/* ───────── page frame ───────── */
:where(.k) .pl-strip{display:flex;align-items:center;gap:var(--sp-3);flex:none;padding-inline:var(--sp-4) var(--sp-6);background:var(--c-surface);border-block-end:1px solid var(--c-line)}
:where(.k) .pl-strip .tabs{flex:1;border-block-end:0}
:where(.k) .pl-strip .tabs__tab{margin-block-end:-1px}
:where(.k) .pl-bar{display:flex;align-items:center;gap:var(--sp-2);flex:none;padding:var(--sp-3) var(--sp-6)}
:where(.k) .pl-bar .field{inline-size:264px}
:where(.k) .pl-bar__note{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);white-space:nowrap}
:where(.k) .pl-bar .vr{margin-inline:var(--sp-1)}
:where(.k) .pl-body{padding:0 var(--sp-6) var(--sp-6)}
:where(.k) .pl-body--top{padding-block-start:var(--sp-6)}
:where(.k) .pl-foot{display:flex;align-items:center;gap:var(--sp-2);block-size:48px;flex:none;padding-inline:var(--sp-6);background:var(--c-surface);border-block-start:1px solid var(--c-line);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-2);white-space:nowrap}
:where(.k) .pl-foot b{font-weight:600;color:var(--c-ink)}
:where(.k) .pl-field-x{display:grid;place-items:center;inline-size:20px;block-size:20px;margin-inline-end:-4px;border-radius:var(--r-sm);color:var(--c-text-3)}
:where(.k) .pl-field-x:hover{background:var(--c-hover);color:var(--c-ink)}
:where(.k) .pl-field-x .ic{inline-size:12px;block-size:12px}

/* sidebar: closing link of the short project list */
:where(.k) .pl-side-all{color:var(--c-text-3);font-weight:400;font-size:var(--fs-13)}

/* ───────── table ───────── */
/* overflow:clip rounds the corners without creating a scroll container, so sticky headers keep working */
:where(.k) .pl-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:clip}
:where(.k) .pl-table{table-layout:fixed}
:where(.k) .pl-table td{overflow:hidden;text-overflow:ellipsis}
:where(.k) .pl-table th.table__end{text-align:end}
:where(.k) .pl-table tbody tr:last-child td{border-block-end:0}
:where(.k) .pl-table--roomy td{block-size:56px}
:where(.k) .pl-table--dense td{block-size:44px}
:where(.k) .pl-proj{display:flex;align-items:center;gap:var(--sp-3);min-inline-size:0}
:where(.k) .pl-proj:focus-visible{border-radius:var(--r-sm)}
:where(.k) .pl-proj__txt{display:flex;flex-direction:column;min-inline-size:0}
:where(.k) .pl-proj__name{font-size:var(--fs-14);line-height:var(--lh-14);overflow:hidden;text-overflow:ellipsis}
:where(.k) .pl-proj__addr{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);overflow:hidden;text-overflow:ellipsis}
:where(.k) .pl-proj--line .pl-proj__txt{flex-direction:row;align-items:baseline;gap:var(--sp-2)}
:where(.k) .pl-proj--line .pl-proj__name{font-size:var(--fs-13);line-height:var(--lh-13);flex:none}
:where(.k) .pl-pinmark{inline-size:12px;block-size:12px;color:var(--c-text-3);align-self:center}
:where(.k) .pl-stage{display:inline-grid;grid-template-columns:52px auto;align-items:center;column-gap:var(--sp-2);color:var(--c-text-2)}
:where(.k) .pl-stage .stepper i{inline-size:10px}
:where(.k) .pl-n{display:inline-flex;align-items:center;gap:6px;color:var(--c-text-2)}
:where(.k) .pl-n--strong{font-weight:500;color:var(--c-ink)}
/* one-blue rule (2026-10-04): an overdue count is not an error, so it is strong ink, not red. Blue stays for "waiting for me" */
:where(.k) .pl-late{font-weight:600;color:var(--c-ink)}
:where(.k) .pl-table .mine{min-inline-size:20px;justify-content:center}
:where(.k) .pl-act{display:flex;flex-direction:column;align-items:flex-end}
:where(.k) .pl-act small{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .pl-act--line{flex-direction:row;justify-content:flex-end;align-items:baseline;gap:var(--sp-2)}
:where(.k) .pl-clip{overflow:hidden;text-overflow:ellipsis}
:where(.k) .pl-sorted{display:inline-flex;align-items:center;gap:2px;color:var(--c-ink)}
:where(.k) .pl-sorted .ic{inline-size:12px;block-size:12px}
/* group header row: plain label (20 projects) or a collapsible button (100 projects) */
:where(.k) .pl-grp td{block-size:36px;padding-block:0;background:var(--c-subtle);font-size:var(--fs-12);line-height:var(--lh-12);font-weight:600;color:var(--c-text-2)}
:where(.k) .pl-table tbody tr.pl-grp:hover td{background:var(--c-subtle)}
:where(.k) .pl-grp__in{display:flex;align-items:center;gap:var(--sp-2)}
:where(.k) .pl-grp__in .ic{color:var(--c-text-3)}
:where(.k) .pl-grp__btn{display:flex;align-items:center;gap:var(--sp-2);block-size:28px;padding-inline:var(--sp-1) var(--sp-2);margin-inline-start:calc(var(--sp-1)*-1);border-radius:var(--r-sm);font-size:var(--fs-13);line-height:var(--lh-13);font-weight:600;color:var(--c-ink)}
:where(.k) .pl-grp__btn:hover{background:var(--c-hover-app)}
:where(.k) .pl-grp__sum{margin-inline-start:auto;font-weight:500;color:var(--c-text-3)}
:where(.k) .pl-hit{background:var(--c-accent-tint);color:inherit;border-radius:2px;box-shadow:0 0 0 1px var(--c-accent-tint)}
:where(.k) .pl-arch .pl-proj__name,:where(.k) .pl-arch td{color:var(--c-text-3)}
:where(.k) .pl-arch .thumb{opacity:.55}

/* ───────── two projects: roomy cards ───────── */
:where(.k) .pl-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);max-inline-size:1152px}
:where(.k) .pl-big{display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:where(.k) .pl-big:hover,:where(.k) .pl-big.is-hover{border-color:var(--c-line-strong);box-shadow:0 1px 2px rgba(15,26,46,.06)}
/* cover: the project's lead sheet as paper, peeking out of the stage (clipped at the bottom edge) */

:where(.k) .pl-big__head{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-5) var(--sp-6) 0}
:where(.k) .pl-big__name{font-size:var(--fs-16);line-height:var(--lh-16);font-weight:600}
:where(.k) .pl-big__sub{font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-3)}
:where(.k) .pl-facts{display:grid;grid-template-columns:1.25fr 1.15fr 1fr 1fr;column-gap:var(--sp-4);margin:var(--sp-4) var(--sp-6) 0;padding-block:var(--sp-3);border-block-start:1px solid var(--c-line)}
:where(.k) .pl-facts dt{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);margin-block-end:var(--sp-1)}
:where(.k) .pl-facts dd{display:flex;align-items:center;gap:var(--sp-2);min-block-size:24px;font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500;white-space:nowrap}
:where(.k) .pl-wait{display:flex;flex-direction:column;border-block-start:1px solid var(--c-line)}
:where(.k) .pl-wait__head{display:flex;align-items:center;gap:var(--sp-2);block-size:44px;padding-inline:var(--sp-6) var(--sp-4);font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500}
:where(.k) .pl-wait__head .ic{color:var(--c-ok)}
:where(.k) .pl-wait__rows>li{border-block-start:1px solid var(--c-line)}
:where(.k) .pl-wait .row--one{padding-inline:var(--sp-6)}
:where(.k) .pl-wait .row__flag{inset-inline-start:10px}
:where(.k) .pl-wait .row--one .row__num{min-inline-size:72px;display:inline-flex}
:where(.k) .pl-wait .row__t{font-weight:500;white-space:nowrap;flex:none}
:where(.k) .pl-wait .row__when{min-inline-size:60px;text-align:end;margin-inline-start:0}
:where(.k) .pl-wait .mine{margin-inline-start:auto}
:where(.k) .pl-big__foot{display:flex;align-items:center;gap:var(--sp-3);margin-block-start:auto;min-block-size:44px;padding-inline:var(--sp-6);border-block-start:1px solid var(--c-line);background:var(--c-subtle);font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3);white-space:nowrap}
:where(.k) .pl-big__foot .pl-n{color:var(--c-text-2);font-weight:500}
:where(.k) .pl-hint{display:flex;align-items:center;gap:var(--sp-2);margin-block-start:var(--sp-4);padding-inline:var(--sp-1);font-size:var(--fs-13);line-height:var(--lh-13);color:var(--c-text-3)}

/* ───────── grid view (20 projects, "רשת") ───────── */
:where(.k) .pl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
:where(.k) .pl-grid .project-card{padding:0;gap:0;overflow:hidden}

:where(.k) .pl-grid .stepper i{inline-size:10px}
:where(.k) .pl-grid__txt{padding:var(--sp-3) var(--sp-4)}
:where(.k) .pl-grid .project-card__name{font-size:var(--fs-14);line-height:var(--lh-14)}
:where(.k) .pl-grid .project-card__sub{font-size:var(--fs-12);line-height:var(--lh-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .pl-grid .project-card__foot{margin-inline:var(--sp-4);padding-block:var(--sp-3)}
:where(.k) .pl-grid__h{grid-column:1/-1;padding-inline:var(--sp-1);margin-block-end:calc(var(--sp-2)*-1)}
:where(.k) .pl-grid__h+.project-card~.pl-grid__h{margin-block-start:var(--sp-2)}

/* ───────── project page ───────── */
:where(.k) .pj-band{display:flex;align-items:center;gap:var(--sp-8);flex:none;padding:var(--sp-3) var(--sp-6) var(--sp-2);background:var(--c-surface)}
:where(.k) .pj-facts{display:flex;gap:var(--sp-8)}
:where(.k) .pj-facts dt{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .pj-facts dd{font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500;white-space:nowrap}
/* labelled stage stepper: the same bar language as .stepper, with names */
:where(.k) .pj-stages{display:flex;gap:var(--sp-1)}
:where(.k) .pj-stages li{display:flex;flex-direction:column;gap:6px;inline-size:60px;font-size:var(--fs-12);line-height:var(--lh-12);color:var(--c-text-3)}
:where(.k) .pj-stages li::before{content:"";block-size:3px;border-radius:2px;background:var(--c-pressed)}
:where(.k) .pj-stages .is-done{color:var(--c-text-2)}
:where(.k) .pj-stages .is-done::before,:where(.k) .pj-stages .is-now::before{background:var(--c-ink)}
:where(.k) .pj-stages .is-now{color:var(--c-ink);font-weight:600}
:where(.k) .pj-groups{display:flex;flex-wrap:wrap;gap:var(--sp-4);container-type:inline-size}
:where(.k) .pj-group{display:flex;flex-direction:column;min-inline-size:0}
:where(.k) .pj-group__head{display:flex;align-items:center;gap:var(--sp-2);block-size:32px;padding-inline-start:var(--sp-1);font-size:var(--fs-12);line-height:var(--lh-12);font-weight:600;color:var(--c-text-2)}
:where(.k) .pj-group__head::after{content:"";flex:1;block-size:1px;background:var(--c-line);margin-inline-start:var(--sp-1)}
:where(.k) .pj-group__cards{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100cqi - 3*var(--sp-4))/4);gap:var(--sp-4)}
:where(.k) .pj-sheet{display:flex;align-items:center;gap:var(--sp-3)}