/* tasks: rail, board, cards & rows, add boxes, task panel, reminders, calendar icons, repeat, sharing */
/* ---------- TASKS ---------- */
.tasks{display:grid;grid-template-columns:232px minmax(0,1fr);gap:20px;height:100%;padding-block:16px}
.rail{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;padding-right:4px}
.rail-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--fg);text-align:left;width:100%}
.rail-item:hover{background:var(--raised)}
.rail-item[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
.rail-item .ri{width:18px;display:grid;place-items:center;color:var(--muted);flex:none}
.rail-item[aria-current="true"] .ri{color:var(--accent)}
.rail-item .ri svg{width:16px;height:16px}
.rail-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-item .ct{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.rail-item .ct.hot{color:var(--danger)}
.swatch{width:10px;height:10px;border-radius:3px;background:var(--c)}
.rail-h{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px;padding:0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700}
.rail-h button{color:var(--muted);font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;padding:2px 6px;border-radius:6px}
.rail-h button:hover{color:var(--fg);background:var(--raised)}
.group-h{padding:8px 10px 2px;font-size:12px;color:var(--muted);font-weight:600}
.work{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.bar{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.qa{flex:1 1 360px;min-width:0}
.qa-box{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 12px}
.qa-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.qa-box svg{width:16px;height:16px;color:var(--muted);flex:none}
.qa-box input{flex:1;min-width:0;background:none;border:0;padding:11px 0;outline:none}
.qa-hint{font-size:12px;color:var(--faint);padding:5px 2px 0;display:flex;gap:6px;flex-wrap:wrap;min-height:22px}
.qa-hint code{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--raised);padding:1px 5px;border-radius:4px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:1px 8px;border-radius:99px;background:var(--raised);color:var(--fg);border:1px solid var(--line)}
.search{flex:0 1 240px;min-width:160px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 12px}
.search svg{width:15px;height:15px;color:var(--muted);flex:none}
.search input{flex:1;min-width:0;background:none;border:0;padding:11px 0;outline:none}
.board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.col{display:flex;flex-direction:column;min-height:0;background:var(--sunk);border:1px solid var(--line);border-radius:12px}
.col-h{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;min-height:52px}
.col-h h2{margin:0;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.005em}
.col-h .n{font-family:var(--mono);font-size:12px;color:var(--muted)}
.col-h .st{width:8px;height:8px;border-radius:50%}
.col-h .tog{margin-left:auto;font-size:12px;color:var(--muted);padding:2px 6px;border-radius:6px}
.col-h .tog:hover{color:var(--fg);background:var(--raised)}
.list{flex:1;overflow-y:auto;padding:4px 10px 12px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.empty{color:var(--faint);font-size:13px;text-align:center;padding:22px 10px;border:1px dashed var(--line);border-radius:10px}
.card{position:relative;display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px 10px 14px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.card::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.card:hover{border-color:var(--line-strong)}
.card.dragging{opacity:.3}
.card.done .ctitle{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.drag-ghost{position:fixed;z-index:50;pointer-events:none;box-shadow:var(--shadow);transform-origin:top left;rotate:1.5deg;opacity:.96}
.chk{flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;border:1.6px solid var(--pc,var(--faint));display:grid;place-items:center}
.chk svg{width:12px;height:12px;opacity:0}
.chk.on{background:var(--pc,var(--accent));border-color:transparent;color:var(--bg)}
.chk.on svg{opacity:1}
.chk:hover{background:color-mix(in srgb,var(--pc,var(--accent)) 18%,transparent)}
.chk.on:hover{background:var(--pc,var(--accent))}
.cbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ctitle{font-weight:500;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:var(--muted)}
.meta:empty{display:none}
.meta .m{display:inline-flex;align-items:center;gap:4px}
.meta svg{width:12px;height:12px}
.meta .late{color:var(--danger)}
.meta .tag{color:var(--accent)}
.meta .cat{color:var(--muted)}
.flag{flex:none;margin-top:2px}
.flag svg{width:14px;height:14px}
.title-inp{font-family:var(--display);font-size:20px;font-weight:600;background:none;border:0;border-bottom:1px solid transparent;padding:4px 0;width:100%;outline:none}
.title-inp:focus{border-bottom-color:var(--accent)}
.subs{display:flex;flex-direction:column;gap:4px}
.sub{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:7px}
.sub:hover{background:var(--raised)}
.sub input[type="text"]{flex:1;background:none;border:0;outline:none;min-width:0}
.sub.done input[type="text"]{color:var(--muted);text-decoration:line-through}
.sub .x{color:var(--faint);width:24px;height:24px;border-radius:6px;display:grid;place-items:center}
.sub .x:hover{color:var(--danger);background:var(--raised)}
.sub .x{width:32px;height:32px}
.sub-plus{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;color:var(--accent)}
.sub-plus svg{width:14px;height:14px}
.sub-due{position:relative;flex:none;display:inline-flex;align-items:center;gap:4px;min-width:32px;height:28px;padding:0 6px;border-radius:7px;color:var(--faint);font-size:12px;font-family:var(--mono);justify-content:center}
.sub-due.on{color:var(--muted);background:var(--sunk)}
.sub-due.late{color:var(--danger)}
.sub-due input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.sub-due svg{width:14px;height:14px}
.cat-row{display:grid;grid-template-columns:auto 1fr 110px auto;gap:8px;align-items:center}
.cat-row input[type="color"]{width:34px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--sunk)}
/* board header + views */
.bhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bhead h1{margin:0;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;min-width:0}
.bhead h1 .swatch{width:12px;height:12px}
.bhead .shared-tag{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;font-family:var(--mono)}
.bhead .shared-tag svg{width:13px;height:13px}
.bhead .views{margin-left:auto}
.views button svg{width:14px;height:14px}
.board.list{display:flex;flex-direction:column;gap:14px;overflow-y:auto;grid-template-columns:none}
.grp{display:flex;flex-direction:column;gap:8px}
.ghdr{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;text-align:left;width:100%}
.ghdr:hover{background:var(--raised)}
.ghdr .car{width:14px;height:14px;color:var(--muted);transition:transform .15s;display:grid}
.ghdr .car svg{width:14px;height:14px}
.grp.collapsed .ghdr .car{transform:rotate(-90deg)}
.ghdr h2{margin:0;font-family:var(--display);font-size:14.5px;font-weight:600}
.ghdr .n{font-family:var(--mono);font-size:12px;color:var(--muted)}
.ghdr .st{width:8px;height:8px;border-radius:50%}
.grp .gtog{margin-left:auto;font-size:12px;color:var(--muted);padding:2px 6px;border-radius:6px}
.grp .gtog:hover{color:var(--fg);background:var(--raised)}
.grp.over > .ghdr{outline:2px dashed var(--accent);outline-offset:2px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px;min-height:44px}
.cgrid .card{min-height:84px}
.cgrid .cnote{font-size:12.5px;color:var(--muted)}
.lgrid{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;min-height:40px}
.lrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;background:var(--surface);position:relative}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--raised)}
.lrow.dragging{opacity:.3}
.lrow .lt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow.done .lt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.lrow .lmeta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex:none;max-width:55%;overflow:hidden}
.lrow .lmeta .tag{color:var(--accent);white-space:nowrap}
.lrow .lmeta .late{color:var(--danger)}
.lrow .lmeta svg{width:12px;height:12px}
.lrow .lmeta .m{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.lrow .dotc{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.drag-ghost.lrow{border:1px solid var(--line-strong);border-radius:8px}
.remwarn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--warn)}
.remwarn button{color:var(--fg);text-decoration:underline;font-size:12px}
.rail-item.err{opacity:.5}
.rail-item .sh{color:var(--muted);display:grid}
.rail-item .sh svg{width:13px;height:13px}
.src-err{padding:16px;border:1px dashed var(--line-strong);border-radius:12px;color:var(--muted)}
.src-err b{color:var(--fg)}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--fg)}
.steps li::marker{color:var(--muted);font-family:var(--mono)}
.steps code{font-family:var(--mono);font-size:12px;background:var(--raised);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.form-err{color:var(--danger);font-size:13px}
/* two-level view controls */
.vctl{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.vctl .seg button{flex:0 0 auto}
/* kanban: section / list / status columns */
.board.kanban{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);overflow-x:auto;align-items:stretch}
.col-h{position:relative}
.col-h h2{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-h[data-sech]{cursor:grab}
.col-tools{margin-left:auto;display:flex;align-items:center;gap:2px}
.mini{width:26px;height:26px;border-radius:6px;color:var(--muted);display:grid;place-items:center;flex:none}
.mini:hover{background:var(--raised);color:var(--fg)}
.col.dragging{opacity:.35}
.drag-ghost-sec{background:var(--raised);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px}
.col-add{padding:0 10px 6px}
.col-add .inp{padding:7px 9px}
.sec-ren{padding:4px 8px;font-weight:600;flex:1;min-width:0}
.col-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.col-body>.list{flex:0 0 auto;overflow:visible}
.col-body{overflow-x:hidden;container-type:inline-size}
.col .list>.item,.col .cmp .list>.item{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
@container (max-width:420px){
  .rdue .dl-long{display:none}
  .rdue .dl-short{display:inline}
  .rbody{column-gap:8px}
  .rdate{gap:6px}
}
.col .cmp{border-top:1px solid var(--line);margin:2px 0 0;padding:4px 0 8px;display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:none}
.col .cmp .list.done-list{flex:none;padding:4px 10px 0;min-height:0}
.board.kanban .item.done{opacity:.72}
.board.kanban .item.done:hover{opacity:1}
.col .cmp .cmp-h{margin:0 6px;width:calc(100% - 12px);max-width:calc(100% - 12px);box-sizing:border-box}
.cmp-h{align-self:flex-start}
.cmp-more{padding:2px 10px 6px}
.cmp .cmp-more{padding:4px 10px 0}
.linkbtn{font-size:12px;color:var(--accent);padding:2px 0;background:none;border:0;cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.cmp-h h2{font-size:13px}
.dzc.over{outline:2px dashed var(--accent);outline-offset:2px}
.col.newsec{background:none;border:1px dashed var(--line-strong);justify-content:flex-start;padding:8px}
.newsec-btn{justify-content:center;width:100%}
.board.kanban.rows .list{gap:4px}
.board.kanban.rows .lrow{border:1px solid var(--line);border-radius:8px}
.card .chk.pri,.lrow .chk.pri{border-width:2px}
.meta .today{color:var(--accent)}
.meta .rem{color:var(--accent)}
.meta .prog{color:var(--warn)}
/* list layout */
.ghrow{gap:2px;flex-wrap:nowrap}
.ghrow .ghdr{flex:1;min-width:0}
.ladd{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px dashed var(--line-strong);border-radius:10px;padding:0 12px;color:var(--muted)}
.ladd:focus-within{border-style:solid;border-color:var(--accent)}
.ladd .inp{border:0;background:none;padding:10px 0;box-shadow:none!important}
/* TickTick-style row */
.lrow{align-items:flex-start}
.lrow .chk{margin-top:2px}
/* title + meta wrap as one block: the meta sits right of the title when it fits, else on a second line under it (never wider than the row) */
.lrow{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.rbody{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:10px;row-gap:3px}
.lrow .lt{flex:1 1 8em;min-width:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.35}
.rside{flex:0 1 auto;min-width:0;max-width:100%;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:1px}
.dl-short{display:none}
.rshrink{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden}
.rtags{flex:0 1 auto;min-width:0;display:flex;gap:4px;overflow:hidden}
.rchip{flex:none;font-size:11px;padding:0 6px;border-radius:99px;background:var(--accent-soft);color:var(--accent);white-space:nowrap;line-height:18px}
.rcat{flex:0 100 auto;min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap}
.rcat span{overflow:hidden;text-overflow:ellipsis}
.rcat .dotc{flex:none}
.ricons{flex:none;display:flex;align-items:center;gap:6px}
.ricons>span{display:inline-flex;align-items:center;gap:3px}
.ricons svg,.rrem svg{width:13px;height:13px}
.rprog{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.rdate{flex:none;display:flex;align-items:center;gap:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rrem{display:inline-flex;align-items:center;gap:3px;color:var(--accent)}
.rdue.late{color:var(--danger)}
.rdue.today{color:var(--accent);font-weight:600}
.lrow .remwarn{flex:none}
/* add boxes: forms with an arrow button that appears once there is text */
.go{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.go svg{width:16px;height:16px;color:currentColor}
.qa-box .go{margin-right:-4px}
form.col-add{display:flex;gap:6px;align-items:center}
form.col-add .inp{flex:1;min-width:0}
.inl-form{display:flex;gap:6px;align-items:center;flex:1;min-width:0}
.inl-form .inp{flex:1;min-width:0;padding:7px 9px}
.inl-form.ren .inp{padding:4px 8px}
.newsec-row{max-width:420px}
.newsec-end{display:flex}
.board.list .newsec-btn{width:auto}
.ladd .go{margin-right:-4px}
.work>.bhead,.work>.bar,.col>.col-h,.col>.col-add{flex-shrink:0}
.due-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,8.5rem) 36px;gap:8px;align-items:center}
.due-row .inp{min-width:0;width:100%}
.xclear{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line)}
.xclear:hover{color:var(--danger);background:var(--raised)}
.xclear:disabled{opacity:.3;cursor:default;background:none;color:var(--muted)}
.sec-quick{padding:6px 10px}
/* add-box hint chips (tappable) */
.qa-hint{align-items:center}
.tap-chip{cursor:pointer;color:var(--fg);background:var(--raised);border-color:var(--line-strong);min-height:26px;padding:2px 10px;font-size:12px;display:inline-flex;align-items:center;gap:5px}
.tap-chip:hover{border-color:var(--accent)}
.tap-chip.today,.tap-chip.rem{color:var(--accent)}
.tap-chip.late{color:var(--danger)}
.tap-chip svg{flex:none}
.qa-help{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center;margin-left:4px}
/* due button in the task panel */
.due-row{grid-template-columns:minmax(0,1fr) 36px}
.due-btn{display:flex;align-items:center;gap:8px;text-align:left;min-height:36px;cursor:pointer}
.due-btn svg{color:var(--muted);flex:none}
.due-btn.no-due{color:var(--muted)}
.due-btn .due-time{margin-left:auto;color:var(--accent)}
.due-btn .due-time.faint{color:var(--faint);font-family:var(--body)}
/* calendar sync icon: a page-a-day with today's number */
.calico{position:relative;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;padding:0;--gb:#1a73e8;--gh:#1558b0}
.calico svg{width:18px;height:18px;overflow:visible}
.calico .pg{fill:none;stroke:var(--faint);stroke-width:1.4}
.calico .hd{fill:var(--faint);opacity:.55}
.calico text{font:700 8.5px/1 var(--body);fill:var(--faint);text-anchor:middle}
.calico:not(.on){opacity:.75}
.calico.on .pg{fill:var(--gb);stroke:var(--gb)}
.calico.on .hd{fill:var(--gh);opacity:1}
.calico.on text{fill:#fff}
.calico:hover{background:var(--raised);opacity:1}
.calico .wdot{position:absolute;top:0;right:0;width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 1.5px var(--surface)}
.calico.lg{width:28px;height:28px}
.calico.lg svg{width:22px;height:22px}
.calico.qa{width:28px;height:28px;border:1px solid var(--line-strong);background:var(--raised)}
.cal-hint{font-size:11.5px;color:var(--muted);flex-basis:100%}
.lrow .rdate .calico{margin-right:-2px}
/* reminders list in the task panel */
.rem-field{gap:8px}
.rem-h{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rem-h .sp{flex:1}
.rem-h .mono{letter-spacing:0;color:var(--faint)}
.rem-row{display:grid;grid-template-columns:auto minmax(0,1fr) 7.4rem 36px;gap:8px;align-items:center}
.rem-meth{display:flex;gap:4px}
.calico.meth{width:28px;height:28px}
.calico.meth svg{width:20px;height:20px}
.calico .em{font:800 10px/1 var(--body);fill:var(--faint);text-anchor:middle}
.calico.on .em{fill:#fff}
.calico .bl{fill:none;stroke:var(--faint);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.calico.on .bl{stroke:#fff}
.calico.dis{opacity:.35;cursor:not-allowed}
.calico.dis:hover{background:none;opacity:.35}
.calico.shake{animation:lt-shake .35s}
@keyframes lt-shake{0%,100%{transform:none}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.gcount{font-size:11px;color:var(--muted);margin-left:2px}
.gcount.full{color:var(--warn)}
.rem-cal{margin-top:6px}
.rem-h .calico+.calico{margin-left:-2px}
.rem-row .inp{min-height:36px;min-width:0}
.rem-pick{display:flex;align-items:center;justify-content:space-between;gap:6px;text-align:left;cursor:pointer;width:100%}
.rem-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rem-pick svg{color:var(--muted);flex:none}
.rem-when{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.warn{color:var(--warn)}
.rem-row.off select[data-rf="mb"]{opacity:.5}
@media (max-width:480px){
  .rem-row{gap:5px;grid-template-columns:auto minmax(0,1fr) 6.3rem 32px}
  .rem-row .inp{padding-left:8px;padding-right:6px;font-size:14px}
  .rem-when{font-size:11px}
  .rem-meth{gap:3px}
  .calico.meth{width:26px;height:26px}
  .rem-row .xclear{width:32px;min-width:0}
}
@media (max-width:860px){
  .tasks{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px;padding-block:10px}
  .rail{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:6px;padding:0 0 4px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail-item{width:auto;flex:none;border:1px solid var(--line);padding:6px 10px;border-radius:99px}
  .rail-h,.group-h{display:none}
  .rail .add-cat{display:flex}
  .board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:4px}
  .col{scroll-snap-align:start}
  .search{flex:1 1 100%}
  .qa-help{display:none}
  .bhead .vctl{margin-left:0;width:100%}
  .board.list{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .board.kanban .col-body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .board.kanban .col.newsec{margin-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .board{overscroll-behavior-x:contain}
  .bhead .vctl .seg{flex:1 1 auto}
  .board.kanban{grid-auto-columns:86%}
  .lrow{padding-block:11px}
  .lrow .lmeta{max-width:45%}
}
@media (min-width:861px){
  .rail .add-cat{display:none}
}
@media (max-width:480px){
  .cat-row{grid-template-columns:auto 1fr auto}
  .cat-row .grp{display:none}
}
.card,.lrow,.cbody,.rbody,.col,.col-h,.col-body,.list,.meta,.rside,.rshrink,.chip{min-width:0}
.card{max-width:100%}
.col-h h2,.ghdr h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt,.ctitle,.cnote,.tp-title{overflow-wrap:anywhere;word-break:break-word}
/* notes preview on cards: at most 3 lines, links clickable */
.cnote{font-size:12.5px;line-height:1.4;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nlink,.nchip{color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.nlink:hover,.nchip:hover{text-decoration:underline}
.nchips{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.nchip{font-size:11px;line-height:18px;padding:0 7px;border-radius:99px;background:var(--accent-soft);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nchip.more{color:var(--muted);background:var(--raised)}
.nlinks .nchips{margin-top:4px}
.ricons .lnk svg{width:11px;height:11px;margin-left:1px}
/* list name: shown whole or not at all (never cut to one letter) */
.meta .m.cat{max-width:100%;min-width:0}
.meta .m.cat span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rshrink{flex-wrap:wrap;height:18px;overflow:hidden;align-content:flex-start}
.rcat{flex:none;max-width:10em}
.rtags{flex:none;flex-wrap:nowrap}
.tasks{padding-block:10px}
.tasks.norail{grid-template-columns:minmax(0,1fr)}
.tasks.norail .rail{display:none}
.work{gap:8px}
#bhead[hidden],.bar[hidden],.qa[hidden]{display:none!important}
/* add box: icons and parsed chips live inside it */
.qa-box{flex-wrap:wrap;column-gap:6px;row-gap:0;padding:0 6px 0 12px}
.qa-box>input,.qa-box>#qa{flex:1 1 160px;min-width:0;padding:9px 0}
.col-add.qa-box{flex-wrap:nowrap}
.col-add.qa-box>input{flex:1 1 40px}
.col-add.qa-box .qa-chips{display:none}
.col-add.qa-box:has(.qa-chips:not([hidden])){flex-wrap:wrap}
.col-add.qa-box:has(.qa-chips:not([hidden])) .qa-chips{display:flex;order:9;flex-basis:100%;max-width:100%;padding:0 0 6px}
.qa-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0;max-width:55%;padding:4px 0}
.qa-chips .chip{font-size:11.5px;padding:1px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa-chips .chip svg{width:12px;height:12px}
.qa-ic{flex:none;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
.qa-ic:hover{background:var(--raised);color:var(--fg)}
.qa-ic svg{width:16px;height:16px}
.qa-ic.help{font-weight:700;font-size:13px;width:24px}
.calico.xs{width:16px;height:16px}
.calico.xs svg{width:14px;height:14px}
@container (max-width:520px){
  .qa-chips{order:9;flex-basis:100%;max-width:100%;padding:0 0 6px}
}
.qa,.col-add,.grp{container-type:inline-size}
.col-add.qa-box{margin:0 10px 6px;padding-left:10px}
.col-add.qa-box>svg{width:14px;height:14px;color:var(--muted);flex:none}
.col-body .col-add.qa-box{margin:6px 10px}
.add-end{display:flex;align-items:center;gap:6px;margin:2px 10px 8px;padding:6px 8px;border-radius:8px;color:var(--faint);font-size:12.5px;text-align:left}
.add-end:hover{color:var(--fg);background:var(--raised)}
.add-end svg{width:13px;height:13px}
.grp>.col-add.qa-box{margin:4px 0 6px}
.menu.amenu{gap:8px;padding:4px;min-width:260px}
.menu.amenu .qrow{flex-wrap:wrap}
.switch.dim{opacity:.6}
.rep-list{display:flex;flex-direction:column}
.rep-opt{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:7px;text-align:left}
.rep-opt:hover{background:var(--raised)}
.rep-opt svg{width:15px;height:15px;color:var(--accent)}
.rep-custom{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.wdays{display:flex;gap:4px;flex-wrap:wrap}
.rem-fixed{display:flex;align-items:center;min-height:36px;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rep-need{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;color:var(--muted);font-size:13px}
.rem-row .rem-at{grid-column:2 / -1;min-height:34px}
.rem-row.abs select{grid-column:2 / 4}
.rem-row.abs .rem-when{display:none}
.rem-row.abs .xclear{grid-column:4}
.rem-fixed.muted{color:var(--faint)}
.rrep svg,.m.rrep svg{width:12px;height:12px}
.rrep{display:inline-flex;align-items:center;color:var(--muted)}
@media (max-width:860px){
  #rail-btn{display:none}
}
/* project link: task panel row + picker */
.proj-dot{width:10px;height:10px;border-radius:50%;background:var(--pc,var(--faint));flex:none;display:inline-block}
.proj-btn span:not(.due-time){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-btn .proj-ms{color:var(--muted);font-family:var(--body);max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-btn small.faint,.proj-menu small.faint{color:var(--faint);font-weight:400}
.proj-menu{max-height:min(60vh,420px);overflow-y:auto}
.proj-menu .proj-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-menu .mh.proj-mh{flex-direction:row;align-items:center;gap:6px;padding-left:0}
.proj-menu .mh.proj-mh span{display:flex;flex-direction:column;gap:2px;min-width:0}
.proj-menu .mh.proj-mh small{font-family:var(--body)}
.proj-menu .mh .icon-btn{width:32px;height:32px;padding:0}
@media (max-width:600px){.proj-menu button{padding-block:11px}}
.due-row.proj-row{grid-template-columns:minmax(0,1fr) 36px}
.proj-btn.unset{color:var(--muted)}
/* ===== phone layout like TickTick: list strip, round + and the quick-add sheet ===== */
.rail-h.first{margin-top:0}
.col.bare>.col-h{display:none}
.col.bare>.col-body{padding-top:6px}
/* room under the last row so the round + never covers it */
.board.list{padding-bottom:96px;scroll-padding-bottom:96px}
.board.kanban .col-body{padding-bottom:84px}
/* quick-add sheet */
.qa-sheet{position:fixed;inset:0;z-index:35}
.qa-sheet[hidden]{display:none}
.qa-sheet-bd{position:absolute;inset:0;background:rgba(6,8,14,.45)}
.qa-sheet-card{position:absolute;right:24px;bottom:calc(96px + env(safe-area-inset-bottom,0px));width:min(520px,calc(100vw - 48px));background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.qa-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.qa-sheet-h b{color:var(--fg);font-weight:600}
.qa-sheet-h .icon-btn{width:32px;height:32px}
.qa-sheet .qa{flex:none}
.qa-sheet .qa-box{background:var(--sunk,var(--surface))}
@media (max-width:860px){
  /* list strip: plain text pills, the open one highlighted; no icons, counts or "+ Category" (Manage lists… is in the ⋮ menu) */
  .rail-item .ri,.rail-item .ct,.rail-item .sh,.rail .add-cat{display:none}
  .rail-item{padding:6px 14px;font-weight:500}
  .rail-item[aria-current="true"]{border-color:transparent;font-weight:600}
  .board.list{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .board.kanban .col-body{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .board.kanban .col.newsec{margin-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .qa-sheet-card{left:0;right:0;bottom:var(--kb,0px);width:auto;border-radius:16px 16px 0 0;border-width:1px 0 0;padding:8px max(14px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  .qa-sheet .qa-box input{font-size:16px}   /* 16px: no zoom on focus */
}
/* search field (opened from the header's magnifier) */
.bar .search{flex:1 1 100%;max-width:520px;padding-right:4px}
.search .search-x{width:32px;height:32px;min-width:0;border:0;background:none;color:var(--muted)}
.search .search-x svg{width:15px;height:15px}
.search input::-webkit-search-cancel-button{display:none}
/* swipe between lists: the board moves sideways inside the work area, never the page */
.work{overflow-x:clip}
.board{will-change:auto}
@media (max-width:860px){ .bar .search{max-width:none} .bar .search input{font-size:16px} }

/* #10 subtasks under the row */
.subtog{display:inline-flex;align-items:center;gap:3px;padding:2px 4px;margin:-2px 0;border-radius:6px;color:inherit;min-height:24px}
.subtog:hover{background:var(--raised)}
.subtog .chev{display:inline-grid;width:12px;height:12px;transition:transform .15s}
.subtog .chev svg{width:12px;height:12px}
.subtog.open .chev{transform:rotate(90deg)}
.subx{display:flex;flex-direction:column;gap:2px;padding:4px 10px 8px 40px;background:var(--surface);border-bottom:1px solid var(--line)}
.kanban .subx{border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;margin:-6px 0 4px;padding-left:34px}
.subx-r{display:flex;align-items:center;gap:8px;min-height:34px}
.subx-r .chk{flex:none}
.subx-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.subx-r.done .subx-t{color:var(--muted);text-decoration:line-through}
.subx-add input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:13.5px}
.sub .x.up{color:var(--muted)}

/* #21 people */
.pbadge{display:inline-grid;place-items:center;flex:none;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--c);color:#0b0d12;font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1}
.vmenu .pbadge{margin-right:2px}
.ppl{display:flex;flex-direction:column;gap:6px}
.pp-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px;align-items:center}
form.pp-row{grid-template-columns:minmax(0,1fr) auto}
.pp-color{width:34px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--sunk)}
.abar{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:0 0 8px;border-radius:9px;background:var(--sunk);font-size:13px;color:var(--muted)}
.abar b{color:var(--fg);font-weight:600}
.abar button{margin-left:auto}