/* The review screen (views/review.js) and the story reader (components/reader.js, also used read-only
   by the owner's story view). Phones: one pane at a time; from 1024 px the reader and a sticky side panel. */

/* ---------------------------------------------------------------- reader: cards and pages */

.reader { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.reader .rd-story, .reader .rd-page { scroll-margin-top: calc(var(--topbar-h) + var(--rv-head-h, 0px) + 12px); }
.reader .w, .reader .rd-block {
  scroll-margin-top: calc(var(--topbar-h) + var(--rv-head-h, 0px) + 24px);
  scroll-margin-bottom: 96px;
}

.rd-story { overflow: hidden; }
.rd-story-body { display: grid; gap: 12px; padding: 18px 20px 20px; min-width: 0; }
.rd-cover { aspect-ratio: 4 / 3; margin: 12px 12px 0; border-radius: var(--r-scene); }
@media (min-width: 600px) {
  .rd-story { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
  .rd-story > .rd-cover { margin: 16px 0 16px 16px; width: auto; } /* width: 100% + margin overflowed the column */
  .rd-story > .rd-story-body:only-child { grid-column: 1 / -1; }
}
.rd-title { font-size: 26px; line-height: 32px; }
.rd-stats { color: var(--ink-soft); font-size: 14px; line-height: 19px; margin-top: -6px; }
.rd-summary.story-text { font-size: 18px; line-height: 27px; }
.rd-chips { gap: 6px; }
.rd-sub {
  margin-bottom: 8px;
  font: 800 14px/20px var(--font-ui); letter-spacing: 0; color: var(--ink-soft);
}
.rd-sub-note { font-weight: 600; }
.rd-pairs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-pair {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
  max-width: 100%; padding: 6px 12px; border-radius: 999px; background: var(--sunken);
}
.rd-pair-main { font-family: var(--font-story); font-size: 18px; line-height: 26px; }
.rd-pair-other { color: var(--ink-soft); font-size: 14px; }
.rd-talk { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.rd-talk-q { font-family: var(--font-story); font-size: 18px; line-height: 26px; }
.rd-heart p { color: var(--ink-soft); }

.rd-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-jump .chip { font-size: 14px; }

.rd-page { display: grid; gap: 10px; min-width: 0; }
.rd-branch {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 4px 0;
  font-size: 18px; line-height: 24px;
}
.rd-branch .ic { flex: none; }
.rd-page-card { padding: 12px; min-width: 0; }
.rd-page-body { padding: 10px 8px 6px; display: grid; gap: 0; min-width: 0; }
.rd-page-label { font: 800 13px/18px var(--font-ui); color: var(--ink-soft); margin-bottom: 6px; }
.rd-page-label:focus-visible { outline-offset: 4px; border-radius: 4px; }
.rd-text { white-space: pre-line; }
.rd-speakers { margin-top: 8px; font-size: 14px; line-height: 19px; color: var(--ink-soft); }

/* Paintings: 16:9, rounded, tap for the full view. */
.rd-art {
  appearance: none; border: 0; margin: 0; padding: 0;
  display: block; width: 100%; overflow: hidden;
  background: var(--sunken); cursor: zoom-in;
}
.rd-art img { width: 100%; height: 100%; object-fit: cover; }
.rd-art:focus-visible { outline-offset: 3px; }
.rd-scene { aspect-ratio: 16 / 9; border-radius: var(--r-scene); }
.rd-noart {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 10px 16px;
  border-radius: var(--r-scene); border: 2px dashed var(--hairline);
  background: var(--cream); color: var(--ink-soft);
  font-size: 14px; line-height: 19px; text-align: center;
}
.rd-noart .ic { color: var(--hairline-strong); --ic-b: var(--hairline); }
.rd-scene.rd-noart, .rd-cover.rd-noart { aspect-ratio: auto; }

/* Choices: two quiet boxes. Ending and "continues at". */
.rd-choices { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 600px) { .rd-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-choice {
  display: grid; align-content: start; gap: 2px;
  padding: 10px 14px 4px; border-radius: var(--r-btn);
  background: var(--cream); border: 1.5px solid var(--hairline);
  min-width: 0;
}
.rd-choice-label { font: 800 13px/18px var(--font-ui); color: var(--ink-soft); }
.rd-choice-text { font-family: var(--font-story); font-size: 19px; line-height: 27px; }
.rd-goto {
  appearance: none; border: 0; margin: 0 0 0 -8px; padding: 0 8px;
  justify-self: start; min-height: 44px; border-radius: 10px;
  background: transparent; color: var(--primary-edge);
  font: 800 14px/1.2 var(--font-ui); cursor: pointer; text-align: left;
}
.rd-goto:hover { background: var(--sunken); }
.rd-goes { margin-top: 8px; }
.rd-ending {
  margin-top: 14px; padding: 10px 14px; border-radius: var(--r-btn);
  background: var(--warn-bg);
}
.rd-ending-label { font: 800 14px/20px var(--font-ui); color: var(--warn); }
.rd-ending-title { font-family: var(--font-story); font-size: 19px; line-height: 27px; }
.rd-missing { color: var(--ink-soft); font: 600 15px/21px var(--font-ui); }

/* ---------------------------------------------------------------- reader: words */

.rd-block { border-radius: 6px; }
.rd-block:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.w {
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .reader:not(.is-ro) .w:hover { background: var(--sunken); }
}
.reader.is-ro .w { cursor: default; }
.reader.is-ro .w.has-note, .reader .w.heat { cursor: pointer; }
.w:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Noted words: mustard mark (darker where notes overlap) plus an underline, so colour is not the only cue. */
.w.has-note {
  background: var(--word-mark);
  text-decoration: underline;
  text-decoration-color: var(--mustard);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.reader:not(.is-ro) .w.has-note:hover { background: rgba(230, 181, 74, .75); }
.w.note-2 { background: rgba(230, 181, 74, .78); }
.w.note-3 { background: var(--mustard); }
/* Owner heat map: how many reviewers noted a word. */
.w.heat-1 { background: rgba(230, 181, 74, .40); }
.w.heat-2 { background: rgba(230, 181, 74, .80); }
.w.heat-3 { background: rgba(217, 113, 78, .55); }
.w.heat { text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.w.heat-3 { text-decoration-color: var(--primary-edge); }
/* The current selection (the note editor is open on it). */
.w.is-sel, .reader:not(.is-ro) .w.is-sel:hover {
  background: var(--primary-bg);
  box-shadow: inset 0 -3px 0 var(--primary);
}
.w.is-flash { animation: rd-flash 1.6s ease-out; }
@keyframes rd-flash {
  0%, 35% { background: var(--primary); color: #FFFFFF; }
  100% { }
}

/* ---------------------------------------------------------------- full-screen painting */

html.iv-open { overflow: hidden; }
.img-viewer {
  position: fixed; inset: 0; z-index: calc(var(--z-sheet) + 5);
  display: flex; flex-direction: column;
  background: rgba(28, 25, 36, .94);
}
.iv-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  color: #FFFFFF;
}
.iv-cap { flex: 1 1 auto; min-width: 0; font-weight: 800; }
.iv-stage {
  flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center;
  padding: 4px 8px max(16px, env(safe-area-inset-bottom));
}
.iv-img {
  max-width: 100%; max-height: 100%; max-height: calc(100dvh - 88px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 12px;
}

/* ---------------------------------------------------------------- review: header */

.rv { --rv-head-h: 64px; }
.rv-head {
  position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}
.rv-head-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 6px max(var(--gutter), env(safe-area-inset-right)) 8px max(var(--gutter), env(safe-area-inset-left));
  display: grid; gap: 6px;
}
.rv-head-row { display: flex; align-items: center; gap: 8px; min-height: 48px; min-width: 0; }
.rv-back {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; min-width: 44px; padding: 0 12px 0 4px; margin-left: -6px;
  border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 800;
}
.rv-back:hover { color: var(--ink); background: var(--sunken); }
.rv-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 20px; line-height: 26px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-head-end { flex: none; display: flex; align-items: center; gap: 8px; }
.rv-lang-wrap { display: flex; align-items: center; gap: 8px; }
.rv-lang-label { font-weight: 800; font-size: 14px; line-height: 19px; color: var(--ink-soft); white-space: nowrap; }
.rv-lang .seg-btn { padding: 0 10px; font-size: 14px; }
@media (max-width: 599px) {
  .rv-head-in { padding: 4px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); gap: 4px; }
  .rv-head-row { gap: 4px; }
  .rv-back { margin-left: 0; padding: 0; justify-content: center; }
  .rv-back-label, .rv-lang-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rv-title { font-size: 17px; line-height: 22px; }
  /* The save badge keeps only its icon (the text is still announced). */
  .rv-head .save-badge { font-size: 0; gap: 0; }
  .rv-lang { padding: 2px; gap: 0; }
  .rv-lang .seg-btn { padding: 0 4px; min-width: 44px; font-size: 13px; }
}

/* ---------------------------------------------------------------- review: layout */

.rv-wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px max(var(--gutter), env(safe-area-inset-right)) 64px max(var(--gutter), env(safe-area-inset-left));
}
.rv-banners { display: grid; gap: 10px; margin-bottom: 16px; }
.rv-banners:empty { display: none; }
.rv-body { display: block; min-width: 0; }
.rv-main, .rv-side { min-width: 0; }
.rv-side { display: flex; flex-direction: column; gap: 12px; }
.rv-side-scroll { min-width: 0; }

@media (min-width: 1024px) {
  .rv-body {
    display: grid; align-items: start; gap: 32px;
    grid-template-columns: minmax(0, 720px) 380px;
    justify-content: space-between;
  }
  .rv-side {
    position: sticky;
    top: calc(var(--topbar-h) + var(--rv-head-h) + 16px);
    max-height: calc(100vh - var(--topbar-h) - var(--rv-head-h) - 32px);
  }
  .rv-side-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -6px; padding: 2px 6px 16px;
  }
}

/* Phones and tablets: the floating "Puanla" button over the reading pane. */
.rv-fab {
  position: fixed; z-index: var(--z-sticky);
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}
.rv-fab .btn-face { box-shadow: var(--shadow-pop); }
.rv.is-narrow .rv-main { padding-bottom: 72px; }
/* Room to scroll the chosen words above the note sheet. */
.rv.is-narrow.is-editing .rv-main { padding-bottom: 65vh; }
/* The tabs are no use while the note sheet is open (switching closes it): more room for the text. */
.rv.is-narrow.is-editing .rv-tabs { display: none; }

/* Short screens (landscape phones): the header scrolls away with the page (so does the top bar,
   app.css), so the sticky offsets drop to the screen edge. */
@media (max-height: 520px) {
  .rv-head { position: static; }
  .reader .rd-story, .reader .rd-page { scroll-margin-top: 12px; }
  .reader .w, .reader .rd-block { scroll-margin-top: 24px; }
}
@media (min-width: 1024px) and (max-height: 520px) {
  .rv-side { top: 16px; max-height: calc(100vh - 32px); }
}

/* ---------------------------------------------------------------- review: panes */

.rv-pane { display: grid; gap: 16px; align-content: start; min-width: 0; }
.rv-pane-title { font-size: 20px; line-height: 25px; }

.sc-card { display: grid; gap: 10px; min-width: 0; }
.sc-h { font-size: 20px; line-height: 25px; }
.sc-help { color: var(--ink-soft); font-size: 14px; line-height: 20px; }
.sc-overall .stars { margin-left: -4px; }
.sc-note { margin-top: 4px; }
.sc-aspects { list-style: none; margin: 0; padding: 0; display: grid; }
.sc-aspect { display: grid; gap: 4px; padding: 14px 0 10px; border-top: 1px solid var(--hairline); min-width: 0; }
.sc-aspect:first-child { border-top: 0; padding-top: 2px; }
.sc-asp-h { font: 800 16px/22px var(--font-ui); letter-spacing: 0; }
.sc-aspect .stars { margin-left: -6px; }
.sc-aspect > .btn-quiet { justify-self: start; margin-left: -12px; }
.sc-asp-text { margin-top: 4px; }
.sc-ro-note {
  white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px;
  border-radius: 12px; background: var(--sunken);
}
.sc-submit { display: grid; gap: 8px; }
.sc-sent { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 800; font-size: 17px; }

.nl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nl-item {
  display: grid; gap: 2px; padding: 4px 6px 4px;
  background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow);
  min-width: 0;
}
.nl-go {
  appearance: none; border: 0; margin: 0;
  display: grid; gap: 2px; min-height: 44px; padding: 8px 10px;
  border-radius: 12px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.nl-go:hover { background: var(--sunken); }
.nl-static { cursor: default; }
.nl-static:hover { background: transparent; }
.nl-where { font: 800 13px/18px var(--font-ui); color: var(--ink-soft); }
.ne-quote { font-family: var(--font-story); font-weight: 400; font-size: 18px; line-height: 26px; color: var(--ink); overflow-wrap: anywhere; }
.nl-note { padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; } /* a pasted link must not widen the pane */
.nl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; padding-left: 10px; }
.nl-meta { color: var(--ink-soft); font-size: 13px; line-height: 18px; }
.nl-actions { display: inline-flex; flex-wrap: wrap; }
.nl-orphans { display: grid; gap: 8px; margin-top: 8px; }
.nl-sub { font-size: 18px; line-height: 23px; }
.nl-hint { color: var(--ink-soft); font-size: 14px; line-height: 20px; }

/* ---------------------------------------------------------------- note editor and word notes */

/* max-content rows: on short screens the body scrolls instead of squeezing the quote to nothing. */
.note-pop .popover-body, .note-pop .sheet-body { display: grid; gap: 10px; grid-auto-rows: max-content; }
.note-pop .ne-quote {
  max-height: 128px; overflow-y: auto;
  padding: 8px 12px; border-left: 4px solid var(--mustard);
  border-radius: 4px 12px 12px 4px; background: var(--sunken);
}
.ne-where { font: 800 13px/18px var(--font-ui); color: var(--ink-soft); margin-top: -4px; }
.ne-text { min-height: 88px; }
.ne-hint { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.ne-warn { font-size: 14px; line-height: 19px; font-weight: 700; color: var(--bad); }
.nh-list { display: grid; gap: 12px; }
.nh-item { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.nh-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.nh-meta { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.nh-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -12px; }