/* Small page-local styles; no font or framework downloads are needed. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; color: #212529; background: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.5; }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 1.375rem + 1.5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 1.325rem + .9vw, 2rem); }
h3 { font-size: 1.4rem; }
p, ol { margin: 0 0 1rem; }
ol { padding-left: 1.5rem; }
a { color: #0b57d0; text-underline-offset: .15em; }
a:hover { color: #084298; }
button, input, select, textarea { font: inherit; }
button, summary, input[type="checkbox"] { cursor: pointer; }
input[type="checkbox"] { accent-color: #0b57d0; }
:focus-visible { outline: 3px solid #0b57d0; outline-offset: 3px; }
.container { width: 100%; margin-inline: auto; padding-inline: .75rem; }
.py-4 { padding-block: 1.5rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.small { font-size: .875rem; }
.text-muted { color: #59636e; }
.card { border: 1px solid #d2d6db; border-radius: .375rem; }
.card-body { padding: 1rem; }
.form-label { display: inline-block; margin-bottom: .5rem; }
.form-control, .form-select { display: block; width: 100%; padding: .375rem .75rem; border: 1px solid #b9c1c9; border-radius: .375rem; background: #fff; color: #212529; line-height: 1.5; }
.form-control-sm, .form-select-sm { font-size: .875rem; padding: .25rem .5rem; border-radius: .25rem; }
textarea.form-control { resize: vertical; }
.form-control::placeholder { color: #59636e; opacity: 1; }
.form-control:disabled { background: #e9ecef; cursor: default; }
.btn { display: inline-block; padding: .375rem .625rem; border: 1px solid transparent; border-radius: .25rem; font-size: .875rem; line-height: 1.5; text-align: center; }
.btn-primary { color: #fff; background: #0b57d0; border-color: #0b57d0; }
.btn-primary:hover:not(:disabled) { background: #084298; }
.btn-secondary { color: #fff; background: #59636e; border-color: #59636e; }
.btn-secondary:hover:not(:disabled) { background: #434c55; }
.btn-outline-secondary { color: #505a64; background: #fff; border-color: #67727d; }
.btn-outline-secondary:hover:not(:disabled) { background: #e9ecef; }
.btn-outline-danger { color: #b02a37; background: #fff; border-color: #b02a37; }
.btn-outline-danger:hover:not(:disabled) { background: #fbeaec; }
.btn:disabled { opacity: .6; cursor: default; }
.table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; border: 1px solid #d2d6db; }
.table th, .table td { padding: .25rem; border: 1px solid #d2d6db; text-align: left; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap !important; border: 0 !important; }
.skip-link { position: absolute; top: -5rem; left: 1rem; z-index: 1; padding: .75rem; color: #fff; background: #0b57d0; }
.skip-link:focus { top: 1rem; }
.guide { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #d2d6db; }
.guide > h2:not(:first-child) { margin-top: 1.5rem; }
.guide ol li { margin-bottom: .75rem; }
.guide details { padding: .75rem 0; border-bottom: 1px solid #e0e3e7; }
.guide summary { font-weight: 600; }
.guide details p { margin: .75rem 0 0; max-width: 75ch; }
.related-links { margin-top: 1.5rem; }
footer { padding-block: 1rem; font-size: .875rem; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
[hidden] { display: none !important; }
.navbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-height: 56px; padding: .5rem .75rem; color: #fff; background: #0b57d0; }
.navbar-brand-group { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.navbar a { color: #fff; text-decoration: none; }
.navbar .home-link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; min-height: 2.75rem; border-radius: .25rem; }
.navbar .home-link:hover { background: #084298; }
.navbar-divider { height: 1.5rem; border-left: 1px solid #fff8; }
.navbar-brand { padding-block: .5rem; font-size: 1.25rem; font-weight: 500; overflow-wrap: anywhere; }
.navbar-brand:hover { text-decoration: underline; }
.navbar-actions { margin-inline-start: auto; }
.navbar .btn { min-height: 2.75rem; padding-inline: .75rem; color: #0b57d0; border-color: #fff; }
.navbar :focus-visible { outline-color: #fff; }
.workflow-steps { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: 0; margin-bottom: 1.5rem; list-style: none; counter-reset: workflow; }
.workflow-steps li { display: flex; align-items: center; gap: .5rem; counter-increment: workflow; }
.workflow-steps li::before { content: counter(workflow); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid #b9c1c9; border-radius: 50%; color: #0b57d0; font-weight: 600; }
.generation-toolbar { padding: .75rem; border: 1px solid #d2d6db; border-radius: .375rem; background: #f5f5f5; }
.generation-toolbar .btn, .print-options .btn { min-height: 2.75rem; }
#entry-summary { font-weight: 500; }
#preview-empty { padding-block: 1rem; }
#preview-empty h3, .print-options h3 { font-size: 1.1rem; }
.print-options { padding-top: .75rem; border-top: 1px solid #d2d6db; }
.how-to ol { margin-top: 1rem; }
.workspace { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.workspace > * { min-width: 0; }
.ad-label { margin-bottom: .5rem; font-size: .75rem; color: #59636e; text-align: center; overflow-wrap: anywhere; }
.ad-banner { width: 100%; max-width: 728px; margin: 3rem auto 0; }
.ad-rail { display: none; position: absolute; top: 0; left: calc(100% + 40px); width: 160px; }
.ad-placement:has(ins[data-ad-status="unfilled"]) { display: none; }
@media (min-width: 1760px) {
  .ad-rail { display: block; }
  .ad-banner { display: none; }
}
.panel-heading { font-size: 1.4rem; }
.entries-scroll { max-height: 50vh; overflow: auto; }
.size-controls { display: flex; flex-wrap: wrap; gap: 1rem; }
.size-controls input { width: 6rem; }
.control-buttons, .output-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.generation-options { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.generation-options label, .output-controls label { display: inline-flex; align-items: center; gap: .25rem; }
.generation-options input[type="checkbox"], .output-controls input[type="checkbox"] { margin: 0; flex-shrink: 0; }
#bulk-format { width: auto; max-width: 100%; padding: .375rem .625rem; min-height: calc(1.5em + .75rem + 2px); }
.bulk-editor summary, .settings-editor summary { font-weight: 600; }
#bulk-text { font-family: ui-monospace, monospace; }
#words-table { table-layout: fixed; }
#words-table th:first-child { width: 30%; }
#words-table th:last-child { width: 3rem; }
#words-table input { width: 100%; min-width: 0; }
#preview-heading, #generation-status { scroll-margin-top: 1rem; }
#generation-status { padding: .75rem; border-left: .25rem solid #6c757d; background: #f5f5f5; }
#generation-status[data-kind="error"] { border-color: #b02a37; color: #842029; }
#generation-status[data-kind="success"] { border-color: #146c43; color: #0f5132; }
#unplaced-words, .clue-list, .puzzle-heading { overflow-wrap: anywhere; }
#unplaced-words:empty { display: none; }
.puzzle-heading { text-align: center; margin: 1rem 0; }
.puzzle-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.clue-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.grid-scroll { min-width: 0; overflow-x: auto; }
.crossword-display { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: calc(var(--cols) * 1.1rem); max-width: calc(var(--cols) * 2.5rem); margin: 0 auto; }
.crossword-display td { border: 1px solid #333; padding: 0; width: calc(100% / var(--cols)); }
.cell-content { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; }
.block { background: #000; }
.low-ink .block { background: #fff; }
.low-ink .block .cell-content::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; color: #777; font-size: clamp(.6rem, 1vw, 1rem); }
.clue-number { position: absolute; top: 0; left: 2px; font-size: clamp(.4rem, .65vw, .65rem); line-height: 1; color: #222; }
.solution-letter { position: absolute; inset: 0; display: grid; place-items: center; font-weight: bold; font-size: clamp(.65rem, 1.5vw, 1.2rem); line-height: 1; color: #111; }
.hide-solution .solution-letter { visibility: hidden; }
.clue-list { list-style: none; padding: 0; }
.clue-list li { margin-bottom: .75rem; }
.clue-column h3 { font-size: 1.2rem; }
#answer-key-sheet { display: none; }
@media (max-width: 575px) { .navbar-actions { flex-basis: 100%; margin-inline-start: 0; } }
@media (max-width: 991px) { .workspace { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 992px) { #view-preview { display: none; } }
@media (max-width: 767px) {
  .entries-scroll { max-height: none; overflow: visible; }
  .clue-number { font-size: .5rem; }
  .solution-letter { font-size: .8rem; }
}
@supports (font-size: 1cqw) {
  .cell-content { container-type: inline-size; }
  .clue-number { font-size: clamp(.4rem, 30cqw, .65rem); }
  .solution-letter { font-size: clamp(.65rem, 70cqw, 1.2rem); }
}
@page { size: landscape; margin: 12mm; }
@media print {
  .skip-link { display: none !important; }
  .no-print { display: none !important; }
  html, body { margin: 0; padding: 0; height: auto; color: #000; }
  main.container { max-width: none; width: auto; padding: 0 !important; }
  .workspace { display: block; }
  #preview-panel { border: 0; border-radius: 0; }
  .preview-body { padding: 0; }
  .puzzle-heading { font-size: 16pt; margin: 0 0 5mm; }
  .puzzle-layout { display: grid; grid-template-columns: min-content minmax(0, 1fr); gap: 6mm; }
  .grid-scroll { overflow: visible; }
  .crossword-display { width: auto; min-width: 0; max-width: none; break-inside: avoid; }
  .crossword-display td { width: auto; border-width: .25mm; }
  .cell-content { width: var(--print-cell); height: var(--print-cell); aspect-ratio: auto; }
  .block { background: #000 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .low-ink .block { background: #fff !important; }
  .low-ink .block .cell-content::after { color: #555; font-size: min(9pt, calc(var(--print-cell) * .5)); }
  .clue-number { font-size: min(6pt, calc(var(--print-cell) * .3)); left: .3mm; }
  .solution-letter { font-size: min(11pt, calc(var(--print-cell) * .6)); }
  .clue-column { display: block; font-size: 9pt; line-height: 1.25; }
  .clue-column h3 { font-size: 11pt; margin: 0 0 2mm; break-after: avoid; }
  .clue-list { margin: 0 0 4mm; }
  .clue-list li { margin-bottom: 2mm; break-inside: avoid; }
  #puzzle-sheet .solution-letter { visibility: hidden; }
  #answer-key-sheet .solution-letter { visibility: visible; }
  body[data-print-mode="solution"] #puzzle-sheet { display: none; }
  body[data-print-mode="solution"] #answer-key-sheet,
  body[data-print-mode="both"] #answer-key-sheet { display: block; }
  body[data-print-mode="both"] #answer-key-sheet { break-before: page; }
}
