/* /word-cloud-generator/ page styles, built from /assets/polyatic.css tokens. The cloud itself is a
   picture with its own background colour (white by default) in both themes; "transparent" shows the
   page's checker behind it. Fonts for the cloud load with the FontFace API from app.js. */
.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}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* phone: text, cloud, look, table. desktop: text + look + table left, cloud sticky right */
.wc-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "cloud" "look" "table";align-items:start}
.wc-textcard{grid-area:text}
.wc-cloudcard{grid-area:cloud}
.wc-lookcard{grid-area:look}
.wc-tablecard{grid-area:table}
@media(min-width:920px){
  .wc-grid{grid-template-columns:minmax(0,0.95fr) minmax(0,1.15fr);grid-template-areas:"text cloud" "look cloud" "table cloud";gap:1.25rem 1.75rem}
  .wc-cloudcard{position:sticky;top:1rem}
}
@media(max-width:640px){.wc-grid .card{padding:0.875rem}}

.wc-modes{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:0.75rem}
.wc-texthead{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;margin-bottom:0.375rem}
.wc-label{font-weight:650;color:var(--ink)}
.wc-count{font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
#text{resize:vertical;min-height:7.5rem;line-height:1.5;font-size:1rem;width:100%}
.wc-note{font-size:0.8125rem;color:var(--muted);margin:0.5rem 0.125rem 0;line-height:1.5}
.wc-warn{color:var(--warn)}
.wc-note code,.explainer code{font-family:var(--mono);font-size:0.875em}
.wc-linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.wc-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.625rem}

.wc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;margin-top:0.875rem}
.wc-opt{display:flex;flex-direction:column;gap:0.25rem;font-size:0.8125rem;font-weight:600;color:var(--muted);min-width:0}
.wc-opt-wide{grid-column:1 / -1}
.wc-opt input[type="number"],.wc-opt input[type="text"],.wc-opt select{width:100%}
.wc-rangehead{display:flex;justify-content:space-between;align-items:baseline}
.wc-opt input[type="range"]{width:100%;accent-color:var(--accent)}
.wc-checks{display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;margin-top:0.75rem}
.wc-check{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.875rem;color:var(--ink-2);cursor:pointer;font-weight:500}
.wc-check input{width:1.0625rem;height:1.0625rem;accent-color:var(--accent)}

.wc-stage{border:1px solid var(--line-2);border-radius:0.5rem;overflow:hidden;box-shadow:var(--shadow);
  background-color:var(--surface-2);background-image:linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%),linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.wc-stage canvas{display:block;width:100%;height:auto}
.wc-cloudcard[data-busy="1"] .wc-stage{opacity:.75}
.wc-seedrow,.wc-dl{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-top:0.75rem}
.wc-inline{font-size:0.875rem;font-weight:600;color:var(--muted)}
.wc-seedrow input{width:7.5rem;flex:0 0 auto}
.wc-dl select{width:auto;flex:0 0 auto}
.wc-dl .btn:disabled{opacity:.5;cursor:default}

.wc-shapes{display:flex;flex-wrap:wrap;gap:0.375rem}
.wc-picrow{margin-top:0.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1rem}
.wc-file{position:relative;display:inline-flex;align-items:center;overflow:hidden}
.wc-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.wc-file:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.wc-bgrow{display:flex;align-items:center;gap:0.625rem;min-height:2.5rem}
.wc-bgrow input[type="color"]{width:3rem;height:2.25rem;padding:0.125rem;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface)}

.wc-tablehead{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem}
.wc-tablebtns{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.625rem 0}
.wc-tablebtns .chip:disabled{opacity:.45;cursor:default}
.wc-tablewrap{max-height:26rem;overflow:auto;border:1px solid var(--line);border-radius:0.5rem}
.wc-table{width:100%;border-collapse:collapse;font-size:0.875rem}
.wc-table th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-size:0.75rem;font-weight:650;text-align:left;padding:0.375rem 0.5rem;z-index:1}
.wc-table td{padding:0.25rem 0.5rem;border-top:1px solid var(--line);vertical-align:middle}
.wc-table td:first-child,.wc-table th:first-child{width:2rem;text-align:center}
.wc-table td.n{font-family:var(--mono);color:var(--muted);width:3.5rem}
.wc-table input[type="text"]{width:100%;min-width:6rem;padding:0.3125rem 0.5rem;font-size:0.875rem}
.wc-table input[type="number"]{width:4.75rem;padding:0.3125rem 0.375rem;font-size:0.875rem}
.wc-table input[type="checkbox"]{width:1rem;height:1rem;accent-color:var(--accent)}
.wc-table tr.edited input[type="text"]{border-color:var(--accent)}
.wc-table tr.out td{opacity:.5}
.wc-x{border:0;background:none;color:var(--muted);font-size:1.125rem;line-height:1;padding:0.25rem 0.375rem;cursor:pointer;border-radius:0.25rem}
.wc-x:hover{color:var(--bad)}
.chip:focus-visible,.wc-x:focus-visible,.wc-linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.explainer .wc-steps,.explainer .wc-cannot{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .wc-steps li,.explainer .wc-cannot li{margin:0 0 0.5rem}
.explainer .wc-steps b,.explainer .wc-cannot b{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.wc-cloudcard[data-busy="1"] .wc-stage{opacity:1}}