/* Home Binder — reads the Retail Intelligence design tokens (static/design/tokens.css + themes.css):
   --acc --t1 --t2 --up --dn --warn --line --rad --raise --surf --bg --fnum --flab --fbody. No raw hex here. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t1);font:13px/1.45 var(--fbody);padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--acc-text,var(--acc))}
header{display:flex;align-items:center;gap:var(--space-3);padding:calc(env(safe-area-inset-top) + 10px) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:var(--raise);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:var(--z-sticky);flex-wrap:wrap}
header h1{font:700 18px var(--flab);margin:0;flex:1}header .who{color:var(--t2);font-size:13px}
nav{display:flex;gap:4px;padding:8px max(12px,env(safe-area-inset-left));overflow-x:auto;background:var(--raise);border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button,.tabs button{border:0;background:none;color:var(--t2);padding:7px 12px;border-radius:var(--rad);cursor:pointer;font:500 13px var(--flab);white-space:nowrap;min-height:34px}
nav button.on,.tabs button.on{background:var(--acc);color:var(--on-acc)}
main{max-width:none;width:100%;margin:0;padding:var(--space-3) max(var(--space-3),env(safe-area-inset-right)) var(--space-6) max(var(--space-3),env(safe-area-inset-left))}
.card{background:var(--raise);border:1px solid var(--line);border-radius:var(--rad);padding:var(--space-4);margin-bottom:var(--space-3);box-shadow:var(--shadow-sm)}
.tabs{display:flex;gap:4px;margin-bottom:var(--space-3);overflow-x:auto;-webkit-overflow-scrolling:touch}
.row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}.grow{flex:1;min-width:120px}
button{font-family:var(--flab)}
button.p{background:var(--acc);color:var(--on-acc);border:0;padding:8px 14px;border-radius:min(var(--rad),12px);cursor:pointer;font-size:13px;font-weight:600;min-height:34px}
button.s{background:var(--surf);border:1px solid var(--line);color:var(--t1);padding:6px 10px;border-radius:min(var(--rad),12px);cursor:pointer;font-size:12px;min-height:32px}
button.d{background:none;border:1px solid var(--dn);color:var(--dn-text,var(--dn));padding:6px 10px;border-radius:min(var(--rad),12px);cursor:pointer;font-size:12px;min-height:32px}
button:disabled{opacity:.5}
input,select,textarea{font:13px var(--fbody);color:var(--t1);background:var(--surf);border:1px solid var(--line);border-radius:min(var(--rad),10px);padding:7px 9px;width:100%;min-height:34px}
input[type=checkbox]{width:auto;min-height:0}input[type=file]{padding:8px}
textarea{min-height:44px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
label{display:block;font-size:12px;color:var(--t2);margin:10px 0 4px}
h2,h3,h4{font-family:var(--flab)}
.muted{color:var(--t2)}.err{color:var(--dn-text,var(--dn));min-height:20px}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12px;border:1px solid var(--line);color:var(--t2)}
.pill.done,.pill.confirmed,.pill.paid,.pill.hired{color:var(--up-text,var(--up));border-color:var(--up)}
.pill.overdue{color:var(--dn-text,var(--dn));border-color:var(--dn)}.pill.soon{color:var(--warn-text,var(--warn));border-color:var(--warn)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3);margin-bottom:var(--space-3)}
.tile{background:var(--raise);border:1px solid var(--line);border-radius:var(--rad);padding:var(--space-3) var(--space-4)}
.tile b{display:block;font:700 24px var(--fnum);font-variant-numeric:tabular-nums}.tile span{color:var(--t2);font-size:12px}
.bar{height:8px;background:var(--line);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--acc)}
.modal{position:fixed;inset:0;background:color-mix(in srgb,var(--t1) 45%,transparent);display:flex;align-items:flex-start;justify-content:center;padding:var(--space-5);overflow:auto;z-index:var(--z-modal)}
.modal>div{background:var(--raise);border-radius:var(--rad);padding:var(--space-5);width:min(680px,100%);border:1px solid var(--line)}
.note{border-left:3px solid var(--line);padding:4px 12px;margin:10px 0}.note.unread{border-color:var(--acc);background:var(--surf)}.note small{color:var(--t2)}
.login{max-width:400px;margin:8vh auto;padding:0 16px}
/* ---- lists: one DOM, a table on wide screens and stacked cards on phone/iPad portrait ---- */
.tablewrap{overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 215px);min-height:160px;border:1px solid var(--line);border-radius:var(--rad);background:var(--raise)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font:600 11px var(--flab);color:var(--t2);text-transform:uppercase;letter-spacing:.05em;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--raise)}
.tbl td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td input,.tbl td select,.tbl td textarea{background:transparent;border-color:transparent;padding:5px 7px;min-width:110px;min-height:30px}
.tbl td input:hover,.tbl td select:hover,.tbl td textarea:hover{border-color:var(--line)}
.tbl td input:focus,.tbl td select:focus,.tbl td textarea:focus{background:var(--surf);border-color:var(--acc)}
.tbl td:first-child{position:sticky;left:0;z-index:1;background:var(--raise);box-shadow:1px 0 0 var(--line)}
.tbl th:first-child{left:0;z-index:3}
.tbl th{z-index:2}
.tbl td:first-child input,.tbl td:first-child textarea{min-width:220px;font-weight:600}
.tbl td textarea{min-width:150px;resize:none;overflow:hidden;line-height:1.35}
.tbl td[data-label="Notes"] textarea,.tbl td.wide textarea{min-width:260px}
.tbl td input[type=number]{text-align:right;font-family:var(--fnum);font-variant-numeric:tabular-nums}
.tbl tr.closed td{opacity:.55}.tbl tr.closed td input[type=text],.tbl tr.closed td:first-child input{text-decoration:line-through}
.tbl tr.flash td{background:var(--acc-soft,var(--surf))}
.tbl tr.sub td{background:var(--surf)}
.files{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:140px}
.files .chip{display:inline-flex;gap:4px;align-items:center;font-size:13px;border:1px solid var(--line);border-radius:99px;padding:2px 4px 2px 8px;background:var(--surf)}
.files .chip button{border:0;background:none;color:var(--t2);cursor:pointer;padding:0 4px;min-height:0}
.files img{height:36px;border-radius:6px;display:block}
.acts{display:flex;gap:6px;flex-wrap:wrap;min-width:120px}
.acts button{padding:6px 10px;min-height:36px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calday{background:var(--raise);border:1px solid var(--line);border-radius:min(var(--rad),10px);padding:6px;min-height:84px;cursor:pointer;overflow:hidden}
.calday.today{border-color:var(--acc)}.calday.sel{outline:2px solid var(--acc)}
.calday .evt{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calday .dots{display:none;color:var(--acc);font-size:10px;line-height:1}
@media(max-width:700px){
  .tablewrap{border:0;background:none;overflow:visible;max-height:none}
  .tbl,.tbl tbody{display:block}.tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;background:var(--raise);border:1px solid var(--line);border-radius:var(--rad);padding:14px;margin-bottom:var(--space-3)}
  .tbl tr.sub{display:block}
  .tbl td{display:block;padding:0;border:0;min-width:0}
  .tbl td::before{content:attr(data-label);display:block;font:600 11px var(--flab);color:var(--t2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
  .tbl td:first-child,.tbl td.wide,.tbl td.acts-cell{grid-column:1/-1}
  .tbl td input,.tbl td select,.tbl td textarea{min-width:0;width:100%;border-color:var(--line);background:var(--surf)}
  .tbl td:first-child{position:static;box-shadow:none;background:none}
  .tbl td:first-child input,.tbl td:first-child textarea{min-width:0;font-size:16px}
  input,select,textarea{font-size:16px}.tbl td textarea{resize:none}
  .tbl tr.sub td::before,.tbl td.acts-cell::before{display:none}
  .calday{min-height:54px;padding:4px}.calday .evt{display:none}.calday .dots{display:block}
}
@media(max-width:560px){main{padding-top:var(--space-3)}.tile b{font-size:20px}header h1{font-size:16px}.modal{padding:0}.modal>div{border-radius:0;min-height:100%;width:100%}}
@media(hover:none){.tbl td input,.tbl td select,.tbl td textarea{border-color:var(--line)}}

/* ---- ONE LINE PER ROW: nothing wraps; wide lists scroll sideways inside their frame ---- */
.tbl td{white-space:nowrap;vertical-align:middle}
.tbl td input,.tbl td select{text-overflow:ellipsis;white-space:nowrap;min-width:0;width:100%}
.tbl td.c-title input{width:280px;font-weight:600}.tbl td.c-date input{width:132px}.tbl td.c-time input{width:100px}
.tbl td.c-num input{width:100px}.tbl td.c-status select,.tbl td.c-owner select{width:130px}.tbl td.c-owner select{width:110px}
.tbl td.c-text input,.tbl td.c-tel input,.tbl td.c-url input,.tbl td.c-email input{width:170px}.tbl td.c-area input{width:300px}
.files,.acts{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;min-width:0}
.files .chip{flex:0 0 auto;white-space:nowrap}.files img{height:24px}
button.ib{background:var(--surf);border:1px solid var(--line);color:var(--t1);border-radius:8px;padding:3px 8px;min-height:28px;font-size:12px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
button.ib.danger:hover{border-color:var(--dn);color:var(--dn-text,var(--dn))}
.tbl tr.sub td{white-space:normal}
@media(max-width:700px){.tbl td{white-space:normal}.tbl td input,.tbl td select{width:100%!important}.acts,.files{flex-wrap:wrap}}

/* ---- priority colours, calendar strip ---- */
select.pri{font-weight:600}select.pri[data-p="high"]{color:var(--dn-text,var(--dn))}select.pri[data-p="medium"]{color:var(--warn-text,var(--warn))}select.pri[data-p="low"]{color:var(--t2)}
.tbl td.c-status select.pri{width:110px}
.strip{background:var(--raise);border-bottom:1px solid var(--line);padding:6px max(12px,env(safe-area-inset-left));overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.strip-row{display:flex;align-items:center;gap:6px;min-width:max-content}
.strip-label{font:600 10px var(--flab);text-transform:uppercase;letter-spacing:.06em;color:var(--t2);margin-right:2px}
.strip-sep{width:1px;align-self:stretch;background:var(--line);margin:0 6px}
.sday{display:flex;flex-direction:column;align-items:center;min-width:40px;padding:3px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--t1);cursor:pointer;position:relative;line-height:1.1}
.sday small{font-size:10px;color:var(--t2)}.sday b{font:700 14px var(--fnum)}.sday.today{border-color:var(--acc)}
.sday.has{background:var(--acc-soft,var(--surf));border-color:var(--acc)}.sday i{font:700 9px var(--fnum);font-style:normal;color:var(--on-acc);background:var(--acc);border-radius:99px;padding:0 5px;position:absolute;top:-5px;right:-4px}
.kchip{border:1px solid var(--line);background:var(--surf);color:var(--t1);border-radius:99px;padding:4px 10px;font-size:12px;cursor:pointer;white-space:nowrap;min-height:28px}
.kchip b{color:var(--acc-text,var(--acc))}
@media(max-width:560px){.strip-label{display:none}}

.savebadge{font:600 11px var(--flab);padding:3px 10px;border-radius:99px;border:1px solid var(--line);color:var(--t2);white-space:nowrap}
.savebadge.ok{color:var(--up-text,var(--up));border-color:var(--up)}.savebadge.bad{color:var(--dn-text,var(--dn));border-color:var(--dn)}
.tbl td.c-text select.cat,.tbl td select.cat{width:170px}

/* ---- denser type scale (Eric: text too big) ---- */
body{font-size:12.5px}
header{padding-top:calc(env(safe-area-inset-top) + 6px);padding-bottom:6px}
header h1{font-size:15px}
h2{font-size:15px;margin:.4em 0}h3{font-size:13px;margin:.4em 0}h4{font-size:12px;margin:.8em 0 .3em;text-transform:uppercase;letter-spacing:.04em;color:var(--t2)}
nav button,.tabs button{font-size:12px;padding:5px 10px;min-height:28px}
input,select,textarea{font-size:12.5px;min-height:28px;padding:4px 8px}
button.p{font-size:12px;padding:5px 12px;min-height:28px}button.s,button.d{font-size:11.5px;padding:4px 9px;min-height:26px}button.ib{min-height:24px;padding:2px 7px;font-size:11.5px}
.tile{padding:8px 12px}.tile b{font-size:18px}.tile span{font-size:11px}
.card{padding:10px 12px;margin-bottom:8px}
.tbl th{font-size:10px;padding:6px 8px}.tbl td{padding:3px 5px}
.tbl td input,.tbl td select{min-height:26px;padding:3px 6px}
.tbl td.c-title input{width:260px}
.tablewrap{max-height:calc(100vh - 190px)}
.pill{font-size:11px;padding:0 8px}
.sday{min-width:36px;padding:2px 5px}.sday b{font-size:12px}.kchip{font-size:11px;padding:2px 9px;min-height:24px}
@media(max-width:900px) and (min-width:701px){.tbl tr{display:table-row}}
@media(max-width:700px){input,select,textarea{font-size:16px;min-height:38px}button.p,button.s,button.d,button.ib{min-height:36px;font-size:13px}.tile b{font-size:17px}}

/* ---- compact chrome: one top bar, one-line strip, one toolbar row, dense rows ---- */
header{padding:calc(env(safe-area-inset-top) + 2px) 8px 2px 8px;gap:6px;flex-wrap:nowrap;min-height:34px}
header .brand{font-size:16px;padding:0 2px}
header nav{flex:1;min-width:0;border:0;padding:0;background:none;gap:1px}
header nav button{padding:4px 9px;min-height:26px;font-size:12px}
header .who{font-size:11px;white-space:nowrap}
.strip{padding:2px 8px}.strip-row{gap:3px}.strip-label{font-size:9px}.strip-sep{margin:0 3px}
.sday{flex-direction:row;align-items:baseline;gap:2px;min-width:0;padding:1px 6px;border-radius:7px;line-height:1.3}
.sday small{font-size:10px}.sday b{font-size:11px}.sday i{top:-4px;right:-3px;font-size:8px}
.kchip{padding:1px 8px;min-height:20px;font-size:11px}
main{padding:6px 8px 12px}
.tabs{margin-bottom:4px;gap:2px}.tabs button{padding:3px 9px;min-height:24px;font-size:12px}
.card.tb{padding:4px 8px;margin-bottom:6px;gap:5px;flex-wrap:wrap}.tbsep{flex:0 0 8px}
.card{border-radius:10px}
.colpanel{display:none;flex-wrap:wrap;gap:4px 12px;padding:6px 8px;margin-bottom:6px;background:var(--surf);border:1px solid var(--line);border-radius:8px;font-size:11.5px}
.colchk{display:inline-flex;align-items:center;gap:3px;margin:0;font-size:11.5px;color:var(--t1)}.colchk input{width:auto;min-height:0}
.tablewrap{max-height:calc(100vh - 118px)}
.tbl{font-size:12px}.tbl th{padding:4px 6px;font-size:9.5px}.tbl td{padding:1px 4px}
.tbl td input,.tbl td select{font-size:12px;min-height:22px;padding:1px 5px}
.tbl td.c-title input{width:230px}.tbl td.c-text input,.tbl td.c-tel input,.tbl td.c-url input,.tbl td.c-email input{width:140px}.tbl td.c-area input{width:220px}
.tbl td.c-date input{width:118px}.tbl td.c-num input{width:84px}.tbl td.c-status select,.tbl td select.cat{width:128px}.tbl td.c-owner select{width:84px}
button.ib{min-height:20px;padding:0 6px;font-size:11px}.files img{height:18px}
@media(max-width:700px){header nav button{min-height:34px}.tablewrap{max-height:none}}

/* =====================  iPad / touch optimisation  =====================
   Touch screens (pointer:coarse) get finger-sized targets and 16px inputs (iOS zooms the page on focus below 16px);
   mouse screens keep the dense layout. Works in portrait, landscape, Split View and Slide Over (the <=700px card layout). */
html{touch-action:manipulation;overscroll-behavior-y:none}
button,select,label,a,.sday,.kchip,.calday,tr{touch-action:manipulation}
body{-webkit-touch-callout:none}
input,textarea{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}
.tablewrap{max-height:calc(100dvh - 118px);overscroll-behavior:contain;scroll-padding-bottom:45vh}
.tablewrap,.strip,header nav,.tabs{scrollbar-width:thin}
main{scroll-padding-bottom:45vh}
@media (pointer:coarse){
  body{font-size:14px}
  header{min-height:48px;padding-top:calc(env(safe-area-inset-top) + 4px);padding-bottom:4px}
  header nav button{min-height:40px;padding:6px 14px;font-size:14px}
  header .ib,button.ib{min-height:40px;min-width:40px;padding:4px 10px;font-size:15px;border-radius:10px}
  header .who{font-size:13px}
  .savebadge{font-size:12px;padding:5px 12px}
  .strip{padding:5px 10px}.sday{padding:6px 11px;min-height:36px;border-radius:12px}.sday small{font-size:12px}.sday b{font-size:14px}.sday i{font-size:10px;padding:0 6px}
  .kchip{min-height:36px;padding:4px 14px;font-size:13px}
  .tabs button{min-height:40px;padding:6px 14px;font-size:14px}
  input,select,textarea{font-size:16px;min-height:42px;padding:6px 10px}
  button.p{min-height:42px;font-size:15px;padding:8px 18px}button.s,button.d{min-height:40px;font-size:14px;padding:6px 14px}
  .card.tb{gap:8px;padding:8px 10px}
  .tbl{font-size:15px}.tbl th{font-size:11px;padding:10px 8px}.tbl td{padding:3px 6px}
  .tbl td input,.tbl td select{font-size:16px;min-height:42px;padding:6px 8px}
  .tbl td.c-title input{width:280px}.tbl td.c-text input,.tbl td.c-tel input,.tbl td.c-url input,.tbl td.c-email input{width:170px}.tbl td.c-area input{width:260px}
  .tbl td.c-date input{width:150px}.tbl td.c-num input{width:104px}.tbl td.c-status select,.tbl td select.cat{width:160px}.tbl td.c-owner select{width:110px}
  .acts,.files{gap:8px}.files .chip{padding:4px 6px 4px 12px;font-size:14px}.files .chip button{min-width:32px;min-height:32px}.files img{height:34px}
  .calday{min-height:72px}.sday.today,.calday.today{border-width:2px}
  .colchk{font-size:14px;min-height:36px}.colchk input{width:20px;height:20px}
  input[type=checkbox]{width:22px;height:22px}
  .modal>div{padding:20px}
  /* no hover-only affordances: editable cells always show their edges */
  .tbl td input,.tbl td select,.tbl td textarea{border-color:var(--line)}
}
/* iPad portrait & Split View (701-900px): keep the one-line table but let it breathe */
@media (pointer:coarse) and (min-width:701px) and (max-width:900px){
  .tbl td.c-title input{width:220px}.tbl td.c-text input,.tbl td.c-tel input,.tbl td.c-url input,.tbl td.c-email input{width:140px}.tbl td.c-area input{width:200px}
  header .who{display:none}
}
/* iPad landscape / large tablets: use the space */
@media (pointer:coarse) and (min-width:1000px){ main{padding-left:14px;padding-right:14px} .tbl td.c-title input{width:340px} .tbl td.c-area input{width:320px} }
/* phones (and Slide Over): stacked cards, larger text for thumbs */
@media (max-width:700px){ body{font-size:15px} .tbl td::before{font-size:11px} header .who{display:none} }
/* standalone (Home-Screen app): the status-bar safe area and no browser chrome */
@media (display-mode:standalone){ header{padding-top:calc(env(safe-area-inset-top) + 4px)} .tablewrap{max-height:calc(100dvh - 105px)} }
@supports not (height:100dvh){ .tablewrap{max-height:calc(100vh - 118px)} }