/* lists/lists.css — the code sheet.
 *
 * Two states matter and only one of them is a web page. On screen this is a grid of cards. On
 * paper it is the thing a teacher actually wanted: a code per list, big enough to scan from a
 * desk, with the list name under it and none of the site around it.
 */

.code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.code-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  /* Break-inside, so a code and its name never land on two sheets of paper. */
  break-inside: avoid;
}

.code-qr {
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-qr svg { width: 100%; height: auto; display: block; }

.code-qr--none {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.code-qr--none p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.code-card h3 {
  margin: var(--space-2) 0 0;
  font-size: var(--text-lg);
}

.code-count {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.code-preview {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}
.code-actions .btn {
  padding: 0.45rem 0.9rem;
  font-size: var(--text-sm);
}

.code-hint {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* The file chooser is the whole label, so the entire panel is a drop target and a click
   target. A 40-pixel "Browse" link is the wrong size for somebody holding thirty files. */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 11rem;
  padding: var(--space-8);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.file-drop:hover,
.file-drop:focus-within { border-color: var(--color-primary); }
.file-drop.is-over {
  border-color: var(--color-primary);
  background: var(--color-surface-offset);
}
.file-drop strong { font-size: var(--text-lg); }
.file-drop span { font-size: var(--text-sm); color: var(--color-text-muted); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media print {
  /* Everything that is not a code comes off the page. A teacher printing this wants the codes,
     not the navigation, and certainly not a button they cannot press on paper. */
  .no-print,
  .header,
  .footer,
  .help-root,
  .code-actions,
  .code-hint { display: none !important; }

  .section { padding-block: 0; }
  .section-head { margin-bottom: 0.5cm; }

  .code-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1cm;
  }
  .code-card {
    border: 1px solid #ccc;
    padding: 0.6cm;
  }
  .code-preview { display: none; }
}

/* The hub: one card per published set. */
.set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.set-card {
  display: block;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.set-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.set-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.set-card p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* The word table under a code. Scrolls in its own box so a long definition never widens
   the card, and never the page. */
.code-words { width: 100%; margin-top: var(--space-3); text-align: left; }
.code-words summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}
.code-words table {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-size: var(--text-xs);
  display: block;
  max-height: 18rem;
  overflow: auto;
}
.code-words th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  text-align: left;
  padding: 0.35rem 0.5rem 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 600;
}
.code-words td {
  padding: 0.3rem 0.5rem 0.3rem 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.code-words td:nth-child(1) { font-weight: 600; white-space: nowrap; }
.code-words td:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-primary); white-space: nowrap; }
.code-words td:nth-child(3) { color: var(--color-text-muted); }

.code-carries {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------- the words, in text

   Published as readable text as well as inside the codes. A crawler reading one of these pages
   used to see about seventy words of boilerplate while five hundred sat in a JSON blob, so a
   teacher searching for exactly what the page contains could never find it.

   Collapsed by default because nobody wants six hundred words unrolled at them, and hidden from
   print because the sheet is meant to print as codes. */

.word-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
}

.word-list > summary {
  cursor: pointer;
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
}

.word-list > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.word-list > summary span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.word-list[open] > summary {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Its own scroller, so a long definition never pushes the page sideways on a phone. */
.word-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
}

.word-list th,
.word-list td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}

.word-list th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.word-list tr:last-child td { border-bottom: 0; }

.word-list td.w { font-weight: 600; white-space: nowrap; }

/* The respelling is notation rather than prose, and reads wrong in a proportional face. */
.word-list td.s {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--color-primary);
  white-space: nowrap;
}