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

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

.cm-inhead{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.cm-tabs{margin:0;flex:0 0 auto}
.cm-tabs button{flex:0 0 auto;padding:0.375rem 0.875rem}
.cm-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)}
#pastebox .cm-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cm-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.cm-data{width:100%;min-height:6.5rem;font-family:var(--mono);font-size:0.8125rem;line-height:1.5;resize:vertical;tab-size:12}
@media(max-width:520px){.cm-data{min-height:5.75rem}}
.cm-row{display:flex;flex-wrap:wrap;gap:0.5rem}
.cm-small{height:2.375rem;padding-top:0;padding-bottom:0}
#pastebox[hidden],#tablebox[hidden]{display:none}

/* editable table */
.cm-gridwrap{overflow:auto;max-height:22rem;border:1px solid var(--line);border-radius:0.5rem;margin-bottom:0.625rem}
.cm-grid{border-collapse:collapse;width:100%;font-size:0.875rem}
.cm-grid th,.cm-grid td{padding:0.1875rem;border-bottom:1px solid var(--line);vertical-align:middle}
.cm-grid thead th{position:sticky;top:0;background:var(--surface-2);z-index:1}
.cm-grid th{white-space:nowrap}
.cm-grid input{width:100%;min-width:5.5rem;padding:0.375rem 0.5rem;font-size:0.875rem}
.cm-grid thead input{font-weight:600}
.cm-grid td input[inputmode="decimal"]{text-align:right;font-family:var(--mono)}
.cm-grid th input{display:inline-block;width:100%}
.cm-grid th:has(.cm-del) input{width:calc(100% - 2.125rem)}
.cm-del{width:1.875rem;height:1.875rem;border:0;background:transparent;color:var(--muted);font-size:1.125rem;border-radius:0.375rem;cursor:pointer;vertical-align:middle}
.cm-del:hover{color:var(--bad);background:var(--surface-2)}

/* chart */
.cm-types{margin:0;flex-wrap:nowrap;overflow-x:auto}
.cm-types button{padding:0.4375rem 0.25rem;white-space:nowrap;min-width:0}
@media(max-width:520px){.cm-types button{font-size:0.8125rem}}
.cm-chart{display:block;border:1px solid var(--line);border-radius:0.625rem;overflow:hidden;background:var(--surface-2);line-height:0}
.cm-chart svg{display:block;width:100%;height:auto}
.cm-notes{margin:0;padding:0 0 0 1.125rem;font-size:0.8125rem;line-height:1.5;color:var(--ink-2)}
.cm-notes[hidden]{display:none}
.cm-export{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.cm-scale{display:flex;align-items:center;gap:0.375rem;font-size:0.8125rem;color:var(--muted)}
.cm-scale select{width:auto;padding-top:0.5rem;padding-bottom:0.5rem}
.cm-sharerow{display:flex;gap:0.5rem}
.cm-sharerow input{flex:1;min-width:0;font-family:var(--mono);font-size:0.8125rem}
.cm-sharerow input[hidden],.cm-sharerow .btn[hidden],.cm-help[hidden]{display:none}
.cm-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)}

/* settings */
.cm-settings>.cm-k{margin:0}
.cm-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5rem),1fr));gap:0.875rem 0.75rem;align-items:start}
.cm-set .field[hidden]{display:none}
.cm-set .field .head{margin-bottom:0.375rem}
.cm-set .cm-wide{grid-column:1/-1}
.cm-set select,.cm-set input[type="text"],.cm-set input[type="number"]{width:100%}
.cm-check{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;color:var(--ink);cursor:pointer;min-height:2.5rem}
.cm-check input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}
.cm-wide .cm-help{margin-top:0.25rem}

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