/* STS Educational Tools — picker + panels (standalone page [sts_edu_tools]).
   Self-contained; uses site tokens when present via var(--x, fallback). */
.sts-edu-tools{
  --_accent:var(--accent,#2f7d4f); --_deep:var(--accent-deep,#1b5233);
  --_surface:var(--surface,#fff); --_surface2:var(--surface-2,#e9efe6);
  --_ink:var(--ink,#161d18); --_soft:var(--ink-soft,#4e5a51); --_faint:var(--ink-faint,#84918a);
  --_line:var(--line,#dce4d9);
  --_sans:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,system-ui,sans-serif;
  font-family:var(--_sans);display:grid;gap:22px}
.sts-edu-tools *{box-sizing:border-box}

/* Two columns from 900px up: picker on the left, the open tool on the right.
   Stacked, the picker pushed the tool down the page and switching tools meant
   scrolling back up to reach the buttons — the taller the tool, the worse it got.
   Beside it, the choices stay on screen while the tool is being used.

   Two rows, not one. The heading takes row 1 of the right column on its own, and the
   picker and the tool both start on row 2, so the buttons line up with the thing they
   switch rather than with a paragraph of text above it. Source order is picker, lead,
   panels — which is also the right order stacked on a phone: choose, then read what you
   chose, then use it. */
@media (min-width:900px){
  .sts-edu-tools{
    grid-template-columns:270px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:30px;row-gap:0;align-items:start}
  .sts-edu-lead{grid-column:2;grid-row:1}
  /* Sticky so the picker stays reachable next to a tool taller than the viewport.
     Offset clears the sticky site header. */
  .sts-edu-picker{grid-column:1;grid-row:2;position:sticky;top:88px}
  .sts-edu-panels{grid-column:2;grid-row:2}
}
.sts-edu-lead{max-width:640px;margin:0 0 18px}

/* picker (hidden by PHP when only one tool) */
.sts-edu-picker{display:grid;gap:12px;grid-template-columns:1fr;align-content:start}
@media (min-width:680px) and (max-width:899.98px){
  .sts-edu-picker{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
.sts-edu-pick{display:flex;align-items:flex-start;gap:12px;text-align:left;background:var(--_surface);border:1px solid var(--_line);border-radius:14px;padding:16px;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.sts-edu-pick:hover{transform:translateY(-1px);border-color:var(--_accent)}
.sts-edu-pick.active{border-color:var(--_accent);box-shadow:0 0 0 1px var(--_accent),0 14px 30px -20px rgba(27,82,51,.4)}
.sts-edu-pick-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--_surface2);color:var(--_accent)}
.sts-edu-pick.active .sts-edu-pick-ic{background:var(--_accent);color:#fff}
.sts-edu-pick-ic svg{width:22px;height:22px}
.sts-edu-pick-tx{display:flex;flex-direction:column;gap:3px}
.sts-edu-pick-name{font-weight:800;font-size:16px;color:var(--_ink);letter-spacing:-.01em}
.sts-edu-pick-tag{font-size:13px;color:var(--_soft);line-height:1.4}

/* panels */
.sts-edu-panel{display:none}
.sts-edu-panel.active{display:block}

.sts-edu-panel-title{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--_ink);margin:0 0 .3em}
.sts-edu-panel-tag{font-size:16px;color:var(--_soft);margin:0;line-height:1.5}

.sts-edu-pick:focus-visible{outline:2.5px solid var(--_accent);outline-offset:2px}

/* In the narrow left column the per-tool tagline is repeated verbatim in the panel
   heading two inches to the right, so it is dropped there — the name and icon are
   enough to choose by, and it keeps every choice visible without scrolling. */
@media (min-width:900px){
  .sts-edu-pick{padding:14px}
  .sts-edu-pick-tag{display:none}
  .sts-edu-pick-name{font-size:15.5px}
}

/* The page template caps its entry at 760px, which is right for prose and wrong for a
   two-column tool — it squeezed the widget into half the space beside the picker.
   Lifted only where the tool is actually present, so ordinary pages keep their
   measure. Browsers without :has() simply keep the 760px cap: narrower than intended,
   but laid out correctly, so the fallback is a worse fit rather than a broken page. */
.sts-entry:has(.sts-edu-tools){max-width:none}