:root { color-scheme: dark; }
body { background-color: #0f172a; color: #f8fafc; font-family: system-ui, -apple-system, sans-serif; }

/* cards: the full-card <button> sits under the repo link, so no nested interactives */
.glass-card { position: relative; background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); transition: transform .2s, border-color .2s; }
.glass-card:hover, .glass-card:focus-within { border-color: #38bdf8; transform: translateY(-2px); }
.card-hit { position: absolute; inset: 0; border-radius: inherit; cursor: pointer; }
.card-hit:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.tag { display: inline-block; margin-top: .25rem; font-size: 11px; padding: .125rem .5rem; border-radius: .25rem; background: #1e293b; border: 1px solid #334155; color: #cbd5e1; }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: .25rem; border: 1px solid; font-weight: 500; }
.badge-closed { background: rgba(76, 5, 25, .8); border-color: #9f1239; color: #fda4af; }
.badge-open { background: rgba(2, 44, 34, .8); border-color: #065f46; color: #6ee7b7; }

/* filter pills */
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pill-row[hidden] { display: none; }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 9999px; background: #1e293b; border: 1px solid #334155; color: #cbd5e1; transition: background-color .2s; }
#basedPills .pill, #generationPills .pill, #devicePills .pill, #licensePills .pill, #licenseFamilyPills .pill, #installPills .pill, #authorPills .pill, #authorSubPills .pill { padding: .25rem .75rem; gap: .375rem; }
.pill-more { color: #7dd3fc; border-style: dashed; background: transparent; cursor: pointer; }
.pill-more:hover { background: #1e293b; }
.pill:hover { background: #334155; }
.pill[aria-pressed="true"] { background: #0284c7; color: #fff; border-color: #38bdf8; }

/* "More filters" toggle */
#moreFiltersBtn { background: none; border: none; cursor: pointer; }
#moreFiltersBtn[aria-expanded="true"] [data-icon="chevronDown"] { transform: rotate(180deg); }
#moreFilters[hidden] { display: none; }

/* year-of-creation dual range slider */
.year-slider { position: relative; height: 1.5rem; }
.year-slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; border-radius: 9999px; background: #334155; }
.year-slider-range { position: absolute; top: 0; bottom: 0; background: #38bdf8; border-radius: 9999px; }
.year-slider input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.year-slider input[type="range"]:focus-visible { outline: none; }
.year-slider input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; }
.year-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 1.125rem; height: 1.125rem; margin-top: 0;
  border-radius: 9999px; background: #f8fafc; border: 2px solid #0284c7; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.year-slider input[type="range"]::-moz-range-track { background: transparent; border: none; }
.year-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 1.125rem; height: 1.125rem; border-radius: 9999px;
  background: #f8fafc; border: 2px solid #0284c7; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.year-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid #38bdf8; outline-offset: 2px; }
.year-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid #38bdf8; outline-offset: 2px; }

/* compare: add/remove toggle on cards, buttons, chips, bar */
.cmp-toggle { position: absolute; top: .5rem; right: .5rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: #1e293b; border: 1px solid #334155; color: #cbd5e1; transition: background-color .2s; }
.cmp-toggle:hover:not(:disabled) { background: #334155; }
.cmp-toggle[aria-pressed="true"] { background: #0284c7; border-color: #38bdf8; color: #fff; }
.cmp-toggle:disabled, .btn:disabled { opacity: .4; cursor: not-allowed; }
.btn { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border-radius: .5rem; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; font-size: .875rem; transition: background-color .2s; }
.btn:hover:not(:disabled) { background: #334155; }
.btn[aria-pressed="true"] { border-color: #38bdf8; color: #7dd3fc; }
.btn-primary { background: #0284c7; border-color: #38bdf8; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #0369a1; }
.icon-btn { display: inline-flex; padding: .25rem; border-radius: .375rem; color: #94a3b8; }
.icon-btn:hover { background: #334155; color: #fff; }
.chip { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .25rem .25rem .625rem; border-radius: 9999px; background: #1e293b; border: 1px solid #334155; font-size: .875rem; }
#compareBar { position: fixed; inset: auto 0 0 0; z-index: 40; background: rgba(15, 23, 42, .95); backdrop-filter: blur(8px); border-top: 1px solid #334155; }
body:has(#compareBar:not([hidden])) { padding-bottom: 6rem; }

.cmp { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .875rem; }
.cmp th, .cmp td { padding: .625rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid #1e293b; min-width: 11rem; }
.cmp thead th { position: sticky; top: 0; z-index: 2; background: #0f172a; border-bottom-color: #334155; }
.cmp th:first-child { position: sticky; left: 0; z-index: 1; background: #0f172a; min-width: 0; white-space: nowrap; color: #e2e8f0; }
.cmp thead th:first-child { z-index: 3; }
.cmp tr.diff td { background: rgba(14, 165, 233, .08); }
.cmp tr.diff th:first-child { box-shadow: inset 3px 0 0 #38bdf8; }
.cmp td { color: #cbd5e1; }

/* detail dialog */
dialog { margin: auto; padding: 0; color: inherit; background: #0f172a; border: 1px solid #334155; border-radius: .75rem; width: min(42rem, calc(100vw - 2rem)); max-height: 90vh; overflow: hidden; }
#compareModal { width: min(72rem, calc(100vw - 2rem)); }
#compareModal[open] { display: flex; flex-direction: column; }
/* the dialog itself never scrolls (overflow hidden); the one scrollbar is this inner box, 2px shorter for the dialog border */
.dialog-scroll { overflow-y: auto; max-height: calc(90vh - 2px); }
dialog::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); }
body:has(dialog[open]) { overflow: hidden; }

/* logo tile: logos are designed for light backgrounds */
.logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 22%; background: #f1f5f9; }
.logo img, .logo svg { width: 78%; height: 78%; object-fit: contain; }

/* detail dialog: facts list (label / value rows) and small chips */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .625rem 1.25rem; align-items: start; font-size: .875rem; }
.facts dt { padding-top: .25rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; min-height: 1.75rem; color: #cbd5e1; }
.info-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem; border-radius: 9999px; background: #1e293b; border: 1px solid #334155; font-size: .8125rem; color: #e2e8f0; }
.info-link { display: inline-flex; align-items: center; gap: .375rem; color: #6ee7b7; word-break: break-all; }
.info-link:hover { text-decoration: underline; }
@media (max-width: 30rem) {
  .facts { grid-template-columns: 1fr; gap: .125rem; }
  .facts dt { padding-top: .5rem; }
}