/* The Morse code chart (Morse code spec D14), shared by the translator and the kids decoder.
   Functional layout before the design pass; existing tokens only. Codes are drawn with · and −,
   spaced so a dot and a dash are told apart at a glance.

   Print: "Print chart" sets html[data-print="chart"] (/js/morse/print-chart.js), and only the chart is
   printed: letters and numbers on one page, A4 or US Letter, black on white, large type, the credit
   in small print. Printing the page any other way prints it as it is. */

.morse-chart { margin-block: var(--s5); }
.morse-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.morse-chart__sub { margin-top: var(--s4); }
.morse-chart__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: var(--s2); /* two columns at 360px; the longest code fits */
  margin: var(--s2) 0 0; padding: 0;
}
.morse-chart__cell {
  position: relative; display: flex; align-items: baseline; gap: var(--s3); min-width: 0;
  padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.morse-chart__ch { font-weight: 800; font-size: 20px; font-stretch: 100%; min-width: 1ch; }
.morse-chart__code { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .14em; line-height: 1; white-space: nowrap; }
.morse-chart__credit { display: none; }

@media print {
  html[data-print="chart"] :is(body, body *):not(:has([data-morse-chart])):not([data-morse-chart], [data-morse-chart] *) { display: none !important; }
  html[data-print="chart"] :is(body, body *):has([data-morse-chart]) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; max-width: none !important; }
  html[data-print="chart"] body { background: #fff; color: #000; }
  html[data-print="chart"] .morse-chart { margin: 0; color: #000; }
  html[data-print="chart"] .morse-chart__print, html[data-print="chart"] .morse-chart--screen { display: none !important; }
  html[data-print="chart"] .morse-chart__head h2 { font-size: 22pt; }
  html[data-print="chart"] .morse-chart__sub { font-size: 13pt; margin: 8pt 0 0; }
  html[data-print="chart"] .morse-chart__grid { grid-template-columns: repeat(4, 1fr); gap: 4pt 8pt; margin-top: 4pt; }
  html[data-print="chart"] .morse-chart__cell { padding: 4pt 8pt; border: 1pt solid #000; border-radius: 4pt; background: #fff; break-inside: avoid; }
  html[data-print="chart"] .morse-chart__ch { font-size: 24pt; color: #000; }
  html[data-print="chart"] .morse-chart__code { font-size: 24pt; color: #000; }
  html[data-print="chart"] .morse-chart__credit { display: block; margin-top: 8pt; font-size: 8pt; }
}
/* Fits both: A4 is 210 x 297 mm, US Letter 216 x 279 mm; the chart is laid out for the shorter page. */
@page { margin: 12mm; }