/* /cylinder-transposition-calculator/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.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}

.cy-head .sub{margin-bottom:0.75rem}
@media(max-width:519px){.cy-head h1{margin-bottom:0.125rem}.cy-head .sub{font-size:0.9375rem;line-height:1.4;margin-bottom:0.5rem}}

/* phone: the prescription, then the result. Desktop: side by side. */
.cy-tool{display:grid;gap:0.75rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:920px){.cy-tool{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.25rem;align-items:start}}
.cy-card{padding:0.75rem;min-width:0}
@media(min-width:520px){.cy-card{padding:1.125rem}}

.cy-k{display:block;font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:0.25rem}
.cy-mode{margin:0 0 0.625rem;flex-wrap:nowrap}
.cy-mode button{padding:0.5rem 0.375rem;min-width:0;font-size:0.875rem}
#rx{display:block;width:100%;box-sizing:border-box;min-height:4.25rem;padding:0.5rem 0.625rem;font-family:var(--mono);font-size:1.0625rem;line-height:1.5;resize:vertical;font-variant-numeric:tabular-nums}
.cy-ex{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.5rem 0 0}
.cy-ex .chip{font-size:0.8125rem}

.cy-grid{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:0.375rem 0.25rem;align-items:center}
.cy-grid .cy-k{margin:0}
.cy-grid input{width:100%;box-sizing:border-box;min-width:0;min-height:2.5rem;padding:0.375rem 0.25rem;font-family:var(--mono);font-size:0.9375rem;text-align:center;font-variant-numeric:tabular-nums}
@media(min-width:520px){.cy-grid{gap:0.375rem}.cy-grid input{font-size:1rem;padding:0.375rem 0.4375rem}}
.cy-rowk{white-space:nowrap;padding-right:0.125rem;font-size:0.625rem}

.cy-msg{margin:0.625rem 0 0;color:var(--bad);font-weight:600;font-size:0.9375rem;line-height:1.5;overflow-wrap:anywhere}
.cy-msg[hidden],#boxPane[hidden],#linePane[hidden]{display:none}
textarea[aria-invalid=true]{border-color:var(--bad)}
.cy-hint{color:var(--muted);font-size:0.8125rem;line-height:1.5;margin:0.5rem 0 0}
.cy-what{border-top:1px solid var(--line);padding-top:0.5rem;margin-top:0.625rem}

/* result */
.cy-out{display:grid;gap:0.75rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.cy-out{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}}
.cy-eye{border-left:0.25rem solid var(--signal);padding:0.125rem 0 0.125rem 0.75rem;min-width:0}
.cy-eye.cy-bad{border-left-color:var(--bad)}
.cy-eyeh{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.25rem}
.cy-forms{margin:0}
.cy-forms dt{font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:0.25rem}
.cy-forms dd{margin:0}
.cy-from,.cy-typed{font-family:var(--mono);font-size:1rem;color:var(--ink-2);margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.cy-big{font-family:var(--mono);font-size:1.375rem;line-height:1.35;font-weight:650;color:var(--ink);margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.cy-steps{margin:0.5rem 0 0;padding-left:1.375rem;font-size:0.9375rem;line-height:1.5;color:var(--ink-2);max-width:75ch}
.cy-steps li{margin:0 0 0.25rem;font-variant-numeric:tabular-nums}
.cy-nothing{margin:0.25rem 0 0;font-size:0.9375rem;line-height:1.5;color:var(--ink-2)}
.cy-err{margin:0.25rem 0 0;color:var(--bad);font-weight:600;font-size:0.9375rem;line-height:1.5}
.cy-carry,.cy-note,.cy-flag{margin:0.375rem 0 0;font-size:0.875rem;line-height:1.45;padding:0.25rem 0.5rem;border-radius:0.375rem}
.cy-carry{background:var(--surface-2);color:var(--ink-2)}
.cy-note{background:var(--accent-soft);color:var(--ink)}
.cy-flag{border:1px solid var(--warn);color:var(--ink)}
.cy-actions{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-top:0.75rem}
.cy-actions .cy-hint{margin:0}
.cy-actions .btn{height:auto;min-height:2.5rem;padding:0.5rem 1rem;font-size:0.9375rem}

.explainer .cy-cannot,.explainer .cy-src{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .cy-cannot li,.explainer .cy-src li{margin:0 0 0.5rem}
.explainer code{font-family:var(--mono);font-size:0.875em;white-space:nowrap}

.modes button:focus-visible,.btn:focus-visible,.chip:focus-visible,#rx:focus-visible,.cy-grid input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}