/* shell.css — shared, MOBILE-FIRST base. Desktop is added via min-width only.
   Warm, calm Japanese-learning feel (washi paper + persimmon), not SaaS. */

:root {
  /* palette */
  --paper: #fbf7f0;        /* warm washi background */
  --paper-2: #f3ece0;      /* raised surface */
  --ink: #2b2622;          /* primary text */
  --ink-soft: #5c5349;     /* secondary text */
  --accent: #a8432c;       /* persimmon (朱) — buttons/links */
  --accent-ink: #ffffff;   /* text on accent */
  --line: #e4d9c8;         /* hairlines */
  --focus: #1f5f8b;        /* focus ring (indigo) */

  /* type */
  --font: "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Noto Serif JP", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base: 17px;         /* readable without zoom on mobile */
  --lh: 1.65;

  /* rhythm + touch */
  --sp: 16px;
  --tap-min: 44px;         /* minimum tap target (mobile-first poka-yoke) */
  --measure: 62ch;         /* readable line length */
  --radius: 10px;
  --header-h: 60px;        /* compact single-row sticky header (Phase A) */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh);
  /* never allow sideways scrolling */
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 12px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Header / nav / menu (mobile-first, Phase A 2026-07-19) ----
   One compact sticky row on every viewport: brand · (desktop nav) · language
   buttons · (mobile Menu button). Below 1024px the site navigation lives in a
   full-screen sheet (.site-menu) opened by the Menu button — never a
   horizontally scrollable row, so no destination can be hidden by overflow.
   At >=1024px the sheet is retired and .site-nav shows the grouped bar. */
.site-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: var(--header-h);
  padding: 8px var(--sp);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
  view-transition-name: kt-header;  /* header stays put across page swaps */
}

.brand {
  display: inline-flex;
  align-items: center;   /* logo + wordmark */
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  min-height: var(--tap-min);
  /* the ONE shrinkable header item: on narrow viewports / wide system fonts
     the wordmark ellipsizes instead of pushing the Menu button off-screen */
  flex: 0 1 auto;
  min-width: 44px;
  overflow: hidden;
}
.brand-logo {
  height: 44px;          /* same height as the EN/ES button BOX, not just its text */
  width: auto;
  display: block;
  border-radius: 6px;    /* soften the hanko's square edge on the paper header */
  flex: 0 0 auto;
}
/* wordmark scaled up so logo + text read as one brand unit balanced against
   the language-button boxes; hidden on the very narrowest phones so the row
   never overflows (mobile-first: shown from 380px up) */
.brand-word {
  display: none;
  font-weight: 700; letter-spacing: .02em; font-size: 1.3rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 380px) { .brand-word { display: inline; } }

/* Desktop grouped nav — hidden until >=1024px (sheet menu below that). */
.site-nav { display: none; }
.nav-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: var(--tap-min);
  padding: 8px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.nav-item[aria-current="page"] { background: var(--paper-2); color: var(--accent); }
.nav-item:hover { background: var(--paper-2); }

.lang-switch { display: inline-flex; gap: 4px; margin-left: auto; }

/* Menu button (mobile/tablet only) */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit; font-weight: 700; font-size: .85rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.menu-btn-icon { display: inline-block; width: 16px; }
.menu-btn-icon::before {
  content: "";
  display: block;
  height: 2px; width: 16px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
  margin-top: -6px;
}

/* ---- Full-screen menu sheet (mobile/tablet) ---- */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  overflow-y: auto;
  padding: 0 var(--sp) 32px;
}
.site-menu[hidden] { display: none; }
.site-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.site-menu-title { font-weight: 700; font-size: 1.3rem; }
.menu-close {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit; font-size: 1.1rem;
  cursor: pointer;
}
.menu-close:hover { background: var(--paper-2); }
.menu-group { margin: 0 0 10px; }
.menu-group-title {
  margin: 14px 0 4px;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.menu-item {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 10px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.menu-item[aria-current="page"] { background: var(--paper-2); color: var(--accent); }
.menu-item:hover { background: var(--paper-2); }
/* body scroll locks while the sheet is open */
html.kt-menu-open, html.kt-menu-open body { overflow: hidden; }
.lang-btn {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit; font-weight: 700; font-size: .85rem;
  cursor: pointer;
}
.lang-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* baked language trees render the switch as real links (same look) */
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-soft);
  font-weight: 700; font-size: .85rem;
  text-decoration: none;
}
.lang-link.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Main + footer ---- */
.site-main {
  padding: var(--sp);
  max-width: 960px;         /* readable measure; NOT a desktop min-width */
  margin: 0 auto;
}

.site-footer {
  padding: 24px var(--sp);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  text-align: center;
}
/* footer nav: a full recovery path at the bottom of every page */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 28px;
  margin: 0 auto 18px;
  max-width: 960px;
  text-align: left;
}
.footer-group-title {
  margin: 0 0 2px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);   /* comfortable taps even in the footer — */
  min-width: var(--tap-min);    /* both dimensions, even for short labels */
  margin-right: 12px;
  color: var(--ink);
  font-size: .92rem;
  text-decoration: none;
}
.footer-nav a:hover { color: var(--accent); text-decoration: underline; }
.footer-note { font-size: .85rem; opacity: .8; }
.footer-legal { font-size: .8rem; opacity: .7; margin-top: 8px; }
/* Attribution links sit inside a sentence rather than in .footer-nav, but the
   44px floor is the floor everywhere — it is not a property of being in a nav.
   Declared here, once, instead of as a style attribute repeated on four anchors
   in every one of the 556 built pages: the stylesheet is the one place a tap
   -target audit reads, and inline copies are invisible to it. */
.footer-attribution a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}

/* ---- Shared page patterns (one source — was duplicated per feature) ---- */
/* kicker: the linked context line above a page h1 ("The beginner path · Step 2") */
.page-kicker { margin: 0 0 10px; font-weight: 700; letter-spacing: .02em; }
.page-kicker a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap-min); }
.page-kicker a:hover { text-decoration: underline; }

/* next-step / related cards */
.page-next { max-width: var(--measure); margin-top: 24px; }
.page-next h2 { margin: 0 0 12px; font-family: var(--font); font-size: 1.3rem; }
.path-cards { display: grid; gap: 10px; }
.path-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap-min);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
}
.path-card:hover { border-color: var(--accent); background: var(--paper-2); }
.path-card-title { font-weight: 700; color: var(--accent); }
.path-card-note { color: var(--ink-soft); font-size: .92rem; }

/* external links carry a visible marker + screen-reader note */
.link-external::after { content: " \2197"; font-size: .85em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* back-to-top (long list pages) — shown by JS after two screens of scroll */
.back-to-top {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 50;
  min-width: 48px; min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font: inherit; font-size: 1.2rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(43, 38, 34, .18);
  cursor: pointer;
}
.back-to-top[hidden] { display: none; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 12px 20px;
  border-radius: var(--radius);
  font: inherit; font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--line); }

/* ---- Desktop enhancement (min-width only = mobile-first) ---- */
@media (min-width: 720px) {
  :root { --fs-base: 18px; --header-h: 64px; }
  .site-header { padding: 8px 24px; }
  .site-main { padding: 32px 24px; }
  .brand-word { font-size: 1.4rem; }
}

/* Grouped nav bar replaces the sheet from 1024px up. */
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .site-menu { display: none !important; }
  .site-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 8px;
  }
  .nav-group { position: relative; }
  .nav-group-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: var(--tap-min);
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font: inherit; font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  .nav-group-btn::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
  }
  .nav-group-btn:hover { background: var(--paper-2); }
  .nav-group-btn[data-current="true"] { color: var(--accent); }
  .nav-group-btn[aria-expanded="true"] { background: var(--paper-2); }
  .nav-group-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
  .nav-group-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(43, 38, 34, .12);
    z-index: 70;
  }
  .nav-group.is-open .nav-group-list { display: block; }
  .nav-group-list .nav-item { display: flex; }
}

/* ---- Cross-document view transitions (progressive enhancement):
   same-origin page swaps crossfade while the sticky header stays pinned.
   Browsers without support simply ignore this. ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* asagiri.css — Asagiri 朝霧 page design.
   A bamboo-morning-mist visual layer over the small Kanjitopia chassis.

   Lineage: inspired by the approved washitsu-tokonoma direction:
   - washi paper, quiet hairlines, tokonoma-like focus panels;
   - mobile-first spacing and 44px touch targets;
   - bamboo grove atmosphere without photo dependencies or heavy media.

   Asagiri means "morning mist". The selected direction is the A3 forest-path
   mood with A1's calm lower cards: gentle bamboo depth, not a dark forest,
   and no shoji / paper-door / lattice motif.
*/

:root {
  --paper: #fbf8ee;
  --paper-2: #f1eadb;
  --paper-soft: #fffdf7;
  --ink: #263323;
  --ink-soft: #5b6553;
  --accent: #aa432b;
  --accent-ink: #fff9ed;
  --line: #d9d9c4;
  --line-strong: #9aaa83;
  --focus: #1f6f86;
  --bamboo: #496b43;
  --bamboo-dark: #2f4f31;
  --bamboo-soft: #cfdcbd;
  --mist: rgba(255, 253, 247, .7);
  --shadow-soft: 0 14px 38px rgba(38, 51, 35, .13);
}

body[data-page-design="asagiri"] {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    radial-gradient(circle at 74% 8%, rgba(219, 231, 195, .94), transparent 27rem),
    radial-gradient(circle at 4% 34%, rgba(205, 222, 190, .7), transparent 18rem),
    linear-gradient(180deg, rgba(255, 253, 247, .88), rgba(242, 236, 219, .97)),
    var(--paper);
}

/* Natural bamboo art layer. This is intentionally a compressed art asset,
   not procedural CSS bamboo: the visual grammar needs organic culms, nodes,
   branches, and attached leaves. CSS only positions the art and keeps text
   readable. */
body[data-page-design="asagiri"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(251, 248, 238, .88) 0 28%, rgba(251, 248, 238, .42) 56%, rgba(251, 248, 238, .10) 100%),
    linear-gradient(180deg, rgba(251, 248, 238, .14), rgba(251, 248, 238, .28) 58%, rgba(251, 248, 238, .54)),
    url("asagiri-bamboo-natural-1.5d0188bf82.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, right center;
  opacity: .96;
}

body[data-page-design="asagiri"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(251, 248, 238, .68), rgba(251, 248, 238, .25) 52%, rgba(251, 248, 238, .05) 100%),
    linear-gradient(180deg, rgba(251, 248, 238, .18), rgba(251, 248, 238, .42) 56%, rgba(251, 248, 238, .82)),
    repeating-linear-gradient(0deg, rgba(38, 51, 35, .028) 0 1px, transparent 1px 6px);
}

body[data-page-design="asagiri"] .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background:
    linear-gradient(90deg, rgba(251, 248, 238, .96), rgba(239, 232, 213, .91)),
    rgba(251, 248, 238, .95);
  border-bottom-color: rgba(110, 135, 91, .5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .65) inset,
    0 8px 26px rgba(47, 79, 49, .09);
}

body[data-page-design="asagiri"] .brand-logo {
  box-shadow: 0 5px 18px rgba(38, 51, 35, .1);
}

body[data-page-design="asagiri"] .brand-word,
body[data-page-design="asagiri"] .home-title,
body[data-page-design="asagiri"] .page-title,
body[data-page-design="asagiri"] .kana-title,
body[data-page-design="asagiri"] .navi-title {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

body[data-page-design="asagiri"] .nav-item[aria-current="page"],
body[data-page-design="asagiri"] .lang-btn,
body[data-page-design="asagiri"] .btn,
body[data-page-design="asagiri"] .navi-reset,
body[data-page-design="asagiri"] .navi-strokes-btn,
body[data-page-design="asagiri"] .kana-strokes-btn,
body[data-page-design="asagiri"] .exam-link,
body[data-page-design="asagiri"] .kotowaza-play {
  border-radius: 12px;
}

body[data-page-design="asagiri"] .nav-item[aria-current="page"] {
  background: rgba(241, 234, 219, .92);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 rgba(170, 67, 43, .18);
}

body[data-page-design="asagiri"] .lang-btn {
  background: rgba(255, 253, 247, .82);
}

body[data-page-design="asagiri"] .lang-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--accent-ink);
}

body[data-page-design="asagiri"] .site-main {
  position: relative;
  z-index: 1;
}

body[data-page-design="asagiri"] .home-hero,
body[data-page-design="asagiri"] .page-hero {
  position: relative;
}

body[data-page-design="asagiri"] .home-hero::after,
body[data-page-design="asagiri"] .page-hero::after {
  content: "";
  display: block;
  width: min(140px, 38vw);
  height: 4px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--bamboo-dark), var(--bamboo), transparent);
  opacity: .9;
}

body[data-page-design="asagiri"] .home-kicker,
body[data-page-design="asagiri"] .page-kicker {
  color: var(--accent);
}

body[data-page-design="asagiri"] .btn-primary,
body[data-page-design="asagiri"] .kana-pron-btn {
  background: linear-gradient(180deg, #b94c31, var(--accent));
  border-color: rgba(122, 45, 30, .42);
  box-shadow: 0 8px 20px rgba(170, 67, 43, .18);
}

body[data-page-design="asagiri"] .btn-primary:hover,
body[data-page-design="asagiri"] .kana-pron-btn:hover {
  filter: none;
  transform: translateY(-1px);
}

/* Shared card surfaces. These selectors intentionally cover the current
   feature-pack components without forcing each feature to know the theme. */
body[data-page-design="asagiri"] .home-about,
body[data-page-design="asagiri"] .path-track,
body[data-page-design="asagiri"] .track-step,
body[data-page-design="asagiri"] .derivation-pair,
body[data-page-design="asagiri"] .path-card,
body[data-page-design="asagiri"] .exam-card,
body[data-page-design="asagiri"] .exam-vs,
body[data-page-design="asagiri"] .kotowaza-card,
body[data-page-design="asagiri"] .kotowaza-media,
body[data-page-design="asagiri"] .navi-active,
body[data-page-design="asagiri"] .navi-result,
body[data-page-design="asagiri"] .navi-detail,
body[data-page-design="asagiri"] .kana-cell,
body[data-page-design="asagiri"] .kana-detail {
  background: rgba(255, 253, 247, .92);
  border-color: rgba(110, 135, 91, .52);
  box-shadow: var(--shadow-soft);
}

body[data-page-design="asagiri"] .path-track,
body[data-page-design="asagiri"] .home-about,
body[data-page-design="asagiri"] .navi-detail,
body[data-page-design="asagiri"] .kana-detail,
body[data-page-design="asagiri"] .exam-compare {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, .94), rgba(239, 232, 213, .9)),
    var(--paper-2);
}

body[data-page-design="asagiri"] .track-step::before {
  background: rgba(223, 232, 211, .78);
  color: var(--accent);
}

body[data-page-design="asagiri"] .navi-search-input,
body[data-page-design="asagiri"] .navi-filter-select,
body[data-page-design="asagiri"] .navi-filter-input,
body[data-page-design="asagiri"] .navi-topic-select,
body[data-page-design="asagiri"] .kana-search-input {
  background: rgba(255, 253, 247, .9);
  border-color: rgba(154, 170, 131, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}

body[data-page-design="asagiri"] .navi-search-input.is-active,
body[data-page-design="asagiri"] .navi-filter-input.is-active,
body[data-page-design="asagiri"] .navi-filter-select.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

body[data-page-design="asagiri"] .navi-result:hover,
body[data-page-design="asagiri"] .navi-result.is-active,
body[data-page-design="asagiri"] .kana-cell:hover,
body[data-page-design="asagiri"] .path-card:hover,
body[data-page-design="asagiri"] .track-step:hover,
body[data-page-design="asagiri"] .exam-link:hover {
  border-color: var(--bamboo);
  background: rgba(241, 234, 219, .92);
}

body[data-page-design="asagiri"] .navi-glyph-svg path,
body[data-page-design="asagiri"] .kana-glyph-svg path {
  stroke: var(--ink);
}

body[data-page-design="asagiri"] .navi-chip,
body[data-page-design="asagiri"] .kotowaza-badge {
  background: rgba(223, 232, 211, .78);
  color: var(--ink-soft);
}

body[data-page-design="asagiri"] .site-footer {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(251, 248, 238, .55), rgba(251, 248, 238, .96)),
    radial-gradient(circle at 85% 55%, rgba(96, 122, 80, .12), transparent 14rem);
  border-top-color: rgba(154, 170, 131, .42);
}

@media (min-width: 720px) {
  body[data-page-design="asagiri"] .site-header {
    padding-block: 14px;
  }

  body[data-page-design="asagiri"] .site-main {
    padding-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-design="asagiri"] .btn-primary:hover,
  body[data-page-design="asagiri"] .kana-pron-btn:hover {
    transform: none;
  }
}