/* GENERATED FILE — edit styles/*.css instead. */

/* ===== Kanji Index ===== */

/* Blocks page styles */
.blocks-section{max-width:1200px;margin:0 auto}
.blocks-section h2{font-size:1.75rem;margin-bottom:1rem}
.blocks-container{margin-top:2rem}
.block-section{margin-bottom:3rem}
.block-section h3{font-size:1.25rem;color:var(--accent);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}
.blocks-container .loading,.blocks-container .error{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:1.1rem}
.blocks-container .error{color:#d32f2f}

/* Kanji section page styles */
.kanji-section-page{max-width:1200px;margin:0 auto}
.kanji-section-page h1{font-size:1.5rem;margin:0;overflow-wrap:anywhere}
.section-description{color:var(--muted);margin:0;font-size:1rem;line-height:1.75}
.index-header{position:static;top:auto;z-index:auto;width:auto;margin:0 0 1.25rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);backdrop-filter:none;-webkit-backdrop-filter:none}
.index-header .entry-breadcrumbs{margin:0 0 1rem;padding:0;border:0}
.index-header__title{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;margin-bottom:.75rem}
.index-count{display:inline-flex;align-items:center;padding:.2rem .65rem;border:1px solid color-mix(in oklab,var(--accent) 20%,var(--border));border-radius:999px;background:color-mix(in oklab,var(--accent) 7%,var(--surface));color:var(--accent);font-size:.875rem;font-weight:700}
.index-directory__links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;padding:.75rem 0 0;border-top:1px solid var(--border)}
.index-directory__link{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:.4rem .85rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-elevated);font-size:.9rem}
.index-directory__link:hover,.index-directory__link.is-current{background:color-mix(in oklab,var(--accent) 10%,var(--surface));border-color:var(--accent);color:var(--accent)}
.index-directory__link.is-current{font-weight:700}
.index-stroke-picker{margin:1rem 0}
.index-stroke-picker summary{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:44px;padding:.6rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--link);font-size:.9rem;font-weight:600;list-style:none}
.index-stroke-picker summary::-webkit-details-marker{display:none}
.index-stroke-picker summary::after{content:"+";font-size:1.25rem}
.index-stroke-picker[open] summary::after{content:"−"}
.index-stroke-picker summary:focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 35%,transparent);outline-offset:2px}
.index-page-range{color:var(--muted);font-size:.9rem;margin:1rem 0 .5rem}
.index-page-numbers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem;margin-top:.65rem}
.index-page-number{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:44px;padding:.35rem .65rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:.9rem}
.index-page-number:hover{border-color:var(--accent)}
.index-page-number[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.index-page-gap{padding:0 .15rem;color:var(--muted)}
.kanji-index-content{margin-top:1rem}
.kanji-index-content .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.25rem,1fr));gap:.625rem}
.kanji-index-content [hidden]{display:none!important}
.index-filter{margin-bottom:1rem;padding:1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.index-filter__toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:44px;font-size:.9rem;font-weight:600;color:var(--link);cursor:pointer;list-style:none}
.index-filter__toggle::-webkit-details-marker{display:none}
.index-filter__toggle::after{content:"+";font-size:1.25rem}
.index-filter details[open] .index-filter__toggle::after{content:"−"}
.index-filter__toggle:focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 35%,transparent);outline-offset:2px;border-radius:4px}
.index-filter__fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:.75rem;align-items:end;padding-top:.75rem;border-top:1px solid var(--border);margin-top:.5rem}
.index-filter label{display:flex;flex-direction:column;gap:.35rem;min-width:0;color:var(--fg);font-size:.875rem;font-weight:600}
.index-filter input,.index-filter select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:.55rem .65rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-elevated);color:var(--fg);font:inherit;font-weight:400}
.index-filter input:focus-visible,.index-filter select:focus-visible,.index-filter__reset:focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 35%,transparent);outline-offset:2px;border-color:var(--accent)}
.index-filter__reset{grid-column:1/-1;justify-self:start;min-height:44px;padding:.4rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--link);font:inherit;font-size:.875rem;cursor:pointer}
.index-filter__reset:hover{border-color:var(--accent);color:var(--accent)}
.index-filter__scope{margin:.65rem 0 0;font-size:.8rem;color:var(--muted)}
.index-filter__result{margin:.35rem 0 0;color:var(--fg);font-size:.875rem;font-weight:600}
.index-filter__empty{margin:1rem 0;padding:1.5rem;border:1px dashed var(--border);border-radius:12px;color:var(--muted);text-align:center}
@media (max-width:480px){
  .index-header{padding:1rem;border-radius:12px}
  .index-filter__fields{grid-template-columns:minmax(0,1fr)}
  .kanji-index-content .grid{grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr));gap:.45rem}
}
.kanji-related-list-single-kanji li a{display:inline-block;width:46px;font-family:var(--font-display);font-size:28px;font-weight:500;line-height:32px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:6px;text-decoration:none;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:color .15s;vertical-align:middle}
.radical-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-top:1rem}
.radical-card{display:grid;justify-items:center;align-content:center;gap:.35rem;min-width:0;min-height:120px;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-card);color:var(--fg);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.radical-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(58,38,15,.12);border-color:color-mix(in oklab, var(--accent) 40%, var(--border));color:var(--fg);text-decoration:none}
.radical-card__glyph{max-width:100%;font-family:var(--font-display);font-size:2rem;line-height:1.25;font-weight:600;overflow-wrap:anywhere}
.radical-card__label{font-size:.875rem;line-height:1.5;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.radical-card__count{font-size:.95rem;font-weight:700;color:var(--accent)}
.radical-title-name{font-size:1.25rem;color:var(--muted);font-weight:400}
.radical-page .radical-page__back{margin:0 0 1rem}
.radical-page .radical-page__back a{font-weight:700;color:var(--link)}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:1.1rem}

/* Reading drill-down navigation */
.kanji-section-page--reading-index,
.reading-nav {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.reading-nav {
  --reading-nav-accent: #2563eb;
  --reading-nav-accent-soft: color-mix(in oklab, var(--reading-nav-accent) 8%, var(--surface));
  --reading-nav-accent-border: color-mix(in oklab, var(--reading-nav-accent) 25%, var(--border));
  --reading-nav-accent-strong: color-mix(in oklab, var(--reading-nav-accent) 75%, #0f172a);
  margin-top: 1rem;
}

.reading-nav--kun {
  --reading-nav-accent: #d97706;
}

.reading-nav__hint {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.reading-nav__groups {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

@container (min-width: 600px) {
  .reading-nav__groups {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

.reading-nav__group {
  display: flex;
  flex-direction: column;
}

.reading-nav__parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.8rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(58, 38, 15, 0.04);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
}

.reading-nav__parent-glyph {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.reading-nav__parent-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.15rem;
  line-height: 1;
}

.reading-nav__parent:hover {
  border-color: var(--reading-nav-accent);
  color: var(--reading-nav-accent);
  background: var(--reading-nav-accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(58, 38, 15, 0.08);
}

.reading-nav__parent:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: none;
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
}

.reading-nav__parent:hover .reading-nav__parent-count {
  color: var(--reading-nav-accent);
}

.reading-nav__parent:focus-visible {
  outline: 2px solid var(--reading-nav-accent);
  outline-offset: 2px;
  border-color: var(--reading-nav-accent);
}

.reading-nav__parent[aria-expanded="true"] {
  border-color: var(--reading-nav-accent);
  background: var(--reading-nav-accent);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--reading-nav-accent) 30%, transparent);
}

.reading-nav__parent[aria-expanded="true"] .reading-nav__parent-count {
  color: rgba(255, 255, 255, 0.85);
}

/* Panel */
.reading-nav__panel {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0.75rem 0 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--reading-nav-accent-border);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(58, 38, 15, 0.06);
  animation: readingNavFadeIn 0.2s ease-out;
}

@keyframes readingNavFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reading-nav__panel[hidden] {
  display: none !important;
}

/* Panels ship expanded so no-JS visitors keep every reading link. Once scripting is
   available they start collapsed, and reading-nav.js takes over via the
   [hidden] attribute once it marks the nav as enhanced. Browsers without
   `scripting` support ignore the query and keep the expanded layout. */
@media (scripting: enabled) {
  .reading-nav:not([data-reading-nav-enhanced]) .reading-nav__panel {
    display: none;
  }
}

.reading-nav__children-header {
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in oklab, var(--reading-nav-accent) 15%, var(--border));
}

.reading-nav__children-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--reading-nav-accent-strong);
}

.reading-nav__children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.reading-nav__child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(58, 38, 15, 0.04);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.reading-nav__child:hover {
  border-color: var(--reading-nav-accent);
  color: var(--reading-nav-accent);
  background: var(--reading-nav-accent-soft);
  box-shadow: 0 3px 8px rgba(58, 38, 15, 0.08);
  transform: translateY(-1px);
  text-decoration: none;
}

.reading-nav__child:focus-visible {
  outline: 2px solid var(--reading-nav-accent);
  outline-offset: 2px;
  border-color: var(--reading-nav-accent);
}

.reading-nav__empty {
  margin: 0;
  padding: 0.5rem 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Compact tiles for the radical/stroke/on/kun index pages */
.kanji-section-page--radical-index .radical-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:.625rem}
.kanji-section-page--stroke-index .radical-grid,
.kanji-section-page--reading-index .radical-grid{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:.625rem}
.kanji-section-page--radical-index .radical-card,
.kanji-section-page--stroke-index .radical-card,
.kanji-section-page--reading-index .radical-card{min-height:96px;padding:.75rem .5rem;border-radius:14px}
.kanji-section-page--radical-index .radical-card__glyph,
.kanji-section-page--stroke-index .radical-card__glyph,
.kanji-section-page--reading-index .radical-card__glyph{font-size:1.55rem}
.kanji-section-page--radical-index .radical-card__label{font-size:.8rem}
.kanji-section-page--radical-index .radical-card__count,
.kanji-section-page--stroke-index .radical-card__count,
.kanji-section-page--reading-index .radical-card__count{font-size:.85rem}

.kanji-section-page--kanken-index .radical-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}
.kanji-section-page--kanken-index .radical-card{min-height:110px;padding:.85rem .75rem;border-radius:14px}
.kanji-section-page--kanken-index .radical-card__glyph{font-size:1.35rem}
.kanji-section-page--kanken-index .radical-card__label{font-size:.8rem}
.kanji-section-page--kanken-index .radical-card__count{font-size:.9rem}

/* Collapsible index rows for radical/on/kun reading indexes */
.index-row{margin:0.5rem 0;border:1px solid var(--border);border-radius:8px;background:var(--surface-elevated);break-inside:avoid}
.index-row summary{padding:.75rem 1rem;cursor:pointer;font-weight:600;font-size:1.1rem;color:var(--fg);user-select:none;transition:color .15s;list-style:none;display:flex;align-items:center;gap:.5rem}
.index-row summary::-webkit-details-marker{display:none}
.index-row summary::before{content:"▶";font-size:.75rem;color:var(--muted);transition:transform .2s}
.index-row[open] summary::before{transform:rotate(90deg)}
.index-row summary:hover{color:var(--accent)}
.index-row[open] summary{border-bottom:1px solid var(--border);color:var(--accent)}
.index-row-content{padding:1rem}
.index-row-content p{margin:0}

/* Index Sub-Navigation (JLPT, Kanken, Grade links) */
.index-subnav {
  margin: 1rem 0 1.25rem;
}

.index-subnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.index-subnav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
}

.index-subnav__link:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
}

.index-subnav__link.is-current,
.index-subnav__link[aria-current="page"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion:reduce){
  .kanji-section-page a,.reading-nav__parent{transition:none}
  .reading-nav__panel{animation:none}
  .radical-card:hover,.reading-nav__parent:hover,.reading-nav__child:hover{transform:none}
}

/* ===== Utilities ===== */

/* 404 Error page styles */
.error-page{text-align:center;padding:4rem 1rem}
.error-code{font-size:3rem;font-weight:700;color:var(--accent);margin:0;line-height:1}
.error-title{font-size:1.75rem;color:var(--fg);margin:1rem 0}
.error-message{font-size:1.1rem;color:var(--muted);margin:0 0 2rem}
.error-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.btn-home,.btn-search{display:inline-block;padding:.75rem 1.5rem;border-radius:6px;font-weight:600;text-decoration:none;transition:background .15s,color .15s;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.btn-home{background:var(--accent);color:#fff}
.btn-home:hover{color:#fff}
.btn-search{background:var(--surface);color:var(--accent);border:1px solid var(--border)}
.btn-search:hover{color:var(--accent)}

@media (max-width:600px){
.kanji-hero--split{gap:0.5rem}
.reading-group{gap:.65rem;padding:.6rem .75rem}
.reading-label{width:1.95rem;height:1.6rem;font-size:.78rem}
.reading-value{font-size:1.05rem}
.filter-group{grid-template-columns:1fr}
.welcome-section{padding:1rem 0}
.welcome-section h2{font-size:1.5rem}
.footer-content{grid-template-columns:1fr;gap:1.5rem}
.site-footer{padding:2rem 1rem 1rem}
.error-code{font-size:5rem}
.error-title{font-size:1.5rem}
.error-actions{flex-direction:column;align-items:center}
.kanji-section-page--radical-index .radical-grid,
.kanji-section-page--stroke-index .radical-grid,
.kanji-section-page--reading-index .radical-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.kanji-section-page--radical-index .radical-card,
.kanji-section-page--stroke-index .radical-card,
.kanji-section-page--reading-index .radical-card{min-height:72px;padding:.45rem .25rem;border-radius:10px}
.kanji-section-page--radical-index .radical-card__glyph,
.kanji-section-page--stroke-index .radical-card__glyph,
.kanji-section-page--reading-index .radical-card__glyph{font-size:1.4rem;line-height:1.05}
.kanji-section-page--radical-index .radical-card__label{font-size:.8rem}
.kanji-section-page--radical-index .radical-card__count,
.kanji-section-page--stroke-index .radical-card__count,
.kanji-section-page--reading-index .radical-card__count{font-size:.8rem;line-height:1.3}

.kanji-section-page--kanken-index .radical-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.kanji-section-page--kanken-index .radical-card{min-height:85px;padding:.6rem .4rem;border-radius:10px}
.kanji-section-page--kanken-index .radical-card__glyph{font-size:1.15rem;line-height:1.1}
.kanji-section-page--kanken-index .radical-card__label{font-size:.8rem}
.kanji-section-page--kanken-index .radical-card__count{font-size:.78rem;line-height:1.1}

}

/* Breadcrumb navigation at the bottom of entries */
.entry-breadcrumbs {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--muted);
}
.entry-breadcrumbs .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.35rem 0.5rem;
}
.entry-breadcrumbs .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.entry-breadcrumbs .breadcrumb-item a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s;
}
.entry-breadcrumbs .breadcrumb-item a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.entry-breadcrumbs .breadcrumb-separator {
  color: color-mix(in oklab, var(--muted) 60%, transparent);
  font-size: 0.75rem;
  user-select: none;
}
.entry-breadcrumbs .breadcrumb-current {
  color: var(--fg);
  font-weight: 500;
}