/* To-dos v2 (Lumi, Oct 28 2026): one white card, one tab row, one-line rows, lots of white space. 44px tap targets. */
:root{--todo-red:#C8102E;--todo-line:#EEF1F6}
/* Pipeline header chip and nav badges */
h1:has(.tover){justify-content:flex-start;gap:8px;flex-wrap:wrap;align-items:center}
h1:has(.tover) small{margin-left:auto}
h1 .tover,.rt h1 .tover{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:999px;border:0;background:var(--todo-red);color:#fff;font:700 12.5px/1 var(--font-sans);cursor:pointer;align-self:center}
.tab{position:relative}
.tab .tbadge{position:absolute;top:-4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--todo-red);color:#fff;font-size:10.5px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
.tabbar.n6 .tab{width:auto;flex:1 1 0;font-size:10px;min-height:44px;letter-spacing:-.01em}
.si b.red,.ttab b.red{background:var(--todo-red);color:#fff}
/* page title + New to-do (wide screens; phones use the round + button) */
h1:has(.tnew){display:flex;align-items:center;gap:10px}
h1 .tnew{display:none;margin-left:auto;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:12px;background:linear-gradient(135deg,#203F96,#2E5BD0);color:#fff;font:700 14px var(--font-sans);cursor:pointer;box-shadow:0 6px 16px rgba(10,20,60,.3)}
h1 .tnew svg{width:16px;height:16px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round}
.rs h1 .tnew{display:inline-flex}
.rs .tfab{display:none}
/* the card */
.tcard{position:relative;margin:12px 16px 0;background:#fff;border-radius:20px;box-shadow:var(--shadow-raised);padding:6px 16px 10px}
.rs .tcard{margin:14px 18px 0;padding:6px 20px 14px}
.ttop{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--todo-line);flex-wrap:wrap}
.tviews{display:flex;gap:18px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tviews button{min-height:44px;border:0;background:none;padding:0;color:var(--text-muted);font:600 14px/1 var(--font-sans);cursor:pointer;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.tviews button.on{color:var(--text-strong);box-shadow:inset 0 -2px 0 #203F96}
.ttools{display:flex;gap:8px;align-items:center;padding:6px 0}
.twsel{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--border);border-radius:10px;font:600 13px var(--font-sans);color:var(--text-strong)}
.twsel>svg:first-child{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.twsel select{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;color:inherit;padding:0 14px 0 0;min-height:36px;max-width:130px;cursor:pointer}
.twsel .tdn{position:absolute;right:8px;width:13px;height:13px;pointer-events:none}
.tdn{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tfbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#fff;font:600 13px var(--font-sans);color:var(--text-strong);cursor:pointer}
.tfbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tfbtn i{font-style:normal;min-width:18px;height:18px;border-radius:9px;background:#203F96;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.tsum{display:flex;gap:16px;padding:12px 0 2px;font-size:13px;color:var(--text-muted)}
.tsum b{color:var(--text-strong);margin-right:3px}
.tsum .late b{color:var(--todo-red)}
/* groups and one-line rows */
.tlist{padding:4px 0 6px}
.tgrp{margin-top:14px}
.tgh{padding:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--todo-line)}
.tgh i{font-style:normal;color:var(--text-subtle);margin-left:4px;font-weight:700}
.tgh.late{color:var(--todo-red)}
.trow{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--todo-line)}
.trow:last-child{border-bottom:0}
.tchk{flex:none;width:44px;height:44px;margin-left:-12px;border:0;background:none;display:grid;place-items:center;cursor:pointer;padding:0}
.tchk svg{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.6px #B7C0CF;padding:2px;fill:none;stroke:transparent;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.tchk:hover svg{box-shadow:inset 0 0 0 1.6px #203F96}
.tchk.on svg{background:#1F8A4C;box-shadow:none;stroke:#fff}
.tmain{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;font-family:inherit;color:inherit;text-decoration:none;cursor:pointer;padding:0}
.tt{flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:600;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow.done .tt{color:var(--text-subtle);text-decoration:line-through}
.tcw{flex:none;max-width:32%;display:flex}
.tchip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tchip .tci{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.tchip.t-sales{background:#E6F6FA;color:#0B6A80}
.tchip.t-del{background:#EEEBFB;color:#4A3AB0;letter-spacing:.02em}
.tchip.t-gen{background:#F1F3F7;color:#5B6478}
.twho{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-strong)}
.avatar.xs{width:22px;height:22px;font-size:9px}
.tdue{flex:none;font-size:13px;color:var(--text-muted);white-space:nowrap}
.tdue.late{color:var(--todo-red);font-weight:700}
.turg{flex:none;height:20px;padding:0 7px;border-radius:5px;background:#FDECEA;color:#B42318;font-size:11px;font-weight:700;display:inline-flex;align-items:center}
@media (max-width:600px){.twn{display:none}.tcw{max-width:28%}.tt{font-size:14px}.tviews{gap:14px}.tviews button{font-size:13.5px}}
@media (min-width:900px){
  .tcard .tmain{display:grid;grid-template-columns:minmax(0,1fr) 170px 110px 140px 64px;gap:16px}
  .tcard .tcw{max-width:100%}
  .tcard .turg{justify-self:end}
}
.tempty{padding:28px 10px;text-align:center;color:var(--text-subtle);font-size:13.5px}
.tempty.sm{padding:4px 0 8px;text-align:left;font-size:13px}
.tnote{margin:12px 16px 96px;font-size:12px;color:var(--text-subtle);text-align:center}
.rs .tnote{margin:14px 18px 24px}
.tdset{margin-top:18px}
.tfab{position:fixed;right:max(18px,calc(50% - 197px));bottom:calc(88px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;border:0;display:grid;place-items:center;background:linear-gradient(135deg,#203F96,#2E5BD0);box-shadow:0 10px 22px rgba(32,63,150,.32);cursor:pointer;z-index:15}
.tfab svg{width:24px;height:24px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round}
/* dialog */
.sheet.tsheet .types.tlabels{grid-template-columns:repeat(3,1fr)}
.sheet.tsheet .types.tpris{grid-template-columns:repeat(5,1fr)}
.sheet.tsheet .types.tfopts{display:flex;flex-wrap:wrap;gap:8px}
.sheet.tsheet .types span{height:44px;flex-direction:row;padding:0 12px}
.sheet.tsheet .types.tpris span{padding:0 4px;font-size:12.5px}
.sheet.log select.in{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--border);padding:0 12px;font:600 15px var(--font-sans);color:var(--text-strong);background:#fff}
.tdue2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px}
.tdue2 input.in{width:100%;min-width:0;max-width:100%;min-height:48px;box-sizing:border-box}
.thint{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--text-muted)}
.thint svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.thint.tnoc{color:#4A3AB0}
.tlinked{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--text-muted)}
.tmorebtn{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;margin-top:14px;padding:0;border:0;border-top:1px solid var(--todo-line);border-bottom:1px solid var(--todo-line);background:none;font:700 14px var(--font-sans);color:#203F96;cursor:pointer;text-align:left}
.tmorebtn span{font-weight:500;color:var(--text-subtle);font-size:13px}
.tmorebtn .tdn{margin-left:auto;width:15px;height:15px;color:var(--text-subtle);transition:transform .15s}
.tmorebtn[aria-expanded="true"] .tdn{transform:rotate(180deg)}
.tmorebox{padding-bottom:4px}
.tinfo{margin-top:12px;font-size:12.5px;color:var(--text-muted)}
.tset2{font-size:14px;color:var(--text-muted)}
.sheet.tsheet .foot{display:flex;gap:10px}
.sheet.tsheet .foot .btn2.ghost{flex:0 0 38%}
/* deal card box */
.tdbox h3.hx{display:flex;align-items:center}
.tdbox h3 .add{margin-left:auto;min-height:32px}
.tdbox .trow{min-height:44px}
.tdbox .tdue{font-size:12.5px}
.tsee{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:700 13px var(--font-sans);color:#203F96;cursor:pointer}
@media (max-width:600px){
  .tcard[data-tv="mine"] .twho{display:none}
  .tcard .tt{min-width:34%}
  .tcard .tcw{flex:0 1 auto;min-width:0}
  .tcard .tmain{gap:8px}
  .tcard .tdue{font-size:12.5px}
  .turg{padding:0 5px;font-size:10.5px}
}
.tcx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){.tcard .tcw{max-width:30%}.tcard .tchip{min-width:0}.tcard .tchip.t-gen{max-width:64px}}
/* phones: the title gets the full line; chip, person and due sit on a small second line */
@media (max-width:600px){
  .tcard .tmain{flex-wrap:wrap;row-gap:3px;column-gap:8px;padding:9px 0}
  .tcard .tt{flex:1 0 100%;min-width:0}
  .tcard .tcw{max-width:44%}
  .tcard .tchip,.tcard .tchip.t-gen{max-width:100%;height:20px;font-size:11px}
  .tcard .twho{font-size:12px}
  .tcard[data-tv="mine"] .twho{display:none}
  .tcard .twn{display:inline}
  .tcard .avatar.xs{width:18px;height:18px;font-size:8px}
  .tcard .tchk{align-self:flex-start;margin-top:4px}
  .tcard[data-tv="all"] .tviews{flex-basis:100%}
  .tcard[data-tv="all"] .ttools{flex:1;padding-top:0}
  .tcard[data-tv="all"] .twsel{flex:1}
  .tcard[data-tv="all"] .twsel select{max-width:none;width:100%}
}