:root {
  --paper: #f5f4ef;
  --card: #fbfaf7;
  --ink: #141414;
  --muted: #5f5d57;
  --line: #1c1c1c;
  --soft-line: #d6d3ca;
  --accent: #141414;
  --accent-ink: #fbfaf7;
  --selected: #ecebe4;
  --error: #b3261e;
  --serif: "Didot", "Bodoni 72", "Times New Roman", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.6; }
main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.site-header { padding: 24px 0 16px; }
.brand {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 6vw, 34px); letter-spacing: .01em; white-space: nowrap;
}
.brand-rule { flex: 1; height: 1px; background: var(--line); }
.site-nav { display: flex; justify-content: center; gap: 4px 20px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }
.site-nav-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; text-decoration: none; color: var(--muted); border-bottom: 1px solid transparent; }
.site-nav-link:hover { color: var(--ink); }
.site-nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 420px) { .site-nav { gap: 4px 12px; font-size: 13px; } }

/* ---------- buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card); text-decoration: none;
  cursor: pointer; font-size: 15px; white-space: nowrap;
}
.button:hover { background: var(--selected); }
.button.primary { background: var(--accent); color: var(--accent-ink); }
.button.primary:hover { background: #333; }
.button:disabled { opacity: .5; cursor: default; }
.icon-button {
  flex: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--muted);
}
.icon-button:hover { color: var(--ink); }

.error, .save-status.error, .search-status.error { color: var(--error); }
.note, .meta { color: var(--muted); font-size: 14px; }
.meta { font-size: 13px; }

/* ---------- home ---------- */
.hero { padding: 24px 0 8px; }
.lead { font-size: 18px; margin: 0 0 8px; }
.hero .button { display: flex; margin: 16px auto 0; min-width: 200px; }
.hero .error { text-align: center; }
.drafts { margin-top: 40px; }
.drafts h2 { font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-item {
  display: flex; gap: 16px; align-items: center; min-height: 52px; padding: 8px 4px;
  border-bottom: 1px solid var(--soft-line); text-decoration: none;
}
.sheet-item:hover { background: var(--selected); }
.sheet-status { font-size: 12px; border: 1px solid var(--line); padding: 0 6px; }
.sheet-count { font-family: var(--serif); font-weight: 700; font-size: 18px; }
.sheet-date { margin-left: auto; color: var(--muted); font-size: 13px; }
.more-link { margin: 12px 0 0; font-size: 14px; }

/* ---------- everyone's posts ---------- */
.post-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.post-item { display: flex; flex-direction: column; gap: 2px; padding: 14px 4px; border-bottom: 1px solid var(--soft-line); text-decoration: none; }
.post-item:hover { background: var(--selected); }
.post-name { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.post-meta { color: var(--muted); font-size: 13px; }
.post-posters { display: grid; grid-template-columns: repeat(6, minmax(0, 46px)); gap: 6px; margin-top: 8px; }
.post-posters .poster-sm { width: 100%; height: auto; aspect-ratio: 2 / 3; }
.post-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.post-badge { font-size: 11px; border: 1px solid var(--line); padding: 0 6px; line-height: 1.6; }
.post-posters.wide { grid-template-columns: repeat(10, minmax(0, 46px)); gap: 4px; }
@media (max-width: 480px) { .post-posters.wide { grid-template-columns: repeat(5, minmax(0, 46px)); } }
.post-titles { margin: 6px 0 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- per-question tally ---------- */
.tally { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.tally-item { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--soft-line); color: inherit; text-decoration: none; }
a.tally-item:hover { background: var(--selected); }
.tally-rank { flex: none; width: 2em; text-align: right; font-family: var(--serif); font-weight: 700; font-size: 18px; }
.tally-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tally-title { font-weight: 600; overflow-wrap: anywhere; }
.tally-count { flex: none; font-size: 13px; color: var(--muted); }
.tally-count strong { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-right: 2px; }
.tally-empty { padding: 16px 0; }
/* Above the ranking, right under the question (kept tight). */
.tally-nav { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; }
.tally-nav + .tally { margin-top: 0; }
.tally-summary { margin-bottom: 0; }
.tally-nav .button { flex: none; padding: 0 12px; font-size: 14px; }
.tally-nav .is-placeholder { visibility: hidden; }
.tally-jump {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 2px; background: #fff; font: inherit; font-size: 14px;
}
@media (max-width: 480px) {
  .tally-nav { flex-wrap: wrap; }
  .tally-jump { order: -1; flex-basis: 100%; }
  .tally-nav .button { flex: 1; }
}

/* ---------- overall ranking ---------- */
.total-link { margin: 0 0 4px; font-size: 14px; }
.total-link .inline-link { margin-left: 0; }
.question .total-link { margin-top: 8px; }
.rank-qs { margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.ranking .is-top { padding-block: 12px; }
.ranking .is-top .tally-rank { font-size: 24px; }
.q-index-section { margin-top: 40px; }
.q-index-h { margin: 0 0 8px; font-size: 18px; }
.q-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.q-index li { border-bottom: 1px solid var(--soft-line); }
.q-index a { display: block; padding: 10px 2px; font-size: 14px; text-decoration: none; overflow-wrap: anywhere; }
.q-index a:hover { background: var(--selected); }
@media (max-width: 480px) { .q-index { grid-template-columns: 1fr; } }
.rank-badge-row { margin: 8px 0 0; }
.rank-badge { display: inline-flex; gap: 4px; align-items: baseline; font-size: 13px; color: var(--muted); text-decoration: none; border: 1px solid var(--soft-line); border-radius: 999px; padding: 2px 10px; background: var(--card); }
.rank-badge:hover { border-color: var(--ink); }
.rank-badge strong { font-family: var(--serif); font-size: 16px; color: var(--ink); }
/* "いま人気の作品" on the home page */
.teaser { margin-top: 40px; }
.teaser h2 { font-size: 16px; font-weight: 600; margin: 0; }
.teaser .note { margin: 2px 0 10px; }
.teaser-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.teaser-item { display: flex; flex-direction: column; gap: 4px; text-decoration: none; font-size: 12px; }
.teaser-poster { position: relative; }
.teaser-item .poster { width: 100%; height: auto; aspect-ratio: 2 / 3; }
.teaser-rank { position: absolute; top: 0; left: 0; background: var(--ink); color: var(--accent-ink); font-family: var(--serif); font-weight: 700; font-size: 13px; padding: 0 6px; }
.teaser-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.teaser-count { color: var(--muted); }

/* ---------- my list ---------- */
.my-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.my-item { padding: 14px 0; border-bottom: 1px solid var(--soft-line); }
.my-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.sheet-status.is-published { background: var(--ink); color: var(--accent-ink); }
.my-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.my-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.my-actions .button { min-height: 40px; padding: 0 14px; font-size: 14px; }
.my-actions .button.subtle { margin-top: 0; }
.my-actions .button.subtle:last-child { margin-left: auto; }
.my-empty { padding: 16px 0; }
.my-empty p { margin: 0 0 12px; }

.message { padding: 40px 0; }

/* ---------- progress ---------- */
.progress { height: 3px; background: var(--soft-line); }
.progress-bar { height: 100%; background: var(--ink); transition: width .25s ease; }
.progress-text { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding: 6px 0 0; }
.position { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 15px; }

/* ---------- question ---------- */
.question { padding: 24px 0 8px; }
.question-no { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--muted); }
.question-text { margin: 2px 0 16px; font-size: clamp(22px, 5.6vw, 28px); line-height: 1.4; font-weight: 700; }

.selected { border: 1px solid var(--line); background: var(--card); min-height: 96px; display: flex; }
.selected-empty { margin: auto 16px; color: var(--muted); font-size: 14px; }
.selected-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px; width: 100%; }
.selected-body { flex: 1; min-width: 0; }
.selected-label { margin: 0; font-size: 12px; color: var(--muted); }
.selected-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.selected-body .meta { margin: 2px 0 0; }
.dupe { display: block; margin: 4px 0 0; font-size: 12px; color: #7a4b00; }
.save-status { min-height: 1.6em; margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.poster { flex: none; background: var(--soft-line); object-fit: cover; border: 1px solid var(--soft-line); }
.poster-sm { width: 46px; height: 69px; }
.poster-md { width: 64px; height: 96px; }
.poster-lg { width: 96px; height: 144px; }

/* ---------- search ---------- */
.finder { padding-top: 8px; }
.search { display: flex; gap: 8px; }
.search-field { position: relative; flex: 1; min-width: 0; display: flex; }
.search input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 44px 0 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff;
  font-size: 16px; /* prevents zoom on iOS */
}
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
  position: absolute; top: 0; right: 0; width: 44px; height: 100%; border: 0; background: transparent;
  color: var(--muted); font-size: 16px; cursor: pointer;
}
.search-clear:hover { color: var(--ink); }
.search-status { min-height: 1.6em; margin: 6px 0; font-size: 13px; color: var(--muted); }
.results { list-style: none; margin: 0; padding: 0; }
.result {
  display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px 4px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--soft-line); cursor: pointer;
}
.result:hover { background: var(--selected); }
.result.is-selected { background: var(--selected); cursor: default; }
.result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.result-title { font-weight: 600; overflow-wrap: anywhere; }
.result-action {
  flex: none; font-size: 13px; border: 1px solid var(--line); padding: 2px 10px; border-radius: 2px; background: var(--card);
}
.result.is-selected .result-action { background: var(--ink); color: var(--accent-ink); }
.more { display: flex; margin: 12px auto 0; }
.others { margin-top: 4px; }
.others-heading { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.others-count { font-size: 12px; color: var(--muted); }

/* ---------- step navigation ---------- */
.step-nav {
  position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: space-between; gap: 12px;
  margin: 24px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--soft-line);
}
.step-nav .button { flex: 1 1 120px; max-width: 220px; padding: 0 12px; }
.step-nav .to-preview { flex: 0 1 auto; }
@media (max-width: 359px) { .step-nav { gap: 6px; } .step-nav .button { padding: 0 8px; } }
.step-nav > span { flex: 1 1 120px; max-width: 220px; } /* stands in for "戻る" on question 1, keeping "プレビュー" centred */



/* ---------- interim overview ---------- */
.overview { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.overview-item { display: block; padding: 10px 4px; border-bottom: 1px solid var(--soft-line); text-decoration: none; }
.overview-item:hover { background: var(--selected); }
.overview-q { display: block; font-size: 13px; color: var(--muted); }
.overview-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.overview-title.is-empty { color: var(--muted); font-weight: 400; }


/* ---------- preview ---------- */
.inline-link { margin-left: .5em; }
.preview-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-top: 8px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.segment { min-height: 44px; padding: 0 16px; border: 0; background: var(--card); cursor: pointer; font-size: 14px; }
.segment + .segment { border-left: 1px solid var(--line); }
.segment[aria-pressed="true"] { background: var(--ink); color: var(--accent-ink); }
.zoom { font-size: 14px; padding: 0 14px; }
.font-picker { display: flex; align-items: center; gap: 8px; }
.font-picker-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.font-picker .segment { padding: 0 12px; white-space: nowrap; }
.font-picker .swatch-segment { padding: 0 10px; }
.swatch { display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.swatch-black { background: #111111; } .swatch-red { background: #b8261f; } .swatch-blue { background: #1f4fa3; }
.swatch-green { background: #2d6a3a; } .swatch-purple { background: #6a3d99; } .swatch-brown { background: #7a4a24; }
@media (max-width: 359px) { .font-picker { gap: 6px; } .font-picker .segment { padding: 0 8px; } }
.paper-frame { position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--soft-line), 0 2px 12px rgb(0 0 0 / .08); }
/* Keep the frame's 1px outline shadow off the buttons right above it (public page). */
.preview-tools + .paper-frame { margin-top: 12px; }
.paper-frame.is-zoomed { overflow: auto; max-height: 80vh; }
.redo { margin-top: 40px; }
.redo h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }

/* The sheet is laid out at a fixed 1080×1620 and scaled to fit (see sheetFrame in app.js). */
.paper {
  --cell-gap-x: 40px;
  width: 1080px; height: 1620px; transform-origin: 0 0;
  display: flex; flex-direction: column; padding: 60px 56px 36px;
  background: #f6f5f0; color: #111; font-family: var(--sans);
}
.paper-head { display: flex; align-items: center; gap: 28px; height: 110px; flex: none; }
.paper-rule { flex: 1; height: 1.5px; background: #111; }
.paper-title { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 66px; letter-spacing: -.005em; white-space: nowrap; line-height: 1; }
.paper-grid {
  list-style: none; margin: 34px 0 0; padding: 0; flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(10, 1fr); column-gap: var(--cell-gap-x); row-gap: 16px;
}
.cell { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cell-q { margin: 0 0 8px; font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; flex: none; letter-spacing: .02em; }
.cell-no { display: inline-block; min-width: 2.2em; letter-spacing: 0; }
.cell-box {
  flex: 1; min-height: 0; border: 1.5px solid #111; background: #fbfaf7;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px; overflow: hidden;
}
.cell-title {
  display: block; max-height: 100%; overflow: hidden; text-align: center; font-size: 22px; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere; word-break: keep-all; line-break: strict;
}
.cell-poster { display: none; }
/* Title typefaces picked per viewer (titleFontPicker in app.js; same fonts as the share image). */
.paper[data-font="mincho"] .cell-title { font-family: "Shippori Mincho", var(--serif); font-weight: 700; }
.paper[data-font="pen"] .cell-title { font-family: "Zen Kurenaido", var(--sans); font-weight: 400; }
.paper[data-font="maru"] .cell-title { font-family: "Hachi Maru Pop", var(--sans); font-weight: 400; }
/* Title sizes (TITLE_SIZES in app.js); titles that overflow fall back to the standard size in fitText. */
.paper[data-title-size="s"] .cell-title { font-size: 18px; }
.paper[data-title-size="l"] .cell-title { font-size: 27px; }
.paper[data-title-size="xl"] .cell-title { font-size: 32px; }
.paper.with-posters[data-title-size="s"] .cell-title { font-size: 16px; }
.paper.with-posters[data-title-size="l"] .cell-title { font-size: 24px; }
.paper.with-posters[data-title-size="xl"] .cell-title { font-size: 28px; }
/* Title colours (TITLE_COLORS in app.js). */
.paper[data-title-color="red"] .cell-title { color: #b8261f; }
.paper[data-title-color="blue"] .cell-title { color: #1f4fa3; }
.paper[data-title-color="green"] .cell-title { color: #2d6a3a; }
.paper[data-title-color="purple"] .cell-title { color: #6a3d99; }
.paper[data-title-color="brown"] .cell-title { color: #7a4a24; }
/* "◯◯ の30本" under the heading (OWNER_H in src/share-image.mjs). */
.paper-owner { flex: none; height: 32px; margin: 0; font-size: 24px; line-height: 32px; text-align: center; white-space: nowrap; overflow: hidden; }
.paper-foot { flex: none; display: flex; justify-content: center; margin-top: 20px; font-size: 15px; color: #555; letter-spacing: .04em; height: 20px; }

/* Poster variant: poster on the left, title beside it. */
.paper.with-posters .cell-box:not(.is-empty) { justify-content: flex-start; padding: 6px 12px 6px 6px; }
.paper.with-posters .cell-poster:not([hidden]) { display: block; height: 100%; aspect-ratio: 2 / 3; width: auto; object-fit: cover; flex: none; background: #ddd; }
.paper.with-posters .cell-title { text-align: left; font-size: 20px; }
/* でかポスター (data-poster="big"): the poster fills the box, the title sits on a 70% paper band at the bottom. */
.paper.with-posters[data-poster="big"] .cell-box:not(.is-empty) { position: relative; padding: 0; background: #d9d6cd; align-items: flex-end; }
.paper.with-posters[data-poster="big"] .cell-poster:not([hidden]) { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
.paper.with-posters[data-poster="big"] .cell-box:not(.is-empty) .cell-title {
  position: relative; width: 100%; max-height: calc(2 * 1.3em + 12px); padding: 6px 10px; background: rgb(246 245 240 / .7);
}

/* ---------- one creator's posts ---------- */
.creator-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.creator-stats strong { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-right: 2px; }
.creator-h { font-size: 16px; font-weight: 600; margin: 28px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.post-list.creator-list { margin-top: 0; border-top: 0; }
.creator-repeats { list-style: none; margin: 0; padding: 0; }
.repeat-item { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--soft-line); text-decoration: none; }
.repeat-item:hover { background: var(--selected); }
.repeat-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.repeat-title { font-weight: 700; overflow-wrap: anywhere; }
.repeat-qs { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.repeat-count { flex: none; font-size: 13px; color: var(--muted); }
.creator-link { margin: -4px 0 8px; font-size: 14px; }

/* ---------- publish / public page ---------- */
.publish, .owner-actions, .cta { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.publish h2, .owner-actions h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.publish-form label { display: block; font-size: 14px; margin-bottom: 4px; }
.required-mark { margin-left: 8px; padding: 1px 6px; border-radius: 2px; background: var(--ink); color: var(--accent-ink); font-size: 11px; vertical-align: 1px; }
.publish-row input[aria-invalid="true"] { border-color: var(--error); }
.publish-form .x-handle-label { margin-top: 16px; }
.optional-mark { margin-left: 8px; padding: 0 5px; border: 1px solid var(--soft-line); border-radius: 2px; color: var(--muted); font-size: 11px; vertical-align: 1px; }
#x-handle { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff; font-size: 16px; }
.owner-x { margin: -8px 0 8px; }
.owner-x-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px;
}
.owner-x-link:hover { background: var(--selected); }
.owner-x-link svg { flex: none; }
.publish-row { display: flex; gap: 8px; }
.publish-done { margin-top: 8px; min-width: 160px; }
.publish-row input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff; font-size: 16px;
}
.button.danger { background: var(--error); border-color: var(--error); color: #fff; }
.button.danger:hover { background: #8f1e18; }
.confirm-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--error); background: var(--card); }
.confirm-message { margin: 0 0 10px; font-size: 14px; }
.confirm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.confirm-row .button { min-height: 40px; padding: 0 16px; font-size: 14px; }
.confirm-panel .error { margin: 8px 0 0; font-size: 13px; }
.confirm-panel .error:empty { display: none; }
.button.subtle { border-color: var(--soft-line); color: var(--muted); margin-top: 8px; }
/* public page: poster grid */
.film-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
.film { min-width: 0; display: flex; flex-direction: column; }
/* Line up prompts, posters and titles across each row even when a prompt wraps to 3 lines. */
@supports (grid-template-rows: subgrid) {
  .film-grid { row-gap: 0; }
  .film { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; padding-bottom: 24px; }
  .film-body { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .film-q { min-height: 0; }
}
/* Prompts link to everyone's picks for that prompt: always underlined, with an arrow, so they read as links. */
.film-q {
  display: block; min-height: 2.6em; margin-bottom: 6px; font-size: 13px; font-weight: 700; line-height: 1.3;
  text-decoration: underline; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.film-q::after { content: "›"; margin-left: .25em; color: var(--muted); font-weight: 400; text-decoration: none; display: inline-block; }
.film-q:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.film-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.film-body { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
a.film-body:hover .film-title { text-decoration: underline; }
a.film-body:hover .film-art { opacity: .9; }
.film-art { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--soft-line); border-radius: 3px; }
.film-art.is-empty, .film-art.no-poster {
  display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 13px; color: var(--muted);
}
.film-art.is-empty { background: none; border: 1px dashed var(--soft-line); }
.film-art.no-poster { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.film-title { display: block; margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.film-meta { margin: 2px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 359px) { .film-grid { column-gap: 8px; } .film-q { font-size: 12px; } .film-title { font-size: 14px; } }

.save-image { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.save-image h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.save-image-body { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 12px; }
.image-thumb-link { flex: none; display: block; width: min(100%, 300px); }
.image-thumb { width: 100%; aspect-ratio: 2 / 3; background: var(--soft-line); border: 1px solid var(--soft-line); }
.save-image-tools { flex: 1 1 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.share .button { flex: 1 1 auto; }
.copy-status { flex-basis: 100%; font-size: 13px; color: var(--muted); min-height: 1.4em; }
.owner-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.owner-row .button.subtle { margin-top: 0; }
.cta p { margin: 0 0 8px; }

/* ---------- origin post (home) ---------- */
.origin { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--soft-line); }
.origin h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.origin .twitter-tweet { margin: 16px auto 0; }
blockquote.twitter-tweet { padding: 16px; border: 1px solid var(--soft-line); background: var(--card); }

/* ---------- movie page ---------- */
.movie-head { display: flex; gap: 16px; align-items: flex-start; padding: 24px 0 8px; }
.movie-head-body { min-width: 0; }
.movie-title { margin: 2px 0 4px; font-size: clamp(22px, 5.6vw, 28px); line-height: 1.35; overflow-wrap: anywhere; }
.movie-head .meta { margin: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.movie-tmdb { display: inline-block; margin-top: 8px; font-size: 13px; }
.movie-sum { margin: 4px 0 16px; font-size: 14px; }
.movie-sum strong { font-family: var(--serif); font-size: 22px; margin: 0 2px; }
.by-q { border-top: 1px solid var(--line); padding: 12px 0 8px; }
.by-q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.by-q-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.by-q-head h2 a { text-decoration: none; }
.by-q-head h2 a:hover { text-decoration: underline; }
.by-q-no { font-family: var(--serif); color: var(--muted); margin-right: 6px; }
.by-q-count { flex: none; font-size: 13px; color: var(--muted); }
.by-q-count strong { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-right: 2px; }
.pickers { list-style: none; margin: 0; padding: 0; }
.picker { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--soft-line); text-decoration: none; font-size: 15px; }
.pickers li:last-child .picker { border-bottom: 0; }
.picker:hover { background: var(--selected); }
.picker-name { min-width: 0; overflow-wrap: anywhere; }
.picker-date { flex: none; font-size: 12px; color: var(--muted); }
.picker-date::after { content: " ›"; }
.pickers-more { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }

/* ---------- footer (TMDB attribution, maker) ---------- */
.site-footer { max-width: 680px; margin: 0 auto; padding: 20px 16px 40px; border-top: 1px solid var(--soft-line); font-size: 12px; color: var(--muted); line-height: 1.8; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--ink); }
.footer-credits { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.footer-credits img { width: 80px; height: auto; }
.footer-notice { font-size: 11px; margin-top: 4px !important; }
.footer-home { margin-top: 16px !important; text-align: center; font-size: 13px; }
/* The question page fills the screen; its footer would sit off-screen, so hide it there. */
/* Sister-site ad on the public page. */
.sister-promo { margin-top: 32px; padding: 16px; border: 1px solid var(--soft-line); background: var(--card); display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px 12px; align-items: start; }
.sister-promo-shot img { width: 100%; height: auto; border: 1px solid var(--soft-line); border-radius: 4px; }
/* Phones: the button spans the card under the image and text, so the image can be wider. */
.sister-promo-button { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .sister-promo { padding: 20px; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px 24px; }
  .sister-promo-shot { grid-row: 1 / 3; }
  .sister-promo-title { font-size: 20px; }
  .sister-promo-button { grid-column: 2; justify-self: start; }
}
@media (max-width: 359px) { .sister-promo { grid-template-columns: 1fr; } .sister-promo-shot { max-width: 180px; } }
.sister-promo p { margin: 0; }
.sister-promo-label { font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.sister-promo-title { font-family: var(--serif); font-weight: 700; font-size: 17px; white-space: nowrap; margin-top: 2px !important; }
.sister-promo-copy { font-size: 14px; color: var(--muted); margin-top: 6px !important; }
.footer-sister { margin-top: 12px !important; }
main.layout-fixed + .site-footer { display: none; }

/* ---------- question page: fixed top and bottom, only results scroll ---------- */
main.layout-fixed {
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
}
.layout-fixed .site-header { padding: 10px 0 8px; flex: none; }
.layout-fixed .brand { font-size: 20px; }
.layout-fixed .site-nav { display: none; }
.q-top { flex: none; }
.layout-fixed .question { padding: 10px 0 0; }
.layout-fixed .question-text { margin: 0 0 8px; font-size: clamp(19px, 5vw, 26px); }
.layout-fixed .selected { min-height: 0; }
.layout-fixed .selected-empty { margin: 12px 14px; }
.layout-fixed .selected-card { padding: 8px 4px 8px 8px; align-items: center; }
.layout-fixed .selected-card .poster-md { width: 44px; height: 66px; }
.layout-fixed .selected-title { font-size: 16px; }
.layout-fixed .save-status { min-height: 1.4em; margin: 2px 0; font-size: 12px; }
.layout-fixed .search { padding-bottom: 8px; }
.q-results {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--soft-line); margin: 0 -16px; padding: 0 16px 16px;
}
.q-results:focus { outline: none; }
.results-hint { color: var(--muted); font-size: 14px; margin: 16px 0; }
.layout-fixed .search-status:empty { display: none; }
.layout-fixed .step-nav { position: static; margin: 0 -16px; flex: none; }
.progress-text { align-items: center; gap: 12px; }
.progress-text .filled { margin-left: auto; }
.jump-open {
  min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--card);
  font-size: 13px; cursor: pointer;
}
.jump-open:hover { background: var(--selected); }

/* Short screens (e.g. iPhone SE): tighten the fixed area further. */
@media (max-height: 700px) {
  .layout-fixed .site-header { display: none; }
  .layout-fixed .question-no { display: none; }
  .layout-fixed .question { padding-top: 6px; }
  .layout-fixed .selected-label { display: none; }
  .layout-fixed .selected-card { padding: 6px 4px 6px 6px; }
  .layout-fixed .selected-card .poster-md { width: 34px; height: 51px; }
  .layout-fixed .selected-body .meta { display: none; }
  .layout-fixed .selected-empty { margin: 8px 12px; font-size: 13px; }
}

/* ---------- question index dialog ---------- */
.jump-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: min(80dvh, 720px); padding: 0;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink);
}
.jump-dialog[open] { display: flex; flex-direction: column; }
.jump-dialog::backdrop { background: rgb(0 0 0 / .4); }
.jump-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 16px; border-bottom: 1px solid var(--line); }
.jump-head h2 { margin: 0; font-size: 16px; }
.jump-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.jump-row { display: flex; gap: 12px; align-items: center; padding: 8px 16px; text-decoration: none; border-bottom: 1px solid var(--soft-line); }
.jump-row:hover { background: var(--selected); }
.jump-row[aria-current] { background: var(--selected); box-shadow: inset 3px 0 0 var(--ink); }
.jump-no {
  flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--soft-line); font-family: var(--serif); font-weight: 700; background: var(--card);
}
.jump-row.is-filled .jump-no { background: var(--ink); color: var(--accent-ink); border-color: var(--ink); }
.jump-body { min-width: 0; display: flex; flex-direction: column; }
.jump-q { font-size: 12px; color: var(--muted); }
.jump-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-title.is-empty { color: var(--muted); font-weight: 400; }