/* SchoolTools mobile-first foundation. New shared UI should use these tokens and
   primitives before adding family-specific styles. */
:root{
  --st-color-canvas:#f6f8fc;--st-color-surface:#fff;--st-color-surface-soft:#eef3f8;
  --st-color-text:#152238;--st-color-muted:#627087;--st-color-border:#d8e0ea;
  --st-color-primary:#2563eb;--st-color-success:#087f5b;--st-color-warning:#9a6700;--st-color-danger:#c33b32;
  --st-space-1:.25rem;--st-space-2:.5rem;--st-space-3:.75rem;--st-space-4:1rem;
  --st-space-5:1.5rem;--st-space-6:2rem;--st-space-7:3rem;
  --st-radius-sm:.5rem;--st-radius-md:.75rem;--st-radius-lg:1rem;--st-radius-pill:999px;
  --st-shadow-sm:0 .25rem 1rem rgba(21,34,56,.06);--st-shadow-md:0 1rem 3rem rgba(21,34,56,.1);
  --st-duration-fast:150ms;--st-duration-normal:260ms;--st-ease:cubic-bezier(.2,.8,.2,1);
  --st-touch:2.75rem;--st-page-gutter:clamp(.75rem,4vw,1.75rem);--st-page-max:76rem;
}
html{color-scheme:light dark;scroll-padding-top:5rem}
body{min-width:20rem}
img,svg,canvas,video{max-inline-size:100%}
.st-container{width:min(calc(100% - 2 * var(--st-page-gutter)),var(--st-page-max));margin-inline:auto}
.st-stack{display:grid;gap:var(--st-space-4)}.st-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--st-space-3)}
.st-card{padding:var(--st-space-4);border:1px solid var(--st-color-border);border-radius:var(--st-radius-lg);background:var(--st-color-surface);box-shadow:var(--st-shadow-sm)}
.st-button,.st-icon-button{min-block-size:var(--st-touch);border-radius:var(--st-radius-md);font:inherit;font-weight:700;touch-action:manipulation}
.st-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--st-space-2);padding:.7rem 1rem;border:1px solid transparent}
.st-icon-button{min-inline-size:var(--st-touch);display:inline-grid;place-items:center;padding:.5rem}
.st-field{inline-size:100%;min-block-size:var(--st-touch);padding:.65rem .8rem;border:1px solid var(--st-color-border);border-radius:var(--st-radius-md);background:var(--st-color-surface);color:var(--st-color-text);font:inherit}
.st-dialog,.st-sheet{border:1px solid var(--st-color-border);background:var(--st-color-surface);color:var(--st-color-text);box-shadow:var(--st-shadow-md)}
.st-sheet{position:fixed;z-index:1200;inset:auto 0 0;padding:var(--st-space-5) var(--st-page-gutter) max(var(--st-space-5),env(safe-area-inset-bottom));border-radius:var(--st-radius-lg) var(--st-radius-lg) 0 0}
.st-notice{display:grid;gap:var(--st-space-2);padding:var(--st-space-4);border:1px solid var(--st-color-border);border-radius:var(--st-radius-md);background:var(--st-color-surface-soft)}

/* Shared, descriptive processing visual used by conversion families. */
.st-process-visual{display:grid;gap:1rem;margin:0 auto 1.1rem;max-width:28rem;text-align:left}
.st-process-track{position:relative;display:grid;grid-template-columns:auto minmax(4rem,1fr) auto;align-items:center;gap:.75rem}
.st-process-file{display:grid;place-items:center;width:3.5rem;aspect-ratio:4/5;border:1px solid var(--st-color-border);border-radius:.55rem;background:var(--st-color-surface);box-shadow:var(--st-shadow-sm);font-size:.62rem;font-weight:800;color:var(--st-color-primary)}
.st-process-file:last-child{color:var(--st-color-success)}
.st-process-line{position:relative;height:.35rem;border-radius:var(--st-radius-pill);overflow:hidden;background:var(--st-color-surface-soft)}
.st-process-line::after{content:"";position:absolute;inset:0;width:38%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--st-color-primary),transparent);animation:st-process-scan 1.45s var(--st-ease) infinite}
.st-process-steps{display:flex;justify-content:space-between;gap:.5rem;color:var(--st-color-muted);font-size:.75rem}.st-process-steps b{color:var(--st-color-text)}
@keyframes st-process-scan{from{transform:translateX(-110%)}to{transform:translateX(370%)}}
@media(min-width:48rem){.st-card{padding:var(--st-space-5)}.st-sheet{position:static;border-radius:var(--st-radius-lg)}}
@media(prefers-reduced-motion:reduce){.st-process-line::after{width:65%;animation:none}.st-button,.st-icon-button{transition:none!important}}