/* Crossword (quiz/crossword.js). Plain black-and-white grid, yellow for the
   square, blue for the word: the NYT app's working colours, none of its
   branding. Sized so a Mini's grid, clue bar and keyboard fit a phone. */
.cw-pick, .cw-play { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.cw-h { margin: 12px 0 2px; font-size: 15px; color: var(--grey); }
.cw-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.cw-segb { flex: 1; min-width: 0; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--white); font: inherit; font-weight: 500; }
.cw-segb[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: transparent; }
.cw-list { display: flex; flex-direction: column; gap: 6px; }
.cw-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--white); font: inherit; }
.cw-card small { color: var(--grey); display: block; }
.cw-card-t { display: block; font-weight: 500; }
.cw-stat { white-space: nowrap; }
.cw-empty, .cw-msg { color: var(--grey); margin: 4px 0; }
.cw-go { margin-top: 14px; padding: 14px; }

.cw-top { display: flex; justify-content: space-between; align-items: center; }
.cw-back { border: 0; background: none; padding: 6px 0; }
.cw-time { font-variant-numeric: tabular-nums; color: var(--grey); }
.cw-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); border: 2px solid #1d1d1b; aspect-ratio: 1; width: 100%; max-width: min(100%, 62vh); align-self: center; background: #1d1d1b; gap: 1px; }
.cw-sq { position: relative; background: #fff; color: #1d1d1b; display: flex; align-items: center; justify-content: center; cursor: pointer; container-type: inline-size; }
.cw-sq.cw-k { background: #1d1d1b; cursor: default; }
.cw-sq.cw-w { background: #a7d8ff; }
.cw-sq.cw-s { background: #ffda00; }
.cw-sq sup { position: absolute; top: 1px; left: 2px; font-size: max(8px, 26cqw); line-height: 1; }
.cw-l { font-size: 60cqw; font-weight: 600; line-height: 1; }
.cw-sq.cw-bad .cw-l { color: #c4302b; }
.cw-sq.cw-bad::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 48%, #c4302b 49%, #c4302b 51%, transparent 52%); }
.cw-sq.cw-shown .cw-l { color: #2b6cb0; }
.cw-solved .cw-sq.cw-w { background: #fff; }
.cw-done { text-align: center; font-weight: 600; margin: 6px 0; }
.cw-clue { display: flex; align-items: stretch; gap: 4px; background: #a7d8ff; color: #1d1d1b; border-radius: 8px; margin-top: 6px; }
.cw-clue .btn-s { border: 0; background: none; color: inherit; padding: 0 12px; font-size: 20px; }
.cw-clue-t { flex: 1; text-transform: none; letter-spacing: normal; text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: 12px 4px; min-height: 48px; }
.cw-tools { display: flex; gap: 6px; }
.cw-tools .btn-s { flex: 1; }
.cw-tools .btn-s[aria-pressed="true"], .cw-tools .btn-s[aria-expanded="true"] { background: var(--gold); color: var(--ink); }
.cw-menu { display: flex; gap: 6px; }
.cw-menu .btn-s { flex: 1; }
.cw-kb { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.cw-kr { display: flex; gap: 4px; justify-content: center; }
.cw-kr .btn-s { flex: 1; max-width: 44px; min-width: 0; padding: 13px 0; border-radius: 5px; border: 0; background: #d3d6da; color: #1d1d1b; font-weight: 600; }
.cw-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cw-li { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 4px; font-size: 14px; text-transform: none; letter-spacing: normal; color: var(--white); }
.cw-li.on { background: #a7d8ff; color: #1d1d1b; border-radius: 6px; }
@media (min-width: 800px) {
  .cw-play { max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; column-gap: 20px; }
  .cw-play > * { grid-column: 1; }
  .cw-play > .cw-lists { grid-column: 2; grid-row: 1 / span 6; grid-template-columns: 1fr; }
}