@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root {
    --bg: #faf8f4;
    --paper: #fffdfa;
    --paper-soft: #f5f2ed;
    --ink: #111c38;
    --text-strong: #111c38;
    --text: #354460;
    --muted: #73809a;
    --line: #e4e1df;
    --accent: #f56466;
    --accent-action: #bd3e49;
    --accent-soft: #ffeded;
    --watching: #5478dd;
    --watching-soft: #edf2ff;
    --planned: #946fdf;
    --planned-soft: #f3edff;
    --content-max: 91rem;
    --radius-panel: 1.35rem;
    --shadow-lg: 0 1.25rem 3rem rgba(31, 38, 69, .065);
    --shadow-sm: 0 .6rem 1.5rem rgba(31, 38, 69, .07);
    --font-body: 'DM Sans', 'Avenir Next', sans-serif;
    --font-display: 'Newsreader', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; background: var(--bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; appearance: none; border: 0; background: none; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); font-weight: 500; }
p { line-height: 1.55; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, white); outline-offset: 3px; }

input, textarea, select { width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .85rem; color: var(--ink); background: #fff; }
input:hover, textarea:hover, select:hover { border-color: #c6c8d2; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--watching); outline-color: color-mix(in srgb, var(--watching) 35%, white); }

.panel { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--paper); box-shadow: var(--shadow-lg); }
.eyebrow { margin: 0; color: var(--accent-action); font-size: .69rem; font-weight: 700; letter-spacing: .2em; line-height: 1.3; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.8rem; padding: .68rem 1.05rem; border: 1px solid var(--line); border-radius: .75rem; background: #fff; color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 700; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.action:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: #c7c9d2; }
.action--primary { border-color: var(--accent-action); background: var(--accent-action); color: #fff; }
.action--primary:hover:not(:disabled) { background: #a8323e; border-color: #a8323e; }
.action--secondary { border-color: var(--ink); background: var(--ink); color: #fff; }
.action--secondary:hover:not(:disabled) { background: #263557; }
.action--ghost { background: transparent; }
.action:disabled { cursor: wait; opacity: .55; }
.empty-state { display: grid; gap: .35rem; padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px dashed #d8d5d4; border-radius: 1.15rem; background: #fffdfa; text-align: center; }
.empty-state strong { color: var(--ink); font-family: var(--font-display); font-size: 1.65rem; font-weight: 500; }
.empty-state p { margin: 0; color: var(--muted); }
.candidate-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.candidate-card { display: grid; align-content: start; gap: .55rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.candidate-card__top { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.candidate-card__score { color: var(--planned); }
.candidate-card strong { color: var(--ink); line-height: 1.35; }
.candidate-card p { margin: 0; color: var(--muted); font-size: .83rem; }
.candidate-card__meter { height: .28rem; border-radius: 1rem; background: linear-gradient(90deg, var(--planned) calc(var(--candidate-score) * 100%), #eeebf1 0); }
.candidate-card a { color: var(--watching); font-size: .82rem; font-weight: 700; text-underline-offset: .2rem; }

#blazor-error-ui { display: none; position: fixed; z-index: 100; inset: auto 1rem 1rem; padding: .8rem 1rem; border-radius: .8rem; background: #fff0ed; color: #9b393f; box-shadow: var(--shadow-lg); }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 1rem; }
.loading-progress { display: block; width: 4rem; height: 4rem; margin: 18vh auto 1rem; stroke: var(--accent); stroke-width: 5; fill: none; }
.loading-progress circle:last-child { stroke: var(--ink); stroke-dasharray: 15 85; animation: loading-ring 1.5s linear infinite; transform-origin: center; }
.loading-progress-text::after { content: 'Finding your next episode…'; display: block; color: var(--muted); text-align: center; }
@keyframes loading-ring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }