/* japanesegrammer — shared design system (v2.1) */
:root{
  --indigo:#4f63d2; --purple:#764ba2; --ink:#2b2840; --muted:#5f5b82;
  --bg:#f4f5fb; --card:#ffffff; --line:#e8e5f4; --soft:#f0edf9;
  --n5:#0a7a54; --n4:#2459d6; --n3:#9a6200; --n2:#b84d00; --n1:#c42c58;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif}
.container{max-width:960px;margin:0 auto;padding:0 24px 64px}
.header{background:linear-gradient(135deg,var(--indigo),var(--purple));color:#fff;
  margin:0 -24px 28px;padding:46px 40px 38px;border-radius:0 0 22px 22px;
  box-shadow:0 10px 30px rgba(102,126,234,.35)}
.header h1{margin:0 0 8px;font-size:2.05em;font-weight:800;letter-spacing:.2px;line-height:1.25}
.header p{margin:0;font-size:1.06em;opacity:.93}
.level-badge{display:inline-block;margin-top:16px;padding:4px 16px;border-radius:999px;
  font-weight:700;font-size:.82em;letter-spacing:1.5px;color:#fff;background:var(--n5)}
.level-badge.n5{background:var(--n5)}.level-badge.n4{background:var(--n4)}
.level-badge.n3{background:var(--n3)}.level-badge.n2{background:var(--n2)}
.level-badge.n1{background:var(--n1)}
.nav-bar{margin:0 0 24px}
.nav-bar .nav-btn{margin:0 8px 8px 0}
.level-section{scroll-margin-top:16px}
.nav-btn,.footer-nav a{display:inline-block;text-decoration:none;color:#fff;font-weight:600;
  background:linear-gradient(135deg,var(--indigo),var(--purple));padding:9px 20px;border-radius:10px;
  box-shadow:0 4px 12px rgba(102,126,234,.3);transition:transform .15s ease,box-shadow .15s ease}
.nav-btn:hover,.footer-nav a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.4)}
.footer-nav{margin:34px 0 10px;text-align:center}
.content img{width:100%;display:block;border-radius:14px;margin:0 0 26px}
.intro-box{background:var(--card);border-left:5px solid var(--purple);border-radius:12px;
  padding:22px 26px;margin:0 0 26px;font-size:1.05em;box-shadow:0 2px 10px rgba(43,40,64,.06)}
.section{margin:0 0 34px}
.section-title{font-size:1.35em;font-weight:800;color:var(--purple);margin:0 0 14px;
  padding-bottom:8px;border-bottom:2px solid var(--soft)}
/* --- teaching prose --- */
.teach{font-size:1.07em;line-height:1.85;margin:0 0 20px}
.teach strong{color:var(--purple)}
.teach em{font-style:italic}
/* --- examples: plain text, no numbers, no titles, no boxes --- */
.examples{margin:0 0 6px}
.ex{margin:28px 0}
.example-jp{font-size:1.62em;font-weight:600;margin:0 0 4px;line-height:1.4}
.mistral-hira{color:#764ba2;font-size:1.18em;margin:6px 0;font-weight:500}
.example-en{color:var(--muted);font-size:1.12em;margin:4px 0 0}
/* --- tables, tips, summary --- */
.table-container{overflow-x:auto}
.grammar-table,.frequency-table{width:100%;border-collapse:collapse;background:var(--card);
  border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(43,40,64,.07)}
.grammar-table th,.frequency-table th{background:linear-gradient(135deg,var(--indigo),var(--purple));
  color:#fff;padding:12px 14px;text-align:left;font-size:.95em}
.grammar-table td,.frequency-table td{padding:12px 14px;border-top:1px solid var(--soft);vertical-align:top;font-size:.98em}
td.japanese,.japanese{font-weight:600}
td.english,.english{color:var(--muted)}
.tip-box{background:linear-gradient(135deg,#fff9ec,#fff4f7);border-left:5px solid #f0a63a;
  border-radius:12px;padding:20px 24px;line-height:1.8;font-size:1.02em}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.summary-card{background:var(--card);border-radius:12px;padding:16px 18px;border-top:4px solid var(--purple);
  box-shadow:0 2px 10px rgba(43,40,64,.06)}
.summary-card h3{margin:0 0 8px;color:var(--purple);font-size:1.02em}
.summary-card p{margin:0;color:var(--muted);font-size:.95em}
code,pre{font-family:ui-monospace,Consolas,Menlo,monospace;background:var(--soft);border-radius:8px}
pre{padding:16px;overflow-x:auto;font-size:.85em;line-height:1.55}
/* --- curriculum index --- */
.level-section{margin:0 0 40px}
.level-header{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.level-header h2{margin:0;font-size:1.45em}
.level-tag{padding:4px 14px;border-radius:999px;color:#fff;font-weight:700;font-size:.85em;letter-spacing:1px}
.level-tag.n5{background:var(--n5)}.level-tag.n4{background:var(--n4)}
.level-tag.n3{background:var(--n3)}.level-tag.n2{background:var(--n2)}.level-tag.n1{background:var(--n1)}
.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.topic-card{background:var(--card);border-radius:12px;border-left:4px solid var(--indigo);
  padding:16px 18px;box-shadow:0 2px 10px rgba(43,40,64,.06);text-decoration:none;color:var(--ink);
  transition:transform .15s ease,box-shadow .15s ease}
.topic-card:hover{transform:translateX(5px);box-shadow:0 6px 18px rgba(102,126,234,.18)}
.topic-card .num{color:var(--purple);font-weight:800;font-size:.82em;letter-spacing:.5px}
.topic-card h3{margin:4px 0 6px;font-size:1.02em}
.topic-card p{margin:0;font-size:.88em;color:var(--muted)}
/* --- practice pages and stories --- */
.quiz{margin:0;padding-left:34px}
.quiz li{margin:0 0 26px;padding-left:6px}
.quiz li::marker{font-weight:800;color:var(--purple)}
.quiz .q-jp{font-size:1.45em;font-weight:600;line-height:1.5}
.quiz .q-en{color:var(--muted);margin:2px 0 0}
details.answer{margin:8px 0 0}
details.answer summary{cursor:pointer;color:var(--indigo);font-weight:600}
details.answer .a-body{margin:8px 0 0;padding:10px 14px;background:var(--soft);border-radius:10px}
.story-card{background:var(--card);border-radius:12px;padding:6px 22px;box-shadow:0 2px 10px rgba(43,40,64,.06);margin:0 0 20px}
.vocab-list{margin:0;padding-left:20px;line-height:1.9}

/* --- mobile: added v2.2 (appended responsive layer) --- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:640px){
  .container{padding:0 16px 48px}
  .header{margin:0 -16px 20px;padding:26px 20px 22px}
  .header h1{font-size:1.45em}
  .header p{font-size:.98em}
  .level-badge{margin-top:12px}
  .intro-box{padding:16px 18px;font-size:1em}
  .section{margin:0 0 26px}
  .section-title{font-size:1.18em}
  .teach{font-size:1em;line-height:1.75}
  .ex{margin:20px 0}
  .example-jp{font-size:1.38em;line-height:1.45}
  .mistral-hira{font-size:1.06em}
  .example-en{font-size:1.02em}
  .grammar-table th,.frequency-table th{padding:10px;font-size:.88em}
  .grammar-table td,.frequency-table td{padding:10px;font-size:.9em}
  .tip-box{padding:16px;font-size:.98em}
  .summary-grid,.topics-grid{grid-template-columns:1fr}
  .level-header h2{font-size:1.2em}
  .nav-btn,.footer-nav a{padding:11px 18px}
}

/* --- accessibility layer: focus, motion, dark mode --- */
a:focus-visible,.nav-btn:focus-visible,.topic-card:focus-visible{outline:3px solid #f0a63a;outline-offset:3px;border-radius:10px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .nav-btn:hover,.footer-nav a:hover,.topic-card:hover{transform:none}
}
@media (prefers-color-scheme:dark){
  :root{--ink:#ecebf7; --muted:#b4b0d4; --bg:#14131f; --card:#1e1c2e; --line:#33304d; --soft:#2a2740}
  .section-title,.teach strong,.summary-card h3,.topic-card .num,.quiz li::marker{color:#c4a8f0}
  details.answer summary{color:#a9b6ff}
  .mistral-hira{color:#c4a8f0}
  .tip-box{background:linear-gradient(135deg,#2b2616,#2b1c24);color:var(--ink)}
  .grammar-table,.frequency-table,.summary-card,.topic-card,.intro-box{box-shadow:none}
}