/* B100: readable campaign copy in actual screen pixels. Load after the B98
   mobile styles. Existing story/result owners retain all transitions and input. */
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  font-size: calc(clamp(18px, 1.35vw, 21px) * var(--r45-story-scale, 1.25));
  line-height: 1.5;
  padding: max(16px, env(safe-area-inset-top)) max(clamp(20px, 3vw, 58px), env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(clamp(20px, 3vw, 58px), env(safe-area-inset-left)) !important;
}
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader[hidden] { display: none !important; }
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-header { flex: 0 0 auto; }
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 8px 18px 0;
}
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 23vw, 330px);
  max-width: 1500px;
  min-height: 0;
  margin: 0 auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader article[data-r45-copy] { max-width: 62ch; }
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader :is(.r75-story-lead, .r45-story-plan, .r61-story-full) {
  font-size: 1em;
  line-height: 1.5;
}
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-plan h2 {
  font-size: .8em !important;
  line-height: 1.4 !important;
  text-transform: none;
}
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-person img,
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-person:nth-child(2) img,
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader[data-r46-kind="outro"] .r45-story-person img { height: clamp(130px, 30vh, 290px); }
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-footer {
  flex: 0 0 auto;
  position: static;
  padding: 10px 0 0 !important;
}
html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-footer p { font-size: 15px; }

/* Give story and commentary a useful reading width; the winner portrait
   occupies less space. Long text scrolls inside its own column. */
@media (min-width: 1051px) and (min-height: 601px) {
  html[data-sejm-interface] body #r70-result-screen.r70-result-stage.r75-result-has-story {
    grid-template-columns: minmax(0, 1.15fr) minmax(100px, .42fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 16px clamp(18px, 2.4vw, 42px);
    overflow: hidden;
    padding: max(18px, env(safe-area-inset-top)) max(clamp(20px, 3vw, 58px), env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(clamp(20px, 3vw, 58px), env(safe-area-inset-left)) !important;
  }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story :is(.r75-result-story, .r70-result-advice) {
    min-height: 0;
    max-height: 100%;
    align-self: stretch;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
    scrollbar-width: thin;
  }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story .r70-result-advice { grid-row: 2; }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story .r70-result-center { grid-row: 2; }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story .r70-result-actions {
    grid-row: 3;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
  }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story .r70-result-actions button { flex: 0 1 auto; min-height: 48px; }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story .r70-result-actions .r70-primary { min-height: 52px; }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story :is(.r75-result-story p:not(.r70-eyebrow), .r70-result-advice > p:not(.r70-eyebrow), .r70-result-commentary blockquote) {
    font-size: calc(clamp(17px, 1.05vw, 19px) * var(--sk-r45-text-scale, 1.25)) !important;
    line-height: 1.5 !important;
  }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story .r73-studio-portrait { max-height: 140px; }
}

/* Phone landscape: goal first, one wide narrative column, and a footer that
   never scrolls away. 200% text remains available without shrinking controls. */
@media (orientation: landscape) and (max-height: 650px) and (max-width: 1150px) and (pointer: coarse) and (hover: none) {
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader {
    padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    font-size: calc(17px * var(--r45-story-scale, 1.25));
    line-height: 1.4;
  }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 0 5px !important;
    max-height: min(31dvh, 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: start;
  }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-header > div:first-child {
    display: block;
    min-width: 0;
  }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader :is(.r46-story-phase, [data-r45-eyebrow]) {
    display: inline;
    white-space: normal;
    font-size: 11px;
    line-height: 1.2;
    margin: 0;
  }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r46-story-phase { margin-right: 7px; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader h1 {
    font-size: clamp(20px, 2.8vw, 26px) !important;
    line-height: 1.1 !important;
    margin: 3px 0 !important;
  }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader [data-r45-location] { font-size: 11px; margin: 0; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-header-actions { flex-wrap: nowrap; max-width: none; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-header-actions button { padding: 4px 7px; min-height: 44px !important; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-options { flex: 0 1 auto; max-height: 24dvh; overflow-y: auto; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-scroll { padding: 4px 3px 8px 0; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-grid {
    grid-template-columns: minmax(0, 1fr) clamp(64px, 11vw, 100px);
    gap: 10px;
    max-width: none;
    margin: 0;
    animation: none !important;
  }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader article[data-r45-copy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: none;
  }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader article[data-r45-copy] > .b100-story-objective { order: -1; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader :is(.r45-story-plan, .r75-story-lead, blockquote, .r61-story-full) { margin: 0; font-size: 1em; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-plan { padding: 5px 8px; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-plan h2 { margin: 0 0 2px; font-size: 14px !important; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .b100-story-objective p { line-height: 1.42 !important; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader [data-r45-people] { grid-template-columns: minmax(0, 1fr) !important; gap: 5px; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-person img,
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-person:nth-child(2) img,
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader[data-r46-kind="outro"] .r45-story-person img { height: clamp(44px, 16dvh, 70px); }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 5px 0 0 !important;
  }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-footer > .r46-reader-status { flex: 1 1 auto; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-footer > div:last-child { width: auto; flex: 0 0 auto; flex-wrap: nowrap; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-footer p { font-size: 11px; line-height: 1.25 !important; }
  html[data-sejm-interface] body #sk-r45-story-reader.r45-story-reader .r45-story-footer button { min-height: 44px !important; min-width: 44px; max-width: 39vw; padding: 5px 9px; font-size: 15px !important; }
  html[data-sejm-interface] body #r70-result-screen.r75-result-has-story :is(.r75-result-story p:not(.r70-eyebrow), .r70-result-advice > p:not(.r70-eyebrow), .r70-result-commentary blockquote) {
    font-size: calc(15px * var(--sk-r45-text-scale, 1.25)) !important;
    line-height: 1.45 !important;
  }
}