/* Landing page and legal pages – colours come from theme.css */
.wrap { max-width:1100px; margin:0 auto; padding:0 20px; }

/* header / hero */
.site-head { background:var(--header-bg); color:var(--header-ink); border-bottom:3px solid var(--accent); }
.site-head .wrap { padding-top:56px; padding-bottom:56px; }
.site-head h1 { margin:0 0 12px; font-size:40px; line-height:1.15; color:var(--header-ink); display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 18px; }
.site-head h1 .kanji { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif; font-weight:400; letter-spacing:4px; color:var(--header-faint); }
.site-head .lead { margin:0; color:var(--header-muted); font-size:16px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.site-head .wrap { position:relative; }
.site-nav { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; font-size:14px; }
.site-nav a[aria-current="page"] { border-bottom-width:2px; font-weight:600; }
.site-nav a { color:var(--header-ink); text-decoration:none; border-bottom:1px solid var(--accent); }
.site-nav a:hover { color:var(--header-ink); border-bottom-width:2px; }

/* slim top bar for the legal pages */
.topbar { background:var(--header-bg); border-bottom:3px solid var(--accent); }
.topbar .wrap { padding-top:14px; padding-bottom:14px; }
.topbar a { color:var(--header-ink); text-decoration:none; font-weight:600; }

/* gokyo groups */
.section-title { font-size:24px; margin:32px 0 4px; }
.section-sub { color:var(--muted); margin:0 0 20px; max-width:820px; }
.groups { display:flex; flex-direction:column; gap:20px; margin-bottom:40px; }
.group { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow-sm); scroll-margin-top:20px; }
.group-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; }
.group-head .emblem { flex:none; width:60px; height:60px; }
.group-head h3 { margin:2px 0 0; font-size:20px; }
.group-head h3 span { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif; font-weight:400; color:var(--muted); font-size:16px; margin-left:6px; }
.group-sub { margin:0; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); }
.group-desc { margin:6px 0 0; color:var(--muted); max-width:760px; }
.techs { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:10px; }
@media (max-width: 980px) { .techs { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.tech { display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); border:1px solid var(--border); border-radius:10px; padding:6px 6px 8px; background:var(--surface); }
.tech .picto { display:block; border-radius:6px; overflow:hidden; aspect-ratio:120/106; }
.tech .picto svg { display:block; width:100%; height:100%; }
.tech-name { font-size:13px; font-weight:600; line-height:1.25; padding:0 2px; }
.tech-name small { color:var(--faint); font-weight:600; margin-right:2px; }
.tech-desc { font-size:12px; line-height:1.35; color:var(--muted); padding:0 2px; flex:1; }
.tech-state { font-size:11px; color:var(--faint); padding:0 2px; }
.tech:not(.is-live) .picto { opacity:.8; }
.tech.is-live { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.tech.is-live .tech-state { color:var(--accent); font-weight:700; }
.tech-go { align-self:flex-end; line-height:0; margin-top:-2px; }
.tech-go svg { display:block; transition:transform .15s; }
.tech.is-live:hover .tech-go svg { transform:scale(1.12); }
.tech.is-live:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--accent), var(--shadow); }
.tech.is-live:hover .tech-state { color:var(--accent-hover); }
@media (max-width: 560px) { .group { padding:14px; } .group-head .emblem { width:48px; height:48px; } .techs { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* legal pages */
.legal { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px 28px; margin:20px 0 36px; }
.legal h1 { margin-top:0; font-size:28px; }
.legal h2 { font-size:18px; margin:24px 0 6px; }
.legal p, .legal li { font-size:15px; }
.legal .note { background:var(--accent-tint); border-left:4px solid var(--accent); padding:10px 14px; font-size:14px; }
.back { display:inline-block; margin-top:22px; font-size:14px; }

/* compact header for inner pages */
.site-head--compact .wrap { padding-top:36px; padding-bottom:36px; }
.site-head--compact h1 { font-size:34px; }

/* glossary */
.glossary { padding-top:24px; padding-bottom:40px; }
.g-tools { position:sticky; top:0; z-index:5; background:var(--bg); padding:12px 0 10px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.g-tools input[type=search] { width:100%; font:inherit; font-size:16px; padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); }
.g-tools input[type=search]:focus { outline:2px solid var(--accent); outline-offset:1px; }
.g-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.g-chips button { font:inherit; font-size:13px; padding:5px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; }
.g-chips button.on { background:var(--anthracite); border-color:var(--anthracite); color:var(--white); }
.g-az { display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:10px; font-size:14px; font-weight:600; }
.g-az a { text-decoration:none; }
.g-letter { scroll-margin-top:170px; }
.g-letter h2 { font-size:22px; margin:18px 0 8px; padding-bottom:4px; border-bottom:2px solid var(--accent); width:36px; }
.g-list .g-letter > .g-term { margin-bottom:10px; }
.g-term { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; scroll-margin-top:170px; }
.g-term.focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint); }
.g-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.g-name { font-weight:700; font-size:17px; }
.g-kanji { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif; font-size:17px; color:var(--muted); }
.g-cat { margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--tatami-ink); background:var(--tatami-tint); padding:2px 8px; border-radius:4px; }
.g-meaning { margin:4px 0 2px; font-weight:600; color:var(--ink); }
.g-desc { margin:0; color:var(--muted); font-size:15px; }
.g-empty { color:var(--muted); }

/* body-parts chart page */
.body-parts { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; padding-top:28px; padding-bottom:44px; align-items:start; }
.bp-chart { margin:0; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:0 2px 10px rgba(30,34,38,.06); }
.bp-chart img { display:block; width:100%; height:auto; border-radius:8px; }
.bp-side h2 { font-size:1.15rem; margin:26px 0 10px; }
.bp-downloads { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 8px; }
.btn { display:inline-block; padding:10px 18px; border-radius:999px; border:1.5px solid var(--ink); color:var(--ink); font-weight:600; text-decoration:none; }
.btn:hover { background:var(--mist, #F3F4F5); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.bp-note { color:var(--muted); font-size:.92rem; }
.bp-table { width:100%; border-collapse:collapse; font-size:.98rem; }
.bp-table th { text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:2px solid var(--border); padding:6px 8px; }
.bp-table td { padding:7px 8px; border-bottom:1px solid var(--border); }
.bp-kanji { font-size:1.25rem; font-weight:700; color:var(--accent); width:4.2em; }
.bp-g .bp-kanji { color:#5E7350; }
.bp-romaji { font-weight:700; }
@media (max-width: 860px) { .body-parts { grid-template-columns:1fr; } }

/* hamburger menu on small screens (js adds .has-menu; without js the links stay visible) */
.nav-toggle { display:none; }
@media (max-width: 720px) {
  .site-head.has-menu .nav-toggle { display:flex; align-items:center; justify-content:center; position:absolute; top:14px; right:12px;
    width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:10px; background:transparent; color:var(--header-ink); cursor:pointer; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width:20px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .2s, background .2s; }
  .nav-toggle span::before { position:absolute; top:-6px; }
  .nav-toggle span::after { position:absolute; top:6px; }
  .site-head.nav-open .nav-toggle span { background:transparent; }
  .site-head.nav-open .nav-toggle span::before { transform:translateY(6px) rotate(45deg); }
  .site-head.nav-open .nav-toggle span::after { transform:translateY(-6px) rotate(-45deg); }
  .site-head.has-menu h1 { padding-right:52px; }
  .site-head.has-menu .site-nav { display:none; }
  .site-head.has-menu.nav-open .site-nav { display:flex; flex-direction:column; gap:0; margin-top:18px; border-top:1px solid rgba(255,255,255,.18); }
  .site-head.has-menu.nav-open .site-nav a { border-bottom:1px solid rgba(255,255,255,.12); padding:13px 2px; font-size:16px; }
  .site-head.has-menu.nav-open .site-nav a[aria-current="page"] { color:var(--header-ink); box-shadow:inset 3px 0 0 var(--accent); padding-left:12px; }
  .site-head .wrap { padding-top:28px; padding-bottom:28px; }
  .site-head h1 { font-size:30px; }
}

/* classification page */
.classification { padding-top:24px; padding-bottom:40px; }
.cl-intro { max-width:820px; color:var(--muted); margin:0 0 18px; }
.cl-icon { display:inline-flex; flex:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background:var(--accent-tint); color:var(--accent); }
/* overview tree */
.cl-tree { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 20px; box-shadow:var(--shadow-sm); }
.cl-tree > ul { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 24px; }
.cl-tree ul { list-style:none; margin:0; padding:0; }
.cl-tree li ul { margin-left:19px; padding-left:14px; border-left:1px solid var(--border); }
.cl-tree a { display:flex; align-items:center; gap:8px; padding:3px 0; color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; }
.cl-tree a:hover span { color:var(--accent); text-decoration:underline; }
.cl-tree .cl-icon { width:30px; height:30px; border-radius:8px; }
.cl-tree .cl-icon svg { width:20px; height:20px; }
.cl-tree li li a { font-weight:500; }
@media (max-width: 760px) { .cl-tree > ul { grid-template-columns:1fr; } }
.cl-hint { color:var(--muted); font-size:13px; margin:12px 2px 18px; }
/* families */
.cl-family { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px; margin-bottom:20px; box-shadow:var(--shadow-sm); scroll-margin-top:16px; }
.cl-title { display:flex; gap:12px; align-items:center; margin:0 0 6px; }
.cl-title > span { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.cl-title small { flex-basis:100%; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); }
.cl-kanji { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif; font-weight:400; color:var(--muted); font-size:.85em; }
h2.cl-title b { font-size:22px; } h3.cl-title b { font-size:18px; } h4.cl-title b { font-size:16px; }
.cl-family p, .cl-sub p, .cl-leaf p { margin:4px 0 6px; color:var(--ink); max-width:820px; line-height:1.5; }
.cl-count { font-size:12px; font-weight:700; color:var(--accent) !important; margin:0 0 4px !important; }
.cl-count.is-none { color:var(--faint) !important; font-weight:600; }
.cl-children { margin-top:14px; margin-left:19px; padding-left:20px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:18px; }
.cl-children.is-flat { align-items:start; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.cl-sub { scroll-margin-top:16px; }
.cl-leaves { margin-top:10px; align-items:start; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.cl-leaf { border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:var(--bg, #fafafa); scroll-margin-top:16px; }
.cl-children.is-flat .cl-leaf .cl-icon, .cl-leaves .cl-icon { width:34px; height:34px; }
.cl-techs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cl-tech { display:inline-flex; align-items:center; gap:5px; font-size:13px; padding:3px 9px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:var(--surface); }
.cl-tech.is-live { color:var(--accent); border-color:var(--accent); font-weight:600; text-decoration:none; padding-right:4px; }
.cl-tech.is-live svg { width:16px; height:16px; }
.cl-tech.is-live:hover { background:var(--accent-tint); }
@media (max-width: 760px) { .cl-children, .cl-children.is-flat { margin-left:0; padding-left:12px; grid-template-columns:1fr; } }
.cl-top { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.cl-top .cl-intro { margin:0; flex:1 1 520px; }
.cl-download { flex:none; }
.cl-print-head, .cl-print-foot { display:none; }

/* classification as a printable A4 sheet (also used to render img/judo-classification.pdf) */
@media print {
  @page { size:A4 landscape; margin:0 0 9mm; }
  html, body { background:#F3F4F5; }
  .site-head, .site-foot, .cl-download, .cl-hint, .cl-tree { display:none !important; }
  .classification { padding:0 12mm; max-width:none; font-size:10.5pt; }
  /* header like the body-parts chart: dark band, white kanji + title, red line */
  .cl-print-head { display:flex; align-items:center; gap:7mm; margin:0 -12mm 4mm; padding:6mm 12mm 5mm; background:#1E2226; border-bottom:2mm solid var(--accent); color:#fff; }
  .cl-print-kanji { font-family:"Noto Sans CJK JP","Hiragino Sans","Yu Gothic",sans-serif; font-weight:700; font-size:30pt; line-height:1; }
  .cl-print-head b { display:block; font-size:21pt; font-weight:700; line-height:1.15; }
  .cl-print-head div span { display:block; font-size:10.5pt; color:#C9CED3; margin-top:1mm; }
  .cl-top { display:none !important; }
  .cl-intro { color:var(--muted); font-size:10pt; }
  .cl-family { box-shadow:none; padding:3mm 5mm; margin-bottom:3mm; }
  .cl-print-head.is-cont { break-before:page; padding:4mm 12mm 3.5mm; }
  .cl-print-head.is-cont .cl-print-kanji { font-size:20pt; }
  .cl-print-head.is-cont b { font-size:14pt; }
  .cl-print-head.is-cont div span { display:none; }
  .cl-family p, .cl-sub p, .cl-leaf p { font-size:9.5pt; margin:1mm 0 1.5mm; line-height:1.35; }
  .cl-children { margin-top:3mm; gap:3mm; margin-left:5mm; padding-left:5mm; }
  .cl-leaves { gap:3mm; margin-top:2mm; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .cl-children.is-flat { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3mm; }
  .cl-leaf { padding:3mm; break-inside:avoid; }
  /* sutemi-waza: heading on the left, its two classes in the right two columns – keeps the throws on one sheet */
  #sutemi-waza { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:3mm; align-items:start; }
  #sutemi-waza > .cl-title, #sutemi-waza > p { grid-column:1; }
  #sutemi-waza > .cl-leaves { grid-column:2 / 4; grid-row:1 / 4; margin-top:0; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cl-icon { width:9mm !important; height:9mm !important; }
  .cl-icon svg { width:6mm; height:6mm; }
  h2.cl-title b { font-size:15pt; } h3.cl-title b { font-size:12.5pt; } h4.cl-title b { font-size:11pt; }
  .cl-title small { font-size:7.5pt; }
  /* throws as a compact inline list */
  .cl-techs { display:block; line-height:1.45; }
  .cl-tech, .cl-tech.is-live { display:inline; white-space:nowrap; font-size:9pt; padding:0; border:0; background:none; color:var(--ink); font-weight:500; }
  .cl-tech:not(:last-child)::after { content:'\00a0·'; color:var(--faint); }
  .cl-tech svg { display:none; }
  .cl-techs { margin-top:1.2mm; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}