/* Default narrative stage. The accepted palette and original sources are preserved. */
body.cinema-ui #reading-space-dialog::backdrop { background: rgb(161 181 172 / 58%); backdrop-filter: blur(12px); }
body.cinema-ui .conflict-stage { scroll-margin-top: 18px; }
body.cinema-ui .conflict-change-thread { display: inline-flex; padding: 5px 0; margin: 0 0 6px; color: #315754; font-size: 11px; background: transparent; min-height: 32px; }
body.cinema-ui .conflict-stage-nav { position: sticky; top: 12px; z-index: 5; background: #cbd8d1; padding-left: 10px !important; padding-right: 10px !important; border-radius: 8px; box-shadow: 0 5px 14px -9px rgb(34 76 66 / 28%); }
body.cinema-ui .conflict-flow {
  width: min(100%, 1120px);
  min-width: 0;
  margin: 0 auto 28px;
}
body.cinema-ui .conflict-flow > header:not(.conflict-narrative-header) {
  display: block;
  padding-bottom: 12px;
  border-bottom-color: rgb(73 106 99 / 25%);
}
body.cinema-ui .conflict-flow > header:not(.conflict-narrative-header) h2 {
  color: #2e5351;
  font: 400 clamp(29px, 2.6vw, 36px)/1.16 var(--serif);
  letter-spacing: -.7px;
  margin: 6px 0 7px;
}
body.cinema-ui .conflict-flow > header:not(.conflict-narrative-header) p {
  max-width: 850px;
  color: #3b5755;
  font-size: 12px;
  line-height: 1.6;
  margin: 5px 0 0;
}
body.cinema-ui .conflict-featured {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 16px 0 17px;
}
body.cinema-ui .conflict-featured button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  min-height: 82px;
  min-width: 0;
  padding: 13px 15px;
  overflow-wrap: anywhere;
  text-align: left;
  color: #315754;
  background: linear-gradient(135deg, #d6ded7, #c5d6ce);
  border: 1px solid #91b0a0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgb(219 230 216 / 55%), 0 9px 22px -18px rgb(35 77 71 / 31%);
  font: 400 18px/1.23 var(--serif);
  letter-spacing: -.2px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
body.cinema-ui .conflict-featured button :is(strong, .conflict-featured-title) {
  font: 400 18px/1.23 var(--serif);
  letter-spacing: -.2px;
  color: #315754;
}
body.cinema-ui .conflict-featured button :is(small, .conflict-featured-caption) {
  display: block;
  color: #3b5755;
  font: 400 11px/1.45 var(--font);
  letter-spacing: 0;
}
body.cinema-ui .conflict-featured button:hover {
  background: #cbded0;
  border-color: #719d84;
  box-shadow: inset 0 1px 0 #dbe5d7, 0 13px 23px -19px rgb(28 77 67 / 35%);
}
body.cinema-ui .conflict-featured button:is(.active, [aria-pressed="true"], [aria-current="step"]) {
  color: #244c44;
  background: linear-gradient(125deg, #d1dfce, #bbd0be);
  border-color: #789a7c;
  box-shadow: inset 0 -2px 0 #a08664, 0 10px 22px -18px rgb(40 76 62 / 33%);
}

/* The section controls sit above the selected source exchange. */
body.cinema-ui .conflict-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 22px 24px 24px;
  color: #294e4e;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(173 199 203 / 17%), transparent 50%),
    linear-gradient(140deg, rgb(209 223 213 / 76%), rgb(188 208 199 / 57%));
  border: 1px solid rgb(121 154 138 / 58%);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgb(222 232 218 / 55%), 0 25px 46px -35px rgb(34 76 66 / 34%);
}
body.cinema-ui .conflict-stage > :is(header, .conflict-narrative-header) {
  display: block;
  margin: 0 0 11px;
  padding: 0;
  border: 0;
}
body.cinema-ui .conflict-stage > :is(header, .conflict-narrative-header) :is(h2, h3) {
  color: #2c5350;
  font: 400 clamp(27px, 2.4vw, 32px)/1.17 var(--serif);
  letter-spacing: -.6px;
  margin: 4px 0 8px;
  overflow-wrap: anywhere;
}
body.cinema-ui .conflict-stage > :is(header, .conflict-narrative-header) .eyebrow { color: #3b5755; font-size: 11px; }
body.cinema-ui .conflict-context-overview {
  margin: 8px 0 11px;
  padding: 0;
  color: #3b5755;
  font-size: 13px;
  line-height: 1.7;
}
body.cinema-ui .conflict-context-overview > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 6px 0;
  color: #3b5755;
  cursor: pointer;
  font: 500 12px/1.5 var(--font);
  list-style: none;
}
body.cinema-ui .conflict-context-overview > summary::-webkit-details-marker { display: none; }
body.cinema-ui .conflict-context-overview > summary::before { content: "+"; font: 400 19px/1 var(--font); color: #547a65; }
body.cinema-ui .conflict-context-overview[open] > summary::before { content: "−"; }
body.cinema-ui .conflict-context-overview :is(p, .conflict-perspective, .conflict-analysis) {
  max-width: none;
  margin: 8px 0 13px;
  color: #3b5755;
  font-size: 13px;
  line-height: 1.7;
}
body.cinema-ui .conflict-stage-nav {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  margin: 9px 0 16px;
  padding: 11px 0 14px;
  border-top: 1px solid #a5beb1;
  border-bottom: 1px solid #a5beb1;
}
body.cinema-ui .conflict-stage-nav :is(button, a) {
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  color: #315754;
  background: linear-gradient(130deg, #d5e1d3, #bfd4c3);
  border-color: #90af96;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
body.cinema-ui .conflict-stage-nav :is(span, output) {
  color: #3b5755;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body.cinema-ui .conflict-stage .conflict-sequence-tools:not(.conflict-stage-nav) {
  margin: 5px 0 12px;
  padding: 0;
  gap: 9px 13px;
}
body.cinema-ui .conflict-stage .conflict-sequence-tools:not(.conflict-stage-nav) .button { min-height: 40px; font-size: 11px; padding: 8px 11px; }
body.cinema-ui .conflict-stage .conflict-date-index { max-height: 270px; margin-top: 10px; margin-bottom: 16px; }
body.cinema-ui .conflict-stage .conflict-sequence {
  gap: 16px;
  margin: 0;
  padding: 0;
}
body.cinema-ui .conflict-stage .conflict-sequence::before { display: none; }
body.cinema-ui .conflict-stage .conflict-event {
  margin: 0;
  padding: 20px 0 3px;
  border: 0;
  border-radius: 0;
  color: #294e4e;
  background: transparent;
  box-shadow: none;
}
body.cinema-ui .conflict-stage .conflict-event::before { display: none; }
body.cinema-ui .conflict-stage .conflict-event-meta { color: #3b5755; font-size: 12px; gap: 8px 19px; }
body.cinema-ui .conflict-stage .conflict-event :is(time, .conflict-event-date, .conflict-event-sender) { color: #3b5755; font-size: 12px; }
body.cinema-ui .conflict-stage .conflict-event-title {
  color: #2b5350;
  font: 400 clamp(28px, 2.4vw, 33px)/1.2 var(--serif);
  letter-spacing: -.55px;
  margin: 10px 0 11px;
}
body.cinema-ui .conflict-stage .conflict-analysis { color: #3b5755; max-width: 970px; font-size: 14px; line-height: 1.7; margin: 9px 0 19px; }
body.cinema-ui .conflict-stage .conflict-voices { gap: 20px; margin-top: 21px; margin-bottom: 20px; }
body.cinema-ui .conflict-stage .conflict-voice-column {
  min-width: 0;
  padding: 24px 25px;
  background: linear-gradient(140deg, #d6ded7, #c5d6d0);
  border: 1px solid #9bb6a9;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(222 232 219 / 60%), 0 12px 29px -24px rgb(45 81 73 / 24%);
}
body.cinema-ui .conflict-stage .conflict-voice-column:last-child { background: linear-gradient(140deg, #d6ded7, #cad9c8); border-color: #a0b89c; }
body.cinema-ui .conflict-stage .conflict-voice-label { color: #315754; font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: .65px; }
body.cinema-ui .conflict-stage .reaction-quote-date { color: #3b5755; font-size: 12px; line-height: 1.6; letter-spacing: .1px; margin-top: 8px; margin-bottom: 17px; }
body.cinema-ui .conflict-stage .conflict-quote:not(.reading-focused) blockquote {
  color: #2d4f4b;
  font: 400 20px/1.65 var(--font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 17px;
}
body.cinema-ui .conflict-stage .conflict-comparison .conflict-quote:not(.reading-focused) blockquote {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: none;
  overflow: visible;
  font-size: 21px;
  line-height: 1.65;
}
body.cinema-ui .conflict-stage .conflict-comparison .conflict-voice-label { font-weight: 600; }
body.cinema-ui .conflict-stage .conflict-source-links { gap: 9px 12px; }
body.cinema-ui .conflict-stage .conflict-source-links :is(a, button) { min-height: 42px; color: #315754; font-size: 12px; line-height: 1.5; }
body.cinema-ui .conflict-stage .conflict-voice-meta { color: #3b5755; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
body.cinema-ui .conflict-stage .conflict-evidence-status { color: #3b5755; font-size: 11px; line-height: 1.65; margin-top: 5px; padding: 7px 10px; }
body.cinema-ui .conflict-stage .conflict-event details { border-color: #9eb6a0; margin-top: 16px; }
body.cinema-ui .conflict-stage .conflict-event details > summary { min-height: 40px; color: #3b5755; font-size: 12px; }
body.cinema-ui .conflict-stage .conflict-event details[open] :is(p, blockquote) { color: #2d4f4b; font-size: 17px; line-height: 1.8; }
body.cinema-ui .conflict-stage .conflict-connections { margin-top: 22px; margin-bottom: 10px; }

@media (max-width: 1180px) {
  body.cinema-ui .conflict-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.cinema-ui .conflict-featured button { min-height: 78px; }
  body.cinema-ui .conflict-stage { padding: 22px; }
  body.cinema-ui .conflict-stage .conflict-voices { gap: 16px; }
  body.cinema-ui .conflict-stage .conflict-voice-column { padding: 23px; }
}
@media (max-width: 760px) {
  body.cinema-ui .conflict-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; margin-bottom: 16px; }
  body.cinema-ui .conflict-featured button:last-child { grid-column: 1 / -1; min-height: 67px; }
  body.cinema-ui .conflict-stage { padding: 21px 19px; }
  body.cinema-ui .conflict-stage .conflict-voices { grid-template-columns: minmax(0, 1fr); }
  body.cinema-ui .conflict-stage-nav { gap: 9px; }
  body.cinema-ui .conflict-stage-nav :is(button, a) { padding: 10px 11px; font-size: 11px; }
  body.cinema-ui .conflict-stage-nav :is(span, output) { font-size: 11px; }
}
@media (max-width: 540px) {
  body.cinema-ui .conflict-flow { width: 100%; margin-bottom: 24px; }
  body.cinema-ui .conflict-flow > header:not(.conflict-narrative-header) h2 { font-size: 30px; line-height: 1.2; }
  body.cinema-ui .conflict-featured button { min-height: 80px; padding: 13px; font-size: 18px; }
  body.cinema-ui .conflict-featured button :is(strong, .conflict-featured-title) { font-size: 18px; }
  body.cinema-ui .conflict-stage { padding: 20px 16px; border-radius: 13px; }
  body.cinema-ui .conflict-stage > :is(header, .conflict-narrative-header) :is(h2, h3) { font-size: 27px; line-height: 1.2; }
  body.cinema-ui .conflict-context-overview > summary { min-height: 44px; }
  body.cinema-ui .conflict-stage-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; margin-bottom: 12px; padding-bottom: 12px; }
  body.cinema-ui .conflict-stage-nav :is(span, output) { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  body.cinema-ui .conflict-stage-nav :is(button, a) { width: 100%; min-height: 44px; font-size: 11px; }
  body.cinema-ui .conflict-stage .conflict-sequence-tools:not(.conflict-stage-nav) .button { min-height: 44px; }
  body.cinema-ui .conflict-stage .conflict-event { padding-top: 15px; }
  body.cinema-ui .conflict-stage .conflict-event-title { font-size: 28px; }
  body.cinema-ui .conflict-stage .conflict-event :is(time, .conflict-event-date, .conflict-event-sender) { font-size: 11px; }
  body.cinema-ui .conflict-stage .conflict-voice-column { padding: 21px 18px; }
  body.cinema-ui .conflict-stage .conflict-voices { gap: 15px; margin-top: 18px; }
  body.cinema-ui .conflict-stage .conflict-quote:not(.reading-focused) blockquote,
  body.cinema-ui .conflict-stage .conflict-comparison .conflict-quote:not(.reading-focused) blockquote { font-size: 19px; line-height: 1.7; }
  body.cinema-ui .conflict-stage .reaction-quote-date { font-size: 11px; line-height: 1.6; }
  body.cinema-ui .conflict-stage .conflict-source-links :is(a, button) { min-height: 44px; font-size: 11px; }
  body.cinema-ui .conflict-stage .conflict-event details > summary { min-height: 44px; }
}
@media (min-width: 1181px) and (max-height: 850px) {
  body.cinema-ui .conflict-featured { margin-top: 12px; margin-bottom: 13px; }
  body.cinema-ui .conflict-featured button { min-height: 75px; padding-top: 11px; padding-bottom: 11px; }
  body.cinema-ui .conflict-stage { padding-top: 18px; }
  body.cinema-ui .conflict-stage-nav { margin-top: 7px; margin-bottom: 12px; padding-top: 9px; padding-bottom: 10px; }
  body.cinema-ui .conflict-stage .conflict-event { padding-top: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body.cinema-ui .conflict-featured *, body.cinema-ui .conflict-featured *::before, body.cinema-ui .conflict-featured *::after,
  body.cinema-ui .conflict-stage *, body.cinema-ui .conflict-stage *::before, body.cinema-ui .conflict-stage *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}