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

/* layout: input, plot, steps on a phone; input + steps beside a sticky plot on a wide screen */
.bp-duo{display:grid;gap:0.875rem;grid-template-areas:"input" "view" "opts" "steps";align-items:start}
.bp-input{grid-area:input}
.bp-optcard{grid-area:opts}
.bp-view{grid-area:view}
.bp-stepcard{grid-area:steps}
@media(min-width:960px){
  .bp-duo{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);grid-template-areas:"input view" "opts view" "steps view";gap:1.25rem}
  .bp-view{position:sticky;top:1rem}
}
.bp-input,.bp-view,.bp-optcard,.bp-stepcard{display:grid;gap:0.75rem;align-content:start;min-width:0}
@media(max-width:520px){.bp-input,.bp-view,.bp-optcard,.bp-stepcard{padding:0.75rem}}

.bp-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)}
.bp-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.bp-help[hidden]{display:none}
.bp-row{display:flex;flex-wrap:wrap;gap:0.5rem}

/* input */
.bp-tabs{margin:0}
.bp-tabs button{padding:0.4375rem 0.5rem}
#pane-raw,#pane-five{display:grid;gap:0.375rem}
#pane-raw[hidden],#pane-five[hidden],.bp-method[hidden]{display:none}
#pane-raw .bp-k,#pane-five .bp-k{margin:0}
.bp-input textarea{width:100%;min-height:6.5rem;font-family:var(--mono);font-size:0.875rem;line-height:1.5;resize:vertical}
@media(max-width:520px){.bp-input textarea{min-height:5rem}}
.bp-method{display:grid;gap:0.375rem}
.bp-method .bp-k{margin:0}
.bp-method select{width:100%}
.bp-def a{color:inherit;word-break:break-word}

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

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

/* steps */
.bp-stephead{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.bp-stephead h2{margin:0}
.bp-steps{display:grid;gap:0.875rem}
.bp-group h3{margin:0 0 0.375rem;font-size:0.9375rem;font-weight:600;color:var(--ink);word-break:break-word}
.bp-group ol{margin:0;padding:0;list-style:none;display:grid;gap:0.25rem}
.bp-group li{padding:0.3125rem 0.5rem;border-left:0.1875rem solid var(--line-2);font-family:var(--mono);font-size:0.8125rem;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.bp-group li[data-k="sorted"]{max-height:7.5rem;overflow:auto}
.bp-group li[data-k="q1"],.bp-group li[data-k="median"],.bp-group li[data-k="q3"]{border-left-color:var(--accent)}
.bp-group li[data-k="outliers"]{border-left-color:var(--ink)}
.bp-group .bp-err{color:var(--ink);border-left-color:var(--bad)}

.bp-methods li{margin-bottom:0.5rem}
.bp-methods a{word-break:break-word}

.bp-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)}
.bp-notice[hidden]{display:none}
.bp-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}
.bp-sharedbar{display:grid;gap:0.625rem}
.bp-sharedbar p{margin:0}
@media(prefers-reduced-motion:reduce){.bp-tabs button{transition:none}}