/* One stylesheet, no framework, no build step — matching the sibling projects.
   Colours are declared once as custom properties, so there is a single place to
   change either theme.

   Three states, not two. `data-theme` absent means follow the OS, which is what
   theme.js writes for "system"; `data-theme="light"` and `data-theme="dark"`
   are the explicit overrides. That is why the dark block below appears twice —
   once for "the OS says dark and the visitor has not overridden it", once for
   "the visitor asked for dark". CSS has no way to share a declaration list
   between two selectors that must not be merged into one rule, because merging
   them would make the media query apply to the explicit choice as well.
   Keep the two blocks identical. */

:root {
  color-scheme: light;

  --bg: #f6f7f9;
  --bg-card: #ffffff;
  --fg: #16181d;
  --fg-muted: #5c6470;
  --fg-faint: #8a939f;
  --border: #dfe3ea;
  --border-hover: #b9c1cd;
  --accent: #2f5dd4;
  --ok: #1a9b52;
  --down: #cc3b30;
  --unknown: #a5adb9;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px -12px rgb(16 24 40 / 18%);
}

/* The OS says dark, and the visitor has not explicitly asked for light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0e1116;
    --bg-card: #161b22;
    --fg: #e7ebf0;
    --fg-muted: #9aa4b1;
    --fg-faint: #6e7884;
    --border: #262c35;
    --border-hover: #3d4650;
    --accent: #7ea2ff;
    --ok: #3fb96e;
    --down: #f0645a;
    --unknown: #4a525d;
    --shadow: none;
  }
}

/* The visitor explicitly asked for dark, whatever the OS says. Identical to the
   block above by design — see the note at the top of this file. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1116;
  --bg-card: #161b22;
  --fg: #e7ebf0;
  --fg-muted: #9aa4b1;
  --fg-faint: #6e7884;
  --border: #262c35;
  --border-hover: #3d4650;
  --accent: #7ea2ff;
  --ok: #3fb96e;
  --down: #f0645a;
  --unknown: #4a525d;
  --shadow: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 5vw, 3rem);
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page-head,
main,
.page-foot {
  max-width: 68rem;
  margin-inline: auto;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

h1 {
  margin: 0;
  flex: 1;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  /* Three labels of different widths cycle through here. Without a floor the
     button resizes on every click and the heading jumps with it. */
  min-width: 6.5rem;
  justify-content: center;
}

.theme-toggle:hover {
  border-color: var(--border-hover);
  color: var(--fg);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: border-color 120ms ease, transform 120ms ease;
}

.card:hover { border-color: var(--border-hover); transform: translateY(-2px); }

/* The whole card is the link. Padding lives here rather than on .card so the
   hit area covers the card edge to edge. */
.card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  /* Even all round now that the footer strip is gone — the old asymmetric
     bottom existed to sit tight against it. */
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 12px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.card-head h2 {
  margin: 0;
  flex: 1;
  font-size: 1.2rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.card:hover .card-head h2 { color: var(--accent); }

.tagline {
  margin: 0;
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 500;
}

.description {
  margin: 0;
  flex: 1;
  color: var(--fg-muted);
  font-size: 0.9rem;
}

/* ── Status ─────────────────────────────────────────────────────────────── */

.dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--unknown);
}

.dot[data-status="ok"]        { background: var(--ok); }
.dot[data-status="down"]      { background: var(--down); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.page-foot {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--fg-faint);
  font-size: 0.78rem;
}

.legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
}

.legend .dot { margin-left: 0.6rem; }
.legend .dot:first-child { margin-left: 0; }

.build {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* Extensions section */
.section-title { margin: 2.5rem 0 .25rem; font-size: 1.15rem; font-weight: 600; color: var(--fg); }
.section-note { margin: 0 0 1rem; font-size: .9rem; color: var(--fg-muted); }
.store-badge { font-size: .7rem; font-weight: 600; letter-spacing: .03em; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted); white-space: nowrap; }
.card:hover .store-badge { border-color: var(--accent); color: var(--accent); }