/*
 * निहारिका वर्ग पहेली — the board, the clue rail and the controls.
 *
 * Was an inline <style> in the view. Moved out for the same reason the sudoku's was: a crossword
 * that tracks the clue you are in, marks a checked word, hides an archive's answers until they are
 * asked for and still prints, is not a thing to keep inside a template.
 *
 * Every colour is a token on .cw and is redefined once for dark. Nothing below names a colour.
 */

.cw {
    --cw-ink: #111;
    --cw-ink-soft: #666;
    --cw-cell: #fff;
    --cw-block: #1a1a1a;
    --cw-line: #b9b9b9;
    --cw-rule: #222;
    --cw-accent: #1d4ed8;
    --cw-word: #e6eefc;
    --cw-focus: #bcd3fb;
    --cw-right: #15803d;
    --cw-right-soft: #eafaf0;
    --cw-wrong: #c0261f;
    --cw-wrong-soft: #fdecea;
    --cw-surface: #fafafa;
    --cw-surface-line: #ddd;

    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
    color: var(--cw-ink);
}

@media (prefers-color-scheme: dark) {
    .cw {
        --cw-ink: #ededed;
        --cw-ink-soft: #a3a3a3;
        --cw-cell: #171717;
        --cw-block: #000;
        --cw-line: #3f3f3f;
        --cw-rule: #8a8a8a;
        --cw-accent: #60a5fa;
        --cw-word: #1d2836;
        --cw-focus: #2b4468;
        --cw-right: #4ade80;
        --cw-right-soft: #12301e;
        --cw-wrong: #f87171;
        --cw-wrong-soft: #331b1b;
        --cw-surface: #1f1f1f;
        --cw-surface-line: #3f3f3f;
    }
}

.cw__head h1 { font-size: 1.4rem; margin: 0 0 .15rem; }
.cw__meta { color: var(--cw-ink-soft); font-size: .95rem; margin: 0 0 .6rem; }
.cw__meta a { color: inherit; }

.cw__status {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
    font-variant-numeric: tabular-nums;
}
.cw__clock { font-weight: 600; min-width: 3.6em; }
.cw__pause {
    border: 1px solid var(--cw-surface-line); background: var(--cw-surface); color: inherit;
    border-radius: 999px; padding: .2rem .7rem; font: inherit; font-size: .85rem; cursor: pointer;
}
.cw__note { margin-left: auto; color: var(--cw-ink-soft); font-size: .85rem; }
.cw__note[data-tone="wrong"] { color: var(--cw-wrong); font-weight: 600; }
.cw__note[data-tone="right"] { color: var(--cw-right); font-weight: 600; }

.cw__layout { display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 860px) { .cw__layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); } }

/* ── the current clue ─────────────────────────────────────────────────────
   On a phone the clue list is far below the grid, so without this the reader
   scrolls up and down for every square. This is the single thing that makes a
   crossword playable on a small screen. */
/*
 * IT FLOATS OVER THE BOARD, beside the square being filled.
 *
 * A fixed bar above the grid means the clue is at the top of the screen and the square is halfway
 * down it; on a phone the two are never in one glance. So the bar is placed on a band of ROWS that
 * holds none of the squares its own two clues fill, as near the cursor as such a band exists —
 * `placeBar()` chooses it. Where no band inside the grid is free (a long down word can occupy most
 * of them), it steps outside, above or below the board.
 *
 * Placed by CLASS, not by writing `style.top`. The strict candidate policy counts a script writing
 * `el.style.something` as a `style-src-attr` violation exactly like an inline attribute, and the
 * puzzles pages were most of that report once already. Ten bands is ten rules.
 */
/*
 * Only a little room above. The bar spends nearly all its time ON a band inside the board, so a
 * reserve big enough for its rare trip outside is a hole at the top of the page the rest of the
 * time. Where it does step out, it overlays the clock line — it carries its own background and
 * shadow, and a moment of overlap beats a permanent gap.
 */
.cw__board { position: relative; margin-top: 1rem; }

.cw__now {
    position: absolute; left: 0; right: 0; z-index: 5;
    display: flex; align-items: stretch; gap: .4rem;
    border: 1px solid var(--cw-surface-line); border-radius: 10px;
    background: var(--cw-surface);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}
@media (prefers-color-scheme: dark) {
    .cw__now { box-shadow: 0 6px 22px rgba(0, 0, 0, .55); }
}
/*
 * NO TRANSITION ON THE BAR'S POSITION, and an explicit refusal so nothing else can add one.
 *
 * A .14s slide on `top` looked better and cost the one guarantee this bar exists to keep. A
 * transition holds the USED value at its start until it progresses, and it does not progress in a
 * throttled or hidden tab — measured on the live page: every band computed to the same 190.551px,
 * the bar sat wherever it had last been, and cancelling the running transitions snapped it to 0
 * where its class had said all along. A clue bar that must stay off the squares it is asking about
 * has to be in the right place on the frame it is put there.
 */
#cwNow { transition: none; }

/* Outside the board — used before anything is selected, and when every band is spoken for. */
.cw__now--outside-top { top: auto; bottom: calc(100% + .5rem); }
.cw__now--outside-bottom { top: calc(100% + .5rem); bottom: auto; }

/*
 * THE BANDS THEMSELVES ARE WRITTEN BY THE VIEW, in its nonced <style>, one rule per grid row —
 * `#cwNow.cw__now--bN { top: …% }`. They are not here because they are DATA: a puzzle's row count
 * belongs to the puzzle, exactly as its column count does.
 *
 * They are also not `calc(100% / var(--cw-rows) * N)`, which is what this tried first. Measured on
 * the live page: every band computed to the same 190.551px — the percentage was resolving against
 * something other than the board, so the bar sat in one place whatever class it wore. A plain
 * percentage per row leaves nothing to resolve.
 */
.cw__step {
    flex: 0 0 auto; width: 2.6rem;
    border: 0; background: transparent; color: inherit;
    font: inherit; font-size: 1.2rem; cursor: pointer; border-radius: 10px;
}
.cw__step:hover { background: var(--cw-word); }
.cw__now-text { flex: 1 1 auto; padding: .5rem .2rem; min-width: 0; }
.cw__now-where { display: block; font-size: .72rem; color: var(--cw-ink-soft); letter-spacing: .02em; }
.cw__now-clue { display: block; font-weight: 600; line-height: 1.3; }

/* The other word through this square. Quieter than the clue in hand, and tappable. */
.cw__cross {
    display: block; width: 100%; text-align: start;
    margin-top: .2rem; padding: 0;
    border: 0; background: transparent;
    font: inherit; font-size: .82rem; color: var(--cw-ink-soft);
    cursor: pointer;
}
.cw__cross:hover { color: var(--cw-accent); text-decoration: underline; }
.cw__cross[hidden] { display: none; }

.cw__step--flip { font-size: 1rem; }
.cw__step[disabled] { opacity: .3; cursor: default; }
.cw__step[disabled]:hover { background: transparent; }

/* ── grid ─────────────────────────────────────────────────────────────────── */

.cw__board { max-width: 480px; }

.cw__grid {
    display: grid;
    grid-template-columns: repeat(var(--cw-cols, 9), 1fr);
    border: 2px solid var(--cw-rule);
    background: var(--cw-line);
    gap: 1px;
    user-select: none; -webkit-user-select: none;
    max-width: 480px;
}
.cw__cell {
    position: relative; aspect-ratio: 1;
    background: var(--cw-cell); color: var(--cw-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(13px, 3.6vw, 21px);
    -webkit-tap-highlight-color: transparent;
}
.cw__cell.is-block { background: var(--cw-block); }
.cw__num {
    position: absolute; top: 1px; left: 3px;
    font-size: .5em; line-height: 1; color: var(--cw-ink-soft);
    pointer-events: none;
}
.cw__ch {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: text; outline: none;
}
.cw__cell.in-word { background: var(--cw-word); }
.cw__cell.is-cursor { background: var(--cw-focus); }
.cw__ch:focus { outline: none; }
.cw__cell.is-cursor::after {
    content: ""; position: absolute; inset: 0;
    outline: 3px solid var(--cw-accent); outline-offset: -3px; pointer-events: none;
}
.cw__cell.is-right { color: var(--cw-right); }
.cw__cell.is-wrong { background: var(--cw-wrong-soft); color: var(--cw-wrong); }
.cw__cell.is-revealed { color: var(--cw-accent); }

/* ── tools ────────────────────────────────────────────────────────────────── */

.cw__tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .5rem; max-width: 480px; }
.cw__tool {
    padding: .55rem .3rem; font: inherit; font-size: .85rem;
    background: var(--cw-surface); color: var(--cw-ink);
    border: 1px solid var(--cw-surface-line); border-radius: 10px; cursor: pointer;
}
.cw__tool:hover { border-color: var(--cw-accent); }
.cw__tool[disabled] { opacity: .4; cursor: default; }

/* ── clues ────────────────────────────────────────────────────────────────── */

.cw__clues { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.cw__clues h2 { font-size: 1rem; margin: 0 0 .3rem; }
.cw__clues ol { list-style: none; padding: 0; margin: 0; }
.cw__clue {
    display: block; width: 100%; text-align: start;
    border: 0; border-top: 1px solid var(--cw-surface-line);
    background: transparent; color: inherit;
    font: inherit; padding: .45rem .4rem; cursor: pointer; border-radius: 6px;
}
.cw__clue:hover { background: var(--cw-surface); }
.cw__clue[aria-current="true"] { background: var(--cw-word); font-weight: 600; }
.cw__clue b { margin-inline-end: .35rem; }
.cw__len { color: var(--cw-ink-soft); white-space: nowrap; }
.cw__clue.is-solved { color: var(--cw-ink-soft); }
.cw__clue.is-solved b { color: var(--cw-right); }

/* The archive's answer, revealed one clue at a time and never before it is asked for. */
.cw__answer { display: none; margin-inline-start: .35rem; font-weight: 700; color: var(--cw-accent); }
.cw__clue.is-shown .cw__answer { display: inline; }

.cw__won {
    display: none; margin-top: 1rem; padding: .9rem 1rem;
    border: 1px solid var(--cw-right); border-radius: 10px;
    background: var(--cw-right-soft); color: var(--cw-right);
}
.cw__won.is-shown { display: block; }
.cw__won h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.cw__won p { margin: .15rem 0; color: var(--cw-ink); }

.cw__solution { margin-top: 1.6rem; }
.cw__solution summary { cursor: pointer; font-weight: 600; }
.cw__solution .cw__grid { margin-top: .8rem; }
.cw__hint { margin-top: 1rem; font-size: .85rem; color: var(--cw-ink-soft); }

.cw__sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
    .cw__tools, .cw__now, .cw__status, .cw__won, .cw__hint, .cw__solution { display: none !important; }
    .cw__cell { background: #fff !important; color: #000 !important; }
    .cw__cell.is-block { background: #000 !important; }
    .cw__grid { background: #000; }
    .cw__clue { break-inside: avoid; }
}