/* Controls */
.controls{padding:14px 34px 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.controls .lbl{font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.04em}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);font-family:inherit;transition:.15s}
.chip:hover{border-color:var(--blue)}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.reset{margin-left:auto;border-style:dashed;color:var(--gray)}
.chip .cnt{display:inline-block;min-width:16px;padding:0 5px;margin-left:2px;border-radius:9px;background:var(--lgray);color:var(--gray);font-size:11px;font-weight:800}
.chip.active .cnt{background:rgba(255,255,255,.28);color:#fff}
.minilegend{font-size:11.5px;color:var(--gray);display:inline-flex;align-items:center;gap:5px;margin-left:8px}
.minilegend .sw{margin-left:6px}

.hint{padding:8px 34px 0;font-size:12.5px;color:var(--gray)}
.hint b{color:var(--blue)}

/* Matrix */
.wrap{padding:14px 34px 30px;overflow-x:auto}
table.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:1020px}
table.matrix th.phase{position:sticky;top:0;z-index:2;font-size:13px;font-weight:800;color:#fff;padding:10px 12px;text-align:left}
th.ph-now{background:var(--now)} th.ph-next{background:var(--next)} th.ph-prog{background:var(--prog)}
th.ph-now .sub,th.ph-next .sub,th.ph-prog .sub{display:block;font-weight:600;font-size:11px;opacity:.9}
.phase .cnt{display:inline-block;background:rgba(255,255,255,.25);border-radius:9px;padding:0 7px;font-size:12px;font-weight:800;margin-left:4px}
th.corner{background:var(--lgray);width:172px}
td.theme{vertical-align:top;font-weight:800;font-size:13px;color:var(--navy);background:var(--lgray);padding:12px 12px;border-bottom:6px solid #fff;width:172px}
td.theme .ico{display:block;font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.03em;margin-top:3px}
td.cell{vertical-align:top;padding:8px;border-bottom:6px solid #fff;border-left:6px solid #fff;background:#FAFCFD;min-width:270px;width:33%}

/* Work item cards */
.wi{position:relative;background:#fff;border:1px solid var(--line);border-left:4px solid var(--sevM);border-radius:8px;padding:9px 22px 9px 11px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:.15s}
/* live status dot (top-right of card) */
.stdot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;background:var(--st-backlog)}
.wi>.stdot{position:absolute;top:10px;right:9px}
.stdot.backlog{background:var(--st-backlog)} .stdot.unstarted{background:var(--st-planned)}
.stdot.started{background:var(--st-inflight);box-shadow:0 0 0 3px rgba(10,122,94,.18)} .stdot.completed{background:var(--st-done)}
.empty{font-size:11.5px;color:#b9bcc2;font-style:italic;text-align:center;padding:10px 4px}
.wi:last-child{margin-bottom:0}
.wi:hover{box-shadow:0 3px 10px rgba(0,0,0,.12);transform:translateY(-1px)}
.wi.sevC{border-left-color:var(--sevC)} .wi.sevH{border-left-color:var(--sevH)}
.wi.sevM{border-left-color:var(--sevM)} .wi.sevL{border-left-color:var(--sevL)}
.wi.livewith{background:repeating-linear-gradient(45deg,#fff,#fff 9px,#f6f7f8 9px,#f6f7f8 18px);border-left-color:var(--gray)}
.wi .ttl{font-weight:700;font-size:13.5px;margin-bottom:5px;display:block}
.wi .tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.tag{font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 6px;line-height:1.5}
.tag.sev{color:#fff}
.sevC .tag.sev,.t-sevC{background:var(--sevC)} .sevH .tag.sev,.t-sevH{background:var(--sevH)}
.sevM .tag.sev,.t-sevM{background:var(--sevM)} .sevL .tag.sev,.t-sevL{background:var(--sevL)}
.tag.loe{background:#EEF5F8;color:var(--navy)}
.tag.area{background:#f3f0fb;color:#5b4a9e}
.tag.disp{background:#fff;border:1px solid var(--line);color:var(--gray)}
.tag.disp.fix{color:#1a7f37;border-color:#bfe3c6}
.tag.disp.live{color:var(--gray)}
.wi .ids{font-size:11px;color:var(--gray);margin-top:5px;font-family:'Source Code Pro',monospace}
.wi .note{font-size:11.5px;color:#4a4d57;margin-top:5px;display:none}
.wi.open .note{display:block}
.deplink{font-size:11px;font-weight:700;margin-top:6px;display:none}
.wi.open .deplink{display:block}
.deplink .needs{color:var(--ruby)} .deplink .feeds{color:var(--blue)}

/* live Linear chip on a card */
.wi .linrow{margin-top:5px}
.linchip{font-size:10px;font-weight:700;border-radius:4px;padding:1px 6px;font-family:monospace}
.linchip.backlog{background:#eef0f2;color:#5a5d66}
.linchip.unstarted{background:#e3f0fb;color:#0b5cad;font-weight:800}
.linchip.started{background:#e4f7f2;color:#0a7a5e}
.linchip.completed{background:#d9f2e0;color:#1a7f37}
.linchip.stale{background:#f0f0f0;color:#9a9da1}

/* dependency highlight states */
table.matrix.tracing .wi{opacity:.28}
.wi.sel{opacity:1 !important;outline:3px solid var(--navy);outline-offset:1px}
.wi.dep-need{opacity:1 !important;outline:2px dashed var(--ruby);outline-offset:1px}
.wi.dep-feed{opacity:1 !important;outline:2px dashed var(--blue);outline-offset:1px}
.filtered{display:none !important}

/* Atomic gate */
.gate{margin:6px 34px 26px;border:2px solid var(--ruby);border-radius:12px;overflow:hidden}
.gate h2{margin:0;background:var(--ruby);color:#fff;font-size:15px;font-weight:800;padding:11px 16px}
.gate .body{padding:14px 16px;background:#fff7f9}
.gate .lead{font-size:13px;margin:0 0 12px;color:var(--ink)}
.gate .lead b{color:var(--ruby)}
.gate .grid{display:flex;gap:10px;flex-wrap:wrap}
.gate .gi{background:#fff;border:1px solid #f0c5d2;border-radius:8px;padding:9px 11px;flex:1;min-width:200px}
.gate .gi .ttl{font-weight:700;font-size:13px}
.gate .gi .ids{font-size:11px;color:var(--gray);font-family:monospace;margin:3px 0}
.gate .gi .note{font-size:11.5px;color:#4a4d57}

/* legend */
.legend{display:flex;gap:18px;flex-wrap:wrap;padding:0 34px 18px;font-size:12px;color:var(--gray)}
.legend .grp{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.legend b{color:var(--ink)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle}