/* ────────────────────────────────────────────────────────────────
   TOOL — Arabic Word Search Generator

   The grid inherits .ac-wsgrid from sheets.css; this adds the sizing,
   the RTL heading and the answer highlight, and keeps the controls
   off the printed page.

   Cells are square and sized in em so the whole puzzle scales with
   one font-size change when the grid gets bigger.

   Version log
   1.0.0  2026-08-11  Initial.
   ──────────────────────────────────────────────────────────────── */

.at-ws__layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 26px;
    align-items: start;
}

@media ( max-width: 900px ) {
    .at-ws__layout { grid-template-columns: 1fr; }
}

.at-ws__in {
    width: 100%;
    font-family: 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.9;
}

.at-ws__dirs {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.at-ws__sheet { padding: 18px; }

.at-ws__title {
    margin: 0 0 16px;
    text-align: center;
    font-family: 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.5rem;
}

.at-ws__grid {
    margin: 0 auto;
    border-collapse: collapse;
    font-family: 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.15rem;
}

.at-ws__grid td {
    width: 1.9em;
    height: 1.9em;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid rgba( 0, 0, 0, .18 );
    line-height: 1;
}

.at-ws__grid td.is-answer {
    background: rgba( 79, 70, 229, .16 ) !important;
    font-weight: 700;
}

.at-ws__bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-family: 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.1rem;
}

.at-ws__bank > li { margin: 0 !important; }
.at-ws__bank > li::marker { content: none !important; }

@media print {
    .at-ws__layout { display: block; }
    .at-ws__side, .ac-btn-row { display: none !important; }
    .at-ws__grid td.is-answer { background: rgba( 0, 0, 0, .13 ) !important; }
}