/* /histogram-maker/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). The chart's
   own colours live in the SVG (histogram-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}
.hg-head .sub{margin-bottom:1rem}
@media(max-width:520px){.hg-head h1{font-size:1.5rem;margin-bottom:0.125rem}.hg-head .sub{font-size:0.875rem;line-height:1.45;margin-bottom:0.625rem}}

/* layout: input, chart, options, table, working on a phone; input + table beside a sticky chart when wide */
.hg-duo{display:grid;gap:0.875rem;grid-template-areas:"input" "view" "opts" "table" "steps";align-items:start}
.hg-input{grid-area:input}
.hg-view{grid-area:view}
.hg-optcard{grid-area:opts}
.hg-tablecard{grid-area:table}
.hg-stepcard{grid-area:steps}
@media(min-width:960px){
  .hg-duo{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);grid-template-areas:"input view" "opts table" "steps table";gap:1.25rem}
}
.hg-input,.hg-view,.hg-optcard,.hg-tablecard,.hg-stepcard{display:grid;gap:0.75rem;align-content:start;min-width:0}
@media(max-width:520px){.hg-input,.hg-view,.hg-optcard,.hg-tablecard,.hg-stepcard{padding:0.75rem}}

.hg-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)}
.hg-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.hg-help[hidden],.hg-rule[hidden],.hg-ruleset[hidden]{display:none}
.hg-help:empty{display:none}

/* input */
.hg-tabs{margin:0}
.hg-tabs button{padding:0.4375rem 0.5rem}
#pane-raw,#pane-table{display:grid;gap:0.375rem}
#pane-raw[hidden],#pane-table[hidden]{display:none}
#pane-raw .hg-k,#pane-table .hg-k{margin:0}
.hg-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){.hg-input textarea{min-height:4.25rem}}
.hg-rule{display:grid;gap:0.5rem}
.hg-rule>.hg-k{margin:0}
.hg-rule select{width:100%}
.hg-ruleset{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9rem),1fr));gap:0.625rem}
.hg-ruleset input{width:100%}

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

/* chart */
.hg-plot{display:block;border:1px solid var(--line);border-radius:0.625rem;overflow:hidden;background:var(--surface-2);line-height:0}
.hg-plot svg{display:block;width:100%;height:auto}
.hg-notes{margin:0;padding:0 0 0 1.125rem;font-size:0.8125rem;line-height:1.5;color:var(--ink-2)}
.hg-notes[hidden]{display:none}
.hg-notes .is-bad{color:var(--ink);font-weight:500}
.hg-export{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.hg-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)}

/* table */
.hg-tablehead{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.hg-tablehead h2{margin:0}
.hg-cols{display:flex;flex-wrap:wrap;gap:0.375rem 0.875rem;margin:0;padding:0;border:0}
.hg-cols legend{padding:0;margin-bottom:0.375rem}
.hg-cols label{display:flex;align-items:center;gap:0.375rem;font-size:0.875rem;color:var(--ink);cursor:pointer;min-height:2rem}
.hg-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:0.5rem}
.hg-table{width:100%;border-collapse:collapse;font-size:0.8125rem;font-variant-numeric:tabular-nums}
.hg-table th,.hg-table td{padding:0.375rem 0.5rem;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;color:var(--ink)}
.hg-table thead th{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--surface-2);white-space:normal;vertical-align:bottom}
.hg-table th[data-col="cls"],.hg-table td[data-col="tally"]{text-align:left}
.hg-table tbody th{font-family:var(--mono);font-weight:500}
.hg-table tfoot th,.hg-table tfoot td{font-weight:600;border-bottom:0;border-top:1px solid var(--line-2)}
.hg-table td[data-col="tally"]{line-height:0;color:var(--ink)}
.hg-table svg.tally{display:inline-block;vertical-align:middle}
.hg-typed{color:var(--muted);font-weight:400}

/* working */
.hg-stepcard h2{margin:0}
.hg-steps{margin:0;padding:0;list-style:none;display:grid;gap:0.375rem}
.hg-steps li{padding:0.375rem 0.5rem;border-left:0.1875rem solid var(--line-2);font-size:0.8125rem;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.hg-steps li[data-k="mean"],.hg-steps li[data-k="median"],.hg-steps li[data-k="mode"]{border-left-color:var(--accent)}

.hg-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)}
.hg-notice[hidden]{display:none}
.hg-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}
@media(prefers-reduced-motion:reduce){.hg-tabs button{transition:none}}

/* print: the chart, the table and the working; no controls */
@media print{
  .brand,.skip-link,.hg-input,.hg-optcard,.hg-export,.hg-save,.hg-notes,.hg-cols,#copytable,.explainer-row,footer.site,.hg-notice{display:none!important}
  .hg-duo{display:block}
  .card{border:0;box-shadow:none;padding:0;background:#fff}
  .hg-plot{border:0;background:#fff;break-inside:avoid}
  .hg-tablecard,.hg-stepcard{margin-top:1rem;break-inside:avoid}
  .hg-tablewrap{overflow:visible;border:0}
  .hg-table th,.hg-table td{color:#000}
}