/* The modern look shared by the Pathfinder 1e, Pathfinder 2e and Starfinder sites. Everything is scoped to
   html[data-modern] (set by dragonlash/base.jinja2 for those apps), so the rest of dragonlash.com is untouched.
   Loaded after dragonlash.css from each game's base.jinja2: to roll the restyle back, delete that <link>.
   Sections are numbered to match the design list so single ones can be removed. The palette below is Pathfinder 1e's
   (parchment brown); section 1b gives each other game its own accent. */

/* ---- 1. palette (light) + 6. typography ---- */
html[data-modern] {
    font-size: 16px;
    --font-body:        Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-header:      var(--font-body);
    --font-condensed:   var(--font-body);
    --color-bar:        hsl(28, 18%, 13%);
    --color-bar-text:   hsl(36, 25%, 93%);
    --color-background: hsl(38, 26%, 94%);
    --color-foreground: hsl(40, 38%, 98%);
    --color-border:     hsl(36, 18%, 83%);
    --color-active:     hsl(36, 40%, 88%);
    --color-text:       hsl(28, 25%, 14%);
    --color-muted:      hsl(30, 10%, 42%);
    --color-link:       hsl(18, 62%, 36%);
    --color-accent:     hsl(18, 62%, 36%);
    --color-accent-text: #fff;
    --radius:           8px;
    --shadow:           0 1px 2px rgba(60, 40, 20, .06), 0 1px 3px rgba(60, 40, 20, .08);
    --shadow-pop:       0 8px 24px rgba(60, 40, 20, .18);
}

/* ---- 7. dark mode (palette; the theme is picked in base.jinja2) ---- */
html[data-modern][data-theme='dark'] {
    --color-bar:        hsl(28, 22%, 7%);
    --color-bar-text:   hsl(36, 22%, 90%);
    --color-background: hsl(28, 14%, 11%);
    --color-foreground: hsl(28, 13%, 15%);
    --color-border:     hsl(28, 10%, 25%);
    --color-active:     hsl(26, 28%, 22%);
    --color-text:       hsl(36, 22%, 88%);
    --color-muted:      hsl(32, 10%, 62%);
    --color-link:       hsl(28, 70%, 68%);
    --color-accent:     hsl(28, 70%, 62%);
    --color-accent-text: hsl(28, 22%, 7%);
    --shadow:           0 1px 2px rgba(0, 0, 0, .4);
    --shadow-pop:       0 8px 24px rgba(0, 0, 0, .6);
}

html[data-modern] body,
html[data-modern] p, html[data-modern] li, html[data-modern] a,
html[data-modern] label, html[data-modern] span, html[data-modern] input,
html[data-modern] td, html[data-modern] th {
    font-family: var(--font-body);
    line-height: 1.55;
}
html[data-modern] h1, html[data-modern] h2, html[data-modern] h3,
html[data-modern] h4 {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
html[data-modern] h1 { font-size: 1.9em; }
html[data-modern] a:hover { text-decoration: underline; }

/* ---- 8. layout: readable width, sticky top bar ---- */
html[data-modern] #main-grid-content {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
html[data-modern] #main-grid-header {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .25);
    z-index: 10;
}
html[data-modern] .section-label {
    display: inline-block;
    vertical-align: top;
    margin-left: 6px;
    padding: 4px 0 0 14px;
    border-left: 1px solid rgba(255, 255, 255, .25);
    height: 44px;
    box-sizing: border-box;
}
html[data-modern] .section-label img { height: 36px; width: auto; display: block; }
html[data-modern] .section-label:hover { text-decoration: none; }
@media only screen and (max-width: 499px) {
    html[data-modern] .section-label { display: none; }
}
html[data-modern] #main-grid-footer { margin-top: 32px; }
html[data-modern] #main-grid-footer a { color: var(--color-bar-text); }

/* ---- 3. rounded, lifted surfaces ---- */
html[data-modern] .block,
html[data-modern] .brief,
html[data-modern] .sidebar-block,
html[data-modern] .emphasis-block {
    background-color: var(--color-foreground);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 18px;
    margin: 12px 0;
}
html[data-modern] .emphasis-block { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }

/* ---- 5. facet dropdowns and filter pills ---- */
html[data-modern] button,
html[data-modern] .btn {
    padding: 6px 14px;
    line-height: 1.5;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background-color: var(--color-foreground);
    color: var(--color-text);
    font-size: .92rem;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
html[data-modern] .btn:hover { border-color: var(--color-accent); }
html[data-modern] .bar.btn { border: 0; border-radius: 0; background-color: transparent; color: var(--color-bar-text); }
html[data-modern] .dropdown { background-color: var(--color-foreground); }
html[data-modern] .dropdown-content {
    background-color: var(--color-foreground);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    margin-left: -14px;
    padding: 8px 6px;
    max-height: 60vh;
    overflow-y: auto;
}
html[data-modern] .dropdown-content ul { list-style: none; padding: 0; }
html[data-modern] .dropdown-content a { display: block; padding: 3px 10px; border-radius: 6px; }
html[data-modern] .dropdown-content a:hover { background-color: var(--color-active); text-decoration: none; }
html[data-modern] .dropdown-content a.active { background-color: var(--color-active); font-weight: 600; }
html[data-modern] .dropdown-content a span { color: var(--color-muted); font-size: .85em; }
html[data-modern] .btn.spaced { margin: 4px 6px 4px 0; }

/* ---- 4. search box ---- */
html[data-modern] .search-form { margin: 8px 0 12px; }
html[data-modern] .search-form input[name="q"] {
    width: 100%;
    margin: 0;
    padding: 12px 16px 12px 46px;
    font-size: 1.1rem;
    color: var(--color-text);
    background-color: var(--color-foreground);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    background-repeat: no-repeat;
    background-position: 16px 50%;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    transition: border-color .15s, box-shadow .15s;
}
html[data-modern] .search-form input[name="q"]::placeholder { color: var(--color-muted); }
html[data-modern] .search-form input[name="q"]:focus {
    outline: none !important;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* ---- 10. live-search loading state ---- */
html[data-modern] .search-form ~ * { transition: opacity .15s; }
html[data-modern] .search-form.loading ~ * { opacity: .45; }

/* ---- 2. tables ---- */
html[data-modern] table {
    display: table;
    border-style: none;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-foreground);
    overflow: hidden;
}
html[data-modern] th, html[data-modern] table th a {
    text-align: left;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
}
html[data-modern] table th {
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 12px;
    position: sticky;
    top: 48px;
    z-index: 2;
}
html[data-modern] table td { padding: 9px 12px; border-top: 1px solid var(--color-border); }
html[data-modern] tbody tr:first-child td { border-top: 0; }
html[data-modern] tbody tr:nth-child(odd),
html[data-modern] tbody tr:nth-child(even) { background-color: transparent; }
html[data-modern] tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--color-background) 55%, transparent); }
html[data-modern] tbody tr:hover { background-color: var(--color-active); }
html[data-modern] .main-index table { display: table; }
/* sticky headers need an ancestor that doesn't clip: only the page scrolls */
html[data-modern] table { overflow: visible; }
html[data-modern] table thead th:first-child { border-top-left-radius: var(--radius); }
html[data-modern] table thead th:last-child { border-top-right-radius: var(--radius); }

/* ---- 9. detail pages: tags and a key/value panel ---- */
html[data-modern] .block-tag {
    padding: 2px 10px;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-active);
    color: var(--color-link);
    font-size: .8rem;
    font-weight: 600;
}
html[data-modern] .block .inline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 6px 24px;
    padding: 12px 16px;
    margin: 10px 0 14px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
html[data-modern] .block .inline br { display: none; }
html[data-modern] .block .inline p { display: block; margin: 0; }
html[data-modern] .block .inline .block-tag { grid-column: 1 / -1; justify-self: start; }
html[data-modern] .block .inline b { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--color-muted); }
html[data-modern] .brief .inline { display: block; padding: 0; margin: 0; background: none; border: 0; color: var(--color-muted); }
html[data-modern] .brief .inline b { display: inline; text-transform: none; letter-spacing: 0; font-size: inherit; }

/* ---- 11. polish ---- */
html[data-modern] .pagination { border-radius: 6px; font-size: 1rem; }
html[data-modern] :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    html[data-modern] * { transition: none !important; }
}

/* ---- 12. top-level type tabs, distinct from the filter pills below them ---- */
html[data-modern] .type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 18px;
    border-bottom: 2px solid var(--color-border);
}
html[data-modern] .type-tab {
    padding: 8px 16px;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    color: var(--color-muted);
}
html[data-modern] .type-tab:hover { color: var(--color-text); background-color: var(--color-active); text-decoration: none; }
html[data-modern] .type-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
/* the filters under a selected type: a quieter, labelled strip */
html[data-modern] .type-tabs ~ div:not(.type-tabs):has(> .dropdown) {
    padding: 8px 10px;
    margin-bottom: 8px;
    background-color: var(--color-background);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}
html[data-modern] .type-tabs ~ div:not(.type-tabs):has(> .dropdown)::before {
    content: "Filters";
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 2px;
}

/* ---- 1b. per-game palettes: Pathfinder 2e (parchment + crimson), Starfinder (cool slate + teal) ---- */
html[data-app="pathfinder2"] {
    --color-bar:        hsl(350, 22%, 13%);
    --color-background: hsl(40, 22%, 95%);
    --color-foreground: hsl(42, 36%, 99%);
    --color-border:     hsl(38, 14%, 84%);
    --color-active:     hsl(350, 36%, 93%);
    --color-link:       hsl(350, 62%, 34%);
    --color-accent:     hsl(350, 62%, 34%);
}
html[data-app="pathfinder2"][data-theme='dark'] {
    --color-bar:        hsl(350, 20%, 7%);
    --color-background: hsl(350, 8%, 11%);
    --color-foreground: hsl(350, 8%, 15%);
    --color-border:     hsl(350, 6%, 25%);
    --color-active:     hsl(350, 26%, 22%);
    --color-link:       hsl(350, 72%, 72%);
    --color-accent:     hsl(350, 66%, 64%);
}
html[data-app="starfinder"] {
    --color-bar:        hsl(222, 30%, 12%);
    --color-bar-text:   hsl(210, 25%, 94%);
    --color-background: hsl(215, 22%, 95%);
    --color-foreground: hsl(215, 30%, 99%);
    --color-border:     hsl(215, 16%, 84%);
    --color-active:     hsl(190, 46%, 90%);
    --color-text:       hsl(222, 26%, 14%);
    --color-muted:      hsl(215, 10%, 44%);
    --color-link:       hsl(192, 82%, 28%);
    --color-accent:     hsl(192, 82%, 28%);
    --shadow:           0 1px 2px rgba(16, 30, 54, .06), 0 1px 3px rgba(16, 30, 54, .08);
    --shadow-pop:       0 8px 24px rgba(16, 30, 54, .18);
}
html[data-app="starfinder"][data-theme='dark'] {
    --color-bar:        hsl(222, 32%, 7%);
    --color-background: hsl(222, 22%, 10%);
    --color-foreground: hsl(222, 20%, 15%);
    --color-border:     hsl(222, 14%, 25%);
    --color-active:     hsl(196, 40%, 21%);
    --color-text:       hsl(214, 24%, 90%);
    --color-muted:      hsl(215, 10%, 62%);
    --color-link:       hsl(186, 78%, 62%);
    --color-accent:     hsl(186, 74%, 52%);
    --color-accent-text: hsl(222, 32%, 7%);
}

/* ---- 13. no sidebar nav: the search home page is the way in (the browse index shows until something is
   searched). Collapse the grid column/row the shared layout (dragonlash.css) reserves for it. ---- */
html[data-modern] .mobile-only { display: none !important; }
html[data-modern] #main-grid-navbar { display: none !important; }
@media only screen and (min-width: 1000px) {
    html[data-modern] #main-grid {
        grid-template-columns: auto 320px;
        grid-template-areas:
            "header      header"
            "content     sidebar-ad"
            "content     sidebar-info"
            "footer      footer";
    }
}
@media only screen and (min-width: 500px) and (max-width: 999px) {
    html[data-modern] #main-grid {
        grid-template-columns: auto;
        grid-template-areas:
            "header"
            "content"
            "sidebar-ad"
            "sidebar-info"
            "footer";
    }
}
@media only screen and (max-width: 499px) {
    html[data-modern] #main-grid {
        left: 0;
        grid-template-columns: 100vw;
        grid-template-areas:
            "header"
            "content"
            "sidebar-ad"
            "footer";
    }
}

/* ---- 14. dragonlash.com: ember palette, a single column (no sidebar), and the game cards on its home page ---- */
html[data-app="dragonlash"] {
    --color-bar:        hsl(18, 24%, 11%);
    --color-background: hsl(30, 24%, 95%);
    --color-foreground: hsl(32, 40%, 99%);
    --color-border:     hsl(30, 16%, 84%);
    --color-active:     hsl(24, 60%, 91%);
    --color-link:       hsl(20, 76%, 36%);
    --color-accent:     hsl(20, 76%, 36%);
}
html[data-app="dragonlash"][data-theme='dark'] {
    --color-bar:        hsl(18, 26%, 6%);
    --color-background: hsl(20, 12%, 10%);
    --color-foreground: hsl(20, 11%, 15%);
    --color-border:     hsl(20, 8%, 25%);
    --color-active:     hsl(20, 30%, 21%);
    --color-link:       hsl(24, 82%, 68%);
    --color-accent:     hsl(24, 78%, 60%);
}
html[data-app="dragonlash"] #main-grid {
    left: 0;
    grid-template-columns: auto;
    grid-template-areas:
        "header"
        "content"
        "footer";
}
html[data-app="dragonlash"] #main-grid-sidebar-ad,
html[data-app="dragonlash"] #main-grid-sidebar-content { display: none; }

.games {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 22px;
    text-align: center;
    background-color: var(--color-foreground);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    color: var(--color-text);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.game-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-pop);
    text-decoration: none;
}
.game-card img { width: 100%; max-width: 260px; height: auto; margin-bottom: 4px; }
.game-card b { font-size: 1.15rem; }
.game-card span { color: var(--color-muted); font-size: .95rem; }
.help-note { color: var(--color-muted); text-align: center; margin: 32px 0 8px; }