/* The SAT practice test (ptest.mjs) and the Desmos calculator panel (desmos.mjs). Uses app.css's tokens and its
   question screen (.session, .s-head, .s-card, .options); only what the sitting adds is here. */

/* Offer under Your tests */
.pt-offer{margin:0 0 8px}
.pt-offer .link.small{font-size:15px;font-weight:600;padding:2px 0 10px}
.pt-shape{margin:4px 0 14px;padding-left:20px} .pt-shape li{margin:4px 0}

/* Intro, break */
.pt-center .row.center{justify-content:center}
.pt-center .clock.big{font:800 56px/1 var(--display);font-variant-numeric:tabular-nums;margin:12px 0 18px}

/* Header */
.pt-head .s-clock.low b{color:var(--coral)}
.pt-clockrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pt-clock-toggle{padding:2px 0;font-size:14px}
.pt-head .s-side{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.pt-flag.on{background:color-mix(in srgb,var(--saffron) 22%,transparent);color:color-mix(in srgb,var(--saffron) 80%,var(--ink))}
.pt-flag,.pt-calc{white-space:nowrap}
.pt-calc[aria-pressed="true"]{background:color-mix(in srgb,var(--indigo) 18%,transparent);color:var(--indigo)}
@media (max-width:480px){.pt-head .s-side .soft span{display:none}}

/* The question's number and mark */
.pt-qnum{display:flex;align-items:center;gap:10px;margin:-4px 0 10px}
.pt-num{min-width:34px;height:34px;padding:0 8px;border-radius:10px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:800 17px var(--display)}
.pt-flagged{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--display);color:color-mix(in srgb,var(--saffron) 80%,var(--ink))}

/* Typed answer */
.pt-spr{max-width:320px} .pt-spr input{font:700 24px var(--display);letter-spacing:.04em}

/* Footer: Back · Question n of N · Next */
.pt-foot{display:flex !important;align-items:center;gap:10px;flex-wrap:nowrap}
.pt-foot .pt-nav{min-height:54px;white-space:nowrap}
.pt-foot .primary.pt-nav{margin-left:auto}
.pt-foot .pt-grid{margin:0 auto;font-size:16px;white-space:nowrap}
@media (max-width:420px){.pt-foot .soft.pt-nav span{display:none} .pt-foot .pt-nav{padding-left:16px;padding-right:16px} .pt-foot .pt-grid{padding:8px 10px;font-size:15px}}

/* The navigator (a sheet, and the check-your-work page) */
.pt-gridkey{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 12px}
.pt-gridkey span{display:inline-flex;align-items:center;gap:6px}
.k{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px dashed var(--ink-soft)}
.k.answered{border:0;background:var(--indigo)}
.pt-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;margin:0 0 14px}
.pt-cell{position:relative;height:48px;border-radius:12px;border:1.5px dashed var(--ink-soft);background:var(--surface);font:750 17px var(--display);color:var(--ink)}
.pt-cell.answered{border:0;background:color-mix(in srgb,var(--indigo) 82%,var(--surface));color:#fff}
.pt-cell.current{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink)}
.pt-cellflag{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--saffron);color:#fff;display:grid;place-items:center}
.pt-check .s-card{max-width:760px;margin:0 auto;width:100%}

/* Results */
.pt-results .stats .card small{display:block}
.pt-table{width:100%;border-collapse:collapse} .pt-table td{padding:8px 4px;border-bottom:1px solid var(--line)} .pt-table td:nth-child(2){font-weight:700;white-space:nowrap}
.pt-bar{display:flex;align-items:center;gap:10px;margin:8px 0}
.pt-bar strong{white-space:nowrap;min-width:64px;text-align:right}
.pt-meter{flex:0 0 30%;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.pt-meter i{display:block;height:100%;background:var(--emerald)}

/* Desmos: a side panel on iPad widths, a full sheet on a phone. Outside #app, so the question and pad stay put. */
#desmos-panel{position:fixed;z-index:40;top:0;right:0;bottom:0;width:min(46vw,560px);background:var(--surface);border-left:1px solid var(--line);
  box-shadow:-8px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
#desmos-panel[hidden]{display:none}
#desmos-panel.sheet-mode{width:100%;border-left:0}
.desmos-head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line)}
.desmos-head strong{font:750 18px var(--display)}
.desmos-body{position:relative;flex:1;min-height:0}
.desmos-body .muted{padding:16px}
.desmos-calc{position:absolute;inset:0}
@media (min-width:740px){
  body.calc-open:not(.calc-sheet) #app > .session{margin-right:min(46vw,560px)}
  /* Beside the calculator the question has a phone's width: the question over its pad, icon-only header buttons */
  body.calc-open:not(.calc-sheet) .session .s-body{flex-direction:column}
  body.calc-open:not(.calc-sheet) .session .s-card{flex:1 1 0;min-height:0}
  body.calc-open:not(.calc-sheet) .session .working{flex:1 1 0;min-height:180px}
  body.calc-open:not(.calc-sheet) .session .s-side .soft span,body.calc-open:not(.calc-sheet) .session .pt-foot .soft.pt-nav span{display:none}
  body.calc-open:not(.calc-sheet) .session .s-side .soft{padding:10px 12px}
  body.calc-open:not(.calc-sheet) .session .s-clock{font-size:26px}
  body.calc-open:not(.calc-sheet) .verbal .s-card.has-passage{display:block}
  body.calc-open:not(.calc-sheet) .pt-foot .pt-grid{font-size:15px;padding:8px 10px}
}
@media (min-width:740px) and (max-width:1100px){#desmos-panel:not(.sheet-mode){width:44vw} body.calc-open:not(.calc-sheet) #app > .session{margin-right:44vw}}