/* theme.css — brings the old-chrome pages (Essentials + utility) in line with the
   home.html watercolor look. Loaded AFTER styles.css on those pages only.
   The cream washi palette is already shared via styles.css :root, so this only
   refines the CHROME (.topbar / .hero / .section-head) toward home's calm feel.
   Scoped to the pages that link it — content & auth pages are untouched. */

/* ── Header: round hanko + softer cream bar (match home's .lp-hanko / .lp-top) ── */
.topbar {
  background: rgba(251,248,242,.80);
  border-bottom: 1px solid var(--line);
}
.hanko {
  width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--font-serif); font-weight: 700; font-size: 19px;
  box-shadow: 0 4px 12px rgba(184,54,46,.22);
  letter-spacing: 0;
}
.brand { font-family: var(--font-serif); }

/* ── Hero: lighter serif heading + cleaner pill (match .lp-h1 / .lp-pill) ── */
.hero h1 { font-weight: 600; }
.hero .kicker {
  font-weight: 600; letter-spacing: .06em;
  background: rgba(255,255,255,.6); border-color: #e7c9c4;
}

/* ── Section headings: ink color + serif weight, NO underline (user dislikes lines) ── */
.section-head h2 { color: var(--ink); font-weight: 600; }

/* ── Content width: match home's .lp-wrap (1480px, was 1100px) ── */
.wrap { max-width: 1480px; padding: 0 34px; }

/* ── verbs.html: conjugation-forms doc layout — sticky category sidebar + cards ── */
.form-rules { display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 30px; align-items: start; }
.fr-nav { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 3px; }
.fr-nav-title { font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--ink); padding: 2px 12px 10px; }
.fr-nav-title span { color: var(--ink-mute); font-size: 12.5px; margin-left: 5px; }
.fr-nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 11px; color: var(--ink-soft); transition: background .15s; }
.fr-nav-item:hover { background: var(--bg-deep); }
.fr-nav-item.is-active { background: rgba(184,54,46,.07); }
.fr-nav-ico { width: 26px; flex: none; display: grid; place-items: center; font-family: var(--font-jp); font-size: 17px; color: var(--ink-mute); }
.fr-nav-item.is-active .fr-nav-ico { color: var(--vermilion); }
.fr-nav-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fr-nav-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.fr-nav-item.is-active .fr-nav-label { color: var(--vermilion); }
.fr-nav-jp { font-family: var(--font-jp); font-size: 11px; color: var(--ink-mute); }
.fr-body { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.form-rules .rule-cat { scroll-margin-top: 88px; }
@media (max-width: 860px) {
  .form-rules { grid-template-columns: 1fr; gap: 14px; }
  .fr-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .fr-nav-title { width: 100%; padding: 0 0 4px; }
  .fr-nav-item { padding: 6px 10px; }
  .fr-nav-jp { display: none; }
}

/* ── verbs.html: verb library — sticky filter sidebar + list ── */
.verb-lib { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 30px; align-items: start; margin-top: 6px; }
.verb-lib .verb-controls { position: sticky; top: 78px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.verb-lib .verb-search { max-width: none; width: 100%; flex: none; }
.verb-lib .filter-group { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.verb-lib .filter-group::before { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: 3px; }
.verb-lib .filter-group[data-filter="group"]::before { content: "Verb group"; }
.verb-lib .filter-group[data-filter="jlpt"]::before { content: "JLPT level"; }
.verb-lib .filter-btn { text-align: left; width: 100%; padding: 8px 12px; }
@media (max-width: 860px) {
  .verb-lib { grid-template-columns: 1fr; gap: 14px; }
  .verb-lib .verb-controls { position: static; }
  .verb-lib .filter-group { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .verb-lib .filter-group::before { width: 100%; }
  .verb-lib .filter-btn { width: auto; }
}

/* ── No dashed "tap for meaning" underline on jp-terms in ANY heading / title /
   label — they stay clickable (class + data-meaning intact); only inline PROSE
   and example chips keep the dashed cue. Covers the shared chrome (brand tagline,
   hero kicker/title, section headings, ghost ideograph) + the verbs page's
   card titles and form-category sidebar. ── */
.brand-sub .jp-term, .kicker .jp-term, .hero h1 .jp-term,
h1 .jp-term, h2 .jp-term, h3 .jp-term, h4 .jp-term,
.section-head .jp-term, .rule-cat-head .jp-term, .rule-head .jp-term,
.vg-jp .jp-term, .vg-name .jp-term, .ghost-ideo .jp-term,
.fr-nav .jp-term, .fr-nav-title .jp-term,
.brand-sub .jp-term:hover, .kicker .jp-term:hover, .hero h1 .jp-term:hover,
h1 .jp-term:hover, h2 .jp-term:hover, h3 .jp-term:hover, h4 .jp-term:hover,
.section-head .jp-term:hover, .rule-cat-head .jp-term:hover, .rule-head .jp-term:hover,
.vg-jp .jp-term:hover, .vg-name .jp-term:hover, .ghost-ideo .jp-term:hover,
.fr-nav .jp-term:hover, .fr-nav-title .jp-term:hover { border-bottom: none; }

/* ── Grouped-grid pages: shared category sidebar filter (counters, keigo, radicals,
   pitch-accent, onomatopoeia, cultural-notes, idioms, numbers-time) — injected by
   grouped-sidebar.js, reuses the .fr-nav sidebar styles above. ── */
.gg-lib { display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 30px; align-items: start; margin-top: 6px; }
.gg-lib > .counter-grid-grouped { min-width: 0; }
@media (max-width: 860px) {
  .gg-lib { grid-template-columns: 1fr; gap: 14px; }
}