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

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

/* phone: the numbers, the working, then the worksheet. Desktop: numbers and worksheet left, working right. */
.lm-tool{display:grid;gap:0.75rem;grid-template-areas:"in" "out" "ws";grid-template-columns:minmax(0,1fr)}
.lm-in{grid-area:in}.lm-out{grid-area:out}.lm-ws{grid-area:ws}
@media(min-width:920px){
  .lm-tool{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"in out" "ws out";gap:1.25rem;align-items:start}
  .lm-out{grid-row:1 / span 2}
}
.lm-card{padding:0.75rem;min-width:0}
@media(min-width:520px){.lm-card{padding:1.125rem}}

.lm-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}
.lm-eq{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:0.375rem}
.lm-f{display:block;min-width:0}
.lm-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}
.lm-f textarea{font-family:var(--mono);font-size:0.9375rem;line-height:1.5;resize:vertical}
.lm-wst{margin-top:0.5rem}
.lm-wst input{font-family:inherit;font-size:0.9375rem;min-height:2.5rem}
.lm-times{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--muted);padding-bottom:0.375rem}
.lm-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem 0.75rem;margin-top:0.625rem}
.lm-view{margin:0;flex-wrap:nowrap}
.lm-view button{padding:0.5rem 0.625rem;white-space:nowrap}
.lm-carry{font-size:0.875rem}
.lm-msg{margin:0.625rem 0 0;color:var(--bad);font-weight:600;font-size:0.9375rem;line-height:1.5;overflow-wrap:anywhere}
.lm-msg[hidden]{display:none}
input[aria-invalid=true]{border-color:var(--bad)}
.lm-hint{color:var(--muted);font-size:0.8125rem;line-height:1.5;margin:0.5rem 0 0;overflow-wrap:anywhere}
.lm-hint:empty{display:none}
.lm-check a{color:var(--accent);font-weight:600}

/* answer */
.lm-result{border-left:0.25rem solid var(--signal);padding:0.125rem 0 0.125rem 0.75rem;margin-bottom:0.625rem}
.lm-result:empty{display:none}
.lm-answer{margin:0;font-family:var(--mono);font-size:1.0625rem;line-height:1.4;overflow-wrap:anywhere;color:var(--ink-2)}
.lm-ans{font-size:1.375rem;color:var(--ink);font-weight:650}
.lm-line{margin:0.125rem 0 0;font-size:0.875rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}

/* the column layout */
.lm-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%}
.lm-drawing{font-family:var(--mono);font-size:1.375rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;width:max-content}
.lm-drawing[hidden],.lm-lattice[hidden]{display:none}
.lm-grid{border-collapse:separate;border-spacing:0;margin:0}
.lm-grid td{padding:0.1875rem 0;min-width:0.8em;height:1.45em;text-align:center;vertical-align:middle;white-space:nowrap;position:relative}
.lm-grid td.sg{min-width:1.1em;color:var(--muted);text-align:left}
.lm-grid td.u{border-bottom:2px solid var(--ink-2)}
.lm-grid td.z{color:var(--muted)}
.lm-grid td.lab{font-size:0.5em;color:var(--muted);text-align:left;padding-left:0.625rem;min-width:2.5em}
.lm-grid .pt{position:absolute;right:-0.2em;bottom:0.15em;font-weight:700;color:var(--accent)}
.lm-grid tr.cr td,.lm-grid tr.ac td{height:1em;padding:0}
.lm-grid tr.cr td.dg,.lm-grid tr.ac td.dg{font-size:0.6em;font-weight:600;vertical-align:bottom}
.lm-grid tr.cr0 td.dg{color:var(--warn)}
.lm-grid tr.cr1 td.dg{color:var(--s1)}
.lm-grid tr.cr2 td.dg{color:var(--accent)}
.lm-grid tr.ac td.dg{color:var(--warn)}
.lm-grid tr.top td{padding-top:0.25rem}
.lm-grid td.ans{font-weight:650}
.nocarry .lm-grid tr.cr,.nocarry .lm-grid tr.ac,.nocarry .lt-c{display:none}

/* the lattice */
.lm-lattice{min-width:0}
.lm-svg{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums}
.lm-svg text{text-anchor:middle;fill:var(--ink)}
.lm-svg .lc{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
.lm-svg .ld{stroke:var(--muted);stroke-width:1}
.lm-svg .lt-h{font-size:18px;font-weight:650}
.lm-svg .lt-t,.lm-svg .lt-u{font-size:15px;fill:var(--ink-2)}
.lm-svg .lt-r{font-size:18px;font-weight:650;fill:var(--accent)}
.lm-svg .lt-0{fill:var(--muted);font-weight:400}
.lm-svg .lt-c{font-size:11px;font-weight:600;fill:var(--warn)}
.lm-read{margin:0.5rem 0 0;font-size:0.875rem;line-height:1.45;color:var(--ink-2);max-width:60ch;overflow-wrap:anywhere}

.lm-actions{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-top:0.625rem}
.btn.lm-small{height:auto;min-height:2.5rem;padding:0.5rem 0.875rem;font-size:0.875rem}
.btn:disabled{opacity:.45;cursor:default;filter:none}

/* steps and worksheet */
.lm-words,.lm-sheetwrap{margin-top:1rem}
.lm-sheetwrap[hidden]{display:none}
.lm-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.5rem}
.lm-count{text-transform:none;letter-spacing:0;font-weight:400}
.lm-list{margin:0;padding-left:1.5rem;max-width:75ch;font-size:0.9375rem;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.lm-list li{margin:0 0 0.375rem}
.ws-title{font-size:1.125rem;margin:0 0 0.25rem}
.ws-name{font-family:var(--mono);font-size:0.8125rem;color:var(--muted);margin:0 0 0.75rem;white-space:pre-wrap}
.ws-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:0.75rem;counter-reset:q}
.ws-q{counter-increment:q;border:1px solid var(--line);border-radius:0.5rem;padding:0.5rem 0.75rem;min-width:0;break-inside:avoid}
.ws-q::before{content:counter(q) ".";font-size:0.8125rem;color:var(--muted)}
.ws-stack{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--mono);font-size:1.125rem;font-variant-numeric:tabular-nums}
.ws-n{overflow-wrap:anywhere;text-align:right;max-width:100%}
.ws-u{border-bottom:2px solid var(--ink-2);padding-left:0.75rem}
.ws-room{height:5.5rem}
.ws-answers{margin-top:1.25rem;padding-top:0.75rem;border-top:1px dashed var(--line-2);break-before:page}
.ws-alist{margin:0;padding-left:1.5rem;font-size:0.9375rem;line-height:1.5}
.ws-a{margin:0 0 0.375rem;overflow-wrap:anywhere}
.ws-a b{font-family:var(--mono);font-weight:600}
.ws-work{display:block;color:var(--muted);font-size:0.8125rem}

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

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

/* print: the working and its steps; with "Print worksheet", only the sheet and its answer page */
@media print{
  header.brand,.skip-link,.lm-in,.lm-ws,.lm-actions,.lm-check,.explainer-row,footer.site,.tool-head .sub,.nojs,.lm-sheetwrap{display:none!important}
  body,.wrap{background:#fff!important;color:#000!important}
  .lm-tool{display:block}
  .card{box-shadow:none!important;border:0!important;background:#fff!important}
  .lm-scroll{overflow:visible;border:0;background:#fff;padding:0}
  .lm-drawing{color:#000;font-size:18pt}
  .lm-grid td.u{border-bottom-color:#000}
  .lm-list{color:#000;font-size:11pt;max-width:none}
  body.ws-print .tool-head,body.ws-print .lm-tool,body.ws-print .lm-words{display:none!important}
  body.ws-print .lm-sheetwrap{display:block!important;margin:0;padding:0}
  body.ws-print #sheetH{display:none}
  .ws-q{border-color:#000}
  .ws-u{border-bottom-color:#000}
  .ws-room{height:7rem}
  .ws-answers{border-top:0;margin-top:0}
}
