/* The "how to structure a coding answer" hint sheet (17 October 2026).
   Light by default so it prints; the host page may set --ss-* to theme it. */
.ss { --ss-ink: #14181f; --ss-muted: #4b5563; --ss-line: #c9d1dd; --ss-head: #1e3a8a; --ss-code-bg: #f3f6fb; --ss-accent: #b45309;
  color: var(--ss-ink); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.ss-title { margin: 0 0 4px; font-size: 1.35rem; color: var(--ss-head); }
.ss-intro { margin: 0 0 8px; }
.ss-h { margin: 12px 0 4px; font-size: 1rem; color: var(--ss-head); }
.ss-steps { margin: 0 0 6px; padding-left: 1.4em; }
.ss-steps li { margin: 1px 0; }
.ss table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ss th, .ss td { border: 1px solid var(--ss-line); padding: 3px 6px; vertical-align: top; text-align: left; }
.ss th { background: var(--ss-code-bg); font-size: .9em; }
.ss-clues th:nth-child(1), .ss-clues td:nth-child(1) { width: 22%; }
.ss-clues th:nth-child(2), .ss-clues td:nth-child(2) { width: 24%; }
.ss-skel th:nth-child(1), .ss-skel td:nth-child(1) { width: 14%; }
.ss-clue { font-style: italic; }
.ss-what, .ss-step { font-weight: 700; }
.ss-code { margin: 0; padding: 0; background: none; white-space: pre-wrap; word-break: break-word;
  font: 12px/1.35 ui-monospace, Consolas, "Cascadia Mono", monospace; color: var(--ss-ink); }
.ss-note { margin: 4px 0 0; color: var(--ss-muted); font-style: italic; }
.ss-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
@media (max-width: 640px) { .ss-two { grid-template-columns: 1fr; } .ss table, .ss tbody, .ss tr, .ss td, .ss th { font-size: 12px; } }
.ss-box { border: 1px solid var(--ss-line); border-radius: 8px; padding: 2px 10px 6px; }
.ss-box ul { margin: 0; padding-left: 1.2em; }
.ss-traps { border-color: var(--ss-accent); }
.ss-traps code { font: 12px ui-monospace, Consolas, monospace; background: var(--ss-code-bg); padding: 0 3px; border-radius: 3px; }
.ss-foot { margin: 8px 0 0; color: var(--ss-muted); font-size: .85rem; }
/* Narrow phones: the code columns get room by stacking the table rows. */
@media (max-width: 520px) {
  .ss-clues tr:first-child, .ss-skel tr:first-child { display: none; }
  .ss-clues td, .ss-skel td { display: block; width: auto !important; border-top: 0; }
  .ss-clues tr, .ss-skel tr { display: block; border-top: 1px solid var(--ss-line); margin-bottom: 4px; }
}
/* One A4 page when printed. */
@media print {
  @page { size: A4; margin: 10mm; }
  .ss { font-size: 9.6px; line-height: 1.3; }
  .ss-title { font-size: 15px; }
  .ss-code { font-size: 8.4px; line-height: 1.25; }
  .ss-h { margin: 5px 0 2px; font-size: 11px; }
  .ss th, .ss td { padding: 2px 4px; }
  .ss-steps li, .ss-box li { margin: 0; }
  /* Year 11 has the full clue table: printed a little smaller to stay on one page. */
  .ss-y11 { zoom: .86; }
  .ss-two { break-inside: avoid; }
}

/* Code exactly as typed: no ligatures. */
.ss-code, .ss code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }