/* Crossword Puzzle — frontend styles. Scoped under .cwp-wrap so the
   plugin can't leak styles into the host theme. */

.cwp-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1b1814;
    /* position:relative so the hover tooltip can position itself
       relative to the wrap regardless of where the puzzle sits on the
       page. */
    position: relative;
    /* Visible frame so the puzzle has presence on any host page,
       especially over plain white where the white cells previously
       bled into the background. Parchment tint matches the warm tone
       of the cells and clue lists. */
    border: 2px solid #4a3a1f;
    border-radius: 6px;
    padding: 18px 20px 20px;
    background: #fbf6e9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    /* Containment so a wide grid never blows past the host page's
       content column (e.g. into the WP sidebar). Grid scrolls
       horizontally on its own if it can't fit. */
    max-width: 100%;
    overflow: hidden;
    --cwp-cell-size: 36px;
    --cwp-border: #555;
    --cwp-block: #1b1814;
    --cwp-paper: #fff;
    --cwp-focus: #ffe98a;
    --cwp-word:  #fff3c0;
    --cwp-error: #f0b8b8;
    --cwp-correct: #c5e3c5;
}
.cwp-wrap * { box-sizing: border-box; }

.cwp-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    margin: 0 0 14px;
}

.cwp-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cwp-grid-col {
    flex: 0 0 auto;
    min-width: 0;             /* let the grid scroller actually constrain */
    max-width: 100%;
    overflow-x: auto;         /* horizontal scrollbar appears if grid > container */
}
.cwp-clues-col {
    flex: 1 1 320px;
    min-width: 260px;
    font-size: 14px;
}

.cwp-grid {
    border-collapse: collapse;
    background: var(--cwp-paper);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.cwp-cell {
    width: var(--cwp-cell-size);
    height: var(--cwp-cell-size);
    padding: 0;
    border: 1px solid var(--cwp-border);
    position: relative;
    vertical-align: middle;
    text-align: center;
}
.cwp-cell-block {
    background: var(--cwp-block);
    border-color: var(--cwp-block);
}
.cwp-cell-letter {
    background: var(--cwp-paper);
}
.cwp-cell-num {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 9px;
    line-height: 1;
    color: #666;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}
/* Cell inputs.
 *
 * EVERY visual property gets !important because WP themes routinely
 * have aggressive global input rules — padding, min-height, display,
 * line-height, color, background, font-size, even -webkit-text-fill-color
 * — that win the cascade otherwise. Two failure modes we've seen on
 * the host theme:
 *   1. Theme min-height / padding pushed the typed letter BELOW the
 *      cell's visible area, so it looked like nothing rendered.
 *   2. Theme color (or -webkit-text-fill-color) made the letter
 *      transparent / white against the white cell.
 * The values themselves are picked for a clean render: clean sans-serif
 * at a moderate weight, line-height matched to cell size for natural
 * vertical centering (no padding arithmetic — that was distorting the
 * glyphs in earlier rounds), no border/shadow/appearance chrome.
 */
.cwp-input {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    /* line-height equal to the cell size = the line box IS the cell.
       That vertically centers the glyph without padding math (padding
       arithmetic distorted the rendering on certain themes). */
    line-height: var(--cwp-cell-size) !important;
    letter-spacing: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: transparent !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    opacity: 1 !important;
    visibility: visible !important;
    outline: none !important;
    caret-color: transparent !important;
}
.cwp-input:focus,
.cwp-input:focus-visible,
.cwp-input:hover {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    padding: 0 !important;
    line-height: var(--cwp-cell-size) !important;
}
.cwp-input::-webkit-inner-spin-button,
.cwp-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
/* Cell states. JS toggles these classes on the parent <td>. */
.cwp-cell-in-word { background: var(--cwp-word); }
.cwp-cell-focus   { background: var(--cwp-focus); }
.cwp-cell-error   { background: var(--cwp-error); }
.cwp-cell-correct { background: var(--cwp-correct); }

.cwp-controls {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cwp-btn {
    appearance: none;
    border: 1px solid #555;
    background: #fff;
    color: #1b1814;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
    font-family: inherit;
}
.cwp-btn:hover { background: #f3ead7; }
.cwp-btn:active { background: #e8dcbe; }
.cwp-autocheck {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4a3a1f;
    margin-left: 4px;
    cursor: pointer;
    user-select: none;
}
.cwp-autocheck input { margin: 0; }

.cwp-status {
    font-size: 13px;
    color: #4a3a1f;
    margin-left: 6px;
}
.cwp-status.cwp-status-ok  { color: #2d7a2d; font-weight: 600; }
.cwp-status.cwp-status-err { color: #8b1e1e; }

/* Save-state badge (only meaningful for logged-in users — empty
   otherwise). Sits to the right of the play-state status. */
.cwp-save-status {
    font-size: 12px;
    color: #7b5e3c;
    margin-left: auto;          /* push to the far right of the controls row */
    padding: 2px 8px;
    border-radius: 3px;
    min-height: 1em;
}
.cwp-save-status.cwp-save-pending { color: #7b5e3c; }
.cwp-save-status.cwp-save-ok      { color: #2d7a2d; background: #e7f3e7; }
.cwp-save-status.cwp-save-err     { color: #8b1e1e; background: #fdecec; }

.cwp-clue-section h4 {
    margin: 0 0 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4a3a1f;
    border-bottom: 1px solid #d0c9b8;
    padding-bottom: 4px;
}
.cwp-clue-section + .cwp-clue-section { margin-top: 18px; }
.cwp-clue-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cwp-clue-list li {
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.45;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 6px;
}
.cwp-clue-list li:hover { background: #f7efd5; }
.cwp-clue-list li.cwp-clue-active {
    background: var(--cwp-focus);
    font-weight: 600;
}
.cwp-clue-num { color: #7b5e3c; font-weight: 600; }
.cwp-clue-len { color: #888; font-size: 12px; align-self: center; }

.cwp-error {
    padding: 14px;
    background: #fdecec;
    border: 1px solid #f0b8b8;
    border-radius: 4px;
    color: #8b1e1e;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Hover tooltip showing the Across/Down clue(s) for the cell the
   mouse is over. JS toggles .cwp-tooltip-visible to show/hide and
   sets inline top/left to position it. pointer-events:none so
   moving the mouse over the tooltip itself doesn't re-trigger
   mouseenter chains. */
.cwp-tooltip {
    position: absolute;
    z-index: 200;
    background: #1b1814;
    color: #f3ead7;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
    max-width: 280px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.1s ease-out;
    display: none;
}
.cwp-tooltip.cwp-tooltip-visible {
    display: block;
    opacity: 1;
}
.cwp-tooltip-row + .cwp-tooltip-row { margin-top: 4px; padding-top: 4px; border-top: 1px solid #3a2f1f; }
.cwp-tooltip-label { color: #ffe98a; font-weight: 600; margin-right: 4px; }

/* Compact for narrower screens — shrink cells and stack the layout. */
@media (max-width: 700px) {
    .cwp-wrap { --cwp-cell-size: 30px; }
    .cwp-input { font-size: 15px; padding-top: 6px; }
    .cwp-cell-num { font-size: 8px; }
    .cwp-layout { flex-direction: column; }
}