/* /long-division-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}

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

/* phone: the division, then the answer and drawing, then the layout options. Desktop: inputs and options left. */
.ld-tool{display:grid;gap:0.75rem;grid-template-areas:"in" "out" "opt";grid-template-columns:minmax(0,1fr)}
.ld-in{grid-area:in}.ld-out{grid-area:out}.ld-opt{grid-area:opt}
@media(min-width:920px){
  .ld-tool{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"in out" "opt out";gap:1.25rem;align-items:start}
  .ld-out{grid-row:1 / span 2}
}
.ld-card{padding:0.75rem;min-width:0}
@media(min-width:520px){.ld-card{padding:1.125rem}}
.ld-kind{margin-bottom:0.625rem}
.ld-kind button{padding:0.375rem 0.5rem}

.ld-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}
.ld-eq{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:0.375rem}
.ld-f{display:block;min-width:0}
.ld-f input{width:100%;min-height:2.75rem;padding:0.4375rem 0.625rem;font-family:var(--mono);font-size:1.125rem;font-variant-numeric:tabular-nums}
.ld-wide{margin-bottom:0.5rem}
.ld-div{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--muted);padding-bottom:0.375rem}
.ld-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0.5rem;align-items:end;margin-top:0.5rem}
.ld-mode{margin:0;flex-wrap:nowrap}
.ld-mode button{padding:0.5rem 0.25rem;min-width:0;white-space:nowrap}
.ld-places{display:block;min-width:0}
.ld-places select{width:100%;min-height:2.5rem}
.ld-places select:disabled{opacity:.55}
.ld-msg{margin:0.625rem 0 0;color:var(--bad);font-weight:600;font-size:0.9375rem;line-height:1.5;overflow-wrap:anywhere}
.ld-msg[hidden]{display:none}
input[aria-invalid=true]{border-color:var(--bad)}
.ld-hint{color:var(--muted);font-size:0.8125rem;line-height:1.5;margin:0.5rem 0 0}

/* answer */
.ld-result{border-left:0.25rem solid var(--signal);padding:0.125rem 0 0.125rem 0.75rem;margin-bottom:0.625rem;min-height:1.5rem}
.ld-result.hid{display:none}
.ld-result:empty{display:none}
.ld-answer{margin:0;font-family:var(--mono);font-size:1.0625rem;line-height:1.4;overflow-wrap:anywhere;color:var(--ink-2)}
.ld-ans{font-size:1.375rem;color:var(--ink);font-weight:650}
.ld-line,.ld-noteline{margin:0.125rem 0 0;font-size:0.875rem;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ld-lk{font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:0.25rem}
.ld-noteline{color:var(--muted)}
.ld-ov{text-decoration:overline;text-decoration-thickness:2px}

/* the drawing */
.ld-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--surface-2);border:1px solid var(--line);border-radius:0.5rem;padding:0.625rem 0.75rem;max-width:100%}
.ld-drawing{font-family:var(--mono);font-size:1.25rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;width:max-content}
.ld-grid{border-collapse:separate;border-spacing:0;margin:0}
.ld-grid td{padding:0.1875rem 0;min-width:0.72em;height:1.5em;text-align:center;vertical-align:middle;white-space:nowrap;border:0 solid transparent;position:relative}
.ld-grid td.pc{min-width:0.34em}
.ld-grid td.u{border-bottom:2px solid var(--ink-2)}
.ld-grid td.o{border-bottom:2px solid var(--ink)}
.ld-grid td.bar{border-left:2px solid var(--ink);min-width:0.5em}
.ld-grid td.brk{font-size:1.3em;font-weight:300;line-height:0.8}
.ld-grid td.q{font-weight:650;color:var(--accent)}
.ld-grid td.rep{text-decoration:overline;text-decoration-thickness:2px}
.ld-grid td.bd{color:var(--ink-2);font-style:italic}
.ld-grid td.rm{color:var(--accent);font-weight:650}
.ld-grid td.pt{padding:0.25rem 0.375rem;text-align:left;font-size:0.9em}
.ld-grid td.pt.q{text-align:left}
.ld-grid .carry{font-size:0.55em;color:var(--warn);vertical-align:0.6em;margin-right:0.05em;font-weight:600}
.ld-grid .hid{visibility:hidden}
.ld-grid td.now{background:var(--accent-soft)}
.ld-drawing.kids{font-size:1.875rem}
.ld-drawing.kids .ld-grid td{min-width:0.8em}
.ld-drawing.kids td.k0{color:var(--s1)}
.ld-drawing.kids td.k1{color:var(--accent)}
.ld-drawing.kids td.k2{color:var(--warn)}
.ld-drawing.kids td.q{font-weight:750}
.ld-drawing.kids td.u{border-bottom-width:3px}

.ld-steps-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-top:0.625rem}
.btn.ld-small{height:auto;min-height:2.5rem;padding:0.5rem 0.875rem;font-size:0.875rem}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.ld-stepno{font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.ld-say{margin:0.5rem 0 0;font-size:0.9375rem;line-height:1.5;color:var(--ink);min-height:1.5em}
.ld-actions{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-top:0.625rem}
.ld-actions .ld-hint{margin:0}

/* layout + options */
.ld-layouts{display:grid;gap:0.375rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.ld-lay{display:flex;flex-direction:column;align-items:flex-start;gap:0.125rem;text-align:left;min-width:0;padding:0.5rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.ld-lay b{font-size:0.875rem}
.ld-lay span{font-size:0.75rem;color:var(--muted);line-height:1.3}
.ld-lay.on{border-color:var(--accent);background:var(--accent-soft)}
.ld-lay.on b{color:var(--accent)}
.ld-polymode .ld-layouts{opacity:.55}
.ld-oprow{display:flex;align-items:center;gap:0.625rem;margin-top:0.5rem}
.ld-oprow[hidden]{display:none}
.ld-oprow .ld-k{margin:0}
.ld-oprow .chips{margin:0}
.ld-checks{display:grid;gap:0.375rem;margin-top:0.625rem}
.ld-checks label.check{font-size:0.875rem;line-height:1.4}
.ld-note{margin:0.625rem 0 0;font-size:0.8125rem;line-height:1.5;color:var(--ink-2)}
.ld-note q{font-style:italic;color:var(--muted)}
.ld-link{border:0;background:none;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* steps in words */
.ld-words{margin-top:1rem}
.ld-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.5rem}
.ld-list{margin:0;padding-left:1.5rem;max-width:75ch;font-size:0.9375rem;line-height:1.55;color:var(--ink-2)}
.ld-list li{margin:0 0 0.375rem;padding:0.125rem 0.25rem;border-radius:0.25rem}
.ld-list li.now{background:var(--accent-soft);color:var(--ink)}
.ld-offscreen{position:fixed;left:-9999px;top:0}

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

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

/* print: the worked example and its steps, nothing else */
@media print{
  header.brand,.skip-link,.ld-in,.ld-opt,.ld-steps-bar,.ld-actions,.ld-say,.explainer-row,footer.site,.tool-head .sub,.nojs{display:none!important}
  body,.wrap{background:#fff!important;color:#000!important}
  .ld-tool{display:block}
  .card{box-shadow:none!important;border:0!important;background:#fff!important}
  .ld-scroll{overflow:visible;border:0;background:#fff;padding:0}
  .ld-drawing{font-size:16pt;color:#000}
  .ld-grid .hid{visibility:visible!important}
  .ld-result.hid{display:block!important}
  .ld-grid td.now,.ld-list li.now{background:none!important}
  .ld-grid td.q,.ld-grid td.rm{color:#000}
  .ld-grid td.u,.ld-grid td.o{border-bottom-color:#000}
  .ld-grid td.bar{border-left-color:#000}
  .ld-result{border-left-color:#000}
  .ld-list{color:#000;font-size:11pt;max-width:none}
  .ld-words{break-inside:auto}
}