/* ════════════════════════════════════════════════════════════════════════
   Koma (קומה) — MOBILE layer of the approved system (ported from g-polish/mobile.css, same tokens).
   Loaded AFTER koma.css. Phone layouts only (designed at 390×844); nothing here changes desktop.
   Scoped with :where(.k) like koma.css. The mobile viewer (stage F2) is not ported.
   Rules: values come from system.css tokens (plus the few mobile tokens below), logical properties
   only, so every screen also works in dir="ltr". The only physical geometry is the drawing itself
   (pins: left/top %, plan pan: transform), exactly as in system.css.

   CLASS INDEX
   ─ shell     .m-app  .m-bar  .m-bar--slim  .m-bar__logo  .m-bar__title  .m-bar__count  .m-bar__sheet
               .m-iconbtn  .m-ic  .m-scroll  .m-nav  .m-nav__item[aria-current]  .m-nav__ic
   ─ controls  .m-btn (52px)  .m-btn--xl (56px)  .m-btn--icon   .m-field (48px)  .m-textarea
               .m-chips  .m-chip  .m-edchip  .m-mine  .m-search (sticky search bar)
   ─ home      .m-now  .m-now__top  .m-now__title  .m-now__main  .m-now__facts
   ─ lists     .m-head  .m-head__count  .m-list  .m-row  .m-row--compact  .m-row__flag  .m-row__body
               .m-row__title  .m-row__meta  .m-row__foot  .m-note  .m-empty
   ─ sheets    .m-recent  .m-recent__item  .m-grid  .m-card (modifier on .sheet-card)
   ─ viewer    .m-viewer  .m-canvas  .m-stage  .m-plan  .m-fab  .m-tools  .m-tools__btn  .m-load
               .m-sheet  .m-sheet__grab  .m-peek  .m-full  .m-step  .m-comment  .m-reply  .m-decide
               .m-scrim  .m-sheet--modal  .m-confirm  .m-banner
   ─ scroll cue .m-more  .m-more__pill   (injected by mobile.js on .m-scroll[data-m-more]: fade above the bottom navigation + "עוד N למטה")
               state on <body>: data-m-state="peek | comment"  data-m-modal="approve | return"
                                data-m-load (slow network)
   ════════════════════════════════════════════════════════════════════════ */

/* ───────── 1. MOBILE TOKENS ───────── */
:root{
  /* type: one step up from desktop. 15 is the phone base, 13 the smallest text on a phone */
  --m-fs-13:13px; --m-lh-13:18px;
  --m-fs-15:15px; --m-lh-15:22px;
  --m-fs-18:18px; --m-lh-18:26px;
  /* touch */
  --m-tap-min:44px;   /* every interactive element */
  --m-tap:48px;       /* fields, tools, steppers */
  --m-tap-lg:52px;    /* primary actions */
  --m-tap-xl:56px;    /* the confirming action */
  /* metrics */
  --m-gutter:var(--sp-4);
  --m-h-bar:56px;
  --m-h-nav:64px;
  --m-safe-b:env(safe-area-inset-bottom,0px);
  /* bottom sheet */
  --m-peek:177px;     /* peek = handle + comment preview + the decision buttons, which are never below the fold */
  --m-sheet-h:var(--m-peek);
  --m-r-sheet:16px;
  --m-e-sheet:0 -1px 2px rgba(20,23,26,.06),0 -12px 32px rgba(20,23,26,.18);
  --m-scrim:rgba(20,23,26,.5);
  --m-ic:22px;
}

/* ───────── 2. SHELL ───────── */
:where(.k) .m-app{display:flex;flex-direction:column;block-size:100vh;block-size:100dvh;overflow:hidden;position:relative;font-size:var(--m-fs-15);line-height:var(--m-lh-15);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
:where(.k) .m-scroll{flex:1;min-block-size:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-block-end:var(--sp-6)}
:where(.k) .m-ic{inline-size:var(--m-ic);block-size:var(--m-ic)}
:where(.k) .m-bar{display:flex;align-items:center;gap:var(--sp-1);block-size:var(--m-h-bar);flex:none;padding-inline:var(--sp-2);background:var(--c-surface);border-block-end:1px solid var(--c-line);position:relative;z-index:3}
:where(.k) .m-bar__logo{display:grid;place-items:center;inline-size:var(--m-tap-min);block-size:var(--m-tap-min);flex:none;color:var(--c-ink);border-radius:var(--r-lg)}
:where(.k) .m-bar__logo .logo__mark{inline-size:28px;block-size:28px}
:where(.k) .m-bar__title{font-size:var(--fs-20);line-height:var(--lh-20);font-weight:700;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}
:where(.k) .m-bar__count{font-size:var(--m-fs-15);line-height:var(--m-lh-15);color:var(--c-text-3);white-space:nowrap;margin-inline-start:var(--sp-2)}
:where(.k) .m-bar__stack{display:flex;flex-direction:column;min-inline-size:0;flex:1 1 0;padding-inline:var(--sp-1)}
:where(.k) .m-bar__stack .m-bar__title{font-size:var(--m-fs-18);line-height:var(--lh-16);font-weight:600}
:where(.k) .m-bar__stack 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}
/* viewer bar: number + status on the first line, sheet name on the second */

:where(.k) .m-iconbtn{display:grid;place-items:center;inline-size:var(--m-tap-min);block-size:var(--m-tap-min);flex:none;border-radius:var(--r-lg);color:var(--c-ink);position:relative;transition:background var(--t-fast) var(--ease)}
:where(.k) .m-iconbtn:active,:where(.k) .m-iconbtn.is-active{background:var(--c-pressed)}
:where(.k) .m-iconbtn:disabled{color:var(--c-text-off)}
/* bottom navigation */
:where(.k) .m-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;background:var(--c-surface);border-block-start:1px solid var(--c-line);padding-block-end:var(--m-safe-b);position:relative;z-index:3}
:where(.k) .m-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);block-size:var(--m-h-nav);font-size:var(--fs-12);line-height:var(--lh-12);font-weight:500;color:var(--c-text-2);position:relative;transition:background var(--t-fast) var(--ease)}
:where(.k) .m-nav__item:active{background:var(--c-hover)}
:where(.k) .m-nav__item[aria-current="page"]{color:var(--c-ink);font-weight:700}
:where(.k) .m-nav__item[aria-current="page"]::before{content:"";position:absolute;inset-block-start:-1px;inset-inline:28%;block-size:2px;border-end-start-radius:2px;border-end-end-radius:2px;background:var(--c-ink)}
:where(.k) .m-nav__item:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)}
:where(.k) .m-nav__ic{position:relative;display:grid;margin-block-start:var(--sp-1)}
:where(.k) .m-nav__ic .badge{position:absolute;inset-block-start:-5px;inset-inline-end:-13px;box-shadow:0 0 0 2px var(--c-surface)}

/* ───────── 3. CONTROLS ───────── */
:where(.k) .m-btn{block-size:var(--m-tap-lg);padding-inline:var(--sp-4);border-radius:var(--r-lg);font-size:var(--fs-16);line-height:var(--lh-16);font-weight:500;gap:var(--sp-2)}
:where(.k) .m-btn .ic{inline-size:18px;block-size:18px}
:where(.k) .m-btn--xl{block-size:var(--m-tap-xl);font-weight:600}
:where(.k) .m-btn--icon{inline-size:var(--m-tap);block-size:var(--m-tap);padding-inline:0}
:where(.k) .m-btn--icon .ic{inline-size:var(--m-ic);block-size:var(--m-ic)}
:where(.k) .m-field{block-size:var(--m-tap);padding-inline:var(--sp-3);border-radius:var(--r-lg);gap:var(--sp-2)}
:where(.k) .m-field .field__input{font-size:var(--fs-16);line-height:var(--lh-16)}   /* 16px: no zoom-on-focus on iOS */
:where(.k) .m-field .field__ic{inline-size:20px;block-size:20px}
:where(.k) .m-field__btn{display:grid;place-items:center;inline-size:var(--m-tap-min);block-size:var(--m-tap-min);margin-inline-end:calc(var(--sp-2)*-1);border-radius:var(--r-md);color:var(--c-text-2);flex:none}
:where(.k) .m-field__btn:active{background:var(--c-pressed);color:var(--c-ink)}
:where(.k) .m-textarea{font-size:var(--fs-16);line-height:var(--lh-16);padding:var(--sp-3);border-radius:var(--r-lg);min-block-size:72px}
:where(.k) .m-chips{display:flex;gap:var(--sp-2);overflow-x:auto;padding:var(--sp-2) var(--m-gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
:where(.k) .m-chips::-webkit-scrollbar{display:none}
:where(.k) .m-chips::after{content:"";flex:none;inline-size:1px}      /* keeps the end gutter when scrolled */
:where(.k) .m-chip{block-size:40px;padding-inline:var(--sp-4);font-size:var(--m-fs-15);line-height:var(--m-lh-15);position:relative;gap:var(--sp-2)}
:where(.k) .m-chip::after{content:"";position:absolute;inset-inline:0;inset-block:calc(var(--sp-1)*-1)}   /* 48px touch height */
:where(.k) .m-chip .chip__count{font-size:var(--m-fs-13);font-weight:600}
:where(.k) .m-chip[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-surface)}
:where(.k) .m-chip[aria-pressed="true"] .chip__count{color:var(--c-surface);opacity:.72}
:where(.k) .m-mine{block-size:24px;padding-inline:var(--sp-2);font-size:var(--m-fs-13);line-height:24px}

:where(.k) .m-search{position:sticky;inset-block-start:0;z-index:2;padding:var(--sp-3) var(--m-gutter);background:var(--c-app)}
:where(.k) .m-search.is-stuck{border-block-end:1px solid var(--c-line)}

/* ───────── 4. HOME: the "next thing" card ───────── */
:where(.k) .m-now{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-3) var(--m-gutter) 0;padding:var(--sp-4);background:var(--c-surface);border:1px solid var(--c-accent-line);border-radius:var(--r-xl)}
:where(.k) .m-now__top{display:flex;align-items:center;gap:var(--sp-2)}
:where(.k) .m-now__top .due{font-size:var(--m-fs-13);line-height:var(--m-lh-13);margin-inline-start:auto}
:where(.k) .m-now__title{font-size:var(--m-fs-18);line-height:var(--m-lh-18);font-weight:600;margin-block-start:calc(var(--sp-1)*-1)}
:where(.k) .m-now__main{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-3)}
:where(.k) .m-now__facts{display:flex;flex-direction:column;gap:2px;min-inline-size:0;font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-text-2)}
:where(.k) .m-now__facts b{font-size:var(--m-fs-15);line-height:var(--m-lh-15);font-weight:500;color:var(--c-ink)}
:where(.k) .m-now__facts span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.k) .m-now__facts .mine--text{font-weight:600}

/* ───────── 5. LISTS ───────── */
:where(.k) .m-head{display:flex;align-items:baseline;gap:var(--sp-2);padding:var(--sp-4) var(--m-gutter) var(--sp-2);font-size:var(--m-fs-13);line-height:var(--m-lh-13);font-weight:600;color:var(--c-text-2)}
:where(.k) .m-head__count{font-weight:500;color:var(--c-text-3)}
:where(.k) .m-list{background:var(--c-surface);border-block:1px solid var(--c-line)}
:where(.k) .m-list>li+li{border-block-start:1px solid var(--c-line)}
:where(.k) .m-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--sp-3);inline-size:100%;min-block-size:96px;padding:var(--sp-3) var(--m-gutter);background:var(--c-surface);color:var(--c-ink);position:relative;transition:background var(--t-fast) var(--ease)}
:where(.k) .m-row:active{background:var(--c-hover)}
:where(.k) .m-row:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)}
:where(.k) .m-row__flag{position:absolute;inset-inline-start:5px;inset-block-start:50%;margin-block-start:-3px}
:where(.k) .m-row__body{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
:where(.k) .m-row__title{display:flex;align-items:baseline;gap:var(--sp-2);font-size:var(--fs-16);line-height:var(--lh-16);font-weight:500;min-inline-size:0}
:where(.k) .m-row__title>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .m-row__title .num{font-weight:500;color:var(--c-text-2);flex:none}
:where(.k) .m-row.is-unread .m-row__title{font-weight:600}
:where(.k) .m-row.is-unread .m-row__title .num{color:var(--c-ink)}
:where(.k) .m-row__meta{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(.k) .m-row__foot{display:flex;align-items:center;gap:var(--sp-2);margin-block-start:var(--sp-1);min-block-size:24px;font-size:var(--m-fs-13);line-height:var(--m-lh-13);color:var(--c-text-3);white-space:nowrap}
:where(.k) .m-row__foot .due,:where(.k) .m-row__foot .status{font-size:var(--m-fs-13);line-height:var(--m-lh-13)}
:where(.k) .m-row__foot .m-row__end{margin-inline-start:auto}
:where(.k) .m-row .stepper i{inline-size:var(--sp-3)}
:where(.k) .m-row .thumb--tile .ic{inline-size:var(--m-ic);block-size:var(--m-ic)}
:where(.k) .m-row--compact{min-block-size:72px;padding-block:var(--sp-3)}
:where(.k) .m-row--compact .m-row__title{font-size:var(--m-fs-15);line-height:var(--m-lh-15)}
:where(.k) .m-row--compact .m-row__foot{margin-block-start:0;min-block-size:0}
:where(.k) .m-note{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--m-gutter) 0;font-size:var(--m-fs-13);line-height:var(--m-lh-13);color:var(--c-text-3)}
:where(.k) .m-empty{padding-block:var(--sp-8)}
/* scroll cue: the list never just stops at the bottom navigation. A soft fade sits over the cut row, and while the list is at
   the top a pill says how many more items are below (tap = scroll one screen). The pill leaves on the first scroll; the fade
   stays until the end of the list is reached. */
:where(.k) .m-more{position:absolute;inset-inline:0;inset-block-end:calc(var(--m-h-nav) + var(--m-safe-b) + 1px);block-size:64px;display:flex;align-items:flex-end;justify-content:center;padding-block-end:var(--sp-2);background:linear-gradient(to bottom,rgba(244,245,247,0),var(--c-app) 88%);pointer-events:none;z-index:2}
:where(.k) .m-more__pill{pointer-events:auto;position:relative;display:inline-flex;align-items:center;gap:var(--sp-1);block-size:32px;padding-inline:var(--sp-3) var(--sp-2);border-radius:999px;background:var(--c-ink);color:var(--c-surface);font-size:var(--m-fs-13);line-height:var(--m-lh-13);font-weight:600;white-space:nowrap;box-shadow:0 0 0 2px var(--c-surface),var(--e-1);transition:opacity var(--t-base) var(--ease)}
:where(.k) .m-more__pill::after{content:"";position:absolute;inset-inline:0;inset-block:-6px}   /* 44px touch height */
:where(.k) .m-more__pill:active{background:var(--c-ink-hover)}
:where(.k) .m-more.is-quiet .m-more__pill{opacity:0;pointer-events:none}
:where(.k) .m-more--end{justify-content:flex-end;padding-inline:var(--m-gutter)}   /* lists whose rows keep their text at the start: the pill sits in the free end corner */

/* ───────── 6. SHEETS: recent strip + two-column grid ───────── */
:where(.k) .m-recent{display:flex;gap:var(--sp-2);overflow-x:auto;padding:0 var(--m-gutter);scrollbar-width:none}
:where(.k) .m-recent::-webkit-scrollbar{display:none}
:where(.k) .m-recent::after{content:"";flex:none;inline-size:1px}
:where(.k) .m-recent__item{display:flex;align-items:center;gap:var(--sp-3);flex:none;min-block-size:var(--m-tap-xl);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);transition:background var(--t-fast) var(--ease)}
:where(.k) .m-recent__item:active{background:var(--c-hover)}
:where(.k) .m-recent__item b{display:block;font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600}
:where(.k) .m-recent__item small{display:block;font-size:var(--m-fs-13);line-height:var(--m-lh-13);color:var(--c-text-3);white-space:nowrap}
:where(.k) .m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);padding:0 var(--m-gutter)}
:where(.k) .m-card:active{background:var(--c-hover)}
:where(.k) .m-card .sheet-card__thumb{padding:var(--sp-2)}
:where(.k) .m-card .sheet-card__body{gap:2px;padding:var(--sp-2) var(--sp-3) var(--sp-3)}
:where(.k) .m-card .sheet-card__top{min-block-size:24px}
:where(.k) .m-card .sheet-card__num{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;color:var(--c-ink)}
:where(.k) .m-card .sheet-card__title{font-size:var(--m-fs-15);line-height:var(--m-lh-15);font-weight:400;color:var(--c-text-2)}
:where(.k) .m-card .sheet-card__meta{margin-block-start:var(--sp-1);font-size:var(--m-fs-13);line-height:var(--m-lh-13);justify-content:space-between}
:where(.k) .m-card .status{font-size:var(--m-fs-13);line-height:var(--m-lh-13)}

/* ───────── 7. VIEWER ───────── */

/* drawing geometry: an LTR box that the plan is panned inside; a plan does not mirror */

   /* 48px touch target */

   /* the sheet edge on the light canvas */
/* floating controls: one column in the thumb corner, always above the sheet, never over the pins */

/* slow network / loading */

   /* nothing can be decided before the sheet is on screen */

/* bottom sheet */
:where(.k) .m-sheet{position:absolute;inset-inline:0;inset-block-end:0;block-size:var(--m-sheet-h);display:flex;flex-direction:column;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);overflow:hidden;transition:block-size var(--t-base) var(--ease)}
:where(.k) .m-sheet.is-dragging{transition:none}
:where(.k) .m-sheet__grab{display:grid;place-items:center;inline-size:100%;block-size:28px;flex:none;touch-action:none;cursor:grab}
:where(.k) .m-sheet__grab::before{content:"";inline-size:40px;block-size:4px;border-radius:2px;background:var(--c-line-strong)}
:where(.k) .m-sheet__grab{position:relative}
:where(.k) .m-sheet__grab::after{content:"";position:absolute;inset-inline:0;inset-block:0 calc(var(--sp-4)*-1)}   /* 44px touch height; the stepper buttons below stay on top */

:where(.k) .m-sheet__grab:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)}

/* in peek the decision row stays (buttons only); the due line appears when the sheet is expanded */

/* modal confirmation sheet (the deliberate second step) */
:where(.k) .m-scrim{position:absolute;inset:0;z-index:20;display:none;align-items:flex-end;background:var(--m-scrim)}
:where(.k) [data-m-modal] .m-scrim{display:flex}
:where(.k) .m-sheet--modal{position:relative;block-size:auto;max-block-size:92%;inline-size:100%;display:none}
:where(.k) [data-m-modal="approve"] [data-m-sheet="approve"],:where(.k) [data-m-modal="return"] [data-m-sheet="return"]{display:flex}
:where(.k) .m-sheet--modal .m-sheet__grab{cursor:default}
:where(.k) .m-confirm{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-1) var(--m-gutter) calc(var(--sp-4) + var(--m-safe-b))}
:where(.k) .m-confirm__title{font-size:var(--fs-20);line-height:var(--lh-20);font-weight:600;text-wrap:balance}
:where(.k) .m-confirm__sub{margin-block-start:var(--sp-1);font-size:var(--m-fs-15);line-height:var(--m-lh-15);color:var(--c-text-2);text-wrap:pretty}
:where(.k) .m-confirm .form__label{font-size:var(--fs-14);line-height:var(--lh-14)}
:where(.k) .m-confirm .form__label span{font-weight:400;color:var(--c-text-3)}
:where(.k) .m-confirm__actions{display:flex;flex-direction:column;gap:var(--sp-2)}
:where(.k) .m-banner{align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3);font-size:var(--fs-14);line-height:var(--lh-14)}
:where(.k) .m-banner .ic{inline-size:20px;block-size:20px;margin-block-start:2px}
:where(.k) .m-banner b{display:block;font-size:var(--m-fs-15);line-height:var(--m-lh-15)}
:where(.k) .m-banner .grow{display:flex;flex-direction:column;align-items:flex-start}
:where(.k) .m-banner .banner__action{display:inline-flex;align-items:center;min-block-size:var(--m-tap-min);margin:0 0 calc(var(--sp-2)*-1);font-size:var(--m-fs-15)}