/* Crossword Workshop — styles
   Shares the letterpress/type-tray design language of Anagram Workshop:
   warm paper, ink navy, ochre + teal accents. */

.cw-root {
  --cw-bg: #ffffff;
  --cw-paper: #ede3cc;
  --cw-paper-deep: #e2d5b3;
  --cw-ink: #1b2430;
  --cw-ink-soft: #4c5568;
  --cw-ochre: #c9932b;
  --cw-ochre-deep: #a4741d;
  --cw-teal: #3e6259;
  --cw-teal-deep: #2c463f;
  --cw-rust: #b4432f;
  --cw-cell: #f7f1e1;
  --cw-line: rgba(27, 36, 48, 0.2);
  --cw-serif: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --cw-mono: "Space Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  box-sizing: border-box;
  max-width: 920px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
  background: var(--cw-bg);
  color: var(--cw-ink);
  font-family: var(--cw-serif);
}

.cw-root *,
.cw-root *::before,
.cw-root *::after {
  box-sizing: border-box;
}

.cw-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.cw-wordmark {
  font-family: var(--cw-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin: 0;
  line-height: 1.1;
}

.cw-wordmark em {
  font-style: italic;
  color: var(--cw-ochre-deep);
}

.cw-tagline {
  margin: 0.5rem 0 0;
  color: var(--cw-ink-soft);
  font-size: 1rem;
}

/* ---------- Mode toggle ---------- */

.cw-mode-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.cw-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--cw-ink);
  border-radius: 4px;
  overflow: hidden;
}

.cw-mode-btn {
  font-family: var(--cw-serif);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
  border: none;
  background: var(--cw-paper);
  color: var(--cw-ink-soft);
  cursor: pointer;
}

.cw-mode-btn + .cw-mode-btn {
  border-left: 1px solid var(--cw-ink);
}

.cw-mode-btn[aria-pressed="true"] {
  background: var(--cw-ink);
  color: var(--cw-paper);
}

.cw-mode-btn:focus-visible {
  outline: 2px solid var(--cw-teal-deep);
  outline-offset: 2px;
}

.cw-size-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--cw-ink-soft);
}

.cw-size-row select {
  font-family: var(--cw-serif);
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--cw-ink);
  border-radius: 3px;
  background: var(--cw-cell);
  color: var(--cw-ink);
}

.cw-mode-hint {
  text-align: center;
  color: var(--cw-ink-soft);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.cw-status {
  text-align: center;
  color: var(--cw-teal-deep);
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
}

.cw-status[hidden] { display: none; }

/* ---------- Builder form ---------- */

.cw-builder {
  border: 1px solid var(--cw-line);
  border-radius: 4px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.25);
}

.cw-builder-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.cw-builder-hint {
  color: var(--cw-ink-soft);
  font-size: 0.85rem;
  margin: 0 0 0.6rem;
}

.cw-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  font-family: var(--cw-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.75rem;
  border: 1px solid var(--cw-ink);
  border-radius: 3px;
  background: var(--cw-cell);
  color: var(--cw-ink);
}

.cw-textarea:focus-visible {
  outline: 2px solid var(--cw-teal-deep);
  outline-offset: 2px;
}

.cw-builder-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.cw-btn {
  font-family: var(--cw-serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 1.1rem;
  border-radius: 3px;
  border: 1px solid var(--cw-ink);
  background: var(--cw-paper);
  color: var(--cw-ink);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.cw-btn:hover { background: var(--cw-paper-deep); }
.cw-btn:active { transform: translateY(1px); }
.cw-btn:focus-visible { outline: 2px solid var(--cw-teal-deep); outline-offset: 2px; }

.cw-btn-primary {
  background: var(--cw-ochre);
  border-color: var(--cw-ochre-deep);
  color: #241a06;
}
.cw-btn-primary:hover { background: var(--cw-ochre-deep); }

.cw-btn-quiet {
  border-color: var(--cw-line);
  color: var(--cw-ink-soft);
}

.cw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--cw-ink-soft);
  cursor: pointer;
  margin-left: auto;
}

.cw-toggle input { width: 1rem; height: 1rem; }

.cw-warning {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--cw-rust);
}

.cw-warning[hidden] { display: none; }

/* ---------- Puzzle output ---------- */

.cw-puzzle {
  margin-top: 2.5rem;
}

.cw-puzzle[hidden] { display: none; }

.cw-puzzle-layout {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.cw-grid-wrap {
  overflow-x: auto;
  padding: 0.25rem;
}

.cw-grid {
  --cell-size: 2.15rem;
  display: inline-grid;
  border: 2px solid var(--cw-ink);
  background: var(--cw-ink);
  gap: 1px;
}

.cw-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  background: var(--cw-ink);
  position: relative;
}

.cw-cell.is-blocked {
  background: var(--cw-ink);
}

.cw-cell.is-active {
  background: var(--cw-cell);
}

.cw-cell-number {
  position: absolute;
  top: 1px;
  left: 2px;
  font-family: var(--cw-mono);
  font-size: 0.55rem;
  color: var(--cw-ink-soft);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* Scoped as ".cw-root input.cw-cell-input" (not just ".cw-cell-input") so
   theme form styles can't win on specificity. Themes like Astra style
   input[type="text"] with padding: 12px 16px and height: 40px, which
   squeezed each 34px cell's text area down to ~1px — typed letters were
   stored but clipped out of sight. Every property a theme commonly sets
   on text inputs is reset here explicitly. */
.cw-root input.cw-cell-input {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: none;
  line-height: 1;
  text-align: center;
  text-indent: 0;
  text-transform: uppercase;
  font-family: var(--cw-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--cw-ink);
  -webkit-text-fill-color: currentColor;
}

.cw-root input.cw-cell-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
  background: #fff8e3;
}

.cw-root .cw-cell.is-highlight input.cw-cell-input {
  background: #f0e4bf;
}

.cw-root .cw-cell.is-highlight.is-focused input.cw-cell-input {
  background: #fff8e3;
}

.cw-root input.cw-cell-input.is-wrong {
  color: var(--cw-rust);
}

.cw-cell-solution {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: var(--cw-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--cw-teal-deep);
}

.cw-root.cw-show-solution input.cw-cell-input { display: none; }
.cw-root.cw-show-solution .cw-cell-solution { display: flex; }

.cw-clues {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  min-width: 220px;
  flex: 1;
}

.cw-clue-col h3 {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  border-bottom: 1px solid var(--cw-line);
  padding-bottom: 0.3rem;
}

.cw-clue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.cw-clue-list li {
  display: flex;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
  align-items: baseline;
}

.cw-clue-list li:hover,
.cw-clue-list li.is-active-clue {
  background: var(--cw-paper-deep);
}

.cw-clue-input {
  flex: 1;
  font-family: var(--cw-serif);
  font-size: 0.92rem;
  color: var(--cw-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0;
  min-width: 0;
}

.cw-clue-input::placeholder {
  color: var(--cw-ink-soft);
  font-style: italic;
}

.cw-clue-input:focus {
  outline: none;
  border-bottom-color: var(--cw-teal-deep);
}

.cw-clue-num {
  font-family: var(--cw-mono);
  color: var(--cw-ink-soft);
  min-width: 1.4rem;
}

.cw-keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  user-select: none;
}

.cw-keyboard-row {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
}

.cw-key {
  font-family: var(--cw-mono);
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 2rem;
  height: 2.4rem;
  padding: 0 0.35rem;
  border: 1px solid var(--cw-ink);
  border-radius: 4px;
  background: var(--cw-cell);
  color: var(--cw-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.cw-key:hover {
  background: var(--cw-paper-deep);
}

.cw-key:active {
  background: var(--cw-ochre);
  transform: translateY(1px);
}

.cw-key-wide {
  min-width: 3.4rem;
  font-size: 0.8rem;
  font-family: var(--cw-serif);
  font-weight: 600;
}

.cw-puzzle-controls {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
  align-items: center;
}

.cw-footer-note {
  text-align: center;
  color: var(--cw-ink-soft);
  font-size: 0.8rem;
  margin-top: 2.5rem;
}

/* On phones/tablets the clue lists push the keyboard ~1200px below the
   grid, so taps landed in cells the solver couldn't see. Pin it to the
   bottom of the viewport while the puzzle is on screen instead. */
@media (max-width: 900px), (pointer: coarse) {
  .cw-keyboard {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0.5rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--cw-bg);
    box-shadow: 0 -4px 12px rgba(27, 36, 48, 0.12);
  }
  /* keep the focused cell from scrolling in behind the pinned keyboard */
  .cw-cell-input { scroll-margin-bottom: 10rem; scroll-margin-top: 4rem; }
}

@media (max-width: 560px) {
  .cw-grid { --cell-size: 1.8rem; }
  .cw-root input.cw-cell-input { font-size: 0.95rem; }
  .cw-key { min-width: 1.7rem; height: 2.2rem; font-size: 0.85rem; }
}

@media print {
  .cw-builder,
  .cw-puzzle-controls,
  .cw-footer-note,
  .cw-tagline,
  .cw-keyboard {
    display: none !important;
  }
  .cw-root { background: #fff; padding: 0; max-width: 100%; }
  .cw-puzzle-layout { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-btn { transition: none; }
}

/* ---------- Puzzle pack (multi-puzzle static page) ---------- */

.pack-intro {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding: 0 1.25rem;
  text-align: center;
}

.pack-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.25rem;
  margin: 0.5rem 0 0;
}

.pack-nav-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pack-nav select {
  font-family: var(--cw-serif, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cw-ink, #1b2430);
  border-radius: 3px;
  background: var(--cw-cell, #f7f1e1);
  color: var(--cw-ink, #1b2430);
  min-width: 220px;
  cursor: pointer;
}

.pack-nav select:focus-visible {
  outline: 2px solid var(--cw-teal-deep, #2c463f);
  outline-offset: 2px;
}

.pack-nav-row {
  margin: 1rem 0 0;
}

.pack-nav-label {
  text-align: center;
  color: var(--cw-ink-soft);
  font-family: var(--cw-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 1.5rem 0 0.5rem;
}

.pack-puzzle-meta {
  text-align: center;
  color: var(--cw-ink-soft);
  font-family: var(--cw-mono);
  font-size: 0.85rem;
  margin: -1rem 0 1.5rem;
}

.pack-divider {
  display: none;
}

/* Compact spacing above the grid. Scoped with a parent class + element so
   theme paragraph rules (e.g. Astra's ".entry-content p { margin-bottom:
   1.6em }") can't re-add large gaps under each heading and label. */
.pack-intro {
  margin-bottom: 1rem;
}

.pack-intro p.cw-wordmark,
.cw-root p.cw-wordmark {
  margin: 0;
}

.pack-intro p.cw-tagline {
  margin: 0.35rem 0 0;
}

.pack-intro p.pack-nav-label {
  margin: 0 0 0.25rem;
}

.pack-intro .pack-nav {
  margin-top: 0.75rem;
}

.cw-root[data-puzzle-id] {
  padding-top: 1.25rem;
}

.cw-root .cw-header {
  margin-bottom: 1rem;
}

.cw-root p.cw-tagline {
  margin: 0.25rem 0 0;
}

.cw-root .cw-puzzle {
  margin-top: 0;
}

@media print {
  .pack-intro { display: none !important; }
}