/*
 * Shared visual language for the public course surfaces.
 * Calibrated to the host JLPT site: crisp white cards, quiet grey canvas,
 * one green action colour and a compact CJK sans-serif hierarchy.
 */
:where(.jmt-app, .jmt-about, .jmt-catalog) {
  --jmt-brand: #2aae36;
  --jmt-brand-dark: #238d2c;
  --jmt-brand-soft: #edf8ee;
  --jmt-ui-ink: #3f454d;
  --jmt-ui-muted: #747b84;
  --jmt-ui-canvas: #f4f6f8;
  --jmt-ui-surface: #fff;
  --jmt-ui-line: #e3e7eb;
  --jmt-ui-night: #242930;
  --jmt-ui-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --jmt-ui-shadow: 0 8px 24px rgba(38, 45, 54, .07);
  color: var(--jmt-ui-ink);
  font-family: var(--jmt-ui-font);
  -webkit-font-smoothing: antialiased;
}

:where(.jmt-app, .jmt-about, .jmt-catalog) :where(button, input, select, textarea) { font-family: inherit; }
:where(.jmt-app, .jmt-about, .jmt-catalog) :where(a, button) { transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
:where(.jmt-app, .jmt-about, .jmt-catalog) :where(a, button, input):focus-visible { outline: 3px solid rgba(42, 174, 54, .28); outline-offset: 3px; }

/* Keep all three public entry points aligned directly below the site header. */
body:has(.jmt-about) main#wp--skip-link--target,
body:has(.jmt-app) main#wp--skip-link--target,
body:has(.jmt-catalog) main#wp--skip-link--target { margin-block-start: 0 !important; }
body:has(.jmt-about) main#wp--skip-link--target > .wp-block-group,
body:has(.jmt-app) main#wp--skip-link--target > .wp-block-group,
body:has(.jmt-catalog) main#wp--skip-link--target > .wp-block-group { padding-block-start: 0 !important; }
body:has(.jmt-about) .wp-block-post-content,
body:has(.jmt-app) .wp-block-post-content,
body:has(.jmt-catalog) .wp-block-post-content { margin-block-start: 0 !important; }

/* Course introduction page */
.jmt-about {
  --ink: var(--jmt-ui-ink);
  --paper: var(--jmt-ui-canvas);
  --signal: var(--jmt-brand);
  --blue: var(--jmt-brand);
  --line: var(--jmt-ui-line);
  font-family: var(--jmt-ui-font);
}
.jmt-about-hero {
  min-height: 620px;
  border: 1px solid var(--jmt-ui-line);
  border-radius: 12px;
  background: var(--jmt-ui-canvas);
}
.jmt-about-eyebrow,
.jmt-about-section-head > p,
.jmt-about-cta > p {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--jmt-brand-soft);
  color: var(--jmt-brand-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
}
.jmt-about-cta > p { margin-right: auto; margin-left: auto; }
.jmt-about-section-head > p { min-height: 32px; padding: 5px 10px; font-size: 16px; }
.jmt-about-copy h1,
.jmt-about-section-head h2,
.jmt-about-fit h2,
.jmt-about-cta h2,
.jmt-about-preview-list strong {
  font-family: var(--jmt-ui-font);
  font-weight: 700;
  letter-spacing: -.035em;
}
.jmt-about-copy h1 { font-size: clamp(46px, 4.8vw, 68px); line-height: 1.12; }
.jmt-about-copy h1 span { color: var(--jmt-brand); }
.jmt-about-lead { color: #555c65; font-size: clamp(16px, 1.25vw, 18px); }
.jmt-about-proof,
.jmt-about-copy > small {
  color: #5c646d;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}
.jmt-about-primary {
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--jmt-brand);
  border-radius: 8px;
  background: var(--jmt-brand);
  box-shadow: 0 4px 12px rgba(42, 174, 54, .18);
}
.jmt-about-primary:hover { border-color: var(--jmt-brand-dark); background: var(--jmt-brand-dark); }
.jmt-about-actions > a:not(.jmt-about-primary) { color: var(--jmt-ui-ink); }
.jmt-about-agenda {
  padding: 26px 30px 30px;
  border: 1px solid var(--jmt-ui-line);
  border-top: 4px solid var(--jmt-brand);
  border-radius: 10px;
  background: var(--jmt-ui-surface);
  color: var(--jmt-ui-ink);
  box-shadow: var(--jmt-ui-shadow);
  transform: none;
}
.jmt-about-agenda header { border-bottom-color: var(--jmt-ui-line); color: #5c646d; font-size: 14px; font-weight: 600; }
.jmt-about-agenda header span { background: var(--jmt-brand); box-shadow: 0 0 0 4px rgba(42, 174, 54, .12); }
.jmt-about-agenda header b,
.jmt-about-agenda b { color: var(--jmt-ui-ink); font-weight: 700; }
.jmt-about-agenda header em { color: #5c646d; }
.jmt-about-agenda li { border-bottom-color: var(--jmt-ui-line); }
.jmt-about-agenda time { color: var(--jmt-brand-dark); font-family: var(--jmt-ui-font); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jmt-about-agenda b { font-size: 16px; }
.jmt-about-agenda small { color: #5c646d; font-size: 15px; font-weight: 500; line-height: 1.6; }
.jmt-about-metrics { gap: 12px; padding: 12px 0; border: 0; background: var(--jmt-ui-canvas); }
.jmt-about-metrics article { border: 1px solid var(--jmt-ui-line) !important; border-radius: 10px; box-shadow: 0 3px 12px rgba(38, 45, 54, .04); }
.jmt-about-metrics strong { color: var(--jmt-brand); font-family: var(--jmt-ui-font); font-size: clamp(24px, 2.4vw, 34px); font-variant-numeric: tabular-nums; }
.jmt-about-metrics span { color: #5c646d; font-size: 15px; font-weight: 600; line-height: 1.5; }
.jmt-about-overview { background: var(--jmt-ui-surface); border-bottom-color: var(--jmt-ui-line); }
.jmt-about-overview .jmt-about-metrics { background: transparent; }
.jmt-about-overview-note { color: #5c646d; font-size: 15px; font-weight: 500; line-height: 1.65; }
.jmt-about-outcomes { background: var(--jmt-ui-canvas); border-bottom-color: var(--jmt-ui-line); }
.jmt-about-outcome-grid article { border-color: var(--jmt-ui-line); border-radius: 10px; box-shadow: 0 3px 12px rgba(38, 45, 54, .04); }
.jmt-about-outcome-grid article > span { color: var(--jmt-brand-dark); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jmt-about-outcome-grid h3 { color: var(--jmt-ui-ink); font-size: 21px; font-weight: 700; line-height: 1.4; }
.jmt-about-outcome-grid p { color: #5c646d; font-size: 16px; font-weight: 500; line-height: 1.65; }
.jmt-about-section-head h2,
.jmt-about-fit h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.3; }
.jmt-about-features span {
  border-radius: 8px;
  background: var(--jmt-brand-soft);
  color: var(--jmt-brand-dark);
  font-size: 14px;
  font-weight: 700;
}
.jmt-about-features h3 { color: var(--jmt-ui-ink); font-size: 20px; }
.jmt-about-features p,
.jmt-about-map > div:last-child > p { color: #5c646d; font-weight: 500; }
.jmt-about-features p { font-size: 16px; line-height: 1.65; }
.jmt-about-listen { background: var(--jmt-ui-surface); }
.jmt-about-listen .jmt-about-section-head > span,
.jmt-about-listen-flow p { color: #5c646d; font-size: 16px; font-weight: 500; line-height: 1.65; }
.jmt-about-listen-flow li { border-color: var(--jmt-ui-line); border-radius: 10px; background: var(--jmt-ui-canvas); }
.jmt-about-listen-flow li > span { border: 1px solid var(--jmt-ui-line); border-radius: 8px; color: var(--jmt-brand-dark); font-size: 14px; font-variant-numeric: tabular-nums; }
.jmt-about-listen-flow h3 { color: var(--jmt-ui-ink); font-size: 20px; font-weight: 700; line-height: 1.4; }
.jmt-about-map > div:last-child > p { font-size: 15px; line-height: 1.65; }
.jmt-about-map li { color: #4d555e; font-size: 17px; font-weight: 500; }
.jmt-about-preview { background: var(--jmt-ui-canvas); }
.jmt-about-preview .jmt-about-section-head > a { color: var(--jmt-brand-dark); }
.jmt-about-preview-list > a {
  border: 1px solid var(--jmt-ui-line);
  border-radius: 8px;
  color: var(--jmt-ui-ink);
  box-shadow: 0 3px 12px rgba(38, 45, 54, .04);
}
.jmt-about-preview-list > a:hover { border-color: var(--jmt-brand); box-shadow: var(--jmt-ui-shadow); transform: none; }
.jmt-about-preview-list span { color: var(--jmt-brand-dark); font-family: var(--jmt-ui-font); font-size: 14px; font-weight: 700; }
.jmt-about-preview-list strong { font-size: 22px; }
.jmt-about-preview-list small { color: #5c646d; font-size: 15px; font-weight: 500; line-height: 1.6; }
.jmt-about-fit article { background: var(--jmt-brand); }
.jmt-about-fit article.is-muted { background: var(--jmt-ui-canvas); }
.jmt-about-fit article > p {
  width: fit-content;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
}
.jmt-about-fit article.is-muted > p {
  background: #dff2e1;
  color: #1f6f27;
}
.jmt-about-cta { border-top: 4px solid var(--jmt-brand); background: var(--jmt-ui-surface); color: var(--jmt-ui-ink); }
.jmt-about-cta h2 { font-size: clamp(38px, 4vw, 56px); }
.jmt-about-cta > span { color: #5c646d; font-size: 16px; font-weight: 500; line-height: 1.65; }
.jmt-about-cta > div > a:not(.jmt-about-primary) { color: var(--jmt-ui-ink); }

/* Published course catalog */
.jmt-catalog {
  --jmt-catalog-ink: var(--jmt-ui-ink);
  --jmt-catalog-paper: var(--jmt-ui-canvas);
  --jmt-catalog-blue: var(--jmt-brand);
  --jmt-catalog-signal: var(--jmt-brand);
  --jmt-catalog-line: var(--jmt-ui-line);
  font-family: var(--jmt-ui-font);
}
.jmt-catalog-head {
  padding: clamp(46px, 6vw, 82px);
  border: 1px solid var(--jmt-ui-line);
  border-top: 4px solid var(--jmt-brand);
  border-radius: 12px 12px 0 0;
  background: var(--jmt-ui-canvas);
}
.jmt-catalog-head p { color: var(--jmt-brand); font-size: 13px; letter-spacing: .06em; }
.jmt-catalog-head h1 { font-family: var(--jmt-ui-font); font-size: clamp(44px, 4.8vw, 68px); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; }
.jmt-catalog-head h1 span { color: var(--jmt-brand); }
.jmt-catalog-head small,
.jmt-catalog-head dt { color: var(--jmt-ui-muted); }
.jmt-catalog-head dl { padding: 4px 18px; border: 1px solid var(--jmt-ui-line); border-radius: 10px; background: var(--jmt-ui-surface); box-shadow: 0 3px 12px rgba(38, 45, 54, .04); }
.jmt-catalog-head dl > div { border-bottom-color: var(--jmt-ui-line); }
.jmt-catalog-head dd { color: var(--jmt-brand-dark); font-family: var(--jmt-ui-font); font-variant-numeric: tabular-nums; }
.jmt-catalog-links { border-color: var(--jmt-ui-line); color: var(--jmt-ui-muted); }
.jmt-catalog-links span { color: var(--jmt-brand-dark); }
.jmt-catalog-grid { gap: 12px; padding: 12px; border: 0; background: var(--jmt-ui-canvas); }
.jmt-catalog-grid article { border: 0; }
.jmt-catalog-grid article > a {
  min-height: 320px;
  border: 1px solid var(--jmt-ui-line);
  border-radius: 10px;
  color: var(--jmt-ui-ink);
  box-shadow: 0 3px 12px rgba(38, 45, 54, .04);
}
.jmt-catalog-grid article > a:hover { border-color: var(--jmt-brand); background: var(--jmt-ui-surface); box-shadow: var(--jmt-ui-shadow); }
.jmt-catalog-meta { color: var(--jmt-ui-muted); font-family: var(--jmt-ui-font); font-variant-numeric: tabular-nums; }
.jmt-catalog-meta span { color: var(--jmt-brand); letter-spacing: .06em; }
.jmt-catalog-grid h2 { margin-top: 42px; font-family: var(--jmt-ui-font); font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.02em; }
.jmt-catalog-grid p,
.jmt-catalog-grid footer span { color: var(--jmt-ui-muted); }
.jmt-catalog-grid li { border-color: #cfe7d2; border-radius: 6px; background: var(--jmt-brand-soft); color: var(--jmt-brand-dark); }
.jmt-catalog-grid footer b { color: var(--jmt-brand-dark); }
.jmt-catalog-empty strong { font-family: var(--jmt-ui-font); }

/* Individual course page */
.jmt-app {
  --jmt-night: var(--jmt-ui-night);
  --jmt-panel: #2b3038;
  --jmt-panel-2: #333943;
  --jmt-ember: var(--jmt-brand);
  --jmt-ember-dark: var(--jmt-brand-dark);
  --jmt-mint: #52bd5d;
  --jmt-paper: var(--jmt-ui-canvas);
  --jmt-ink: var(--jmt-ui-ink);
  --jmt-slate: var(--jmt-ui-muted);
  --jmt-line: var(--jmt-ui-line);
  --jmt-serif: var(--jmt-ui-font);
  --jmt-sans: var(--jmt-ui-font);
  --jmt-mono: var(--jmt-ui-font);
  font-family: var(--jmt-ui-font);
}
.jmt-btn {
  min-height: 44px;
  border-radius: 8px;
  letter-spacing: 0;
  box-shadow: none;
}
.jmt-btn:hover { transform: none; }
.jmt-btn-primary,
.jmt-btn-danger { background: var(--jmt-brand); }
.jmt-btn-primary:hover,
.jmt-btn-danger:hover { background: var(--jmt-brand-dark); }
.jmt-kicker { color: var(--jmt-brand); font-family: var(--jmt-ui-font); font-size: 13px; letter-spacing: .06em; text-transform: none; }
.jmt-intro {
  min-height: 520px;
  border-color: var(--jmt-ui-line);
  border-radius: 12px;
  background: var(--jmt-ui-canvas);
}
.jmt-intro-minimal {
  min-height: 420px;
  border-color: var(--jmt-ui-line);
  background: var(--jmt-ui-surface);
}
.jmt-intro-minimal h1 {
  color: var(--jmt-ui-ink);
  font-family: var(--jmt-ui-font);
  font-weight: 700;
}
.jmt-intro-minimal .jmt-btn-primary {
  box-shadow: 0 5px 16px rgba(42, 174, 54, .16);
}
.jmt-intro-copy h1 { font-family: var(--jmt-ui-font); font-size: clamp(38px, 4vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.jmt-intro-copy h1 span { color: var(--jmt-brand); }
.jmt-lead { color: #555c65; font-size: clamp(16px, 1.25vw, 18px); }
.jmt-intro-board {
  border: 1px solid var(--jmt-ui-line);
  border-top: 4px solid var(--jmt-brand);
  border-radius: 10px;
  background: var(--jmt-ui-surface);
  color: var(--jmt-ui-ink);
  box-shadow: var(--jmt-ui-shadow);
  transform: none;
}
.jmt-intro-board::after { display: none; }
.jmt-board-header { border-bottom-color: var(--jmt-ui-line); color: var(--jmt-ui-muted); font-family: var(--jmt-ui-font); }
.jmt-live-dot { background: var(--jmt-brand); box-shadow: 0 0 0 4px rgba(42, 174, 54, .12); }
.jmt-board-title small,
.jmt-intro-board li > span,
.jmt-intro-board time { color: var(--jmt-ui-muted); font-family: var(--jmt-ui-font); }
.jmt-board-title strong { color: var(--jmt-ui-ink); font-family: var(--jmt-ui-font); font-size: clamp(23px, 2vw, 30px); }
.jmt-intro-board li { border-top-color: var(--jmt-ui-line); }
.jmt-course-nav { border-color: var(--jmt-ui-line); border-radius: 8px !important; color: var(--jmt-ui-muted); box-shadow: 0 3px 12px rgba(38, 45, 54, .04); }
.jmt-course-nav > span { font-family: var(--jmt-ui-font); }
.jmt-course-nav a:hover { color: var(--jmt-brand-dark); }
.jmt-meeting { border-color: #343a43; border-radius: 12px; box-shadow: 0 10px 28px rgba(24, 28, 34, .14); }
.jmt-person { border-radius: 8px; }
.jmt-person.is-speaking,
.jmt-person[data-person="learner"].is-speaking { border-color: var(--jmt-brand); box-shadow: 0 0 0 1px var(--jmt-brand); transform: none; }
.jmt-person[data-person="learner"].is-speaking .jmt-levels i { background: var(--jmt-brand); }
.jmt-transcript-panel,
.jmt-agenda { border-radius: 8px; }
.jmt-panel-label span:last-child { color: #8bd291; }
.jmt-agenda li.is-done > span { background-color: var(--jmt-brand); }
.jmt-response { border-top-color: #3f6345; background: #292f2e; }
.jmt-response-head b { color: #8bd291; }
.jmt-choices button { border-radius: 6px; }
.jmt-choices button:hover,
.jmt-choices button.is-selected { border-color: var(--jmt-brand); background: rgba(42, 174, 54, .12); }
.jmt-agenda li.is-current > span { background: var(--jmt-brand); box-shadow: 0 0 0 4px rgba(42, 174, 54, .12); }
.jmt-seekbar input[type="range"] { accent-color: var(--jmt-brand); }
.jmt-jump { border-radius: 6px; }
.jmt-jump:hover { border-color: var(--jmt-brand); }
.jmt-round:hover,
.jmt-round.is-on { border-color: #4c7252; background: #2f3d32; color: #93d498; }
.jmt-quiz,
.jmt-report { border-radius: 12px; }
.jmt-quiz h2,
.jmt-report h2 { font-family: var(--jmt-ui-font); font-weight: 700; }
.jmt-quiz fieldset { border-radius: 8px; }
.jmt-quiz legend > span { color: #8bd291; font-family: var(--jmt-ui-font); }
.jmt-quiz label span { border-radius: 6px; }
.jmt-quiz label input:checked + span { border-color: var(--jmt-brand); background: var(--jmt-brand); }
.jmt-total-score strong { font-family: var(--jmt-ui-font); }
.jmt-total-score i { border-color: var(--jmt-brand); border-left-color: transparent; border-bottom-color: transparent; }
.jmt-component-list article > i span { background: var(--jmt-brand); }
.jmt-study { border-color: var(--jmt-ui-line); border-radius: 12px; background: var(--jmt-ui-canvas); }
.jmt-study h2 { font-family: var(--jmt-ui-font); font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.02em; }
.jmt-study h2 small { font-family: var(--jmt-ui-font); }
.jmt-word-chips button { border-radius: 6px; }
.jmt-word-chips button:hover,
.jmt-word-chips button.is-active { border-color: var(--jmt-brand); background: var(--jmt-brand); }
.jmt-word-detail { border-radius: 10px; box-shadow: 0 6px 18px rgba(38, 45, 54, .06); }
.jmt-word-identity h3 { font-family: var(--jmt-ui-font); font-size: 36px; }
.jmt-word-identity b { color: var(--jmt-brand-dark); }
.jmt-examples > div:first-child,
.jmt-examples > article > span { font-family: var(--jmt-ui-font); }
.jmt-examples > div:first-child small { border-color: #b9dfbd; color: var(--jmt-brand-dark); }
.jmt-grammar > article { border-radius: 8px; }
.jmt-grammar > article > button > span { font-family: var(--jmt-ui-font); font-size: 19px; }
.jmt-toast { border-radius: 6px; }

@media (max-width: 720px) {
  .jmt-about-copy h1,
  .jmt-intro-copy h1,
  .jmt-catalog-head h1 { font-size: 38px; }
  .jmt-about-hero,
  .jmt-intro { border-radius: 10px; }
  .jmt-about-agenda,
  .jmt-intro-board { box-shadow: 0 5px 16px rgba(38, 45, 54, .07); }
  .jmt-intro-minimal { min-height: 300px; }
  .jmt-about-section-head h2,
  .jmt-about-fit h2,
  .jmt-study h2 { font-size: 24px; }
  .jmt-catalog-head { padding: 34px 20px; border-radius: 10px 10px 0 0; }
  .jmt-catalog-grid h2 { font-size: 26px; }
  .jmt-intro-board { box-shadow: 0 5px 16px rgba(38, 45, 54, .07); }
  .jmt-meeting { border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.jmt-app, .jmt-about, .jmt-catalog) *,
  :where(.jmt-app, .jmt-about, .jmt-catalog) *::before,
  :where(.jmt-app, .jmt-about, .jmt-catalog) *::after { transition-duration: .001ms !important; }
}