/* Themes: Seiji (青磁, celadon, light) and Kon (紺, night indigo, dark). See "Visual design" in the spec.
   Spacing scale: 8, 16, 24, 32, 48. */
:root,
:root[data-theme="seiji"] {
  --paper: #e3ece6;
  --cell: #f3f7f4;
  --ink: #23323e;
  --muted: #55636e;
  --accent: #2e5a7a;
  --on-accent: #f3f7f4;
  --guide: #b8ccc0;
}
/* Without the inline script (no JS) fall back to the system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #1b2433;
    --cell: #222d3f;
    --ink: #e3e8f0;
    --muted: #a7b2c4;
    --accent: #e2a65a;
    --on-accent: #1b2433;
    --guide: #3a4a63;
  }
}
:root[data-theme="kon"] {
  --paper: #1b2433;
  --cell: #222d3f;
  --ink: #e3e8f0;
  --muted: #a7b2c4;
  --accent: #e2a65a;
  --on-accent: #1b2433;
  --guide: #3a4a63;
}

:root {
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --kz: 80px; /* kanji size, fixed */
  --font-kanji: "UD Digi Kyokasho N-R", "YuKyokasho", "Klee", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-kana: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-ui: system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--font-ui);
  text-align: left;
}
/* Type scale 13 / 16 / 20 / 25 / 31 */
h1 { font-size: 25px; line-height: 1.2; margin: 0 0 var(--s1); }
h2 { font-size: 20px; line-height: 1.3; margin: var(--s4) 0 var(--s1); }
@media (min-width: 600px) { h1 { font-size: 31px; } }
p, li { max-width: 70ch; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s2); }
.prose { max-width: 760px; margin: 0 auto; }
.prose h1 { margin-top: var(--s4); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--s1); top: var(--s1); background: var(--cell); padding: var(--s1); z-index: 10; }

.site-header { border-bottom: 1px solid var(--guide); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s1) var(--s3); flex-wrap: wrap; min-height: 56px; padding-top: var(--s1); padding-bottom: var(--s1); }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
nav a[aria-current] { color: var(--ink); font-weight: 700; }
.theme-toggle { font: inherit; font-size: 13px; color: var(--ink); background: transparent; border: 1px solid var(--muted); border-radius: 4px; min-height: 44px; min-width: 44px; padding: 0 var(--s1); cursor: pointer; }
.to-light, :root[data-theme="kon"] .to-dark { display: none; }
:root[data-theme="kon"] .to-light { display: inline; }
.site-footer { border-top: 1px solid var(--guide); margin-top: var(--s5); padding: var(--s3) 0; color: var(--muted); font-size: 13px; }

/* Page: heading, options, chart. Options sit above the chart below 1024px. */
.page { display: grid; gap: var(--s3); grid-template-areas: "head" "opts" "chart"; margin-top: var(--s4); }
.head { grid-area: head; }
.options { grid-area: opts; }
.output { grid-area: chart; min-width: 0; }
@media (min-width: 1024px) {
  .page { grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "opts head" "opts chart"; align-items: start; }
  .options { position: sticky; top: var(--s2); }
}
.meta { margin: 0 0 var(--s1); color: var(--muted); font-size: 13px; }
.intro { margin: 0; }
.ad-slot { min-height: 100px; margin: var(--s2) 0; } /* reserved for ads; empty in v1 */

/* Options panel */
.options { background: var(--cell); border: 1px solid var(--guide); border-radius: 4px; padding: var(--s2); display: grid; gap: var(--s2); }
.options h2 { margin: 0; }
.options label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.options fieldset { border: 1px solid var(--muted); border-radius: 4px; margin: 0; padding: var(--s1) var(--s2); display: grid; gap: 4px; }
.options legend { font-size: 13px; font-weight: 700; padding: 0 4px; }
.options .check { display: flex; gap: var(--s1); align-items: center; font-size: 16px; font-weight: 400; min-height: 44px; }
select { font: inherit; color: var(--ink); background: var(--cell); border: 1px solid var(--muted); border-radius: 4px; padding: 0 var(--s1); min-height: 44px; width: 100%; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.button { font: inherit; font-weight: 700; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 4px; min-height: 44px; padding: 0 var(--s2); cursor: pointer; }
#goto-part { display: inline-flex; align-items: center; min-height: 44px; }
.print-group { display: grid; gap: var(--s1); }
.print-group .theme-toggle { display: none; }
.warning { margin: 0; font-size: 13px; }

/* Below 1024px the controls flow into compact rows, and the print controls plus the theme switch
   stay in a sticky row at the bottom of the screen. */
@media (max-width: 1023px) {
  .options { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; gap: var(--s1) var(--s2); }
  .options h2 { display: none; }
  .options fieldset, #goto-part { grid-column: 1 / -1; }
  .options fieldset { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
  body.has-actions { padding-bottom: 168px; }
  body.has-actions .site-header .theme-toggle { display: none; }
  .print-group { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--cell); border-top: 1px solid var(--guide); padding: var(--s1) var(--s2); grid-template-columns: 1fr auto; align-items: end; }
  .print-group .theme-toggle { display: inline-flex; align-items: center; grid-column: 2; grid-row: 1; }
  .print-part { grid-column: 1; grid-row: 1; }
  .print-group .button, .warning { grid-column: 1 / -1; }
  .print-group:not(:has(.print-part)) .button { grid-column: 1; grid-row: 1; }
}

.print-title, .print-credit { display: none; }

/* Chart: always 4 kanji per row, in notebook-style cells. */
.chart ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; border-top: 1px solid var(--guide); border-left: 1px solid var(--guide); }
.chart li { max-width: none; container-type: inline-size; background: var(--cell); border-right: 1px solid var(--guide); border-bottom: 1px solid var(--guide); padding-bottom: var(--s1); text-align: center; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; break-inside: avoid; }
@media (min-width: 600px) { .chart li { font-size: 13px; } }
.chart li > span:not(.k) { display: block; padding: 0 4px; }
/* Readings are cut off with an ellipsis rather than wrapping past 2 lines (the table layout shows them in full). */
.chart li > .on, .chart li > .kun { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* The square cell with a dashed centre cross (練習帳 / 原稿用紙). */
.k { position: relative; display: grid; place-items: center; aspect-ratio: 1; color: var(--ink); font: var(--kz) / 1 var(--font-kanji); }
.chart li .k { width: 100%; font-size: min(var(--kz), 55cqw); margin-bottom: 4px; } /* about 55% of the cell, capped at 80px */
.k::before, .k::after { content: ""; position: absolute; pointer-events: none; }
.k::before { left: 0; right: 0; top: 50%; border-top: 1px dashed var(--guide); }
.k::after { top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--guide); }
.on, .kun { font-family: var(--font-kana); }
.on { color: var(--accent); }
.m, .s, .t { color: var(--muted); }
.s::after { content: " strokes"; }

/* Chart: table */
.chart table { width: 100%; border-collapse: collapse; background: var(--cell); }
.chart th, .chart td { border: 1px solid var(--guide); padding: var(--s1); text-align: left; vertical-align: middle; }
.chart thead th { background: var(--paper); font-size: 13px; position: sticky; top: 0; }
.chart tr { break-inside: avoid; }
.chart tbody th { padding: 0; width: 1%; }
.chart table .k { width: calc(var(--kz) + var(--s2)); }
.chart td[lang="ja"] { font-family: var(--font-kana); }

/* Parts of long lists */
.part-divider { max-width: none; margin: var(--s3) 0 var(--s1); font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--guide); }
.part:first-child .part-divider { margin-top: 0; }
.part.chosen .part-divider { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 700; }
.part-divider .sel { font-weight: 400; }

/* Phones: one row per kanji, kanji left (48px), details stacked on the right. */
@media (max-width: 599px) {
  .chart table, .chart tbody { display: block; background: none; }
  .chart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .chart tr { display: grid; grid-template-columns: 56px 1fr; gap: 0 var(--s1); align-content: start; padding: var(--s1); background: var(--cell); border: 1px solid var(--guide); border-top-width: 0; }
  .chart tbody th { grid-row: 1 / span 6; border: 0; }
  .chart td { display: block; grid-column: 2; border: 0; padding: 0; }
  .chart td:empty { display: none; }
  .chart td::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
  .chart table .k { width: 56px; font-size: 48px; }
}

/* Lists of links */
.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2); }
.cards li { max-width: none; }
.cards a { display: block; background: var(--cell); border: 1px solid var(--guide); padding: var(--s2); text-decoration: none; color: var(--ink); height: 100%; }
.cards a:hover, .cards a:focus-visible { border-color: var(--accent); }
.cards span { display: block; color: var(--muted); font-size: 13px; }
.preview { max-height: 520px; overflow: hidden; }

/* Print ignores the theme: black on white, guide lines light grey, no backgrounds, chart only. */
@page { @bottom-right { content: counter(page) " / " counter(pages); font: 8pt sans-serif; } }
@media print {
  :root, :root[data-theme="seiji"], :root[data-theme="kon"] {
    --paper: #fff; --cell: #fff; --ink: #000; --muted: #000; --accent: #000; --guide: #bbb;
  }
  body { font-size: 10pt; background: #fff; }
  .site-header, .site-footer, .skip, .options, .head, .ad-slot, .related { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .page { display: block; margin: 0; }
  .print-title { display: block; font-size: 14pt; font-weight: 700; margin: 0 0 6pt; }
  .print-credit { display: block; position: fixed; bottom: 0; left: 0; right: 0; max-width: none; font-size: 7pt; text-align: center; }
  .chart ul { max-width: none; }
  .chart li, .chart td { background: none; font-size: 9pt; }
  .part:not(.print) { display: none; }
  .part-divider { display: none; }
  .chart table { background: none; }
  .chart thead { display: table-header-group; }
  .chart thead th { position: static; background: none; }
}