/* The preview app's pages and the film shell. Same palette as the film (concrete, anthracite; red only as signal). */
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(/static/fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-600.woff2) format('woff2'); }
:root {
  --concrete: #e3e5e2; --record: #f7f8f6; --steel: #cdd2d3; --steel-side: #9ea6a9; --line: #c3c9ca;
  --anthracite: #2e3336; --graphite: #5c6569; --signal: #d2051e;
  font: 500 17px/1.5 Barlow, system-ui, sans-serif; color: var(--anthracite);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--concrete); }
a { color: var(--anthracite); text-underline-offset: 3px; }

/* Pages: one centred card */
.page { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 20px; padding: 32px 16px; }
.card { width: min(520px, 100%); background: var(--record); border: 1.5px solid var(--anthracite); border-radius: 18px; padding: 40px 44px;
  box-shadow: 0 2px 0 var(--steel-side), 0 18px 48px rgb(0 0 0 / 0.12); }
.card.wide { width: min(760px, 100%); }
.kicker { margin: 0 0 6px; font: 600 13px Barlow; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
h1 { margin: 0 0 10px; font: 600 32px/1.2 Barlow; }
h2 { margin: 0 0 10px; font: 600 24px/1.25 Barlow; }
.lead { margin: 0 0 22px; font-size: 18px; color: var(--graphite); }
.note { margin: 18px 0 0; font-size: 14px; color: var(--graphite); }
.error { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--signal); background: #fbe9eb; border-radius: 4px; }
.list { padding-left: 20px; }
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
label { display: grid; gap: 6px; font: 600 14px Barlow; }
input, textarea, select { font: 500 17px Barlow; padding: 11px 13px; border: 1.5px solid var(--steel-side); border-radius: 8px; background: #fff; color: var(--anthracite); }
input:focus, textarea:focus { outline: 3px solid rgb(46 51 54 / 0.25); border-color: var(--anthracite); }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 13px 26px; border: 0; border-radius: 999px; background: var(--anthracite);
  color: #fff; font: 600 17px Barlow; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 #15191b; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #15191b; }
.btn.secondary { background: var(--record); color: var(--anthracite); border: 1.5px solid var(--anthracite); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--anthracite); outline-offset: 3px; }
.alt { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.alt summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.alt form { margin-top: 14px; }
.foot { font-size: 13px; color: var(--graphite); }

/* Shell: the film fills the window; presence chip, warning, and ended state sit above it */
.shell { height: 100vh; overflow: hidden; }
#film { position: fixed; inset: 40px 0 0 0; width: 100%; height: calc(100% - 40px); border: 0; transition: filter 0.6s, opacity 0.6s; }
#film.gone { filter: blur(18px) grayscale(1); opacity: 0.25; pointer-events: none; }
/* Presence: a slim bar above the film, always visible, never over it */
.chip { position: fixed; z-index: 5; inset: 0 0 auto 0; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 18px;
  background: var(--anthracite); color: #fff; font: 600 13px Barlow; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #5fbf7f; }
.chip #chip-text { margin-right: auto; }
.chip button, .chip a { border: 0; background: none; padding: 5px 10px; border-radius: 999px; font: 600 13px Barlow; color: #d5d9da; cursor: pointer; text-decoration: none; }
.chip button:hover, .chip a:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.chip .invite-btn { background: #43b871; color: #fff; padding: 6px 14px; }
.chip .invite-btn:hover { background: #5fcb86; color: #fff; }
/* Sharing call to action: below the bar, top right; first visit and at the end of the film */
.share { position: fixed; z-index: 6; top: 52px; right: 16px; width: min(380px, calc(100% - 32px)); padding: 20px 22px; border-radius: 14px;
  background: var(--record); border: 1.5px solid var(--anthracite); box-shadow: 0 14px 36px rgb(0 0 0 / 0.18); }
.share::before { content: ''; position: absolute; top: -8px; right: 150px; width: 14px; height: 14px; background: var(--record);
  border-left: 1.5px solid var(--anthracite); border-top: 1.5px solid var(--anthracite); transform: rotate(45deg); }
.share h2 { font-size: 19px; margin-bottom: 6px; }
.share p { margin: 0 0 14px; font-size: 15px; color: var(--graphite); }
.share .btn { padding: 9px 18px; font-size: 15px; }
.modal, .ended { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgb(46 51 54 / 0.35); }
.ended { background: rgb(227 229 226 / 0.6); }
[hidden] { display: none !important; }
.modal-card { width: min(480px, 100%); background: var(--record); border: 1.5px solid var(--anthracite); border-radius: 18px; padding: 32px 36px;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.2); }
.modal-card p { color: var(--graphite); }
.modal-card.done { text-align: center; }
.modal-card.done .row { justify-content: center; margin-top: 8px; }
.tick { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: #43b871; color: #fff; font: 600 30px/1 Barlow; }
.modal-card .error { margin: 0; }
#warn-left { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .card { padding: 28px 22px; } .chip { gap: 4px; padding: 0 6px 0 10px; font-size: 12px; } .chip .dot { display: none; } }

/* Feedback tray: a handle on the right edge; the panel takes the right side and the film shrinks beside it, nothing is covered */
.tray-handle { position: fixed; z-index: 6; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 9px; border: 1.5px solid var(--anthracite); border-right: 0; border-radius: 12px 0 0 12px; background: var(--anthracite); color: #fff; cursor: pointer;
  box-shadow: -4px 6px 18px rgb(0 0 0 / 0.18); }
.tray-handle-t { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 14px Barlow; letter-spacing: 0.04em; }
.tray-handle:hover { background: #15191b; }
.tray-handle .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--signal); font: 600 12px/20px Barlow; }
body.tray-open .tray-handle { display: none; }
body.tray-open #film { width: calc(100% - 400px); }
.tray-hint { position: fixed; z-index: 6; right: 56px; top: calc(50% - 70px); width: 300px; padding: 16px 18px; border-radius: 14px; background: var(--record);
  border: 1.5px solid var(--anthracite); box-shadow: 0 14px 36px rgb(0 0 0 / 0.18); }
.tray-hint p { margin: 0 0 12px; font-size: 15px; color: var(--graphite); }
.tray-hint strong { color: var(--anthracite); }
.tray { position: fixed; z-index: 7; top: 40px; right: 0; bottom: 0; width: 400px; display: flex; flex-direction: column; background: var(--record);
  border-left: 1.5px solid var(--anthracite); box-shadow: -10px 0 30px rgb(0 0 0 / 0.08); }
.tray-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.tray-head h2 { margin: 0; font-size: 20px; }
.tray-close { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--graphite); padding: 0 4px; }
.tray-body { flex: 1; overflow-y: auto; padding: 14px 18px 24px; }
.btn.small { padding: 7px 16px; font-size: 14px; box-shadow: none; }
.link { border: 0; background: none; padding: 0; font: inherit; color: var(--anthracite); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.seg { display: flex; border: 1.5px solid var(--anthracite); border-radius: 999px; overflow: hidden; }
.seg button { flex: 1; border: 0; padding: 7px 8px; background: none; font: 600 13px Barlow; color: var(--anthracite); cursor: pointer; }
.seg button + button { border-left: 1.5px solid var(--anthracite); }
.seg button[aria-checked=true] { background: var(--anthracite); color: #fff; }
.seg.small button { padding: 4px 14px; white-space: nowrap; }
.c-form { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.c-on { margin: 0; font-size: 14px; color: var(--graphite); }
.c-on strong { color: var(--anthracite); }
.c-form textarea { resize: vertical; min-height: 76px; font-size: 16px; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kinds button { padding: 4px 11px; border: 1.5px solid var(--steel-side); border-radius: 999px; background: #fff; font: 600 13px Barlow; color: var(--graphite); cursor: pointer; }
.kinds button[aria-checked=true] { border-color: var(--anthracite); background: var(--anthracite); color: #fff; }
.c-share { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.c-actions { align-items: center; justify-content: space-between; }
.c-who { font-size: 13px; color: var(--graphite); }
.c-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
.c-pins { display: flex; align-items: center; gap: 6px; font: 500 13px Barlow; color: var(--graphite); }
.c-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-empty { color: var(--graphite); font-size: 14px; padding: 8px 0; }
.c-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.c-item.focus { border-color: var(--anthracite); box-shadow: 0 0 0 2px rgb(46 51 54 / 0.15); }
.c-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.c-where { font: 600 13px Barlow; color: var(--anthracite); text-align: left; }
.tag { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--concrete); font: 600 12px Barlow; color: var(--graphite); }
.c-text { margin: 6px 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-by { margin: 0; font-size: 12px; color: var(--graphite); }
.c-by .link { margin-left: 6px; font-size: 12px; }
.c-reply { margin: 10px 0 0 10px; padding: 2px 0 2px 10px; border-left: 3px solid var(--line); }
.c-reply.ours { border-left-color: #43b871; }
.c-reply.new { background: #eef7f1; }
.c-answer { display: flex; gap: 6px; margin-top: 10px; }
.c-answer input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 14px; }
.c-edit { display: grid; gap: 6px; margin: 6px 0; }
/* Tabs and the Ask tab */
.tabs { display: flex; gap: 4px; }
.tabs button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font: 600 17px Barlow; color: var(--graphite); cursor: pointer; }
.tabs button[aria-selected=true] { background: var(--anthracite); color: #fff; }
.tray-body.ask { position: relative; display: flex; flex-direction: column; }
.a-intro { margin: 0 0 14px; font-size: 13px; color: var(--graphite); }
.a-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.a-q { justify-self: end; max-width: 85%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--anthracite); color: #fff; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.a-a { max-width: 92%; padding: 11px 14px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--line); font-size: 15px; }
.a-a p { margin: 0 0 8px; } .a-a p:last-child { margin-bottom: 0; }
.a-a ul { margin: 0 0 8px; padding-left: 20px; }
.a-a.blocked, .a-a.limit { border-left: 3px solid var(--steel-side); }
.a-a.pending { color: var(--graphite); font-style: italic; }
.a-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.a-src button { max-width: 100%; padding: 3px 10px; border: 1px solid var(--steel-side); border-radius: 999px; background: var(--concrete); font: 600 12px Barlow; color: var(--anthracite); cursor: pointer; text-align: left; }
.a-src button:hover { border-color: var(--anthracite); }
.a-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.a-note { margin: 8px 0 0; font-size: 13px; color: var(--graphite); }
.a-sug { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--concrete); font-size: 14px; }
.a-sug p { margin: 0 0 8px; }
.a-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 18px 16px; border-top: 1px solid var(--line); background: var(--record); }
.a-form textarea { flex: 1; resize: none; font-size: 15px; padding: 9px 11px; }
.a-reader { position: fixed; top: 97px; right: 0; bottom: 0; width: 400px; z-index: 8; display: flex; flex-direction: column; padding: 14px 18px; background: var(--record); }
@media (max-width: 900px) { .a-reader { width: 100%; } }
.a-reader-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--line); font-size: 15px; }
.a-reader-body { flex: 1; overflow-y: auto; padding-top: 8px; font-size: 15px; }
.a-reader-body h3, .a-reader-body h4, .a-reader-body h5 { font-size: 16px; margin: 14px 0 6px; }
@media (max-width: 900px) { .tray { width: 100%; } body.tray-open #film { width: 100%; } .tray-hint { right: 52px; width: min(300px, calc(100% - 70px)); } }