/* ============================================================================
   DeLaw — interaction, keyboard and phone fixes (audit 2026-10-17, ux-interaction.json)
   Linked after app.css. Every rule here answers a measured finding; selectors are
   written with one extra ancestor so they win over ui.css / app.css without !important.
   ============================================================================ */

/* ---- 1. Row menus: fixed to the viewport (core.js UI.menu sets the coordinates) ---- */
body .menu{ position:fixed; }
body .menu.sheet{ left:8px; right:8px; bottom:max(8px, env(safe-area-inset-bottom)); top:auto; min-width:0; max-height:70vh; overflow-y:auto; border-radius:14px; padding:8px; }
body .menu.sheet .menu-item{ min-height:48px; padding:12px 14px; font-size:var(--fs-base); }
body .menu-item:focus-visible{ outline:2px solid var(--brand-500); outline-offset:-2px; background:var(--hover); }

/* ---- 2. A write in flight: the control stays visible but cannot be clicked twice ---- */
body .btn.is-busy, body [data-action].is-busy{ opacity:.65; pointer-events:none; cursor:progress; }

/* ---- 5. Keyboard reach: promoted chips, rows and list items show focus like buttons ---- */
body .chip:focus-visible, body [role="button"]:focus-visible, body [role="link"]:focus-visible, body .tabs-more:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; }
/* collapsed-rail tooltips are drawn by core.js as one fixed element; the clipped ::after is switched off there */
body .sb-scroll [data-tip]:hover::after, body .sidebar.collapsed [data-tip]:hover::after{ display:none; }
.dl-tip{ position:fixed; z-index:9999; background:var(--ink); color:#fff; font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:6px 10px; border-radius:7px; max-width:min(320px, calc(100vw - 16px)); line-height:1.4; box-shadow:var(--shadow); pointer-events:none; animation:fade .12s var(--ease); }

/* ---- 9. Skip link: first thing Tab reaches in the firm shell ---- */
.skip-link{ position:absolute; left:8px; top:-48px; z-index:10000; padding:10px 14px; border-radius:var(--radius-sm); background:var(--brand-600); color:#fff; font-weight:var(--fw-semibold); border:0; cursor:pointer; transition:top .12s; }
.skip-link:focus, .skip-link:focus-visible{ top:8px; outline:2px solid #fff; outline-offset:2px; }
#view:focus{ outline:none; }

/* ---- 6. Overflow cues: strips and tables that hide content to the right say so ---- */
body .tabs{ position:relative; }
/* the fade is painted by the sticky More button itself, so the button is never faded with it */
body .tabs .tabs-more{ position:sticky; right:0; margin-left:auto; flex:0 0 auto; align-self:stretch; display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 8px 0 44px; border:0; background:linear-gradient(to right, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 45%); color:var(--brand-text); font-size:var(--fs-xs); font-weight:var(--fw-semibold); cursor:pointer; }
body .tabs .tabs-more span{ font-size:1.1em; line-height:1; }
body .tabs.at-end .tabs-more, body .tabs:not(.has-more) .tabs-more{ display:none; }
body .table-wrap.has-more:not(.at-end), body .card > .tbl.has-more:not(.at-end), body .cal2-rail.has-more:not(.at-end), body .cal2-tg.has-more:not(.at-end), body .cal-wrap.has-more:not(.at-end), body .kanban.has-more:not(.at-end), body .m-hscroll.has-more:not(.at-end), body .segment.has-more:not(.at-end){ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 48px), rgba(0,0,0,.2)); mask-image:linear-gradient(to right, #000 calc(100% - 48px), rgba(0,0,0,.2)); }
body .table-wrap.has-more{ scrollbar-width:thin; }

/* ---- 6. Phone ---- */
@media (max-width:860px){
  /* the header must stay sticky: overflow-x:hidden on <main> made it the scroll container; clip does not */
  body main{ overflow-x:clip; }
  body #view, body .content{ overflow-x:clip; }
  /* the Copilot FAB (58px + 24px) must not sit on the last tab or button */
  body .content#view{ padding-bottom:104px; }
  body:has(.m-tabbar) .copilot-fab{ bottom:calc(62px + 14px + env(safe-area-inset-bottom, 0px)); }
  /* tap targets: 44px minimum, padding does the work, text sizes unchanged */
  body .btn, body .btn-sm, body .chip, body .tab, body .nav-item, body .tbl td[data-action], body .row-menu, body .m-iconbtn, body .topbar-btn, body .menu-item, body .segment button, body .m-tabbar [data-action], body .m-appbar .m-back{ min-height:44px; }
  body .btn{ height:auto; padding-top:8px; padding-bottom:8px; }
  body .btn-sm{ height:auto; min-height:44px; padding:8px 12px; font-size:var(--fs-sm); }
  body .btn-icon.btn-sm{ width:44px; padding:0; }
  body .chip{ height:auto; min-height:44px; padding:0 14px; }
  body .topbar-btn, body .m-iconbtn, body .m-appbar .m-back{ width:44px; height:44px; }
  body .topbar .search-box{ width:44px; height:44px; }
  body .segment button{ height:auto; min-width:44px; padding-top:8px; padding-bottom:8px; }
  body .btn-icon, body .segment > button:empty, body .segment > button:not(:has(span)){ min-width:44px; }
  body .tab{ padding-top:12px; padding-bottom:12px; }
  body .tbl td[data-action]{ padding-top:12px; padding-bottom:12px; }
  /* inputs: 44px tall and 16px type, which is the threshold below which iOS zooms the page on focus */
  body .input, body .select, body .textarea, body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]), body select, body textarea{ font-size:16px; }
  body .input, body .select, body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]), body select{ height:auto; min-height:44px; }
  body input[type="checkbox"], body input[type="radio"]{ width:22px; height:22px; }
  /* the phone sidebar scrolls in its own box and says so with a bottom fade (mask already on .sb-scroll) */
  body .sidebar .sb-scroll{ overflow-y:auto; min-height:0; }
  /* the modal footer stacks its buttons full-width when there is no room */
  body .modal-ft{ flex-wrap:wrap; }
  body .modal-ft .btn{ flex:1 1 auto; }
}
@media (max-width:480px){
  /* portal header rows wrap instead of overflowing by 46px */
  body .row.between.mb-12 > .row.gap-8{ flex-wrap:wrap; justify-content:flex-end; }
}