/* Daily Word Ladder (RT-FUN-111).
 *
 * Contrast rule (docs/contrast-conventions.md): the puzzle header is the one
 * navy --rt-result-bg surface — values use --rt-result-ink, labels use
 * --rt-result-muted, and neither token appears on a light surface. The ladder
 * itself is a light surface and uses --rt-ink* throughout.
 *
 * CLS rule (docs/cls-conventions.md): the ladder area and the header both
 * reserve their height before the script fills them, so the first paint of the
 * puzzle moves nothing. Rungs are added by the player, and an input-adjacent
 * shift is not a layout shift that counts.
 *
 * NO COLOURED TILE GRID, deliberately. That look is New York Times trade dress
 * for a different game, and this is Carroll's Doublets rather than a
 * guess-the-word. Rungs are ordinary type on paper, not squares.
 */

/* ---------- header (the one navy surface) ---------- */

.dwl-head {
    display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: baseline;
    padding: 16px 18px; margin-bottom: 16px;
    background: var(--rt-result-bg); border-radius: 10px;
    min-height: 92px;                     /* reserved before the first draw */
}
.dwl-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dwl-label {
    font-family: var(--rt-font-mono); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--rt-result-muted);
}
.dwl-value {
    font-family: var(--rt-font-mono); font-size: 22px; font-weight: 700;
    letter-spacing: .08em; color: var(--rt-result-ink);
}
.dwl-value--pair { font-size: 26px; }
.dwl-note { flex-basis: 100%; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--rt-result-muted); }

/* ---------- the ladder ---------- */

.dwl-ladder-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
.dwl-ladder {
    list-style: none; margin: 0 0 16px; padding: 16px;
    background: var(--rt-surface); border: 1px solid var(--rt-hairline); border-radius: 8px;
    /* Reserved before the first draw, and sized for the WORST case rather
       than the empty one: a returning player whose solved six-rung ladder is
       restored from localStorage renders ~336px here, and reserving only the
       three rows of the fresh state would let that restore push the page
       down. Rungs the player adds during a session are input-adjacent and do
       not count as layout shift; a restore is not.

       This was NOT verified with a layout-shift PerformanceObserver. That was
       attempted and the attempt is worth recording: the observer reported
       CLS 0, and then reported 0 again for a 400px spacer inserted on
       purpose — because the browser pane is document.hidden, renders no
       frames, and therefore records no layout shifts at all. A measurement
       that cannot see a deliberate shift proves nothing about an accidental
       one. The numbers above come from getBoundingClientRect instead. */
    min-height: 340px;
    min-width: 0;
}
.dwl-rung {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 0; min-width: 0;
}
.dwl-rung-num {
    flex: 0 0 auto; min-width: 26px;
    font-family: var(--rt-font-mono); font-size: 12px; font-weight: 700; color: var(--rt-ink-muted);
}
.dwl-rung-word {
    font-family: var(--rt-font-mono); font-size: 24px; font-weight: 700;
    letter-spacing: .18em; color: var(--rt-ink); white-space: nowrap;
}
.dwl-rung-word em { font-style: normal; color: var(--rt-accent); }
.dwl-rung-tag { font-size: 12.5px; color: var(--rt-ink-soft); }
.dwl-rung--end .dwl-rung-word { color: var(--rt-ink); }
.dwl-rung--gap { padding: 2px 0 2px 38px; color: var(--rt-ink-muted); font-size: 15px; line-height: 1; }

/* ---------- entry ---------- */

.dwl-entry { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.dwl-input {
    width: 170px; padding: 11px 14px;
    font-family: var(--rt-font-mono); font-size: 22px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    border-radius: 8px; border: 2px solid var(--rt-hairline);
    background: var(--rt-surface); color: var(--rt-ink);
}
.dwl-input:focus { outline: none; border-color: var(--rt-accent); }
.dwl-btn {
    padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--rt-hairline); background: var(--rt-surface); color: var(--rt-ink);
}
.dwl-btn:hover { border-color: var(--rt-accent); color: var(--rt-accent); }
.dwl-btn--primary { background: var(--rt-accent); border-color: var(--rt-accent); color: #fff; }
.dwl-btn--primary:hover { color: #fff; filter: brightness(1.06); }

.dwl-msg {
    min-height: 24px; margin: 0 0 14px;
    font-size: 14.5px; line-height: 1.5; color: var(--rt-ink-soft);
}
.dwl-msg--bad { font-weight: 600; }

/* ---------- result ---------- */

.dwl-result {
    display: none; padding: 14px 16px; margin-bottom: 14px;
    border: 1px solid var(--rt-hairline); border-radius: 8px; background: var(--rt-surface-2);
}
.dwl-result.is-on { display: block; }
.dwl-result h3 { margin: 0 0 6px; font-size: 17px; color: var(--rt-ink); }
.dwl-result p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--rt-ink-soft); }
.dwl-share {
    width: 100%; min-height: 66px; padding: 10px 12px; resize: vertical;
    font-family: var(--rt-font-mono); font-size: 13px; line-height: 1.5;
    border-radius: 6px; border: 1px solid var(--rt-hairline);
    background: var(--rt-surface); color: var(--rt-ink);
}

/* ---------- narrow screens ---------- */

@media (max-width: 560px) {
    .dwl-value--pair { font-size: 21px; }
    .dwl-rung-word { font-size: 20px; letter-spacing: .14em; }
    .dwl-input { width: 140px; font-size: 19px; }
    .dwl-ladder { padding: 12px; }
}