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

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

.ct-inhead{display:flex;align-items:center;justify-content:space-between;gap:0.75rem}
.ct-inhead .ct-k{margin:0}
.ct-inhead select{width:auto;max-width:60%;padding-top:0.4375rem;padding-bottom:0.4375rem}
.ct-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)}
.ct-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.ct-help[hidden]{display:none}
.ct-cut{color:var(--ink);padding:0.5rem 0.625rem;border-left:0.25rem solid var(--warn);background:var(--surface-2);border-radius:0.375rem}
.ct-code{width:100%;min-height:9rem;font-family:var(--mono);font-size:0.8125rem;line-height:1.5;resize:vertical;tab-size:4;white-space:pre;overflow:auto}
@media(max-width:520px){.ct-code{min-height:7.5rem}}
@media(min-width:960px){.ct-code{min-height:16rem}}
.ct-meta{display:flex;align-items:center;justify-content:space-between;gap:0.75rem}
.ct-row{display:flex;flex-wrap:wrap;gap:0.5rem}

/* picture: natural size when it fits, scaled down to the card when it does not */
.ct-preview{display:flex;justify-content:center;align-items:flex-start;padding:0.75rem;border:1px solid var(--line);border-radius:0.625rem;line-height:0;overflow:hidden;
  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}
.ct-preview svg{display:block;width:var(--w,100%);max-width:100%;height:auto}
@media(max-width:520px){.ct-preview{padding:0.375rem}}
.ct-export{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.ct-scale{display:flex;align-items:center;gap:0.375rem;font-size:0.8125rem;color:var(--muted)}
.ct-scale select{width:auto;padding-top:0.5rem;padding-bottom:0.5rem}
.ct-sharerow{display:flex;gap:0.5rem}
.ct-sharerow input{flex:1;min-width:0;font-family:var(--mono);font-size:0.8125rem}
.ct-sharerow input[hidden],.ct-sharerow .btn[hidden]{display:none}

/* settings */
.ct-settings>.ct-k{margin:0}
.ct-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap:0.875rem 0.75rem;align-items:end}
.ct-set .field[hidden]{display:none}
.ct-set .field .head{margin-bottom:0.375rem;display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem}
.ct-set .v{font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.ct-set select,.ct-set input[type="text"],.ct-set input[type="number"],.ct-set input[type="range"]{width:100%}
.ct-set input[type="range"]{accent-color:var(--accent);min-height:2.5rem;margin:0}
.ct-set input[type="color"]{width:100%;height:2.5rem;padding:0.125rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);cursor:pointer}
.ct-set input:disabled{opacity:0.5}
.ct-check{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;color:var(--ink);cursor:pointer;min-height:2.5rem}
.ct-check input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}
.ct-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)}

.ct-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)}
.ct-notice[hidden]{display:none}
.ct-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}
.ct-sharedbar{display:grid;gap:0.625rem}
.ct-sharedbar p{margin:0}
.ct-credits{font-size:0.8125rem;color:var(--muted)}