/* ==========================================================================
   和 — the layer that gives the site its rooted, public-service character.
   Loaded last. Overrides where the base components read too "landing-page".
   Motifs: 帯 (masthead rule), 罫 (hairline rules), 麻の葉 (faint texture),
   明朝 (serif headings), 朱 (a single vermilion accent).
   ========================================================================== */

/* ---- Masthead band ------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top: 3px solid var(--rule);
  border-bottom: 1px solid var(--line-strong);
}

.brand__name {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-900);
}

.brand__tagline {
  color: var(--ink-500);
}

/* the seal mark sits like a stamp */
.brand__mark {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.header-nav a {
  font-family: var(--font-sans);
  color: var(--ink-700);
}

.header-nav a[aria-current="page"] {
  color: var(--primary-700);
  background: var(--surface-indigo);
  box-shadow: inset 0 -2px 0 var(--rule);
  border-radius: var(--radius-xs);
}

.lang__button {
  border-radius: var(--radius-sm);
  border-color: var(--line-strong);
  background: var(--surface);
}

.icon-btn {
  border-radius: var(--radius-sm);
}

/* ---- Eyebrow — a quiet label with a vermilion tick ---------------- */
.eyebrow {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary-700);
  gap: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 3px;
  height: 0.95em;
  background: var(--seal-600);
  flex: none;
}

.eyebrow svg {
  display: none;
}

/* ---- Section heading — 見出し罫 ---------------------------------- */
.section__title,
.page-hero__title {
  font-family: var(--font-serif);
  letter-spacing: 0;
}

:lang(ja) .section__title,
:lang(ja) .page-hero__title {
  font-family: var(--font-serif-jp);
}

.section__head {
  position: relative;
}

.section__title {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: inset 0 -3px 0 -2px var(--rule);
}

.section__intro {
  color: var(--ink-600);
  font-size: var(--text-lg);
}

/* ---- Interior page header --------------------------------------- */
.page-hero {
  padding-top: var(--space-5);
}

.page-hero__title {
  margin-top: var(--space-3);
  line-height: 1.2;
}

.page-hero__lead {
  color: var(--ink-600);
}

.breadcrumb {
  font-family: var(--font-sans);
}

/* ---- Home hero — asanoha behind the journey diagram ------------- */
.hero {
  position: relative;
  padding-top: var(--space-9);
}

.hero__grid > :last-child {
  position: relative;
}

@media (min-width: 880px) {
  .hero__grid > :last-child::before {
    content: "";
    position: absolute;
    inset: -28px -28px -28px -8px;
    background-image: var(--asanoha);
    background-size: 108px auto;
    opacity: 0.06;
    z-index: 0;
    pointer-events: none;
  }
  .hero__grid > :last-child > * {
    position: relative;
    z-index: 1;
  }
}

/* The journey sits on the paper (and the asanoha ground), not in a card. */
.hero .figure {
  margin: 0;
}

.hero .figure__frame {
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
}

.hero .figure__caption {
  margin-top: var(--space-5);
  padding-left: var(--space-3);
}

.hero .flow__label {
  font-size: var(--text-lg);
}

@media (min-width: 880px) {
  .hero .flow__node {
    padding-bottom: var(--space-7);
  }
}

.hero .eyebrow {
  font-size: var(--text-sm);
}

/* ---- Buttons — squarer, calmer -------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn:active {
  transform: none;
}

.btn--primary {
  background: var(--primary-600);
  color: var(--ink-on-primary);
  border-color: var(--primary-700);
}

.btn--primary:hover {
  background: var(--primary-700);
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--primary-700);
}

.btn--secondary:hover {
  border-color: var(--primary-400);
  background: var(--surface);
}

.btn--ghost {
  color: var(--primary-700);
}

.btn--ghost:hover {
  background: var(--surface-indigo);
}

/* ---- Cards — a bound-document feel --------------------------- */
.card {
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.card--link:hover {
  transform: none;
  border-color: var(--primary-400);
  box-shadow: none;
  background: var(--surface-indigo);
}

.card__icon {
  background: var(--surface-indigo);
  color: var(--primary-700);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--primary-100);
}

.card__title {
  font-family: var(--font-serif);
  font-weight: 600;
}

:lang(ja) .card__title {
  font-family: var(--font-serif-jp);
}

/* ---- Category tiles ---------------------------------------- */
.category-tile {
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: var(--font-sans);
}

.category-tile:hover {
  border-color: var(--primary-400);
  box-shadow: inset 3px 0 0 var(--rule);
  background: var(--surface);
}

.category-tile svg {
  color: var(--primary-700);
}

/* ---- Pills / chips ---------------------------------------- */
.pill,
.chip {
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
}

.pill--type {
  background: var(--surface-indigo);
  border-color: var(--primary-100);
  color: var(--primary-800);
}

.chip--active {
  background: var(--primary-600);
  border-color: var(--primary-700);
  color: var(--ink-on-primary);
}

/* ---- Key callout — an official "要点" notice --------------- */
.callout {
  border-radius: var(--radius-md);
}

.callout--info {
  background: var(--surface-indigo);
  border-color: var(--primary-100);
}

.callout--key {
  position: relative;
  background: var(--surface-inverse);
  border: 1px solid var(--surface-inverse);
  border-left: 4px solid var(--seal-600);
  color: #efeee7;
  padding-top: var(--space-5);
}

.callout--key::before {
  content: "要点 · KEY POINT";
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--surface-inverse);
  background: var(--seal-600);
  border-radius: 0 0 var(--radius-sm) 0;
}

.callout--key .callout__icon {
  display: none;
}

.callout--key .callout__body {
  grid-column: 1 / -1;
  color: #e7e5db;
}

.callout--key .callout__body > strong {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lg);
  color: #fffdf8;
}

:lang(ja) .callout--key .callout__body > strong {
  font-family: var(--font-serif-jp);
}

/* ---- Meta / trust bar — solid rule, not dashed ------------- */
.meta-bar {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-sans);
}

/* ---- Search box ------------------------------------------ */
.search-box__field {
  border-radius: var(--radius-sm);
  border-color: var(--line-strong);
  background: var(--surface);
}

.search-box__field:focus-within {
  border-color: var(--primary-500);
}

.search-box input,
.search-suggest,
.lang__menu {
  font-family: var(--font-sans);
}

.search-suggest,
.lang__menu {
  border-radius: var(--radius-md);
  border-color: var(--line-strong);
}

/* ---- Figure frames — like a plate in a manual ------------ */
.figure__frame {
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.figure__caption {
  font-family: var(--font-sans);
  color: var(--ink-500);
  border-left: 2px solid var(--line-strong);
  padding-left: var(--space-3);
}

/* ---- Timeline numerals — indigo, serif ------------------ */
.timeline__num,
.quiz__num {
  border-radius: var(--radius-sm);
}

.timeline__num {
  background: var(--primary-600);
  font-family: var(--font-serif);
  font-weight: 600;
}

.timeline__step--highlight .timeline__num {
  background: var(--seal-600);
}

/* Flow journey — Mincho labels on the spine (see components.css) */
:lang(ja) .flow__label {
  font-family: var(--font-serif-jp);
  letter-spacing: 0.02em;
}

/* ---- Tables ------------------------------------------- */
.table-wrap {
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
}

table.data thead th {
  background: var(--surface-muted);
  font-family: var(--font-sans);
  color: var(--ink-700);
}

table.data th[scope="row"] {
  font-family: var(--font-sans);
}

/* ---- Accordion / support matrix -------------------------- */
.accordion,
.support-matrix,
.kv-list,
.table-cards {
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
}

.table-cards {
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--surface);
  font-size: var(--text-sm);
}

.accordion__trigger,
.table-cards__title {
  font-family: var(--font-serif);
  font-weight: 600;
}

:lang(ja) .accordion__trigger,
:lang(ja) .table-cards__title {
  font-family: var(--font-serif-jp);
}

/* ---- Result card (diagnostics) -------------------------- */
.result-card {
  border-color: var(--primary-200);
  border-radius: var(--radius-md);
}

.result-card__head {
  background: var(--surface-inverse);
}

.result-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
}

:lang(ja) .result-card__title {
  font-family: var(--font-serif-jp);
}

/* ---- Bottom navigation --------------------------------- */
.bottom-nav {
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border-top: 1px solid var(--line-strong);
}

.bottom-nav a {
  font-family: var(--font-sans);
  color: var(--ink-500);
}

.bottom-nav a[aria-current="page"] {
  color: var(--primary-700);
}

.bottom-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--rule);
}

.bottom-nav a {
  position: relative;
}

/* ---- Footer — asanoha, indigo rule --------------------- */
.site-footer {
  border-top: 3px solid var(--rule);
  background: var(--surface);
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--asanoha);
  background-size: 120px auto;
  opacity: 0.05;
  pointer-events: none;
}

.site-footer__inner,
.footer-disclaimer {
  position: relative;
}

.footer-col h4 {
  font-family: var(--font-sans);
  color: var(--ink-500);
}

.footer-col a,
.footer-disclaimer {
  font-family: var(--font-sans);
}

.footer-disclaimer {
  border-top: 1px solid var(--line-strong);
}

.footer-disclaimer__liability {
  border-left: 3px solid var(--seal-600);
  padding-left: var(--space-3);
  color: var(--ink-600);
}

/* ---- Language notice ---------------------------------- */
.lang-notice {
  background: var(--surface-indigo);
  border: 1px solid var(--primary-100);
  border-left: 3px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--primary-800);
  font-family: var(--font-sans);
}

/* ---- Store Mode — a clean counter card ---------------- */
.storemode__card {
  border-color: var(--ink-900);
  border-radius: var(--radius-md);
}

.storemode__jp {
  font-family: var(--font-serif-jp);
}

/* ---- Prose headings inside guide bodies --------------- */
.prose h2,
.prose h3 {
  font-family: var(--font-serif);
}

:lang(ja) .prose h2,
:lang(ja) .prose h3 {
  font-family: var(--font-serif-jp);
}

/* ---- Ad slot — clearly marked, never flashy ----------- */
.ad-slot {
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* ---- Annotation markers (campaign) — indigo not amber - */
.annot {
  border-left-color: var(--rule);
  border-radius: var(--radius-sm);
}

.annot__marker {
  background: var(--rule);
  border-radius: var(--radius-xs);
  font-family: var(--font-serif);
}

/* ---- Hierarchy diagram tiers ------------------------- */
.hierarchy__level {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Japanese line-breaking — never shatter words character-by-character.
   ========================================================================== */
:lang(ja) {
  word-break: normal;
  overflow-wrap: normal;
  line-break: normal;
}

/* CJK: break between phrases, not inside them */
:lang(ja) table.data td,
:lang(ja) table.data th,
:lang(ja) .kv-list__val,
:lang(ja) .support-row__label,
:lang(ja) .compare__list li,
:lang(ja) .card__desc,
:lang(ja) .explain-item__value,
:lang(ja) .timeline__desc {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Status labels and small pills must never wrap */
.status,
.status-badge,
.pill,
.proc-badge {
  white-space: nowrap;
}

.status > span,
.status-badge > span {
  white-space: nowrap;
}

/* Data tables: give columns room and scroll rather than squeeze.
   Wide comparison tables (7+ columns) get extra width, more in Japanese. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.data {
  min-width: 720px;
}

table.data th {
  white-space: nowrap;
}

table.data:has(> thead th:nth-child(6)) {
  min-width: 1000px;
}

table.data:has(> thead th:nth-child(8)) {
  min-width: 1140px;
}

:lang(ja) table.data:has(> thead th:nth-child(6)) {
  min-width: 1140px;
}

:lang(ja) table.data:has(> thead th:nth-child(8)) {
  min-width: 1320px;
}

/* the "best for" / sentence column can wrap normally */
table.data td:last-child {
  white-space: normal;
  min-width: 12rem;
}

/* a hint that the table scrolls sideways on small screens
   (tables that become accordion cards on phones don't need it) */
@media (max-width: 720px) {
  .table-wrap:not(.has-cards) {
    position: relative;
  }
  .table-wrap:not(.has-cards)::after {
    content: "→";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 12px;
    color: var(--ink-300);
    pointer-events: none;
  }
}

/* ---- Selection ------------------------------------- */
::selection {
  background: var(--primary-100);
  color: var(--ink-900);
}