/* kids/learn — topic pages. Same visual language as kids/worksheets:
   navy grid ground, paper reading column, amber accents. Hand-written;
   the HTML around it is generated by _build/build.py. */

:root{
  --navy:#152A42; --navy-deep:#0D1B2C;
  --grid-line:rgba(255,255,255,0.055); --grid-line-strong:rgba(255,255,255,0.09);
  --paper:#FAF6EC; --paper-warm:#FBF3E2; --edge:#D9D2C2;
  --ink:#20272E; --soft:#6B7681;
  --amber:#DC9C3F; --amber-soft:#F1C989; --amber-deep:#A8650E;
  --red:#B54A30; --red-pale:#F7E9E6;
  --white:#EFF3F6; --sky:#8FB6D9;
  --green:#4F7C4C; --green-pale:#EAF1E7;
  --blue:#2A5F8F; --blue-pale:#E6EEF6;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background-color:var(--navy);
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, var(--grid-line-strong) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--grid-line-strong) 0 1px, transparent 1px 40px);
  color:var(--white);
  font-family:'Inter','Zen Kaku Gothic New',sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{ color:inherit }
a:focus-visible, summary:focus-visible, .skip:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px;
}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--amber); color:var(--navy-deep);
  padding:10px 16px; font-weight:700; z-index:20;
}
.skip:focus{ left:12px; top:12px }

.wrap{ max-width:1040px; margin:0 auto; padding:0 24px }
.topbar{ padding:22px 0 0 }
.breadcrumb{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em;
  color:var(--sky); text-transform:uppercase;
}
.breadcrumb a{ text-decoration:none; border-bottom:1px solid rgba(143,182,217,.35) }
.breadcrumb a:hover{ color:var(--amber); border-color:var(--amber) }
.breadcrumb .sep{ margin:0 8px; color:rgba(255,255,255,.3) }

/* ---------- hero ---------- */
.hero{ padding:34px 0 20px }
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber-soft); margin:0 0 10px;
}
.title{
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900;
  font-size:clamp(30px,5.2vw,46px); margin:0 0 6px; letter-spacing:.02em;
}
.title-en{ font-family:'Space Grotesk',sans-serif; font-size:15px; color:var(--sky); margin:0 0 16px }
.hero p{ max-width:66ch; color:rgba(239,243,246,.86); font-size:15px; margin:0 0 14px }
.thesis{
  max-width:66ch; border-left:3px solid var(--amber); padding:10px 0 10px 16px;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:15.5px; font-weight:700; color:#fff;
}
.thesis small{
  display:block; font-weight:400; font-size:13.5px;
  color:rgba(239,243,246,.7); margin-top:6px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0 }
.chip{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.05em;
  border:1px solid rgba(241,201,137,.42); color:var(--amber-soft);
  border-radius:999px; padding:3px 11px;
}
.chip.jp{ border-color:rgba(143,182,217,.45); color:var(--sky) }
.chip.id{ border-color:rgba(110,154,107,.55); color:#9CC098 }

/* language switcher — navigation between the three, never a bilingual page */
.chips.langs{ margin-top:10px }
.chip.lang{
  text-decoration:none; border-color:rgba(255,255,255,.28); color:rgba(239,243,246,.8);
}
.chip.lang:hover{ border-color:var(--amber); color:var(--amber-soft) }
.chip.lang.on{ background:var(--amber); border-color:var(--amber); color:var(--navy-deep); font-weight:700 }

/* ---------- contents rail ---------- */
.toc{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:10px; padding:16px 20px; margin:26px 0 8px;
}
.toc h2{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sky); margin:0 0 10px; font-weight:500;
}
.toc ol{ margin:0; padding-left:20px; columns:2; column-gap:28px }
@media (max-width:700px){ .toc ol{ columns:1 } }
.toc li{ margin:4px 0; font-size:14.5px }
.toc a{ text-decoration:none; border-bottom:1px solid transparent }
.toc a:hover{ color:var(--amber-soft); border-color:var(--amber-soft) }

/* ---------- sections ---------- */
.section{ padding:30px 0 6px }
.section-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap }
.section-head h2{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:22px; margin:0 }
.section-num{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--amber-soft);
  border:1px solid rgba(241,201,137,.4); border-radius:5px; padding:2px 8px;
}
.head-en{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--sky);
  text-transform:uppercase; letter-spacing:.08em;
}
.section > p{ max-width:70ch; color:rgba(239,243,246,.86); font-size:15px }

/* ---------- paper blocks ---------- */
.paper{
  background:var(--paper); color:var(--ink); border:1px solid var(--edge);
  border-radius:10px; padding:22px 26px; margin:16px 0;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
@media (max-width:600px){ .paper{ padding:18px 16px } }
.paper h3{
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:17px; margin:0 0 10px; color:var(--ink);
}
.paper p{ margin:0 0 10px; font-size:15px }
.paper p:last-child{ margin-bottom:0 }
.paper ul, .paper ol{ margin:0 0 10px; padding-left:22px; font-size:15px }
.paper li{ margin:4px 0 }
.paper b, .paper strong{ font-weight:700 }
.mono{ font-family:'JetBrains Mono',monospace }
.hl{ background:linear-gradient(transparent 62%, var(--amber-soft) 62%); font-weight:700 }
.wrongtext{ color:var(--red); font-weight:700 }
.frac{ font-family:'JetBrains Mono',monospace; white-space:nowrap }
.frac sup, .frac sub{ font-size:.72em; line-height:0 }

.theory{ border-left:4px solid var(--blue); background:#F4F8FC }
.theory .tag, .rei .tag, .warn .tag, .mix .tag, .exam .tag{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; padding:2px 9px; border-radius:4px;
  margin-bottom:9px;
}
.theory .tag{ background:var(--blue); color:#fff }
.rei{ border-left:4px solid var(--amber); background:var(--paper-warm) }
.rei .tag{ background:var(--amber-deep); color:#fff }
.warn{ border-left:4px solid var(--red); background:var(--red-pale) }
.warn .tag{ background:var(--red); color:#fff }
.mix{ border-left:4px solid var(--green); background:var(--green-pale) }
.mix .tag{ background:var(--green); color:#fff }
.exam{ border-left:4px solid var(--navy); background:#F2F4F7 }
.exam .tag{ background:var(--navy); color:#fff }

/* ---------- the one-line rule box ---------- */
.rule{
  border:2px solid var(--amber-deep); background:#FFF8EA; border-radius:8px;
  padding:14px 18px; margin:14px 0; text-align:center;
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:17px; color:var(--ink);
}
.rule small{ display:block; font-weight:400; font-size:13px; color:var(--soft); margin-top:5px }

/* ---------- figures ---------- */
figure{ margin:16px 0; text-align:center }
figure svg{ max-width:100%; height:auto }
figcaption{
  font-size:13px; margin-top:8px; text-align:left; max-width:70ch;
  font-family:'Zen Kaku Gothic New',sans-serif;
  color:rgba(239,243,246,.72);   /* a figure may sit straight on the navy ground */
}
.paper figcaption{ color:var(--soft) }   /* …or inside a paper block */

/* ---------- tables ---------- */
.tablewrap{ overflow-x:auto; margin:14px 0 }
table{ border-collapse:collapse; width:100%; font-size:14px; min-width:420px }
th, td{ border-bottom:1px solid var(--edge); padding:8px 10px; text-align:left; vertical-align:top }
th{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em;
  color:var(--soft); font-weight:500; border-bottom:2px solid var(--edge);
}
td.num, th.num{ text-align:right; font-family:'JetBrains Mono',monospace }

/* ---------- questions ---------- */
.q{ border-top:1px solid var(--edge); padding:14px 0 4px }
.q:first-of-type{ border-top:none }
.qn{
  display:inline-block; min-width:26px; height:26px; line-height:26px; text-align:center;
  background:var(--navy); color:#fff; border-radius:5px;
  font-family:'JetBrains Mono',monospace; font-size:13px; margin-right:9px;
}
.qbody{ display:inline; font-size:15px }
.q .hint{ font-size:13.5px; color:var(--soft); margin:6px 0 0 35px }
details{ margin:9px 0 0 35px }
@media (max-width:600px){ details, .q .hint{ margin-left:0 } }
summary{
  cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:12.5px;
  letter-spacing:.06em; color:var(--amber-deep); list-style:none; display:inline-block;
  border:1px solid rgba(168,101,14,.4); border-radius:5px; padding:2px 10px;
}
summary::-webkit-details-marker{ display:none }
summary:hover{ background:#FFF3DF }
details[open] summary{ margin-bottom:8px }
.answer{
  border-left:3px solid var(--amber); background:#FFFCF4; padding:10px 14px;
  font-size:14.5px; border-radius:0 6px 6px 0;
}
.answer p{ margin:0 0 8px }
.answer p:last-child{ margin-bottom:0 }
.answer .final{ font-weight:700; color:var(--amber-deep) }

/* ---------- exam source card ---------- */
.src{
  border:1px dashed var(--soft); border-radius:8px; padding:12px 15px; margin:0 0 14px;
  font-size:13.5px; color:var(--soft); background:#fff;
}
.src b{ color:var(--ink) }
.src a{ color:var(--blue); word-break:break-all }
.src .lic{
  display:block; margin-top:7px; font-family:'JetBrains Mono',monospace;
  font-size:11.5px; color:var(--red);
}

/* ---------- topic shelf (index) ---------- */
.shelf{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin:18px 0 }
.card{
  background:var(--paper); color:var(--ink); border:1px solid var(--edge); border-radius:10px;
  padding:20px 22px; text-decoration:none; display:flex; flex-direction:column; gap:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.card:hover{ border-color:var(--amber); box-shadow:0 12px 26px rgba(0,0,0,.3) }
.card .k{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber-deep);
}
.card h3{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:19px; margin:0 }
.card p{ margin:0; font-size:14px; color:var(--soft) }
.card .meta{
  margin-top:auto; padding-top:10px; font-family:'JetBrains Mono',monospace;
  font-size:11.5px; color:var(--soft); border-top:1px solid var(--edge);
}
.card.soon{ opacity:.6; box-shadow:none }

/* a week index lists three shapes of the same content per child: the whole
   week, one card per day, and the answers */
.kidrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--sky); margin:26px 0 0; font-weight:500;
}
.card.lead{ border-color:rgba(241,201,137,.5) }
.card.lead .k{ color:var(--amber-deep) }
.card.ans{ background:#FBF5EA; border-color:rgba(168,101,14,.35) }
.card.ans .k{ color:var(--amber-deep) }
/* 背伸び — the week's optional challenge. Same paper card, told apart by an
   inset dashed frame and a ▲ climbing marker rather than by colour alone, so
   it reads the same to a colour-blind parent and on a greyscale screen. The
   frame is inset because a dashed green edge is lost against the navy. */
.card.stretch{ position:relative }
.card.stretch::after{
  content:""; position:absolute; inset:6px; border:1.5px dashed var(--green);
  border-radius:6px; pointer-events:none;
}
.card.stretch .k{ color:var(--green); font-weight:700 }
.card.stretch .k::before{ content:"\25B2\00a0" }
.card.stretch:hover{ border-color:var(--green) }


/* ---------- footer ---------- */
footer{
  border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding:24px 0 44px;
  font-size:13px; color:rgba(239,243,246,.6);
}
footer a{ color:var(--sky) }
.totop{
  position:fixed; right:20px; bottom:20px; width:42px; height:42px; border-radius:50%;
  background:var(--amber); color:var(--navy-deep); border:none; cursor:pointer;
  font-size:18px; font-weight:700; display:none; box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.totop.on{ display:block }

/* ---------- print ---------- */
@media print{
  body{ background:#fff; color:#000 }
  .topbar, .toc, .totop, footer{ display:none }
  .paper{ box-shadow:none; break-inside:avoid }
  .hero{ padding:0 0 12px }
  .title, .thesis, .section-head h2{ color:#000 }
  .hero p, .section > p{ color:#333 }
  details{ display:block }
  details > summary{ display:none }
  .answer{ display:block }
}

/* ---------- glossary (kids/learn/terms) ---------- */
.gloss{
  background:var(--paper); color:var(--ink); border:1px solid var(--edge);
  border-radius:10px; padding:20px 22px; margin:16px 0;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
@media (max-width:600px){ .gloss{ padding:16px 12px } }
.gtools{ display:flex; gap:12px; align-items:center; margin-bottom:12px }
.gtools input{
  flex:1; min-width:0; font:inherit; font-size:15px; padding:9px 13px;
  border:1px solid var(--edge); border-radius:8px; background:#fff; color:var(--ink);
}
.gtools input:focus-visible{ outline:2px solid var(--amber); outline-offset:1px }
.gcount{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--soft);
  flex:none; min-width:3ch; text-align:right;
}
.dchips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px }
.dchip{
  font-family:'JetBrains Mono',monospace; font-size:12px; cursor:pointer;
  border:1px solid var(--edge); background:#fff; color:var(--soft);
  border-radius:999px; padding:4px 12px;
}
.dchip:hover{ border-color:var(--amber); color:var(--amber-deep) }
.dchip.on{ background:var(--ink); border-color:var(--ink); color:#fff }
.glegend{ font-size:12.5px; color:var(--soft); margin:0 0 10px }

.gtable table{ min-width:560px }
.gtable th{ position:sticky; top:0; background:var(--paper); z-index:1 }
.gtable td{ vertical-align:top; padding:9px 10px }
.gtable tr.flagged td{ background:#FFFCF4 }
.gtable .t-ja .w{ font-weight:700; font-size:15px }
.gtable .t-ja .yomi{
  display:block; font-size:11.5px; color:var(--soft);
  font-family:'Zen Kaku Gothic New',sans-serif;
}
.gtable .t-en, .gtable .t-id{ font-size:14.5px }
.gtable .t-f{ width:1%; text-align:center; white-space:nowrap }
.fl{ font-size:15px; cursor:help }
.fl-split{ color:var(--blue) } .fl-odd{ color:var(--amber-deep) }
.fl-clash{ color:var(--red) }  .fl-lit{ color:var(--green) }
tr.noterow td{ padding:0 10px 12px }
.tnote{
  font-size:13.5px; line-height:1.7; color:var(--soft);
  border-left:3px solid var(--amber); background:#FFF8EA;
  padding:9px 13px; border-radius:0 6px 6px 0;
}
.gnone{ font-size:14px; color:var(--soft); margin:12px 0 0 }

@media print{
  .gtools, .dchips, .totop{ display:none }
  .gloss{ box-shadow:none; border:none; padding:0 }
  .gtable table{ min-width:0; font-size:11px }
  .gtable th{ position:static }
  tr[hidden]{ display:table-row !important }
}