/* ============================================================
   Scover — vibrant/energetic design system
   One stylesheet shared by every page. No image assets.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Brand gradient */
    --grad: linear-gradient(120deg, #7c3aed 0%, #ec4899 50%, #f97316 100%);
    --grad-soft: linear-gradient(120deg, rgba(124,58,237,.12), rgba(236,72,153,.12), rgba(249,115,22,.12));
    --violet: #7c3aed;
    --pink: #ec4899;
    --orange: #f97316;

    /* Ink + surfaces */
    --ink: #1a1430;
    --ink-soft: #6b6385;
    --bg: #fbf7ff;
    --bg-grad: radial-gradient(1200px 600px at 10% -10%, #f6e9ff 0%, transparent 55%),
               radial-gradient(1000px 500px at 100% 0%, #ffe9f4 0%, transparent 50%),
               #fbf7ff;
    --card: #ffffff;
    --line: #efe7fb;

    --radius: 18px;
    --radius-pill: 999px;
    --shadow: 0 6px 24px rgba(124, 58, 237, .10);
    --shadow-lg: 0 16px 48px rgba(124, 58, 237, .18);
    --ring: 0 0 0 4px rgba(236, 72, 153, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg-grad);
    background-attachment: fixed;
    margin: 0;
    padding: 0 20px 60px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; }

h1, h2, h3, .display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.02em; }

a { color: var(--violet); }

/* ---- Brand logo (inline SVG wordmark) ---- */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .mark { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 4px 10px rgba(236,72,153,.35)); }
.brand .name {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px;
    letter-spacing: -0.03em; color: var(--ink);
}
.brand .name b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Top nav bar ---- */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 4px; flex-wrap: wrap;
}
.topnav { display: flex; gap: 8px; flex-wrap: wrap; }
.topnav a {
    text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 14px;
    padding: 9px 15px; border-radius: var(--radius-pill); transition: .18s;
}
.topnav a:hover { color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.topnav a.active { color: #fff; background: var(--grad); box-shadow: 0 6px 18px rgba(236,72,153,.35); }

/* CSS-only mobile nav: a hidden checkbox toggles the menu. No JS. */
.nav-toggle { display: none; }
.hamburger { display: none; cursor: pointer; padding: 9px 13px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: #fff; font-size: 18px; line-height: 1; user-select: none; }
@media (max-width: 720px) {
    .hamburger { display: inline-flex; }
    .topnav { display: none; width: 100%; flex-direction: column; gap: 6px; }
    .nav-toggle:checked ~ .topnav { display: flex; }
    .topnav a { padding: 12px 15px; }
}

/* Secondary nav row (e.g. competition switcher) — compact, horizontally scrollable on mobile */
.subnav { display: flex; gap: 7px; flex-wrap: wrap; padding: 2px 4px 14px; }
.subnav a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--ink-soft);
    padding: 6px 13px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; transition: .15s; white-space: nowrap; }
.subnav a:hover { color: var(--ink); box-shadow: var(--shadow); transform: translateY(-1px); }
.subnav a.active { color: #fff; background: var(--grad); border-color: transparent; }
@media (max-width: 720px) { .subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* Homepage "browse by competition" launcher chips */
.browse-chips { display: flex; gap: 9px; flex-wrap: wrap; margin: 6px 0 4px; }
.browse-chips a { text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--ink);
    padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; }
.browse-chips a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Active-filter chips (workstream C) */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.filter-chips:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
    padding: 6px 8px 6px 13px; border-radius: var(--radius-pill); background: var(--grad-soft); color: var(--violet); border: 1px solid var(--line); }
.fchip button { border: none; background: rgba(124,58,237,.14); color: var(--violet); width: 18px; height: 18px;
    border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.fchip button:hover { background: var(--violet); color: #fff; }

/* Skeleton loading shimmer (replaces plain "Loading…") */
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.skeleton { height: 132px; border-radius: var(--radius); border: 1px solid var(--line);
    background: linear-gradient(100deg, #f3edfb 30%, #faf6ff 50%, #f3edfb 70%); background-size: 200% 100%;
    animation: shimmer 1.3s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---- Hero ---- */
.hero { padding: 26px 4px 30px; }
.hero h1 {
    font-size: clamp(34px, 6vw, 62px); line-height: 1.02; margin: 0 0 14px;
    font-weight: 700;
}
.hero h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lede { font-size: clamp(16px, 2vw, 20px); color: var(--ink-soft); max-width: 640px; margin: 0 0 22px; }

/* ---- Pills / chips ---- */
.pill {
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    padding: 11px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px;
    border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, background .18s;
}
.pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pill.primary { background: var(--grad); color: #fff; border: none; box-shadow: 0 8px 22px rgba(236,72,153,.35); }
.pill.primary:hover { box-shadow: 0 14px 34px rgba(236,72,153,.45); }

.chip {
    display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 700; background: var(--grad-soft); color: var(--violet);
    border: 1px solid var(--line); white-space: nowrap;
}
.chip.year { background: var(--grad); color: #fff; border: none; }

/* ---- Cards ---- */
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.panel {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 22px;
}

/* ---- Search + filters ---- */
.search-wrap { margin: 6px 0 22px; }
.search-input {
    width: 100%; padding: 16px 22px; font-size: 17px; font-family: inherit;
    border: 2px solid var(--line); border-radius: var(--radius-pill); background: #fff;
    outline: none; transition: .18s; color: var(--ink);
}
.search-input:focus { border-color: var(--pink); box-shadow: var(--ring); }
.search-input::placeholder { color: #b6aecb; }

.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 16px; max-width: 100%; }
.filter-group { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.filter-group label { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.filter-group select {
    padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: #fff; font-size: 14px; font-family: inherit; color: var(--ink);
    min-width: 150px; max-width: 100%; cursor: pointer;
    /* long option labels must not stretch the control past the viewport */
    width: 220px; text-overflow: ellipsis;
}
.filter-group select:focus { outline: none; border-color: var(--pink); box-shadow: var(--ring); }
.stats { color: var(--ink-soft); font-size: 14px; margin-top: 14px; font-weight: 500; }

/* ---- Result cards (winner/project) ---- */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.winner-card { padding: 20px; display: flex; flex-direction: column; }
.winner-card .card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.winner-card .title { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px; line-height: 1.25; }
.winner-card .byline { font-size: 14px; color: #4a4360; }
.winner-card .byline .label { color: #aaa1c2; }
.meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.meta-item { background: #f7f2ff; border: 1px solid var(--line); padding: 4px 11px; border-radius: var(--radius-pill); font-size: 12.5px; color: #5a5275; font-weight: 500; }
.meta-item.award { background: #fff4ec; border-color: #ffe0cc; color: #c2410c; font-weight: 700; }
.source-link {
    margin-top: 14px; align-self: flex-start; text-decoration: none; font-size: 13px; font-weight: 600;
    color: var(--violet); padding: 7px 14px; border-radius: var(--radius-pill); background: var(--grad-soft);
    border: 1px solid var(--line); transition: .18s;
}
.source-link:hover { background: #fff; box-shadow: var(--shadow); }

mark { background: linear-gradient(transparent 55%, rgba(236,72,153,.35) 0); color: inherit; padding: 0 1px; border-radius: 2px; }

/* ---- Pagination ---- */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.pagination button {
    padding: 9px 15px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-pill);
    cursor: pointer; font-family: inherit; font-weight: 600; color: var(--ink-soft); transition: .15s;
}
.pagination button:hover:not(:disabled) { color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination button.active { background: var(--grad); color: #fff; border: none; }

/* ---- Stat strip ---- */
.stat-strip { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 24px; }
.stat {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 22px;
    box-shadow: var(--shadow); min-width: 130px;
}
.stat .n { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* ---- Misc ---- */
.loading, .no-results { text-align: center; padding: 50px; color: var(--ink-soft); }
.no-results { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
.data-note { background: var(--grad-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; font-size: 14px; color: #5a5275; }
.footer { text-align: center; padding: 40px 0 10px; color: #b6aecb; font-size: 13px; }
.footer .brand .name { font-size: 18px; }

@media (max-width: 560px) {
    .results { grid-template-columns: 1fr; }
    .hero h1 { font-size: 36px; }
}

/* ============================================================
   Dark mode + app-shell components (scover-app.js)
   ============================================================ */
:root { --surface-2: #f7f2ff; --fab-ink: var(--ink); }
[data-theme="dark"] {
    --ink: #ece7f7; --ink-soft: #a79fc0;
    --bg: #0f0b1a; --card: #171327; --line: #2a2440; --surface-2: #221c38;
    --bg-grad: radial-gradient(1200px 600px at 10% -10%, #1d1437 0%, transparent 55%),
               radial-gradient(1000px 500px at 100% 0%, #2a1330 0%, transparent 50%), #0f0b1a;
    --grad-soft: linear-gradient(120deg, rgba(124,58,237,.30), rgba(236,72,153,.24), rgba(249,115,22,.22));
    --shadow: 0 6px 24px rgba(0,0,0,.45); --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
    --ring: 0 0 0 4px rgba(236,72,153,.30);
}
/* hardcoded #fff surfaces -> var so dark flips them */
[data-theme="dark"] .topnav a:hover, [data-theme="dark"] .subnav a,
[data-theme="dark"] .pill, [data-theme="dark"] .filter-group select,
[data-theme="dark"] .search-input, [data-theme="dark"] .browse-chips a,
[data-theme="dark"] .pagination button, [data-theme="dark"] .hamburger { background: var(--card); }
[data-theme="dark"] .meta-item { background: var(--surface-2); color: var(--ink-soft); border-color: var(--line); }
[data-theme="dark"] .no-results, [data-theme="dark"] .stat, [data-theme="dark"] .feature-card { background: var(--card); }
[data-theme="dark"] .search-input::placeholder { color: #6b6388; }
[data-theme="dark"] mark { color: #fff; }

/* Theme toggle button in the nav */
.theme-toggle { border: 1px solid var(--line); background: var(--card); cursor: pointer;
    border-radius: var(--radius-pill); padding: 8px 12px; font-size: 16px; line-height: 1; }

/* Floating ⌘K search button */
.scover-fab { position: fixed; right: 18px; bottom: 18px; z-index: 800; border: none;
    background: var(--grad); color: #fff; font-weight: 700; font-size: 13px; padding: 11px 16px;
    border-radius: var(--radius-pill); box-shadow: 0 8px 22px rgba(236,72,153,.4); cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; }
.scover-fab kbd { background: rgba(255,255,255,.25); border-radius: 5px; padding: 1px 6px; font-size: 11px; }
.scover-fab:hover { transform: translateY(-2px); }
@media (max-width: 560px) { .scover-fab kbd { display: none; } }

/* Command palette */
#scover-pal { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: center; align-items: flex-start; }
.pal-backdrop { position: absolute; inset: 0; background: rgba(10,7,18,.55); backdrop-filter: blur(4px); }
.pal-box { position: relative; margin-top: 12vh; width: min(640px, 92vw); background: var(--card);
    border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.pal-input { width: 100%; border: none; outline: none; padding: 18px 22px; font-size: 17px;
    font-family: inherit; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); }
.pal-results { max-height: 52vh; overflow-y: auto; }
.pal-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; text-decoration: none; color: var(--ink); }
.pal-row.sel, .pal-row:hover { background: var(--grad-soft); }
.pal-ic { flex: none; width: 58px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.pal-t { display: flex; flex-direction: column; min-width: 0; }
.pal-t { font-weight: 600; font-size: 14.5px; }
.pal-sub { font-weight: 500; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-foot { padding: 9px 18px; font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line); }
.pal-empty { padding: 26px; text-align: center; color: var(--ink-soft); }

/* Detail modal */
#scover-modal-root .sm-backdrop { position: fixed; inset: 0; z-index: 1100; display: flex;
    justify-content: center; align-items: center; background: rgba(10,7,18,.55); backdrop-filter: blur(4px); }
.sm-modal { position: relative; width: min(560px, 92vw); max-height: 84vh; overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 28px; }
.sm-close { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 26px; cursor: pointer; color: var(--ink-soft); }
.sm-type { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--violet); }
.sm-title { font-family: 'Space Grotesk', sans-serif; margin: 6px 0 4px; font-size: 22px; color: var(--ink); }
.sm-byline { color: var(--ink-soft); font-size: 14px; margin-bottom: 10px; }
.sm-rows { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; }
.sm-row { display: flex; gap: 12px; font-size: 14px; }
.sm-k { flex: none; width: 110px; color: var(--ink-soft); font-weight: 600; }
.sm-v { color: var(--ink); }
.sm-note { color: #4a4360; line-height: 1.6; font-size: 14px; }
[data-theme="dark"] .sm-note { color: var(--ink-soft); }
.sm-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.sm-star { border: 1px solid var(--line); background: var(--card); color: var(--pink); border-radius: var(--radius-pill); width: 40px; height: 40px; font-size: 20px; cursor: pointer; }
.sm-link { text-decoration: none; font-weight: 600; font-size: 14px; color: #fff; background: var(--grad); padding: 10px 18px; border-radius: var(--radius-pill); }

/* ---- Elegance pass: softer, calmer, more refined ---- */
:root { --shadow: 0 4px 16px rgba(26,20,48,.06); --shadow-lg: 0 14px 40px rgba(26,20,48,.10); }
body { line-height: 1.6; }
.hero h1 { font-weight: 600; letter-spacing: -0.035em; }
.hero p.lede { max-width: 600px; color: var(--ink-soft); }
.topnav a { font-weight: 500; }
.card:hover, .winner-card:hover, .project-card:hover { transform: translateY(-3px); }
.chip { font-weight: 600; }
/* Calmer floating search button */
.scover-fab { background: var(--card); color: var(--ink); border: 1px solid var(--line);
    box-shadow: var(--shadow-lg); font-weight: 600; padding: 10px 15px; }
.scover-fab kbd { background: var(--surface-2); color: var(--ink-soft); }
.scover-fab:hover { border-color: var(--pink); }
.theme-toggle { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 9px 14px; }
.theme-toggle:hover { color: var(--ink); }