/* TRIALS: flight school and the trials (ui/school.js, ui/trials.js). The lesson overlay (#schoolHud) and the trial's
 * (#trialHud) sit at the top middle, under the clock, and never take a touch (pointer-events: none). A pale spring green marks a lesson or a trial passed (the beacons' color): off
 * your fire's cyan, the wingmen's mint, reward gold, the hurt red and capture's violet. */

/* ---- the overlay while flying: top middle, under the clock (the ship flies in the lower half and the boss bars sit at
 * the bottom); it dims once its words have stood for a few seconds (ol-quiet), and the banners move down under it ---- */
.otr-lesson{position:fixed;z-index:4;left:50%;top:calc(36px + var(--st));transform:translateX(-50%);width:min(86vw,500px);
  padding:7px 14px 8px;border-radius:12px;background:rgba(8,10,22,.72);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.3);
  text-align:center;pointer-events:none;zoom:var(--ui);transition:opacity .5s}
.otr-lesson.ol-quiet{opacity:.6}
.otr-lesson p{margin:0}
.otr-lesson .ol-step{font-family:var(--pix);font-size:8px;letter-spacing:.12em;color:var(--dim)}
.otr-lesson .ol-title{display:block;margin-top:3px;font-size:15px;color:var(--ink)}
.otr-lesson .ol-line{margin-top:2px;font-size:13px;line-height:1.3;color:var(--ink);opacity:.9}
.otr-lesson .ol-keys{margin-top:3px;font-size:11px;color:var(--dim)}
.otr-lesson .ol-prog{margin-top:4px;font-family:var(--pix);font-size:9px;letter-spacing:.04em;color:#d8f5b0}
.otr-lesson.ol-pass{border-color:rgba(198,240,138,.55);box-shadow:0 0 0 2px rgba(198,240,138,.14),0 8px 24px rgba(0,0,0,.3);opacity:1}
.otr-lesson.ol-pass .ol-title{color:#d8f5b0}
.otr-lesson.trial-hud .ol-step{color:var(--bronze)}
body:not([data-screen="none"]) .otr-lesson{display:none}
body.ol-school #toasts,body.ol-trial #toasts{top:calc(150px + var(--st))}
/* a phone upright: clear of the HUD's top-left block and the pause button */
@media (max-width:700px){
  .otr-lesson{top:calc(100px + var(--st));width:min(94vw,500px)}
  body.ol-school #toasts,body.ol-trial #toasts{top:calc(214px + var(--st))}
}
/* a phone on its side: just the title, the line and the progress */
@media (max-height:560px){
  .otr-lesson{top:calc(30px + var(--st));padding:5px 10px 6px;width:min(60vw,460px)}
  .otr-lesson .ol-step,.otr-lesson .ol-keys{display:none}
  .otr-lesson .ol-title{font-size:13px;margin-top:0}
  .otr-lesson .ol-line{font-size:11px}
  body.ol-school #toasts,body.ol-trial #toasts{top:calc(112px + var(--st))}
}
html.rm .otr-lesson{transition:none}

/* ---- the title: the Flight school button and a trial teaser ---- */
.school-row{flex-direction:column;gap:4px}
.school-btn{min-height:40px;font-size:14px;color:var(--ink)}
.school-btn .school-ok{color:#d8f5b0}
.school-note{font-size:12px;color:var(--dim)}
.trial-tease{gap:8px 10px}
.trial-tease .tt-text{font-size:13px;color:var(--dim);max-width:min(88vw,460px)}
.trial-tease .tt-text b{color:var(--ink)}
@media (max-height:560px){ .school-note,.trial-tease .tt-text{font-size:11px} }

/* ---- Codex: Try buttons and the Trials tab ---- */
.try-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.try-row .try-goal{flex:1 1 140px}
.try-btn{min-height:32px;padding:0 12px;font-size:12px;color:var(--ink);border-color:rgba(243,196,142,.55)}
.qlist li>.try-btn{justify-self:start;margin-top:4px}
.cxgrid.trials .try-btn{margin-top:6px}
.cx .try-loan,.cx .try-best{margin-top:4px}
.cx .try-best{color:#d8f5b0}
.trials-hint{margin:0 0 10px;font-size:13px;color:var(--dim)}

/* ---- the level-up and pause screens ---- */
.school-tip{margin:0;font-size:13px;color:var(--dim);text-align:center}
.school-pause{display:grid;gap:2px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line2);font-size:13px}
.school-pause b{font-size:13px;color:var(--ink)}
.school-pause span{color:var(--dim)}

/* ---- the results: the school's card and a trial's ---- */
.school-card,.trial-card{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.school-card.pass,.trial-card.pass{border-color:rgba(198,240,138,.55);background:linear-gradient(160deg,rgba(198,240,138,.08),rgba(255,255,255,.02))}
.school-card h3,.trial-card h3{margin:0;font-size:17px;color:var(--ink)}
.school-card p,.trial-card p{margin:0}
.sc-eyebrow{font-family:var(--pix);font-size:9px;letter-spacing:.12em;color:var(--dim)}
.tc-goal{font-size:14px;color:var(--ink)}
.sc-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sc-list li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:6px;align-items:baseline;font-size:13px;color:var(--dim)}
.sc-list li.ok{color:var(--ink)}
.sc-list .sc-mark{text-align:center;color:var(--faint)}
.sc-list li.ok .sc-mark{color:#d8f5b0}
.sc-list em{font-style:normal;font-size:12px;color:var(--dim)}
.sc-next{font-size:13px;color:var(--dim)}
.school-card.pass .sc-next,.trial-card.pass .sc-next{color:var(--ink)}
.school-card .xrow,.trial-card .xrow{justify-content:flex-start}
.school-card .btn,.trial-card .btn{min-height:42px;font-size:15px;padding:0 16px}