/* The responses stay attached to their work situation and to their own axis. */
.meaning-connections, .practice-map {
  min-width: 0;
  color: #20364b;
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.meaning-connections *, .meaning-connections *::before, .meaning-connections *::after,
.practice-map *, .practice-map *::before, .practice-map *::after {box-sizing: border-box}
.meaning-connections h2, .meaning-connections h3, .practice-map h3 {font-family: "Noto Serif JP", "Noto Serif CJK JP", "Yu Mincho", serif; font-weight: 600; line-break: strict; word-break: auto-phrase; text-wrap: balance}
.meaning-connections .mc-header {max-width: 61rem; margin-bottom: 20px}
.meaning-connections .mc-kicker {margin: 0 0 7px; color: #326b97; font-size: 1rem; font-weight: 600}
.meaning-connections h2 {margin: 0 0 16px; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.5}
.meaning-connections .mc-header > p:last-child {margin: 0; font-size: 1rem; color: #526575; line-height: 1.9}
.meaning-connections .mc-selection-note {margin: 0 0 22px; font-size: 1rem; color: #526575}
.meaning-connections .mc-empty {padding: 22px 24px; border-left: 3px solid #8ca6b9; background: #f2f6f9; font-size: 1rem; line-height: 1.9}
.meaning-connections .mc-list {display: grid; gap: 18px}
.meaning-connections .mc-item {min-width: 0; padding: 0; border: 1px solid #ccd7df; border-radius: 4px; background: #fff}
.meaning-connections .mc-item > summary {display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .46fr) 24px; align-items: center; gap: 22px; min-height: 92px; padding: 19px 24px; margin: 0; color: #20364b; list-style: none; cursor: pointer}
.meaning-connections .mc-item > summary::-webkit-details-marker {display: none}
.meaning-connections .mc-item > summary:hover {background: #f8fafc}
.meaning-connections .mc-item[open] > summary {border-bottom: 1px solid #ccd7df; background: #f2f6f9; margin: 0}
.meaning-connections .mc-item-heading {display: block; min-width: 0}
.meaning-connections .mc-item-heading > span {display: block; margin-bottom: 5px; color: #526575; font-size: 1rem; line-height: 1.7}
.meaning-connections .mc-item-heading > strong {display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.75; color: #294d70}
.meaning-connections .mc-item-response {display: block; font-size: 1rem; color: #526575; line-height: 1.8}
.meaning-connections .mc-toggle {display: inline-flex; align-items: center; justify-content: center; color: #326b97; font: 400 1.4rem/1.4 "Noto Sans JP", sans-serif}
.meaning-connections .mc-toggle::before {content: "+"}
.meaning-connections .mc-item[open] > summary .mc-toggle::before {content: "−"}
.meaning-connections .mc-body {padding: 24px}
.meaning-connections .mc-axes {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0}
.meaning-connections .mc-axis {min-width: 0; margin: 0; padding: 0; border-top: 2px solid #8fa8bb}
.meaning-connections .mc-axis-heading {padding-top: 15px; margin-bottom: 15px}
.meaning-connections .mc-axis-heading > span {display: inline-block; color: #326b97; font-size: 1rem; font-weight: 600; margin-bottom: 7px}
.meaning-connections .mc-axis-heading h3 {font-size: 1.15rem; line-height: 1.7; margin: 0}
.meaning-connections .mc-response {padding: 14px 16px; margin-bottom: 18px; background: #f2f6f9; border-left: 3px solid #9dafbd; min-width: 0}
.meaning-connections .mc-response > span {display: block; font-size: 1rem; line-height: 1.7; color: #526575; margin-bottom: 5px}
.meaning-connections .mc-response > strong {display: block; font-size: 1rem; line-height: 1.85; font-weight: 600}
.meaning-connections .mc-response.mc-used, .meaning-connections .mc-response.mc-continued {border-left-color: #326b97; background: #edf4f8}
.meaning-connections .mc-response.mc-continued {border-left-width: 4px}
.meaning-connections .mc-response.mc-partial {border-left-color: #bea263; background: #fff9e7}
.meaning-connections .mc-response.mc-na, .meaning-connections .mc-response.mc-unanswered {border: 1px dashed #aebac3; background: #fafbfc}
.meaning-connections .mc-answer-text {margin: 0; font-size: 1rem; line-height: 1.95}
.meaning-connections .mc-unanswered-text {font-size: 1rem; color: #526575; line-height: 1.85; margin: 0 0 15px}
.meaning-connections .mc-reference-content {padding-top: 2px}
.meaning-connections .mc-reference-label {margin: 0 0 8px; color: #526575; font-size: 1rem; font-weight: 600; line-height: 1.7}
.meaning-connections .mc-reference-content > p:last-child {margin: 0; font-size: 1rem; line-height: 1.95}
.meaning-connections .mc-reference {margin-top: 20px; border-top: 1px solid #ccd7df; padding-top: 5px}
.meaning-connections .mc-reference summary {min-height: 44px; padding: 9px 0; font-size: 1rem; line-height: 1.8; color: #294d70; cursor: pointer}
.meaning-connections .mc-reference p {margin: 8px 0; font-size: 1rem; line-height: 1.9; color: #526575}
.meaning-connections .mc-book {display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 7px 20px; min-height: 48px; padding-top: 18px; margin-top: 24px; border-top: 1px solid #ccd7df; color: #294d70; font-size: 1rem; line-height: 1.8; text-decoration-thickness: 1px; text-underline-offset: 4px}
.meaning-connections .mc-book > span {display: inline-flex; align-items: center; gap: 9px}
.meaning-connections :is(a, summary):focus-visible, .practice-map :is(a, summary):focus-visible {outline: 3px solid #326b97; outline-offset: 4px}

/* Comparison uses behavior counts with a shared denominator, then the actual changes. */
.practice-map.practice-map-comparison {margin-top: 24px; padding: clamp(20px, 3.2vw, 36px); border: 1px solid #ccd7df; border-radius: 4px; background: #fff}
.practice-map .pmc-header h3 {font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.6; margin: 0 0 13px}
.practice-map .pmc-header p {font-size: 1rem; line-height: 1.9; color: #526575; margin: 0}
.practice-map .pmc-empty {font-size: 1rem; line-height: 1.9; color: #526575; margin: 0}
.practice-map .pmc-counts {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 26px}
.practice-map .pmc-count {min-width: 0; padding: 22px; border-top: 2px solid #9fb0be; background: #f5f7f9}
.practice-map .pmc-count.pmc-current {border-top-color: #326b97; background: #edf4f8}
.practice-map .pmc-time {display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 15px; margin: 0; font-size: 1rem; color: #526575; line-height: 1.8}
.practice-map .pmc-time strong {font-size: 1.05rem; font-weight: 600; color: #294d70}
.practice-map .pmc-number {display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 15px 0 5px; color: #294d70; line-height: 1.4; font-variant-numeric: tabular-nums}
.practice-map .pmc-number > strong {font-size: 2.8rem; font-weight: 600}
.practice-map .pmc-number > span {font-size: 1.15rem; color: #526575}
.practice-map .pmc-count > p:not(.pmc-number):not(.pmc-time) {font-size: 1rem; margin: 8px 0 0; line-height: 1.85}
.practice-map .pmc-track {height: 13px; margin: 18px 0; background: #dfe8ee; overflow: hidden}
.practice-map .pmc-track > i {display: block; height: 100%; max-width: 100%; background: #91a7b8}
.practice-map .pmc-current .pmc-track > i {background: #326b97}
.practice-map .pmc-count .pmc-detail {padding-top: 13px; border-top: 1px solid #ccd7df; font-size: 1rem; color: #526575; line-height: 1.85}
.practice-map .pmc-changes {margin-top: 30px}
.practice-map .pmc-changes > h4 {font: 600 1.15rem/1.7 "Noto Sans JP", sans-serif; margin: 0 0 20px; color: #294d70}
.practice-map .pmc-change-list {display: grid; gap: 22px; list-style: none; margin: 0; padding: 0}
.practice-map .pmc-habit {min-width: 0; margin: 0; padding: 20px 0 0; border-top: 1px solid #ccd7df}
.practice-map .pmc-habit > header > p {font-size: 1rem; line-height: 1.7; margin: 0 0 6px; color: #526575}
.practice-map .pmc-habit h4 {font: 600 1.15rem/1.75 "Noto Sans JP", sans-serif; margin: 0; color: #20364b}
.practice-map .pmc-answer-pair {display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: start; gap: 16px; margin-top: 18px}
.practice-map .pmc-answer-pair > div {min-width: 0; padding: 16px 18px; background: #f5f7f9; border-top: 2px solid #a4b4c1}
.practice-map .pmc-answer-pair > div:last-child {background: #fff9e7; border-top-color: #c1a76c}
.practice-map .pmc-answer-pair > div > span {display: block; font-size: 1rem; line-height: 1.7; color: #526575; margin-bottom: 7px}
.practice-map .pmc-answer-pair strong {display: block; font-size: 1rem; line-height: 1.85; font-weight: 600; color: #294d70}
.practice-map .pmc-answer-pair p {font-size: 1rem; line-height: 1.9; margin: 12px 0 0}
.practice-map .pmc-arrow {padding-top: 46px; color: #819daf; font-size: 1.3rem; line-height: 1.5; text-align: center}
.practice-map .pmc-book {display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; min-height: 48px; margin-top: 14px; padding-block: 5px; color: #294d70; font-size: 1rem; line-height: 1.8; text-underline-offset: 4px}
.practice-map .pmc-more {margin-top: 22px; border-top: 1px solid #ccd7df; padding-top: 8px}
.practice-map .pmc-more > summary {min-height: 48px; padding-block: 10px; color: #294d70; font-size: 1rem; line-height: 1.8; cursor: pointer}
.practice-map .pmc-more[open] > summary {margin-bottom: 14px}
.practice-map .pmc-unchanged {margin-top: 14px; padding: 18px 20px; background: #f2f6f9; font-size: 1rem; line-height: 1.9}
.practice-map .pmc-note {padding-top: 20px; margin: 26px 0 0; border-top: 1px solid #ccd7df; color: #526575; font-size: 1rem; line-height: 1.9}

@media (max-width: 900px) {
  .meaning-connections .mc-item > summary {grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 16px}
  .meaning-connections .mc-item-response {grid-column: 1}
  .meaning-connections .mc-toggle {grid-column: 2; grid-row: 1 / 3}
  .meaning-connections .mc-axes {grid-template-columns: minmax(0, 1fr); gap: 26px}
  .meaning-connections .mc-axis {display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); gap: 14px 24px; padding-top: 18px}
  .meaning-connections .mc-axis-heading {grid-column: 1; grid-row: 1 / 3; padding: 0; margin: 0}
  .meaning-connections .mc-response {grid-column: 2; margin: 0}
  .meaning-connections .mc-answer-text, .meaning-connections .mc-reference-content, .meaning-connections .mc-unanswered-text, .meaning-connections .mc-reference {grid-column: 2; margin: 0}
  .practice-map .pmc-count {padding: 20px}
}
@media (max-width: 600px) {
  .meaning-connections h2 {font-size: 1.5rem; line-height: 1.6}
  .meaning-connections .mc-header {margin-bottom: 16px}
  .meaning-connections .mc-item > summary {padding: 17px 16px; gap: 9px 12px}
  .meaning-connections .mc-item-heading > strong {font-size: 1.1rem; line-height: 1.8}
  .meaning-connections .mc-item-response {font-size: 1rem}
  .meaning-connections .mc-body {padding: 20px 16px}
  .meaning-connections .mc-axis {display: block; padding-top: 18px}
  .meaning-connections .mc-axis-heading {margin-bottom: 15px}
  .meaning-connections .mc-axis-heading > span {margin-bottom: 5px}
  .meaning-connections .mc-axis-heading h3 {font-size: 1.1rem}
  .meaning-connections .mc-response {padding: 13px 14px; margin-bottom: 16px}
  .meaning-connections .mc-unanswered-text {margin-bottom: 14px}
  .meaning-connections .mc-reference {margin-top: 18px}
  .meaning-connections .mc-book {display: block; padding-top: 16px; margin-top: 22px}
  .meaning-connections .mc-book > span {display: flex; justify-content: space-between; margin-top: 4px}
  .meaning-connections .mc-empty {padding: 20px 18px}
  .practice-map.practice-map-comparison {padding: 22px 16px}
  .practice-map .pmc-header h3 {font-size: 1.3rem; line-height: 1.7}
  .practice-map .pmc-counts {grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 22px}
  .practice-map .pmc-count {padding: 20px 18px}
  .practice-map .pmc-number > strong {font-size: 2.5rem}
  .practice-map .pmc-number > span {font-size: 1.05rem}
  .practice-map .pmc-answer-pair {grid-template-columns: minmax(0, 1fr); gap: 8px}
  .practice-map .pmc-answer-pair > div {padding: 16px}
  .practice-map .pmc-arrow {padding: 0; line-height: 1.3; transform: rotate(90deg); justify-self: center}
  .practice-map .pmc-habit h4 {font-size: 1.1rem}
  .practice-map .pmc-book {display: block; padding-block: 6px}
  .practice-map .pmc-book > span {display: block; margin-top: 4px}
  .practice-map .pmc-note {margin-top: 22px; padding-top: 18px}
}
@media (prefers-reduced-motion: reduce) {
  .meaning-connections *, .practice-map * {scroll-behavior: auto !important; animation: none !important; transition: none !important}
}
@media (forced-colors: active) {
  .meaning-connections .mc-item, .meaning-connections .mc-response, .practice-map.practice-map-comparison {border-color: CanvasText}
  .practice-map .pmc-track > i {forced-color-adjust: none}
}
@media print {
  .meaning-connections, .practice-map {font-size: 10.5pt; line-height: 1.8}
  .meaning-connections h2 {font-size: 17pt}
  .meaning-connections .mc-item > summary {grid-template-columns: minmax(0, 1fr) 24px; padding: 14px}
  .meaning-connections .mc-item-heading > strong {font-size: 12pt}
  .meaning-connections .mc-item-heading > span, .meaning-connections .mc-item-response {font-size: 10.5pt}
  .meaning-connections .mc-body {padding: 16px}
  .meaning-connections .mc-axes {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px}
  .meaning-connections .mc-axis {display: block; padding-top: 12px}
  .meaning-connections .mc-axis-heading {margin-bottom: 10px}
  .meaning-connections .mc-response {padding: 10px; margin-bottom: 12px}
  .meaning-connections .mc-body p, .meaning-connections .mc-response > span, .meaning-connections .mc-response > strong, .meaning-connections .mc-book {font-size: 10.5pt}
  .meaning-connections .mc-axis-heading h3 {font-size: 11pt}
  .meaning-connections .mc-book {margin-top: 16px; padding-top: 12px; display: block}
  .meaning-connections .mc-item > summary {break-after: avoid}
  .meaning-connections .mc-axis {break-inside: avoid}
  .practice-map.practice-map-comparison {padding: 18px; margin-top: 18px}
  .practice-map .pmc-counts {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; break-inside: avoid}
  .practice-map .pmc-count {padding: 15px}
  .practice-map .pmc-answer-pair {grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 14px}
  .practice-map .pmc-arrow {padding-top: 35px; transform: none}
  .practice-map .pmc-habit {break-inside: avoid}
  .practice-map .pmc-note {font-size: 10.5pt}
}