/*
 * Print shell styles: on-screen sheet preview plus print rules that make
 * every .sheet exactly one Letter or A4 page. Puzzle-agnostic; pair with
 * js/print-shell.js. Site CSS adds the puzzle drawing (e.g. .grid-svg).
 *
 * Markup: #tool > #sheets.sheets.paper-{letter|a4} > section.sheet.layout-{1|2|4|6}
 *   > .sheet-head(.sheet-title,.sheet-name) + .sheet-grids > figure.card
 *   (figcaption.card-cap + .card-grid) + .sheet-foot
 * Print hides the shared site chrome (.site-head, .site-foot, .skip, .ad-slot,
 * .noprint). On pages whose <body> has class "has-tool" it also hides .content,
 * .crumbs, every other child of <main> and everything in #tool except #sheets;
 * other pages (about, privacy, 404) print their text.
 * Sheet heights assume the .5in @page margin: Letter 11in-1in less slack
 * = 9.9in; A4 11.69in-1in less slack = 10.55in. Users print at 100% scale.
 */
/* screen preview */
.sheets{container-type:inline-size;max-width:816px;margin:18px auto 0;display:grid;gap:22px}
.sheet{background:#fff;width:100%;aspect-ratio:8.5/11;padding:5.9cqw;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(20,33,61,.12),0 6px 24px rgba(20,33,61,.08);border-radius:4px;overflow:hidden;color:#000}
.paper-a4 .sheet{aspect-ratio:210/297}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;font-size:max(9px,1.9cqw);border-bottom:.25cqw solid #000;padding-bottom:1cqw;margin-bottom:2cqw;white-space:nowrap}
.sheet-title{font-weight:700}
.sheet-name{color:#333}
.sheet-foot{display:flex;justify-content:space-between;gap:2cqw;font-size:max(7px,1.3cqw);color:#555;border-top:.12cqw solid #999;padding-top:.8cqw;margin-top:1.6cqw}
.sheet-grids{flex:1;min-height:0;display:grid;gap:2.6cqw 4cqw;grid-template-columns:1fr;grid-template-rows:1fr}
.layout-2 .sheet-grids{grid-template-rows:1fr 1fr}
.layout-4 .sheet-grids{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.layout-6 .sheet-grids{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr}
.card{margin:0;min-height:0;min-width:0;display:flex;flex-direction:column}
.card-cap{display:flex;justify-content:space-between;gap:1cqw;font-size:max(7px,1.45cqw);color:#222;margin-bottom:.6cqw;white-space:nowrap}
.card-cap span{color:#555}
.card-grid{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.sheet--placeholder{box-shadow:0 1px 3px rgba(20,33,61,.12)}
/* print */
@page{margin:.5in}
@page letter{size:letter;margin:.5in}
@page a4{size:A4;margin:.5in}
@media print{
  html,body{background:#fff!important}
  .site-head,.site-foot,.skip,.ad-slot,.noprint,#tool>:not(#sheets){display:none!important}
  .has-tool .content,.has-tool .crumbs,.has-tool main>:not(#tool){display:none!important}
  main,.wrap,#tool{padding:0!important;margin:0!important;max-width:none!important;width:auto!important}
  .sheets{max-width:none;margin:0;display:block}
  .sheet{aspect-ratio:auto;width:100%;height:9.9in;padding:0;box-shadow:none;border-radius:0;break-inside:avoid;page-break-inside:avoid;overflow:hidden}
  .paper-letter .sheet{page:letter}
  .paper-a4 .sheet{page:a4;height:10.55in}
  .sheet+.sheet{break-before:page;page-break-before:always}
  .sheet-head{font-size:13px;padding-bottom:6px;margin-bottom:12px;border-bottom-width:1.5px}
  .sheet-foot{font-size:9px;padding-top:5px;margin-top:10px;border-top-width:.75px}
  .card-cap{font-size:10.5px;margin-bottom:4px}
  .sheet-grids{gap:16px 28px}
}
:root{--ink:#14213d;--muted:#5a6478;--line:#d9dee8;--bg:#f6f7fb;--card:#fff;--accent:#0f766e;--accent-ink:#fff;--accent-soft:#e6f4f1;--radius:10px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;overflow-wrap:anywhere}
a{color:var(--accent)}
img,svg{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}
.site-head{background:#fff;border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);text-decoration:none;font-size:1.05rem}
.brand svg{width:28px;height:28px;flex:none}
.nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.95rem}
.nav a{color:var(--muted);text-decoration:none;padding:6px 0;min-height:24px;display:inline-block}
.nav a:hover,.nav a[aria-current=page]{color:var(--accent)}
main{display:block;padding:20px 0 40px}
h1{font-size:clamp(1.6rem,4.6vw,2.3rem);line-height:1.2;margin:.2em 0 .3em}
h2{font-size:1.35rem;line-height:1.3;margin:1.6em 0 .5em}
h3{font-size:1.08rem;margin:1.2em 0 .4em}
.lede{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:0 0 16px}
.crumbs{font-size:.9rem;color:var(--muted);margin:0 0 6px}
.crumbs a{color:var(--muted)}
/* tool */
.tool-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:grid;gap:14px}
.controls{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.controls{grid-template-columns:repeat(3,minmax(0,1fr))}}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:600;font-size:.9rem;margin-bottom:6px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative;flex:1 1 auto}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.95rem;min-height:40px;white-space:nowrap}
.seg input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.seg input:focus-visible+span{outline:3px solid #5eead4;outline-offset:1px}
.seg label.is-disabled span{opacity:.4}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.95rem}
.checks label{display:flex;align-items:center;gap:6px;min-height:32px}
.checks input{width:18px;height:18px}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;min-height:42px}
.btn.secondary{background:#fff;color:var(--accent)}
.btn:focus-visible{outline:3px solid #5eead4;outline-offset:2px}
.share{display:flex;gap:6px;flex:1 1 260px;min-width:0}
.share input{flex:1;min-width:0;font:inherit;font-size:.85rem;padding:8px;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:#fbfcfe}
.status{font-size:.9rem;color:var(--muted);margin:0;min-height:1.4em}
.ad-slot{display:block;width:100%;margin:18px auto;background:#eef0f4;border-radius:6px;overflow:hidden;contain:strict}
.ad-slot--leader{max-width:728px;height:100px}
@media(min-width:768px){.ad-slot--leader{height:90px}}
.ad-slot--rect{max-width:336px;height:280px}
/* no ad code yet: an empty slot takes no space and shows nothing */
.ad-slot:empty{display:none}
/* sheet shell and print rules live in css/print.css */
/* content */
.content{max-width:760px}
.content p,.content li{max-width:68ch}
.content table{border-collapse:collapse;width:100%;font-size:.95rem;margin:8px 0 16px;background:#fff}
.content th,.content td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.table-scroll{overflow-x:auto}
.content table.table-wrap td,.content table.table-wrap th{white-space:normal}
.content th,.content td{overflow-wrap:normal;word-break:normal;hyphens:manual}
.content td:not(:last-child),.content th:not(:last-child){white-space:nowrap}
.faq details{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:8px 0}
.faq summary{font-weight:600;cursor:pointer}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:12px 0}
.cards a{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;text-decoration:none;color:var(--ink)}
.cards a strong{display:block;color:var(--accent)}
.cards a span{font-size:.9rem;color:var(--muted)}
.site-foot{border-top:1px solid var(--line);background:#fff;font-size:.9rem;color:var(--muted)}
.site-foot .wrap{padding-top:16px;padding-bottom:24px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 14px}
.site-foot a{color:var(--muted)}
.notfound{text-align:center;padding:40px 0}

@media (max-width:640px){.status{min-height:2.8em}}
/* word search tool */
.field{display:grid;gap:6px;min-width:0}
.field>span,.field>label{font-weight:600;font-size:.9rem}
.field select,.field input[type=text],.field textarea{font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;min-width:0}
.field textarea{height:9.5em;resize:vertical;line-height:1.35}
.field small{color:var(--muted);font-size:.82rem}
.words-field{grid-row:span 2}
@media(min-width:760px){.words-field{grid-row:span 3}}
.btn.small{padding:6px 12px;min-height:36px;font-size:.92rem;justify-self:start}
.ws-alert{background:#fff7ed;border:1px solid #fdba74;color:#7c2d12;border-radius:8px;padding:10px 14px;font-size:.95rem}
.ws-alert ul{margin:6px 0;padding-left:20px}
.ws-alert p{margin:0}
.ws{width:100%;height:100%;display:flex;flex-direction:column;gap:2.2cqw;min-height:0}
.ws-gridbox{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.ws-svg{display:block;width:100%;height:100%}
.ws-frame{fill:#fff;stroke:#000;stroke-width:.5}
.ws-svg text{font-family:"Courier New",Courier,ui-monospace,monospace;font-weight:700;font-size:6.4px;text-anchor:middle;dominant-baseline:central;fill:#000}
.ws-svg text.ws-out{fill:#9a9a9a;font-weight:400}
.ws-hl{stroke:#9ca3af;stroke-opacity:.45;stroke-width:7.6;stroke-linecap:round;fill:none}
.ws-words{list-style:none;margin:0;padding:1.4cqw 0 0;border-top:.15cqw solid #999;columns:4;column-gap:3cqw;font-size:max(7px,1.75cqw);line-height:1.5;font-weight:600;letter-spacing:.02em}
.ws-words li{break-inside:avoid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-words.cols-3{columns:3}.ws-words.cols-5{columns:5;font-size:max(7px,1.55cqw)}
.large-print .ws-svg text{font-weight:800}
.large-print .ws-words{font-size:max(8px,2.3cqw);columns:3}
.large-print .ws-words.cols-5{columns:4}
.large-print .card-cap,.large-print .sheet-head{font-weight:600}
.theme-words{columns:3 150px;padding-left:20px}
@media print{
  .ws{gap:14px}
  .ws-words{font-size:12.5px;padding-top:8px;border-top-width:.75px}
  .ws-words.cols-5{font-size:11px}
  .large-print .ws-words{font-size:16px}
  .large-print .card-cap{font-size:13px}
  .large-print .sheet-head{font-size:15px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.seg:has(input[name=g]) label{flex:1 1 0;min-width:0}.seg:has(input[name=g]) span{padding:8px 2px}
/* while a puzzle is being made: dim the old sheets and spin a ring on the New puzzle button */
#tool.is-generating #sheets{opacity:.55;transition:opacity .15s}
#tool.is-generating #btn-new::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.45em;vertical-align:-.12em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ws-spin .7s linear infinite}
@keyframes ws-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#tool.is-generating #btn-new::before{animation:none}}