/* UX pass 2026-10-09 (branch next / ploy) — UI only, no logic/data/copy.
   Loaded AFTER each page's inline <style>. Logged in docs/PATCHES.md (UX-1..).
   Dark tokens in the pages have higher specificity, so :root overrides here only touch light. */

/* ── tokens: secondary text AA (light) ── */
:root{--ink-3:#6A625D;--ink-4:#7B726D;--warn:#85590A}

/* ── a11y utilities ── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* ── focus: visible ring on fields, keep radius on controls ── */
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible,
.tkin:focus-visible,.gsearch input:focus-visible{border-color:var(--brand);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand);outline:none}
.seg button:focus-visible{outline-offset:-2px;position:relative;z-index:1}
th.sortable:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* ── reduced motion: stop movement, keep colour feedback ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ═════════ DESK ═════════ */

/* A1 login list must not bury the PIN field */
.lglist{max-height:9.5rem}
.gatecard{overflow:visible}
@media (max-width:520px){.lglist{max-height:8rem}}

/* A2 today: task rows get full width for the title */
.task{grid-template-columns:auto minmax(0,1fr)}
.task .r{grid-column:2;flex-wrap:wrap;margin-top:.25rem}
.todaygrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:stretch}
.qcard{display:flex;flex-direction:column;min-height:5.2rem}
.qcard .s{margin-top:auto}

/* A7/B3 stage badges: readable text on pale stage colours */
.st-chip .n,.sp .n,.sdn,.bcolhd .cc{color:var(--ink)}
@supports (color:oklch(from red l c h)){
  .st-chip .n,.sp .n,.sdn,.bcolhd .cc{color:oklch(from var(--sc,var(--brand)) clamp(0,(0.66 - l)*1000,1) 0 0)}
}
.bcard .bm,.bcard .bl,.bcard .bt,.bcard .ow,.bcard .dt,.bphase .ps,.bcolhd .cs,.bcolhd .cc{font-size:max(.72rem,11.5px)}
.btable .bcell{vertical-align:top}

/* A3 calendar on phones: scroll the month grid instead of crushing chips */
@media (max-width:900px){
  #view-calendar .card:has(.calgrid){overflow-x:auto}
  .calgrid{min-width:588px}
  .calcell .ev{font-size:.7rem;padding:.2rem .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.ev.done{opacity:.7}

/* A4 team table becomes stacked cards on phones; destructive action marked */
@media (max-width:720px){
  #view-team .tbl,#view-team .tbl tbody,#view-team .tbl tr,#view-team .tbl td{display:block;width:100%}
  #view-team .tbl thead{display:none}
  #view-team .tbl tr{padding:.7rem 0;border-bottom:1px solid var(--line)}
  #view-team .tbl td{padding:.25rem 0}
  #view-team .tbl select,#view-team .tbl .uname{min-height:44px;width:100%}
  #view-team .tbl .linkish{min-height:44px;padding:0 .5rem}
}
#view-team .linkish[data-tog]{color:var(--stop)}

/* A5/A9/B11 touch targets + mobile chrome */
@media (max-width:900px){
  .bottomnav button{font-size:.72rem;color:var(--ink-2);min-height:56px}
  .bottomnav button svg{width:1.35rem;height:1.35rem}
  .bell,.iconbtn{width:2.75rem;height:2.75rem}
  .who{min-height:2.75rem}
  .topbar{min-height:0;padding-block:.4rem}
}
@media (pointer:coarse),(max-width:900px){
  .btn.sm{min-height:44px;padding:.55rem .9rem}
  .linkish{display:inline-flex;align-items:center;min-height:44px;padding-inline:.25rem}
  .fpill{min-height:40px}
  .fchip{min-height:44px}
  .fchip input{width:1.25rem;height:1.25rem}
  .mapctl button{width:44px;height:44px}
  .hchip{min-height:36px;padding-inline:.7rem}
}

/* A9b phones: user pill keeps avatar, name stays for screen readers (stops long page titles wrapping the header) */
@media (max-width:520px){
  #whoName{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* B1 stage-filter spacer must not look like a pill */
span.sp{display:block;width:auto;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:default;transition:none}
#view-customers .toolbar>span.sp{flex:1 1 0}

/* B2 cancelled rows stay readable */
.crow.dead{opacity:1}
.crow.dead .nm .t,.crow.dead .meta,.crow.dead .mid{color:var(--ink-3)}

/* B4 stage filter: one scrolling row with fade on phones */
@media (max-width:820px){
  #stageFilter.filterbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1*clamp(.9rem,3vw,1.9rem));padding-inline:clamp(.9rem,3vw,1.9rem);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  #stageFilter .fpill{flex:none;min-height:40px}
}

/* B6/B7 customer drawer */
.dclose{min-width:44px;min-height:44px;display:grid;place-items:center;font-size:1.6rem}
@media (max-width:620px){
  .dfoot{flex-wrap:wrap}
  .dfoot #delBtn{order:3;flex:1 1 100%}
  .dfoot .btn{min-height:44px}
  .subtabs{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 30px),transparent)}
}

/* B8/B9 customer rows keep a stable middle column */
@media (max-width:820px){
  .crow{grid-template-columns:minmax(0,1fr) auto;gap:.35rem .8rem;padding:.7rem .85rem}
  .crow>div:first-child{grid-column:1/-1}
  .crow .mid{grid-column:1}
  .crow .right{grid-column:2;align-items:flex-end}
}
@media (min-width:821px){.crow{grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) 11.5rem}}

/* B10 pipeline columns */
.kanwrap{scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent}
.kmove button{min-height:40px;font-size:.82rem}
@media (max-width:900px){.kancol{max-height:none}.kanbody{overflow:visible}}

/* B12 inputs: 16px on phones (no iOS zoom), 44px fields */
@media (max-width:820px){
  input,select,textarea,.tkin{font-size:16px}
  .addrow input,.addrow select{min-height:44px}
}
.fld input,.fld select{min-height:2.75rem;box-sizing:border-box}

/* B16 map legend clear of controls */
.maplegend{bottom:1.6rem}
@media (max-width:980px){
  .maplegend{max-width:calc(100% - 1.4rem);overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  #mapbox{height:min(52svh,420px)!important}
}

/* C2 report bars were invisible (no track/fill) */
.brow .tr{display:block;flex:1;min-width:3rem;height:.5rem;background:var(--surface-3);border-radius:99px;overflow:hidden}
.brow .tr>i{display:block;height:100%;background:var(--brand);border-radius:inherit;min-width:2px}
.brow .l{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.brow{align-items:flex-start}

/* C5/C8 KPI + chart captions */
.sobar .c span,.mh-e,.pcap,.chartnote,.kpi dt{color:var(--ink-3)}
.kpi p{margin:.15rem 0 0;font-size:.78rem;line-height:1.35;color:var(--ink-3)}
.sobar .c span,.sobar .cv,.vv,.mh-e{font-size:.75rem}
.sarr{font-size:.85em}

/* C3 tables on phones: sticky first column */
@media (pointer:coarse),(max-width:900px){
  table.tbl th:first-child,table.tbl td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);min-width:6.5rem}
  table.tbl td,table.tbl th{white-space:nowrap}
  table.tbl td:first-child{white-space:normal}
}

/* ═════════ PLAYBOOK / GUIDE / HOME / ONBOARDING ═════════ */

/* D5 playbook quick-add inputs use tokens the page never defined */
:root:has(#add-n){--line:var(--rule);--surface:var(--panel)}
#add-n,#add-r,#add-u{border:1px solid var(--rule);background:var(--panel);min-height:44px}

/* D3 tiny text + uppercase Thai */
.chip .r,.navlink i,.eg span,.hint{font-size:max(.78rem,12px)}
.navlink i{color:var(--ink-3)}
.kick,.card .tag,.stages .n,.stages .m{text-transform:none;letter-spacing:0}

/* D4 touch targets */
@media (pointer:coarse),(max-width:900px){
  #pbMenu{min-width:44px;min-height:44px}
  .chip,.navlink,.rolesw button,.top nav a,.eg button{min-height:44px;display:inline-flex;align-items:center}
  .rolesw button{padding-inline:.9rem}
}

/* D10 playbook quick grid on phones (D7 chip scroller held back: needs Joey's call) */
@media (max-width:640px){
  .quick{grid-template-columns:repeat(2,1fr)}
  .quick>*:last-child:nth-child(odd){grid-column:1/-1}
}

/* D11 sticky playbook bar: opaque so text does not ghost through */
.pbtop{background:var(--paper)}

/* D12 focus ring keeps the element's radius */
:focus-visible{border-radius:revert-layer}
.tool:focus-visible{border-radius:var(--r-l);outline-offset:3px}

/* D15 non-clickable cards do not lift */
.mc:hover,.rung:hover{transform:none;box-shadow:inherit}

/* D17 home hero gap */
.rampbox{margin-top:clamp(1rem,2.5vw,1.6rem)}

/* D18 guide */
@media (max-width:760px){.toc{display:flex;overflow-x:auto;gap:.5rem;white-space:nowrap}}
.pagehead p{text-wrap:pretty;max-width:60ch}

/* D8 guide lanes on phones: label each cell */
@media (max-width:760px){
  .acts>*[data-label]::before{content:attr(data-label);display:block;font-size:.78rem;font-weight:600;color:var(--ink-2)}
}

/* D9 onboarding */
.mapwrap{overflow-x:auto}
@media (max-width:860px){.stages{grid-template-columns:repeat(2,1fr)}}