/* The crossword page: controls, the slice grids, and the clue lists. */

.crossword {
    max-width: 1100px;
}

.crossword .page-lede {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

/* The generator sits at the foot of the crossword post, inside an 800px
   column of prose. Three dimensions is nine grids side by side and four is
   more than that, so it steps out of the measure the text is set to and takes
   the width of the window instead — down to the window's own width, so this
   does not become a horizontal scrollbar on a phone. */
.post-crossword {
    width: min(1100px, calc(100vw - 2 * var(--spacing-md)));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.post-crossword h2 {
    margin-bottom: var(--spacing-sm);
}

.post-figure--ninesquare {
    max-width: 15.5rem;
    margin-inline: auto;
}

/* Controls */
.cw-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-sm);
    align-items: flex-end;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
}

.cw-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.cw-field--pair {
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
}

.cw-field--pair label { align-self: center; }
.cw-to { font-size: 0.85rem; }

.cw-field select,
.cw-field input[type="number"],
.cw-field input[type="text"] {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.cw-field input[type="number"] { width: 4.5rem; }

.cw-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.cw-actions {
    display: flex;
    gap: var(--spacing-xs);
    margin-left: auto;
}

.btn-quiet {
    background: transparent;
    color: var(--color-text-muted);
}

.btn-quiet:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.cw-status {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: var(--spacing-sm);
}

.cw-status.is-bad { color: #a33; font-style: normal; }
.cw-status.is-good { color: #2c6e49; font-style: normal; }

/* Grids. One slice per combination of the axes we are not drawing. */
.cw-grids {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    /* A grid thirteen squares across is wider than a phone, and no cell size
       worth typing into would fix that. It scrolls within its own box so the
       page itself does not slide sideways under everything else. */
    overflow-x: auto;
}

/* A slice must not be squeezed to fit the scrolling box; it keeps its width
   and the box scrolls to it. */
.cw-slice { flex: 0 0 auto; }

.cw-slice-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.cw-grid {
    display: grid;
    gap: 0;
    border-collapse: collapse;
}

.cw-cell {
    position: relative;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

/* A square no word passes through is not part of the puzzle. */
.cw-cell.is-void {
    border-color: transparent;
    background: transparent;
}

.cw-cell input {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-text);
    background: transparent;
}

.cw-cell input:focus {
    outline: none;
    background: #fff4c2;
}

/* Every other square of the word being typed. */
.cw-cell.is-active { background: #fdf6d8; }
.cw-cell.is-wrong input { color: #a33; }
.cw-cell.is-revealed input { color: var(--color-accent); }

.cw-number {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Clues */
.cw-clues {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--spacing-md);
}

.cw-clue-group h2 {
    font-size: 1.15rem;
    margin-bottom: var(--spacing-xs);
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--color-border);
}

.cw-clue-list {
    list-style: none;
    font-size: 0.95rem;
}

.cw-clue {
    display: flex;
    gap: 0.5rem;
    padding: 0.2rem 0.3rem;
    cursor: pointer;
    border-radius: 3px;
}

.cw-clue:hover { background: var(--color-bg-alt); }
.cw-clue.is-active { background: #fdf6d8; }
.cw-clue.is-done { color: var(--color-text-muted); }

.cw-clue-number {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    min-width: 1.6rem;
    text-align: right;
}

.cw-clue-length { color: var(--color-text-muted); }

@media (max-width: 700px) {
    .cw-actions { margin-left: 0; }
    .cw-cell { width: 1.8rem; height: 1.8rem; }
    .cw-cell input { font-size: 1rem; }
}