/* Worksheet pages: US Letter, printed at 100%. On screen the pages sit on a gray
   canvas (the Semrush report builder / PandaDoc pattern from Mobbin). */
@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/andika-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/andika-bold-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Playwrite US Trad";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playwrite-us-trad.woff2) format("woff2");
}

.ws-page {
  width: 8.5in;
  height: 11in;
  padding: 0.5in 0.55in 0.45in;
  background: #fff;
  color: #15171a;
  font: 17px/1.35 "Andika", "Segoe UI", Arial, sans-serif;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.ws-inner { flex: 1; min-height: 0; overflow: hidden; }
.ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; border-bottom: 2px solid #15171a; padding-bottom: 8px; margin-bottom: 10px; }
.ws-title { font-size: 23px; font-weight: 700; line-height: 1.15; }
.ws-name { display: flex; align-items: flex-end; gap: 6px; font-size: 14px; white-space: nowrap; }
.ws-name i { display: inline-block; width: 1.9in; border-bottom: 1px solid #15171a; height: 1em; }
.ws-name i.short { width: 0.95in; }
.ws-keylabel { font-size: 14px; font-weight: 700; color: #b42318; text-transform: uppercase; letter-spacing: 0.06em; }
.ws-instr { margin: 0 0 14px; font-size: 15px; }
.ws-cont { font-size: 14px; color: #555; margin-bottom: 10px; }
.ws-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: #8a8f98; border-top: 1px solid #e3e5e8; padding-top: 5px; margin-top: 6px; font-family: Arial, sans-serif; }

.ws-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 22px; }
.ws-grid.cols-1 { grid-template-columns: 1fr; }
.ws-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ws-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ws-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ws-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.ws-item { display: flex; align-items: center; gap: 6px; min-height: 0.52in; padding: 4px 0; break-inside: avoid; }
.ws-num { font-size: 13px; color: #6b717b; min-width: 1.6em; font-weight: 700; }
.ws-q { white-space: nowrap; }
.cols-1 .ws-q, .cols-2 .ws-q { white-space: normal; }
.ws-ans { flex: 1; min-width: 0.45in; border-bottom: 1px solid #9aa0a8; height: 1.1em; margin-left: 4px; }
.cols-1 .ws-ans { max-width: 2.6in; }

/* stacked arithmetic */
.style-vertical { row-gap: 0.14in; }
.ws-item.v { align-items: flex-start; min-height: 1.15in; }
.ws-vert { font-size: 21px; text-align: right; min-width: 4.2ch; margin-left: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ws-vert .b { position: relative; }
.ws-vert .op { position: absolute; left: -1.2ch; }
.ws-vert .line { border-bottom: 2px solid #15171a; margin-top: 2px; }

/* figures */
.style-figure { row-gap: 0.16in; }
.ws-item.f { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 2.5in; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px 10px; gap: 6px; }
.ws-item.f .ws-num { align-self: flex-start; }
.ws-fig { display: flex; justify-content: center; align-items: center; min-height: 1.3in; }
.ws-fig .ws-svg { max-width: 100%; height: auto; max-height: 1.9in; }
.ws-fig .ws-svg.grid { max-height: 2in; }
.ws-item.f .ws-q { white-space: normal; font-size: 15px; }
.ws-item.f .ws-ans { flex: none; width: 70%; margin: 4px 0 0; }

/* tracing rows */
.style-rows { row-gap: 0.12in; }
.ws-item.r { display: block; min-height: 0; padding: 0; }
.ws-item.r .ws-svg { width: 100%; height: auto; display: block; }
.ws-item.k { display: block; }

/* math typography */
.fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: 0.86em; line-height: 1.12; margin: 0 0.08em; }
.fr > span:first-child { border-bottom: 1.4px solid currentColor; padding: 0 0.15em; }
.ws-blank { display: inline-block; border-bottom: 1px solid #555; height: 1em; vertical-align: baseline; }
.ws-circle { display: inline-block; width: 1.25em; height: 1.25em; border: 1.5px solid #333; border-radius: 50%; vertical-align: middle; margin: 0 0.35em; }
.ws-choices { color: #555; font-size: 0.9em; }
.ldiv { display: inline-flex; align-items: stretch; font-size: 20px; margin: 10px 0 0.9in 6px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.ldiv .dv { padding: 4px 4px 0 0; }
.ldiv .dd { border-top: 2px solid #15171a; border-left: 2px solid #15171a; border-top-left-radius: 10px; padding: 4px 8px 0 8px; }
.ws-table { border-collapse: collapse; font-size: 15px; }
.ws-table th, .ws-table td { border: 1px solid #555; padding: 3px 9px; text-align: center; }
.ws-table th { background: #f1f3f6; }
.ws-biggrid { display: flex; justify-content: center; margin: 2px 0 12px; }
.ws-biggrid .ws-svg { width: 5.4in; height: auto; }
.ws-scr { letter-spacing: 0.22em; font-size: 19px; }
.ws-lines3 { display: flex; gap: 0.25in; flex: 1; margin-left: 0.3in; }
.ws-lines3 i { flex: 1; border-bottom: 1px solid #9aa0a8; height: 1.3em; }
.ws-bank { border: 1.5px dashed #9aa0a8; border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 18px; }
.ws-bank span { color: #aaa; }
.ws-defs { margin: 16px 0 0; padding: 12px 16px; border: 1px solid #d5d8dd; border-radius: 6px; list-style: none; columns: 2; column-gap: 0.4in; font-size: 15px; }
.ws-defs li { margin: 0 0 6px; break-inside: avoid; }

/* answer key */
.ws-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 22px; font-size: 14px; }
.ws-key.cols-1 { grid-template-columns: 1fr; }
.ws-key.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ws-key.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ws-key.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ws-key.cols-5 { grid-template-columns: repeat(5, 1fr); }
.ws-kitem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; break-inside: avoid; border-bottom: 1px dotted #e1e3e6; padding: 3px 0; }
.ws-kitem .kq { color: #5b616b; }
.ws-kitem .ka { color: #b42318; font-weight: 700; }

/* screen: pages on a canvas, scaled by app.js to the column width */
.ws-print-area { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ws-print-area .ws-page { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(15, 23, 42, 0.12); transform-origin: top left; }
.ws-print-area.no-key .ws-keypage { display: none; }

/* print: app.js copies the current pages into #print-root, a direct child of
   body, so nothing else on the page takes space or adds blank pages */
#print-root { display: none; }
@media print {
  @page { size: letter; margin: 0; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  #print-root .ws-page { box-shadow: none !important; transform: none !important; margin: 0 !important; break-after: page; page-break-after: always; }
  #print-root .ws-page:last-child { break-after: auto; page-break-after: auto; }
}

/* screenshot mode (?shot=1): only the sheets, at 100% */
.shot .site-head, .shot .site-foot, .shot .crumbs, .shot .tool-head, .shot .tool-bar, .shot .tool-opts, .shot .tool-text, .shot .related, .shot .skip { display: none !important; }
.shot body { background: #fff; }
.shot .tool { border: 0; margin: 0; }
.shot .tool-body { display: block; }
.shot .tool-stage { padding: 0; background: #fff; }
.shot .ws-scaler { max-width: none; overflow: visible; }
.shot .ws-print-area .ws-page { box-shadow: none; }
.shot .wrap { max-width: none; padding: 0; }
.shot .tool-page { padding: 0; }

/* fill the page: rows share the free height (working space under each problem) */
.ws-inner { display: flex; flex-direction: column; }
.ws-inner > .ws-grid.fill { flex: 1 1 auto; min-height: 0; align-items: start; }
.ws-inner > .ws-grid.fill.style-figure { align-items: stretch; }
.ws-item.f { min-height: 0; }
.ws-q .ws-lines3 { display: inline-flex; width: 5.4in; vertical-align: bottom; }
.ws-svg.inline-pattern { width: 330px; height: auto; vertical-align: middle; }