/* Stars Viewer styles. Colors are tokens on :root; light theme follows the OS setting. */
:root{--bg:#0d1117;--panel:#161b22;--border:#30363d;--text:#e6edf3;--muted:#8b949e;--accent:#58a6ff;--star:#e3b341;--chip:#1f2937}
@media (prefers-color-scheme: light){:root{--bg:#f6f8fa;--panel:#fff;--border:#d0d7de;--text:#1f2328;--muted:#656d76;--accent:#0969da;--star:#9a6700;--chip:#eef2f6}}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* never let a display rule override the hidden attribute */
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}
a{color:var(--accent)}
code{font-size:12px;background:var(--chip);padding:1px 4px;border-radius:4px}
.muted{color:var(--muted)}.small{font-size:12px}

/* ---- header & toolbar ---- */
header{position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--border);padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
header h1{font-size:16px;margin:0 12px 0 0}
input,select,button{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px}
button{cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.6;cursor:wait}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
#q{flex:1;min-width:200px}
.bar{padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:13px}
.banner{margin:16px;padding:12px 16px;border:1px solid var(--star);border-radius:8px;background:var(--panel)}

/* ---- token panel (collapsible) ---- */
#tokenPanel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 16px;margin:0 16px 12px}
#tokenPanel.show{border-color:var(--star);padding-bottom:12px}
.tp-head{cursor:pointer;display:flex;flex-wrap:wrap;gap:8px;align-items:center;user-select:none}
.tp-hint{margin-left:auto;font-size:12px}
.tp-arrow{display:inline-block;transition:transform .15s}#tokenPanel.show .tp-arrow{transform:rotate(90deg)}
.tp-body{display:none;margin-top:8px}#tokenPanel.show .tp-body{display:block}
.tp-note{border-left:3px solid var(--star);background:var(--chip);padding:8px 12px;border-radius:4px;font-size:13px;margin:8px 0}
.tp-row{display:flex;flex-wrap:wrap;gap:8px}.tp-row input{flex:1;min-width:220px}

/* ---- main list ---- */
main{display:grid;grid-template-columns:260px 1fr;gap:16px;padding:0 16px 32px}
/* sidebar hidden: the cards take the full width (one more column on wide screens) */
main.nofacets{grid-template-columns:1fr}main.nofacets aside{display:none}
@media (max-width:800px){main{grid-template-columns:1fr}aside{position:static!important;max-height:none!important}}
aside{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px;align-self:start;position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto}
aside h3,#insights h3{font-size:12px;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.facet{display:flex;justify-content:space-between;gap:8px;cursor:pointer;padding:2px 6px;border-radius:4px}
.facet span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facet:hover,.facet.on{background:var(--chip)}.facet.on{color:var(--accent);font-weight:600}
[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#count{margin-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.active-filters{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.filter-pill{border:1px solid var(--accent);padding:1px 8px;font-size:11px}
.clear-filters{padding:1px 8px;font-size:11px;color:var(--muted)}
.export-actions{margin-left:auto;display:inline-flex;gap:6px}
#list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
@media (max-width:420px){#list,.sugg{grid-template-columns:1fr!important}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card>a{text-decoration:none;font-weight:600;word-break:break-all}
.owner{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.owner img{width:18px;height:18px;border-radius:50%}
.desc{margin:0;overflow-wrap:anywhere}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.meta a{font-weight:400;text-decoration:none}
.lastcommit{color:var(--text);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{background:var(--chip);color:var(--accent);border-radius:10px;padding:1px 8px;font-size:11px;cursor:pointer}
.snip{font-size:12px;color:var(--muted);border-left:2px solid var(--star);padding-left:8px;overflow-wrap:anywhere}
mark{background:var(--star);color:#000;border-radius:2px}
#more{margin:16px auto;display:block}
/* activity mini-charts (commits / stars per 2 weeks, 12 months) */
.activity{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 8px;padding:6px 8px;border-radius:6px;background:var(--chip)}
.act-label{font-size:11px;color:var(--muted);width:52px}
.act-val{font-size:12px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.act-val small{font-weight:400;color:var(--muted)}
.spark{width:100%;height:24px;display:block}
.spark rect.c{fill:var(--accent)}.spark rect.s{fill:var(--star)}
.spark rect.zero{fill:var(--muted);opacity:.45}
.spark rect.nodata{fill:var(--muted);opacity:.18}
.spark rect:hover{opacity:.7}
.spark .s-area{fill:var(--star);opacity:.25}
.spark .s-line{fill:none;stroke:var(--star);stroke-width:2;stroke-linejoin:round}
.spark rect.hit{fill:transparent}.spark rect.hit:hover{fill:var(--text);opacity:.08}
.langs{display:flex;flex-direction:column;gap:4px}
.langbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--chip)}
.langbar i{display:block;height:100%;min-width:1px}
.langlist{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px}
.langlist b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:baseline}
.repo-viewers{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.repo-viewers a{border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--muted);font-size:10px;line-height:1.4;text-decoration:none;white-space:nowrap}
.repo-viewers a:hover,.repo-viewers a:focus-visible{border-color:var(--accent);color:var(--accent)}
.similar{align-self:flex-start;margin-top:auto;padding:2px 10px;font-size:12px;color:var(--accent);background:transparent}

/* ---- discover panel ---- */
#insights{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin:0 16px 16px;display:none}
#insights.show{display:block}
.tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.tabs button.on{border-color:var(--accent);color:var(--accent);font-weight:600}
.tabs form{display:flex;gap:6px;margin-left:auto}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:12px}
.theme{border:1px solid var(--border);border-radius:6px;padding:8px;cursor:pointer}
.theme:hover,.theme.on{border-color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:24px}.row>div{flex:1;min-width:220px}
.barline{display:flex;align-items:center;gap:6px;font-size:12px}
.barline span:first-child{width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barline i{display:block;height:8px;background:var(--accent);border-radius:4px}
.pattern-link{border:0;background:none;color:var(--accent);padding:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.sugg{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px}
.sugg li.card{min-width:0}
.sugg li.card>a{color:var(--accent)}
.suggestion-actions{display:flex;gap:6px;margin-top:auto}
.suggestion-actions .starbtn{color:var(--star);border-color:var(--star)}
.suggestion-actions .x{margin-left:auto}
.discovery-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.discovery-controls label{display:flex;align-items:center;gap:6px;margin-left:auto}
.discovery-note:empty{display:none}
.reasons{margin-top:4px}
.sugg .x{padding:0 6px;font-size:12px;opacity:.6}.sugg .x:hover{opacity:1}
.starbtn{padding:0 8px;font-size:12px}.starbtn.on{color:var(--star);border-color:var(--star)}
.why{background:var(--chip);border-radius:10px;padding:1px 8px;font-size:11px;color:var(--star)}
details summary{cursor:pointer;color:var(--accent);margin:8px 0}