/* /stem-and-leaf-plot-maker/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). The
   plot's own colours live in the SVG (stem-core.js) because they must travel with the exported file. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.sl-head .sub{margin-bottom:1rem}
@media(max-width:520px){.sl-head h1{font-size:1.5rem;margin-bottom:0.125rem}.sl-head .sub{font-size:0.875rem;line-height:1.45;margin-bottom:0.625rem}}

/* phone: input, plot, numbers. Wide: input + numbers beside a sticky plot */
.sl-duo{display:grid;gap:0.875rem;grid-template-areas:"input" "view" "stats";align-items:start}
.sl-input{grid-area:input}
.sl-view{grid-area:view}
.sl-statcard{grid-area:stats}
@media(min-width:960px){
  .sl-duo{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);grid-template-areas:"input view" "stats view";gap:1.25rem}
  .sl-view{position:sticky;top:1rem}
}
.sl-input,.sl-view,.sl-statcard{display:grid;gap:0.75rem;align-content:start;min-width:0}
@media(max-width:520px){.sl-input,.sl-view,.sl-statcard{padding:0.75rem;gap:0.625rem}}

.sl-k{display:block;margin:0 0 0.375rem;font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sl-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.sl-help:empty{display:none}
.sl-help a{color:inherit;word-break:break-word}

.sl-tabs{margin:0}
.sl-tabs button{padding:0.4375rem 0.5rem}
.sl-set{display:grid;gap:0.375rem}
.sl-set[hidden],.sl-name[hidden]{display:none}
.sl-namerow{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}
.sl-namerow .sl-k{margin:0}
.sl-name{flex:0 1 11rem;min-width:0;font-size:0.875rem;padding-top:0.375rem;padding-bottom:0.375rem}
.sl-input textarea{width:100%;min-height:5.5rem;font-family:var(--mono);font-size:0.875rem;line-height:1.5;resize:vertical}
@media(max-width:520px){.sl-input textarea{min-height:4.25rem}}
.sl-opts,.sl-set2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;align-items:end}
.sl-opts select,.sl-set2 select,.sl-set2 input,.sl-statcard select{width:100%}
.sl-opts .sl-k,.sl-set2 .sl-k,.sl-statcard .field .sl-k{margin-bottom:0.25rem}

/* plot: scrolls inside itself when a stem carries many leaves */
.sl-plot{border:1px solid var(--line);border-radius:0.625rem;background:var(--surface-2);overflow:auto;max-height:70vh;line-height:0}
.sl-plot svg{display:block;max-width:none;height:auto}
.sl-plot:empty{display:none}
.sl-key{margin:0;font-family:var(--mono);font-size:0.875rem;line-height:1.5;color:var(--ink)}
.sl-key:empty{display:none}
.sl-notes{margin:0;padding:0 0 0 1.125rem;font-size:0.8125rem;line-height:1.5;color:var(--ink-2)}
.sl-notes[hidden]{display:none}
.sl-notes .is-bad{color:var(--ink);font-weight:500}
.sl-export{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}

/* numbers read off the plot */
.sl-statcard h2{margin:0}
.sl-stats{display:grid;gap:0.875rem}
.sl-group h3{margin:0 0 0.375rem;font-size:0.9375rem;font-weight:600;color:var(--ink);word-break:break-word}
.sl-group dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.25rem 0.75rem;margin:0}
.sl-group dt{font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.sl-group dd{margin:0;font-family:var(--mono);font-size:0.8125rem;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.sl-group dd small{display:block;color:var(--ink-2);font-size:0.75rem}
.sl-group .sl-trunc{margin:0.375rem 0 0;font-size:0.8125rem;color:var(--ink-2)}
.sl-pre{font-family:var(--mono);font-size:0.875rem;line-height:1.5;background:var(--surface-2);border:1px solid var(--line);border-radius:0.5rem;padding:0.75rem 1rem;overflow:auto}

@media print{
  .brand,.skip-link,.sl-head .sub,.sl-input,.sl-export,.sl-set2,#copynote,.sl-statcard .field,#methoddef,.explainer-row,footer.site{display:none!important}
  .sl-duo{display:block}
  .sl-view,.sl-statcard{box-shadow:none;border:0;padding:0;position:static}
  .sl-plot{max-height:none;overflow:visible;border:0;background:none}
}