/* Board, Handoff, Rollup, Detail and Overview. */
/* board / handoff */
.board{display:flex;gap:12px;align-items:flex-start;padding:10px 14px 30px;min-width:min-content}
.bcol{flex:0 0 252px;min-width:0;background:var(--side);border:1px solid var(--line-soft);border-radius:var(--r3);padding:8px;display:flex;flex-direction:column;gap:8px}
.bh{display:flex;align-items:center;gap:8px;padding:2px 4px;font-size:11px;font-weight:600;letter-spacing:var(--caps);text-transform:uppercase;color:var(--muted)}
.bh .cnt{margin-left:auto;color:var(--faint);letter-spacing:0;font-variant-numeric:tabular-nums}
.bcards{display:flex;flex-direction:column;gap:6px;min-height:36px}
.bempty{padding:14px 8px;text-align:center;color:var(--faint);font-size:12px;border:1px dashed var(--line-soft);border-radius:var(--r2)}
.bcol.dropok{outline:1px dashed var(--accent);outline-offset:-1px;background:var(--accent-soft)}
.card{background:var(--stage);border:1px solid var(--line-soft);border-left:3px solid var(--pc,var(--line));border-radius:var(--r2);padding:7px 9px 8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.card:hover{background:var(--raised);border-color:var(--line);border-left-color:var(--pc,var(--line))}
.card.cur{background:var(--raised);border-color:var(--line);border-left-color:var(--pc,var(--line))}
.sbody:focus-within .card.cur{border-color:var(--accent);border-left-color:var(--pc,var(--accent))}
.card.p-critical{--pc:var(--crit)} .card.p-high{--pc:var(--high)} .card.p-medium,.card.p-low{--pc:var(--line)}
.card[draggable="true"]{cursor:grab}
.ctop{display:flex;align-items:flex-start;gap:6px;min-width:0}
.ctop .chk{margin:-2px 0 -2px -4px}
.ctop .lbl{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3;font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--faint);font-size:11px}
.cmeta .over{color:var(--danger)} .cmeta .today{color:var(--warn)}
.card.done{opacity:.7}
/* rollup */
.roll{padding:8px 14px 40px;display:flex;flex-direction:column;gap:8px}
.rrow{display:grid;grid-template-columns:minmax(140px,210px) minmax(160px,1fr) 96px 104px 74px;gap:16px;align-items:center;padding:11px 14px;border:1px solid var(--line-soft);border-radius:var(--r3);background:var(--side)}
.rrow.go{cursor:pointer}
.rrow.go:hover{background:var(--hover);border-color:var(--line)}
.rrow:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rname b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rname span{color:var(--faint);font-size:12px}
.rtrack{height:10px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.rbar{display:flex;gap:1px;height:10px;border-radius:999px;overflow:hidden;min-width:0}
.rbar i{display:block;min-width:3px}
.rbar.lowcov{opacity:.5;outline:1px dashed var(--faint);outline-offset:2px}
.seg-done{background:var(--ok)}
.seg-active{background:repeating-linear-gradient(135deg,var(--med) 0 3px,color-mix(in srgb,var(--med) 40%,transparent) 3px 6px)}
.seg-blocked{background:repeating-linear-gradient(45deg,var(--danger) 0 2px,color-mix(in srgb,var(--danger) 35%,transparent) 2px 5px)}
.seg-open{background:var(--line)}
.rlabels{display:flex;gap:12px;flex-wrap:wrap;color:var(--faint);font-size:11px;margin-top:6px}
.rlabels span{display:inline-flex;align-items:center;gap:5px}
.rlabels i{width:8px;height:8px;border-radius:2px;display:inline-block}
.rcell{font-size:12px;color:var(--muted)}
.rcell b{display:block;color:var(--text);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.rcell.blk b{color:var(--danger)}
.rcell b.zero{color:var(--faint);font-weight:500}
.rcell[data-go-board]{cursor:pointer;border-radius:var(--r2)}
.rcell[data-go-board]:hover{background:var(--hover)}
@container stage (max-width:820px){.rrow{grid-template-columns:repeat(3,1fr);row-gap:10px}.rrow > div:nth-child(1),.rrow > div:nth-child(2){grid-column:1/-1}}

/* detail */
.detail{max-width:860px;margin:0 auto;padding:22px 28px 80px}
.d-title{width:calc(100% + 16px);font-size:22px;font-weight:650;letter-spacing:-.01em;line-height:1.25;background:transparent;border:1px solid transparent;border-radius:var(--r2);padding:4px 8px;margin:0 -8px;resize:none;overflow:hidden;outline:0;display:block}
.d-title:hover{background:var(--hover)} .d-title:focus{border-color:var(--accent);background:var(--stage)}
.d-sub{color:var(--faint);padding:0 0 10px;font-size:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r3);background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);margin:8px 0}
.props{display:grid;grid-template-columns:120px minmax(0,1fr);row-gap:2px;margin:6px 0 4px}
.props > label,.props > .pl{display:flex;align-items:center;min-height:30px;color:var(--faint);font-size:12px}
.pin{width:100%;min-height:30px;background:transparent;border:1px solid transparent;border-radius:var(--r2);padding:4px 8px;margin-left:-8px;outline:0}
.pin:hover{background:var(--hover)} .pin:focus{border-color:var(--accent);background:var(--stage)}
select.pin{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23908d84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
textarea.pin{resize:none;overflow:hidden;min-height:60px;line-height:1.5;width:calc(100% + 16px);margin:0 -8px}
.props .pbtn{margin-left:-8px;height:30px;padding:0 8px;border-radius:var(--r2);display:inline-flex;align-items:center;gap:6px;justify-self:start}
.props .pbtn:hover{background:var(--hover)}
.props .pbtn.none{color:var(--faint)}
.props .pbtn .pill{pointer-events:none;padding:0}
.props .pbtn .pill.p-medium{color:var(--text)}
.pin::placeholder{color:var(--faint)}
.d-h{display:flex;align-items:center;gap:8px;margin:22px 0 4px;font-size:11px;font-weight:600;letter-spacing:var(--caps);text-transform:uppercase;color:var(--muted)}
.d-h .sp{flex:1} .d-h .count{color:var(--faint);letter-spacing:0;font-weight:500;text-transform:none}
.dphase{margin:12px 0 2px;display:flex;align-items:center;gap:8px;color:var(--faint);font-size:11px;font-weight:600;letter-spacing:var(--caps);text-transform:uppercase}
.dstep{display:flex;align-items:center;gap:8px;min-height:32px;border-radius:var(--r2);padding:0 4px}
.dstep:hover{background:var(--hover)}
.dstep .pin{flex:1;margin-left:0;min-height:26px}
.dstep.done .pin{color:var(--faint)}
.dstep.done input[data-f="label"]{text-decoration:line-through;text-decoration-color:var(--line)}
.dstep select.pin{flex:none;width:86px;font-size:12px;color:var(--muted)}
.dstep input.est{flex:none;width:56px;text-align:right;font-size:12px;color:var(--muted)}
.dstep .del{opacity:0;color:var(--faint)} .dstep:hover .del,.dstep:focus-within .del{opacity:1}
.dadd{display:flex;gap:8px;align-items:center;margin-top:8px;color:var(--faint)}
.dadd input{flex:1;background:transparent;border:1px dashed var(--line);border-radius:var(--r2);padding:5px 10px;outline:0;color:var(--text);min-height:30px}
.dadd input:focus{border-color:var(--accent);border-style:solid}
.dadd input.ph{flex:none;width:150px}
/* overview */
.ov{max-width:900px;margin:0 auto;padding:22px 28px 80px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0 6px}
.stat{background:var(--side);border:1px solid var(--line-soft);border-radius:var(--r3);padding:10px 14px}
.stat b{display:block;font-size:22px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat span{color:var(--faint);font-size:12px}
.stat.warn b{color:var(--danger)}
.ov .trow{border:0;border-radius:var(--r2);height:32px;cursor:pointer}