/* Formula Gym (information-technology/formula-gym.php). The page chrome is the one-screen layout in /css/resource.css,
   the grid and formula bar sheet.css. On a laptop or desktop: the spreadsheet on the left, the question on the right,
   filling what's left (the question scrolls inside its panel). On smaller screens the question comes first, then the
   spreadsheet, and the page scrolls. Theme tokens only. */
.rp-main{gap:10px}
.fg-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,400px);gap:12px}
.fg-work>.panel{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 14px 12px}

/* the spreadsheet */
.fg-sheet{gap:8px}
.fg-sheet-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fg-sheet-title{font:600 14px/1.2 var(--font-display);color:var(--ink)}
.fg-syntax{margin:-2px 0 0;min-height:1.2em;font:12.5px/1.2 var(--font-mono);color:var(--accent-deep)}
.fg-grid{flex:1;min-height:0;display:flex;flex-direction:column}
.fg-grid .sg-wrap{flex:1}
.fg-under{display:flex;flex-direction:column;gap:6px;flex:none}
.fg-cellinfo{margin:0;font-size:13px;color:var(--ink-soft);min-height:1.4em;overflow-wrap:anywhere}
.fg-cellinfo code{font:12.5px var(--font-mono);color:var(--accent-deep)}
.fg-dim{color:var(--muted)}
.fg-fns{display:flex;flex-wrap:wrap;gap:5px}
.fg-fn{font:600 12px/1 var(--font-mono);padding:6px 9px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink-soft);cursor:pointer}
.fg-fn:hover{border-color:var(--accent);color:var(--accent-deep)}
.fg-fn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* the question */
.fg-q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;margin-bottom:8px}
.fg-pips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.fg-pip{min-width:24px;height:24px;padding:0 4px;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);font:600 11.5px/1 var(--font-mono);cursor:pointer}
.fg-pip:hover{border-color:var(--accent)}
.fg-pip.now{outline:2px solid var(--accent);outline-offset:1px}
.fg-pip.first{background:var(--ok);border-color:var(--ok);color:#fff}
.fg-pip.done{background:var(--ok-tint);border-color:var(--ok);color:var(--ink)}
.fg-pip.shown{background:var(--hint-tint);border-color:var(--hint);color:var(--ink)}
.fg-pip.tried{border-color:var(--bad)}
.fg-pip.fg-rev{font-family:var(--font-display);padding:0 8px}
.fg-pip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.fg-scroll{flex:1;min-height:0;overflow:auto;padding-right:2px}
.fg-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 11.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fg-lvl{padding:3px 7px;border-radius:3px;background:var(--accent-tint);color:var(--accent-deep)}
.fg-set{padding:3px 7px;border-radius:3px;background:var(--panel-2);color:var(--ink-soft);text-transform:none;letter-spacing:0;font-family:var(--font-body)}
.fg-qtext{margin:0 0 8px;font:600 clamp(15.5px,1.25vw,18px)/1.45 var(--font-display);color:var(--ink);text-wrap:pretty}
.fg-where{margin:0 0 10px;font-size:13.5px;color:var(--ink-soft)}
.fg-about{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.fg-actions{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.fg-tries{font-size:12.5px;color:var(--muted)}
.fg-bad,.fg-good,.fg-hint{margin:8px 0;padding:9px 12px;border-radius:0 6px 6px 0;font-size:14px;line-height:1.5;color:var(--ink)}
.fg-bad{border-left:3px solid var(--bad);background:var(--bad-tint)}
.fg-good{border-left:3px solid var(--ok);background:var(--ok-tint)}
.fg-hint{border-left:3px solid var(--hint);background:var(--hint-tint)}
.fg-bad code,.fg-hint code,.cq-working code,.fg-review code{font:13px var(--font-mono);background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:0 4px;overflow-wrap:anywhere}
.cq-working.shown{border-left-color:var(--hint)}
.cq-working.shown h4{color:var(--hint)}
.fg-yours,.fg-model,.fg-also{margin:0 0 6px;font-size:13.5px;color:var(--ink-soft)}
.fg-next{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:10px 0 4px}

/* the review */
.fg-sum{margin:0 0 10px;font-size:14px;color:var(--ink)}
.fg-review{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.fg-review li{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--panel-2)}
.fg-rq{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font:13.5px/1.4 var(--font-body)}
.fg-rq:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fg-rn{font:700 12px/1 var(--font-mono);min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:4px;background:var(--panel);border:1px solid var(--line-strong)}
.fg-rt{flex-basis:100%;color:var(--ink-soft)}
.fg-st{font:700 11px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;padding:3px 6px;border-radius:3px}
.fg-st.first{background:var(--ok);color:#fff}
.fg-st.later{background:var(--ok-tint);color:var(--ok)}
.fg-st.shown{background:var(--hint-tint);color:var(--hint)}
.fg-st.todo{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.fg-rm,.fg-rf{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}

/* a short laptop window: a little tighter */
@media (min-width:901px) and (max-height:700px){
  .fg-work>.panel{padding:8px 12px 10px}
  .fg-sheet{gap:6px}
  .fg-cellinfo{display:none}
  .fg-fn{padding:5px 8px}
  table.sg thead th{height:20px}
}
/* narrower laptops: a narrower question panel, and the grid's columns share what's left */
@media (min-width:901px) and (max-width:1180px){
  .fg-work{grid-template-columns:minmax(0,1fr) 300px}
  .fg-grid table.sg{min-width:0}
}

/* tablets and phones: the question first, then the spreadsheet; the page scrolls */
@media (max-width:900px){
  .fg-work{display:flex;flex-direction:column}
  .fg-q{order:-1}
  .fg-scroll{overflow:visible}
  .fg-grid .sg-wrap{max-height:none}
  .fg-pip{min-width:40px;height:40px;font-size:13px}
  .fg-fn{min-height:40px;padding:8px 12px;font-size:13px}
  .btn{min-height:40px}
  .seg-toggle button{min-height:40px}
  .rp-controls{width:100%}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .fg-work>.panel{padding:10px}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;white-space:normal;text-align:center;line-height:1.15;padding:8px 6px;min-width:0}
  .fbar .fbar-fx{display:none}
}