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

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

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

/* sets */
.vd-sethead{display:flex;align-items:center;gap:0.75rem}
.vd-sethead .vd-k{margin:0}
.vd-count{margin:0;flex:1;max-width:16rem}
.vd-count button{padding:0.375rem 0.25rem}
.vd-names{display:grid;gap:0.375rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}
.vd-setrow{display:flex;align-items:center;gap:0.375rem;min-width:0}
.vd-setrow[hidden]{display:none}
.vd-letter{flex:0 0 1.25rem;font-family:var(--mono);font-weight:600;font-size:0.875rem;color:var(--muted);text-align:center}
.vd-setrow input[type="color"]{flex:0 0 2.25rem;width:2.25rem;height:2.25rem;padding:0.125rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);cursor:pointer}
.vd-setrow input[type="text"]{flex:1;min-width:0;padding-top:0.4375rem;padding-bottom:0.4375rem}

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

/* work: items, shade, labels */
.vd-tabs{margin:0}
.vd-tabs button{padding:0.4375rem 0.5rem}
#pane-items,#pane-shade,#pane-label{display:grid;gap:0.625rem}
#pane-items[hidden],#pane-shade[hidden],#pane-label[hidden]{display:none}
#pane-shade>.vd-k,#pane-label>.vd-k{margin-bottom:-0.25rem}
.vd-itemgrid{display:grid;gap:0.625rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}
.vd-itembox{display:block;min-width:0}
.vd-itembox[hidden]{display:none}
.vd-itembox .vd-k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:0}
.vd-itembox textarea{width:100%;min-height:6rem;font-family:var(--mono);font-size:0.8125rem;line-height:1.5;resize:vertical}
.vd-expr{width:100%;font-family:var(--mono);font-size:1rem}
.vd-keys{display:flex;flex-wrap:wrap;gap:0.3125rem}
.vd-keys button{min-width:2.5rem;height:2.5rem;padding:0 0.5rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;font-family:var(--mono);font-size:1rem;cursor:pointer}
.vd-keys button:hover{border-color:var(--ink)}
.vd-keys button[hidden]{display:none}
.vd-err{margin:0;padding:0.5rem 0.75rem;border-left:0.25rem solid var(--bad);border-radius:0.375rem;background:var(--surface-2);font-size:0.875rem;line-height:1.5;color:var(--ink)}
.vd-err[hidden]{display:none}
.vd-echo{margin:0;font-size:0.9375rem;line-height:1.5;color:var(--ink)}
.vd-echo-expr{font-family:var(--mono);font-weight:600;padding:0.0625rem 0.375rem;border-radius:0.25rem;background:var(--accent-soft)}
.vd-shadelist{margin:0;padding:0 0 0 1.125rem;font-size:0.875rem;line-height:1.55;color:var(--ink-2)}
.vd-shadelist:empty{display:none}
#labregion,#labtext{width:100%}

/* options */
.vd-options{border-top:1px solid var(--line);padding-top:0.625rem}
.vd-options summary{cursor:pointer;font-weight:600;font-size:0.9375rem;color:var(--ink);padding:0.25rem 0}
.vd-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5rem),1fr));gap:0.75rem;align-items:start;margin-top:0.625rem}
.vd-set .vd-wide{grid-column:1/-1}
.vd-set select,.vd-set input[type="text"]{width:100%}
.vd-check{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;color:var(--ink);cursor:pointer;min-height:2.5rem}
.vd-check input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}
#propfield.is-off .vd-check{color:var(--muted);cursor:not-allowed}
.vd-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:0.5rem;margin:0.25rem 0 0.5rem}
.vd-sizes[hidden]{display:none}
.vd-size{display:grid;gap:0.25rem;font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.vd-size input{width:100%;font-family:var(--mono)}

/* regions table */
.vd-regions{border-top:1px solid var(--line);padding-top:0.75rem;display:grid;gap:0.375rem}
.vd-regions h2{margin:0}
.vd-tablewrap{overflow:auto;max-height:22rem;border:1px solid var(--line);border-radius:0.5rem}
.vd-table{border-collapse:collapse;width:100%;font-size:0.8125rem;line-height:1.45}
.vd-table th,.vd-table td{padding:0.375rem 0.5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.vd-table thead th{position:sticky;top:0;background:var(--surface-2);font-weight:600;color:var(--ink-2)}
.vd-table .vd-num{font-family:var(--mono);text-align:right}
.vd-table .vd-items{color:var(--ink-2);word-break:break-word}

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