/* Film Archive v0.5 — cinephile-minimal style.
 *
 * Principles: professional, cinephile, elegant, simple (v0.5). Warm off-white
 * background, serif for film titles and names, sans for UI chrome. One muted
 * accent. Generous whitespace. Empty is empty.
 */

:root {
  --bg:           #faf8f3;
  --bg-panel:     #f3efe6;
  --fg:           #1a1a1a;
  --fg-muted:     #6b6359;
  --fg-very-muted:#9a9189;
  --rule:         #e4ddd0;
  --accent:       #2a3a55;       /* deep ink blue */
  --accent-soft:  #4a6a94;
  --error:        #8a2a2a;
  --ok:           #2a6a3a;
  --gold-warm:    #c9a227;       /* v-0.9.2 — board edit-mode down-arrow */
  --chip-bg:      #ece4d3;
  --chip-fg:      #3a352c;
  --space-strip-to-rule: 6px;    /* v-0.9.2 — title-plate stats strip → bottom rule gap */

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          Arial, sans-serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --page-max: 72rem;
  --narrow-max: 44rem;
}

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); text-decoration: underline; }

/* ----- Topbar ----- */

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.topnav-mid {
  display: flex;
  justify-content: center;
}
.topbar .topnav {
  justify-self: end;
}
.search-button {
  padding: 6px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  background: var(--bg-panel);
  transition: color 120ms ease, border-color 120ms ease;
}
.search-button:hover {
  text-decoration: none;
  color: var(--accent);
  border-color: var(--accent-soft);
}

.logo {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--fg);
  font-weight: 500;
}
.logo:hover { text-decoration: none; color: var(--accent); }

.topnav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.navlink { color: var(--fg); font-size: 14px; }
.navlink.muted { color: var(--fg-muted); }
.navlink.navlink-icon {
  font-size: 21px;
  color: var(--fg-muted);
  text-decoration: none;
  line-height: 1;
  transform: translateY(-2px);
  display: inline-block;
}
.navlink.navlink-icon:hover { color: var(--fg); }

/* v-0.8.13 — Avatar sweep. Three sizes: small (24px) for inline use,
   medium (40px) for comments / inbox / followers, large (56px) for
   chat-thread headers. Blank fallback shows the user's initial. */

/* Comments — avatar-right layout. The comment text takes full-width
   left column; avatar floats on the right at 40px. */
.film-comment.film-comment--avatar-right,
.review-thread-item.review-thread-item--avatar-right {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.film-comment-text,
.review-thread-text {
  flex: 1;
  min-width: 0;
}
.film-comment-avatar-link,
.review-thread-avatar-link {
  flex-shrink: 0;
  display: block;
}
.film-comment-avatar,
.review-thread-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.film-comment-avatar--blank,
.review-thread-avatar--blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #eee);
  color: var(--fg-muted);
  font-family: var(--serif);
  font-size: 16px;
}

/* Reviews — author avatar inline before the username. */
.film-review-avatar-link {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.film-review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Article — author avatar inline. */
.article-author-avatar-link {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.article-author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}

/* Followers / following — avatar on the left of the user-card. */
.user-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.user-card-avatar-link { flex-shrink: 0; display: block; }
.user-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.user-card-avatar--blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #eee);
  color: var(--fg-muted);
  font-family: var(--serif);
  font-size: 18px;
}
.user-card-info { flex: 1; min-width: 0; }

/* Messages inbox — avatar on the left of each thread row. */
.thread-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.thread-list-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.thread-list-avatar--blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #eee);
  color: var(--fg-muted);
  font-family: var(--serif);
  font-size: 14px;
}
.thread-list-text { flex: 1; min-width: 0; }

/* Messages thread header — avatar before counterpart name. */
.thread-pane-header { display: flex; align-items: center; gap: 10px; }
.thread-pane-header-avatar-link { flex-shrink: 0; display: block; }
.thread-pane-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.thread-pane-header-avatar--blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #eee);
  color: var(--fg-muted);
  font-family: var(--serif);
  font-size: 16px;
}

/* List cards (non-official only) — small inline avatar with the owner. */
.list-tab-owner-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* v-0.8.13 — Share dropdown + friend picker. */
.share-wrap { display: inline-block; position: relative; }
.share-dropdown { position: relative; display: inline-block; }
.share-dropdown > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
}
.share-dropdown > summary::-webkit-details-marker { display: none; }
.share-dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg, #fff);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px;
  min-width: 220px;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-top: 4px;
}
.share-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
.share-option:hover { background: var(--bg-soft, #f0f0f0); }

.share-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 100;
}

.share-friend-dialog {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 24px;
  max-width: 460px;
  width: 90%;
}
.share-friend-search {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: inherit;
  margin-bottom: 6px;
}
.share-friend-results {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg, #fff);
}
.share-friend-result {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
}
.share-friend-result:hover { background: var(--bg-soft, #f0f0f0); }

/* v-0.8.13 — Import preview list. */
.import-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.import-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.import-preview-row--unmatched { opacity: 0.7; }
.import-preview-row input[type=checkbox] { flex-shrink: 0; transform: scale(1.2); }
.import-preview-poster {
  width: 48px;
  height: 72px;
  flex-shrink: 0;
  background: var(--bg-soft, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--fg-muted);
  border-radius: 4px;
  overflow: hidden;
}
.import-preview-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.import-preview-text { flex: 1; min-width: 0; }
.import-preview-title { margin: 0; font-size: 14px; }

/* v-0.8.13 — Settings sidebar layout.
   v-0.8.14: aligned to the same far-left fixed-position model as
   .page-sidebar (Archive/Profile) so all three sidebars sit at
   viewport-left, not inset within the centered page. */
.settings-page {
  display: block;
  position: relative;
}
.settings-sidebar {
  position: fixed;
  left: 0;
  top: 51px;
  bottom: 0;
  width: 165px;
  border-right: 1px solid var(--rule);
  padding: 16px 12px;
  background: var(--bg);
  overflow-y: auto;
  z-index: 10;
}
.settings-sidebar-heading {
  font-family: var(--serif);
  font-size: 18px;
  margin: 0 0 14px;
  color: var(--fg);
}
.settings-sidebar-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.settings-sidebar-items li { margin: 0; padding: 0; }
.settings-sidebar-items a {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--fg-muted);
  font-family: var(--sans);
  font-size: 14px;
  transition: background 0.1s;
}
.settings-sidebar-items a:hover {
  background: var(--bg-soft, #f0f0f0);
  color: var(--fg);
}
.settings-sidebar-items a.active {
  background: var(--bg-soft, #f0f0f0);
  color: var(--fg);
  font-weight: 600;
  border-left: 3px solid #b9272e;
}
.settings-content { display: block; min-width: 0; }
@media (max-width: 720px) {
  .settings-sidebar {
    position: static;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
}
.user-chip {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-panel);
  font-size: 13px;
}
.user-chip:hover { text-decoration: none; border-color: var(--accent-soft); color: var(--accent); }

.inline-form { display: inline; margin: 0; padding: 0; }
.linklike {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--fg-muted); font-size: 14px; cursor: pointer;
  font-family: inherit;
}
.linklike:hover { color: var(--accent); text-decoration: underline; }

/* ----- Page container ----- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px 24px 120px;
}
.page.narrow {
  max-width: var(--narrow-max);
}

/* ----- Home ----- */

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 18vh;
}

.home-search {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-search input[type="search"] {
  width: 100%;
  font-family: var(--serif);
  font-size: 22px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--fg);
  border-radius: 2px;
  background: transparent;
}
.home-search input[type="search"]:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.scope-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.scope-pills label {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: 13px;
  cursor: pointer;
  color: var(--fg-muted);
  background: transparent;
  transition: all 0.1s;
}
.scope-pills input[type="radio"] { display: none; }
.scope-pills input[type="radio"]:checked + label {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.home-advanced {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 6px;
}

.typeahead {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: none;
  max-height: 60vh;
  overflow-y: auto;
}
.typeahead-section {
  padding: 4px 0;
}
.typeahead-section + .typeahead-section {
  border-top: 1px solid var(--rule);
}
.typeahead-header {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-very-muted);
  padding: 6px 14px 2px;
}
.typeahead-empty {
  padding: 12px 14px;
  color: var(--fg-muted);
  font-style: italic;
  font-size: 13px;
}

/* ----- Row list (search results, filmography, archive lists) ----- */

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 16px;
  color: var(--fg-muted);
  font-size: 13px;
}

.row-list { list-style: none; padding: 0; margin: 0; }
.row {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}
.row-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 80px;
  background: var(--bg-panel);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-very-muted);
  font-size: 10px;
}
.row-thumb.small { width: 40px; height: 56px; }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-body { flex: 1; min-width: 0; }
.row-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 2px;
  font-weight: 500;
}
.row-title a { color: var(--fg); }
.row-title a:hover { color: var(--accent); text-decoration: none; }
.pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: middle;
  font-weight: 600;
}
.pill-director { background: var(--accent); color: var(--bg); }
.row-meta {
  font-size: 13px;
  color: var(--fg-muted);
}
.row-meta span + span::before { content: " · "; color: var(--fg-very-muted); }
.row-right {
  flex-shrink: 0;
  color: var(--fg-muted);
  font-size: 13px;
  text-align: right;
}

/* ----- Typeahead row (denser) ----- */

.th-row {
  display: flex;
  gap: 10px;
  padding: 8px 14px;
  align-items: center;
  color: var(--fg);
}
.th-row:hover { background: var(--bg-panel); text-decoration: none; color: var(--fg); }
.th-title { font-family: var(--serif); font-size: 15px; }
.th-meta  { color: var(--fg-muted); font-size: 12px; }

/* ----- Forms ----- */

.form-card {
  max-width: 28rem;
  margin: 48px auto;
  padding: 32px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.form-card h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 6px;
}
.form-card .muted-line {
  color: var(--fg-muted);
  font-size: 13px;
  margin-bottom: 18px;
}
.form-card label {
  display: block;
  margin: 14px 0 4px;
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-card input[type="text"],
.form-card input[type="password"],
.form-card input[type="number"],
.form-card input[type="search"],
.form-card textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 15px;
  background: var(--bg);
  font-family: inherit;
  color: var(--fg);
}
.form-card input:focus, .form-card textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
}
.form-card button[type="submit"],
.btn-primary {
  margin-top: 20px;
  padding: 10px 18px;
  font-size: 14px;
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:hover { background: var(--accent); }
.btn-secondary {
  padding: 6px 12px;
  font-size: 13px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--accent-soft); color: var(--accent); }

.btn-danger {
  padding: 6px 12px;
  font-size: 13px;
  background: transparent;
  color: #d23;
  border: 1px solid #d23;
  border-radius: 2px;
  cursor: pointer;
}
.btn-danger:hover { background: #d23; color: white; }

.danger-zone {
  margin-top: 32px;
  padding: 16px;
  border: 1px solid #d23;
  border-radius: 4px;
  background: #fff7f7;
}
.danger-zone h3 { margin: 0 0 12px 0; color: #d23; font-size: 14px; }

.form-error {
  margin: 12px 0;
  padding: 10px 14px;
  background: #f8e5e5;
  color: var(--error);
  border-left: 3px solid var(--error);
  font-size: 13px;
}
.form-notice {
  margin: 12px 0;
  padding: 10px 14px;
  background: #e5f3e8;
  color: var(--ok);
  border-left: 3px solid var(--ok);
  font-size: 13px;
}
.form-help {
  color: var(--fg-muted);
  font-size: 12px;
  margin-top: 4px;
}

/* ----- Film / person page ----- */

.object-header {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  align-items: flex-start;
}
.object-poster {
  flex-shrink: 0;
  width: 220px;
  background: var(--bg-panel);
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-very-muted); font-size: 12px;
}
.object-poster img { width: 100%; height: 100%; object-fit: cover; }

/* v-0.9.5 — wraps poster + relocated public counts as one vertical unit. */
.object-poster-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.object-poster-caption {
  width: 100%;
  margin-top: 12px;
  text-align: center;
  color: var(--fg);
  font-size: 14px;
  font-family: var(--sans);
  line-height: 1.5;
}
.object-poster-caption .pcap-line { display: block; margin-top: 2px; }
.object-poster-caption .pcap-line:first-child { margin-top: 0; }
.object-poster-caption strong {
  font-size: 16px;
  font-family: var(--serif);
  font-weight: 500;
}
.object-info { flex: 1; min-width: 0; }
.object-title {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 6px;
}
.object-original {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--fg-muted);
  font-style: italic;
  margin: 0 0 14px;
}
.object-meta {
  color: var(--fg-muted);
  font-size: 14px;
  margin-bottom: 14px;
}
.object-meta span + span::before { content: " · "; color: var(--fg-very-muted); }

/* v-0.8.16: tightened from 40px to 28px so the vertical rhythm between
   sections (notably Related Films → Lists on the film page) reads as
   one page rather than spaced-apart blocks. */
.object-section { margin: 28px 0; }
.object-section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.empty-note { color: var(--fg-very-muted); font-style: italic; font-size: 14px; }

.synopsis {
  max-width: 40rem;
  line-height: 1.6;
  font-size: 15px;
}

.cast-grid, .crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cast-grid li, .crew-grid li {
  padding: 6px 0;
  font-size: 14px;
}
.cast-grid .char {
  color: var(--fg-muted);
  font-size: 13px;
  font-style: italic;
}

.crew-role {
  color: var(--fg-very-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  margin-top: 16px;
  margin-bottom: 6px;
}

/* ----- Archive state widget (on film page) ----- */

.archive-state {
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  padding: 16px;
  border-radius: 2px;
  margin-top: 16px;
}
.archive-state h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.archive-state .state-line {
  font-size: 14px;
  margin-bottom: 10px;
}
.grade-buttons {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.grade-btn {
  padding: 4px 8px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  color: var(--fg);
}
.grade-btn:hover { border-color: var(--accent); color: var(--accent); }
.grade-btn.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.grade-row, .rating-row { margin-top: 10px; }

/* ----- /archive page: header + rubric popover + per-row grade widget ----- */

.archive-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.archive-header h1.page-title { margin: 0; }

.rubric-popover { position: relative; }
.rubric-popover > summary {
  list-style: none;
  cursor: pointer;
}
.rubric-popover > summary::-webkit-details-marker { display: none; }
.rubric-button {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fg-muted);
  background: var(--bg);
}
.rubric-button:hover { border-color: var(--accent); color: var(--accent); }
.rubric-popover[open] .rubric-button {
  border-color: var(--fg);
  color: var(--fg);
}
.rubric-body {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  /* v-0.8.16: bumped 380→480 for two-column layout breathing room. */
  width: 480px;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
/* v-0.8.16: dl is laid out as a two-column grid — grade label on left,
   description on right, baseline-aligned, with a subtle tier divider
   above each new tier (A+, B+, C+, D+, F).
   The 16 grades come in groups of 3 (stars, A, B, C, D) plus F = 16th.
   nth-of-type(3n+1) hits items 1, 4, 7, 10, 13, 16; we skip the first
   (SSS) so the divider appears above A+, B+, C+, D+, F. */
.rubric-body dl {
  margin: 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: baseline;
}
.rubric-body dt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  margin: 0;
  letter-spacing: 0.02em;
}
.rubric-body dd {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.rubric-body dt:nth-of-type(3n+1):not(:first-of-type),
.rubric-body dd:nth-of-type(3n+1) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

/* v-0.9.3 — per-row theater/home widget on /archive watched tab.
   Mirrors the archive-grade <details> pattern. */
.archive-theater { display: inline-block; }
.archive-theater-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.archive-theater-details > summary::-webkit-details-marker { display: none; }
.archive-theater-current {
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg);
}
.archive-theater-current--theater { color: var(--fg); border-color: var(--fg); }
.archive-theater-buttons {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
}
.theater-btn {
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
}
.theater-btn:hover { border-color: var(--accent); color: var(--accent); }
.theater-btn.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.mw-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* Per-row grade widget on /archive watched tab */
.archive-grade { display: inline-block; }
.archive-grade-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.archive-grade-details > summary::-webkit-details-marker { display: none; }
.archive-grade-current {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--fg);
}
.archive-grade-action {
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg);
}
.archive-grade-details:hover .archive-grade-action { border-color: var(--accent); color: var(--accent); }
.archive-grade-empty { color: var(--fg-muted); }
.archive-grade-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  justify-content: flex-end;
  max-width: 260px;
}
.axis-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.axis-sub {
  font-size: 10px;
  margin-left: 6px;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.75;
}

.rating-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.rating-btn {
  padding: 4px 9px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  color: var(--fg);
  min-width: 28px;
}
.rating-btn:hover { border-color: var(--accent); color: var(--accent); }
.rating-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ----- Public film stats (film page) ----- */

.public-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 12px 0 8px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  font-size: 14px;
  font-family: var(--sans);
  align-items: center;
}
.public-stat { color: var(--fg); }
.public-stat strong { font-size: 16px; font-family: var(--serif); }
.public-stat.muted { color: var(--fg-muted); }

/* v-0.9.5 — Friends section trailing the global rating/count stats.
   Sits inside .public-stats, separated from the global side by the
   chip's outer 18px gap + a 6px left margin = ~24px visual grouping.
   `flex-shrink: 0` on the section + its inner spans keeps the row
   intact instead of letting individual `3 ratings` spans wrap to
   `3` / `ratings`. */
.public-stats-friends-section {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.public-stats-friends-section .public-stat { flex-shrink: 0; }
.public-stats-friends-label {
  color: var(--fg-muted);
  font-weight: 500;
  flex-shrink: 0;
}

/* v-0.9.5 — Avatar stack (chip + film-feed friends pill).
   Reference: Letterboxd "n fans" pattern. 24px circular disks with a
   page-bg hairline border, ~⅓ overlap so the stack reads as a small
   group without obscuring faces. */
.avatar-stack {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.avatar-stack .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--bg);
  background: var(--bg-panel);
  color: var(--fg-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-stack .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-stack .avatar + .avatar { margin-left: -7px; }

/* Smaller sizing inside the toggle pill — keeps pill height comfortable. */
.film-feed-toggle-btn .avatar-stack .avatar {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.film-feed-toggle-btn .avatar-stack .avatar + .avatar { margin-left: -6px; }

/* Avatar stack inside the *active* black pill: mirror border + fallback fill. */
.film-feed-toggle-btn--on .avatar-stack .avatar {
  border-color: #222;
  background: #3a3a3a;
  color: #fff;
}

/* Mobile degrade — at very narrow viewports drop avatars from 3 to 2 to
   keep the chip from blowing out width. Container queries were the original
   plan but `container-type: inline-size` on an inline-flex parent collapsed
   the children to zero width; @media is fine here. */
@media (max-width: 480px) {
  .avatar-stack .avatar:nth-child(n+3) { display: none; }
}
@media (max-width: 360px) {
  .avatar-stack .avatar:nth-child(n+2) { display: none; }
}

/* ----- Advanced search layout ----- */

.advanced-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
}
.advanced-sidebar {
  font-size: 13px;
}
.advanced-sidebar fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}
.advanced-sidebar legend {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-very-muted);
  margin-bottom: 6px;
}
.advanced-sidebar input[type="text"],
.advanced-sidebar input[type="number"],
.advanced-sidebar input[type="search"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 2px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg);
}
.range-row { display: flex; gap: 6px; }
.range-row input { width: 50%; }

.shortcut-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.shortcut-chip {
  padding: 2px 9px;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}
.shortcut-chip:hover { border-color: var(--accent); color: var(--accent); }

.chip-picker {
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.chip-selected { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-selected:empty { display: none; }
.chip-tag {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 8px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-radius: 999px;
  font-size: 12px;
}
.chip-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 4px;
  color: inherit;
  font-family: inherit;
}
.chip-remove:hover { color: var(--accent); }
.chip-input {
  width: 100%;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.advanced-sidebar .check-list {
  list-style: none; padding: 0; margin: 0;
  max-height: 12rem; overflow-y: auto;
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: 4px 0;
}
.advanced-sidebar .check-list li {
  padding: 2px 8px;
  font-size: 13px;
}
.advanced-sidebar .check-list label {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  text-transform: none; letter-spacing: 0; color: var(--fg);
}
.advanced-sidebar .radio-inline { display: flex; gap: 10px; }
.advanced-sidebar .radio-inline label {
  display: inline-flex; gap: 4px; align-items: center;
  text-transform: none; letter-spacing: 0; color: var(--fg);
  font-size: 13px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.chip {
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
}
.chip .x {
  display: inline-flex; width: 14px; height: 14px;
  align-items: center; justify-content: center;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1;
}
.chip:hover .x { color: var(--error); }
.chip:hover { text-decoration: none; }

.result-count {
  font-size: 13px;
  color: var(--fg-muted);
}

.pagination {
  display: flex; justify-content: space-between;
  align-items: center;
  margin: 24px 0;
  color: var(--fg-muted);
  font-size: 13px;
}
.pagination a { color: var(--accent); }
.pagination .disabled { color: var(--fg-very-muted); cursor: default; pointer-events: none; }

/* ----- Tabs ----- */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.tabs a {
  padding: 8px 14px;
  color: var(--fg-muted);
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a.active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}
.tabs a:hover { text-decoration: none; color: var(--fg); }

/* ----- Admin tables ----- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0 32px;
}
.stat-card {
  padding: 20px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  border-radius: 2px;
}
.stat-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.stat-card .value {
  font-family: var(--serif);
  font-size: 30px;
  margin-top: 4px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th, .data-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.data-table th {
  font-weight: 600;
  color: var(--fg-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.data-table tr:hover { background: var(--bg-panel); }

/* ----- Misc ----- */

h1.page-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 8px;
}
.page-subtitle { color: var(--fg-muted); font-size: 14px; margin-bottom: 20px; }

.did-you-mean {
  margin: 8px 0 16px;
  padding: 8px 12px;
  background: #fff4d9;
  border-left: 3px solid #c68d1c;
  color: var(--fg);
  font-size: 13px;
}

/* ----- Mobile ----- */

@media (max-width: 720px) {
  .page { padding: 16px 16px 60px; }
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .topnav { gap: 10px; font-size: 13px; }
  .navlink { font-size: 13px; }

  .home-hero { padding-top: 12vh; }
  .home-search input[type="search"] { font-size: 18px; }

  .object-header { flex-direction: column; gap: 18px; }
  .object-poster { width: 60%; max-width: 200px; }
  .object-poster-column { width: 60%; max-width: 200px; }
  .object-poster-column .object-poster { width: 100%; max-width: none; }
  .object-title { font-size: 28px; }

  .advanced-layout { grid-template-columns: 1fr; }
  .advanced-sidebar { order: 2; }

  .cast-grid, .crew-grid { grid-template-columns: 1fr; }

  .row-thumb { width: 44px; height: 64px; }
  .row-title { font-size: 17px; }
}

/* ----- Collections home (v0.6.1: 3-up near-square cards) ----- */

.collections-home {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 4px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.collections-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.collection-block-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px 16px 14px;
  background: var(--bg);
}

.collection-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.collection-block-head h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}
.collection-block-head h2 a { color: var(--fg); }
.collection-block-head h2 a:hover { color: var(--accent); text-decoration: none; }

.collection-block-more {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.collection-block-more:hover { color: var(--accent); text-decoration: none; }

.collection-block-desc {
  margin: 8px 0 12px;
  color: var(--fg-muted);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.4;
}

.collection-block-empty {
  margin: 14px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
  font-style: italic;
}

.collection-block-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 12px;
}

.collection-block-poster {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
}
.collection-block-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.collection-block-poster .poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--fg-muted);
  font-size: 28px;
}

.collection-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  counter-reset: collection-rank 1;
}

.collection-block-row {
  counter-increment: collection-rank;
  font-size: 13px;
  line-height: 1.3;
  padding: 2px 0;
  border-bottom: 1px dotted var(--rule);
}
.collection-block-row:last-child { border-bottom: 0; }
.collection-block-row a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--fg);
}
.collection-block-row a:hover { color: var(--accent); text-decoration: none; }
.collection-block-row a::before {
  content: counter(collection-rank);
  font-family: var(--sans);
  font-size: 10px;
  color: var(--fg-muted);
  min-width: 12px;
}

.collection-block-title {
  font-family: var(--serif);
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.collection-block-year {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--fg-muted);
  white-space: nowrap;
}

.poster-placeholder {
  color: var(--fg-muted);
  font-size: 28px;
}

@media (max-width: 980px) {
  .collections-home { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .collections-home { grid-template-columns: 1fr; gap: 16px; }
  .collection-block-head h2 { font-size: 17px; }
}

/* ----- Import banner + form ----- */

.import-banner {
  border: 1px solid var(--accent-soft);
  background: var(--bg-panel);
  border-radius: 2px;
  padding: 14px 18px;
  margin: 12px 0 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.import-banner p { margin: 0; max-width: 640px; }

.radio-fieldset {
  border: 1px solid var(--rule);
  padding: 10px 14px;
  margin: 8px 0 14px;
  border-radius: 2px;
}
.radio-fieldset legend {
  padding: 0 6px;
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.radio-fieldset label {
  display: inline-block;
  margin-right: 18px;
  font-size: 14px;
}
.unmatched-block {
  margin: 12px 0;
  border-left: 2px solid var(--rule);
  padding-left: 12px;
}

.export-help {
  margin: 10px 0;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 13px;
}
.export-help > summary {
  cursor: pointer;
  color: var(--fg);
  font-weight: 500;
}
.export-help ol {
  margin: 8px 0 4px 18px;
  color: var(--fg-muted);
}
.export-help ol li { margin: 3px 0; }
.export-help code {
  font-family: var(--mono, monospace);
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 12px;
}

/* ----- User profile v0.6.1: decked cards + statistics panel ----- */

.profile-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: visible;
}
.profile-stat-left { flex-shrink: 0; }

.profile-deck {
  position: relative;
  height: 150px;
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.profile-deck-card {
  position: absolute;
  top: 0;
  right: calc(var(--i) * 44px);
  width: 100px;
  height: 150px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  overflow: hidden;
  transform: rotate(calc(var(--i) * -2deg));
  transform-origin: bottom center;
  transition: transform 0.18s ease, top 0.18s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.profile-deck-card:hover {
  transform: rotate(0deg) translateY(-4px);
  z-index: 999 !important;
}
.profile-deck-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-stats {
  margin: 28px 0;
  display: grid;
  /* v-0.9.4: constrain the grid track to the parent's content width.
     `minmax(0, 1fr)` is the canonical fix for grid items that would
     otherwise be sized by their intrinsic content (here, the activity
     chart's wide SVG) and push the page horizontally. */
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.profile-activity {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  /* v-0.9.4: cap to the column width so a wide year-span chart doesn't push
     the surrounding profile page wider than the viewport. The inner SVG
     keeps its natural width and scrolls horizontally inside the container. */
  max-width: 100%;
  min-width: 0;
}
.profile-activity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.profile-activity-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
}
.profile-activity-toggle a {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
}
.profile-activity-toggle a.active {
  color: var(--fg);
  border-color: var(--rule);
}
.profile-activity-toggle a:hover { text-decoration: none; color: var(--accent); }
/* v-0.9.9 — scope label replaces the old year/month toggle (the Stats
   scope tab now drives the plot). Plot is pinned to the top of the
   Stats subpage. */
.profile-activity { margin-bottom: 22px; }
.profile-activity-scope {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.profile-activity-scroll {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  /* v-0.9.4: bound to the parent's content width so overflow-x: auto can
     actually trigger the scroll affordance instead of letting the SVG push
     the parent (and the entire profile page) wider. */
  max-width: 100%;
  min-width: 0;
}
.profile-activity-scroll svg { display: block; }

.profile-top-people {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.profile-top-people-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.profile-top-person {
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
}
.profile-top-person a { color: inherit; text-decoration: none; }
.profile-top-person a:hover { text-decoration: underline; }
.profile-top-person-photo {
  aspect-ratio: 2/3;
  width: 100%;
  max-width: 88px;  /* v-0.8.14: shrink photo, keep text font-size unchanged */
  object-fit: cover;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  display: block;
  margin: 0 auto 6px;
}
.profile-top-person-initials {
  aspect-ratio: 2/3;
  width: 100%;
  max-width: 88px;  /* v-0.8.14: matches photo */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  color: var(--fg-muted);
  font-family: var(--sans);
  font-size: 22px;
  letter-spacing: 0.08em;
  margin: 0 auto 6px;
}
.profile-top-person-name {
  display: block;
  font-weight: 600;
  line-height: 1.25;
}
.profile-top-person-count {
  display: block;
  color: var(--fg-muted);
  font-family: var(--sans);
  font-size: 11px;
  margin-top: 2px;
}
.profile-top-block h4,
.profile-breakdown-block h4 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin: 0 0 8px;
  font-weight: 600;
}
.top-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: top-rank 0;
}
.top-list li {
  counter-increment: top-rank;
  font-family: var(--serif);
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--rule);
}
.top-list li::before {
  content: counter(top-rank) ". ";
  color: var(--fg-muted);
}
.top-list li:last-child { border-bottom: 0; }

.profile-breakdowns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bar-list { list-style: none; padding: 0; margin: 0; }
.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 30px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12.5px;
}
.bar-label {
  color: var(--fg);
  font-family: var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-track {
  background: var(--bg-panel);
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  opacity: 0.75;
}
.bar-count {
  color: var(--fg-muted);
  font-family: var(--sans);
  font-size: 11px;
  text-align: right;
}

@media (max-width: 820px) {
  .profile-top-people { grid-template-columns: 1fr; }
  .profile-breakdowns { grid-template-columns: 1fr; }
  .profile-deck { display: none; }
}

/* ---- Archive layout toggle ---- */
.archive-layout-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 12px;
}
.archive-layout-toggle .archive-layout-label {
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.archive-layout-toggle a {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--fg);
  text-decoration: none;
}
.archive-layout-toggle a:hover { background: var(--bg-panel); }
.archive-layout-toggle a.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* ---- Archive load-more button ---- */
.archive-load-more {
  list-style: none;
  padding: 16px 0;
  text-align: center;
  border-bottom: 0 !important;
}
.load-more-btn {
  font-family: var(--sans);
  font-size: 13px;
  padding: 10px 22px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  color: var(--fg);
  cursor: pointer;
  border-radius: 3px;
}
.load-more-btn:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* ---- Archive grid layout (10 per row) ---- */
.archive-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
}
.archive-grid-cell { position: relative; }
.archive-grid-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.archive-grid-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.archive-grid-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.archive-grid-poster-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 20px;
  color: var(--fg-muted);
}
.archive-grid-grade {
  position: absolute;
  right: 4px;
  bottom: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .archive-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
  .archive-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Archive detailed table ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.archive-table {
  min-width: 1100px;
  font-size: 12px;
  table-layout: fixed;
}
.archive-table th {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 1;
  white-space: nowrap;
}
.archive-table td {
  vertical-align: top;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archive-table td a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--fg-muted);
}
.archive-table td a:hover { border-bottom-color: var(--fg); }

/* -------------------------------------------------------------------------
 * v0.7 — Import loading, top-people resize, collection row rating,
 * collection rect tabs, board grid/pool, watch plan, social (like/modal).
 * ------------------------------------------------------------------------- */

/* Import in-progress card (shown during form submission) */
.import-progress {
  margin-top: 24px;
}
.import-progress-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 32px;
  background: var(--bg-panel);
  text-align: center;
}
.import-progress-card h2 {
  margin: 12px 0 8px 0;
  font-family: var(--serif);
  font-size: 22px;
}
.import-progress-card p {
  margin: 8px 0;
  line-height: 1.5;
}
.import-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: import-spin 0.9s linear infinite;
}
@keyframes import-spin {
  to { transform: rotate(360deg); }
}

/* Top directors/actors (v0.7) — shrink pictures, increase gap, grow name */
/* v-0.8.14: tighten cell spacing per Holden — same-row gap halved
   (24 → 12), same-column gap to 80% (24 → 19.2). */
.profile-top-people-row {
  column-gap: 12px;
  row-gap: 19.2px;
}
.profile-top-person {
  max-width: 120px;
  margin: 0 auto;
  font-size: 15px;
}
.profile-top-person-name {
  font-size: 15px;
}
.profile-top-person-count {
  font-size: 12px;
}

/* Collection row public rating */
.row-public-rating {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--fg-muted);
  margin-left: 12px;
}

/* v0.8.6 — small overlay stamps on grid posters (collection/list grid). */
.poster-watched-stamp {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.7);
  color: #6f6;
  font-size: 14px; line-height: 1;
  padding: 3px 6px; border-radius: 8px;
  pointer-events: none;
}
.poster-public-rating {
  position: absolute;
  bottom: 4px; left: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: var(--serif);
  font-size: 12px; line-height: 1;
  padding: 3px 5px; border-radius: 6px;
  pointer-events: none;
}
.archive-grid-poster { position: relative; }

/* v0.8.6 — table watched indicator for collection/list table layouts. */
.watched-tick { color: #4a4; font-weight: 700; }
.watched-grade-inline {
  margin-left: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  font-family: var(--serif);
}

/* Collection home rect tabs (v0.7 new shape) */
.collection-block-card--rect {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.15s ease;
}
.collection-block-card--rect:hover {
  background: var(--bg-soft, #f6f3eb);
}
.collection-block-card--rect h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  letter-spacing: 0.01em;
}
.collection-year-picker {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.collection-year-picker select {
  font-family: var(--sans);
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
}

/* Board grid + slots + pool */
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.board-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}
@media (max-width: 980px) {
  .board-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); }
}
.board-slot {
  position: relative;
  aspect-ratio: 2/3;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-panel);
  overflow: hidden;
}
.board-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.board-slot--empty {
  border: 2px dashed var(--rule);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-very-muted);
  font-size: 12px;
}
.board-slot-rank {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
}
.board-slot-grade {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
}
.board-slot-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.board-slot:hover .board-slot-actions { opacity: 1; }
.board-slot-actions button {
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  width: 22px;
  height: 22px;
  font-size: 11px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
}
.board-slot-actions button:hover { background: rgba(0,0,0,0.9); }

.board-pool {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.board-pool-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.board-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}
.board-pool-item {
  text-align: center;
}
.board-pool-item img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.board-pool-item .btn-link {
  margin-top: 6px;
  font-size: 12px;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
}
.board-pool-item .btn-link:hover { text-decoration: underline; }

.board-locked {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  background: var(--bg-panel);
}
.board-locked h2 {
  font-family: var(--serif);
  font-size: 28px;
  margin-bottom: 12px;
}
.board-locked .progress {
  max-width: 320px;
  margin: 20px auto 0;
}
.board-locked .progress-bar {
  height: 6px;
  background: var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.board-locked .progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s;
}

.board-unlock-toast dialog,
dialog.board-unlock-toast {
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 32px 40px;
  max-width: 480px;
  text-align: center;
  background: var(--bg);
}
dialog.board-unlock-toast::backdrop {
  background: rgba(0,0,0,0.4);
}
dialog.board-unlock-toast h2 {
  font-family: var(--serif);
  font-size: 28px;
  margin: 0 0 8px 0;
}

/* Watch plan — dim unwatched, green glow watched (v-0.9.1) */
.watch-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.watch-plan-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.watch-plan-item--unwatched {
  opacity: 0.4;
  filter: grayscale(0.6);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.watch-plan-item--unwatched:hover {
  opacity: 0.75;
  filter: grayscale(0.15);
}
.watch-plan-item--watched {
  box-shadow: 0 0 12px 3px rgba(80, 200, 120, 0.55);
  border-radius: 4px;
}
/* Film/person like button */
.like-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--fg-very-muted);
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}
.like-btn:hover { color: #c0504d; }
.like-btn.liked { color: #c0504d; }
.like-count {
  font-size: 13px;
  color: var(--fg-muted);
}

/* Report link */
.report-link {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  color: var(--fg-very-muted);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg);
}
.report-link:hover {
  color: var(--error);
  border-color: var(--error);
}

/* Comment/review modal */
dialog.comment-review-dialog {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 640px;
  width: 90vw;
  background: var(--bg);
}
dialog.comment-review-dialog::backdrop { background: rgba(0,0,0,0.4); }
dialog.comment-review-dialog .tab-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
dialog.comment-review-dialog .tab-switch button {
  background: none;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted);
}
dialog.comment-review-dialog .tab-switch button.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
dialog.comment-review-dialog textarea {
  width: 100%;
  min-height: 160px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14px;
  resize: vertical;
}
dialog.comment-review-dialog .rich-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
dialog.comment-review-dialog .rich-toolbar button {
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--sans);
  border-radius: 3px;
}
dialog.comment-review-dialog .rich-toolbar button:hover {
  background: var(--chip-bg);
}

/* Bottom comments/reviews feed */
.film-feed {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.film-feed-switch {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.film-feed-switch button {
  background: none;
  border: 1px solid var(--rule);
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 3px;
  color: var(--fg-muted);
}
.film-feed-switch button.active {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--bg-panel);
}
.film-feed-item {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.film-feed-item:last-child { border-bottom: none; }
.film-feed-meta {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

/* Archive entry buttons — All-Time Board, Watch Plan */
.archive-entry-buttons {
  display: flex;
  gap: 10px;
  margin: 8px 0 20px;
}
.archive-entry-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  background: var(--bg);
  transition: background 0.15s;
}
.archive-entry-btn:hover {
  background: var(--bg-soft, #f6f3eb);
}

/* Board page header / action bar */
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.board-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.board-actions form { margin: 0; }
.board-sub-link {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg-muted);
}
.board-public-note {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 16px;
}
.board-section-title {
  font-family: var(--serif);
  font-size: 20px;
  margin: 24px 0 12px;
}
.board-count {
  color: var(--fg-muted);
  font-weight: normal;
  font-size: 14px;
}
.board-grid-wrap { margin-bottom: 32px; }
.board-grid-wrap ol.board-grid { list-style: none; margin: 0; padding: 0; }
.board-rank {
  position: absolute;
  top: 4px; left: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 2px;
}
.board-grade {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 2px;
}
.board-slot { position: relative; }
.board-slot-poster img,
.board-pool-poster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.board-slot-title {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.2;
  margin-top: 4px;
  max-height: 2.4em;
  overflow: hidden;
}
.board-slot-empty-label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fg-muted);
  text-align: center;
  padding: 30px 0;
}
.board-slot-actions {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 4px;
}
.board-slot-actions form { margin: 0; }
.board-slot-actions button {
  font-family: var(--sans);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  background: var(--bg);
  cursor: pointer;
}
.board-slot-actions button:disabled { opacity: 0.3; cursor: default; }

/* Pool */
.board-pool-wrap { margin-top: 32px; }
.board-pool {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
}
.board-pool-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.board-pool-title {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  max-height: 2.5em;
  overflow: hidden;
}
.board-pool-item form { margin: 0; }
.board-pool-item .btn-secondary {
  font-size: 11px;
  padding: 4px 8px;
  width: 100%;
}

/* Watch plan header + year tabs */
.watch-plan-year-tabs {
  display: flex;
  gap: 12px;
}
.watch-plan-year-tabs a {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.watch-plan-year-tabs a.active {
  color: var(--fg);
  background: var(--bg-soft, #f6f3eb);
  border-color: var(--fg);
}

/* Watch plan grid layout — matches .archive-grid (v0.7.3). */
.watch-plan-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
}
.watch-plan-grid .watch-plan-poster img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}
.watch-plan-caption {
  font-family: var(--sans);
  font-size: 12px;
  margin-top: 4px;
}
.watch-plan-title {
  font-weight: 500;
  max-height: 2.5em;
  overflow: hidden;
}

/* Watch plan table */
.watch-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
}
.watch-plan-table th,
.watch-plan-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
}
.watch-plan-table th {
  font-weight: 600;
  background: var(--bg-soft, #f6f3eb);
}

/* Profile — liked films strip */
.profile-liked-strip {
  margin-top: 32px;
}
.profile-liked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}
.profile-liked-grid img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 3px;
}

/* ========== v0.7 social: like, comment, review, report ========== */
.object-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.film-social-strip,
.person-social-strip {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}
.like-wrap {
  display: inline-flex;
  margin: 0;
}
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  background: #fff;
  color: #555;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.like-btn:hover {
  border-color: #c94a4a;
  color: #c94a4a;
}
.like-btn--on {
  color: #c94a4a;
  border-color: #c94a4a;
  background: #fff6f4;
}
.like-count {
  font-weight: 600;
}

/* Comment/review button shares the generic .btn-secondary styling already
   present in the codebase; dialog below. */
.comment-review-wrap {
  display: inline-flex;
}
.comment-review-dialog {
  width: min(640px, 92vw);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0;
  background: #fff;
}
.comment-review-dialog::backdrop {
  background: rgba(30, 25, 20, 0.5);
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.dialog-header h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
}
.dialog-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}
.dialog-close:hover { color: #000; }
.dialog-hint {
  margin: 0 0 8px 0;
  font-family: var(--sans);
  font-size: 12px;
  color: #777;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* v-0.8.10 — Mark Watched / Rewatch dialog. */
.mark-watched-dialog {
  width: min(520px, 92vw);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0;
  background: #fff;
}
.mark-watched-dialog::backdrop { background: rgba(30, 25, 20, 0.5); }
.mark-watched-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 18px;
}
.mw-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}
.mark-watched-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
.mw-rating-row { display: flex; flex-direction: column; gap: 6px; }
.mw-rating-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.mw-rating-cell { cursor: pointer; }
.mw-rating-cell input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.mw-rating-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  user-select: none;
}
.mw-rating-cell:hover .mw-rating-pill { background: var(--bg-panel); }
.mw-rating-cell input:checked ~ .mw-rating-pill {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.mw-rating-pill--clear {
  font-style: italic;
  color: var(--fg-muted);
}
.mw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.mw-footer .dialog-actions { margin-top: 0; }

/* Save-to-diary toggle: bespoke checkbox.
   Default: filled green with a white check. Unchecked: empty white box. */
.mw-diary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.mw-diary-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mw-diary-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.mw-diary-check {
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  opacity: 0;
}
.mw-diary-toggle input:checked + .mw-diary-box {
  background: #3a8e44;
  border-color: #3a8e44;
}
.mw-diary-toggle input:checked + .mw-diary-box .mw-diary-check { opacity: 1; }

/* "Already rewatched today" inline hint — fades in for ~3s. */
.archive-state-hint {
  font-size: 12px;
  color: var(--fg-muted);
  font-style: italic;
  animation: fa-fade 3s ease-in-out;
}
@keyframes fa-fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Unmark confirmation. */
.unmark-confirm-dialog {
  width: min(480px, 92vw);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0;
  background: #fff;
}
.unmark-confirm-dialog::backdrop { background: rgba(30, 25, 20, 0.5); }
.unmark-confirm-dialog .inline-form,
.unmark-confirm-dialog .unmark-warning { padding: 0 18px; }
.unmark-warning {
  font-size: 13px;
  margin: 8px 0 14px;
}
.unmark-warning ul {
  margin: 6px 0 8px;
  padding-left: 22px;
  line-height: 1.55;
}
.unmark-confirm-dialog .dialog-actions {
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}

/* v-0.8.10 — Cast/Crew tab toggle on the film page. Radio inputs hidden,
   labels styled as tabs; CSS `:checked` drives which pane shows. */
.cc-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cc-tabs {
  display: inline-flex;
  gap: 0;
  margin: 0 0 12px;
  font-size: 0;
  border-bottom: 1px solid var(--rule);
}
.cc-tab {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  padding: 4px 14px 8px;
  cursor: pointer;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cc-tab:hover { color: var(--fg); }
.cc-pane { display: none; }
.cc-radio--cast:checked ~ .cc-pane.cc-pane--cast { display: block; }
.cc-radio--crew:checked ~ .cc-pane.cc-pane--crew { display: block; }
.cc-radio--prod:checked ~ .cc-pane.cc-pane--prod { display: block; }
.cc-radio--cast:checked ~ .cc-tabs .cc-tab--cast,
.cc-radio--crew:checked ~ .cc-tabs .cc-tab--crew,
.cc-radio--prod:checked ~ .cc-tabs .cc-tab--prod {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* v-0.8.12 follow-up — Production companies pane. Logo grid mirrors
   the cast/crew grid layout but with logos + origin country chip. */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.prod-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg, #fff);
}
.prod-logo {
  width: 64px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.prod-logo-placeholder {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #f0f0f0);
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.prod-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prod-name {
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-country {
  font-size: 10px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* v-0.8.10 — Related films / Related lists rows. Reuses the
   horizontally-scrollable shape of .category-row-scroller but with
   poster-card aesthetic for film items. */
.related-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
/* v-0.8.15: Lists row needs more room — film posters next to each
   other read fine at 12px, but the fanned-deck cards crowd. Double
   the gap on the lists row only.
   v-0.8.16: cards still felt crowded; widen the gap further and shrink
   each card so the row breathes. */
/* v-0.8.16: gap shrunk in passes (180 → 126 → 101, -20% from 126).
   padding-left at 60px so the first card's visible content sits well
   to the right of the page's left margin.
   scroll-padding-inline-start matches padding-left — without it,
   `scroll-snap-align: start` on the cards snaps the first card to
   scrollLeft=0 (overriding padding) and clips the back-left card
   overhang on the left edge. */
.related-row--lists {
  gap: 70px;                          /* v-0.8.16: 84→70 — slightly tighter still */
  padding-left: 48px;
  scroll-padding-inline-start: 48px;
}
.related-card {
  flex: 0 0 auto;
  width: 110px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.related-card-poster {
  width: 110px;
  height: 165px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
}
.related-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.related-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 36px;
  color: var(--fg-muted);
}
.related-card-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-card-meta {
  font-size: 11px;
  color: var(--fg-muted);
}
.related-card:hover .related-card-poster {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.related-card--list {
  width: 200px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px;
  background: #fafafa;
  min-height: 88px;
  justify-content: center;
}
.related-card-list-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}
.related-card--list:hover {
  background: var(--bg-panel);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* v-0.8.11 — Rewatch count chip beside the Rewatch button. */
.rewatch-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: transparent;
  align-self: center;
}
.rewatch-stats-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 18px 0 6px;
}

/* v-0.8.11 — Unfound section in user archive. Delete-only flat list. */
.unfound-wrap { margin: 14px 0 24px; }
.unfound-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.unfound-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.unfound-row:last-child { border-bottom: 0; }
.unfound-row-body { flex: 1; min-width: 0; }
.unfound-row-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 2px;
}

/* v-0.8.11 — Mini heart for liking individual comments + reviews. */
.like-wrap--mini { margin-left: auto; }
.like-btn--mini {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
  gap: 4px;
}

/* v-0.8.11 — Inline thread under a review (replies). */
.review-comments-toggle {
  margin-top: 8px;
  font-size: 13px;
}
.review-comments-toggle > summary {
  cursor: pointer;
  list-style: none;
  color: var(--fg-muted);
  padding: 4px 0;
}
.review-comments-toggle > summary::-webkit-details-marker { display: none; }
.review-comments-toggle > summary::before { content: '▸ '; }
.review-comments-toggle[open] > summary::before { content: '▾ '; }
.review-thread {
  margin: 6px 0 4px 0;
  padding: 6px 12px;
  border-left: 2px solid var(--rule);
}
.review-thread-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.review-thread-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.review-thread-item:last-child { border-bottom: 0; }
.review-thread-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-muted);
}
.review-thread-user { color: var(--fg); font-weight: 600; text-decoration: none; }
.review-thread-user:hover { text-decoration: underline; }
.review-thread-delete { margin-left: auto; }
.review-thread-body {
  margin: 2px 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.45;
}
.review-thread-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.review-thread-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
.review-thread-form button { align-self: flex-start; }
.film-comment-head { display: flex; align-items: baseline; gap: 10px; }

/* v-0.8.11 — List detail cover banner. Sits behind the header + meta
   panel. Aspect-ratio 16/9 so off-ratio uploads letterbox rather than
   distort. */
.list-detail-banner {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--rule);
  margin-bottom: -1px;
}
.list-detail--has-cover .list-detail-header {
  position: relative;
  margin-top: -120px;
  padding: 24px 24px 12px;
  z-index: 1;
}
.list-detail--has-cover .list-detail-info {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 22px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.list-detail--has-cover .list-stats-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* List edit form: cover preview + remove button. */
.list-cover-preview {
  margin-top: 8px;
  max-width: 480px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-panel);
}
.list-cover-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* v-0.8.11 — fanned-deck variant for the film-page Lists row.
   v-0.8.16: shrunk to 34×51 (60% of prior 56×85). Tighter overlap on
   back cards (±18% vs the global ±30%) makes the deck read as a single
   tile instead of three spread cards. margin-bottom keeps the
   translated back-cards from colliding with the title below. */
.deck--small {
  width: 34px;
  height: 51px;
  margin: 0 auto 10px;
}
.deck--small .deck-card-back-left  { transform: translate(-18%, 8%); }
.deck--small .deck-card-back-right { transform: translate( 18%, 8%); }
.deck--small .deck-card-back-left:hover  { transform: translate(-18%, -10%); }
.deck--small .deck-card-back-right:hover { transform: translate( 18%, -10%); }
.related-list-card {
  flex: 0 0 auto;
  width: 122px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                /* v-0.8.16: 14→20 — title sits a bit lower from the deck */
  padding-top: 6px;
}
.related-list-card .deck { margin-top: 4px; }
/* v-0.8.16: title needs extra room below the deck because the back-cards
   translate 8% down past the deck's box. 14px flex-gap covers it. */
.related-list-card .related-list-title { margin-top: 0; }
.related-list-title {
  font-family: var(--serif);
  font-size: 16px;        /* v-0.8.16: bumped 13→16 for legibility */
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  margin: 4px 0 0;
  /* v-0.8.16: title widened 122→140; that's wider than the 122px card,
     so the text block overhangs ±9px on each side. Center stays aligned
     with the deck (deck is centered inside the card; align-self: center
     keeps the title block centered on the same axis). */
  width: 140px;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v-0.8.16: meta line (author + film count) removed from the template;
   the .related-list-meta rule is intentionally left in place in case
   any other template re-uses it. */
.related-list-card:hover .deck-card-front {
  transform: translate(0, -10%);
  box-shadow: 0 8px 16px rgba(0,0,0,0.22);
}

/* v-0.8.12 — Starred review/article badge + admin star toggle button. */
.starred-badge {
  display: inline-block;
  color: #c9a13a;
  font-size: 14px;
  margin-right: 4px;
  vertical-align: middle;
}
.admin-star-btn {
  font-size: 11px;
  color: var(--fg-muted);
  margin-left: 6px;
}
.admin-star-btn:hover { color: #c9a13a; }
.admin-star-form { display: inline; margin-left: 4px; }

/* v-0.8.12 — admin / bot badges in activity feeds. */
.admin-badge,
.bot-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  margin: 0 4px 0 4px;
  vertical-align: middle;
}
.admin-badge { background: #b9272e; color: #fff; }
.bot-badge   { background: #4a5568; color: #fff; }

/* v-0.9.7 — bot FAQ picker moved into a modal so it stops dominating
   the chat window. The inline `.bot-faq-picker` (v-0.8.12) was eating
   60% of the message area; now it's hidden behind a button. */
.bot-faq-bar {
  padding: 8px 16px 0;
  flex-shrink: 0;
}
.bot-faq-open {
  font-size: 13px;
  padding: 6px 12px;
}
/* A native <dialog> is hidden by the user-agent stylesheet until
   .showModal() is called, which adds the [open] attribute. We must
   NOT set `display: flex` on the bare selector — that would override
   the UA hide and the modal would always show. Scope every visual
   rule to .bot-faq-modal[open]. */
.bot-faq-modal[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0;
  max-width: 640px;
  width: 90vw;
  max-height: 80vh;
  background: var(--bg, #fff);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;     /* container clips; inner section scrolls */
  display: flex;
  flex-direction: column;
  animation: faqModalIn 140ms ease-out;
}
@keyframes faqModalIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.bot-faq-modal::backdrop { background: rgba(0, 0, 0, 0.34); }
.bot-faq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 8px;
  border-bottom: 1px solid var(--rule);
}
.bot-faq-modal-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
}
.bot-faq-modal-close {
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0 4px;
}
.bot-faq-modal-close:hover { color: var(--fg); }
.bot-faq-modal > .muted,
.bot-faq-modal > details { padding-left: 18px; padding-right: 18px; }
.bot-faq-modal > .muted { margin: 10px 0 12px; font-size: 13px; }
.bot-faq-modal > details:last-of-type { padding-bottom: 18px; }
/* Make the section between header and footer scroll independently so
   long category lists don't push the close button out of view. */
.bot-faq-modal > .muted ~ details:first-of-type { margin-top: 0; }
.bot-faq-modal {
  /* Stack: header (auto) + scrollable content (flex 1). */
}
.bot-faq-modal > p,
.bot-faq-modal > details {
  flex-shrink: 0;
}
.bot-faq-modal {
  /* Use overflow-y on the dialog itself; max-height already caps. */
  overflow-y: auto;
}

.bot-faq-category-summary {
  cursor: pointer;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
}
.bot-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  margin: 6px 0 10px;
}
.bot-faq-btn {
  width: 100%;
  text-align: left;
  background: var(--bg, #fff);
  border: 1px solid var(--rule);
  padding: 8px 10px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
}
.bot-faq-btn:hover { background: var(--bg-hover, #f0f0f0); border-color: #b9272e; }

/* v-0.8.12 — avatar + favorites + occupation badges. */
.avatar-circle {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rule);
  display: block;
  margin-bottom: 12px;
}
.favorites-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.favorites-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.favorites-add-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
}
.favorites-add-form input[type=number] {
  flex: 1;
  max-width: 320px;
}
.occupation-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  background: #e8eef4;
  color: #2e4866;
  margin: 0 4px 4px 0;
}
.profile-favorites-strip {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.profile-favorite-card {
  width: 90px;
  text-align: center;
}
.profile-favorite-card img {
  width: 90px;
  height: 130px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.profile-favorite-card .person-thumb {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-favorite-card .label {
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.2;
}

/* v-0.8.12 — XP / level UI on profile pages. */
.level-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #c9a13a 0%, #b9272e 100%);
  color: #fff;
  padding: 2px 9px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
}
.xp-bar {
  display: block;
  width: 220px;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  margin: 8px 0 4px;
  overflow: hidden;
}
.xp-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c9a13a 0%, #b9272e 100%);
  transition: width 0.3s ease;
}

/* v-0.8.10 — Diary. Foldable nested year/month/day blocks via <details>. */
.diary-year { margin-bottom: 18px; }
.diary-year-summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  list-style: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.diary-year-summary::-webkit-details-marker { display: none; }
.diary-year-label::before { content: '▸ '; color: var(--fg-muted); font-size: 18px; }
.diary-year[open] > .diary-year-summary .diary-year-label::before { content: '▾ '; }

.diary-month { margin: 12px 0 0 12px; }
.diary-month-summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  padding: 4px 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--fg-muted);
}
.diary-month-summary::-webkit-details-marker { display: none; }
.diary-month[open] > .diary-month-summary { color: var(--fg); }
.diary-month-label::before { content: '▸ '; font-size: 13px; }
.diary-month[open] > .diary-month-summary .diary-month-label::before { content: '▾ '; }

.diary-day { margin: 6px 0 8px 16px; }
.diary-day-summary {
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  list-style: none;
  padding: 2px 0;
}
.diary-day-summary::-webkit-details-marker { display: none; }
.diary-day-summary::before { content: '· '; }

.diary-entry {
  margin: 8px 0 12px 24px;
  padding: 10px 14px;
  border-left: 2px solid var(--rule);
}
.diary-entry-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.diary-entry-date {
  font-weight: 600;
  color: var(--fg);
}
.diary-entry-source { font-style: italic; }
.diary-entry-delete { margin-left: auto; }
.diary-entry-film {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 6px;
}
.diary-entry-poster {
  width: 30px;
  height: 45px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--rule);
}
.diary-entry-film-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}
.diary-entry-body {
  margin: 4px 0;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
}
.diary-entry-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-width: 320px;
  margin-top: 8px;
}
.diary-entry-photo img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--rule);
}

/* New diary entry form: photo previews 2×2 grid with remove buttons. */
.diary-photo-previews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 320px;
  margin-top: 6px;
}
.diary-photo-thumb {
  position: relative;
}
.diary-photo-thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--rule);
}
.diary-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

/* Tab radios: hidden inputs, labels styled as tabs. */
.comment-review-tabs {
  padding: 16px 18px 18px 18px;
}
.comment-review-tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.comment-review-tabs > label {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-right: 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: #666;
  cursor: pointer;
  background: #f6f3eb;
}
.comment-review-tabs > input:checked + label {
  background: #fff;
  color: #000;
  font-weight: 600;
}
.comment-review-tab {
  display: none;
  border: 1px solid var(--rule);
  border-radius: 0 4px 4px 4px;
  padding: 14px;
  background: #fff;
}
.comment-review-tabs > input[id^="cr-tab-c-"]:checked ~ .comment-review-tab--comment,
.comment-review-tabs > input[id^="cr-tab-r-"]:checked ~ .comment-review-tab--review {
  display: block;
}
.comment-review-tab textarea,
.comment-review-tab input[type="text"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.review-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.review-toolbar button {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  background: #f6f3eb;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  border-radius: 3px;
}
.review-toolbar button:hover {
  background: #ede7d6;
}
.review-link-search {
  margin: 8px 0;
  font-family: var(--sans);
  font-size: 13px;
}
.review-link-search summary {
  cursor: pointer;
  color: #555;
}
.review-link-search input {
  margin-top: 6px;
}

/* Report link + dialog */
.report-wrap {
  display: inline-flex;
}
.report-link {
  font-family: var(--sans);
  font-size: 12px;
  color: #888;
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.report-link:hover {
  color: #c94a4a;
  border-color: var(--rule);
}
.report-dialog {
  width: min(480px, 92vw);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px;
  background: #fff;
}
.report-dialog::backdrop {
  background: rgba(30, 25, 20, 0.5);
}
.report-dialog h3 {
  margin-top: 0;
  font-family: var(--serif);
}
.report-dialog textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-sizing: border-box;
}
/* v0.8.9 — Categorised modal additions. */
.report-form { display: flex; flex-direction: column; gap: 8px; }
.report-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted, #6b6359);
  margin: 6px 0 0;
}
.report-category, .report-property {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
}
.report-property-row[hidden] { display: none; }

/* v0.8.9 — Admin reports dashboard. Quiet table that doesn't fight the
   chrome; long bodies wrap, time and kind columns stay tight. */
.admin-reports-section { margin: 24px 0 32px; }
.admin-reports-subhead { font-size: 14px; margin: 18px 0 6px; color: var(--fg-muted); }
.admin-reports-table { font-size: 13px; }
.admin-reports-table th { text-align: left; }
.admin-reports-table td { vertical-align: top; padding: 6px 8px; }
.admin-reports-body { white-space: pre-wrap; max-width: 480px; }

/* Film feed (comments + reviews) */
.film-feed-wrap {
  margin-top: 40px;
}
.film-feed-toggle {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.film-feed-toggle-btn {
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 13px;
  text-decoration: none;
  color: #555;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.film-feed-toggle-btn:hover {
  background: #f6f3eb;
}
.film-feed-toggle-btn--on {
  background: #222;
  color: #fff;
}

/* v-0.9.5 — wraps the type pill (Comments|Reviews) and the new
   scope pill (All|Friends) as two orthogonal toggles. The 6px
   margin-bottom replaces the old 14px on .film-feed-toggle alone;
   combined with the H3 removal inside film_comments.html /
   film_reviews.html, the visual gap to the list shrinks from
   ~32px (toggle-bottom 14 + h3-top ~18) to ~6px. */
.film-feed-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.film-feed h3 {
  margin-top: 0;
}
.film-comment-list,
.film-review-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.film-comment,
.film-review {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.film-comment-head,
.film-review-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 12px;
  color: #777;
  margin-bottom: 4px;
}
.film-comment-user,
.film-review-user {
  font-weight: 600;
  color: #222;
  text-decoration: none;
}
.film-comment-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.film-review-title {
  margin: 4px 0 8px 0;
  font-family: var(--serif);
  font-size: 18px;
}
.film-review-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
}
.film-review-body p { margin: 0 0 10px 0; }
.film-review-body a { text-decoration: underline; }

/* Liked-films horizontal row (profile) inherits .profile-liked-grid above. */

/* ---------------------------------------------------------------------- */
/* v0.7.1 — board rows layout, pagination, pool details, party popper.    */
/* ---------------------------------------------------------------------- */

.board-rows-wrap { margin-bottom: 32px; }
.board-rows-header {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.board-edit-toggle {
  font-size: 12px;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.board-edit-toggle:hover {
  color: var(--fg);
  border-color: var(--fg);
}
.board-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.board-row {
  display: grid;
  /* v-0.9.2: flat row on page bg, hairline-separated. */
  /* default columns: rank · poster · body · grade */
  grid-template-columns: 64px 60px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 8px;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  position: relative;
  transition: background 120ms ease;
}
.board-row:hover { background: rgba(0,0,0,0.02); }
.board-row.is-edit {
  /* edit columns: rank · poster · body · grade · rank-input · arrows · × */
  grid-template-columns: 64px 60px 1fr auto 64px 36px 28px;
  gap: 12px;
}
.board-row--empty { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02) 8px, transparent 8px, transparent 16px); }
.board-row-rank {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  text-align: right;
  color: #444;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
  padding: 2px 6px;
  border-radius: 6px;
  box-sizing: border-box;
}
.board-row-rank--top100 {
  background: #f6efe1;
  color: #6b5a36;
  font-weight: 700;
}
.board-row-rank--top10 {
  background: #efe3c2;
  color: #5a4717;
  border: 1px solid #c8b27a;
  font-weight: 800;
}
.board-row-rank--top3 {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 0 6px rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    inset 0 3px 6px rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.2);
  justify-content: center;
}
.board-row-rank--rank1 {
  background: radial-gradient(circle at 30% 30%, #fff4b8 0%, #f0c64a 35%, #d4a017 65%, #8a6b0c 100%);
}
.board-row-rank--rank2 {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d8d8d8 35%, #b8b8b8 65%, #6e6e6e 100%);
}
.board-row-rank--rank3 {
  background: radial-gradient(circle at 30% 30%, #f9dfb6 0%, #d49858 35%, #b87333 65%, #6b3f1a 100%);
}
.board-row-poster {
  display: block;
  width: 60px;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 3px;
  background: #eee;
}
.board-row-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-row-poster--empty { border: 1px dashed #bbb; background: transparent; }
.board-row-body { min-width: 0; }
.board-row-title { margin: 0; font-family: var(--serif); font-size: 16px; }
.board-row-title--empty { color: #888; font-style: italic; }
.board-row-grade {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.board-row-actions { display: flex; gap: 4px; }
.board-row-btn {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
}
.board-row-btn:hover:not(:disabled) { background: #f0f0f0; }
.board-row-btn:disabled { opacity: 0.3; cursor: default; }

.board-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 18px 0 4px 0;
  font-size: 14px;
}
.board-page-link {
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  background: #fff;
}
.board-page-link:hover { background: #f0f0f0; }
.board-page-link.disabled { pointer-events: none; opacity: 0.4; }
.board-page-goto { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.board-page-goto input[type=number] { width: 56px; padding: 3px 5px; }

/* Pool fold + hint */
.board-pool-details > summary {
  cursor: pointer;
  list-style: revert;
  padding: 6px 0;
}
.board-pool-hint {
  font-size: 14px;
  color: #555;
  font-style: italic;
  margin: 6px 0 12px 0;
}
/* v-0.9.7 — pool filter/sort form. Single horizontal strip; wraps on
   narrow viewports. Inputs are small and uniform-height. */
.board-pool-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 14px;
  padding: 8px 10px;
  background: var(--bg-soft, #faf8f1);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13px;
}
.board-pool-filter-input,
.board-pool-filter-select,
.board-pool-filter-year {
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: white;
  font-size: 13px;
  font-family: inherit;
}
.board-pool-filter-input  { width: 140px; }
.board-pool-filter-year   { width: 70px; }
.board-pool-filter-select { width: auto; }
.board-pool-filter-clear {
  font-size: 12px;
  color: var(--fg-muted);
  text-decoration: underline;
}
.board-pool-filter-clear:hover { color: var(--fg); }

/* v-0.9.7 — Annual board directory tab grid. Each row holds 10 year
   tabs (full decade), the top row may have leading empty cells for
   future years (e.g. 2027/2028/2029 in 2026). Unlocked tabs are
   active links; locked tabs are dimmed and not clickable. */
.annual-tabs-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 24px 0 48px;
}
.annual-tabs-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.annual-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 6px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg, #fff);
  text-decoration: none;
  font-family: var(--sans);
  text-align: center;
  min-height: 56px;
}
.annual-tab--empty {
  border-style: dashed;
  border-color: transparent;
  background: transparent;
  visibility: hidden;
}
.annual-tab--unlocked {
  color: var(--fg);
  background: var(--bg, #fff);
  border-color: var(--rule);
}
.annual-tab--unlocked:hover {
  border-color: #b9272e;
  background: var(--bg-hover, #faf6ee);
}
.annual-tab--locked {
  color: var(--fg-very-muted, #b6b0a0);
  background: var(--bg-soft, #f4efe3);
  cursor: not-allowed;
  opacity: 0.55;
}
.annual-tab-year {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.annual-tab-count {
  font-size: 10px;
  color: var(--fg-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .annual-tabs-row { grid-template-columns: repeat(5, 1fr); }
}

/* Party popper celebration */
.board-unlock-party {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  border-radius: 12px;
  padding: 36px 44px;
  overflow: visible;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  /* v-0.9.7 — the cubic title's 10-layer text-shadow + ground shadow
     introduced in v-0.9.6 can punch through the dialog at low viewports.
     Bump the dialog above any local stacking context the title plate
     creates. */
  z-index: 100;
}
.board-unlock-party::backdrop { background: rgba(0,0,0,0.3); }
.board-unlock-party .party-form h2 {
  margin: 0 0 12px 0;
  font-family: var(--serif);
  font-size: 22px;
}
.party-popper-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.confetti {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 10px;
  height: 14px;
  transform-origin: center;
  animation: confetti-fall 2.4s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
.confetti:nth-child(5n+1) { background: #e63946; left: 10%; }
.confetti:nth-child(5n+2) { background: #f4a261; left: 30%; }
.confetti:nth-child(5n+3) { background: #2a9d8f; left: 50%; }
.confetti:nth-child(5n+4) { background: #457b9d; left: 70%; }
.confetti:nth-child(5n)   { background: #e9c46a; left: 90%; }
.confetti:nth-child(8n+2) { width: 8px; height: 8px; border-radius: 50%; }
.confetti:nth-child(8n+5) { width: 6px; height: 12px; transform: rotate(20deg); }
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -30px, 0) rotate(0deg);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(0, 340px, 0) rotate(720deg); opacity: 0; }
}

/* Archive filter form (watched table) */
.archive-filter-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 12px 0;
  flex-wrap: wrap;
}
.archive-filter-form input[type=text] { padding: 6px 8px; min-width: 220px; }
.archive-filter-form select { padding: 6px 8px; }
.archive-table th a { text-decoration: none; color: inherit; }
.archive-table th a:hover { text-decoration: underline; }

/* v0.7.1 — profile polish: shrink Watched/Watchlist card height. */
.stat-card.profile-stat-card {
  padding: 12px 16px;
}
.stat-card.profile-stat-card .value {
  font-size: 22px;
  margin-top: 2px;
}
.stat-card.profile-stat-card .label {
  font-size: 10px;
}

/* Foldable Watching Activity. */
.profile-activity-fold > summary {
  cursor: pointer;
  list-style: revert;
  padding: 4px 0;
  margin-bottom: 4px;
}
.profile-activity-fold > summary > .profile-activity-summary-title {
  display: inline;
  margin: 0 0 0 4px;
  font-family: var(--serif);
  font-size: 18px;
}
.profile-activity-fold .profile-activity-head h3 { display: none; }

/* Top-people expand. */
.profile-top-people-details { margin-top: 6px; }
.profile-top-people-details > summary {
  cursor: pointer;
  color: #446;
  font-size: 13px;
  padding: 2px 0;
}
.profile-top-people-details > summary.profile-top-expand::marker { content: ''; }
.profile-top-people-details[open] > summary::after { content: ' (hide)'; color: #888; }

/* Collection row rank. */
.row-rank {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
  color: #444;
  padding-right: 6px;
  align-self: center;
}

/* -------------------------------------------------------------------------
 * v0.7.2 — shared table toolbar (filter form, column-hide, pagination)
 * ------------------------------------------------------------------------- */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 10px 0;
}
.table-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.table-filters label { display: flex; flex-direction: column; gap: 2px; }
.table-filter-label { font-size: 11px; color: var(--fg-muted); }
.table-filters input[type=text],
.table-filters select { padding: 5px 8px; }
.table-hide-cols > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--fg-muted);
  padding: 4px 8px;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  user-select: none;
}
.table-hide-cols[open] > summary { color: var(--fg); }
.table-hide-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 4px;
}
.table-col-toggle { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }

.table-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 12px 0 4px 0;
  font-size: 13px;
  flex-wrap: wrap;
}
.table-pagination a { text-decoration: none; color: var(--fg); padding: 2px 6px; }
.table-pagination a:hover { text-decoration: underline; }
.table-pagination .disabled { color: var(--fg-muted); padding: 2px 6px; }
.table-page-jump { display: inline-flex; align-items: center; gap: 4px; }
.table-page-jump input[type=number] { width: 56px; padding: 3px 6px; }

/* Column widths (v0.8.5: now enforced via table-layout:fixed on .archive-table). */
.archive-table col.col-grade      { width: 120px; }
.archive-table col.col-title      { width: 240px; }
.archive-table col.col-year       { width:  56px; }
.archive-table col.col-director   { width: 140px; }
.archive-table col.col-country    { width:  64px; }
.archive-table col.col-runtime    { width:  64px; }
.archive-table col.col-genre      { width:  90px; }
.archive-table col.col-school     { width: 100px; }
.archive-table col.col-theme      { width:  72px; }
.archive-table col.col-meta-genre { width:  90px; }
.archive-table col.col-mood       { width:  72px; }
.archive-table col.col-watched    { width:  92px; }

/* Board table layout (v0.7.3: board-table now reuses .archive-table styling). */
.board-table-wrap { margin: 12px 0 24px 0; }
.archive-table col.col-rank    { width: 36px; }
.archive-table col.col-actions { width: 100px; }

/* All-Time / scope board overrides (v0.8.6): rank fits 5 digits, grade fits 3 stars. */
.archive-table--board col.col-rank  { width: 52px; }
.archive-table--board col.col-grade { width: 60px; }

/* Inline grade widget inside the watched-table grade cell — let the
   <details> dropdown spill out of the narrow cell rather than being clipped. */
.archive-table-grade-cell {
  white-space: normal;
  overflow: visible;
}

/* Locked scope-board panel (era/country below threshold). */
.board-locked-subtitle { margin: 16px 0 8px 0; font-size: 14px; color: var(--fg-muted); }
.board-locked-strip {
  list-style: none; padding: 0; margin: 8px 0 20px 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.board-locked-strip-item {
  width: 64px; text-align: center; position: relative;
}
.board-locked-strip-item img {
  width: 64px; height: 96px; object-fit: cover; border-radius: 4px; display: block;
}
.board-locked-strip-item .no-poster {
  display: block; width: 64px; height: 96px; line-height: 96px;
  background: var(--bg-muted, #f4f4f0); font-size: 10px; color: var(--fg-muted);
  border-radius: 4px; overflow: hidden;
}
.board-locked-grade {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,0.7); color: #fff; font-size: 10px; font-weight: 600;
  padding: 1px 4px; border-radius: 3px;
}

/* Position-input box replacing ↑/↓ buttons (v0.7.2; v0.8.8: form removed). */
.board-move-input {
  width: 56px; padding: 3px 6px; font-size: 13px;
  text-align: center; font-variant-numeric: tabular-nums;
}

/* v0.8.8: Edit-rank column on the far LEFT of the board table, sticky during
   horizontal scroll so it stays visible. Distinct background + right border
   make it read as a separate "edit strip" rather than part of the data table. */
.archive-table--board col.col-board-edit { width: 110px; }
.archive-table--board th.col-board-edit-cell,
.archive-table--board td.col-board-edit-cell {
  position: sticky;
  left: 0;
  background: var(--bg, #fbf9f4);
  border-right: 2px solid var(--rule);
  z-index: 1;
  white-space: nowrap;
  padding: 6px 10px;
}
.archive-table--board th.col-board-edit-cell {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #777;
}
.archive-table--board td.col-board-edit-cell .board-row-btn {
  margin-left: 4px;
}

/* Circular brown watched-stamp for collection pages (v0.7.2). */
.watched-stamp {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 90px; height: 90px;
  border: 2px solid var(--stamp-brown, #8b4513);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--stamp-brown, #8b4513);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10px; font-weight: 600;
  text-align: center; line-height: 1.15;
  padding: 4px;
  background: rgba(255, 250, 240, 0.6);
  pointer-events: none;
}
.watched-stamp-user   { font-size: 10px; text-transform: lowercase; }
.watched-stamp-date   { font-size: 9px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.watched-stamp-grade  { font-size: 14px; margin-top: 2px; font-weight: 700; }
.row { position: relative; }

/* Profile top-people Expand/Hide swap (v0.7.2). */
.profile-top-expand-hide { display: none; }
.profile-top-people-details[open] > .profile-top-expand > .profile-top-expand-show { display: none; }
.profile-top-people-details[open] > .profile-top-expand > .profile-top-expand-hide { display: inline; }

/* "Planned for YYYY" badge replacing the add-to-plan button (v0.7.2). */
.plan-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--bg-muted, #f4f4f0);
  color: var(--fg-muted, #666);
  border-radius: 3px;
  margin-left: 4px;
}

/* ============================================================
   v0.8.0 — sidebar, lists, decked cards, bio, messages, etc.
   ============================================================ */

/* Page-with-sidebar shell */
.page-with-sidebar {
  display: block;
  position: relative;
}
.page-sidebar {
  position: fixed;
  left: 0;
  top: 51px;
  bottom: 0;
  width: 165px;  /* v-0.8.14: widened 50% from 110px per Holden */
  border-right: 1px solid var(--rule);
  padding: 16px 8px;
  background: var(--bg);
  overflow-y: auto;
  z-index: 10;
}
.page-sidebar[data-open="false"] {
  width: 28px;
  padding: 16px 0;
}
.page-body { display: block; min-width: 0; }
.sidebar-toggle-form { margin: 0 0 12px; }
.sidebar-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-link {
  display: block;
  padding: 6px 8px;
  font-family: var(--serif);
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
}
.sidebar-link:hover { background: rgba(0,0,0,0.04); }
.sidebar-link.active { background: rgba(0,0,0,0.06); font-weight: 600; }
.page-sidebar[data-open="false"] .sidebar-link-text { display: none; }
.page-sidebar[data-open="false"] .sidebar-link::before { content: "•"; }
.sidebar-version {
  margin-top: 24px;
  padding: 4px 8px;
  font-size: 11px;
  color: #999;
  letter-spacing: 0.02em;
}
.page-sidebar[data-open="false"] .sidebar-version { display: none; }

/* Lists index */
.lists-section { margin: 24px 0 32px; }
.lists-section-heading { font-family: var(--serif); font-size: 22px; margin: 0 0 12px; }
.list-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .list-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .list-grid { grid-template-columns: repeat(2, 1fr); } }

.list-tab-block {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 12px 12px;
  background: #fafafa;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.list-tab-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.list-tab-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 18px 0 4px;
  text-align: center;
}
.list-tab-meta {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.list-tab-owner { font-size: 12px; text-align: center; margin: 4px 0 0; }

/* v0.8.8 — Bookstore: 16 list categories, two horizontally-scrollable rows. */
.category-row-scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.category-row-scroller + .category-row-scroller { margin-top: 4px; }
.category-tab-block {
  flex: 0 0 auto;
  width: 220px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 16px 16px;
  background: #fafafa;
  scroll-snap-align: start;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.category-tab-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.category-tab-block--dark { color: #fff; border-color: rgba(255,255,255,0.18); }
.category-tab-name {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  line-height: 1.15;
}
.category-tab-meta {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.category-tab-block--dark .category-tab-meta { color: rgba(255,255,255,0.85); }
.breadcrumb { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-subtitle { margin: 4px 0 0; font-size: 14px; }

/* Decked cards: 3 vertical fanned posters */
.deck {
  position: relative;
  width: 120px;
  height: 170px;
  margin: 0 auto;
  overflow: visible;
}
.deck-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  margin-left: -50%;
  background: #eee;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-card-back-left  { transform: translate(-30%, 8%); z-index: 1; }
.deck-card-back-right { transform: translate(30%, 8%); z-index: 1; }
.deck-card-front      { transform: translate(0, -4%); z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.deck-card-back-left:hover  { transform: translate(-30%, -10%); z-index: 999; box-shadow: 0 8px 16px rgba(0,0,0,0.22); }
.deck-card-back-right:hover { transform: translate( 30%, -10%); z-index: 999; box-shadow: 0 8px 16px rgba(0,0,0,0.22); }
.deck-card-front:hover      { transform: translate(  0,  -8%); z-index: 999; box-shadow: 0 8px 16px rgba(0,0,0,0.22); }

/* List detail */
.list-detail-header {
  margin-bottom: 32px;
}
.list-detail-title { font-family: var(--serif); font-size: 32px; margin: 0 0 8px; }
.like-heart {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  padding: 4px 8px;
  line-height: 1;
}
.like-heart-on { color: #d23; }
.like-heart-off { color: #aaa; }
.like-heart-off:hover { color: #d23; }
.list-detail-desc { line-height: 1.5; margin: 8px 0 16px; }
.list-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.list-face-hint {
  background: #fff7d4;
  border: 1px solid #e6c860;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: 8px;
  vertical-align: middle;
}
.chip-official { background: #d8e9ff; color: #1a4480; }
.chip-private { background: #eee; color: #555; }

.list-stats-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0 24px;
  background: #fafafa;
}
.stats-col .stats-heading { font-family: var(--serif); font-size: 15px; margin: 0 0 8px; }
.stats-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.stats-dl dt { color: var(--muted); }
.stats-dl dd { margin: 0; }

.list-empty {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  margin: 24px 0;
}
.list-empty-cta { display: inline-block; margin: 12px 0; padding: 12px 24px; }

/* Add-to-list dropdown */
.add-to-list-dropdown { position: relative; display: inline-block; }
.add-to-list-dropdown summary { cursor: pointer; list-style: none; }
.add-to-list-dropdown summary::-webkit-details-marker { display: none; }
.add-to-list-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px;
  min-width: 220px;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.add-to-list-options { list-style: none; margin: 0; padding: 0; }
.add-to-list-options li { padding: 4px 0; }
.list-toggle.in-list { color: var(--accent, #2a7); font-weight: 600; }
.add-to-list-newlink { display: block; margin-top: 8px; font-size: 13px; }

.attach-list-banner {
  background: #fff7d4;
  border: 1px solid #e6c860;
  padding: 12px 16px;
  border-radius: 6px;
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.attach-list-row { padding-left: 60px; border-left: 2px dashed var(--rule); }
.attach-list-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.attach-list-hint { margin: 0; font-style: italic; }

/* Select-mode (advanced search → batch add to list) */
.select-checkbox-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.select-checkbox { transform: scale(1.2); cursor: pointer; }
.select-mode-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  margin: 12px 0;
  background: var(--bg-soft, #faf8f3);
  border: 1px solid var(--rule);
  border-radius: 6px;
  position: sticky;
  bottom: 0;
}

/* Bio */
.bio-block { margin: 12px 0 20px; max-width: 720px; }
.bio-text { white-space: pre-wrap; line-height: 1.5; margin: 0 0 4px; }
.bio-text-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bio-fold summary { cursor: pointer; list-style: none; }
.bio-fold summary::-webkit-details-marker { display: none; }
.bio-fold[open] summary { display: none; }
.bio-edit-link { font-size: 12px; }

/* User search bar on profile */
.user-search { display: inline-flex; gap: 8px; }
.user-search input {
  padding: 6px 10px;
  min-width: 240px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 14px;
}

/* User cards */
.user-card-list { list-style: none; padding: 0; margin: 0; }
.user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--rule);
  gap: 16px;
}
.user-card-name { margin: 0; font-family: var(--serif); font-size: 16px; }
.user-card-bio { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* Messages */
.messages-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
  /* v-0.8.13 — envelope (and its attached green dot, which positions
     against this element's wrap) nudged 2px below baseline so it
     visually aligns with the gear and surrounding navlink text. */
  transform: translateY(2px);
}
/* v0.8.8: Mail icon + unread dot — geometry contract.
   ────────────────────────────────────────────────────────────────────
   The dot is positioned RELATIVE to a tight bounding box around the
   ✉ glyph (the wrap), NOT to surrounding layout. Tweaks should change
   the tuned variables below; everything else is derived. If you ever
   resize the icon, scale --mail-glyph-size and re-eyeball --dot-* —
   that's the only place to touch. Do not move .msg-dot's top/right to
   absolute pixel values — keep them as var() refs.

   Invariants (do not break):
   - The wrap (.messages-icon-wrap) is sized to the glyph, not its
     line-box, so dot offsets read against actual envelope corners.
   - Dot offsets are stored on the wrap; the dot just consumes them.
   - --dot-down / --dot-right are tuned-by-eye fudge factors, expected
     to be small (0–3px). Larger values mean the wrap doesn't actually
     bound the glyph — fix the wrap, not the offsets.
   ──────────────────────────────────────────────────────────────────── */
.messages-icon-wrap {
  /* Glyph bounding box. Width/height tracked together with font-size. */
  --mail-glyph-size: 22px;
  --mail-glyph-w:    22px;
  --mail-glyph-h:    16px;
  /* Tuned offsets of the dot from the wrap's top-right corner.
     Positive = down / left (i.e. into the envelope). */
  --dot-down:  2px;
  --dot-right: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  var(--mail-glyph-w);
  height: var(--mail-glyph-h);
  line-height: 1;
  vertical-align: middle;
}
.messages-icon { font-size: var(--mail-glyph-size); line-height: 1; }
.msg-dot {
  position: absolute;
  top:   var(--dot-down);
  right: var(--dot-right);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a8a3e;
  border: 1px solid var(--bg);
  box-sizing: content-box;
}
.msg-count {
  font-size: 10px;
  color: var(--fg-muted);
  line-height: 1;
  margin-top: 2px;
}
/* v-0.8.13 — when unread is zero, hide the count *visually* but keep
   the box so the envelope's flex-column position stays put. */
.msg-count--hidden { visibility: hidden; }

.messages-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  height: calc(100vh - 160px);
  max-height: 800px;
  min-height: 540px;
  overflow: hidden;
}
.thread-list { border-right: 1px solid var(--rule); background: #fafafa; }
.thread-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.thread-list-header h2 { margin: 0; font-family: var(--serif); font-size: 18px; }
.thread-list-items { list-style: none; margin: 0; padding: 0; }
.thread-list-item { border-bottom: 1px solid var(--rule); }
.thread-list-item.active { background: rgba(0,0,0,0.04); }
.thread-link { display: block; padding: 10px 16px; text-decoration: none; color: inherit; }
.thread-link:hover { background: rgba(0,0,0,0.04); }
.thread-name { margin: 0; font-weight: 600; font-size: 14px; }
.thread-preview { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.thread-unread-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #d23;
  border-radius: 50%;
  margin-left: 6px;
}

.thread-pane { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.thread-list { overflow-y: auto; }
.thread-pane-empty { align-items: center; justify-content: center; }
.thread-pane-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.thread-counterpart-name { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.thread-msgs {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
}
.thread-msg {
  margin-bottom: 12px;
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
}
.thread-msg.own { margin-left: auto; background: #d8e9ff; }
.thread-msg.theirs { margin-right: auto; background: #f0f0f0; }
.thread-msg-body { margin: 0; white-space: pre-wrap; line-height: 1.4; }
.thread-msg-meta { font-size: 11px; margin: 4px 0 0; }
.thread-compose {
  border-top: 1px solid var(--rule);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.thread-compose textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: inherit;
  resize: vertical;
}
.thread-compose-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.thread-compose-tools .btn-secondary,
.thread-compose-tools .btn-primary { font-size: 13px; padding: 6px 12px; }
.thread-compose-tools .btn-primary { margin-left: auto; }

/* Image attachment in chat.
   v-0.8.15: standardize to fixed 4:3 frame with black letterbox so all
   shapes render uniformly. The wrapping <a target="_blank"> link still
   opens the original-size image in a new tab. */
.thread-msg-attachment-link { display: block; margin-bottom: 6px; }
.thread-msg-attachment {
  width: 320px;
  height: 240px;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: block;
}
.thread-image-input { cursor: pointer; }
.thread-image-input input[type=file] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Film-link picker — details/summary dropdown. */
.thread-link-picker { position: relative; }
.thread-link-picker > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
}
.thread-link-picker > summary::-webkit-details-marker { display: none; }
.thread-link-picker-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--bg, #fff);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px;
  width: 280px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 4px;
}
.thread-link-picker-panel input[type=text] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: inherit;
}
.thread-link-results {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.thread-link-result {
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.thread-link-result:hover { background: var(--bg-soft, #f0f0f0); }

.coming-soon {
  text-align: center;
  padding: 64px 24px;
}
.coming-soon .empty-note { font-size: 18px; }

.list-form .form-row, .compose-form .form-row {
  display: block;
  margin-bottom: 14px;
}
.list-form .form-row > span, .compose-form .form-row > span {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.list-form input[type="text"], .list-form textarea, .list-form select,
.compose-form input[type="text"], .compose-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
}
.list-labels { border: 1px solid var(--rule); padding: 12px; margin: 16px 0; border-radius: 6px; }
.list-labels legend { font-weight: 600; padding: 0 6px; }
.face-picker { border: 1px dashed #e6c860; padding: 12px; margin: 16px 0; border-radius: 6px; background: #fffdf2; }
.face-picker legend { font-weight: 600; padding: 0 6px; }
.form-actions { display: flex; gap: 8px; margin-top: 16px; }
.profile-lists-actions { margin: 12px 0; }
.profile-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.profile-header-left { flex: 1 1 auto; min-width: 0; }
.profile-header-right { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.profile-header .bio-block,
.profile-header > p.bio-block { flex: 1 1 100%; }

/* Typeahead + chip input (list label fields) */
.chip-input-row { align-items: flex-start; }
.chip-input {
  position: relative;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  min-height: 32px;
}
.chip-input .chip-list {
  display: contents;
}
.chip-input-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}
.chip-input-chip .chip-label { color: var(--fg); }
.chip-input-chip .chip-remove {
  background: none; border: none; cursor: pointer;
  font-size: 14px; line-height: 1; color: var(--fg-muted);
  padding: 0 2px;
}
.chip-input-chip .chip-remove:hover { color: var(--fg); }
.chip-typeahead {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  padding: 2px 4px;
}
.chip-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: none;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.chip-dropdown[hidden] { display: none; }
.chip-dropdown-row {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.chip-dropdown-row:hover { background: var(--bg-panel); }
.chip-dropdown-sub { color: var(--fg-muted); font-size: 12px; }

.list-detail-labels { margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.list-detail-label-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.list-detail-label-name { color: var(--fg-muted); font-size: 12px; min-width: 80px; }
.list-detail-label-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip-label-display {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  background: var(--bg-panel); border: 1px solid var(--rule);
  border-radius: 12px; font-size: 12px; color: var(--fg);
}

.director-suit {
  font-size: 13px;
  color: var(--fg-muted);
  margin-left: 2px;
  display: inline-block;
}

/* v0.8.6: large suit badge next to a person's headline name. */
.director-suit-large {
  font-size: 24px;
  margin-left: 10px;
  color: var(--accent);
  display: inline-block;
  vertical-align: -2px;
}

/* v0.8.6: director-page Feature Films section. */
.feature-films-section { margin-top: 20px; }
.feature-films-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 28px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
  margin-bottom: 12px;
  font-style: italic;
}
.feature-films-count {
  font-style: normal;
  font-size: 14px;
  color: var(--fg-muted);
  margin-left: 6px;
  font-family: var(--sans);
  font-weight: 400;
}
.feature-films-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 12px 0; font-size: 13px;
}
.feature-films-toolbar-label { color: var(--fg-muted); }
.feature-sort-link { color: var(--fg-muted); text-decoration: none; }
.feature-sort-link:hover { color: var(--fg); text-decoration: underline; }
.feature-sort-link.active { color: var(--fg); font-weight: 600; }

.tspdt-history {
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tspdt-history th,
.tspdt-history td {
  padding: 4px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.tspdt-history th {
  color: var(--fg-muted);
  font-weight: normal;
}

/* ============================================================================
   Statistics page (v0.8.3)
   ============================================================================ */
.stats-year-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.stats-year-tab {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-size: 13px;
  text-decoration: none;
  color: var(--fg);
}
.stats-year-tab.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.stats-section {
  margin: 28px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.stats-section:last-child { border-bottom: none; }
.stats-section h2 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 16px;
}
.stats-section h4 {
  font-family: var(--sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
  color: var(--fg-muted, #5c564c);
}

/* Scorecards */
.stats-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.stats-scorecard {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px;
  background: var(--bg);
}
.stats-scorecard-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted, #5c564c);
}
.stats-scorecard-value {
  font-family: var(--serif);
  font-size: 32px;
  margin-top: 4px;
}
.stats-scorecard-sublabel {
  font-size: 12px;
  color: var(--fg-muted, #5c564c);
  margin-top: 2px;
}

/* Layout grids */
.stats-row { display: grid; gap: 24px; margin-bottom: 24px; }
.stats-row-2 { grid-template-columns: 1fr 1fr; }
.stats-row-3 { grid-template-columns: repeat(3, 1fr); }
.stats-row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .stats-row-2, .stats-row-3, .stats-row-4 { grid-template-columns: 1fr; }
}

/* Histogram */
.stats-histogram {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.stats-hist-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.stats-hist-bar {
  width: 70%;
  background: #b84a2d;
  border-radius: 2px 2px 0 0;
  position: relative;
  min-height: 1px;
}
.stats-hist-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--fg-muted, #5c564c);
}
.stats-hist-lab {
  font-size: 10px;
  margin-top: 4px;
  text-align: center;
  color: var(--fg-muted, #5c564c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Bar list */
.stats-bar-list .bar-label {
  font-size: 12px;
}

/* Donut */
.stats-donut-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.stats-donut { flex-shrink: 0; }
.stats-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.stats-donut-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.stats-donut-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.stats-donut-label { flex: 1; }
.stats-donut-count { color: var(--fg-muted, #5c564c); }

/* Names — v-0.8.9 minor: each (Name, count) sits inside its own small
   transparent pill (rounded rect, 1px hairline border, fits the
   content). Pills wrap onto multiple lines on narrow screens. */
.stats-name-inline {
  margin: 4px 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.stats-name-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: transparent;
  font-size: 13px;
  white-space: nowrap;
}
.stats-name-pair a { color: inherit; text-decoration: none; }
.stats-name-pair a:hover { text-decoration: underline; }
.stats-name-count {
  font-size: 12px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* v0.8.9 — Watched-completion progress bar.
   Tier scheme: 1 (0%) grey, 2 (1–24%) red, 3 (25–49%) orange,
   4 (50–74%) amber, 5 (75–99%) leaf green, 6 (100%) grass green.
   v-0.8.9 minor: small inline pill (144 × 11), percentage label sits
   beside the bar (not on it), wrapper pushes itself right via
   margin-left: auto so it docks to the end of an existing toolbar row. */
.completion-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.completion-bar {
  position: relative;
  display: inline-block;
  width: 144px;
  height: 11px;
  background: var(--bg-panel, #f3efe6);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}
.completion-fill {
  display: block;
  height: 100%;
  transition: width 0.3s ease;
}
.completion-pct {
  font-size: 12px;
  color: var(--fg-muted);
}
.completion-bar--tier1 .completion-fill { background: #bcb6a8; }
.completion-bar--tier2 .completion-fill { background: #a8463a; }
.completion-bar--tier3 .completion-fill { background: #c8753a; }
.completion-bar--tier4 .completion-fill { background: #caa83a; }
.completion-bar--tier5 .completion-fill { background: #5a8e3a; }
.completion-bar--tier6 .completion-fill { background: #3a8e44; }

/* Line chart legend */
.stats-line-scroll { overflow-x: auto; }
.stats-line-legend {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  gap: 16px;
  font-size: 12px;
  flex-wrap: wrap;
}
.stats-line-legend li { display: flex; align-items: center; gap: 6px; }

/* ==========================================================================
   Work-bench (admin)
   ========================================================================== */

.workbench-page {
  display: grid;
  grid-template-columns: 1fr 18em;
  gap: 24px;
  align-items: start;
}
.workbench-page[data-rail-open="false"] {
  grid-template-columns: 1fr;
}
.workbench-page[data-rail-open="false"] .workbench-rail {
  display: none;
}

.workbench-main { min-width: 0; }

.workbench-rail-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.workbench-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 18px;
}
.workbench-tab {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  text-decoration: none;
  color: var(--fg-muted);
  font-size: 14px;
  margin-right: 4px;
  background: transparent;
}
.workbench-tab:hover { color: var(--fg); }
.workbench-tab.active {
  color: var(--fg);
  border-color: var(--rule);
  background: var(--bg);
  margin-bottom: -1px;
  font-weight: 600;
}

.workbench-section {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.workbench-section:last-child { border-bottom: none; }
.workbench-section h2 { margin: 0 0 6px; font-size: 18px; }
.workbench-section h3 { margin: 18px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); }

.workbench-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}
.workbench-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--fg-muted);
}
.workbench-form input[type="text"],
.workbench-form input[type="number"],
.workbench-form select,
.workbench-form textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg);
  color: var(--fg);
}
.workbench-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  resize: vertical;
}
.workbench-form fieldset {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 8px 12px;
  margin: 0;
}
.workbench-form fieldset legend {
  padding: 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.workbench-form .radio-inline {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-right: 16px;
  font-size: 13px;
  color: var(--fg);
}
.workbench-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.id-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.id-picker-id { width: 8em; }
.id-picker-search { width: 100%; font-size: 12px; }
.id-picker-resolved {
  font-size: 12px;
  color: var(--fg-muted);
  padding: 2px 0;
}
.id-picker-resolved[hidden] { display: none; }
.id-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.id-picker-dropdown[hidden] { display: none; }
.id-picker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
}
.id-picker-row:hover { background: var(--bg-panel); }
.id-picker-id-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--fg-muted);
}

.workbench-id-lookup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.workbench-id-lookup-grid .workbench-form { max-width: none; }
.workbench-id-lookup-grid h3 { margin: 0 0 8px; }
.workbench-id-results {
  margin-top: 12px;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.workbench-id-results th,
.workbench-id-results td {
  text-align: left;
  vertical-align: top;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}
.workbench-id-results th { font-size: 11px; text-transform: uppercase; color: var(--fg-muted); }
.workbench-id-match-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.workbench-id-badge {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-right: 6px;
  color: var(--fg-muted);
}

.workbench-detail dl.workbench-detail,
dl.workbench-detail {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 4px 12px;
  margin: 0 0 16px;
  font-size: 14px;
}
dl.workbench-detail dt { color: var(--fg-muted); }
dl.workbench-detail dd { margin: 0; }

.workbench-status-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  border: 1px solid transparent;
}
.workbench-status-draft    { background: #ececec; color: #555; border-color: #d4d4d4; }
.workbench-status-pending  { background: #fdf2d4; color: #8a6b0c; border-color: #e8c97a; }
.workbench-status-approved { background: #dcefdc; color: #2c6b3a; border-color: #a3c9a8; }
.workbench-status-denied   { background: #f4d4d0; color: #883224; border-color: #d68a7e; }

.workbench-sql-block {
  background: #f6f4ee;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 0 0 12px;
}

.workbench-sql-result {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg);
}
.workbench-sql-result table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.workbench-sql-result th,
.workbench-sql-result td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.workbench-sql-result thead th {
  background: #f6f4ee;
  font-weight: 600;
}
.workbench-sql-result + .muted { padding: 6px 10px; font-size: 12px; }

/* Right-side rail */
.workbench-rail {
  border-left: 1px solid var(--rule);
  padding-left: 16px;
  font-size: 13px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
.workbench-rail h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); }
.workbench-rail-section { margin-bottom: 18px; }
.workbench-rail-section h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
}

.workbench-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workbench-history-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg);
}
.workbench-history-row > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.workbench-history-row a { text-decoration: none; color: var(--fg); font-size: 13px; }
.workbench-history-row a:hover { color: var(--accent); }
.workbench-history-row .muted {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.workbench-history-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 3px 8px;
  font-size: 11px;
  margin-top: 0;
}

.workbench-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.workbench-header-actions a.btn-secondary,
.workbench-header-actions button.btn-secondary {
  margin: 0;
  text-decoration: none;
  display: inline-block;
}

.workbench-docs-toc {
  font-size: 13px;
  margin: 0 0 18px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #faf8f2;
}
.workbench-docs-toc a {
  color: var(--fg);
  text-decoration: none;
  margin: 0 4px;
}
.workbench-docs-toc a:hover { color: var(--accent); }

.workbench-docs-table-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  margin: 16px 0 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.workbench-docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 0 0 12px;
}
.workbench-docs-table th,
.workbench-docs-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.workbench-docs-table thead th {
  background: #f6f4ee;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workbench-docs-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}


/* ---------- Articles (v0.8.6) ---------- */
.article-view { max-width: 760px; margin: 0 auto; }
.article-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.article-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.article-body { font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--ink); }
.article-body h1, .article-body h2, .article-body h3 { font-family: var(--serif); margin-top: 1.4em; }
.article-body p { margin: 1em 0; }
.article-body a { color: var(--accent); }
.article-body blockquote { border-left: 3px solid var(--rule); padding-left: 14px; color: #666; margin: 1em 0; }
.article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: #f6f4ee; padding: 1px 4px; border-radius: 3px; }
.article-body img { max-width: 100%; height: auto; }

.article-editor-form { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.article-editor-row { display: flex; flex-direction: column; gap: 6px; }
.article-editor-row label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #666; font-weight: 600; }
.article-editor-row input[type="text"] {
  font-family: var(--serif); font-size: 22px; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 4px; background: #fff;
}
.article-editor-row textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.6;
  padding: 10px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; resize: vertical;
}
.article-editor-visibility { flex-direction: row; align-items: center; gap: 16px; }
.article-editor-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #666; font-weight: 600; }
.article-editor-radio { font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.article-editor-actions { display: flex; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--rule); }

.article-list { list-style: none; padding: 0; margin: 0; }
.article-list-item { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rule); gap: 16px; }
.article-list-title { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.article-list-meta { font-size: 12px; color: #666; display: flex; gap: 8px; align-items: center; }

/* ---------- Filter rail (v0.8.6) ---------- */
.page-with-filter-rail { display: flex; gap: 16px; align-items: flex-start; }
.filter-rail {
  width: 240px; flex-shrink: 0;
  background: #fbf9f3; border: 1px solid var(--rule); border-radius: 4px;
  padding: 14px; font-size: 13px;
  position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow: auto;
  transition: width 200ms ease, padding 200ms ease, opacity 150ms ease;
}
.filter-rail[data-open="false"] { width: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.filter-rail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.filter-rail-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #666; font-weight: 600; }
.filter-rail-close { background: transparent; border: 0; font-size: 18px; cursor: pointer; color: #888; padding: 0 4px; }
.filter-rail-close:hover { color: var(--ink); }
.filter-rail-form { display: flex; flex-direction: column; gap: 12px; }
.filter-rail-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.filter-rail-group legend { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #777; padding: 0; margin-bottom: 2px; font-weight: 600; }
.filter-rail-row { display: flex; gap: 6px; }
.filter-rail-row input { flex: 1; min-width: 0; }
.filter-rail input[type="number"], .filter-rail-select {
  padding: 4px 6px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; font-size: 13px; width: 100%;
}
.filter-rail-checks { display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow-y: auto; }
.filter-rail-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.filter-rail-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.filter-rail-toggle-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--rule); border-radius: 3px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--ink);
}
.filter-rail-toggle-btn:hover { background: #f6f4ee; }

/* page-with-filter-rail-main grows to fill remaining space */
.page-with-filter-rail-main { flex: 1; min-width: 0; }

/* ---------- v0.8.7 — Filter rail watch state radios ---------- */
.filter-rail-radios { display: flex; flex-direction: column; gap: 3px; }
.filter-rail-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ---------- v0.8.7 — Articles hub ---------- */
.articles-hub-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 14px; }
.articles-hub-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.articles-hub-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.articles-hub-card-title { font-family: var(--serif); font-size: 22px; color: var(--ink); text-decoration: none; }
.articles-hub-card-title:hover { text-decoration: underline; }
.articles-hub-card-meta { font-size: 12px; color: #666; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.articles-hub-card-snippet { color: #444; line-height: 1.5; margin: 0; font-size: 14px; }
.articles-hub-card-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.articles-hub-card-actions { display: flex; gap: 8px; align-items: center; padding-top: 6px; border-top: 1px solid var(--rule); flex-wrap: wrap; }

/* ---------- v0.8.7 — Article view labels + chip kinds ---------- */
.article-view-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-label-film       { background: #eef3ff; color: #2a4a8c; }
.chip-label-person     { background: #f5ecff; color: #5a3a8c; }
.chip-label-genre      { background: #fff1e6; color: #8c5a2a; }
.chip-label-school     { background: #ecf6e6; color: #3a6a2a; }
.chip-label-meta_genre { background: #fff7e0; color: #8c742a; }
.chip-label-theme      { background: #f6e6ee; color: #8c2a5a; }
a.chip-label-film:hover, a.chip-label-person:hover,
a.chip-label-genre:hover, a.chip-label-school:hover,
a.chip-label-meta_genre:hover, a.chip-label-theme:hover { text-decoration: underline; }

/* ---------- v0.8.7 — Director's 2D Map ---------- */
.director-map-title { margin-top: 28px; }
.director-2d-map-wrap { width: 100%; max-width: 1100px; margin: 12px auto 0; }
.director-2d-map { width: 100%; height: auto; display: block; }
.dm-axis { stroke: #444; stroke-width: 1; }
.dm-grid { stroke: #ddd; stroke-width: 1; }
.dm-grid-x { stroke-dasharray: 2 3; }
.dm-axis-label { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; fill: #666; }
.dm-axis-title { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; fill: #444; font-weight: 600; }
.dm-point-ring { stroke: #2a3a52; stroke-width: 1.5; }
.dm-point-fallback { fill: #5a6a82; }
.dm-point-initials { fill: #fff; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; font-weight: 600; }
.dm-point:hover .dm-point-ring { stroke: var(--accent, #c0392b); stroke-width: 2.5; }

/* ---------- v0.8.7 — Collection detail header row ---------- */
.collection-detail-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.collection-detail-head-actions { flex-shrink: 0; }

/* ---------- v-0.8.14 ---------- */
.verify-banner {
  background: #fef3c7;
  border-bottom: 1px solid #d6b94f;
  color: #4a3a05;
  padding: 8px 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.verify-banner-msg { line-height: 1.4; }
.verify-banner .linklike {
  background: transparent;
  border: 0;
  color: #1f1f1f;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.error-page {
  max-width: 560px;
  margin: 48px auto;
  padding: 0 16px;
  text-align: center;
}
.error-page .btn-secondary { margin: 0 4px; }

.csrf-meta-debug { display: none; }

/* Friendly 429 page (server/templates/errors/rate_limited.html) */
.rate-limited-page {
  max-width: 560px;
  margin: 64px auto;
  padding: 0 16px;
  text-align: center;
}
.rate-limited-page h1 { font-weight: 500; letter-spacing: 0.02em; }
.rate-limited-page .retry-after {
  display: inline-block;
  margin: 16px 0;
  padding: 8px 16px;
  background: #f3f1ee;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* Public landing page */
.landing-hero {
  text-align: center;
  padding: 72px 16px 48px;
  border-bottom: 1px solid #ececec;
}
.landing-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 56px;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
}
.landing-hero-tagline {
  font-size: 19px;
  color: #555;
  max-width: 640px;
  margin: 0 auto 28px;
  line-height: 1.5;
}
.landing-hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
/* v-0.9.0 — secondary "Sign up · Log in" line below the primary
   "Enter Film Archive" CTA. Quieter than the buttons, still tappable. */
.landing-hero-account {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted, #888);
}
.landing-hero-account a { color: inherit; text-decoration: underline; }
.landing-hero-account span { margin: 0 8px; opacity: 0.5; }

/* v-0.9.0 — visitor sign-up wall (/welcome). Matches the landing hero
   in restraint; centred, generous spacing, no clutter. */
.welcome-page {
  max-width: 560px;
  margin: 80px auto;
  padding: 0 16px;
  text-align: center;
}
.welcome-page-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 16px;
}
.welcome-page-blurb {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted, #555);
  margin: 0 0 28px;
}
.welcome-page-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.welcome-page-ctas .btn-primary,
.welcome-page-ctas .btn-secondary {
  min-width: 180px;
  padding: 10px 18px;
  font-size: 14px;
  text-decoration: none;
}
.welcome-page-back {
  font-size: 13px;
  color: var(--muted, #888);
  margin: 0;
}
.welcome-page-back a { color: inherit; }
/* Scoped reset so the two CTAs render as identical boxes regardless of
   their generic .btn-primary / .btn-secondary base styles. The visual
   distinction is filled-vs-outlined; geometry must match. */
.landing-hero-ctas .btn-primary,
.landing-hero-ctas .btn-secondary {
  min-width: 130px;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.landing-features { max-width: 980px; margin: 0 auto; padding: 32px 16px 64px; }
.landing-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin: 48px 0;
}
.landing-feature--reverse .landing-feature-img { order: 2; }
.landing-feature-img img {
  width: 100%;
  height: auto;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  display: block;
}
.landing-feature-copy h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 12px;
}
.landing-feature-copy p { color: #444; line-height: 1.6; }
.landing-feature-copy .feature-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
}
@media (max-width: 720px) {
  .landing-feature { grid-template-columns: 1fr; gap: 16px; }
  .landing-feature--reverse .landing-feature-img { order: initial; }
}

.landing-footer {
  border-top: 1px solid #ececec;
  padding: 24px 16px;
  text-align: center;
  color: #777;
  font-size: 13px;
}
.landing-footer a { color: #555; margin: 0 8px; }
.landing-footer .landing-version {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: #aaa;
}

/* v-0.9.3 — render-launcher reveal banner on All-Time Board */
.render-launcher { display: inline-flex; align-items: center; }
.render-options {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
}
.render-options[hidden] { display: none; }
.render-options-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.render-options-close {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0 4px;
}
.render-options-close:hover { color: var(--fg); }

/* v-0.9.2.1 — render-to-PNG waiting page */
.render-waiting {
  max-width: 640px;
  margin: 64px auto;
  padding: 0 24px;
  text-align: center;
  font-family: var(--serif);
}
.render-waiting-title {
  font-size: 28px;
  margin: 0 0 16px;
}
.render-waiting-prose {
  color: #555;
  line-height: 1.55;
  margin: 0 0 32px;
}
.render-waiting-status {
  font-size: 18px;
  margin: 32px 0;
  color: #222;
}
.render-waiting-status::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 12px;
  background: #888;
  border-radius: 50%;
  animation: render-pulse 1.2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes render-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.render-waiting-fineprint {
  font-size: 12px;
  color: #999;
  margin-top: 48px;
}

.feature-page {
  max-width: 760px;
  margin: 32px auto;
  padding: 0 16px;
}
.feature-page-img img {
  width: 100%;
  height: auto;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  margin: 24px 0;
}

/* ---------- v-0.8.15 — Recommendation note chip ---------- */
.rec-note {
  flex: 0 1 280px;
  display: flex;
  align-items: center;
  margin: 0 12px;
}
.rec-note-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg-soft, #f3f1ec);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  font-style: normal;
}
.rec-note-chip:hover { background: #ede9df; }
.rec-note-chip--readonly { cursor: default; }
.rec-note--empty .rec-note-chip { background: transparent; border-style: dashed; color: var(--fg-muted); }
.rec-note-placeholder { font-style: italic; }
.rec-note-text { white-space: pre-wrap; }
.rec-note-form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.rec-note-textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  resize: vertical;
}
.rec-note-actions { display: flex; gap: 6px; justify-content: flex-end; }
.rec-note-cancel {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0 4px;
}
.rec-note-save { padding: 4px 12px; font-size: 13px; }

/* ---------- v-0.8.15 — Make a list shortcut ---------- */
.make-list-wrap { display: inline-block; }
.make-list-wrap--open {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-soft, #f3f1ec);
}
.make-list-form { display: flex; flex-direction: column; gap: 12px; }
.make-list-heading {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}
.make-list-label {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-muted);
}
.make-list-title-input {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--serif);
  font-size: 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.make-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
}
.make-list-sort, .make-list-count {
  padding: 4px 8px;
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.make-list-count { width: 70px; }
.make-list-actions { display: flex; gap: 12px; justify-content: flex-end; }
.make-list-cancel {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0 4px;
  font: inherit;
}

/* ---------- v-0.8.15 — User-archive sidebar sub-items ---------- */
.sidebar-subhead {
  margin: 10px 0 4px;
  padding: 0 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sidebar-link--child {
  padding-left: 18px;
  font-size: 13px;
}
.page-sidebar[data-open="false"] .sidebar-subhead { display: none; }

/* v-0.8.16: collapsible subgroup (All-Time Board → Era + Country). The
   parent link stays visible always; only the body (subhead + child links)
   collapses. Toggle button sits next to the link; chevron rotates 180°
   when open. State persists via localStorage (see sidebar_subgroup.js). */
.sidebar-row-with-toggle {
  display: flex;
  align-items: center;
  gap: 0;
}
.sidebar-row-with-toggle .sidebar-link {
  flex: 1 1 auto;
}
.sidebar-subgroup-toggle {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1;
}
.sidebar-subgroup-toggle:hover { color: var(--fg); }
.sidebar-subgroup-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  transform: rotate(-90deg);   /* points right when collapsed */
}
.sidebar-subgroup--open .sidebar-subgroup-chevron {
  transform: rotate(0deg);     /* points down when open */
}
.sidebar-subgroup-body { display: none; }
.sidebar-subgroup--open .sidebar-subgroup-body { display: block; }
/* Hide the chevron entirely when the whole sidebar is collapsed (icon-only). */
.page-sidebar[data-open="false"] .sidebar-subgroup-toggle { display: none; }
.page-sidebar[data-open="false"] .sidebar-subgroup-body { display: none !important; }

/* v-0.9.7 — nested subgroups for Era, Country/Region, Annual living
   inside the All-Time fold. The Era / Country / Annual subheads each
   get their own collapsible body. Visually the nested subhead picks up
   the row-with-toggle alignment (flex), and the body indents in line
   with the existing .sidebar-link--child. */
.sidebar-subgroup--nested .sidebar-subhead {
  margin: 8px 0 2px;
}
.sidebar-subgroup--nested .sidebar-row-with-toggle .sidebar-subhead {
  flex: 1 1 auto;
  margin: 0;
}
.sidebar-subhead--has-toggle {
  /* subhead now acts as a row-with-toggle anchor, not a standalone */
  display: flex;
  align-items: center;
}
.sidebar-subhead--link {
  text-decoration: none;
  color: var(--fg-muted);
}
.sidebar-subhead--link:hover { color: var(--fg); }
.sidebar-subhead--link.active { color: var(--fg); }
/* v-0.9.7 r2 — Annual is a leaf link (no chevron, no per-year body). */
.sidebar-subhead--link-only { margin: 8px 0 2px; }


/* ---------- v-0.8.15 — Avatar crop modal ---------- */
.avatar-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-crop-modal[hidden] { display: none; }
.avatar-crop-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.55);
}
.avatar-crop-dialog {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px;
  width: min(90vw, 560px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.avatar-crop-dialog h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.avatar-crop-stage {
  position: relative;
  width: 100%;
  height: 360px;
  background: #1a1a1a;
  overflow: hidden;
}
.avatar-crop-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.avatar-crop-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ============================================================
   v-0.9.2 — All-Time Board redesign
   - Page-top utility row above the title plate
   - Title plate: tall band, centered display title, stats strip
     pinned 6px above the bottom rule with grouped 6-tier grade
     bands (italic-s suffix marks each tier as a plural collapse)
   - Flat rows on page bg, hairline-separated
   - Hand-authored SVG medals for top 3; simple pill for 4+
   - Hover-revealed up/down arrow pill in edit mode
   ============================================================ */

/* --- Page-top utility row --- */
.page-utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  margin-bottom: 16px;
}
.page-utility-row .utility-left,
.page-utility-row .utility-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.page-utility-row .inline-form { margin: 0; display: inline-flex; }

.btn-edit {
  padding: 6px 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-block;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.btn-edit:hover { border-color: var(--accent); color: var(--accent); }
.btn-edit--active {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-edit--active:hover { background: var(--accent); color: #fff; }

.icon-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0;
  transition: color 120ms ease, border-color 120ms ease;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }

.btn-render {
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 120ms ease, color 120ms ease;
}
.btn-render:hover { background: var(--accent); color: #fff; }
.btn-render:disabled,
.btn-render.is-rendering {
  opacity: 0.7;
  cursor: progress;
  animation: render-pulse 600ms ease-in-out infinite alternate;
}
@keyframes render-pulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-render.is-rendering { animation: none; opacity: 0.7; }
}

/* --- Title plate (the band) --- */
.title-plate {
  padding: 80px 0 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
  text-align: center;
  position: relative;
  /* v-0.9.7 — contain the cubic title's drop-shadow stack so it can't
     bleed through fixed-position elements above (e.g. the unlock
     dialog at first board unlock). */
  isolation: isolate;
  z-index: 0;
}
.board-display-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(56px, 7vw, 88px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.12);
  margin: 0;
}
.board-stats-strip {
  margin: 32px 0 var(--space-strip-to-rule);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.6;
  text-align: center;
}
.board-stats-strip .sep { color: var(--fg-very-muted); padding: 0 0.4em; }
.board-stats-strip strong { font-weight: 600; color: var(--fg); }
.board-stats-strip .grade-grp {
  font-weight: 500;
  color: var(--fg);
}
.board-stats-strip .grade-grp i {
  font-style: italic;
  font-weight: 400;
  color: var(--fg-muted);
  margin-right: 0.05em;
}
.board-stats-strip .grade-grp.star { color: var(--gold-warm); letter-spacing: -0.05em; }
.board-stats-strip .grade-grp.star i { color: var(--fg-muted); letter-spacing: normal; }

/* --- Row rank rendering (medal img + simple pill) --- */
.board-row-medal {
  width: 56px; height: 56px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}
.board-row-pill {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-panel);
  border-radius: 4px;
  padding: 4px 10px;
  min-width: 44px;
  text-align: center;
  display: inline-block;
}

/* --- Row body refinements (override prior --- v-0.9.2) --- */
.board-row-poster {
  width: 60px;
  aspect-ratio: 2/3;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-panel);
  display: block;
}
.board-row-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-row-poster--empty { border: 1px dashed var(--fg-very-muted); background: transparent; }
.board-row-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--fg);
}
.board-row-title a { color: inherit; text-decoration: none; }
.board-row-title a:hover { color: var(--accent); }
.board-row-title .year {
  color: var(--fg-muted);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  margin-left: 6px;
}
.board-row-grade {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.04em;
  text-align: center;
  min-width: 36px;
}
.board-row-grade.stars { color: var(--gold-warm); letter-spacing: -0.05em; }

/* --- Edit-mode affordances --- */
.board-row-input {
  width: 56px;
  padding: 4px 6px;
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  transition: border-color 120ms ease;
}
.board-row-input:hover { border-color: var(--fg-muted); }
.board-row-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.board-row-arrows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 36px;
  height: 56px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  opacity: 0;
  transition: opacity 120ms ease-out;
  overflow: hidden;
}
.board-row.is-edit:hover .board-row-arrows { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .board-row.is-edit .board-row-arrows { opacity: 1; transition: none; }
}
.board-row-arrows form { margin: 0; flex: 1; display: flex; }
.board-row-arrows button {
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.board-row-arrows button:hover { background: rgba(0, 0, 0, 0.06); }
.board-row-arrows .arrow-up { color: var(--ok); }
.board-row-arrows .arrow-down { color: var(--gold-warm); }

.board-row-delete {
  width: 28px; height: 28px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg-very-muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 120ms ease, border-color 120ms ease;
}
.board-row-delete:hover { color: var(--error); border-color: var(--error); }

/* v-0.9.3 — Watch Plan title plate variant.
   Reuses existing .title-plate (defined ~6345) but tightens top padding
   and reserves space for the bottom-right stats panel. */
.title-plate--plan {
  padding: 28px 0 32px;
  min-height: 200px;
  text-align: center;
}
.plan-display-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0;
  color: var(--fg);
}
.plan-display-title .yr {
  font-feature-settings: "lnum" 1;
  color: var(--fg-muted);
  font-style: italic;
  font-weight: 400;
}
.plan-stats {
  position: absolute;
  right: 0;
  bottom: 12px;
  width: 240px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-muted);
  text-align: right;
}
.plan-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
}
.plan-stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-very-muted);
}
.plan-stat-value {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1;
}
.plan-stats-bar-wrap { margin-top: 12px; }

/* Year-tab muted state when edit mode is active (year change loses edit) */
.year-tabs a.disabled {
  color: var(--fg-very-muted);
  pointer-events: none;
}

/* =====================================================================
   v-0.9.3 — User Statistics rebuild
   ===================================================================== */

/* Scope tabs — All Time + recent 5 years + ... older */
.scope-tabs {
  display: flex; gap: 2px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 0 16px;
  font-family: var(--sans); font-size: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.scope-tab {
  padding: 4px 10px;
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: 3px;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--sans); font-size: 12px;
}
.scope-tab:hover { color: var(--accent); }
.scope-tab.active { color: var(--fg); background: var(--chip-bg); }
.scope-tab--ellipsis { color: var(--fg-very-muted); letter-spacing: 0.1em; list-style: none; }
.scope-tab--ellipsis::-webkit-details-marker { display: none; }
.scope-tabs-older {
  display: inline-flex; gap: 2px; align-items: baseline;
}
.scope-tabs-older[open] { flex-wrap: wrap; }

/* 10-stat header grid */
/* v-0.9.3: 10-stat header for User Statistics page. Renamed from
   .stat-grid → .stats-header-grid to avoid collision with the
   user-profile main page (which also uses .stat-grid + .stat-card with
   different layout intent — horizontal cards with floating
   .profile-deck). The renamed class also has its own card variant
   .stats-header-card (set to flex-column) so the original .stat-card
   styling stays intact for the profile page. */
.stats-header-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px 24px;
  margin-bottom: 32px;
}
.stats-header-grid-row2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.stats-header-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card-label {
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-very-muted);
}
.stat-card-value {
  font-family: var(--serif); font-weight: 500;
  font-size: 28px; line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.stat-card-meta {
  font-family: var(--sans); font-size: 11px;
  color: var(--fg-muted); margin-top: 1px;
}

/* Sub-page nav pills — "tab-on-baseline / hills" pattern.
   Each pill has top + side outlines, no bottom border. The nav's
   border-bottom is the shared baseline. Pills sit flush on the line
   (margin-bottom: -1px to overlap and fuse cleanly with the line).
   Active pill is filled with its accent color and "punches through"
   the line by hiding the segment of the line beneath it. */
.subpage-nav {
  display: flex; gap: 6px;
  padding: 0;
  margin-bottom: 32px;
  align-items: flex-end;
  border-bottom: 1px solid var(--rule);
}
.subpage-pill {
  display: inline-flex; align-items: center;
  padding: 10px 22px 9px;
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-muted);
  border: 1px solid var(--rule);
  border-bottom: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--bg);
  margin-bottom: -1px; /* overlap baseline so the pill outline kisses the line */
  position: relative;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.subpage-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.subpage-pill.active {
  color: var(--bg);
  border-color: transparent;
}
.subpage-pill--stats.active    { background: var(--accent); }
.subpage-pill--progress.active { background: var(--ok); }
.subpage-pill--taste.active    { background: var(--gold-warm); color: var(--fg); }
.subpage-pill--persona.active  { background: var(--fg-muted); }
/* Soft tinted outline on inactive pills so each hill carries a hint
   of its sub-page color without shouting. */
.subpage-pill--stats    { border-color: rgba(42, 58, 85, 0.35); }
.subpage-pill--progress { border-color: rgba(42, 106, 58, 0.35); }
.subpage-pill--taste    { border-color: rgba(201, 162, 39, 0.45); }
.subpage-pill--persona  { border-color: var(--rule); }

/* Section heading inside Stats sub-pages — matches the original
   .stats-section h4 style (13px / 0.05em / fg-muted) per Holden:
   "I like the original, it's much more elegant than the current one." */
.stats-section-h,
.stats-histogram-block h4 {
  font-family: var(--sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
  color: var(--fg-muted);
}

/* Pizza chart */
.pizza-wrap { display: flex; flex-direction: column; gap: 10px; }
.pizza {
  width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; display: block;
  /* v-0.9.6 — let hover transforms breathe past the SVG box. Without this the
     scale-up clips against the viewBox edge and the lift effect dies. */
  overflow: visible;
}
/* v-0.9.6 — interactive slice pop on hover. The transform origin is the
   centre of the 200×200 viewBox; scaling from there nudges the slice
   outward from the pie like a cartoon pizza pull. The drop-shadow gives
   the lifted slice a soft realism. Hovered slice rises above its
   neighbours via z-index implied by SVG draw order — paint-order is
   document order, so we lift via `transform`. */
.pizza-slice {
  transform-origin: 100px 100px;
  transition: transform 160ms ease-out, filter 160ms ease-out;
  cursor: pointer;
}
.pizza-slice:hover {
  transform: scale(1.07);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.28));
}
.pizza-caption {
  font-family: var(--sans); font-size: 11px;
  color: var(--fg-very-muted);
  text-align: center; letter-spacing: 0.02em; margin: 0;
}
.pizza-legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  justify-content: center;
  font-family: var(--sans); font-size: 11px;
  color: var(--fg-muted);
}
.pizza-legend-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 1px;
  margin-right: 6px; vertical-align: middle;
}
.pizza-legend-pct {
  color: var(--fg-very-muted);
  font-variant-numeric: tabular-nums; margin-left: 4px;
}

/* Stats donut wrap (Color mode + Theater/home) */
.stats-pizza-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.stats-donuts-stack { display: flex; flex-direction: column; gap: 24px; }
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.donut { width: 140px; height: 140px; }
.donut-legend {
  display: flex; gap: 14px;
  font-family: var(--sans); font-size: 11px;
  color: var(--fg-muted);
}

/* Top Directors / Actors grid */
.people-section { margin-bottom: 48px; }
.people-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 16px;
}
.people-grid--5col { grid-template-columns: repeat(5, 1fr); }
.person-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
/* --extra rules MUST come after .person-tile so the display: none wins. */
.person-tile.person-tile--extra { display: none; }
.people-section[data-expanded="true"] .person-tile.person-tile--extra { display: flex; }
.list-completion-block[data-expanded="true"] .list-completion-tile.list-completion-tile--extra { display: flex; }
.person-avatar-frame {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--bg-panel);
  overflow: hidden;
  border: 1px solid var(--rule);
  display: block;
  text-decoration: none;
}
.person-avatar-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--serif); font-size: 28px; color: var(--fg-muted);
}
.person-name {
  font-family: var(--serif); font-size: 13px; font-weight: 500;
  line-height: 1.15;
  color: var(--fg);
  max-height: 2.4em; overflow: hidden;
}
.person-name a { color: inherit; text-decoration: none; }
.person-name a:hover { color: var(--accent); }
.person-count {
  font-family: var(--sans); font-size: 11px;
  color: var(--fg-very-muted);
  font-variant-numeric: tabular-nums;
}
/* Suited director frames — fancier ring + suit chip */
.person-tile--suit-spade   .person-avatar-frame { border-color: var(--fg);        box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--fg); }
.person-tile--suit-heart   .person-avatar-frame { border-color: var(--error);     box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--error); }
.person-tile--suit-diamond .person-avatar-frame { border-color: var(--gold-warm); box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--gold-warm); }
.person-tile--suit-club    .person-avatar-frame { border-color: var(--accent);    box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--accent); }
.person-suit {
  position: absolute;
  bottom: -3px;
  left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 12px; line-height: 1;
}
.person-tile--suit-spade   .person-suit { color: var(--fg); }
.person-tile--suit-heart   .person-suit { color: var(--error); }
.person-tile--suit-diamond .person-suit { color: var(--gold-warm); }
.person-tile--suit-club    .person-suit { color: var(--accent); }

.people-expand { display: flex; justify-content: center; margin-top: 16px; }
.people-expand-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--fg-very-muted);
  font-family: var(--sans); font-size: 12px;
  padding: 4px 12px; letter-spacing: 0.04em;
}
.people-expand-btn:hover { color: var(--accent); }

/* Per-tile progress bar (used by director feature-completion in Progress sub-page) */
.person-progress {
  display: flex; align-items: center; gap: 6px;
  width: 100%; max-width: 120px;
  margin-top: 2px;
}
.person-progress-track {
  flex: 1; height: 4px;
  background: var(--bg-panel);
  border-radius: 2px;
  overflow: hidden;
}
.person-progress-fill {
  height: 100%;
  background: var(--ok);
  border-radius: 2px;
}
.person-progress-pct {
  font-family: var(--sans); font-size: 10px;
  color: var(--fg-very-muted);
  font-variant-numeric: tabular-nums;
  min-width: 28px; text-align: right;
}

/* Official-list completion grid */
.list-completion-block { margin-bottom: 36px; }
.list-completion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.list-completion-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  text-decoration: none;
  color: var(--fg);
  transition: border-color 120ms ease;
  align-items: center;
  text-align: center;
}
.list-completion-tile:hover { border-color: var(--accent); }
/* --extra: hide by default; expand reveals via the rule near .person-tile */
.list-completion-tile.list-completion-tile--extra { display: none; }
/* Mini face deck for the list progress tile */
.deck--mini {
  width: 64px; height: 90px;
  margin: 0 auto 4px;
  position: relative;
}
.deck--mini .deck-card { border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.deck--mini .deck-card-back-left  { transform: translate(-22%, 6%); }
.deck--mini .deck-card-back-right { transform: translate( 22%, 6%); }
.deck--mini .deck-card-front      { transform: translate(0, -4%); }
.list-completion-title {
  font-family: var(--serif); font-size: 14px; font-weight: 500;
  line-height: 1.2;
  max-height: 2.4em; overflow: hidden;
  width: 100%;
}
.list-completion-meta {
  font-family: var(--sans); font-size: 11px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.list-completion-progress {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
}
.list-completion-progress-track {
  flex: 1; height: 4px;
  background: var(--bg-panel);
  border-radius: 2px;
  overflow: hidden;
}
.list-completion-progress-fill {
  height: 100%; background: var(--ok);
  border-radius: 2px;
}
.list-completion-progress-pct {
  font-family: var(--sans); font-size: 10px;
  color: var(--fg-very-muted);
  font-variant-numeric: tabular-nums;
  min-width: 28px; text-align: right;
}

/* Rewatch cloud (Taste sub-page) */
.rewatch-cloud-section { margin-bottom: 48px; }
.rewatch-cloud-meta {
  font-family: var(--sans); font-size: 13px;
  color: var(--fg-muted); margin: 0 0 16px;
}
/* v-0.9.3 — spiral-packed rewatch cloud. Container fills the content
   width (no max-width cap) and uses 12:7 aspect to give the cloud
   enough breathing room. Each child is absolutely-positioned via
   CSS custom properties pre-computed server-side. */
.rewatch-cloud {
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 7;
  margin: 0 auto 32px;
  overflow: hidden;
}
.rewatch-cloud-poster {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 12%);
  height: var(--h, 28%);
  display: block;
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  background: var(--bg-panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
  transform: rotate(var(--rot, 0deg));
  transition: transform 200ms ease, box-shadow 200ms ease, z-index 0ms 200ms;
}
.rewatch-cloud-poster:hover {
  z-index: 10;
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 200ms ease, box-shadow 200ms ease, z-index 0ms 0ms;
}
.rewatch-cloud-poster img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.rewatch-cloud-poster .poster-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--bg-panel);
  color: var(--fg-very-muted);
  font-family: var(--serif); font-size: 11px;
  text-align: center; padding: 6px;
  line-height: 1.2;
  overflow: hidden;
}
.rewatch-cloud-count {
  position: absolute; top: 4px; right: 4px;
  background: rgba(26, 26, 26, 0.78);
  color: white;
  font-family: var(--sans); font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

/* Director 2D Map fullscreen toggle (v-0.9.3) */
.director-map-section { margin-bottom: 48px; }
.director-2d-map-fullscreen-wrap {
  position: relative;
}
.director-map-fullscreen-btn {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 2;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 16px; line-height: 1;
  color: var(--fg-muted);
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.director-map-fullscreen-btn:hover { color: var(--accent); border-color: var(--accent); }
.director-map-section[data-fullscreen="true"] {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 100;
  padding: 32px 48px;
  margin: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
/* When fullscreen, the inner map wrapper drops its 1100px max-width and
   the SVG fills the available area. */
.director-map-section[data-fullscreen="true"] .director-2d-map-fullscreen-wrap,
.director-map-section[data-fullscreen="true"] .director-2d-map-wrap {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  flex: 1;
}
.director-map-section[data-fullscreen="true"] svg.director-2d-map {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 120px);
}

/* Persona placeholder */
.persona-coming-soon {
  text-align: center;
  padding: 64px 0;
}
.persona-coming-soon-title {
  font-family: var(--serif); font-size: 36px; font-weight: 500;
  margin: 0 0 12px;
  color: var(--fg-muted);
}
.persona-coming-soon-body {
  font-family: var(--sans); font-size: 14px;
  color: var(--fg-very-muted);
  margin: 0;
}


/* ----- Square hub (v-0.9.5) -----
   The new default main page (`/`). 5 navigation tiles to Collection,
   List, Community (placeholder), User Archive, User Profile. No data
   of its own — the destinations carry the visual work. */

.square-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.square-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 28px 20px;
  transition: background 120ms ease, border-color 120ms ease;
}
.square-tile:hover {
  background: var(--bg-panel);
  border-color: var(--accent-soft);
}
.square-tile-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 8px;
}
.square-tile-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0;
}

/* Disabled tile (Community placeholder) */
.square-tile--disabled { cursor: default; }
.square-tile--disabled:hover {
  background: var(--bg);
  border-color: var(--rule);
}
.square-tile--disabled .square-tile-title { color: var(--fg-very-muted); }
.square-tile--disabled .square-tile-desc {
  color: var(--fg-very-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Responsive collapse: 5-in-row → 2-column → 1-column. */
@media (max-width: 900px) {
  .square-grid { grid-template-columns: repeat(2, 1fr); }
  .square-tile:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
}
@media (max-width: 540px) {
  .square-grid { grid-template-columns: 1fr; }
  .square-tile:nth-child(5) { max-width: none; }
}

/* v-0.9.6 — table column "Country" rebranded to "Country/Region". Double
   the character count means the column header outgrows the values below.
   Shrink the header font slightly and tighten letter-spacing so the
   visible column width doesn't budge. Only the <span> inside the <th>
   shrinks — the cell itself keeps its computed width. */
.th-country > span {
  font-size: 0.88em;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------
   v-0.9.6 — All-Time Board CUBIC TITLE
   ----------------------------------------------------------------------
   Two-line title: "{Owner}'s All-Time" / "Greatest Films Board".
   Holden's brief: "Classical Cubic-Style Title, feels like Rome/Athens
   architecture + realistic shadows. Use advanced CSS for the shadow."

   Design parameters:
     · Font:      Cinzel (Roman-inspired capitals, mid-weight)
     · Treatment: ALL CAPS, weight 700, slight letter-spacing
     · Color:     bone/marble cream face (#f5efe1) over a deep umber
                  extrusion side (#5b3a16)
     · Cubic 3D:  10-layer stacked text-shadow stepping diagonally
                  down-right at ~1px per layer for an extruded-stone
                  look, plus a soft ground drop-shadow underneath as
                  if from a low Mediterranean sun

   The same class applies to both the live page (board_all_time.html)
   and the rendered PNG (board_render.html). Holden can override any
   parameter in a follow-up ux-design session — see the still preview
   at Plan/v-0.9.5 to v-0.9.6/cubic-title-preview.html for a static
   reference shot. */
.board-display-title--cubic {
  font-family: "Cinzel", "Cormorant Garamond", var(--serif), serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;

  /* Rusty-wood face: a top-down rust-orange→amber gradient gives the
     impression of weathered copper / aged wood. A faint
     repeating-linear-gradient overlay supplies the wood-grain texture.
     `background-clip: text` paints the gradient inside the glyph
     shapes; `color: transparent` lets it show through. The text-shadow
     stack below paints the extruded side faces and ground shadow
     beneath, unaffected by the transparent fill.

     v-0.9.6 r3: lifted the gradient brightness so the face reads as
     clearly distinct from the umber shadow side. Old bottom stop
     #6e3406 (~21% lightness) sat right on top of the shadow's #5a2f10
     and looked like an extension of it. New stops land in the ~45–70%
     lightness band — solidly between cream background and umber
     extrusion. Texture opacity 0.10 → 0.07 so the bands don't drag
     the perceived face back into darkness. */
  background:
    repeating-linear-gradient(
      92deg,
      rgba(0, 0, 0, 0.00) 0px,
      rgba(0, 0, 0, 0.07) 1px,
      rgba(0, 0, 0, 0.00) 2px,
      rgba(0, 0, 0, 0.00) 7px
    ),
    linear-gradient(
      178deg,
      #ffb86b 0%,
      #f1933c 35%,
      #d7741e 65%,
      #b15c12 100%
    );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;

  /* Cubic extrusion: ten 1px steps to the down-right in deep umber, so
     the rusty face sits on top of a dark brown side, finished with a
     soft ambient ground shadow. The deep palette means the extrusion
     reads as solid wood rather than as a glow. */
  text-shadow:
    1px 1px 0 #5a2f10,
    2px 2px 0 #4e2810,
    3px 3px 0 #43230d,
    4px 4px 0 #381e0b,
    5px 5px 0 #2d1808,
    6px 6px 0 #241306,
    7px 7px 0 #1c0e04,
    8px 8px 0 #150a02,
    9px 9px 2px rgba(0, 0, 0, 0.45),
    14px 18px 22px rgba(0, 0, 0, 0.38);
  /* No italic tilt: stone (and wood) blocks don't lean. */
  padding-bottom: 24px;
}
/* Three-line layout (v-0.9.6 r2): for medium-to-long display names the
   owner phrase ("X's") gets its own line so "ALL-TIME" can breathe.
   Sizes are tuned so the payoff line ("GREATEST FILMS BOARD") still
   carries the visual weight.

   v-0.9.6 r3: also supports a 2-line variant for short owner names
   (e.g. "Ada"), where "{Owner}'s All-Time" fits comfortably together
   on the first line. The template decides which variant to render
   based on owner-name length; CSS just picks the right size for the
   combined first line. */
.board-display-title--cubic .board-title-line1,
.board-display-title--cubic .board-title-line2,
.board-display-title--cubic .board-title-line3 {
  display: block;
}
.board-display-title--cubic .board-title-line1 {
  font-size: 0.66em;            /* "{Owner}'s"  — smallest */
  margin-bottom: 0.02em;
  letter-spacing: 0.04em;        /* a touch more open since shorter */
}
.board-display-title--cubic .board-title-line2 {
  font-size: 0.88em;            /* "ALL-TIME"   — mid */
  margin-bottom: 0.02em;
}
.board-display-title--cubic .board-title-line3 {
  font-size: 1em;               /* "GREATEST FILMS BOARD" — payoff */
}
/* v-0.9.7 — Annual board titles read "Films of YYYY Board". The
   connector "of" is typographically smaller than "FILMS" and the
   year, mirroring how editorial headlines treat unstressed
   prepositions (e.g. "Films OF 1994 BOARD" → "Films ᵒᶠ 1994 BOARD").
   Tightens letter-spacing too so the smaller word doesn't drift. */
.board-display-title--cubic .board-title-of {
  font-size: 0.62em;
  letter-spacing: 0.01em;
  vertical-align: 0.12em;       /* lift slightly so it sits mid-cap */
  font-weight: 600;
  margin: 0 0.05em;
}
/* 2-line variant: line1 carries "{Owner}'s All-Time" combined, so it
   gets the line2 size (mid). line3 is unchanged (the payoff). */
.board-display-title--cubic.board-display-title--cubic-2line .board-title-line1 {
  font-size: 0.88em;
  letter-spacing: 0.02em;
}

/* Render-mode tightening: in board_render.html (Playwright screenshot)
   the title plate is rendered without the page chrome. Make the title
   slightly larger and add more breathing room above so the PNG framing
   reads as monumental. */
.render-page .board-display-title--cubic {
  font-size: clamp(58px, 6.4vw, 96px);
  margin-top: 16px;
}


/* ===========================================================================
   v-0.9.9 — Binary-search pool→board comparison window
   =========================================================================== */
.bc-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 18, 14, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 24px; overflow-y: auto;
  animation: bc-fade 160ms ease-out;
}
@keyframes bc-fade { from { opacity: 0; } to { opacity: 1; } }
.bc-card {
  position: relative;
  width: min(660px, 94vw);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
  padding: 26px 28px 20px;
}
.bc-close {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--fg-muted);
}
.bc-close:hover { color: var(--fg); }
.bc-question {
  font-family: var(--serif);
  font-size: 30px; font-weight: 600;
  text-align: center; margin: 0 0 22px;
}
.bc-arena {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 14px;
}
.bc-side { flex: 1 1 0; min-width: 0; margin: 0; }
.bc-vs {
  align-self: center;
  font-family: var(--serif);
  font-size: 26px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  padding: 0 2px;
}
.bc-pick {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: center;
}
.bc-poster {
  display: block; overflow: visible;
}
.bc-poster img,
.bc-poster .poster-placeholder {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  display: block; border-radius: 4px;
  border: 1px solid var(--rule);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.bc-pick:hover .bc-poster img,
.bc-pick:focus-visible .bc-poster img {
  transform: scale(1.06);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30);
  position: relative; z-index: 2;
}
.bc-meta { display: flex; flex-direction: column; gap: 2px; }
.bc-title {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  line-height: 1.2;
}
.bc-sub {
  font-family: var(--sans); font-size: 12px; color: var(--fg-muted);
  line-height: 1.3;
}
.bc-badges {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; margin-top: 5px;
}
.bc-grade { position: static; display: inline-block; }
.bc-rank {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--fg-muted);
}
.bc-progress {
  margin: 18px 0 0; text-align: center;
  font-family: var(--sans); font-size: 12px; color: var(--fg-muted);
}
/* Right (probe) side re-renders every round → this re-fires, giving the
   smooth "next contender slides in" feel. */
.bc-enter { animation: bc-slide-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes bc-slide-in {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 480px) {
  .bc-card { padding: 20px 16px 16px; }
  .bc-question { font-size: 24px; }
  .bc-vs { font-size: 20px; }
  .bc-title { font-size: 15px; }
}

/* v-0.9.9 — board placement toast (after a binary-search insert). */
.board-place-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 1100;
  background: var(--fg); color: var(--bg);
  font-family: var(--sans); font-size: 14px;
  padding: 12px 20px; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  animation: bc-fade 200ms ease-out;
}
.board-place-toast strong { font-weight: 700; }
.board-place-toast.is-leaving { opacity: 0; transition: opacity 300ms ease; }