/* round 7 module (handover), built by B2: existing variables only, no hex colours.
   F03 Shift handover — new handover (3 columns Done / Next / Issues), Waiting for you, Recent handovers. */
.ho-top{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:14px;align-items:start}
/* R10 (U7): with the 64 px sidebar rail a 1024 tablet keeps both cards side by side; they stack below 900 px */
@media (max-width:1180px){.ho-top{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}}
@media (max-width:1100px){.ho-top{grid-template-columns:1fr}}   /* R10 QA5: the Waiting panel goes below the form at ≤1100 */
.ho-top .card{margin:0}
.ho-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ho-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.ho-meta{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.ho-hint{margin:-4px 0 10px;font-size:13px;color:var(--ink3)}
.ho-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--amber);color:var(--amber-ink,var(--ink));font-weight:800;font-size:12px}
.ho-pick{margin:0 0 10px} .ho-pick label{display:flex;align-items:center;gap:0}
.ho-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:900px){.ho-cols{grid-template-columns:1fr}}
.ho-col{border:1px solid var(--rule);border-radius:10px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.ho-colh{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;font-size:13px;font-weight:700;color:var(--on-accent)}
.ho-done .ho-colh{background:var(--green)} .ho-next .ho-colh{background:var(--indigo)} .ho-issues .ho-colh{background:var(--red)}
.ho-line{padding:8px 10px;border-bottom:1px solid var(--rule2);display:flex;flex-direction:column;gap:4px}
.ho-lt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:22px}
.ho-wo{display:inline-block;font-family:var(--mono);font-size:11.5px;border:1px solid var(--rule);background:var(--paper2);border-radius:5px;padding:1px 6px;white-space:nowrap}
.ho-wo a.joblink{color:var(--ink)} .ho-rush{font-size:10.5px;padding:1px 6px}
.ho-x{background:none;border:0;cursor:pointer;color:var(--ink3);font:inherit;font-size:11.5px;padding:0 3px}
.ho-x:hover{color:var(--red)} .btn.ho-del{margin-left:auto;flex:none;min-height:36px;color:var(--ink2)} .btn.ho-del:hover{color:var(--red);border-color:var(--red)}
.ho-woin{font-family:var(--mono);font-size:11.5px;padding:3px 6px;width:150px}
.ho-txt{width:100%;resize:none;border:1px solid transparent;background:transparent;padding:3px 4px;font-size:13px;line-height:1.35;min-height:24px;overflow:hidden}
.ho-txt:hover{border-color:var(--rule)} .ho-txt:focus{background:var(--field);border-color:var(--indigo)}
.ho-auto{font-size:12px;color:var(--ink3);padding-left:4px}
.ho-add{margin:6px 10px 9px;min-height:32px;align-self:flex-start;background:none;border:0;color:var(--ink2);font:inherit;font-size:12.5px;cursor:pointer;padding:2px 0}
.ho-add:hover{color:var(--indigo)}
.ho-foot{margin:12px 0 0}
.ho-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:16px;padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--paper)}
.ho-to{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink2);flex:1 1 240px;min-width:0;white-space:nowrap} .ho-to input{min-height:40px;width:auto;flex:1;min-width:120px;max-width:220px;font-size:14px}
.ho-foot .sp{flex:1} #hoSend{white-space:nowrap;flex:none}
/* waiting for you */
.ho-from{display:flex;gap:10px;align-items:flex-start;margin:4px 0 8px}
.ho-av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--grey-l);color:var(--ink);display:grid;place-items:center;font-weight:800}
.ho-when{font-size:12px;color:var(--ink3)}
.ho-sec{margin:8px 0} .ho-sec h4{margin:6px 0 4px;font-size:13px}
.ho-s-issues h4{color:var(--red)}
.ho-li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:4px;align-items:baseline;font-size:13px;padding:2px 0;line-height:1.55}
.ho-chip[hidden]{display:none}
.ho-mk{flex:none;width:14px;color:var(--ink2);font-weight:700} .ho-s-done .ho-mk{color:var(--green)} .ho-s-issues .ho-mk{color:var(--red)}
.ho-acts{margin-top:12px} .ho-acts .sp{flex:1}
.ho-more{border-top:1px solid var(--rule);margin-top:12px;padding-top:4px}
.ho-mrow{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule2);padding:6px 2px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.ho-mrow:hover{background:var(--hover)} .ho-mrow span:last-child{margin-left:auto}
.ho-empty{margin:6px 0 2px}
/* recent handovers */
.ho-rhead{margin-bottom:6px}
.ho-chips{display:flex;gap:6px;flex-wrap:nowrap;align-items:center;margin-left:auto;min-width:0} .ho-chips select{min-width:0;max-width:220px}
.ho-fc{border:1px solid var(--rule);background:var(--paper);border-radius:16px;padding:4px 11px;font:inherit;font-size:13px;min-height:32px;white-space:nowrap;font-weight:600;color:var(--ink);cursor:pointer}
.ho-fc:hover{border-color:var(--ink3)} .ho-fc.on{background:var(--dark);border-color:var(--dark);color:var(--on-accent)}
.ho-chips select{padding:4px 8px;font-size:13px;min-height:32px}
.ho-tbl tr.ho-r{cursor:pointer} .ho-tbl tr.ho-late td{background:var(--red-l)}
.ho-tbl .ho-wos{white-space:normal} .ho-tbl .ho-wos .ho-wo{margin:1px 0}
.ho-cnt .g{color:var(--green)} .ho-cnt .b{color:var(--indigo)} .ho-cnt .r{color:var(--red);font-weight:700}
.ho-ok{color:var(--ink);font-weight:600}
.ho-modal h3{margin-top:0}
/* My Work banner (js/mywork.js hook → HANDOVER.banner) */
.ho-mwban{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px} .ho-mwban .btn{margin-left:auto}
.ho-tbl td.c,.ho-tbl td:nth-child(3){white-space:nowrap}
/* v1 polish, tablet first: on a touch screen (or a narrow window) every control is at least 44 px and "remove" shows without hovering */
@media (hover:none),(pointer:coarse),(max-width:1180px){
  .btn.ho-del{min-height:44px}
  .ho-x{flex:none;min-width:40px;min-height:44px;font-size:18px}
  .ho-cols{grid-template-columns:1fr}                      /* three 220 px columns are too tight for 44 px controls: Done, Next, Issues stack */
  .ho-lt{min-height:44px;flex-wrap:nowrap} .ho-lt .ho-wo{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .ho-lt .ho-rush{flex:none}
  .ho-lt .ho-woin{flex:1 1 auto;min-width:0}
  .ho-woin{min-height:44px;font-size:14px;width:190px}
  .ho-txt{font-size:15px;min-height:44px;border-color:var(--rule);background:var(--field,var(--paper))}
  .ho-add{min-height:44px;padding:4px 10px;font-size:14px;font-weight:600;color:var(--indigo)}
  .ho-pick select,.ho-pick .btn,.ho-foot .btn,.ho-acts .btn,.ho-chips select,.ho-fc{min-height:44px}
  .ho-fc{padding:6px 14px;font-size:13.5px}
  .ho-to{min-height:44px} .ho-to input{min-height:44px;font-size:14px;width:190px}
  .ho-mrow{min-height:44px}
  .ho-mwban .btn{min-height:44px}
  .ho-wo a.joblink{display:inline-flex;align-items:center;min-height:32px} .ho-lt .ho-wo{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:13px}
  .ho-tbl tr.ho-r td{height:48px}
}