/* ============================================================================
   Bingo Card Generator — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — sky blue, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #61b4ef  8.4:1 on --bg   7.7:1 on --surface   8.7:1 on --bg-sunk
     light #085b96  6.8:1 on --bg   7.1:1 on --surface   6.3:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #61b4ef; --accent-dim: rgba(97, 180, 239, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #085b96; --accent-dim: rgba(8, 91, 150, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { stroke: var(--on-accent); }
.brand svg .mark-dot { fill: var(--on-accent); }

/* base has no visually-hidden helper; the table captions need one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Control panel
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 1.5rem;
}
.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}

.fields {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-bottom: 1rem;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}
.check-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.check-label input:disabled { cursor: not-allowed; }

.free-field, .words-field { margin-bottom: 1rem; }

.hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-dim);
  margin-top: 0.35rem;
}

#words-input {
  min-height: 9rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  resize: vertical;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }

.form-err {
  display: block;
  min-height: 1.2em;
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--err);
}

.status-note {
  display: block;
  font-size: 0.875rem;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.25rem;
}

.empty-note {
  font-size: 0.9375rem;
  color: var(--text-dim);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}

/* ============================================================================
   Generated cards
   ========================================================================= */

.cards-output {
  margin-bottom: 2.5rem;
}

.cards-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.card-sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.card-title {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.15rem;
  color: var(--text);
}
.card-subtitle {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-faint);
  margin: 0 0 0.75rem;
}

.card-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.card-table th,
.card-table td {
  border: 1px solid var(--line-strong);
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-family: var(--mono);
}
.card-table th {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.4rem 0.2rem;
  letter-spacing: 0.04em;
}
.card-table td {
  height: 2.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.card-table.mode-words td {
  height: auto;
  min-height: 3.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.25rem;
  line-height: 1.25;
}
.card-table td.free-cell {
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.card-table td.blank-cell { background: var(--bg-sunk); }

.card-toolbar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

/* ============================================================================
   Print — the primary artifact. One card per page, black on white,
   everything else hidden regardless of screen theme.
   ========================================================================= */

@media print {
  .site-header, .site-footer, .skip-link, .tool, .section, .noscript,
  h1, .lede, .card-toolbar {
    display: none !important;
  }

  body, .wrap, main { background: #fff !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  main { padding: 0 !important; }

  .cards-output { margin: 0; }
  .cards-grid { display: block; }

  .card-sheet {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.5in !important;
    page-break-after: always;
    break-after: page;
  }
  .card-sheet:last-child { page-break-after: auto; break-after: auto; }

  .card-title, .card-subtitle { color: #000 !important; }

  .card-table th, .card-table td {
    border: 1.5px solid #000 !important;
    color: #000 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .card-table th { background: #e6e6e6 !important; }
  .card-table td.free-cell { background: #e6e6e6 !important; }
  .card-table td { height: 3.4rem; font-size: 1.1rem; }
  .card-table.mode-words td { height: auto; min-height: 3.6rem; font-size: 0.95rem; }
}

/* ============================================================================
   Article furniture (shared look with other tools)
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}