/* the new look: paper area (class-only, .u- prefix).
   The slim strips above every page (algoStrip, readOnlyBanner, modeBanner →
   paperChip + paperStrip), the Overview's practice-run section (paperSection),
   the practice-run sheets (paperStartModal, paperModal) and the toast.
   Colours only through the --u-* tokens of qe-ui.css. */

/* ── buttons inside the strips: small on a computer, a full 44px tap on a phone ── */
.u-paper-btns{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.u-paper-btns .u-btn{ text-decoration:none; }
.u-note-body{ min-width:0; flex:1; }
.u-note-btns{ margin-top:10px; }
@media (max-width:1023px){ .u-paper-btns .u-btn.sm{ min-height:44px; padding:0 16px; } }

/* ── the strategy line above every page of an algo (algoStrip) ── */
.u-paper-algo{ display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin:6px var(--u-pad) 0; min-width:0; }
.u-paper-algo-t{ flex:1 1 280px; min-width:0; margin:0; font-size:13.5px; line-height:1.5; color:var(--u-t3); overflow-wrap:anywhere; }
.u-paper-algo-t b{ color:var(--u-t2); font-weight:600; }
@media (min-width:1024px){ .u-paper-algo{ margin:0; } }

/* ── the one line of small print over a page in test / compare view (modeBanner) ── */
.u-paper-disc{ margin:10px var(--u-pad) 0; font-size:13px; line-height:1.5; color:var(--u-t3); }
@media (min-width:1024px){ .u-paper-disc{ margin:10px 0 0; } }

/* ── small pills: "Simulated", the replay day, a run's state ── */
.u-paper-pill{ display:inline-flex; align-items:center; min-height:24px; padding:1px 10px; border-radius:999px; vertical-align:middle;
               font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap; background:var(--u-raise2); color:var(--u-t2); }
.u-paper-pill.sim, .u-paper-pill.warn{ background:var(--u-gold-t); color:var(--u-gold); }
.u-paper-pill.ok{ background:var(--u-green-t); color:var(--u-green); }
.u-paper-pill.bad{ background:var(--u-red-t); color:var(--u-red); }
.u-paper-pill.info{ background:var(--u-blue-t); color:var(--u-blue); }
.u-paper-pill.off{ background:var(--u-raise2); color:var(--u-t3); }

/* ── the practice run's chip: Simulated · run · engine time · heartbeat (paperChip) ── */
.u-paper-top{ min-width:0; }
.u-paper-chip{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:12px var(--u-pad) 0; min-width:0;
               font-size:13px; line-height:1.45; color:var(--u-t3); }
.u-paper-chip-t{ min-width:0; overflow-wrap:anywhere; }
@media (min-width:1024px){ .u-paper-chip{ margin:12px 0 0; } }

/* ── the slim status line (paperNote): dot · title · one grey line · buttons ── */
.u-note.u-paper-strip{ display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:4px 12px;
                       margin-top:10px; padding:12px 14px 12px 16px; }
.u-paper-strip > .u-dot{ align-self:start; margin-top:7px; color:var(--u-t3); }
.u-paper-strip-t{ min-width:0; }
.u-paper-strip .t{ font-size:15px; font-weight:600; line-height:1.4; color:var(--u-t1); overflow-wrap:anywhere; }
.u-paper-strip .s{ margin-top:2px; font-size:13.5px; line-height:1.45; color:var(--u-t3); overflow-wrap:anywhere; }
/* a practice run's countdown (index.html qeCdHTML): its start-up, its morning screen */
.u-paper-cd{ font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.u-paper-strip .u-paper-btns{ justify-content:flex-end; }
.u-paper-ok > .u-dot{ color:var(--u-green); }
.u-paper-warn > .u-dot{ color:var(--u-gold); }
.u-paper-info > .u-dot{ color:var(--u-blue); }
.u-paper-bad > .u-dot, .u-paper-bad .t{ color:var(--u-red); }
.u-paper-pulse > .u-dot{ animation:u-pulse 1.8s infinite; }
@media (prefers-reduced-motion:reduce){ .u-paper-pulse > .u-dot{ animation:none; } }
/* on a phone the buttons go under the words, lined up with the title */
@media (max-width:699px){
  .u-note.u-paper-strip{ grid-template-columns:8px minmax(0,1fr); }
  .u-paper-strip .u-paper-btns{ grid-column:2; justify-content:flex-start; margin-top:8px; }
}
/* read-only seat: the gold note, the name in gold */
.u-note.u-paper-ro{ margin-top:6px; }
.u-paper-ro .t{ color:var(--u-gold); }
.u-paper-ro .s{ color:var(--u-t2); }
.u-paper-ro > .u-dot{ color:var(--u-gold); }

/* the strips stack with 10px between them; the read-only note keeps a little more
   air above the strategy line */
#pageScroll > .u-paper-ro + .u-paper-algo{ margin-top:12px; }
/* the LAST strip above a page (whatever kind it is) leaves the same gap before the
   page starts: 12px on a phone, 16px on a computer, 16px over a page not yet in the new look */
#pageScroll > :is(.u-paper-algo, .u-paper-top, .u-paper-strip, .u-paper-disc):not(:has(+ :is(.u-paper-algo, .u-paper-top, .u-paper-strip, .u-paper-disc))){ margin-bottom:12px; }
@media (min-width:1024px){
  #pageScroll > :is(.u-paper-algo, .u-paper-top, .u-paper-strip, .u-paper-disc):not(:has(+ :is(.u-paper-algo, .u-paper-top, .u-paper-strip, .u-paper-disc))){ margin-bottom:16px; }
}
/* a page not yet in the new look pads itself: the strips then sit flush with it */
#pageScroll:not(:has(> .u-page)) > .u-paper-algo,
#pageScroll:not(:has(> .u-page)) > .u-paper-disc,
#pageScroll:not(:has(> .u-page)) > .u-paper-strip,
#pageScroll:not(:has(> .u-page)) > .u-paper-top > *{ margin-left:0; margin-right:0; }
#pageScroll:not(:has(> .u-page)) > :is(.u-paper-algo, .u-paper-top, .u-paper-strip, .u-paper-disc):not(:has(+ :is(.u-paper-algo, .u-paper-top, .u-paper-strip, .u-paper-disc))){ margin-bottom:16px; }

/* ── the Overview's practice-run section (paperSection) ── */
.u-paper-sec{ min-width:0; }
.u-paper-sec > .u-sec{ align-items:center; flex-wrap:wrap; }
.u-paper-cap{ margin:0 var(--u-pad); font-size:13.5px; line-height:1.45; color:var(--u-t3); overflow-wrap:anywhere; }
.u-paper-h3{ margin:26px var(--u-pad) 2px; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.u-paper-small{ margin:12px var(--u-pad) 0; font-size:13px; line-height:1.55; color:var(--u-t3); }
@media (min-width:1024px){ .u-paper-cap, .u-paper-small{ margin-left:0; margin-right:0; } .u-paper-h3{ margin:28px 0 2px; } }
/* a run: name, state pill · mode · trades · heartbeat; equity + return; Open */
.u-row.u-paper-run{ grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"m v a"; }
.u-paper-run-m{ grid-area:m; min-width:0; }
.u-paper-run > .v{ grid-area:v; }
.u-paper-run > .u-paper-shown, .u-paper-run > .u-btn{ grid-area:a; justify-self:end; }
/* on a phone the Open button sits under the run's value, so the words keep the width */
@media (max-width:699px){
  .u-row.u-paper-run{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"m v" "m a"; row-gap:6px; }
  .u-paper-shown{ min-width:0; text-align:right; }
}
.u-paper-run .s{ white-space:normal; overflow:visible; line-height:1.6; overflow-wrap:anywhere; }
.u-paper-run .s .u-paper-pill{ margin-right:4px; }
.u-paper-run .v small{ text-align:right; }
.u-paper-shown{ font-size:14px; font-weight:600; color:var(--u-green); min-width:52px; text-align:center; }
.u-paper-run .u-btn.sm{ min-width:64px; }
@media (max-width:1023px){ .u-paper-run .u-btn.sm{ min-height:44px; } }
.u-paper-none{ padding:16px 0; font-size:14.5px; color:var(--u-t3); }
/* the fills tape: its own sideways scroll on a phone, never the page's */
.u-paper-sec .u-tablewrap{ margin-top:6px; }
#pageScroll .u-paper-sec table.u-table{ display:table; overflow:visible; }
.u-table.u-paper-fills{ min-width:680px; }
.u-paper-fills .u-paper-sym{ font-weight:600; }
.u-paper-fills td.u-mute{ color:var(--u-t3); }
.u-paper-fills td.u-up{ color:var(--u-green); } .u-paper-fills td.u-down{ color:var(--u-red); }
/* the broker mirror's totals: three across on a phone, six across on a computer */
.u-stats.u-paper-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.u-paper-stats .u-stat, .u-paper-stats .u-stat:nth-child(odd){ padding-right:12px; }
@media (min-width:1024px){ .u-stats.u-paper-stats{ grid-template-columns:repeat(6,minmax(0,1fr)); } .u-aside .u-stats.u-paper-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.u-paper-sec .u-note{ overflow-wrap:anywhere; }
.u-note.u-paper-notes{ display:block; font-size:13.5px; color:var(--u-t3); line-height:1.6; }
/* inside a page not yet in the new look (it pads itself) the section is not inset twice */
@media (max-width:1023px){
  #pageScroll:not(:has(> .u-page)) .u-paper-sec :is(.u-sec, .u-paper-cap, .u-paper-h3, .u-paper-small, .u-note){ margin-left:0; margin-right:0; }
  #pageScroll:not(:has(> .u-page)) .u-paper-sec :is(.u-rows, .u-tablewrap, .u-stats){ padding-left:0; padding-right:0; }
}

/* ── the practice-run sheets (paperSheet: start / replay picker / settings) ── */
.u-paper-shead{ display:flex; align-items:flex-start; gap:8px; }
.u-paper-shead > div{ flex:1; min-width:0; }
.u-paper-shead h2{ overflow-wrap:anywhere; }
.u-paper-shead .u-term{ margin-top:0; }
.u-icon.u-paper-x{ flex:none; margin:0 -10px 0 0; color:var(--u-t3); }
.u-icon.u-paper-x:hover{ color:var(--u-t1); }
.u-paper-lead{ margin:12px 0 0; font-size:14.5px; line-height:1.5; color:var(--u-t2); }
.u-paper-sheet .u-field{ margin-top:16px; }
.u-paper-hint{ font-size:13px; font-weight:500; line-height:1.45; color:var(--u-t3); }
.u-paper-wait{ display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:12px; background:var(--u-raise);
               font-size:14.5px; font-weight:500; color:var(--u-t3); }
.u-paper-wait.bad{ background:var(--u-red-t); color:var(--u-red); }
.u-paper-sheet .u-select{ appearance:auto; }
.u-paper-sheet .u-note{ margin:16px 0 0; }
/* the mode switch: two halves, the chosen one filled */
.u-paper-seg{ display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--u-raise); }
.u-paper-seg button{ flex:1; min-width:0; min-height:44px; padding:0 10px; border:0; border-radius:9px; background:none;
                     color:var(--u-t2); font-size:15px; font-weight:600; }
.u-paper-seg button.on{ background:var(--u-t1); color:var(--u-bg); }
/* the broker-mirror checkbox: the whole line is the tap target */
.u-paper-check{ display:flex; align-items:flex-start; gap:12px; margin-top:16px; min-height:44px; cursor:pointer;
                font-size:14px; font-weight:500; line-height:1.5; color:var(--u-t2); }
/* the box: 20px to look at, a 32px target to tap (like the "?" tip) */
.u-paper-check input{ appearance:none; -webkit-appearance:none; position:relative; flex:none; width:32px; height:32px; margin:-4px -6px 0 -6px;
                      border:0; border-radius:8px; background:none; cursor:pointer; }
.u-paper-check input::before{ content:""; position:absolute; left:6px; top:6px; width:20px; height:20px; box-sizing:border-box;
                              border-radius:6px; border:2px solid var(--u-t3); background:var(--u-bg); }
.u-paper-check input:checked::before{ background:var(--u-green); border-color:var(--u-green); }
.u-paper-check input:checked::after{ content:""; position:absolute; left:13px; top:9px; width:6px; height:11px; box-sizing:border-box;
                                     border:solid var(--u-on-green); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.u-paper-act{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.u-paper-act .u-btn{ min-height:50px; font-size:16px; }

/* ── the toast: a small pill, bottom-centre on a phone, bottom-right on a computer ── */
.u-paper-toast{ position:fixed; z-index:9999; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
                width:max-content; max-width:calc(100vw - 32px); padding:12px 20px; border-radius:22px;
                background:var(--u-t1); color:var(--u-bg); box-shadow:var(--u-pop);
                font-size:14.5px; font-weight:600; line-height:1.4; text-align:center; overflow-wrap:anywhere;
                animation:u-paper-rise .22s ease-out; pointer-events:none; }
@media (min-width:1024px){ .u-paper-toast{ left:auto; right:28px; bottom:28px; transform:none; max-width:420px; text-align:left; } }
@keyframes u-paper-rise{ from{ opacity:0; translate:0 12px; } to{ opacity:1; translate:0 0; } }
@media (prefers-reduced-motion:reduce){ .u-paper-toast{ animation:none; } }

/* the start dialog: what a practice run from this test will do (GET /api/paper/check), under the test picker */
.u-paper-checknotes{ margin-top:8px; display:grid; gap:6px; }
.u-paper-checknotes p{ margin:0; font-size:13px; line-height:1.5; color:var(--u-t3); overflow-wrap:anywhere; }
.u-paper-sheet .u-paper-checkmsg .u-note{ margin:8px 0 0; }
/* a screen algo's practice run: today's picks, the earlier days folded */
.u-paper-picks{ margin:12px var(--u-pad) 0; padding:12px 14px; border-radius:12px; background:var(--u-raise); min-width:0; }
.u-paper-picks-t{ margin:0; font-size:14.5px; font-weight:600; line-height:1.45; color:var(--u-t1); overflow-wrap:anywhere; }
.u-paper-picks-t .u-mute{ font-weight:500; color:var(--u-t3); }
.u-paper-picks-n{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--u-t3); overflow-wrap:anywhere; }
.u-paper-picks-d{ margin-top:8px; font-size:13px; color:var(--u-t2); }
.u-paper-picks-d summary{ cursor:pointer; font-weight:600; color:var(--u-t2); min-height:32px; display:flex; align-items:center; }
.u-paper-picks-d ul{ margin:4px 0 0; padding:0 0 0 16px; display:grid; gap:4px; }
.u-paper-picks-d li{ line-height:1.45; overflow-wrap:anywhere; }
@media (min-width:1024px){ .u-paper-picks{ margin-left:0; margin-right:0; } }