/* Page-specific parts: decisions, the scene editor and dialogue lines, the board, the shot table. */

/* decision cards */
.gate { max-width: 60rem; }
.candidate.picked { background: var(--ok-tint); }
.letter { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--action); color: var(--action-ink); font-weight: 700; }
.prose { font-family: var(--script); line-height: 1.7; white-space: pre-wrap; max-width: 62ch; }
.prose-edit { font-family: var(--script); line-height: 1.7; min-height: 18rem; max-width: 62ch; }

/* the scene editor and the dialogue lines */
.editor-wrap #editor { min-height: 22rem; padding: var(--s4) 0; }
.editor-wrap #editor:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.editor-wrap #editor .ProseMirror { outline: none; min-height: 20rem; }
.ProseMirror > * + * { margin-top: var(--s3); }
.heading-line { font-weight: 700; text-transform: uppercase; }
.transition-line { text-align: right; text-transform: uppercase; }
.note-line { color: var(--muted); font-style: italic; }
.line { margin-left: 2.5rem; max-width: 36ch; }
.line-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.speaker { font-family: var(--script); font-weight: 700; text-transform: uppercase; padding: .15rem .4rem; }
.paren { font-family: var(--script); background: none; border-radius: 0; padding: .1rem .25rem; width: 12ch; max-width: 100%; }
.line-text { font-family: var(--script); }

/* the board: episodes are bands, one under the other; the scenes of a band fill rows, image first */
.board { display: flex; flex-direction: column; gap: var(--s4); padding-bottom: var(--s4); }
.column { background: var(--sunk); border-radius: var(--r-md); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); min-height: 8rem; }
.board ol[data-cards] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--s3); }
.scene-card { cursor: default; display: flex; flex-direction: column; gap: .4rem; padding: .6rem; }
.scene-card[draggable="true"] { cursor: grab; }
.scene-card[aria-current="true"] { outline: 2px solid var(--focus); outline-offset: 2px; }
.scene-thumb { display: flex; flex-wrap: wrap; gap: .3rem; text-decoration: none; }
.scene-thumb img, .scene-thumb.empty { display: block; width: 100%; aspect-ratio: 7 / 4; object-fit: cover; border-radius: var(--r-md); background: var(--bg); }
.scene-thumb .stale-frame { width: 100%; }
.scene-card .synopsis { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.board.list ol[data-cards] { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
.board.list .scene-card { flex-direction: row; align-items: center; gap: var(--s4); padding: var(--s2) var(--s3); }
.board.list .scene-thumb { display: none; }
.board.list .scene-card .synopsis { -webkit-line-clamp: 1; flex: 1 1 auto; }
.is-stale { opacity: .45; filter: grayscale(1); }

/* the shot table */
.shot-table { font-size: .9rem; }
.shot-table tr.shot-detail td { background: var(--sunk); }
.shot-preview { padding: var(--s2) 0; }

/* the scene text's own chrome is never selected, so it cannot be dragged or middle-click pasted into the
   text; what this page changed stays visible in the text until the page is left */
.editor-head { user-select: none; -webkit-user-select: none; }
.edit-ins { border-radius: 2px; box-shadow: 0 1px 0 var(--ok); }
.edit-del { user-select: none; -webkit-user-select: none; color: var(--bad); border-radius: 2px; }

/* the versions of a block: one row each, Confronta and Ripristina in the same two columns on every row */
ol.history-rows { display: grid; grid-template-columns: 1fr auto auto; gap: 0 var(--s2); }
.history-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding-block: var(--s2); border-top: 1px solid var(--hair); }
.history-row:first-child { border-top: 0; }
.history-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); min-width: 0; }
.history-row > .button, .history-restore > summary { min-height: 2rem; padding: .25rem .8rem; font-size: .875rem; }
.history-restore > .pop { left: auto; right: 0; max-width: min(22rem, calc(100vw - 2rem)); }
@media (max-width: 40rem) {
  ol.history-rows { grid-template-columns: auto auto 1fr; }
  .history-what { grid-column: 1 / -1; padding-bottom: var(--s1); }
}