:root {
  /* Bacon theme (dark) -- derived directly from the Daily Bacon logo's
     own colors (its blue disc, bacon-strip red-orange, and gold star)
     rather than an invented mood. See docs/plans/2026-09-07-theme-and-color-scheme-design.md. */
  --color-bg: #060d1e;
  --color-panel: #0e1a34;
  --color-panel-alt: #122240;
  --color-border: #2a4066;
  --color-border-strong: #3a557f;
  --color-divider: #1a2c4d;
  --color-text: #f5f2ea;
  --color-text-secondary: #c9d3e6;
  --color-text-muted: #93a8c4;
  --color-text-dim: #7891b3;
  /* Lightened from #5c7291 (3.94:1 against --color-bg, fails WCAG AA's
     4.5:1) to #6e84a3 (5.07:1) -- see docs/ACCESSIBILITY-AUDIT.md. */
  --color-text-faint: #6e84a3;
  --color-accent: #eab456;
  --color-actor-bg: #0d2c52;
  --color-actor-border: #2f93e0;
  --color-movie-bg: #3c0f0a;
  --color-movie-border: #e0401f;
  --color-danger: #f0a08a;
  --color-danger-border: #6b241a;
  --color-success: #6fcf97;

  /* Spacing scale -- every margin/padding/gap that's actually reused
     more than once maps to one of these five steps (a couple of
     genuine 2px nudges from the values that used to be scattered
     around, e.g. 6px/10px/14px gaps and paddings, folded into the
     nearest step below/above depending on whether that spot reads as
     "tight" or "roomy"). One-off large section breaks used exactly
     once (28px/40px/48px) are left as plain literals -- a token only
     earns its keep by being reused, and forcing a true one-off onto
     this scale wouldn't make anything more consistent. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* Border-radius scale. 50% for actual circles is a shape descriptor,
     not a size step, and stays a literal everywhere it's used.
     --radius-pill consolidates two values that both used to be
     hardcoded as "half of this specific element's own height" (7px
     for a 14px-tall progress bar, 11px for a 22px-tall select) --
     accidental drift from the same idea, not an intentional
     difference; 999px produces the identical pill shape regardless of
     the element's actual height, and keeps working if that height
     ever changes. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Type scale. Two near-duplicate sizes that served no distinct
     purpose from their neighbors (0.7rem and 0.8rem, both used on
     minor/secondary UI with no visual reason to differ from
     --font-size-xs/--font-size-sm) were folded in rather than kept as
     their own steps. */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.1rem;
}

:root[data-theme="light"] {
  --color-bg: #eef2fa;
  --color-panel: #ffffff;
  --color-panel-alt: #f5f8fd;
  --color-border: #cddaee;
  --color-border-strong: #b7c8e2;
  --color-divider: #e2e9f5;
  --color-text: #101a2e;
  --color-text-secondary: #33445e;
  --color-text-muted: #5b6f8c;
  /* Darkened from #6d7f9a (3.63:1 against --color-bg, fails WCAG AA's
     4.5:1) to #57667d (5.20:1) -- see docs/ACCESSIBILITY-AUDIT.md. */
  --color-text-dim: #57667d;
  /* Darkened from #8698b3 (2.62:1 against --color-bg) to #536785
     (5.13:1) -- same reason. */
  --color-text-faint: #536785;
  --color-accent: #b9791f;
  --color-actor-bg: #dbe9fb;
  --color-actor-border: #1f6fc4;
  --color-movie-bg: #fbe0da;
  --color-movie-border: #c23a1a;
  --color-danger: #a3311b;
  --color-danger-border: #e2b3a4;
  --color-success: #2f9e5f;
}

* {
  box-sizing: border-box;
}

/* Present in the accessibility tree (screen readers still read it,
   e.g. via aria-live) but removed from visual layout -- standard
   "visually hidden" pattern, not display:none/hidden (which pulls it
   from the accessibility tree too). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
}

#app {
  width: 100%;
  max-width: 480px;
  padding: var(--space-5) var(--space-4) 48px;
}

header {
  text-align: center;
  margin-bottom: var(--space-5);
}

#header-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}

header h1 {
  margin: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#site-logo {
  display: block;
  height: 48px;
  width: auto;
  flex-shrink: 0;
}

#site-lettering {
  display: block;
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

#header-top-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

#puzzle-date {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* Below the container's own 480px cap, the date competing for space in
   the middle of the logo/lettering-vs-controls row is what wraps it to
   3 lines and pushes the controls toward the edge (confirmed on a real
   Pixel 10). Moving it to its own full-width row under a first row that
   only has to fit the compact logo+lettering and the icon-sized
   controls fixes both at once, with no change above this width. */
@media (max-width: 480px) {
  #header-top {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  header h1 {
    order: 1;
  }

  #header-controls {
    order: 2;
  }

  #header-top-text {
    order: 3;
    flex: 1 1 100%;
    margin-top: var(--space-1);
  }
}

.headshot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}

/* A photo's own background can be near-white (many TMDB headshots
   are), which nearly disappears against the light theme's pale
   actor-chip background with no ring at all -- a fixed, saturated
   ring color (unrelated to the photo's own content) shows up
   reliably regardless of what's actually in the picture, unlike a
   ring drawn in the panel/background color would. */
li.actor .headshot,
#today-actor-photo {
  box-shadow: 0 0 0 2px var(--color-actor-border);
}

li.movie .headshot {
  box-shadow: 0 0 0 2px var(--color-movie-border);
}

#today-actor-photo {
  width: 56px;
  height: 56px;
  margin-top: var(--space-2);
}

#header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  flex-shrink: 0;
}

#how-to-play-btn,
#theme-toggle-btn,
#account-toggle-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-dim);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#language-select {
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
  padding: 0 var(--space-1);
  cursor: pointer;
}

#account-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#account-wrap {
  position: relative;
}

#account-menu {
  position: absolute;
  top: 30px;
  right: 0;
  width: 290px;
  max-width: calc(100vw - 48px);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 20;
  text-align: left;
}

#account-menu[hidden] {
  display: none;
}

#account-email {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  word-break: break-all;
}

#sign-out-btn {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

#magic-link-form {
  display: flex;
  gap: var(--space-2);
}

#magic-link-email {
  flex: 1;
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-panel-alt);
  color: var(--color-text);
  font-size: var(--font-size-base);
}

#magic-link-form button {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* Matches Google's official "filled_blue" Sign in with Google button spec
   (developers.google.com/identity/branding-guidelines): #0B57D0 background,
   white text, the unaltered official G-logo mark (web/google-g-logo.svg,
   extracted as-is from Google's asset bundle) with no background box behind
   it, and the documented padding (12px before the logo, 10px logo-to-text
   gap, 12px after the text). This is a fixed brand element -- it does NOT
   use theme tokens (including the spacing/radius/type scale above) and
   must look identical regardless of site theme. */
#google-signin-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #0b57d0;
  border-radius: 4px;
  color: #fff;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

#google-signin-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

#google-signin-link[hidden] {
  display: none;
}

#magic-link-feedback {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

#chain {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
}

#chain li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The newest pick is always the last DOM child (column-reverse puts it on
   top visually) -- scoping the animation to :last-child means only it
   slides in, while older picks just settle into place instantly. */
#chain li:last-child {
  animation: chain-item-in 0.3s ease-out;
}

@keyframes chain-item-in {
  0% {
    transform: translateY(-16px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

#chain li.actor,
#intro-example-chain li.actor {
  background: var(--color-actor-bg);
  border: 1px solid var(--color-actor-border);
}

#chain li.movie,
#intro-example-chain li.movie {
  background: var(--color-movie-bg);
  border: 1px solid var(--color-movie-border);
}

#search-panel {
  margin-bottom: var(--space-3);
}

#search-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

#search-box {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-panel-alt);
  color: var(--color-text);
  font-size: var(--font-size-md);
}

#search-results {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  border-radius: var(--radius-md);
  background: var(--color-panel-alt);
}

#search-results li {
  padding: var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#search-results .headshot {
  width: 24px;
  height: 24px;
}

#search-results li:last-child {
  border-bottom: none;
}

#search-results li:hover {
  background: var(--color-divider);
}

/* Keyboard highlight (ArrowDown/ArrowUp) -- real DOM focus stays on the
   search input (aria-activedescendant pattern), so this is the only
   visible indicator of which option Enter would pick. */
#search-results li.highlighted {
  background: var(--color-divider);
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

#action-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

#undo-btn,
#give-up-btn,
#dev-reroll-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
}

#undo-btn {
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-secondary);
}

#undo-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#give-up-btn {
  border: 1px solid var(--color-danger-border);
  background: transparent;
  color: var(--color-danger);
}

#penalty-note {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

#result-streak {
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

#result-streak[hidden] {
  display: none;
}

.streak-flame {
  height: 16px;
  width: auto;
}

#intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 1100;
}

#intro-overlay[hidden] {
  display: none;
}

#intro-card {
  position: relative;
  width: calc(100vw - 32px);
  max-width: 400px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-panel);
}

#intro-card h2 {
  margin: 0 0 var(--space-2);
}

#intro-card p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

#intro-close-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  font-size: var(--font-size-base);
  cursor: pointer;
  padding: 4px;
}

/* Deliberately more compact than #chain's real gameplay cards -- this is
   a reference example inside a modal that has to fit a phone screen,
   not something the player taps, so it doesn't need full touch-target
   sizing. */
#intro-example-chain {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

#intro-example-chain li {
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.intro-example-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-divider);
  font-size: var(--font-size-xs);
}

#intro-got-it-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-base);
}

#result-card {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-panel);
}

#result-card.celebrate {
  animation: result-card-pop 0.4s ease-out;
}

@keyframes result-card-pop {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  60% {
    transform: scale(1.03);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1000;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

#result-card h2 {
  margin: 0 0 4px;
}

#result-subtitle {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Two tabs ("Your path" / "Shortest") both render into this same list
   rather than keeping two parallel <ol>s -- only one is ever on screen
   at once, so there's nothing to keep visually in sync, and it's a
   payoff, not another copy of the same red/blue rows the player just
   played through above: no fill/border "chip" here, just the badge +
   portrait + name, threaded by a thin connecting line (a ::before on
   the list itself, running behind every node from the first badge's
   center to the last) so the whole thing reads as one continuous route
   rather than a compressed #chain. Only movie nodes get a number --
   the headline's "Connected in N steps" counts movie hops, not total
   nodes, so numbering every node (actors included) put a 5 next to a
   "2 steps" headline. Actor nodes keep the same colored circular badge
   with no digit in it. The number is CSS-generated content, not real
   DOM text -- #result-path li's textContent is asserted verbatim
   against the revealed path's display names in
   tests/test_frontend_e2e.py, so the visible number must never become
   part of it. */
#result-path {
  position: relative;
  counter-reset: step;
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Subtler than the nodes it threads together -- the badges/portraits are
   the thing the eye should land on, the line is just there to imply the
   route between them. */
#result-path::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 2px;
  background: var(--color-border-strong);
  opacity: 0.55;
}

#result-path li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
}

#result-path li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: bold;
  color: #fff;
}

#result-path li.actor::before {
  background: var(--color-actor-border);
}

#result-path li.movie::before {
  counter-increment: step;
  content: counter(step);
  background: var(--color-movie-border);
}

#result-score-header {
  margin: var(--space-4) 0 var(--space-2);
  font-weight: bold;
  font-size: var(--font-size-lg);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

#result-score-header[hidden] {
  display: none;
}

#result-score {
  margin: 0 0 var(--space-4);
}

.bacon-score-row {
  display: flex;
  gap: var(--space-2);
}

/* filled/empty share one silhouette and pixel dimensions (built from a
   shared alpha mask so a score like [bacon][bacon][bacon][empty][empty]
   never visually shifts width between the two) -- a fixed height plus
   auto width is enough, no object-fit box-fitting needed. */
.bacon-score-icon {
  height: 27px;
  width: auto;
}

/* A warm glow on the "reward" elements (earned bacon, the streak flame)
   reads as a deliberate highlight against the dark theme's near-black
   background; against the light theme's pale background the same glow
   just looks like a smudge, so it's dark-theme only -- matches the
   mockup exactly (no glow shown in its light-theme half). */
.bacon-score-icon--filled,
.streak-flame {
  filter: drop-shadow(0 0 5px rgba(224, 64, 31, 0.65));
}

:root[data-theme="light"] .bacon-score-icon--filled,
:root[data-theme="light"] .streak-flame {
  filter: none;
}

/* "Your path" vs. "Shortest" -- both tabs stay visible (not a
   dropdown/accordion) since there are only ever two, and switching
   should feel instant, not like opening something. The active tab is
   picked out with the same gold accent as the result-card heading
   rather than a full pill background, keeping this a quiet control
   under the headline rather than competing with it. When the player's
   own route already *is* the shortest one, the second tab becomes a
   disabled "Shortest possible" confirmation instead (see
   showResultCard/pathsMatch in app.js) -- green rather than muted, so
   it still reads as a small reward, not a dead control. */
#path-tabs {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

#path-tabs[hidden] {
  display: none;
}

#path-tabs button {
  padding: 0 0 var(--space-1);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

#path-tabs button[aria-selected="true"] {
  color: var(--color-accent);
  font-weight: 700;
  border-bottom-color: var(--color-accent);
}

#path-tabs button:disabled {
  color: var(--color-success);
  cursor: default;
}

#result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.result-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.result-action--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
  font-weight: bold;
}

.btn-icon {
  flex-shrink: 0;
}

/* A lightweight text link, not a third full-size button -- returning to
   an already-completed puzzle is the least important of the three
   result-card actions (share is primary, distribution is secondary),
   and giving it the same visual weight as the other two was
   overselling it, especially once it stacked full-width on a phone. */
#back-to-puzzle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: 4px 0;
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

#distribution-section {
  margin-top: 0;
}

#distribution-container {
  margin-top: var(--space-3);
}

#distribution-empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.distribution-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.distribution-row--mine .distribution-label,
.distribution-row--mine .distribution-count {
  color: var(--color-accent);
  font-weight: bold;
}

.distribution-label {
  width: 68px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.distribution-bar-track {
  flex: 1;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-panel-alt);
  overflow: hidden;
}

.distribution-row--mine .distribution-bar-fill {
  background: var(--color-accent);
}

.distribution-bar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.distribution-count {
  width: 36px;
  flex-shrink: 0;
  text-align: right;
  color: var(--color-text-secondary);
}

#share-feedback {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

#attribution {
  margin-top: 40px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-faint);
  text-align: center;
}

#attribution p {
  margin: 4px 0;
}

#attribution a {
  color: var(--color-text-dim);
}

/* Looks and reads exactly like the plain-text "Report a bug" link next
   to it, just a <button> underneath since it toggles content instead of
   navigating. */
#attribution-toggle {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--color-text-dim);
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

#attribution-detail {
  margin-top: 4px;
}

#attribution-detail[hidden] {
  display: none;
}

#tmdb-logo {
  height: 12px;
  width: auto;
  vertical-align: middle;
  margin-right: 4px;
  opacity: 0.8;
}

.legal-page {
  max-width: 640px;
  line-height: 1.6;
}

.legal-page h1 {
  margin-bottom: 4px;
}

.legal-page h2 {
  margin: 28px 0 var(--space-2);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.legal-page p,
.legal-page ul {
  color: var(--color-text-secondary);
}

.legal-page ul {
  padding-left: var(--space-4);
}

.legal-page li {
  margin-bottom: var(--space-2);
}

.legal-page a {
  color: var(--color-text-dim);
}

.legal-updated {
  color: var(--color-text-faint);
  font-size: var(--font-size-sm);
}

.legal-page code {
  background: var(--color-panel-alt);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}