/* /number-line-generator/ 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}

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

.nl-card{padding:0.75rem;min-width:0}
@media(min-width:520px){.nl-card{padding:1.125rem}}

/* the drawing: full width on every screen, because a number line wants width */
.nl-draw{min-height:5rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.5rem;overflow:hidden}
.nl-draw:empty{display:none}
.nl-draw svg{display:block;width:100%;height:auto}
.nl-svg .nl-ax,.nl-svg .nl-tick,.nl-svg .nl-bar{stroke:var(--ink)}
.nl-svg .nl-arr,.nl-svg .nl-lab{fill:var(--ink)}
.nl-svg .nl-lab text{font-variant-numeric:tabular-nums}
.nl-svg .nl-shade{stroke:var(--accent);opacity:.85}
.nl-svg .nl-ray{fill:var(--accent)}
.nl-svg .nl-closed{fill:var(--accent);stroke:var(--accent)}
.nl-svg .nl-open{fill:var(--surface-2);stroke:var(--accent)}
.nl-svg .nl-jp{stroke:var(--warn)}
.nl-svg .nl-jh,.nl-svg .nl-jstart,.nl-svg .nl-jend{fill:var(--warn)}
.nl-svg .nl-jl{fill:var(--ink)}
.nl-svg .nl-dot{fill:var(--bad);stroke:var(--surface-2)}
.nl-svg .nl-ptl{fill:var(--bad)}

.nl-msg{margin:0;padding:0.75rem 0.875rem;border:1px solid var(--bad);border-left-width:0.25rem;border-radius:0.5rem;color:var(--bad);font-weight:600;font-size:0.9375rem;line-height:1.5;overflow-wrap:anywhere}
.nl-msg[hidden]{display:none}
input[aria-invalid=true]{border-color:var(--bad)}
.nl-facts{display:flex;flex-wrap:wrap;gap:0.25rem 1.5rem;margin-top:0.625rem}
.nl-facts:empty{display:none}
.nl-fact{margin:0;font-size:1rem;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.nl-fact .nl-v{font-family:var(--mono);font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.nl-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}
.nl-k.nl-inline{display:inline;margin:0 0.5rem 0 0}
.nl-hint{color:var(--muted);font-size:0.8125rem;line-height:1.5;margin:0.5rem 0 0}
.nl-hint:empty{display:none}
.nl-hint.is-bad{color:var(--bad)}
.nl-actions{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-top:0.75rem}
.nl-actions .nl-hint{margin:0}
.nl-actions .chip{padding:0.4375rem 0.6875rem}
.nl-clear{margin-left:auto}
.btn.nl-small{height:auto;min-height:2.5rem;padding:0.5rem 0.875rem;font-size:0.875rem}

/* controls: stacked on a phone, three columns on a desktop */
.nl-controls{display:grid;gap:0.75rem;margin-top:0.75rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.nl-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.nl-controls{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:1rem;margin-top:1rem}}
.nl-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.625rem}
.nl-f{display:block;min-width:0}
.nl-gap{margin-top:0.75rem}
.nl-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem}
.nl-trio input,.nl-sheetform input{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nl-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem;margin-top:0.25rem}
.nl-checks{display:grid;gap:0.375rem;margin-top:0.625rem}
.nl-ex{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.5rem 0 0.625rem}
.nl-ex .chip{font-size:0.8125rem;padding:0.375rem 0.625rem}
.nl-sym{font-family:var(--mono);min-width:2.5rem}
#points,#jumps,#ineq{font-family:var(--mono)}
.nl-rules{margin-top:0.25rem;font-size:0.875rem;color:var(--ink-2)}
.nl-rules summary{cursor:pointer;font-weight:600;color:var(--ink)}
.nl-rules ul{margin:0.5rem 0 0;padding-left:1.125rem;line-height:1.55}
.nl-rules li{margin:0 0 0.375rem}
.nl-rules code{font-family:var(--mono);font-size:0.8125rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.25rem;padding:0 0.25rem}

.nl-sheetcard{margin-top:0.75rem}
@media(min-width:1100px){.nl-sheetcard{margin-top:1rem}}
.nl-sheetform{display:grid;gap:0.5rem;grid-template-columns:repeat(2,minmax(0,1fr));max-width:40rem}
@media(min-width:520px){.nl-sheetform{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nl-sheetcard .nl-msg{margin-top:0.625rem}
.nl-printarea{display:none}

.explainer .nl-cannot{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .nl-cannot li{margin:0 0 0.5rem}

.chip:focus-visible,.btn:focus-visible,.nl-rules summary:focus-visible,.nl-card input:focus-visible,.nl-card select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* print: only #printArea (one line with its facts, or the 6-line sheet), black on white */
@media print{
  body.nl-p1 .wrap,body.nl-ps .wrap,body.nl-p1 .skip-link,body.nl-ps .skip-link{display:none!important}
  body.nl-p1 .nl-printarea,body.nl-ps .nl-printarea{display:block!important}
  body{background:#fff!important;color:#000!important}
  .nl-printarea svg{display:block;width:100%;height:auto}
  .nl-printarea .nl-fact{color:#000;font-size:12pt;margin:0.5rem 0 0}
  .nl-printarea .nl-fact .nl-v{color:#000}
  .nl-printarea .nl-k{color:#000}
  .nl-pone{margin-top:2cm}
  .nl-sheethead{margin:0 0 0.8cm;font-size:12pt}
  .nl-sheetrow{display:flex;align-items:center;gap:0.3cm;margin:0 0 2.2cm;break-inside:avoid}
  .nl-sheetn{font-size:12pt;font-weight:700}
  .nl-sheetrow svg{flex:1;min-width:0}
}