/* OnSchedule Online additions to the original Roundbook stylesheet (style.css is the old app's, unchanged). */
.loginbrand{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 18px} .loginbrand .mark{width:40px;height:40px;border-radius:11px;box-shadow:var(--shadow)} .loginbrand .word{height:26px;width:auto}
.login{max-width:380px;margin:12vh auto 0;padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.login h1{margin:0 0 4px;font-size:22px} .login p{color:var(--muted);margin:0 0 16px}
.login label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 4px}
.login input,.formrow input,.formrow select,.modal input[type=text],.modal input[type=date],.modal input[type=search]{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.login .btn{width:100%;margin-top:16px;padding:10px} .err{color:var(--debt);font-size:13px;margin-top:10px;min-height:1.2em}
.hidden{display:none !important}
.syncbar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok)} .dot.off{background:var(--debt)} .dot.busy{background:var(--hold)}
.banner{margin:8px 0;padding:8px 12px;border-radius:10px;font-size:13px;background:#fbf3dc;border:1px solid #ecd9a0}
.banner.bad{background:var(--debt-wash);border-color:#e6c1b0} .banner button{margin-left:8px}
.who{font-size:12px;color:var(--muted)}
.chip.by{background:#e3f0ea;color:#1f5a3f;border-color:#bcd9cb} .chip.locked{background:#eee;color:#555}
.chip.wait{background:#fff3cf;color:#7a5b00}
.sh .btn.warnbtn{background:#fbf3dc}
.users td,.users th{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line-2);font-size:13px}
.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.pick{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.pick label{display:flex;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line-2);cursor:pointer}
#view-work .sc-panel{overflow:auto}
/* worker rows: one job per card on a phone, with a big tick button */
.sh.wk{grid-template-columns:44px 90px minmax(150px,1fr) 150px;min-width:0}
.sh.wk.adm{grid-template-columns:44px 90px minmax(90px,.6fr) minmax(170px,1.3fr) minmax(88px,.5fr) 106px 76px 62px 92px 64px 168px;min-width:1158px}
@media (max-width:760px){
  main{padding:10px 8px 90px}
  .toolbar{flex-wrap:wrap;gap:8px} .seg{margin-left:0}
  #scSheetWrap .shhead{display:none}
  .sh.wk,.sh.wk.adm{display:grid;grid-template-columns:52px 1fr;min-width:0;gap:4px 10px;padding:10px 8px}
  .sh.wk > span{min-width:0} .sh.wk .n{grid-row:span 3;align-self:start}
  .sh.wk .acts{grid-column:2;display:flex;gap:6px;flex-wrap:wrap}
  .sh.wk .tick{width:44px;height:44px;font-size:20px}
  .sc-tabs{position:sticky;top:0;z-index:5;background:var(--paper);flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .stab{border-radius:8px;margin-top:0}
}
.scrim{position:fixed;inset:0;background:rgba(14,26,28,.28);backdrop-filter:blur(2px);z-index:60;opacity:0;pointer-events:none;transition:.2s} .scrim.open{opacity:1;pointer-events:auto}
#scrim{z-index:80}
@media (max-width:760px){ #view-work.active{display:flex;flex-direction:column} #view-work .sc-tabs{order:-1} }
.bannerhost{max-width:2000px;margin:0 auto;padding:0 clamp(16px,2.4vw,36px)} .bannerhost:empty{display:none}

.drawer{display:flex;flex-direction:column} .drawer[aria-hidden=true]{visibility:hidden} .dbody{flex:1}
.paymsg{margin:6px 0;font-size:12.5px;color:var(--muted)}
.fld{display:block;margin:10px 0 4px;font-size:12px;font-weight:600;color:var(--muted)}
.led .del{margin-left:8px;border:0;background:none;cursor:pointer;color:var(--debt);font-size:12px;padding:0 4px}
.money.owe{color:var(--debt)} .chip.paid{background:#e3f0ea;color:#1f5a3f;border-color:#bcd9cb}
.cardtable td,.cardtable th{white-space:nowrap}
@media (max-width:760px){ .drawer{width:100vw} .tbl td.sub{display:none} }

.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} .formgrid .fld{margin-top:8px}
.formgrid input,.formgrid select{width:100%;font:inherit;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:#fff}
.modal .mbody select{font:inherit;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:#fff;width:100%}
.jrow .jm .btn{margin-left:2px} .note-del{border:0;background:none;cursor:pointer;color:var(--debt);padding:0 4px}
@media (max-width:760px){ .formgrid{grid-template-columns:1fr} }

#printarea{display:none}
.cardtable td{padding:6px 10px} .cardtable{margin-top:4px}
/* The printable worksheet. Its look is NOT inside @media print so that admin.js can lay it out (off screen) and measure it to build numbered pages;
   only showing it and hiding the rest of the app is print-only. */
#printarea{font:10.5px/1.22 Arial,Helvetica,"Segoe UI",sans-serif;color:#000;background:#fff}
#printarea.measure{display:block;position:absolute;left:-10000px;top:0;width:190mm;visibility:hidden}
#printarea .head{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 4px}
#printarea .head h1{font-size:17px;margin:0 0 5px;border-bottom:2px solid #000;padding-bottom:2px;display:inline-block}
#printarea .tot{font-size:11px;margin-top:1px} #printarea .right{text-align:right}
#printarea .brand{font-size:14px;font-weight:bold;color:#2b6cb0} #printarea .brand span{color:#f6a01a} #printarea .printed{margin-top:18px;font-size:11px}
#printarea h2.ws{font-size:13px;text-decoration:underline;margin:8px 0 4px}
#printarea .wstable{width:100%;border-top:1px solid #bcbcbc;border-left:1px solid #bcbcbc}
#printarea .wshead,#printarea .wsrow{display:flex;width:100%}
#printarea .wshead{background:#eee;font-weight:bold;border-bottom:1px solid #8f8f8f}
#printarea .wsrow{border-bottom:1px solid #bcbcbc;break-inside:avoid;page-break-inside:avoid}
#printarea .c{border-right:1px solid #bcbcbc;padding:2px 5px;font-size:10px;overflow:hidden;box-sizing:border-box}
#printarea .c-done{width:42px;flex:0 0 42px;text-align:center} #printarea .c-due{width:112px;flex:0 0 112px} #printarea .c-jd{flex:1 1 auto;min-width:0}
#printarea .c-num{width:62px;flex:0 0 62px;text-align:right} #printarea .c-coll{width:78px;flex:0 0 78px}
#printarea .chk{display:inline-block;width:15px;height:15px;border:1.5px solid #000;margin-top:3px} #printarea .box{display:inline-block;width:46px;height:13px;border-bottom:1px solid #000}
#printarea .neg{color:#b00020;font-weight:bold} #printarea .nm{font-weight:bold}
#printarea .pg{display:flex;flex-direction:column;height:244mm;overflow:hidden;break-after:page;page-break-after:always}
#printarea .pg:last-child{break-after:auto;page-break-after:auto}
#printarea .pgbody{flex:1 1 auto;min-height:0}
#printarea.measure .pg{height:auto}   /* while being laid out, a page is as tall as its rows, so admin.js can tell when the next row will not fit */
#printarea.measure .pgbody{flex:none}
#printarea .pgfoot{flex:0 0 auto;display:flex;justify-content:space-between;font-size:8px;color:#333;border-top:1px solid #bcbcbc;padding-top:1.5mm}
/* Native mode (admin.js adds .native when the print engine can put text in the page margin): the engine writes "Page N of M" at the very bottom of every sheet,
   whatever the paper size or margins. Pages then flow at their natural height. */
#printarea.native .pg{height:auto;overflow:visible;display:block}
#printarea.native .pgfoot{display:none}
@media print{
  body > *:not(#printarea){display:none !important}
  #printarea{display:block !important}
  @page{margin:10mm}
}

.crtag{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.04em;vertical-align:.08em;margin-left:1px}
.chip.crchip{background:var(--accent-wash);color:var(--accent-ink);border-color:transparent;font-weight:600}
@media print{ #printarea .crp{color:#1a7f37;font-weight:bold} }

.gcico{display:inline-flex;flex:0 0 auto;vertical-align:-2px;margin-right:5px;color:var(--accent-ink,#0b6b69)}
/* Price cell: marker + price always on ONE line, whatever the digits */
.sh .pricecell{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;min-width:0}
.sh .pricebtn{all:unset;box-sizing:border-box;cursor:text;font:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;padding:1px 3px;border-radius:4px;border-bottom:1px dotted transparent}
.sh .pricebtn:hover,.sh .pricebtn:focus-visible{border-bottom-color:var(--muted,#999);background:rgba(0,0,0,.04)}
.sh .pricecell.editing{flex-wrap:wrap;flex-direction:column;align-items:flex-end;gap:2px}
.sh .pricecell.editing .gcico{display:none}
.sh .pricecell.dayprice .pricebtn{color:var(--accent);font-weight:600}
.sh .pricechg{display:flex;align-items:center;gap:4px;font-size:11px;white-space:nowrap;color:var(--muted);cursor:pointer}
.sh .pricechg input{margin:0;width:14px;height:14px}
.sh .priceedit{width:6.2em;max-width:100%;box-sizing:border-box;text-align:right;font:inherit;font-variant-numeric:tabular-nums;padding:1px 4px;min-height:0;height:auto}
.sh .owe{color:var(--debt);font-weight:600} .sh .zero{color:var(--muted)}

/* Rounds: the same fixed, left-aligned Price and Owes columns as the old Roundbook, text that wraps rather than being cut off, and a floor so a narrow window scrolls instead of crushing Address */
#roundTable{table-layout:fixed;min-width:1100px}
#roundTable td.money{font-size:12.5px;text-align:left}
#roundTable th,#roundTable td{padding-left:8px;padding-right:8px;text-align:left}
#roundTable th:first-child,#roundTable td.seq{padding-left:6px;padding-right:2px}
#roundTable td.cust,#roundTable td.sub{white-space:normal;overflow:visible;text-overflow:clip;max-width:none;overflow-wrap:anywhere}
#roundTable .chip{white-space:nowrap} #roundTable .chip.freq{white-space:normal;overflow-wrap:anywhere;line-height:1.25} #roundTable .btn.small{padding:4px 7px;margin-left:3px}
#roundTable td.r{text-align:right}
.rd-freq{margin:0 0 10px;font-size:13px;color:var(--muted)} .rd-all{margin:12px 2px;font-size:13px;color:var(--muted)} .rd-all b,.rd-freq b{color:var(--ink,#1c2b2a)}
.paychip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--accent-wash);color:var(--accent-ink)}

/* Rounds: a permanent four-dot handle (one dot plus three shadows = a 2 x 2 grid) in the first cell; the whole cell is what you drag. #728080 keeps it above 3:1 on white and on shaded rows. */
#roundTable td.seq.grab{cursor:grab;touch-action:none;user-select:none}
#roundTable .grip{display:block;width:3px;height:3px;border-radius:50%;margin:6px 0 0 5px;background:#728080;box-shadow:5px 0 0 #728080,0 5px 0 #728080,5px 5px 0 #728080}
#roundTable tr:hover .grip{background:var(--muted);box-shadow:5px 0 0 var(--muted),0 5px 0 var(--muted),5px 5px 0 var(--muted)}
body.row-dragging-body{cursor:grabbing;user-select:none;-webkit-user-select:none}
#roundTable tr.row-dragging{opacity:.4}
#roundTable tr.drop-above td{box-shadow:inset 0 2px 0 var(--accent)} #roundTable tr.drop-below td{box-shadow:inset 0 -2px 0 var(--accent)}
.row-ghost{position:fixed;z-index:250;pointer-events:none;background:var(--panel);border:1px solid var(--accent);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:7px 12px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-ghost .sub{color:var(--muted)}
@keyframes rowflash{from{background:var(--accent-wash)}to{background:transparent}}
#roundTable tr.row-moved td{animation:rowflash 1.3s ease-out}

/* History editing: the edit box sits above the customer panel (70) and any window (90); the toast above everything, with an Undo button */
.paypop{z-index:200}
.toast{z-index:300} .toast.withact{pointer-events:auto}
.toast .toast-undo{margin-left:10px;background:none;border:none;color:#fff;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}
.led.editable,.hrow.editable{cursor:pointer;border-radius:6px;padding-left:6px;padding-right:6px;margin:0 -6px}
.led.editable:hover,.hrow.editable:hover{background:var(--accent-wash)}
.hh{margin-bottom:10px}

/* Worksheets: who works each one, and the admin's Show filter */
.wsfilter .wk-assign{width:auto;font-size:13px;padding:3px 8px;margin-left:4px}
.stab .stabwho{font-weight:400;font-size:11.5px;color:var(--muted);max-width:110px;overflow:hidden;text-overflow:ellipsis}
.wsfilter{margin:10px 0 2px;font-size:13px} .wsfilter select{width:auto;padding:3px 8px;font-size:13px}

.permchk{display:block;font-size:12.5px;white-space:nowrap} .permchk input{width:auto;margin-right:5px}

/* Rounds fills the window the same way: the bars keep their height, the round's panel takes the rest and its table scrolls inside it (no grey space under it on a tall window) */
#view-rounds.active{display:flex;flex-direction:column;height:calc(100vh - 92px);min-height:480px}
#view-rounds .title,#view-rounds .rd-bar,#view-rounds > .rd-value-bar{flex:0 0 auto}
#view-rounds > .panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#view-rounds > .panel > .phead,#view-rounds > .panel > .rd-value-bar{flex:0 0 auto}
#view-rounds > .panel > .scroll{flex:1 1 auto;min-height:0;max-height:none}

/* on any screen the footer line sits at the bottom of the window, not partway up it */
main#main{min-height:calc(100vh - 96px)}

/* Schedule worksheet rows (admin): the drag handle in the # cell, the drop marker and the lifted row */
#scRows .sh .n.grab{cursor:grab;touch-action:pan-y;user-select:none;-webkit-touch-callout:none;justify-content:flex-start;gap:6px;padding-left:2px}
#scRows .sh .grip{display:block;flex:0 0 auto;width:3px;height:3px;border-radius:50%;margin:-5px 8px 0 4px;background:#728080;box-shadow:5px 0 0 #728080,0 5px 0 #728080,5px 5px 0 #728080}
#scRows .sh:hover .grip{background:var(--muted);box-shadow:5px 0 0 var(--muted),0 5px 0 var(--muted),5px 5px 0 var(--muted)}
#scRows .sh.row-dragging{opacity:.4}
#scRows .sh.drop-above{box-shadow:inset 0 2px 0 var(--accent)} #scRows .sh.drop-below{box-shadow:inset 0 -2px 0 var(--accent)}
.sc-tabs .stab{padding:4px 10px}
#scEod.eodbar{flex:0 0 auto}

#main.same .view{animation:none}

/* ---------- phone: the sections become a tab bar at the bottom (where a thumb reaches), nothing is wider than the screen ---------- */
@media (max-width:760px){
  .toolbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.96);flex-wrap:nowrap;gap:8px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top,0))}
  .brand b{font-size:14px} .brand .sub{display:none}
  .syncbar{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;white-space:nowrap}
  #nav.seg{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;border-radius:0;border:0;border-top:1px solid var(--line);background:rgba(255,255,255,.97);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom,0));display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
  #nav.seg button{flex-direction:column;gap:2px;padding:6px 2px;font-size:11px;min-height:48px;justify-content:center;border-radius:8px;min-width:0}
  #nav.seg button .ic{width:20px;height:20px}
  #nav.seg button .kbd{display:none}
  .footbar{display:none}
  main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0))}
}

/* ---------- phone: Schedule, Rounds and People as cards instead of squeezed tables ---------- */
@media (max-width:760px){
  .brand b,.brand .word,.brand .wordsfx{display:none}
  #nav.seg{background:#fff}
  .sc-legend{gap:4px 10px;font-size:11px} .sc-legend i{width:14px;height:11px}
  .sc-head{gap:6px}
  /* button bars: one scrolling strip per group, big enough to tap */
  .sc-bar,.sc-foot{flex-direction:column;align-items:stretch;gap:6px}
  .sc-bar .grp,.sc-foot .grp{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .sc-bar .btn,.sc-foot .btn,.sc-bar .newchk,.sc-bar .tot{flex:0 0 auto;white-space:nowrap}
  .sc-bar .btn,.sc-foot .btn{padding:10px 12px;font-size:14px;min-height:40px}
  .sc-foot .tot{order:-1;justify-content:center;gap:14px;flex-wrap:wrap}
  .eodbar,#scEod.eodbar{flex-direction:column;align-items:stretch;gap:8px;height:auto}
  .eodbar .grp,.eodbar .right{flex-wrap:wrap;gap:8px}
  .wsfilter{flex-wrap:wrap;gap:6px 8px}
  .sc-tabs{top:50px}
  .stab{padding:8px 10px}
  #scDue{max-height:40vh!important}

  /* due list */
  #scDue .dg.dghead{display:none}
  #scDue .dg{display:grid;min-width:0;gap:2px 8px;align-items:center;padding:8px 8px}
  #scDue .dg > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #scDue .dg.group{grid-template-columns:24px 1fr auto auto 44px}
  #scDue .dg.group > :nth-child(1){grid-column:1;grid-row:1/3}
  #scDue .dg.group > :nth-child(2){grid-column:2;grid-row:1;font-weight:600}
  #scDue .dg.group > :nth-child(3){grid-column:2;grid-row:2}
  #scDue .dg.group > :nth-child(8){grid-column:3;grid-row:1;text-align:right}
  #scDue .dg.group > :nth-child(9){grid-column:3;grid-row:2;text-align:right}
  #scDue .dg.group > :nth-child(10){grid-column:4;grid-row:1/3}
  #scDue .dg.group > :nth-child(11){grid-column:5;grid-row:1/3;justify-self:center}
  #scDue .dg.group > :nth-child(4),#scDue .dg.group > :nth-child(5),#scDue .dg.group > :nth-child(6),#scDue .dg.group > :nth-child(7){display:none}
  #scDue .dg.child{grid-template-columns:24px 1fr auto 44px}
  #scDue .dg.child > :nth-child(1),#scDue .dg.child > :nth-child(5),#scDue .dg.child > :nth-child(6),#scDue .dg.child > :nth-child(7),#scDue .dg.child > :nth-child(8),#scDue .dg.child > :nth-child(10){display:none}
  #scDue .dg.child > :nth-child(3){grid-column:2;grid-row:1;font-weight:600;white-space:normal}
  #scDue .dg.child > :nth-child(9){grid-column:3;grid-row:1;text-align:right}
  #scDue .dg.child > :nth-child(2){grid-column:2;grid-row:2;color:var(--muted);font-size:12px}
  #scDue .dg.child > :nth-child(4){grid-column:3;grid-row:2;color:var(--muted);font-size:12px;text-align:right}
  #scDue .dg.child > :nth-child(11){grid-column:4;grid-row:1/3;justify-self:center}
  #scDue input[type=checkbox]{width:22px;height:22px}

  /* worksheet rows (admin) */
  .sh.wk.adm{grid-template-columns:44px 1fr auto;gap:2px 8px;padding:10px 8px;align-items:center}
  .sh.wk.adm > :nth-child(1){grid-column:1;grid-row:1/6;align-self:start}
  .sh.wk.adm > :nth-child(4){grid-column:2/4;grid-row:1;white-space:normal;font-weight:600}
  .sh.wk.adm > :nth-child(2){grid-column:2;grid-row:2;font-size:12.5px}
  .sh.wk.adm > :nth-child(3){grid-column:3;grid-row:2;font-size:12.5px;text-align:right}
  .sh.wk.adm > :nth-child(5){grid-column:2;grid-row:3;font-size:12.5px}
  .sh.wk.adm > :nth-child(9){grid-column:3;grid-row:3;text-align:right;font-weight:600}
  .sh.wk.adm > :nth-child(7){grid-column:2;grid-row:4;font-size:12.5px;color:var(--muted)}
  .sh.wk.adm > :nth-child(10){grid-column:3;grid-row:4;text-align:right}
  .sh.wk.adm > :nth-child(6),.sh.wk.adm > :nth-child(8){display:none}
  .sh.wk.adm > .acts,.sh.wk.adm > :nth-child(11){grid-column:2/4;grid-row:5;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
  .sh.wk.adm .btn{padding:9px 14px;min-height:40px;font-size:14px}
  .sh.wk.adm .tick{width:44px;height:44px}
  .sh.wk.adm .grip{margin-right:6px}

  /* Rounds */
  #roundTable,#roundTable tbody{display:block;min-width:0!important;width:100%}
  #roundTable thead{display:none}
  #roundTable tr[data-id]{display:grid;grid-template-columns:28px 1fr auto;gap:2px 8px;padding:10px 8px;border-bottom:1px solid var(--line-2);align-items:center}
  #roundTable td{display:block;border:0!important;padding:0!important;width:auto!important;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #roundTable td:nth-child(1){grid-column:1;grid-row:1/4}
  #roundTable td:nth-child(2){grid-column:2;grid-row:1;font-weight:600}
  #roundTable td:nth-child(5){grid-column:3;grid-row:1;text-align:right}
  #roundTable td:nth-child(3){grid-column:2;grid-row:2;white-space:normal}
  #roundTable td:nth-child(8){grid-column:3;grid-row:2;text-align:right}
  #roundTable td:nth-child(4){grid-column:2;grid-row:3}
  #roundTable td:nth-child(7){grid-column:3;grid-row:3;text-align:right}
  #roundTable td:nth-child(6){display:none}
  #roundTable td:nth-child(9){grid-column:2/4;grid-row:4;white-space:normal!important;margin-top:4px}
  #roundTable td:nth-child(9) .btn{padding:8px 10px;min-height:38px;font-size:13px}

  /* People */
  table.users,table.users tbody{display:block;width:100%}
  table.users thead{display:none}
  table.users tr{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line-2);align-items:center}
  table.users td{display:block;padding:0!important;border:0!important;min-width:0}
  table.users td:nth-child(1){font-weight:600} table.users td:nth-child(3){justify-self:end}
  table.users td:nth-child(2),table.users td:nth-child(4){grid-column:1/3;overflow-wrap:anywhere}
  table.users td:nth-child(6){justify-self:end}
  table.users select{min-height:40px}
  .formrow{flex-direction:column;align-items:stretch}
}
@media (max-width:760px){
  #view-work.active{height:auto;min-height:0}                       /* on a phone the page scrolls; it is not squeezed into one window */
  /* iPhone web views (WebKit) can refuse to scroll the page from inside a nested scroll box, so on a phone the worksheet is part of the page, not a box of its own,
     and the page is as tall as its content (a body fixed at the window's height can also cut a sticky header off after the first screen) */
  html,body{height:auto;min-height:100%}
  #view-work .sc-panel,#scSheetWrap{overflow:visible;overflow:clip}
  #view-work .sc-panel{flex:0 0 auto}
  #scSheetWrap{max-height:none;min-height:140px}
  main.sched,main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0))}
}
@media (max-width:760px){
  .sc-bar .grp,.sc-foot .grp{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .sc-bar,.sc-foot{min-width:0;max-width:100%}
}

/* worker payment box: amount only, big enough to type with a thumb (16px+ stops iPhone zooming in) */
.payamt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:2px 14px}
.payamt span{font-size:24px;color:var(--muted)} .payamt input{flex:1;border:0!important;outline:0;font:inherit;font-size:28px;font-weight:700;padding:10px 0;background:transparent;min-width:0;font-variant-numeric:tabular-nums}
.payamt:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
@media (max-width:760px){ .modal .btn{min-height:44px;font-size:15px} }

.chip.paid.editable{cursor:pointer} .chip.paid.editable:hover{filter:brightness(.96);text-decoration:underline}
.chip.paid.nomethod{background:#fff3d6;color:#8a5a00;border-color:#ecd49a}
/* sync state in words (top bar) */
.syncst{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line,#ddd);white-space:nowrap}
.syncst.ok{color:#1d6b3a;background:#eaf6ee;border-color:#bfe2cb}
.syncst.busy{color:#7a5a00;background:#fff6dc;border-color:#ecd49a}
.syncst.off{color:#9b2c2c;background:#fdecec;border-color:#f2c1c1}
@media(max-width:760px){.syncst{font-size:11px;padding:2px 6px}}
/* iPhone/iPad zoom in on any text box, drop-down or text area with text under 16px when it is tapped, and stay zoomed after (the page then looks
   cut off on both sides). On phone-size screens every one of them gets 16px; the payment amount keeps its larger size. */
@media (max-width:760px){
  input,select,textarea{font-size:16px!important}
  .payamt input{font-size:28px!important}
}
/* Phones, workers: a full-width worksheet picker replaces the tabs (opens the phone's own list). Bigger screens keep the tabs. */
.ws-pick{display:none}
@media (max-width:760px){
  #view-work.worker .sc-tabs{display:none}
  .ws-pick{display:block;margin:4px 0 10px}
  .ws-pick select,.ws-pick.one{width:100%;min-height:52px;padding:12px 44px 12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel,#fff);color:var(--ink);
    font:inherit;font-size:17px!important;font-weight:700;-webkit-appearance:none;appearance:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .ws-pick select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23D6420F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center}
  .ws-pick.one{display:flex;align-items:center;padding-right:14px}
}

/* History lists show the latest 24 entries on screen (the height is set from the real rows by fit24 in app.js) and scroll for the rest */
.histscroll{overflow-y:auto;overscroll-behavior:contain}

/* a window between phone and wide desktop: the title bar wraps onto a second line instead of running off the right-hand edge */
@media (min-width:761px) and (max-width:1180px){ .toolbar{flex-wrap:wrap;row-gap:6px} .toolbar .syncbar{margin-left:auto} }

/* a finger on a worksheet tab or a row handle scrolls first; holding it for a moment picks the item up */
.sc-tabs .stab{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.sc-tabs .stab.lifted,#scRows .sh.lifted{outline:2px solid var(--accent);outline-offset:-2px}
.sc-bar .addto{display:inline-flex;align-items:center;gap:6px}
@media (max-width:420px){.loginbrand{gap:8px}.loginbrand .mark{width:36px;height:36px}.loginbrand .word{height:22px}.loginbrand .wordsfx{font-size:17px}}      /* the name and Online fit one line on a phone */

/* first-time guide on the Areas screen (as in the standalone OnSchedule) */
.guide{max-width:620px;margin:18px auto;text-align:left}
.guide h2{margin:0 0 4px;font-size:20px}
.guide .sub{margin:0 0 14px}
.gstep{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s,background .15s}
.gstep:hover{border-color:var(--accent)}
.gstep.next{border-color:var(--accent);background:var(--accent-wash)}
.gstep.done{opacity:.7;cursor:default}
.gstep.locked{opacity:.55;cursor:not-allowed;box-shadow:none}
.gstep .gnum{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--line-2);color:var(--muted)}
.gstep.next .gnum{background:var(--accent);color:#fff}
.gstep.done .gnum{background:var(--ok);color:#fff}
.gstep .gtxt{flex:1;display:flex;flex-direction:column;gap:2px}
.gstep .gtxt small{color:var(--muted);font-size:12.5px}
.gstep .gcta{font-weight:700;font-size:13px;color:var(--accent-ink)}
.gstep.locked .gcta,.gstep.done .gcta{color:var(--muted)}