/* Skills Mode — additions only. Everything else reuses the Tracker design
   system in styles.css (controls, tablewrap, task-card, mini-pill, detail-*). */
.mode-switch{display:flex;gap:6px;align-items:center;margin-bottom:14px}
.mode-switch button{padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);font:inherit;letter-spacing:.06em;cursor:pointer}
.mode-switch button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.sk-check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
#skTable{min-width:1180px}
#skRows tr{cursor:pointer}
#skRows tr:hover{background:#f7fafd}
#skRows tr:focus{outline:2px solid #7aa7cc;outline-offset:-2px}
.life-approved{background:#e7f6ed;color:#17603a}
.life-candidate{background:#fff4db;color:#855d00}
.life-draft{background:#eef2f7;color:#51606f}
.life-retired{background:#fdecec;color:#9b1c1c}
.valid-validated{background:#e7f6ed;color:#17603a}
.valid-partial{background:#e8f0ff;color:#1f4e78}
.valid-untested{background:#eef2f7;color:#51606f}
.sk-plat{display:inline-block;padding:2px 7px;margin:0 3px 3px 0;border-radius:999px;font-size:11px;border:1px solid var(--line)}
.sk-plat-ok{background:#e7f6ed;color:#17603a;border-color:#bfe5cf}
.sk-plat-warn{background:#fff4db;color:#855d00;border-color:#f0dcae}
.sk-plat-off{background:#eef2f7;color:#8a97a6}
.sk-group{margin-bottom:18px}
.sk-group-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#edf3f8;font:inherit;font-weight:600;color:var(--text);cursor:pointer;text-align:left}
.sk-caret{color:var(--muted)}
.sk-group-head .kanban-count{margin-left:auto}
.sk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px;padding:14px 2px 2px}
.sk-card{margin-bottom:0;cursor:pointer}
.sk-card:focus{outline:2px solid #7aa7cc;outline-offset:2px}
.sk-cover{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;margin-bottom:10px;border-radius:10px;background:repeating-linear-gradient(135deg,#eef2f7,#eef2f7 8px,#e6ecf3 8px,#e6ecf3 16px)}
.sk-cover-has{background:repeating-linear-gradient(135deg,#e8f0ff,#e8f0ff 8px,#dbe7fb 8px,#dbe7fb 16px)}
.sk-cover-img{overflow:hidden;background:#eef2f7;border:1px solid var(--line)}
.sk-cover-img img{display:block;width:100%;height:100%;object-fit:cover}
.sk-detail-thumb img{display:block;width:100%;max-height:320px;object-fit:contain;border-radius:10px;background:#eef2f7}
.sk-cover-mark{font-size:12px;color:var(--muted)}
.sk-cover-has .sk-cover-mark{color:var(--blue);font-weight:600}
.sk-value{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.sk-plat-row{margin-bottom:8px}
.sk-plat-row:last-child{margin-bottom:0}
#skSourceNote{margin-top:12px;line-height:1.5}
@media(max-width:900px){.mode-switch button{flex:1}.sk-cards{grid-template-columns:1fr}}

/* Taxonomy additions preserve the existing Tracker visual system. */
.sk-family-head{margin:16px 2px 0;font-size:15px;color:var(--text)}
.sk-description{font-size:13px;line-height:1.55;margin:10px 0;color:var(--text)}
#skDomain,#skFamily{min-height:44px;max-width:100%;border-color:#7c847e}
#skDomain:focus-visible,#skFamily:focus-visible,.sk-card:focus-visible{outline:2px solid #245bdb;outline-offset:2px}

/* Native tool covers use the original package icons, not fabricated screenshots. */
.sk-tool-cover{flex-direction:column;gap:16px;background:#edf3f8}
.sk-tool-cover img{width:64px;height:64px;object-fit:contain}
.sk-tool-cover span{font-size:13px;font-weight:600;color:var(--blue)}
.sk-tool-detail-thumb img{height:96px;width:96px;margin:auto;object-fit:contain}
.sk-description,.sk-value{white-space:pre-line}
.sk-card,.sk-card h3,.sk-card .card-footer{min-width:0;overflow-wrap:anywhere}
.sk-card .card-footer{flex-wrap:wrap}
#skPyrevitBtn{min-height:44px;border-color:#7c847e;color:var(--blue);font-weight:600}
#skPyrevitBtn:focus-visible{outline:2px solid #245bdb;outline-offset:2px}
#skDetailBackdrop .launch-link{white-space:normal;overflow-wrap:anywhere;min-height:44px;display:inline-flex;align-items:center;margin:3px}
#skDetailBackdrop .detail-top h2{overflow-wrap:anywhere}
#skDetailClose{min-width:44px;min-height:44px;align-self:flex-start}
@media(max-width:600px){#skillsMode .controls>*{max-width:100%}#skDetailBackdrop{padding:12px}#skDetailBackdrop .detail-modal{width:100%;padding:16px}}