/* Ithaca — Charlatan Games black & gold theme (brand branch).
   Vars are intentionally generic so admin pages and brand pages share the same palette. */

:root {
    --bg-base: #0a0a0a;
    --bg-surface: #161616;
    --bg-elevated: #1f1f1f;
    --bg-hover: #2a2a2a;
    --text-primary: #f0e6d0;
    --text-secondary: #b8a878;
    --text-muted: #6e6450;
    --accent: #d4a13c;
    --accent-hover: #e8b85a;
    --accent-strong: #b8862a;
    --amber: #f0c060;
    --crimson: #c44545;
    --leaf: #6b8a3a;
    --border: #2a2418;
    --border-soft: #1a160e;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    --radius: 4px;
    --container: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    /* Reserve scrollbar gutter on every page so navigating from a short page to a long one
       (e.g. Brand home → /apps) doesn't laterally shift centred containers like the topbar
       wordmark. Modern browsers respect scrollbar-gutter; the overflow rule is a fallback
       for older Safari that doesn't. */
    scrollbar-gutter: stable;
    overflow-y: scroll;
}
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    color-scheme: dark; /* native form controls (date picker, scrollbars, options) follow the dark theme */
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 120ms ease;
}
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.25;
    margin: 1.5rem 0 0.75rem;
}
h1 { font-size: 1.85rem; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; border-bottom: 1px solid var(--border-soft); padding-bottom: 0.4rem; }
h3 { font-size: 1.1rem; }
h1:focus, h2:focus, h3:focus { outline: none; }

p { margin: 0.5rem 0; }
small, .muted { color: var(--text-muted); }

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }

main { padding: 1.5rem 0 3rem; }

/* Topbar */
.topbar {
    background: linear-gradient(180deg, #1f1f1f 0%, #0a0a0a 100%);
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; }
.topbar .brand {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}
.topbar .brand:hover { color: var(--accent); }
.topbar nav { display: flex; gap: 1rem; align-items: center; }
.topbar nav a { color: var(--text-secondary); font-weight: 500; }
.topbar nav a:hover { color: var(--accent); }

/* Footer */
.footer {
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    padding: 1.5rem 0;
    font-size: 0.9rem;
    margin-top: 3rem;
}

/* Hero */
.hero {
    background: radial-gradient(circle at 20% 30%, #2a2418 0%, transparent 55%),
                radial-gradient(circle at 80% 20%, rgba(212, 161, 60, 0.35) 0%, transparent 50%),
                var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    margin: 0 0 2rem;
    box-shadow: var(--shadow);
}
.hero h1 { font-size: 2.4rem; margin: 0; }
.hero p { color: var(--text-secondary); font-size: 1.1rem; margin-top: 0.5rem; }

/* Forms */
form { display: block; }
label {
    display: block;
    margin: 0.85rem 0 0.35rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
}
/* Catch every text-like input — including type-less ones (which default to text) and the
   handful of types I previously missed (search, tel, email, etc.). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="range"]):not([type="color"]),
textarea,
select {
    width: 100%;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="range"]):not([type="color"]):hover,
textarea:hover,
select:hover { border-color: #4a3e22; }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 161, 60, 0.25);
}
textarea { resize: vertical; min-height: 5rem; }

/* Force browser-rendered controls to use the dark palette */
input, textarea, select { color-scheme: dark; }

/* File input — themed picker button */
input[type="file"] {
    width: 100%;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.55rem;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    background: var(--accent);
    color: #0a0a0a;
    border: 1px solid var(--accent-strong);
    border-radius: 4px;
    padding: 0.35rem 0.85rem;
    margin-right: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
}
input[type="file"]::file-selector-button:hover { background: var(--accent-hover); }

/* Checkbox / radio — keep native shape, tint with accent */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--accent);
    width: auto;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Date / time picker icon (Chromium) — invert so it reads on dark */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator { filter: invert(0.85) sepia(0.2) saturate(2) hue-rotate(330deg); cursor: pointer; }

/* Native dropdown options on dark theme */
option { background: var(--bg-elevated); color: var(--text-primary); }

button, .btn {
    background: var(--accent);
    color: #0a0a0a;
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, transform 80ms ease;
    margin-top: 0.5rem;
}
button:hover, .btn:hover { background: var(--accent-hover); color: #0a0a0a; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; border-color: var(--border); }

button.link {
    background: transparent;
    border: none;
    color: var(--accent);
    padding: 0;
    font-weight: 500;
}
button.link:hover { color: var(--accent-hover); }

button.danger { background: var(--crimson); color: #fff; border-color: #7a2a1d; }
button.danger:hover { background: #d65a5a; color: #fff; }

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
thead { background: var(--bg-elevated); }
th, td {
    padding: 0.55rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}
th { color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(212, 161, 60, 0.08); }

/* Cards / callouts */
.callout {
    background: var(--bg-surface);
    border-left: 3px solid var(--amber);
    padding: 0.85rem 1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1rem 0;
}

/* Install button (in-client only) */
.install-btn {
    display: inline-block;
    background: var(--accent);
    color: #0a0a0a !important;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius);
    border: 1px solid var(--accent-strong);
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0.35rem;
    text-decoration: none;
}
.install-btn:hover { background: var(--accent-hover); color: #0a0a0a !important; }

/* Admin dashboard tiles — two per row on desktop, single column on narrow viewports. */
.admin-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.admin-tiles a {
    display: block;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    color: var(--text-primary);
    transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.admin-tiles a:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.admin-tiles a h2 {
    margin: 0 0 0.4rem;
    border: none;
    padding: 0;
    font-size: 1.25rem;
    color: var(--accent);
}
.admin-tiles a:hover h2 { color: var(--accent-hover); }
.admin-tiles a p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .admin-tiles { grid-template-columns: 1fr; }
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}
.summary-cards > div {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.summary-cards h3 {
    margin: 0 0 0.4rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.summary-cards p {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
}

/* Product grid (Home) */
.product-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.product-grid li a {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text-primary);
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.product-grid li a:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
}

.card-banner {
    position: relative;
    aspect-ratio: 16 / 7;
    background-color: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.card-banner-fallback {
    /* Autumn gradient when no banner image is set. */
    background:
        radial-gradient(circle at 82% 22%, rgba(212, 161, 60, 0.20) 0%, transparent 55%),
        radial-gradient(circle at 22% 88%, rgba(212, 161, 60, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 100%);
}
.card-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.78) 100%);
    pointer-events: none;
}
.card-banner-content {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    z-index: 1;
}
.card-icon {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 11px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.card-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-weight: 700;
    font-size: 1.4rem;
}
.card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
}
.card-summary {
    padding: 0.7rem 0.95rem 0.95rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.4;
}

/* Product page */
.product-header {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin: 0 0 1.5rem;
}
.product-icon {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
}
.product-header h1 { margin: 0; }
.product-header .developer { color: var(--amber); font-size: 0.95rem; margin: 0.2rem 0; font-weight: 500; }
.product-header .summary { color: var(--text-secondary); margin: 0.4rem 0; }
.product-header .downloads { color: var(--text-muted); font-size: 0.85rem; margin: 0.3rem 0; }

.screenshots .screenshot-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.screenshots figure {
    margin: 0;
    flex: 0 0 auto;
}
.screenshots img {
    height: 320px;
    width: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-soft);
}
.screenshots figcaption {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.video .video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.release-notes {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--bg-base);
    color: var(--text-secondary);
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.9rem;
    border-left: 2px solid var(--leaf);
}

/* Code / pre */
code {
    background: var(--bg-elevated);
    color: var(--amber);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}
pre {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    overflow-x: auto;
    color: var(--text-secondary);
}

/* Validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--leaf); }
.invalid { outline: 1px solid var(--crimson); }
.validation-message { color: var(--crimson); font-size: 0.85rem; }

/* Inline form helper */
form.inline { display: inline; margin: 0; }
form.inline button { margin: 0; }

/* Blazor error boundary */
.blazor-error-boundary {
    background: var(--crimson);
    color: #fff;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    background: var(--crimson);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
#blazor-error-ui a.reload { color: #fff; text-decoration: underline; margin-left: 0.5rem; }