/* Shared theme — only rules identical across every page live here.
   Page-specific layout (body padding, max-width, flex) stays in each template. */
:root {
    --bg: #141414;
    --panel: #1e1e1e;
    --panel-alt: #252525;
    --border: #333;
    --border-soft: #444;
    --text: #ddd;
    --text-bright: #eee;
    --text-dim: #888;
    --accent: #7ab8d0;
    --gold: #d4c5a0;
    --gold-dark: #b8860b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Site-wide breadcrumb nav (base.html). Full-width so it renders the same
   under flex-centered bodies (index) and block bodies (results/pictures). */
.site-nav { width: 100%; max-width: 1100px; margin: 0 auto 0.5rem; font-size: 0.8rem; color: var(--text-dim); }
.site-nav .brand { color: var(--gold); font-weight: 600; }
.site-nav .sep { color: #555; margin: 0 0.35rem; }
.site-nav a { color: var(--accent); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.site-nav .here { color: var(--text-bright); }

/* Library link — a short we hold a verified local copy of. Distinct from the
   streaming results above it: those are matched by metadata, this one had its
   frames checked (see build_shorts_jellyfin.py), and it cannot link-rot. */
.archive-link { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.archive-link .jelly { display: inline-block; font-size: 0.8rem; color: #6ad29a; border: 1px solid #2c6e8f; background: #102028; border-radius: 3px; padding: 3px 9px; text-decoration: none; font-weight: 600; }
.archive-link .jelly:hover { border-color: #6ad29a; }
.archive-link .archive-note { font-size: 0.72rem; color: var(--text-dim); }

/* Signed out: the film is in the archive, but the Jellyfin item id stays off
   the page. Jellyfin streams to anyone with no token, so an id in public HTML
   is the film in public. */
.archive-link .jelly-locked { color: #8a9aa5; border-color: #3a4a55; font-weight: 500; }
.archive-link .jelly-locked:hover { border-color: #6ad29a; color: #6ad29a; }

/* Sign-in state in the shared nav. Pushed right so it never competes with the
   section links, and small enough to read as chrome rather than content. */
.site-nav .site-account { float: right; display: inline-flex; align-items: baseline; gap: 0.4rem; }
.site-nav .site-account form { display: inline; }
.site-nav .site-account .whoami { color: var(--text-dim); }
.site-nav .site-account button { background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent); font: inherit; text-decoration: none; }
.site-nav .site-account button:hover { text-decoration: underline; }

/* "wrong film?" — deliberately quiet. It should be findable by someone who
   just watched the wrong movie, not inviting to someone who hasn't. */
.archive-link .report-rip { background: none; border: none; padding: 0; cursor: pointer;
    color: var(--text-dim); font: inherit; font-size: inherit; text-decoration: underline dotted; }
.archive-link .report-rip:hover { color: #d4883a; }
.archive-link .report-rip:disabled { cursor: default; text-decoration: none; opacity: 0.6; }