/* Approved A: final in-frame typography, colours and spacing.
   The report's external 420px phone frame is not a website width limit. */
.app.reading-active #main-content { display:block; overflow-y:auto; padding:0; }
html.page-scroll .app.reading-active #main-content { overflow:visible; }
#app .approved-reading,
#app .approved-reading-summary {
  --reading-paper:#f7efdf;
  --reading-surface:#fffbf3;
  --reading-ink:#392a22;
  --reading-muted:#6d564a;
  --reading-line:#e4d6c4;
  --reading-rust:#843124;
  --reading-rule:#e3cbb0;
  --reading-rule-space:26px;
  --reading-font-size:16px;
  color:var(--reading-ink);
  font-family:system-ui,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  font-size:var(--reading-font-size);
  line-height:1.6;
  text-align:left;
  width:100%;
  min-width:0;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
html[data-reading-font="small"] #app .approved-reading,
html[data-reading-font="small"] #app .approved-reading-summary { --reading-font-size:15px; }
html[data-reading-font="large"] #app .approved-reading,
html[data-reading-font="large"] #app .approved-reading-summary { --reading-font-size:17px; }
#app .approved-reading { background:var(--reading-surface); padding:0; min-height:100%; }
#app .approved-reading .reading-layout { width:min(100%,760px); margin:0 auto; min-width:0; }
#app .approved-reading .reading-column,
#app .approved-reading .reading-scroll { display:block; position:static; height:auto; min-height:0; max-height:none; overflow:visible; padding:0; min-width:0; }
#app .approved-reading .reading-column { padding:0 19px 25px; }
#app .approved-reading .reading-context {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,34%);
  align-items:center;
  gap:10px;
  width:100%;
  position:static;
  margin:0;
  padding:16px 17px;
  border:0;
  border-bottom:1px solid var(--reading-line);
  background:#f8eee0;
  box-shadow:none;
  border-radius:0;
}
#app .approved-reading .reading-context[data-card-count="4"],
#app .approved-reading .reading-context[data-card-count="5"] { grid-template-columns:minmax(0,1fr) minmax(0,45%); }
#app .approved-reading .reading-question { min-width:0; border-left:2px solid #ab7a5a; padding-left:9px; }
#app .approved-reading .reading-question small { display:block; color:var(--reading-rust); font-size:.72em; font-weight:750; margin:0; letter-spacing:0; }
#app .approved-reading .reading-question p { margin:3px 0 0; color:var(--reading-ink); font-size:.82em; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; display:block; overflow:visible; text-overflow:clip; -webkit-line-clamp:unset; }
#app .approved-reading .reading-card-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:4px; width:100%; min-width:0; }
#app .approved-reading .reading-card-strip[data-card-count="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
#app .approved-reading .reading-card-strip[data-card-count="5"] { grid-template-columns:repeat(5,minmax(0,1fr)); }
#app .approved-reading .reading-card-strip figure { min-width:0; margin:0; text-align:center; }
#app .approved-reading .reading-card-strip button,
#app .approved-reading-summary .reading-summary-cards article>button { display:block; border:0; background:transparent; padding:0; margin:0 auto; width:100%; border-radius:4px; }
#app .approved-reading .reading-card-strip figcaption { margin:3px 0 0; color:inherit; font-size:.58em; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
#app .approved-reading .physical-card,
#app .approved-reading-summary .physical-card { width:100%; aspect-ratio:951 / 1585; height:auto; max-width:none; min-width:0; padding:0; border:0; background:transparent; box-shadow:0 3px 8px #47372c30; border-radius:3% / 1.75%; overflow:hidden; display:block; }
#app .approved-reading .physical-card img,
#app .approved-reading-summary .physical-card img { display:block; width:100%; height:100%; object-fit:contain!important; object-position:center; aspect-ratio:951 / 1585; border:0; padding:0; border-radius:0; }
/* Keep the pin measurable. Its negative margin cancels its normal-flow height,
   so visibility changes never insert a gap or jump the ongoing reading. */
#app .approved-reading .reading-question-pin { display:block; position:sticky; top:var(--reading-sticky-top,0px); z-index:12; min-height:44px; width:100%; margin:0 0 calc(-1 * var(--reading-pin-height,44px)); padding:6px 14px 7px; background:#fff8ee; color:#51362d; border-bottom:1px solid #e8d5c2; box-shadow:none; overflow-anchor:none; }
#app .approved-reading .reading-question-pin[hidden] { display:block!important; visibility:hidden; pointer-events:none; }
#app .approved-reading .reading-question-pin small { display:block; color:var(--reading-rust); font-size:.70em; font-weight:700; margin:0 0 1px; }
#app .approved-reading .reading-question-pin p { display:block; margin:0; font-size:.81em; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; -webkit-line-clamp:unset; }
#app .approved-reading .reading-player-slot { min-width:0; }
#app .approved-reading .reading-base { scroll-margin-top:130px; padding-top:16px; }
#app .approved-reading:has(.rdp-controls) .reading-base { padding-top:0; }
#app .approved-reading .reading-lead { border-left:2px solid #a64934; padding:2px 0 2px 10px; margin:0 0 15px; }
#app .approved-reading .reading-lead small { display:block; color:var(--reading-rust); letter-spacing:.08em; font-size:.69em; font-weight:400; margin:0; }
#app .approved-reading .reading-lead h1 { color:var(--reading-ink); font-size:1.125em; line-height:1.45; letter-spacing:-.045em; font-weight:700; margin:3px 0; }
#app .approved-reading .reading-beat { display:flow-root; margin:0 0 17px; min-width:0; }
#app .approved-reading .reading-beat:has(+.reading-closing),
#app .approved-reading .reading-beat.reading-closing { margin-bottom:0; }
#app .approved-reading .read-label { font-size:calc(var(--reading-font-size) * .73); font-weight:730; line-height:1.6; letter-spacing:.055em; margin:0 0 3px; color:var(--reading-rust); }
#app .approved-reading .read-paragraph { font-family:inherit; font-size:calc(var(--reading-font-size) - 1px); color:#3d2e24; line-height:1.68; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; letter-spacing:normal; }
#app .approved-reading .pace-unit { display:block; min-width:0; white-space:pre-wrap; }
#app .approved-reading .pace-unit+.pace-unit { margin-top:.68em; }
#app .approved-reading .chapter-card { float:inline-start; display:block; width:clamp(60px,21vw,92px); height:auto; padding:0; margin:3px 13px 8px 0; border:0; background:transparent; aspect-ratio:951 / 1585; border-radius:5px; box-shadow:0 2px 9px #51321d26; }
#app .approved-reading .chapter-card .physical-card { border-radius:5px; box-shadow:none; }
#app .approved-reading .reading-source-turn.is-self { width:fit-content; max-width:86%; margin:9px 0 9px auto; padding:8px 12px; border:1px solid #8a4534; border-radius:16px 4px 16px 16px; background:#8a4534; color:#fff9ee; font-size:.87em; line-height:1.65; }
#app .approved-reading .reading-source-turn.is-question { width:fit-content; max-width:93%; margin:9px 0; padding:8px 12px; border:1px solid #e7d2ba; border-radius:4px 16px 16px 16px; background:#f5e9da; color:#4c352a; font-size:.87em; line-height:1.65; }
#app .approved-reading .reading-source-turn.is-self .read-paragraph,
#app .approved-reading .reading-source-turn.is-question .read-paragraph { color:inherit; font-size:inherit; line-height:inherit; }
#app .approved-reading .reading-question-options { display:flex; flex-wrap:wrap; align-items:start; gap:6px; margin-top:10px; }
#app .approved-reading .reading-separated { border-top:1px solid var(--reading-rule); margin-top:var(--reading-rule-space); padding-top:var(--reading-rule-space); }
#app .approved-reading .reading-after { min-width:0; }
#app .approved-reading .reading-after[hidden] { display:none!important; }
#app .approved-reading .reading-explanation h2,
#app .approved-reading .reading-followup-options h2 { color:var(--reading-ink); font-size:.82em; line-height:1.6; font-weight:650; margin:0 0 8px; }
#app .approved-reading .reading-option-list { display:flex; flex-wrap:wrap; align-items:start; gap:6px; }
#app .approved-reading .reading-choice,
#app .approved-reading-summary .reading-choice { display:inline-block; width:auto; max-width:100%; min-height:34px; padding:4px 10px; border:1px solid #e0c6ae; border-radius:18px; background:#fff9f0; color:#613a2b; font-family:inherit; font-size:calc(var(--reading-font-size) * .81); line-height:1.45; font-weight:400; text-align:left; cursor:pointer; white-space:normal; overflow-wrap:anywhere; }
#app .approved-reading .reading-choice:hover:not(:disabled),
#app .approved-reading-summary .reading-choice:hover:not(:disabled) { background:#f7eadd; border-color:#a13a2b; }
#app .approved-reading button:focus-visible,
#app .approved-reading-summary button:focus-visible { outline:2px solid #a13a2b; outline-offset:3px; }
#app .approved-reading button:disabled,
#app .approved-reading-summary button:disabled { opacity:.55; cursor:default; }
#app .approved-reading .reading-option-note { font-size:.70em; line-height:1.6; color:var(--reading-muted); margin:5px 0 0; }
#app .approved-reading .reading-understood { display:grid; gap:9px; margin:0; padding:0; }
#app .approved-reading .reading-understood p { width:fit-content; max-width:93%; margin:0; padding:8px 12px; border:1px solid #e7d2ba; border-radius:4px 16px 16px 16px; background:#f5e9da; color:#4c352a; font-size:.87em; line-height:1.65; }
#app .approved-reading .reading-understood p:first-child { max-width:86%; margin-left:auto; background:#8a4534; border-color:#8a4534; color:#fff9ee; border-radius:16px 4px 16px 16px; }
#app .approved-reading .reading-understood+.reading-choice { margin-top:9px; }
#app .approved-reading .reading-inline-composer,
#app .approved-reading .reading-initial-composer { margin-top:10px; }
#app .approved-reading .reading-composer { border:0; border-radius:0; background:transparent; padding:0; margin:0; box-shadow:none; }
#app .approved-reading .reading-composer .composer-box { border:1px solid #ddc9b1; border-radius:8px; background:#fffcf7; box-shadow:none; padding:8px 10px; align-items:center; gap:6px; }
#app .approved-reading .reading-composer .reading-send-action { width:auto; min-width:0; flex-shrink:0; height:auto; min-height:38px; padding:6px 12px; border:1px solid #893e2e; border-radius:8px; background:#893e2e; color:#fffaf2; font-family:inherit; font-size:.88em; font-weight:650; line-height:1.4; white-space:normal; }
#app .approved-reading .reading-composer textarea { background:transparent; color:var(--reading-ink); font-family:inherit; font-size:.88em; line-height:1.65; min-height:65px; }
#app .approved-reading .reading-composer small { font-size:.70em; }
#app .approved-reading .reading-composer-prompt { margin:0 0 9px; font-size:.87em; line-height:1.6; color:var(--reading-muted); white-space:pre-wrap; }
#app .approved-reading .reading-jump-tabs { position:sticky; top:calc(var(--reading-sticky-top,0px) + var(--reading-pin-height,0px) + var(--reading-player-height,0px)); z-index:10; display:grid; grid-template-columns:repeat(3,minmax(0,5.53125em)); justify-content:end; justify-items:stretch; gap:4px; width:calc(100% + 38px); padding-block:5px; padding-inline:clamp(3px,calc((100% - 16.59375em - 8px) / 2),12px); margin:0 -19px; border-bottom:1px solid #e6cdb4; background:#fff8ee; }
#app .approved-reading .reading-jump-tabs button { min-width:0; min-height:29px; padding:4px 2px; border:1px solid #d9b79e; border-radius:5px; background:transparent; color:#784735; font-family:inherit; font-size:.75em; line-height:1.35; white-space:nowrap; }
#app .approved-reading .reading-jump-tabs button[aria-current="true"] { color:#fff9ee; background:#8a4534; border-color:#8a4534; }
#app .approved-reading .reading-thread { scroll-margin-top:150px; }
#app .approved-reading .reading-thread-title { font-size:.72em; font-weight:740; color:#8b402d; margin:0 0 5px; }
#app .approved-reading .reading-thread-context { color:#5f4637; background:#f7eddf; border:0; border-radius:6px; padding:8px 10px; margin:9px 0 10px; font-size:.78em; }
#app .approved-reading .reading-thread-context b { font-size:calc(var(--reading-font-size) * .72); color:#784c3a; }
#app .approved-reading .reading-thread-context p { margin:0; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
#app .approved-reading .reading-extra-cards { display:flex; justify-content:center; align-items:center; max-width:none; width:100%; gap:6px; margin:5px 0 0; padding:2px 0; }
#app .approved-reading .reading-extra-cards figure { flex:0 0 33px; width:33px; }
#app .approved-reading .reading-extra-cards figcaption { font-size:calc(var(--reading-font-size) * .51); }
#app .approved-reading .reading-chat { width:fit-content; max-width:93%; margin:9px 0; padding:8px 12px; border:1px solid #e7d2ba; border-radius:4px 16px 16px 16px; background:#f5e9da; color:#4c352a; font-size:.87em; line-height:1.65; }
#app .approved-reading .reading-chat.is-self { max-width:86%; margin-left:auto; border-color:#8a4534; border-radius:16px 4px 16px 16px; background:#8a4534; color:#fff9ee; }
#app .approved-reading .reading-chat .read-paragraph { color:inherit; font-size:inherit; line-height:inherit; }
#app .approved-reading .reading-source-divider { color:var(--reading-muted); text-align:center; margin:16px 0; }
#app .approved-reading .reading-source-divider .read-paragraph { font-size:.75em; }
#app .approved-reading .reading-source-scope { border:1px solid var(--reading-line); border-radius:6px; padding:8px 10px; margin:17px 0; background:#fff9f0; }
#app .approved-reading .reading-source-scope .reading-choice { margin-top:10px; }
#app .approved-reading .reading-connection-status { font-size:.76em; color:#654538; line-height:1.6; margin:8px 0 0; }
#app .approved-reading .reading-summary-action { margin-bottom:0; }
#app .approved-reading .reading-primary,
#app .approved-reading-summary .reading-primary { display:block; width:100%; min-height:38px; padding:6px 12px; border:1px solid #893e2e; border-radius:8px; background:#893e2e; color:#fffaf2; font-size:.88em; line-height:1.4; font-family:inherit; font-weight:650; text-align:center; cursor:pointer; }
#app .approved-reading .reading-archive-return { margin-top:26px; }
/* The final A summary, with actual source questions and generated extracts. */
#app .approved-reading-summary { min-height:calc(100dvh - 88px); margin:0; padding:0 16px 16px; background:#fff9ef; }
#app .approved-reading-summary .reading-summary-body { width:100%; max-width:430px; margin:0 auto; }
#app .approved-reading-summary .reading-summary-heading { padding:15px 16px 17px; margin:0 -16px; background:linear-gradient(120deg,#f8e8d6,#fff4e6); border:0; border-bottom:2px solid #ad6a4d; text-align:left; }
#app .approved-reading-summary h1 { font-size:1.73em; line-height:1.2; letter-spacing:-.055em; margin:0; font-weight:700; }
#app .approved-reading-summary h2 { font-size:.86em; margin:0 0 4px; color:#7a4430; font-weight:760; line-height:1.6; }
#app .approved-reading-summary p,
#app .approved-reading-summary li { line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
#app .approved-reading-summary .reading-summary-record { border-left:2px solid #c88965; padding:0 0 0 10px; margin:15px 0 0; }
#app .approved-reading-summary .reading-summary-record>p { font-size:.95em; line-height:1.55; font-weight:650; color:#3b2a23; }
#app .approved-reading-summary .reading-summary-followups { margin-top:9px; }
#app .approved-reading-summary ul { display:grid; gap:1px; list-style:none; margin:0; padding:0; color:#624538; font-size:.84em; }
#app .approved-reading-summary li { position:relative; padding-left:9px; }
#app .approved-reading-summary li::before { content:""; position:absolute; width:3px; height:3px; border-radius:50%; background:#b07154; top:.73em; left:1px; }
#app .approved-reading-summary .reading-summary-cards { margin:15px 0 0; padding-top:12px; border-top:1px solid #e7cdb3; }
#app .approved-reading-summary .reading-summary-cards article { display:flex; align-items:center; gap:10px; padding:5px 8px; background:#f8eadd; border:0; border-radius:6px; margin:0; }
#app .approved-reading-summary .reading-summary-cards article+article { margin-top:5px; }
#app .approved-reading-summary .reading-summary-cards article>button { flex:0 0 26px; width:26px; margin:0; }
#app .approved-reading-summary .reading-summary-cards article>div { flex:1; min-width:0; }
#app .approved-reading-summary .reading-summary-cards .physical-card { border-radius:4px; box-shadow:0 4px 9px #5a3a2b32; }
#app .approved-reading-summary .reading-summary-cards h3 { font-size:.85em; line-height:1.6; color:#3f2c22; font-weight:700; margin:0; }
#app .approved-reading-summary .reading-summary-cards p { font-size:.78em; line-height:1.42; color:#695143; margin-top:1px; }
#app .approved-reading-summary .reading-summary-core { background:#f6e6d7; border:0; border-radius:6px; padding:10px 11px; margin-top:15px; }
#app .approved-reading-summary .reading-summary-paragraphs p { font-size:.91em; line-height:1.65; color:#3b2a23; }
#app .approved-reading-summary .reading-summary-paragraphs p+p { margin-top:.65em; }
#app .approved-reading-summary .reading-summary-bottom { margin-top:15px; padding-top:9px; border-top:1px solid #dec5ae; text-align:center; }
#app .approved-reading-summary .reading-summary-thanks { font-size:.80em; color:#695143; margin:0; }
#app .approved-reading-summary .reading-summary-bottom>.reading-primary { width:min(100%,220px); min-height:34px; margin:5px auto 0; }
#app .approved-reading-summary .reading-summary-save { margin-top:4px; text-align:center; font-size:.75em; color:#695143; }
#app .approved-reading-summary .reading-summary-save p { font-size:inherit; margin:0; }
#app .approved-reading-summary .reading-summary-save .reading-choice { min-height:30px; padding:3px 7px; border:0; border-radius:0; background:transparent; color:#8b402d; font-size:inherit; line-height:1.4; text-align:center; text-decoration:underline; text-underline-offset:4px; }
/* A's explanation sheet lives outside #app, so it gets its own scoped type
   scale and overrides the old site's mobile bottom-sheet presentation. */
#modal.reading-explanation-modal { --reading-font-size:16px; display:flex; align-items:center; justify-content:center; padding:17px 14px; background:#30231e65; backdrop-filter:none; -webkit-backdrop-filter:none; font-family:system-ui,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif; font-size:var(--reading-font-size); color:#392a22; line-height:1.6; }
html[data-reading-font="small"] #modal.reading-explanation-modal { --reading-font-size:15px; }
html[data-reading-font="large"] #modal.reading-explanation-modal { --reading-font-size:17px; }
#modal.reading-explanation-modal .modal { width:min(450px,100%); max-width:450px; max-height:calc(100dvh - 34px); margin:0; padding:17px; overflow:auto; border:1px solid #e3d0bc; border-radius:13px; background:#fffaf0; color:inherit; box-shadow:0 18px 50px #34231f46; font:inherit; }
#modal.reading-explanation-modal .modal-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:9px; }
#modal.reading-explanation-modal .modal-title h2 { margin:0; color:inherit; font-size:1.25em; font-weight:700; line-height:1.35; letter-spacing:-.045em; }
#modal.reading-explanation-modal .modal-title .icon-button { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; min-width:38px; min-height:38px; border:0; border-radius:20px; padding:0; background:#f4e8d7; color:inherit; line-height:1; }
#modal.reading-explanation-modal .reading-explanation-dialog>p { font-size:.9em; margin:0 0 9px; }
#modal.reading-explanation-modal .reading-phrase { display:block; width:100%; min-height:44px; margin:0 0 6px; padding:7px 9px; border:1px solid #e1d0bb; border-radius:6px; background:#fffdf8; color:inherit; font:inherit; font-size:.86em; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; }
#modal.reading-explanation-modal .reading-phrase[aria-pressed="true"] { background:#f6e5d8; border-color:#b87b60; }
#modal.reading-explanation-modal label { display:block; margin:9px 0 3px; font-size:.87em; }
#modal.reading-explanation-modal textarea { display:block; width:100%; min-height:82px; padding:8px; border:1px solid #d9c3ad; border-radius:6px; background:#fffdf8; color:inherit; font:inherit; resize:vertical; }
#modal.reading-explanation-modal .reading-explanation-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; margin:12px 0 0; }
#modal.reading-explanation-modal .reading-explanation-actions button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:8px 13px; border:1px solid #a13a2b; border-radius:7px; background:#a13a2b; color:#fff8ef; font:inherit; font-size:.89em; font-weight:650; }
#modal.reading-explanation-modal .reading-explanation-dialog>.reading-explanation-error { font-size:.8em; margin:9px 0 0; color:#834232; }
#modal.reading-explanation-modal .reading-explanation-error:empty { display:none; }
#modal.reading-explanation-modal button:focus-visible,
#modal.reading-explanation-modal textarea:focus-visible { outline:2px solid #a13a2b; outline-offset:3px; }
@media (min-width:650px) {
  #app .approved-reading .reading-context .physical-card { max-width:56px; margin-inline:auto; }
}
@media (max-width:430px) {
  #app .approved-reading .reading-context { padding-inline:12px; }
  #app .approved-reading .reading-context .reading-card-strip figcaption { font-size:.51em; }
}
@media (max-width:340px) {
  #app .approved-reading-summary { padding-inline:12px; }
  #app .approved-reading-summary .reading-summary-heading { margin-inline:-12px; padding-inline:12px; }
}
@media (max-width:270px) {
  #app .approved-reading .reading-jump-tabs button { font-size:.69em; }
}
@media (prefers-reduced-motion:reduce) {
  #app .approved-reading *, #app .approved-reading-summary * { scroll-behavior:auto!important; transition:none!important; }
}