/* /dot-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 (dotplot-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}
.dp-head .sub{margin-bottom:1rem}
@media(max-width:520px){.dp-head h1{font-size:1.5rem;margin-bottom:0.125rem}.dp-head .sub{font-size:0.875rem;line-height:1.45;margin-bottom:0.625rem}}

/* layout: input, plot, options, stats, worksheet on a phone; input + options beside the plot when wide */
.dp-duo{display:grid;gap:0.875rem;grid-template-areas:"input" "view" "opts" "stats" "ws";align-items:start}
.dp-input{grid-area:input}
.dp-view{grid-area:view}
.dp-optcard{grid-area:opts}
.dp-statcard{grid-area:stats}
.dp-wscard{grid-area:ws}
@media(min-width:960px){
  .dp-duo{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);grid-template-areas:"input view" "opts view" "opts stats" "ws ws";gap:1.25rem}
}
.dp-input,.dp-view,.dp-optcard,.dp-statcard,.dp-wscard{display:grid;gap:0.75rem;align-content:start;min-width:0}
@media(max-width:520px){.dp-input,.dp-view,.dp-optcard,.dp-statcard,.dp-wscard{padding:0.75rem;gap:0.625rem}}

.dp-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)}
.dp-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.dp-help:empty{display:none}

/* input */
.dp-set{display:grid;gap:0.375rem}
.dp-sethead{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap}
.dp-sethead .dp-k{margin:0}
.dp-sethead input{flex:1 1 8rem;max-width:14rem;min-width:0;padding-top:0.3125rem;padding-bottom:0.3125rem;font-size:0.875rem}
.dp-input textarea{width:100%;min-height:4.5rem;font-family:var(--mono);font-size:0.875rem;line-height:1.5;resize:vertical}
#b{min-height:3rem}
@media(max-width:520px){.dp-input textarea{min-height:3.75rem}#b{min-height:2.5rem}}

/* options */
.dp-optcard h2,.dp-statcard h2,.dp-wscard h2{margin:0}
.dp-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:0.75rem;align-items:end}
.dp-opts select,.dp-opts input[type="text"],.dp-statcard select{width:100%}
.dp-check{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;color:var(--ink);cursor:pointer;min-height:2.5rem}
.dp-check input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}

/* plot */
.dp-plot{display:block;border:1px solid var(--line);border-radius:0.625rem;overflow:hidden;background:var(--surface-2);line-height:0}
.dp-plot svg{display:block;width:100%;height:auto}
.dp-notes{margin:0;padding:0 0 0 1.125rem;font-size:0.8125rem;line-height:1.5;color:var(--ink-2)}
.dp-notes[hidden]{display:none}
.dp-notes .is-bad{color:var(--ink);font-weight:500}
.dp-export{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.dp-save{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;padding-top:0.75rem;border-top:1px solid var(--line)}

/* stats */
.dp-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0.75rem}
.dp-stats>.dp-help{grid-column:1/-1}
.dp-statset h3{margin:0 0 0.375rem;font-size:0.9375rem}
.dp-statset dl{display:grid;grid-template-columns:auto 1fr;gap:0.25rem 0.75rem;margin:0;font-size:0.875rem;font-variant-numeric:tabular-nums}
.dp-statset dt{font-family:var(--mono);font-size:0.75rem;color:var(--muted);padding-top:0.125rem}
.dp-statset dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

/* worksheet */
.dp-wsrow{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:end}
.dp-wsrow .field{flex:0 1 9rem}
.dp-wsrow input{width:100%}
.dp-wspages{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:0.75rem}
.dp-wspages:empty{display:none}
.dp-wspages svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:0.375rem;background:#fff}

.dp-notice{margin:0 0 1rem;padding:0.75rem 0.875rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--accent);border-radius:0.5rem;background:var(--accent-soft);font-size:0.875rem;line-height:1.5;color:var(--ink)}
.dp-notice[hidden]{display:none}
.dp-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}

/* print: the plot and its numbers; or, with body.print-ws, only the two worksheet pages */
@media print{
  .brand,.skip-link,.dp-input,.dp-optcard,.dp-export,.dp-save,.dp-notes,.dp-wscard,.dp-statcard .field,#methoddef,.explainer-row,footer.site,.dp-notice,.dp-head{display:none!important}
  .dp-duo{display:block}
  .card{border:0;box-shadow:none;padding:0;background:#fff}
  .dp-plot{border:0;background:#fff;break-inside:avoid}
  .dp-statcard{margin-top:1rem;break-inside:avoid}
  .dp-statset dd,.dp-statset dt,.dp-statset h3{color:#000}
  body.print-ws .dp-view,body.print-ws .dp-statcard{display:none!important}
  body.print-ws .dp-wscard{display:block!important}
  body.print-ws .dp-wscard>:not(#ws-pages){display:none!important}
  body.print-ws .dp-wspages{display:block}
  body.print-ws .dp-wspages svg{border:0;border-radius:0;width:100%;max-height:100vh;break-after:page;page-break-after:always}
  body.print-ws .dp-wspages svg:last-child{break-after:auto;page-break-after:auto}
}