/* Standalone reading pages share the existing Japanese app's colour tokens.
   No font service, motion, or practice-app CSS dependency is needed. */
:root {
  color-scheme: dark;
  --ja-bg: #101820;
  --ja-surface: #16212b;
  --ja-line: #304653;
  --ja-text: #edf4f8;
  --ja-muted: #b0c1cb;
  --ja-accent: #8be3c2;
  --ja-focus: #b0f4dc;
  --ja-control: #1e303d;
  --ja-control-hover: #2a4250;
  --ja-control-line: #718795;
  --reading-width: 72ch;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic", Meiryo, sans-serif;
  font-size: 100%;
  line-height: 1.75;
  background: var(--ja-bg);
  color: var(--ja-text);
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--ja-accent); text-underline-offset: .2em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible { outline: 3px solid var(--ja-focus); outline-offset: 4px; border-radius: 2px; }
button:focus-visible { outline: 3px solid var(--ja-focus); outline-offset: 4px; }
main:focus { outline: none; }
img { max-inline-size: 100%; block-size: auto; }
p, li, dd { overflow-wrap: anywhere; }
p { margin: 0 0 1.2rem; }
h1, h2, h3 { color: var(--ja-text); line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; margin: 0 0 1.25rem; letter-spacing: -.025em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 0 0 1.2rem; letter-spacing: -.012em; }
h3 { font-size: 1.125rem; }
section { scroll-margin-block-start: 1.5rem; }
[lang="ja"] { font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif; }

.reading-width { inline-size: min(var(--reading-width), calc(100% - 2.5rem)); margin-inline: auto; }
.site-header { border-block-end: 1px solid var(--ja-line); }
.header-inner, .footer-inner {
  inline-size: min(64rem, calc(100% - 2.5rem));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: .9rem;
}
.brand { display: inline-flex; align-items: center; gap: .75rem; min-block-size: 44px; color: var(--ja-text); text-decoration: none; line-height: 1.4; }
.brand img { flex: 0 0 36px; inline-size: 36px; block-size: 36px; }
.brand span { display: block; }
.brand strong { display: block; font-weight: 650; }
.header-nav, .site-footer nav, .reading-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.header-nav a, .site-footer nav a, .reading-button {
  display: inline-flex; justify-content: center; align-items: center; gap: .6rem;
  min-block-size: 48px; padding: .65rem 1rem; border: 1px solid var(--ja-control-line);
  border-radius: .8rem; background: var(--ja-control); color: var(--ja-text);
  font: inherit; font-size: .9375rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; text-align: center; overflow-wrap: anywhere;
  transition: background-color 140ms ease, border-color 140ms ease;
}
:is(.header-nav a, .site-footer nav a, .reading-button):hover { background: var(--ja-control-hover); border-color: var(--ja-accent); }
:is(.header-nav a, .site-footer nav a, .reading-button):active { background: var(--ja-bg); }
.header-nav [aria-current="page"] { background: transparent; border-color: var(--ja-accent); color: var(--ja-accent); }
.header-nav .reading-button-primary, .reading-button-primary { background: var(--ja-accent); border-color: var(--ja-accent); color: var(--ja-bg); }
.header-nav .reading-button-primary:hover, .reading-button-primary:hover { background: var(--ja-focus); color: var(--ja-bg); }
.reading-actions { margin-block: 1.25rem; }
.reading-actions-note { color: var(--ja-muted); font-size: .875rem; }
.reading-return { border-block-start: 1px solid var(--ja-line); padding-block: 1.5rem; }
.skip-link { position: absolute; z-index: 10; inset-inline-start: 1rem; inset-block-start: -6rem; padding: .65rem 1rem; background: var(--ja-surface); border: 1px solid var(--ja-focus); }
.skip-link:focus { inset-block-start: 1rem; }
.article-heading { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.guide-title { display:grid; grid-template-columns:minmax(0,1fr) 128px; align-items:center; gap:1rem; margin-block-end:1.25rem; }
.guide-title h1 { margin:0; }
.guide-mascot { inline-size:128px; block-size:128px; object-fit:contain; pointer-events:none; user-select:none; }
@media(max-width:42rem) { .guide-title { grid-template-columns:minmax(0,1fr) 72px; gap:.75rem; } .guide-mascot { inline-size:72px; block-size:72px; } }
@media print { .guide-mascot { display:none; } .guide-title { grid-template-columns:1fr; } }
.intro { font-size: 1.125rem; line-height: 1.7; }
.article-meta { color: var(--ja-muted); font-size: .875rem; }
.contents { border-block: 1px solid var(--ja-line); padding-block: 1.5rem; margin-block-end: 3rem; }
.contents h2 { font-size: 1.125rem; margin-block-end: .75rem; }
.contents ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; counter-reset: section; }
.contents li { counter-increment: section; min-inline-size: 0; }
.contents a { display: flex; gap: .75rem; align-items: center; min-block-size: 64px; block-size: 100%; padding: .8rem; border: 1px solid var(--ja-control-line); border-radius: .8rem; background: var(--ja-surface); color: var(--ja-text); text-decoration: none; font-weight: 600; line-height: 1.4; }
.contents a::before { content: counter(section, decimal-leading-zero); flex: 0 0 2ch; white-space: nowrap; color: var(--ja-accent); font-size: .8rem; font-variant-numeric: tabular-nums; }
.contents a::after { content: "→"; margin-inline-start: auto; color: var(--ja-accent); }
.contents a:hover, .contents a:active { background: var(--ja-control-hover); border-color: var(--ja-accent); }
@media (max-width: 36rem) {
  .contents ul { grid-template-columns: 1fr; }
  .header-nav, .site-footer nav { inline-size: 100%; }
  .header-nav a, .site-footer nav a { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .header-nav a, .site-footer nav a, .reading-button { transition: none; }
}
article > section { margin-block-end: 3rem; }
.example-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem; margin-block: 1.75rem; }
.example-table caption { text-align: start; color: var(--ja-muted); padding-block-end: .75rem; }
.example-table th, .example-table td { padding: .85rem .65rem; border-block-end: 1px solid var(--ja-line); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.example-table thead { background: var(--ja-surface); }
.example-table th { font-weight: 650; }
.example-table th:first-child { inline-size: 36%; }
.example-table tbody th [lang="ja"] { font-size: 1.05rem; }
.reading { display: block; font-size: .9rem; font-weight: 400; color: var(--ja-muted); }
.worked-example { background: var(--ja-surface); border-inline-start: 3px solid var(--ja-accent); padding: 1.25rem 1.5rem; margin-block: 1.75rem; }
.example-japanese { font-size: 2rem; margin-block-end: 1rem; }
.worked-example dl { margin: 0; }
.worked-example dl > div { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 1fr); gap: .5rem 1rem; padding-block: .2rem; }
.worked-example dt { color: var(--ja-muted); }
dd { margin: 0; }
.routine { padding-inline-start: 1.5rem; margin-block: 1.5rem; }
.routine li { padding-inline-start: .35rem; margin-block-end: 1.15rem; }
.routine li::marker { color: var(--ja-accent); font-weight: 700; }
.mode-guide { margin-block: 1.75rem; }
.mode-guide > div { margin-block-end: 1.25rem; }
.mode-guide dt { font-weight: 700; margin-block-end: .25rem; }
.editorial-note { border-block-start: 1px solid var(--ja-line); margin-block-start: 1.75rem; padding-block-start: 1.25rem; color: var(--ja-muted); font-size: .9rem; }

/* Reserve the slot before any asynchronous content. Keep all footer controls
   outside this region so a refused, slow, or empty ad cannot move them upward. */
.study-ad-slot {
  inline-size: min(728px, calc(100% - 2rem));
  min-block-size: 180px;
  margin: 3rem auto;
  padding-block: .75rem;
  text-align: center;
}
.ad-label { color: var(--ja-muted); font-size: .75rem; line-height: 1.5; margin: 0 0 .75rem; }
.site-footer { border-block-start: 1px solid var(--ja-line); padding-block: 1rem max(1rem, env(safe-area-inset-bottom)); }
.site-footer p { color: var(--ja-muted); margin: 0; font-size: .9rem; }

@media (max-width: 400px) {
  .header-inner { align-items: flex-start; gap: .5rem; }
  .header-nav { inline-size: 100%; }
  .example-table { font-size: .85rem; }
  .example-table th, .example-table td { padding: .65rem .35rem; }
  .example-table tbody th [lang="ja"] { font-size: .95rem; }
  .reading { font-size: .8rem; }
  .worked-example { padding: 1rem; }
  .worked-example dl > div { grid-template-columns: 1fr; gap: 0; padding-block: .3rem; }
}

@media print {
  :root { color-scheme: light; background: white; color: black; }
  h1, h2, h3, a, .article-meta, .reading, .editorial-note, .worked-example dt { color: black; }
  .site-header, .site-footer, .contents, .study-ad-slot, .skip-link { display: none; }
  .reading-width { inline-size: 100%; }
  .worked-example, .example-table thead { background: none; }
  .example-table, .worked-example { break-inside: avoid; }
}