/* Printable worksheets (/worksheets/): word search, maze, Sudoku.
   On screen: controls on the left, a scaled letter-size sheet on the right.
   In print: only the sheet(s), one per page, at true size. Builds on style.css + site.css + home.css. */

body.ws-page { background: #f3f1ea; }
.ws-main { padding: 2rem 0 3rem; }
.ws-grid { display: grid; grid-template-columns: 330px 1fr; gap: 2rem; align-items: start; }
.ws-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; position: sticky; top: 80px; }
.ws-panel h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.6rem; line-height: 1.2; margin-bottom: 0.4rem; color: var(--ink); }
.ws-panel .ws-intro { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.1rem; }
.ws-panel label, .ws-panel legend { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.3rem; color: var(--ink); }
.ws-field { margin-bottom: 0.95rem; }
.ws-panel input[type="text"], .ws-panel select, .ws-panel textarea { width: 100%; font: inherit; font-size: 0.95rem; padding: 0.5rem 0.6rem; border: 1px solid #d6d2c6; border-radius: 8px; background: #fff; color: var(--ink); }
.ws-panel textarea { min-height: 140px; resize: vertical; line-height: 1.45; }
.ws-panel fieldset { border: 0; padding: 0; margin: 0 0 0.95rem; }
.ws-seg { display: flex; border: 1px solid #d6d2c6; border-radius: 9px; overflow: hidden; }
.ws-seg label { flex: 1; margin: 0; font-weight: 600; font-size: 0.86rem; text-align: center; cursor: pointer; }
.ws-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ws-seg span { display: block; padding: 0.45rem 0.3rem; border-right: 1px solid #d6d2c6; }
.ws-seg label:last-child span { border-right: 0; }
.ws-seg input:checked + span { background: var(--ink); color: #fff; }
.ws-seg input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: -3px; }
.ws-check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400 !important; font-size: 0.92rem !important; cursor: pointer; }
.ws-hint { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.3rem; }
.ws-note { font-size: 0.85rem; border-radius: 8px; padding: 0.5rem 0.7rem; margin-top: 0.5rem; background: #fff7e6; color: #7a4a00; border: 1px solid #f1d8a8; }
.ws-note[hidden] { display: none; }
.ws-actions { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.2rem; }
.ws-actions button { font: inherit; font-weight: 700; font-size: 1rem; padding: 0.75rem; border-radius: 10px; cursor: pointer; border: 1px solid #cfd6e2; background: #fff; color: var(--ink); }
.ws-actions .ws-print { background: var(--primary); color: #fff; border-color: var(--primary); }
.ws-actions .ws-print:hover { background: var(--primary-hover); }
.ws-actions button:hover { border-color: var(--ink-soft); }
.ws-crumbs { font-size: 0.85rem; margin-bottom: 0.7rem; }
.ws-crumbs a { color: var(--ink-soft); }

/* the preview: true-size letter sheets, scaled to the column by JS (--ws-scale) */
.ws-preview { min-width: 0; }
.ws-preview-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 0.5rem; }
.ws-frame { position: relative; margin-bottom: 1.5rem; }
.ws-sheet { width: 8.5in; height: 11in; background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 10px 30px rgba(28,39,66,0.10);
    padding: 0.55in 0.6in 0.5in; display: flex; flex-direction: column; transform-origin: top left; transform: scale(var(--ws-scale, 1)); position: absolute; top: 0; left: 0;
    font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; }
.ws-sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.3in; border-bottom: 2px solid #111; padding-bottom: 0.12in; margin-bottom: 0.18in; }
.ws-sheet-title { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 26pt; line-height: 1.1; }
.ws-sheet-title small { display: block; font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; font-weight: 700; font-size: 10pt; letter-spacing: 0.08em; text-transform: uppercase; color: #c8372d; margin-bottom: 2pt; }
.ws-name { font-size: 11pt; white-space: nowrap; line-height: 2; text-align: right; }
.ws-name span { display: inline-block; border-bottom: 1px solid #111; width: 1.9in; margin-left: 4pt; }
.ws-name span.short { width: 1.1in; }
.ws-instructions { font-size: 11.5pt; margin-bottom: 0.18in; }
.ws-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 0; }
.ws-foot { font-size: 9pt; font-weight: 600; letter-spacing: 0.04em; color: #666; text-align: center; width: 100%; margin-top: auto; padding-top: 0.12in; }
.ws-key-badge { position: absolute; top: 0.22in; right: 0.6in; font-size: 9pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #c8372d; }

/* word search */
.wsw-grid { display: grid; border: 2px solid #111; }
.wsw-cell { display: flex; align-items: center; justify-content: center; font-family: 'Lexend', Arial, sans-serif; font-weight: 600; color: #111; }
.wsw-wrap { position: relative; }
.wsw-wrap svg { position: absolute; inset: 0; pointer-events: none; }
.wsw-words { columns: 3; column-gap: 0.4in; margin-top: 0.22in; font-size: 12pt; width: 100%; }
.wsw-words li { list-style: none; padding: 1pt 0 1pt 16pt; position: relative; break-inside: avoid; }
.wsw-words li::before { content: ""; position: absolute; left: 0; top: 4pt; width: 9pt; height: 9pt; border: 1.3px solid #111; border-radius: 2px; }

/* maze */
.wsm-svg { display: block; }

/* sudoku */
.wss-set { display: grid; gap: 0.35in; justify-content: center; align-content: start; width: 100%; }
.wss-set svg { display: block; }

@media (max-width: 900px) {
    .ws-grid { grid-template-columns: 1fr; }
    .ws-panel { position: static; }
}

/* ---------- print: only the sheets, true size, one per page ---------- */
@page { size: letter; margin: 0; }
/* members: extra options, saving, and the off-screen set used to print versions A to D */
.ws-extra { border-top: 1px solid var(--line) !important; padding-top: 0.9rem !important; margin-top: 0.4rem !important; }
.ws-extra > legend { float: left; width: 100%; margin-bottom: 0.6rem; font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft) !important; }
.ws-extra > legend + * { clear: both; }
.ws-panel textarea.ws-short { min-height: 64px; }
.ws-save { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.ws-save #ws-save { font: inherit; font-weight: 700; font-size: 1rem; padding: 0.7rem; border-radius: 10px; cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.ws-save #ws-save:disabled, .ws-linkish:disabled { opacity: 0.6; cursor: wait; }
.ws-save-status { font-size: 0.86rem; color: var(--ink-soft); margin: 0; min-height: 1.2em; }
.ws-save-status.err { color: #a12a20; }
.ws-save-status a { color: var(--primary); }
.ws-linkish { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: 0.88rem; color: var(--primary); text-decoration: underline; cursor: pointer; }
.ws-linkish[hidden] { display: none; }
.ws-member-note { font-size: 0.86rem; color: var(--ink-soft); margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.ws-member-note a { color: var(--primary); }
.ws-sub { display: block; font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; font-weight: 600; font-size: 11pt; color: #444; margin-top: 3pt; }
#ws-print-set { position: absolute; left: -30000px; top: 0; }
#ws-print-set .ws-sheet { position: relative; transform: none; margin-bottom: 20px; }

@media print {
    body.ws-page { background: #fff; }
    body.ws-printing-set .ws-frame, body.ws-printing-set .ws-preview-label { display: none !important; }
    #ws-print-set { position: static; }
    #ws-print-set .ws-sheet { margin: 0; }
    body.ws-page > *:not(main), .ws-panel, .ws-preview-label, .ws-crumbs { display: none !important; }
    .ws-main { padding: 0; }
    .ws-main .lp-wrap, .ws-grid { display: block; padding: 0; max-width: none; }
    .ws-frame { height: auto !important; margin: 0; }
    .ws-frame[hidden] { display: none; }
    .ws-sheet { position: static; transform: none; box-shadow: none; break-after: page; }
}

/* ---------- hub page ---------- */
.ws-hub-head { padding: 1rem 0 0.5rem; }
.ws-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 1.25rem 0 2.5rem; }
.ws-hub-card { grid-template-columns: 1fr !important; align-items: start !important; background: #fff !important; }
.ws-hub-demo { display: grid; width: 132px; height: 132px; background: #fbfaf6; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.ws-demo-wordsearch { grid-template-columns: repeat(6, 1fr); font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 13px; color: var(--ink); }
.ws-demo-wordsearch i, .ws-demo-sudoku i { font-style: normal; display: flex; align-items: center; justify-content: center; }
.ws-demo-wordsearch i:nth-child(-n+5) { background: rgba(200,55,45,0.18); border-radius: 0; }
.ws-demo-sudoku { grid-template-columns: repeat(4, 1fr); font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); border: 2px solid var(--ink); padding: 0; }
.ws-demo-sudoku i { border: 1px solid #c9c4b6; }
.ws-demo-facts { grid-template-rows: repeat(4, 1fr); font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); align-items: center; }
.ws-demo-facts i { font-style: normal; white-space: nowrap; }
.ws-demo-facts b { display: inline-block; min-width: 26px; border-bottom: 1.5px solid var(--ink); color: #c8372d; text-align: center; }
.ws-hub-members { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.6rem !important; margin-bottom: 1.5rem; }
.ws-hub-more { padding-bottom: 1rem; }
@media (max-width: 900px) { .ws-hub-grid { grid-template-columns: 1fr; } }

/* ---------- math facts (js/ws-mathfacts.js) ---------- */
.wsf-tables { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.wsf-tables label { margin: 0; cursor: pointer; }
.wsf-tables input { position: absolute; opacity: 0; pointer-events: none; }
.wsf-tables span { display: block; text-align: center; padding: 0.35rem 0; border: 1px solid #d6d2c6; border-radius: 7px; font-weight: 600; font-size: 0.9rem; }
.wsf-tables input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.wsf-tables input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 1px; }
.wsf-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.wsf-bar { display: flex; align-self: stretch; justify-content: flex-end; gap: 0.4in; font-size: 12pt; font-weight: 600; height: 40px; align-items: flex-start; }
.wsf-bar i { display: inline-block; width: 0.8in; border-bottom: 1px solid #111; margin: 0 4pt; }
.wsf-grid { display: grid; column-gap: 0.9em; font-family: 'Lexend', 'Atkinson Hyperlegible Next', Arial, sans-serif; font-weight: 500; font-variant-numeric: tabular-nums; }
/* across: line up on the numbers' baseline so the answer line sits below the "=", where students write */
.wsf-q { display: flex; align-items: baseline; white-space: nowrap; }
.wsf-n { font-family: 'Atkinson Hyperlegible Next', Arial, sans-serif; font-size: 0.55em; color: #777; min-width: 2.1em; font-weight: 600; }
.wsf-n, .wsf-line { flex: none; }
.wsf-line { display: inline-block; min-width: 2.8em; height: 1.25em; border-bottom: 2px solid #111; text-align: center; margin-left: 0.3em; position: relative; top: 0.3em; }
.wsf-line b { position: relative; top: -0.3em; }
.wsf-line b, .wsf-ans b { color: #c8372d; font-weight: 700; }
.wsf-grid.down .wsf-q { align-items: flex-start; padding-top: 0.2em; }
.wsf-grid.down .wsf-n { min-width: 0; }
.wsf-grid.down .wsf-stack { margin: 0 auto; }
.wsf-stack { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 3em; line-height: 1.15; }
.wsf-rule { align-self: stretch; border-bottom: 2px solid #111; margin: 0.1em 0 0.15em; }
.wsf-ans { min-height: 1.15em; }

/* ---------- free tools hub (/free-tools/) ---------- */
.ft-group { margin: 2rem 0 0.5rem; }
.ft-group h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.5rem; color: var(--ink); margin-bottom: 0.2rem; }
.ft-group > p { color: var(--ink-soft); margin-bottom: 0.2rem; }
.ft-timers .hp-timer-demo { width: 132px; }
.ft-plan .hp-plan-demo { width: 190px; }
/* a single card across the row, picture beside the text (the timers and Lesson Plan Ideas) */
.ft-wide { grid-template-columns: 1fr; }
.ft-wide .ws-hub-card { grid-template-columns: 200px 1fr !important; align-items: center !important; }
@media (max-width: 700px) { .ft-wide .ws-hub-card { grid-template-columns: 1fr !important; } }