/* Shared page width; horizontal gutters come from style.css .container. */
.commulingo-page .container {
    max-width: var(--content-frame);
}

.commulingo-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.commu-dict-shell { gap: 0; }

/* Page heading for assistive tech and crawlers on the dictionary pages, where
   the tab strip already names the section on screen. */
.commu-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.commulingo-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 18px;
    border-left: 4px solid var(--accent);
}

/* On the CommuLingo landing the hero is the whole masthead: name and total
   progress on top, the dictionary jumps as its bottom row. One framed block
   says what this place is, how far you are, and where to look things up —
   the shelves below then speak for themselves. */
.commulingo-hero--home {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
}

.commulingo-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.commulingo-hero-dict {
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.commulingo-hero-dict-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: var(--weight-emphasis);
    letter-spacing: 0.03em;
}

.commulingo-kicker {
    color: var(--link);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.commulingo-hero h1 {
    color: var(--text-primary);
    font-size: 1.35rem;
    margin-bottom: 4px;
}

.commulingo-hero p:last-child {
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.commulingo-total {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    display: grid;
    align-content: center;
    justify-items: center;
    row-gap: 2px;
    text-align: center;
}

.commulingo-total span {
    display: block;
    color: var(--accent);
    font-size: 1.15rem;
    font-weight: var(--weight-emphasis);
}

.commulingo-total small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.commulingo-status {
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 10px 14px;
}

.commulingo-lessons {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.commu-part-section + .commu-part-section {
    border-top: 1px solid var(--border);
}

.commu-part-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
}

.commu-part-header h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0 0 4px;
}

.commu-part-header p {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0;
}

.commu-volume-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
}

.commu-chapter-card {
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 14px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.commu-lesson-title-row {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.commu-chapter-card h2 {
    font-size: 1.05rem;
    line-height: var(--leading-snug);
    margin: 0;
}

.commu-level-badge {
    border: 1px solid var(--clr-cream-light);
    color: var(--clr-cream-light);
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: var(--weight-emphasis);
    line-height: var(--leading-none);
    padding: 5px 7px;
}

.commu-level-badge.is-basic {
    background: var(--accent-green);
}

.commu-level-badge.is-advanced {
    background: var(--accent-red);
}

.commu-lesson-summary {
    color: var(--text-secondary);
    display: -webkit-box;
    font-size: 0.88rem;
    line-height: var(--leading-snug);
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.commu-lesson-focus {
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
    display: -webkit-box;
    font-size: 0.84rem;
    line-height: var(--leading-snug);
    margin: 0;
    overflow: hidden;
    padding-left: 9px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.commu-chapter-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.commu-lesson-action {
    align-items: center;
    border: 1px solid var(--border);
    background: var(--bg-base);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-height: 74px;
    padding: 10px;
    text-align: left;
    width: 100%;
}

.commu-lesson-action:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    border-color: var(--link);
}

.commu-lesson-action.is-completed {
    background: color-mix(in srgb, var(--accent-green) 18%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--accent-green) 58%, var(--border));
}

.commu-lesson-action.is-completed:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-green) 25%, var(--bg-surface));
}

.commu-lesson-action.is-completed .commu-progress-track {
    border-color: color-mix(in srgb, var(--accent-green) 65%, var(--border));
}

.commu-lesson-action:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.commu-lesson-action.is-basic {
    box-shadow: inset 4px 0 0 var(--accent-green);
}

.commu-lesson-action.is-advanced {
    box-shadow: inset 4px 0 0 var(--accent-red);
}

.commu-lesson-action-body {
    display: grid;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.commu-lesson-action-top {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.commu-lesson-action-top strong {
    font-size: 0.88rem;
    line-height: var(--leading-tight);
}

.commu-lesson-action-top span,
.commu-lesson-action .commu-lesson-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.commu-lesson-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.commu-progress-track,
.commu-meter-track {
    height: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    overflow: hidden;
}

.commu-progress-track > span,
#commuMeterFill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.2s ease;
}

.commu-quiz {
    border: 1px solid var(--border);
    background: var(--card-bg);
}

.commu-quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    padding: 12px;
}

.commu-quiz-meter {
    flex: 1;
    max-width: 420px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.commu-question {
    padding: 24px;
}

.commu-lesson-title {
    align-items: center;
    color: var(--link);
    display: flex;
    flex-wrap: wrap;
    font-weight: 700;
    gap: 8px;
    margin-bottom: 10px;
}

.commu-intro {
    background: var(--bg-surface);
    border-left: 4px solid var(--accent);
    margin-bottom: 18px;
    padding: 16px 42px 16px 16px;
}

.commu-intro h2 {
    font-size: 1.18rem;
    margin: 0 0 10px;
}

.commu-intro-summary,
.commu-intro-focus {
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 10px;
}

.commu-intro-focus {
    color: var(--text-primary);
}

.commu-diagram {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.commu-diagram-node {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    display: grid;
    gap: 6px;
    line-height: var(--leading-snug);
    min-height: 104px;
    padding: 12px;
}

.commu-diagram-node strong {
    color: var(--link);
    font-size: 0.88rem;
    line-height: var(--leading-tight);
}

.commu-diagram-node small {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: var(--leading-snug);
}

.commu-brief {
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
}

.commu-flow,
.commu-contrast {
    grid-column: 1 / -1;
    margin: 0 0 4px;
}

.commu-flow figcaption,
.commu-contrast figcaption {
    color: var(--link);
    font-size: 0.94rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.commu-flow-track {
    align-items: stretch;
    display: flex;
    gap: 4px;
}

.commu-flow-step {
    background: var(--card-bg);
    border: 1px solid var(--border);
    display: grid;
    flex: 1 1 0;
    gap: 6px;
    line-height: var(--leading-snug);
    min-width: 0;
    padding: 12px;
}

.commu-flow-step strong {
    color: var(--link);
    font-size: 0.88rem;
    line-height: var(--leading-tight);
}

.commu-flow-step small {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: var(--leading-snug);
}

.commu-flow-arrow {
    align-self: center;
    color: var(--text-secondary);
    flex: 0 0 auto;
    font-size: 1rem;
    padding: 0 2px;
}

.commu-flow-arrow::before {
    content: '→';
}

.commu-contrast-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commu-contrast-side {
    background: var(--card-bg);
    border: 1px solid var(--border);
    display: grid;
    gap: 8px;
    padding: 12px;
    align-content: start;
}

.commu-contrast-side strong {
    color: var(--link);
    font-size: 0.88rem;
    line-height: var(--leading-tight);
}

.commu-contrast-side ul {
    color: var(--text-secondary);
    display: grid;
    font-size: 0.85rem;
    gap: 6px;
    line-height: var(--leading-snug);
    margin: 0;
    padding-left: 18px;
}

.commu-brief-section {
    border-top: 1px solid var(--border);
    display: grid;
    gap: 8px;
    padding-top: 12px;
}

.commu-brief-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.commu-brief-section h3 {
    color: var(--link);
    font-size: 0.94rem;
    margin: 0;
}

.commu-brief-section p,
.commu-brief-section ul {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: var(--leading-normal);
    margin: 0;
}

.commu-brief-section ul {
    display: grid;
    gap: 6px;
    padding-left: 18px;
}

.commu-question-focus {
    background: var(--bg-surface);
    border-left: 4px solid var(--accent);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
    margin: -2px 0 16px;
    padding: 10px 12px;
}

.commu-question h2 {
    font-size: 1.35rem;
    line-height: var(--leading-snug);
    margin-bottom: 18px;
}

.commu-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.commu-choice {
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    font: inherit;
    min-height: 56px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transform: translateY(0);
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.commu-choice:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface));
    border-color: var(--link);
    box-shadow: 0 8px 0 color-mix(in srgb, var(--accent) 18%, transparent);
    transform: translateY(-2px);
}

.commu-choice:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.commu-choice.is-correct {
    animation: commu-correct-pop 520ms ease;
    background: color-mix(in srgb, var(--accent-green) 28%, var(--bg-surface));
    border-color: var(--link);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-green) 28%, transparent), 0 10px 0 color-mix(in srgb, var(--accent-green) 18%, transparent);
    color: var(--text-primary);
}

.commu-choice.is-wrong {
    animation: commu-wrong-shake 360ms ease;
    background: color-mix(in srgb, var(--accent-red) 24%, var(--bg-surface));
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-red) 24%, transparent);
    color: var(--text-primary);
}

.commu-feedback {
    border-left: 4px solid var(--accent);
    background: color-mix(in srgb, var(--accent-green) 14%, var(--bg-surface));
    color: var(--text-secondary);
    display: grid;
    gap: 6px;
    line-height: var(--leading-snug);
    margin-bottom: 16px;
    padding: 12px 14px;
    animation: commu-feedback-rise 260ms ease;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 18%, transparent);
}

.commu-feedback-marker {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

/* 답한 뒤 피드백 아래에 붙는 원전 발췌. 토막난 문항을 원래 논증으로 되돌려
   주는 상자라, 엮은이 말(피드백·해설)과 구분되게 원전 문헌의 엮은이 주 상자와
   같은 세로선·바탕을 쓰되 글씨는 본문색으로 둔다(저자의 말이므로). */
.commu-source {
    margin: 4px 0 0;
    padding: 8px 12px 10px;
    border-left: 3px solid var(--btn-primary);
    background: var(--bg-inset);
    color: var(--text-primary);
    display: grid;
    gap: 6px;
    font-size: 0.92rem;
    line-height: var(--leading-normal);
}

.commu-source-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.commu-source p {
    margin: 0;
    text-align: start;
    word-break: normal;
}

.commu-source-gap {
    color: var(--text-muted);
}

.commu-source-link {
    justify-self: start;
    color: var(--link);
    font-size: 0.85rem;
}

.commu-choice-feedback {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    color: var(--text-primary);
    display: block;
    font-size: 0.92rem;
    line-height: var(--leading-snug);
    padding: 10px 12px;
}

.commu-streak-badge {
    align-self: start;
    animation: commu-streak-pop 420ms ease;
    background: color-mix(in srgb, var(--accent-green) 26%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent-green) 58%, var(--border));
    color: var(--text-primary);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: var(--weight-emphasis);
    line-height: var(--leading-none);
    padding: 8px 10px;
}

.commu-feedback.is-perfect {
    animation: commu-perfect-rise 640ms ease;
    background: color-mix(in srgb, var(--accent-green) 20%, var(--bg-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 28%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent-green) 12%, transparent);
}

.commu-quiz.has-answer-reward .commu-meter-track {
    animation: commu-meter-glow 520ms ease;
}

.commu-quiz.has-perfect-reward .commu-question {
    animation: commu-perfect-shell 620ms ease;
}

.commu-feedback.is-wrong {
    background: color-mix(in srgb, var(--accent-red) 12%, var(--bg-surface));
    border-left-color: var(--accent-red);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-red) 18%, transparent);
}

@keyframes commu-correct-pop {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.025);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes commu-wrong-shake {
    0%, 100% {
        transform: translateX(0);
    }
    24% {
        transform: translateX(-5px);
    }
    48% {
        transform: translateX(5px);
    }
    72% {
        transform: translateX(-3px);
    }
}

@keyframes commu-feedback-rise {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes commu-streak-pop {
    0% {
        opacity: 0;
        transform: translateY(4px) scale(0.96);
    }
    55% {
        transform: translateY(0) scale(1.04);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes commu-meter-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-green) 0%, transparent);
    }
    45% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-green) 22%, transparent);
    }
}

@keyframes commu-perfect-rise {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    60% {
        transform: translateY(0) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes commu-perfect-shell {
    0%, 100% {
        box-shadow: none;
    }
    45% {
        box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent-green) 16%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .commu-choice,
    .commu-feedback,
    .commu-streak-badge,
    .commu-quiz.has-answer-reward .commu-meter-track,
    .commu-quiz.has-perfect-reward .commu-question {
        animation: none;
        transition: none;
    }
}

/* The context bar that opens every page lives in commulingo-crumb.css — the
   document reader needs it without the rest of this file. */

.commulingo-resume {
    align-items: center;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    background: var(--card-bg);
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 16px;
    text-decoration: none;
    transition: background-color 0.15s;
}

/* Accent ground + cream text, same as the dictionary cards. The label is
   accent-colored at rest so it must flip to cream or it sinks into the
   ground; the target line takes the 72% cream mix used elsewhere. */
.commulingo-resume:hover {
    background: var(--accent, #214d2e);
    border-color: var(--accent, #214d2e);
    color: var(--clr-cream, #f8edca);
    text-decoration: none;
}
.commulingo-resume:hover .commu-resume-label { color: var(--clr-cream, #f8edca); }
.commulingo-resume:hover .commu-resume-target { color: color-mix(in srgb, var(--clr-cream, #f8edca) 72%, var(--accent, #214d2e)); }

.commu-resume-label {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: var(--weight-emphasis);
}

.commu-resume-target {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.commulingo-book-groups {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.commu-book-group {
    border: 1px solid var(--border);
    background: var(--card-bg);
    padding: 14px;
}

.commu-book-group-title {
    border-left: 4px solid var(--accent);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: var(--weight-emphasis);
    margin: 0 0 12px;
    padding: 2px 0 2px 10px;
}

.commulingo-books {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.commu-book-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    background: var(--card-bg);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 188px;
    padding: 16px 18px;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}

/* Accent ground + cream text. Interior accent-colored pieces (badge,
   progress fill) flip to cream so they stay visible on the accent ground. */
.commu-book-card:hover {
    background: var(--accent, #214d2e);
    border-color: var(--accent, #214d2e);
    color: var(--clr-cream, #f8edca);
    text-decoration: none;
}
.commu-book-card:hover .commu-book-badge { background: var(--clr-cream, #f8edca); color: var(--accent, #214d2e); }
.commu-book-card:hover .commu-book-desc,
.commu-book-card:hover .commu-book-meta,
.commu-book-card:hover .commu-book-progress-label { color: color-mix(in srgb, var(--clr-cream, #f8edca) 72%, var(--accent, #214d2e)); }
.commu-book-card:hover .commu-book-progress-track > span { background: var(--clr-cream, #f8edca); }

.commu-book-badge {
    align-self: flex-start;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
    padding: 3px 9px;
    text-transform: uppercase;
}

.commu-book-card h3 {
    font-size: 1.18rem;
    line-height: var(--leading-tight);
    margin: 0 0 6px;
}

.commu-book-desc {
    color: var(--text-secondary);
    display: -webkit-box;
    font-size: 0.9rem;
    line-height: var(--leading-relaxed);
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.commu-book-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 6px 0 0;
}

.commu-book-progress {
    display: grid;
    gap: 6px;
    margin-top: auto;
}

.commu-book-progress-label {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.commu-book-progress-track {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    display: block;
    height: 8px;
    overflow: hidden;
    width: 100%;
}

.commu-book-progress-track > span {
    width: 0;
    background: var(--accent);
    display: block;
    height: 100%;
    transition: width 0.2s ease;
}

.commu-quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.is-hidden {
    display: none !important;
}

@media (max-width: 700px) {
    .commu-quiz-top {
        align-items: stretch;
        flex-direction: column;
    }

    .commulingo-hero {
        align-items: center;
        flex-direction: row;
        gap: 12px;
    }

    .commulingo-hero--home {
        align-items: stretch;
        flex-direction: column;
    }

    .commulingo-hero > div:first-child,
    .commulingo-hero-main > div:first-child {
        min-width: 0;
    }

    .commulingo-total {
        background: transparent;
        border: 0;
        height: auto;
        min-height: 0;
        padding: 0;
        width: auto;
    }
    .commu-volume-grid,
    .commu-choices,
    .commulingo-books {
        grid-template-columns: 1fr;
    }

    .commu-diagram {
        grid-template-columns: 1fr;
    }

    .commu-flow-track {
        flex-direction: column;
    }

    .commu-flow-arrow {
        align-self: flex-start;
        padding: 0 12px;
    }

    .commu-flow-arrow::before {
        content: '↓';
    }

    .commu-contrast-grid {
        grid-template-columns: 1fr;
    }


    .commu-question {
        padding: 18px;
    }
}

/* ── Interactive concept map (Engels) ───────────────────────────── */
.commulingo-hero--graph {
    display: block;
}

.commu-graph {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
}

.commu-graph-central {
    border-left: 4px solid var(--accent);
}

.commu-graph-kicker {
    color: var(--link);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.commu-graph-question {
    margin: 8px 0 10px;
    color: var(--text-primary);
    font-size: 1.4rem;
    line-height: var(--leading-tight);
}

.commu-graph-thesis {
    margin: 0 0 10px;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.commu-graph-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.commu-graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.commu-graph-legend-item {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.commu-graph-legend-item.is-plain { border-color: var(--link); color: var(--link); }
.commu-graph-legend-item.is-engels { border-color: var(--accent-red); color: var(--accent-red); }
.commu-graph-legend-item.is-critique { border-color: var(--accent-green); color: var(--accent-green); }

.commu-graph-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.commu-graph-node {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
    overflow: hidden;
}

/* downward arrow connector between chained nodes */
.commu-graph-node:not(:last-child) {
    margin-bottom: 30px;
    position: relative;
}

.commu-graph-node:not(:last-child)::after {
    content: "↓";
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    color: var(--link);
    font-size: 1.1rem;
    line-height: var(--leading-none);
}

.commu-graph-node-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
}

.commu-graph-node-head:hover { background: var(--card-bg); }

.commu-graph-node-index {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.commu-graph-node-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.commu-graph-node-text strong {
    color: var(--text-primary);
    font-size: 1.05rem;
}

.commu-graph-node-text small {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: var(--leading-snug);
}

.commu-graph-node-toggle {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: var(--leading-none);
}

.commu-graph-node.is-open .commu-graph-node-toggle {
    background: var(--accent);
    border-color: var(--link);
    color: #fff;
}

.commu-graph-stages {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 4px 18px 18px;
}

.commu-graph-node.is-open .commu-graph-stages {
    display: flex;
}

.commu-graph-stage {
    border-left: 3px solid var(--border);
    padding: 4px 0 4px 14px;
}

.commu-graph-stage.is-plain { border-left-color: var(--link); }
.commu-graph-stage.is-engels { border-left-color: var(--accent-red); }
.commu-graph-stage.is-critique { border-left-color: var(--accent-green); }

.commu-graph-stage-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.commu-graph-stage.is-plain .commu-graph-stage-label { color: var(--link); }
.commu-graph-stage.is-engels .commu-graph-stage-label { color: var(--accent-red); }
.commu-graph-stage.is-critique .commu-graph-stage-label { color: var(--accent-green); }

.commu-graph-stage p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* ── Misconception cards ────────────────────────────────────────── */
.commu-myths {
    margin-top: 6px;
}

.commu-myths-title {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.commu-myths-hint {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.commu-myth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.commu-myth-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
    cursor: pointer;
    color: var(--text-primary);
}

.commu-myth-card:hover { border-color: var(--accent-red); }

.commu-myth-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-red);
}

.commu-myth-claim {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
    line-height: var(--leading-normal);
}

.commu-myth-verdict {
    align-self: flex-start;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--accent-red);
    color: #fff;
}

.commu-myth-truth { display: none; }
.commu-myth-card.is-revealed .commu-myth-truth { display: block; }

.commu-myth-truth p {
    margin: 0;
    padding-top: 4px;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.commu-myth-reveal {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.commu-myth-card.is-revealed .commu-myth-reveal { display: none; }

/* ── Modern application cases + debate mode ─────────────────────── */
.commu-cases,
.commu-debates {
    margin-top: 6px;
}

.commu-section-title {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.commu-section-hint {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.commu-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.commu-case-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
    cursor: pointer;
    color: var(--text-primary);
}

.commu-case-card:hover { border-color: var(--link); }

.commu-case-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--link);
}

.commu-case-scene {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.commu-case-question {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
    line-height: var(--leading-normal);
}

.commu-case-answer {
    display: none;
    border-left: 3px solid var(--accent);
    padding-left: 12px;
}

.commu-case-card.is-revealed .commu-case-answer { display: block; }

.commu-case-answer-tag {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--link);
    margin-bottom: 4px;
}

.commu-case-answer p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.commu-case-reveal {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.commu-case-card.is-revealed .commu-case-reveal { display: none; }

.commu-debate-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.commu-debate-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
}

.commu-debate-topic {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.commu-debate-line {
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--border);
}

.commu-debate-line.is-engels { border-left-color: var(--accent-red); }
.commu-debate-line.is-critic { border-left-color: var(--link); }

.commu-debate-who {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.commu-debate-line.is-engels .commu-debate-who { color: var(--accent-red); }
.commu-debate-line.is-critic .commu-debate-who { color: var(--link); }

.commu-debate-line p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.commu-debate-toggle {
    align-self: flex-start;
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.commu-debate-toggle:hover { border-color: var(--accent-green); }

.commu-debate-takeaway {
    display: none;
    border-left: 3px solid var(--accent-green);
    padding-left: 12px;
}

.commu-debate-card.is-revealed .commu-debate-takeaway { display: block; }

.commu-debate-takeaway p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

@media (max-width: 640px) {
    .commu-graph-question { font-size: 1.2rem; }
    .commu-graph-node-head { padding: 14px; gap: 10px; }
    .commu-graph-stages { padding: 4px 14px 14px; }
    .commu-myth-grid { grid-template-columns: 1fr; }
    .commu-case-grid { grid-template-columns: 1fr; }
}


/* ---- Decision-history format ("결정의 순간") ---- */

.commu-dc {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 18px;
}

.commu-dc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.commu-dc-stance {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.commu-dc-stance.is-radical { border-color: var(--accent-red); color: var(--accent-red); }
.commu-dc-stance.is-cautious { border-color: var(--link); color: var(--link); }
.commu-dc-stance.is-reform { border-color: var(--accent-green); color: var(--accent-green); }

.commu-dc-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.commu-dc-progress > span:first-child {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.commu-dc-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.commu-dc-progress-track > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.commu-dc-era-head {
    margin-bottom: 12px;
}

.commu-dc-era-range {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--link);
}

.commu-dc-era-head h2 {
    margin: 4px 0 6px;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.commu-dc-era-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: var(--leading-normal);
}

.commu-dc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.commu-dc-episode {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
    overflow: hidden;
}

.commu-dc-episode:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 26px;
    bottom: -13px;
    width: 2px;
    height: 13px;
    background: var(--border);
}

.commu-dc-episode.is-decided { border-color: var(--link); }

.commu-dc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
}

.commu-dc-head:hover { background: var(--card-bg); }

.commu-dc-date {
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--link);
    min-width: 92px;
}

.commu-dc-title { flex: 1; }

.commu-dc-title strong {
    font-size: 0.98rem;
    line-height: var(--leading-snug);
}

.commu-dc-status {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.commu-dc-status.is-match { color: var(--accent-green); }
.commu-dc-status.is-diverge { color: var(--accent-red); }

.commu-dc-toggle {
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
}

.commu-dc-body { display: none; }

.commu-dc-episode.is-open .commu-dc-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 16px 18px;
}

.commu-dc-role {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.commu-dc-role span {
    display: inline-block;
    margin-right: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--link);
}

.commu-dc-briefing {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.commu-dc-question {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
}

.commu-dc-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.commu-dc-option {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: var(--leading-snug);
}

button.commu-dc-option:hover { border-color: var(--link); }

.commu-dc-option.is-done { cursor: default; }
.commu-dc-option.is-chosen { border-color: var(--link); }
.commu-dc-option.is-actual { background: var(--bg-surface); }

.commu-dc-option-label {
    display: block;
    font-weight: 600;
}

.commu-dc-chips {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
}

.commu-dc-chip {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.commu-dc-chip.is-chosen { background: var(--accent); color: #fff; }
.commu-dc-chip.is-actual { background: var(--accent-red); color: #fff; }

.commu-dc-option-note {
    margin: 8px 0 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    border-top: 1px dashed var(--border);
    padding-top: 8px;
}

.commu-dc-matchline {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}

.commu-dc-matchline.is-match { color: var(--accent-green); }

.commu-dc-block {
    border-left: 3px solid var(--border);
    padding: 2px 0 2px 12px;
}

.commu-dc-block.is-outcome { border-left-color: var(--accent-red); }
.commu-dc-block.is-ripple { border-left-color: var(--link); }
.commu-dc-block.is-insight { border-left-color: var(--accent-green); }

.commu-dc-block-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.commu-dc-block.is-outcome .commu-dc-block-label { color: var(--accent-red); }
.commu-dc-block.is-ripple .commu-dc-block-label { color: var(--link); }
.commu-dc-block.is-insight .commu-dc-block-label { color: var(--accent-green); }

.commu-dc-block p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.commu-dc-redo,
.commu-dc-reset {
    align-self: flex-start;
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.commu-dc-redo:hover,
.commu-dc-reset:hover { border-color: var(--link); }

.commu-dc-event-link {
    align-self: flex-start;
    border: 1px solid color-mix(in srgb, var(--accent-red) 65%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-red) 12%, var(--card-bg));
    color: var(--text-primary);
    font-size: .88rem;
    font-weight: var(--weight-emphasis);
    padding: 9px 13px;
    text-decoration: none;
}

.commu-dc-event-link:hover {
    background: color-mix(in srgb, var(--accent-red) 22%, var(--card-bg));
    border-color: var(--accent-red);
}

.commu-dc-verdict {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 4px solid var(--accent);
}

.commu-dc-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.commu-dc-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.commu-dc-bar-label {
    flex-shrink: 0;
    width: 110px;
    font-size: 0.8rem;
    font-weight: 700;
}

.commu-dc-bar-label.is-radical { color: var(--accent-red); }
.commu-dc-bar-label.is-cautious { color: var(--link); }
.commu-dc-bar-label.is-reform { color: var(--accent-green); }

.commu-dc-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.commu-dc-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.commu-dc-bar-fill.is-radical { background: var(--accent-red); }
.commu-dc-bar-fill.is-cautious { background: var(--accent); }
.commu-dc-bar-fill.is-reform { background: var(--accent-green); }

.commu-dc-bar-count {
    flex-shrink: 0;
    width: 20px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.commu-dc-profile {
    margin: 0;
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    font-weight: 500;
}

.commu-dc-match {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.commu-dc-match-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: var(--leading-normal);
}

@media (max-width: 640px) {
    .commu-dc-head { flex-wrap: wrap; padding: 12px 14px; row-gap: 4px; }
    .commu-dc-date { min-width: 0; }
    .commu-dc-title { flex-basis: 100%; order: 3; }
    .commu-dc-episode.is-open .commu-dc-body { padding: 2px 14px 16px; }
    .commu-dc-bar-label { width: 88px; }
}

/* ── People index (인물 사전) ─────────────────────────────── */

/* person-name links inside decision book prose */
.commu-person-link {
    color: inherit;
    text-decoration: none;
    /* Full-strength link green: a low-opacity currentColor dash was invisible
       against the dark canvas. */
    border-bottom: 2px dashed var(--link, #5d7a5a);
}

.commu-person-link:hover {
    border-bottom-style: solid;
}

/* People dictionary search */
/* .commu-person-card sets display:flex, which (as a class rule) would override
   the UA [hidden]{display:none}. Force the search-driven hidden state to win so
   filtering actually shows/hides cards and groups. */
.commu-person-card[hidden],
.commu-people-group[hidden] {
    display: none !important;
}

.commu-people-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 9px 0 0;
}

.commu-dict-shell .commu-people-search { margin-top: 0; }

.commu-people-search-icon {
    position: absolute;
    left: 0.85rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.15s ease;
}

.commu-people-search-icon .commu-role-icon {
    width: 18px;
    height: 18px;
}

/* The magnifier answers the caret: focus anywhere in the field and it takes
   the link color with the border. */
.commu-people-search:focus-within .commu-people-search-icon {
    color: var(--link);
}

.commu-people-search-input {
    flex: 1 1 auto;
    width: 100%;
    padding: 0.72rem 2.4rem 0.72rem 2.5rem;
    font: inherit;
    color: var(--text-primary);
    background: var(--search-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.commu-people-search-input::placeholder { color: var(--text-muted); opacity: 1; }

.commu-people-search-input:hover {
    border-color: color-mix(in srgb, var(--text-muted) 55%, var(--border));
}

.commu-people-search-input:focus {
    border-color: var(--link);
    box-shadow: inset 0 -2px 0 0 var(--link);
}

.commu-people-search-input::-webkit-search-cancel-button { display: none; }

.commu-people-search-clear {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.commu-people-search-clear .commu-role-icon {
    width: 15px;
    height: 15px;
}

.commu-people-search-clear:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--link) 16%, transparent);
}

/* Matched-term highlight inside result cards */
.commu-search-hl {
    background: color-mix(in srgb, var(--link) 34%, transparent);
    color: inherit;
    padding: 0 1px;
    border-radius: 0;
}

.commu-people-result-empty {
    margin: 8px 0 0;
    padding: 18px 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    border: 1px dashed var(--border);
}

/* The visible match count sits inside the search box like a browser find
   bar, left of the clear button. */
.commu-dict-search-count {
    position: absolute;
    right: 2.6rem;
    padding-left: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    pointer-events: none;
    background: var(--search-bg);
}

/* Announces matches to screen readers; only the zero-result box is drawn. */
.commu-dict-search-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.commu-dict-search-status.is-empty {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    margin: 16px 0 0;
    padding: 18px 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    border: 1px dashed var(--border);
}

.commu-event-card[hidden] {
    display: none !important;
}

.commu-people-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Same 17px rhythm as the shelves below it (9px + the shell's 8px gap). */
.commu-office-index {
    margin-top: 9px;
}

.commu-office-index-head {
    background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    cursor: pointer;
    display: block;
    list-style: none;
    padding: 12px 38px 12px 14px;
    position: relative;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.commu-office-index-head::-webkit-details-marker {
    display: none;
}

.commu-office-index-head:hover,
.commu-office-index-head:focus-visible {
    background: var(--bg-surface-hover);
    border-color: var(--link);
}

.commu-office-index-head:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--link) 40%, transparent);
    outline-offset: 2px;
}

.commu-office-index-head::after {
    color: var(--text-muted);
    content: '›';
    font-size: 1.5rem;
    line-height: var(--leading-none);
    position: absolute;
    /* The glyph is rotated, so its rendered box is wider than the unrotated one.
       At right: 8px it reached 5px past the summary and put the whole page into a
       4px horizontal scroll; 14px keeps it inside the 38px padding. */
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: color 0.16s ease, transform 0.16s ease;
}

.commu-office-index-head:hover::after,
.commu-office-index-head:focus-visible::after {
    color: var(--link);
}

.commu-office-index[open] .commu-office-index-head {
    margin-bottom: 14px;
}

.commu-office-index[open] .commu-office-index-head::after {
    transform: translateY(-50%) rotate(-90deg);
}

.commu-office-index-head h2 {
    color: var(--text-primary);
    font-size: 1.3rem;
    margin: 2px 0 4px;
}

.commu-office-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commu-office-index .commu-office-grid { gap: 0; }

.commu-office-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    min-width: 0;
    overflow: hidden;
}

.commu-office-card[open] {
    border-color: color-mix(in srgb, var(--link) 42%, var(--border));
}

.commu-role-category-link {
    align-items: center;
    background: var(--bg-surface);
    color: var(--text-primary);
    display: flex;
    gap: 12px;
    min-height: 76px;
    padding: 12px 14px;
    position: relative;
    text-decoration: none;
}

.commu-role-category-link:hover,
.commu-role-category-link:focus-visible {
    background: var(--bg-surface-hover);
    border-color: var(--link);
}

.commu-role-category-link:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.commu-role-category-link .commu-office-icon-link {
    flex: 0 0 auto;
    left: auto;
    position: static;
    top: auto;
}

.commu-role-category-copy {
    min-width: 0;
}

.commu-role-category-copy h3 {
    font-size: 1.02rem;
    line-height: var(--leading-tight);
    margin: 0 0 5px;
}

.commu-role-category-copy p {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0;
}

.commu-role-category-arrow {
    color: var(--link);
    font-size: 1.15rem;
    font-weight: var(--weight-emphasis);
    margin-left: auto;
}

.commu-office-card-head {
    background: var(--bg-surface);
    cursor: pointer;
    display: block;
    list-style: none;
    padding: 13px 44px 12px 58px;
    position: relative;
}

.commu-office-card[open] .commu-office-card-head {
    border-bottom: 1px solid var(--border);
}

.commu-office-icon-link {
    align-items: center;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    display: flex;
    height: 32px;
    justify-content: center;
    left: 14px;
    position: absolute;
    text-decoration: none;
    top: 14px;
    width: 32px;
}

.commu-office-icon-link:hover,
.commu-office-icon-link:focus-visible {
    background: var(--bg-surface-hover);
    border-color: var(--link);
    color: var(--link);
}

.commu-office-icon-link:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.commu-office-card-head::-webkit-details-marker {
    display: none;
}

.commu-office-card-head::after {
    align-items: center;
    border: 1px solid var(--border);
    color: var(--link);
    content: '+';
    display: flex;
    font-size: 1rem;
    font-weight: var(--weight-emphasis);
    height: 24px;
    justify-content: center;
    position: absolute;
    right: 13px;
    top: 13px;
    width: 24px;
}

.commu-office-card[open] .commu-office-card-head::after {
    content: '-';
}

.commu-office-range {
    color: var(--text-muted);
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.commu-office-card-head h3 {
    color: var(--text-primary);
    font-size: 1.02rem;
    line-height: var(--leading-tight);
    margin: 0 0 5px;
}

.commu-office-card-head p {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: var(--leading-snug);
    margin: 0;
}

.commu-office-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.commu-office-rows li {
    display: grid;
    gap: 12px;
    grid-template-columns: 112px minmax(0, 1fr);
    padding: 10px 14px;
}

.commu-office-rows li + li {
    border-top: 1px solid var(--border);
}

.commu-office-years {
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    font-size: 0.76rem;
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.commu-office-lineage {
    list-style: none;
    margin: 0;
    padding: 0;
}

.commu-lineage-step {
    border-left: 3px solid var(--accent);
    margin-left: 8px;
    padding: 2px 0 14px 16px;
    position: relative;
}

.commu-lineage-step:last-child {
    padding-bottom: 2px;
}

.commu-lineage-step::before {
    background: var(--accent);
    border-radius: 50%;
    content: '';
    height: 9px;
    left: -6px;
    position: absolute;
    top: 6px;
    width: 9px;
}

.commu-lineage-node {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.commu-lineage-node strong {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: var(--weight-emphasis);
}

.commu-lineage-step p {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: var(--leading-normal);
    margin: 4px 0 0;
}

.commu-office-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.commu-office-main a,
.commu-office-main strong {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: var(--weight-emphasis);
    line-height: var(--leading-tight);
    text-decoration: none;
}

.commu-office-main a:hover {
    color: var(--link);
}

.commu-office-main small,
.commu-office-main em {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-style: normal;
    line-height: var(--leading-snug);
}

.commu-office-main em {
    color: var(--text-muted);
}

.commu-office-page-link {
    border-top: 1px solid var(--border);
    color: var(--text-primary);
    display: block;
    font-size: 0.82rem;
    font-weight: var(--weight-emphasis);
    padding: 10px 14px 12px;
    text-decoration: none;
}

.commu-office-page-link:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.commu-people-shelf-head + .commu-people-era {
    margin-top: 17px;
}

.commu-people-group-head {
    background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
    border: 1px solid var(--border);
    display: block;
    padding: var(--space-3);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.commu-people-group-head:hover,
.commu-people-group-head:focus-visible {
    background: var(--bg-surface-hover);
    border-color: var(--link);
    color: var(--text-primary);
    text-decoration: none;
}

.commu-people-group-head:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--link) 40%, transparent);
    outline-offset: 2px;
}

.commu-people-preview-toggle {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
    min-height: var(--control-height); box-sizing: border-box; padding: 0 var(--space-3);
    border: 1px solid var(--border); border-top: 0;
    color: var(--text-muted); font-size: var(--text-sm); cursor: pointer; list-style: none;
}
.commu-people-preview-toggle::-webkit-details-marker { display: none; }
.commu-people-preview-toggle:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
.commu-people-preview-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.commu-people-preview-toggle .commu-role-icon { width: 15px; height: 15px; }
.commu-people-group[open] > .commu-people-preview-toggle .commu-role-icon { transform: rotate(180deg); }

/* A group's pager sits under its grid; a page switch scrolls the group head
   back under the sticky bar. */
.commu-people-group { scroll-margin-top: 4.5rem; }
.commu-people-group > [data-commu-list-pager] .pagination { margin: 12px 0 4px; }
.commu-people-group[open] > .commu-people-preview-toggle {
    margin-bottom: 14px;
}


/* Regional shelves frame their title and a continuous stack of era groups.
   Keep breathing room after the shelf title, with no gaps between eras. */
.commu-people-shelf {
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-top: 9px;
    padding: 14px;
}

.commu-people-shelf-head {
    border-left: 4px solid var(--accent);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: var(--weight-emphasis);
    margin: 0;
    padding: 2px 0 2px 10px;
}

/* Below 768px the .container gutters are gone and the group cards run edge
   to edge; the shelves drop their side walls into full-bleed bands so the
   cards inside keep the same full screen width. */
@media (max-width: 768px) {
    .commu-people-shelf {
        border-left: 0;
        border-right: 0;
        padding: 14px 0;
    }

    .commu-people-shelf-head {
        margin: 0 14px;
    }
}

.commu-people-group-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.commu-people-group-action { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.commu-people-group-head:hover .commu-people-group-action,
.commu-people-group-head:focus-visible .commu-people-group-action { color: var(--text-primary); }

.commu-people-range {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* Lazy-loaded card grids: transient note while a group's cards download,
   and the script-less fallback list of person links. */
.commu-people-loading {
    grid-column: 1 / -1;
    margin: 6px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Card-shaped placeholders while a group's grid downloads. display: contents
   dissolves the wrapper so each skeleton sits in the grid like the card it
   stands in for; the bars pulse gently and hold still under reduced motion. */
.commu-people-skeleton {
    display: contents;
}

.commu-person-skel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.commu-person-skel span {
    display: block;
    height: 11px;
    background: color-mix(in srgb, var(--text-muted) 20%, transparent);
    animation: commu-skel-pulse 1.4s ease-in-out infinite;
}

.commu-person-skel .is-name {
    height: 15px;
    width: 42%;
    margin-bottom: 2px;
}

.commu-person-skel .is-line { width: 94%; }
.commu-person-skel .is-line-mid { width: 82%; }
.commu-person-skel .is-line-short { width: 58%; }

.commu-person-skel:nth-child(2) span { animation-delay: 0.15s; }
.commu-person-skel:nth-child(3) span { animation-delay: 0.3s; }
.commu-person-skel:nth-child(4) span { animation-delay: 0.45s; }

@keyframes commu-skel-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .commu-person-skel span { animation: none; opacity: 0.6; }
}

.commu-people-noscript-list {
    grid-column: 1 / -1;
    margin: 6px 0;
    padding-left: 18px;
    columns: 2;
    font-size: 0.92rem;
}

.commu-people-group-head h2 {
    margin: 2px 0 4px;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.commu-people-group-head p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.commu-people-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    /* Without this the shorter card in each pair stretches to its neighbour's
       height, leaving about 46px of empty space below its content. */
    align-items: start;
}

.commu-person-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: default;
    padding: 16px;
    position: relative;
    scroll-margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.commu-person-card::after {
    color: var(--text-muted);
    content: '→';
    font-size: 1rem;
    font-weight: var(--weight-emphasis);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 10px;
    transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.commu-person-card:has(.commu-person-top:hover):not(:has(.commu-person-medal:hover)),
.commu-person-card:has(.commu-person-idbox a:focus-visible) {
    border-color: color-mix(in srgb, var(--link) 72%, var(--border));
}

.commu-person-card:has(.commu-person-top:hover):not(:has(.commu-person-medal:hover))::after,
.commu-person-card:has(.commu-person-idbox a:focus-visible)::after {
    color: var(--link);
    opacity: 1;
    transform: translateX(2px);
}

.commu-person-card.is-focused {
    border-color: var(--link);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 35%, transparent);
}

.commu-person-top {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: -16px -16px -10px;
    padding: 16px 16px 10px;
    transition: background-color 0.16s ease;
}

.commu-person-top:hover:not(:has(.commu-person-medal:hover)),
.commu-person-top:has(.commu-person-idbox a:focus-visible) {
    background: color-mix(in srgb, var(--link) 7%, transparent);
}

.commu-person-medal {
    align-items: center;
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 0;
    color: var(--text-secondary);
    display: flex;
    flex: 0 0 auto;
    height: 46px;
    justify-content: center;
    text-decoration: none;
    width: 46px;
}

.commu-person-medal,
.commu-person-more,
.commu-person-scenes {
    cursor: auto;
}

.commu-person-medal[href]:hover {
    background: var(--bg-surface-hover);
    border-color: var(--link);
    color: var(--link);
}

.commu-person-medal[href] {
    cursor: pointer;
}

/* Political position (data/commulingo/person-position.js): the card and the
   detail head carry the position colour as a band across the top with the
   head area tinted below it, and the card names the position in a chip filled
   with the same colour. Era group headings use neutral borders.
   No known position, no band.
   --pos-ink is the chip text: cream on the dark colours, ink on the light ones
   (each pairing at least 4:1). */
/* Colour families: communism is red (Soviet and Chinese flag reds); its
   socialist neighbours are rose (social democracy) and wine (Western Marxism);
   the pre-Marxist revolutionaries take earth tones (Narodniks, revolutionary
   democrats) and the tricolour navy (Jacobins); critics within the socialist
   world are orange (left), slate blue (dissidents) and green (reformers);
   national liberation is gold; the anti-communist camp is white, fascism brown. */
[class*="pos-"] { --pos-ink: #faf2da; }
.pos-red-soviet { --pos: #b3261e; }
.pos-red-china { --pos: #c4381f; }
.pos-red { --pos: #8f2a33; }
.pos-western-marxist { --pos: #7d3c6b; }
.pos-socialist { --pos: #c25a7c; --pos-ink: #0b0d0a; }
.pos-left-opposition { --pos: #c4692c; --pos-ink: #0b0d0a; }
.pos-national-liberation { --pos: #c39a2e; --pos-ink: #0b0d0a; }
.pos-narodnik { --pos: #6f7a32; }
.pos-revolutionary-democrat { --pos: #a39a5a; --pos-ink: #0b0d0a; }
.pos-jacobin { --pos: #31519a; }
.pos-dissident { --pos: #5878a8; --pos-ink: #0b0d0a; }
.pos-reform { --pos: #4b9670; --pos-ink: #0b0d0a; }
.pos-fascist { --pos: #6e4b2e; }
.pos-white { --pos: #fbfaf6; --pos-ink: #0b0d0a; }
/* White needs a full-strength wash to show against the light cream surface. */
[data-theme="light"] .pos-white { --pos-wash: 100%; }
.pos-anarchist { --pos: #111; }
.pos-liberal-republican { --pos: var(--commu-position-liberal); }
.pos-conservative { --pos: var(--commu-position-conservative); }
.pos-monarchist { --pos: var(--commu-position-monarchist); }
.pos-agrarian { --pos: var(--commu-position-agrarian); }
.pos-nationalist { --pos: var(--commu-position-nationalist); }
.pos-revolutionary-socialist { --pos: var(--commu-position-revolutionary-socialist); }

/* The band is a pseudo-element rather than border-top so the hover and focus
   border colours leave it alone. */
.commu-person-card[class*="pos-"]::before,
.commu-person-detail-head[class*="pos-"]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: var(--pos);
    pointer-events: none;
}
.commu-person-card[class*="pos-"] .commu-person-top,
.commu-person-detail-head[class*="pos-"] {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--pos) var(--pos-wash, 16%), transparent), transparent 90%);
}
.commu-person-card[class*="pos-"] .commu-person-top { padding-top: 19px; }
.commu-person-detail-head[class*="pos-"] {
    background-size: 100% 120px;
    background-repeat: no-repeat;
    border-left-width: 1px;
    padding-top: 21px;
    position: relative;
}
/* White has low contrast on light cream and black on the dark theme: the white band
   gets a hairline beneath it, and black becomes a black-and-grey hatch with a
   grey tint, which still reads as black but never merges into the card. */
.commu-person-card.pos-white::before,
.commu-person-detail-head.pos-white::before {
    box-shadow: 0 1px 0 var(--text-muted);
}
.commu-person-card.pos-anarchist::before,
.commu-person-detail-head.pos-anarchist::before {
    background: repeating-linear-gradient(135deg, #111 0 7px, var(--text-muted) 7px 9px);
}
.commu-person-card.pos-anarchist .commu-person-top,
.commu-person-detail-head.pos-anarchist {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--text-muted) 12%, transparent), transparent 90%);
}

/* Position chip in the card meta row: the position named on its own colour
   (the colour alone does not tell rose from red). */
.commu-person-position {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    background: var(--pos);
    color: var(--pos-ink);
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The chip leads with its collection's glyph, small beside the activity medal. */
.commu-person-position .commu-role-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-right: 4px;
}
.pos-white .commu-person-position,
.pos-anarchist .commu-person-position {
    box-shadow: inset 0 0 0 1px var(--text-muted);
}
/* Secondary chips (detail head only): the person's other position collections,
   outlined in their own colour so the filled chip stays the position. */
.commu-person-position.is-secondary {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pos, var(--border));
    color: var(--text-secondary);
    font-weight: 600;
}
.commu-person-position.is-secondary.pos-white,
.commu-person-position.is-secondary.pos-anarchist {
    box-shadow: inset 0 0 0 1px var(--text-muted);
}
a.commu-person-position.is-secondary:hover,
a.commu-person-position.is-secondary:focus-visible {
    color: var(--text-primary);
}
a.commu-person-position:hover,
a.commu-person-position:focus-visible {
    color: var(--pos-ink);
    text-decoration: underline;
    outline: 2px solid var(--link);
    outline-offset: 1px;
}


/* .commu-role-icon lives in commulingo-crumb.css — the document reader loads
   that file alone and the crumb's home glyph needs it. */

.commu-person-idbox {
    flex: 1 1 auto;
    min-width: 0;
}

.commu-person-idbox h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: var(--leading-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.commu-person-idbox h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.16s ease;
}

.commu-person-top:hover:not(:has(.commu-person-medal:hover)) .commu-person-idbox h3 a,
.commu-person-top:hover:not(:has(.commu-person-medal:hover)) .commu-person-cyr,
.commu-person-top:has(.commu-person-idbox a:focus-visible) .commu-person-idbox h3 a,
.commu-person-top:has(.commu-person-idbox a:focus-visible) .commu-person-cyr {
    color: var(--link);
}

.commu-person-cyr {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    transition: color 0.16s ease;
}

/* A search hit that came through an alias names it under the headword, in a
   square-cornered box like the card's other tags; the search highlight marks
   the matched part as it does in the name. */
.commu-person-alias-hit {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    margin-top: 6px;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.76rem;
    line-height: var(--leading-none);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commu-person-alias-hit-label {
    color: var(--text-muted);
}

/* Single meta line under the name, flush to the card's left edge:
   office label · nationality · years · fate */
.commu-person-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.commu-person-sidebox {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.commu-person-years {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Nationality flags: citizenship first, then national/ethnic background. */
.commu-flag-link {
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    line-height: var(--leading-none);
}

.commu-flag-link:hover,
.commu-flag-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.commu-flag {
    height: 0.86em;
    width: auto;
    border-radius: 0;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.28);
    vertical-align: middle;
    object-fit: contain;
    flex: 0 0 auto;
}

.commu-nationality-hub-flag .commu-flag {
    width: 54px;
    height: auto;
}

.commu-nationality-hub-head {
    align-items: center;
    display: flex;
    gap: 14px;
}

.commu-nationality-kind {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── World geography ─────────────────────────────────────────────────────
   Unlike the event map, this learning map intentionally shows present-day
   political borders. Historical states are overlays composed from present
   successor territories and always carry an approximation note. */
.commu-world-map-page { gap: 0; }
.commu-world-map-page .commu-people-search { margin-top: 0; }
.commu-world-map-head { display: flex; align-items: center; gap: 14px; margin-bottom: 0; }
.commu-world-map-head-icon {
    align-items: center; background: var(--bg-surface); border: 1px solid var(--border);
    display: flex; flex: 0 0 auto; height: 52px; justify-content: center; width: 52px;
}
.commu-world-map-head-icon .commu-role-icon { height: 28px; width: 28px; }
.commu-world-map-panel {
    background: var(--card-bg); border: 1px solid var(--border); margin: 16px 0;
    padding: 12px; position: relative;
}
.commu-world-map-panel.is-country { margin-top: 14px; }
.commu-world-map-page > .commu-world-map-panel { margin: 0; }
.commu-world-map { overflow: auto; overscroll-behavior: contain; }
.commu-world-map .wmap-svg {
    display: block; font-family: inherit; height: auto; min-width: 720px; width: 100%;
}
.wmap-sea { fill: var(--bg-surface); }
.wmap-grid line { stroke: color-mix(in srgb, var(--border) 10%, transparent); stroke-width: 1; }
.wmap-base use {
    fill: color-mix(in srgb, var(--border) 13%, var(--bg-surface));
    stroke: color-mix(in srgb, var(--border) 50%, transparent); stroke-width: .6;
}
.wmap-border { fill: none; stroke: color-mix(in srgb, var(--border) 60%, transparent); }
.wmap-highlight { opacity: 0; pointer-events: none; transition: opacity .14s ease; }
.wmap-highlight use { fill: color-mix(in srgb, var(--accent) 62%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.wmap-highlight.is-historical use { fill: url(#wmap-history-pattern); stroke: var(--clr-red); stroke-dasharray: 6 3; }
.wmap-highlight.is-region use { fill: color-mix(in srgb, var(--link) 35%, transparent); stroke: var(--link); stroke-dasharray: 2 3; }
.wmap-highlight.is-selected,
.wmap-highlight.is-map-active { opacity: .9; }
.commu-world-map-panel.is-country .wmap-highlight.is-selected use { stroke-width: 2.4; }
.commu-world-map-panel.is-country .wmap-highlight.is-selected.is-modern use {
    fill: color-mix(in srgb, var(--accent) 72%, var(--clr-cream));
    stroke: var(--accent);
}
/* The flag is useful as a target on the overview. On a country hub it covers
   the very small territory the visitor came to study, while the same flag is
   already present in the page heading. */
.commu-world-map-panel.is-country .wmap-marker.is-selected { visibility: hidden; }
.wmap-history-line { stroke: var(--clr-red); stroke-width: 3; opacity: .65; }
.wmap-marker { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.wmap-marker rect { fill: var(--bg-canvas); stroke: color-mix(in srgb, var(--border) 75%, transparent); stroke-width: 1.4; }
.wmap-marker image { pointer-events: none; }
.wmap-marker:hover rect,
.wmap-marker:focus-visible rect,
.wmap-marker.is-map-active rect,
.wmap-marker.is-selected rect { fill: var(--clr-cream); stroke: var(--clr-red); stroke-width: 2.6; }
.wmap-marker-leader { stroke: var(--text-muted); stroke-width: 1; pointer-events: none; }
.wmap-marker-leader.is-map-active { stroke: var(--clr-red); stroke-width: 1.8; }
.commu-world-map-controls {
    display: flex; gap: 4px; position: absolute; right: 18px; top: 18px; z-index: 2;
}
.commu-world-map-controls button {
    align-items: center; background: var(--btn-bg); border: 1px solid var(--border);
    color: var(--text-primary); cursor: pointer; display: flex; font: inherit; font-size: 1.15rem;
    font-weight: 700; height: 34px; min-height: 34px; justify-content: center; line-height: var(--leading-none); padding: 0; width: 34px; min-width: 34px; flex: 0 0 34px;
}
.commu-world-map-controls button:hover,
.commu-world-map-controls button:focus-visible { background: var(--btn-hover); }
.commu-world-map-controls button:disabled { cursor: default; opacity: .42; }
.commu-world-map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.commu-world-map-legend span { align-items: center; color: var(--text-secondary); display: inline-flex; font-size: .8rem; gap: 7px; }
.commu-world-map-legend i { background: color-mix(in srgb, var(--accent) 62%, transparent); border: 1px solid var(--accent); display: inline-block; height: 12px; width: 20px; }
.commu-world-map-legend i.is-historical { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--clr-red) 65%, transparent) 4px 6px); border-color: var(--clr-red); border-style: dashed; }
.commu-world-map-legend i.is-region { background: color-mix(in srgb, var(--link) 25%, transparent); border-color: var(--link); border-style: dotted; }
.commu-world-map-note { color: var(--text-muted); font-size: .79rem; line-height: var(--leading-normal); margin: 9px 0 0; }
.commu-country-groups { display: grid; gap: 1.2rem; }
.commu-country-group > h2 { font-size: 1.08rem; margin: 0 0 .55rem; }
.commu-country-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.commu-country-card {
    align-items: center; background: var(--card-bg); border: 1px solid var(--border);
    color: inherit; display: flex; gap: 11px; min-width: 0; padding: 10px 12px; text-decoration: none;
}
.commu-country-card:hover,
.commu-country-card:focus-visible,
.commu-country-card.is-map-active { background: var(--accent); border-color: var(--accent); color: var(--clr-cream); text-decoration: none; }
.commu-country-card .commu-flag { flex: 0 0 auto; height: 22px; width: 32px; }
.commu-country-card-icon { display: flex; flex: 0 0 32px; justify-content: center; }
.commu-country-card-icon .commu-role-icon { height: 24px; width: 24px; }
.commu-country-card span { min-width: 0; }
.commu-country-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commu-country-card small { color: var(--text-muted); display: block; font-size: .75rem; margin-top: 2px; }
.commu-country-card:hover small,
.commu-country-card:focus-visible small,
.commu-country-card.is-map-active small { color: color-mix(in srgb, var(--clr-cream) 75%, var(--accent)); }
.commu-country-card.is-historical { border-left: 4px dashed var(--clr-red); }
.commu-country-card.is-region { border-left: 4px dotted var(--link); }
.commu-country-sections {
    background: var(--bg-surface); border: 1px solid var(--border); display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px;
}
.commu-country-sections a {
    align-items: center; color: var(--text-primary); display: flex; gap: 8px;
    justify-content: center; min-height: 48px; padding: 8px 10px; text-decoration: none;
}
.commu-country-sections a + a { border-left: 1px solid var(--border); }
.commu-country-sections a:hover,
.commu-country-sections a:focus-visible { background: var(--accent); color: var(--clr-cream); text-decoration: none; }
.commu-country-sections strong {
    background: color-mix(in srgb, var(--border) 36%, transparent); font-size: .76rem;
    min-width: 2em; padding: 2px 6px; text-align: center;
}
.commu-country-sections a:hover strong,
.commu-country-sections a:focus-visible strong { background: color-mix(in srgb, var(--clr-cream) 18%, transparent); }
.commu-country-page .commu-country-section-head { margin: 0 0 12px; scroll-margin-top: 82px; }
/* Use the country shape for focus feedback, not the SVG link bounding box. */
.wmap-svg a:focus { outline: none; }
.wmap-territory { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.wmap-territory use { fill: transparent; stroke: none; pointer-events: fill; }
.wmap-territory:hover use, .wmap-territory:focus-visible use {
    fill: color-mix(in srgb, var(--accent) 45%, transparent); stroke: var(--accent); stroke-width: 1;
}
.wmap-highlights, .wmap-border { pointer-events: none; }
.commu-country-section-head > a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px; min-height: 52px; border: 1px solid var(--border);
    background: var(--bg-surface); color: var(--text-primary); text-decoration: none;
}
.commu-country-section-head > a:hover, .commu-country-section-head > a:focus-visible { background: var(--btn-hover); text-decoration: none; }
.commu-country-section-head small { color: var(--text-muted); font-size: .75em; font-weight: 500; }
.commu-country-section-action { flex-shrink: 0; font-size: .8rem; font-weight: 500; }
.commu-country-event-filter { margin-bottom: 18px; }
.commu-country-event-filter h2 { margin: 12px 0; }
.commu-country-event-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.commu-country-event-actions .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
@media (pointer: coarse) {
    .commu-world-map-controls button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-basis: 40px; }
}
.commu-country-page .commu-hub-section { scroll-margin-top: 82px; }
.commu-country-empty { color: var(--text-muted); }
.commu-country-lineage { border: 1px solid var(--border); margin-top: 14px; }
.commu-country-lineage h2 { border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .85rem; margin: 0; padding: 8px 12px; }
.commu-country-lineage ol { list-style: none; margin: 0; padding: 0; }
.commu-country-lineage-row { align-items: baseline; display: grid; gap: 8px 14px; grid-template-columns: 3rem minmax(0, 1fr); padding: 10px 12px; }
.commu-country-lineage-row + .commu-country-lineage-row { border-top: 1px solid var(--border); }
.commu-country-lineage-year { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.commu-country-lineage-text { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.commu-country-lineage-text .is-attached { margin-left: -4px; }
.commu-country-lineage-more { border-top: 1px solid var(--border); display: flex; flex-direction: column-reverse; }
.commu-country-lineage-more > ol { border-bottom: 1px solid var(--border); }
.commu-country-lineage-more summary { color: var(--text-muted); cursor: pointer; font-size: .85rem; list-style: none; padding: 10px 12px; }
.commu-country-lineage-more summary::-webkit-details-marker { display: none; }
.commu-country-lineage-more summary:hover, .commu-country-lineage-more summary:focus-visible { background: var(--btn-hover); }
.commu-country-lineage-more summary .is-open, .commu-country-lineage-more[open] summary .is-closed { display: none; }
.commu-country-lineage-more[open] summary .is-open { display: inline; }
.commu-country-lineage a {
    align-items: center; border: 1px solid var(--border); color: inherit; display: inline-flex;
    gap: 7px; min-height: 34px; padding: 4px 9px; text-decoration: none;
}
.commu-country-lineage a:hover, .commu-country-lineage a:focus-visible { background: var(--btn-hover); text-decoration: none; }
.commu-country-orgs { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.commu-country-org-group h3 { border-bottom: 1px solid var(--border); font-size: .95rem; margin: 0 0 4px; padding-bottom: 6px; }
.commu-country-org-group ul { list-style: none; margin: 0; padding: 0; }
.commu-country-org-group li { border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); padding: 6px 4px 8px; }
.commu-country-org-group li.is-child { border-left: 2px solid var(--border); margin-left: 10px; padding-left: 10px; }
.commu-country-org-head { align-items: baseline; color: inherit; display: flex; gap: 10px; justify-content: space-between; text-decoration: none; }
.commu-country-org-head > span:first-child { font-weight: 700; }
.commu-country-org-head:hover, .commu-country-org-head:focus-visible { color: var(--link); text-decoration: none; }
.commu-country-org-head small { color: var(--text-muted); font-size: .78rem; font-variant-numeric: tabular-nums; font-weight: 500; }
.commu-country-org-count { color: var(--text-secondary); flex-shrink: 0; font-size: .82rem; }
.commu-country-org-members { color: var(--text-secondary); font-size: .85rem; line-height: var(--leading-normal); margin: 3px 0 0; }
.commu-country-org-members a { color: inherit; }
.commu-country-org-members span { color: var(--text-muted); }
.commu-country-timeline { border-top: 1px solid var(--border); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.commu-country-timeline li { border-bottom: 1px solid var(--border); }
.commu-country-timeline a {
    color: inherit; display: grid; gap: 4px 16px; grid-template-columns: 9.5rem minmax(0, 1fr);
    padding: 10px 12px; text-decoration: none;
}
.commu-country-timeline a:hover, .commu-country-timeline a:focus-visible { background: var(--btn-hover); text-decoration: none; }
.commu-country-timeline-period { color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; font-weight: 700; padding-top: 2px; }
.commu-country-timeline-body { display: grid; gap: 2px; min-width: 0; }
.commu-country-timeline-body strong { font-size: 1rem; }
.commu-country-timeline-body span { color: var(--text-secondary); font-size: .86rem; line-height: var(--leading-normal); }
@media (max-width: 700px) {
    .commu-country-timeline a { grid-template-columns: 1fr; padding-inline: 4px; }
    .commu-country-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .commu-country-sections a:nth-child(3) { border-left: 0; }
    .commu-country-sections a:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 700px) {
    .commu-world-map-panel { padding: 8px; }
    .commu-world-map-controls { right: 14px; top: 14px; }
    .commu-world-map .wmap-svg { min-width: 680px; }
    .commu-country-grid { grid-template-columns: 1fr; }
    .commu-country-sections a { flex-direction: column; gap: 2px; padding-inline: 4px; }
}

.commu-fate {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: var(--leading-none);
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}

.commu-fate.is-executed,
.commu-fate.is-assassinated,
.commu-fate.is-murdered,
.commu-fate.is-suicide,
.commu-fate.is-killed {
    border-color: color-mix(in srgb, #d05252 60%, transparent);
    color: #d05252;
    background: color-mix(in srgb, #d05252 10%, transparent);
}

.commu-fate.is-deposed {
    border-color: color-mix(in srgb, #d09040 60%, transparent);
    color: #c07f2d;
    background: color-mix(in srgb, #d09040 10%, transparent);
}

.commu-fate.is-exile {
    border-color: color-mix(in srgb, #9d7bd8 60%, transparent);
    color: #9d7bd8;
    background: color-mix(in srgb, #9d7bd8 10%, transparent);
}

.commu-fate.is-natural {
    border-color: var(--border);
    color: var(--text-muted);
    background: var(--bg-surface);
}

.commu-person-epithet {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

/* Role-category tag under the medal in the person detail head */
.commu-person-role-tag {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 2px 8px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
    border: 1px solid var(--border);
    border-left-width: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.commu-person-role-tag:hover { color: var(--text-primary); border-color: var(--link); }

.commu-people-group-count,
.commu-event-people-count {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

.commu-person-moment {
    border-left: 3px solid color-mix(in srgb, var(--link) 72%, var(--border));
    color: color-mix(in srgb, var(--text-secondary) 82%, var(--text-muted));
    font-size: 0.9rem;
    font-style: italic;
    line-height: var(--leading-relaxed);
    margin: 0;
    padding-left: 10px;
}

.commu-person-bio {
    margin: 0;
    font-size: 0.88rem;
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* Card prose follows the site's reading standard (design-system.md): justified,
   with word-break: normal so Korean breaks between characters and the
   stretched gaps stay tight. The epithet is a heading line and stays ragged. */
.commu-person-moment,
.commu-person-bio {
    text-align: justify;
    word-break: normal;
    hyphens: auto;
}

.commu-person-more {
    border-top: 1px dashed var(--border);
    margin-inline: calc(-1 * var(--space-4));
}

.commu-person-more:last-child {
    margin-bottom: calc(-1 * var(--space-4));
}

.commu-person-more > summary {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--control-height);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--link);
    list-style: none;
}

.commu-person-more > summary:hover {
    background: var(--bg-surface-hover);
}

.commu-person-more > summary:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: -2px;
}

.commu-person-more > .commu-person-career {
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
}

.commu-person-more summary::before {
    content: '+ ';
}

.commu-person-more[open] > summary::before {
    content: '− ';
}

.commu-person-more summary::-webkit-details-marker {
    display: none;
}

.commu-person-career {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.commu-person-career li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 0.84rem;
    line-height: var(--leading-normal);
}

.commu-career-year {
    flex: 0 0 84px;
    font-family: 'Courier New', monospace;
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.commu-career-role {
    color: var(--text-secondary);
}

.commu-person-scenes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}

.commu-person-scenes-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-right: 2px;
}

.commu-scene-chip {
    display: inline-block;
    font-size: 0.76rem;
    line-height: var(--leading-none);
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--link);
    text-decoration: none;
    background: var(--bg-surface);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commu-scene-chip:hover {
    border-color: var(--link);
}

.commu-person-detail-head,
.commu-hub-head {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 0;
    margin-top: 18px;
    padding: 18px;
}


/* The medal keeps the left column and the name starts right of it, so a long
   role tag never shifts either. The medal is as tall as the two name lines
   (--title-size and the 1.2 line heights below), and the tag sits under it. */
.commu-person-detail-top {
    --title-size: clamp(1.6rem, 3vw, 2.45rem);
    align-items: start;
    column-gap: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 12px;
    row-gap: 6px;
}

.commu-person-detail-badge {
    display: contents;
}

.commu-person-detail-top > .commu-person-detail-badge > .commu-person-medal {
    grid-column: 1;
    grid-row: 1;
    height: calc(var(--title-size) * 1.2 + 4px + 0.98rem * 1.2);
    width: calc(var(--title-size) * 1.2 + 4px + 0.98rem * 1.2);
}

.commu-person-detail-top .commu-person-medal .commu-role-icon {
    height: 50%;
    width: 50%;
}

.commu-person-detail-top .commu-person-role-tag {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
}

.commu-person-detail-title {
    grid-column: 2;
    grid-row: 1;
}

/* The head card's edge already separates it from the first section, so that
   section sits right under it: no rule of its own, and a negative margin
   takes back the shell's flex gap. */
.commu-person-detail-head { margin-bottom: 0; }
.commu-person-detail-head + .commu-person-detail-section {
    border-top: 0;
    margin-top: -8px;
}

.commu-person-detail-head > .commu-person-meta {
    margin-bottom: var(--space-3);
}

.commu-person-detail-title {
    flex: 1 1 auto;
    min-width: 0;
}

.commu-person-detail-title h1 {
    color: var(--text-primary);
    font-size: var(--title-size);
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
}

.commu-person-detail-title span {
    color: var(--text-muted);
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.2;
    margin-top: 4px;
}

.commu-person-detail-other-names {
    border-top: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 12px 0 0;
    padding-top: 10px;
}

.commu-person-detail-section,
.commu-hub-section {
    border-top: 1px solid var(--border);
    margin-top: 12px;
    padding-top: 20px;
    padding-inline: var(--content-inset);
    scroll-margin-top: 82px;
}

/* Maps and self-padded cards use the section width; prose keeps its inset. */
.commu-person-detail-section.commu-section-wide {
    padding-inline: 0;
}

.commu-section-wide > h2,
.commu-section-wide > .commu-event-timeline-header {
    padding-inline: var(--content-inset);
}

.commu-section-wide > .commu-event-timeline-list,
.commu-section-wide > .commu-tl-filter,
.commu-section-wide > .commu-event-control {
    margin-inline: var(--content-inset);
}

.commu-person-detail-section h2,
.commu-hub-section h2 {
    color: var(--text-primary);
    font-size: 1.24rem;
    line-height: var(--leading-tight);
    margin: 0 0 12px;
}

.commu-person-detail-career .commu-person-career {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0;
    margin-top: 0;
    padding: 12px;
}

.commu-person-markdown {
    color: var(--text-secondary);
    font-size: 0.96rem;
    line-height: var(--leading-prose);
}

/* Justified like the document reader (.book in commulingo-doc.css, which holds
   the measurements): word-break: normal lets Korean break between characters so
   the stretched gaps stay tight. Tables and headings stay ragged. */
.commu-person-markdown p,
.commu-person-markdown blockquote,
.commu-person-markdown li {
    text-align: justify;
    word-break: normal;
    hyphens: auto;
}

.commu-person-markdown > *:first-child {
    margin-top: 0;
}

.commu-person-markdown > *:last-child {
    margin-bottom: 0;
}

.commu-person-markdown p,
.commu-person-markdown ul,
.commu-person-markdown ol,
.commu-person-markdown blockquote,
.commu-person-markdown table,
.commu-person-markdown pre {
    margin: 0 0 1em;
}

.commu-person-markdown h1,
.commu-person-markdown h2,
.commu-person-markdown h3,
.commu-person-markdown h4,
.commu-person-markdown h5,
.commu-person-markdown h6 {
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: var(--leading-snug);
    margin: 1.2em 0 0.5em;
}

.commu-person-markdown blockquote {
    border-left: 3px solid color-mix(in srgb, var(--link) 65%, var(--border));
    color: var(--text-muted);
    padding-left: 12px;
}

/* No blanket colour for links in section prose. `.commu-person-markdown a` is a
   descendant selector, so it outranked .commu-term-link and its siblings and
   recoloured the very links those rules deliberately leave at the body colour —
   a section body full of dictionary links read as a wall of #5d7a5a. Entry links
   are governed by their own classes further down, and the hand-written ones by
   the a:not([class]) rule beside them. */

.commu-person-markdown code {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.9em;
    padding: 1px 4px;
}

.commu-person-markdown pre {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow-x: auto;
    padding: 12px;
}

.commu-person-markdown pre code {
    background: transparent;
    border: 0;
    padding: 0;
}

.commu-person-markdown table {
    border-collapse: collapse;
    width: 100%;
}

.commu-person-markdown th,
.commu-person-markdown td {
    border: 1px solid var(--border);
    padding: 7px 9px;
    text-align: left;
    vertical-align: top;
}

/* The bar is the last thing on a detail page; the site-wide 32px before the
   footer reads as dead air after it, so CommuLingo pages close up tight. */
.commulingo-page footer {
    margin-top: 8px;
}

.commu-hub-head {
    border-left-color: var(--link);
}

.commu-hub-head h1 {
    color: var(--text-primary);
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    letter-spacing: 0;
    line-height: var(--leading-tight);
    margin: 2px 0 7px;
}

.commu-hub-head p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: var(--leading-normal);
    margin: 0;
}

.commu-role-hub-head {
    align-items: center;
    display: flex;
    gap: 14px;
}

.commu-role-hub-head .commu-person-medal {
    background: var(--bg-surface);
    height: 52px;
    width: 52px;
}

.commu-hub-section {
    margin-top: 26px;
}

.commu-hub-section h2 {
    margin-bottom: 14px;
}

.commu-hub-office-rows {
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

/* book-list group header row: title + people-index CTA */
.commu-book-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* The dictionary switcher cloned into the history group takes its own row. */
.commu-book-group-head .commu-dict-nav {
    flex: 1 1 100%;
}

@media (max-width: 720px) {
    .commu-office-grid {
        grid-template-columns: 1fr;
    }

    .commu-office-rows li {
        grid-template-columns: 92px minmax(0, 1fr);
    }
}

@media (max-width: 540px) {
    .commu-people-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .commu-office-rows li {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .commu-person-top {
        flex-wrap: wrap;
    }

    .commu-person-page .commu-person-sidebox {
        width: 100%;
    }
}


/* Historical event pages */
/* Dictionary switcher (people / events / terms), shared by the three list
   pages via partials/commulingo-dict-nav.ejs. The open page's tab is painted. */
/* Labels must never wrap: nowrap plus a viewport-scaled font absorbs the
   in-between widths, and below 560px the data-short labels take over. */
.commu-dict-tab { min-height: var(--control-height); padding: .7rem .4rem; font-size: clamp(0.82rem, 1.9vw, 1rem); overflow: hidden; }
.commu-dict-tab span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commu-dict-tab .commu-role-icon { width: 17px; height: 17px; flex: 0 0 auto; color: inherit; }
/* Narrow phones: swap each label for its data-short form (keeping the
   icons) so all five tabs stay on a single line. */
@media (max-width: 560px) {
    .commu-dict-tab { padding: .6rem .15rem; font-size: .85rem; gap: .25rem; }
    .commu-dict-tab .commu-role-icon { width: 14px; height: 14px; }
    .commu-dict-tab span[data-short] { font-size: 0; }
    .commu-dict-tab span[data-short]::after { content: attr(data-short); font-size: .85rem; }
}
/* Two wide columns rather than three narrow ones, matching the person cards:
   at the 940px container a third column cuts the definition to about 35
   characters a line, which reads worse than it looks. */
/* A 340px floor holds two columns from roughly 700px up to the 940px
   container, the same shape as the person grid, and drops to one column below
   that. min() keeps the floor from overflowing a narrower container. */
.commu-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; margin-top: .5rem; }
.commu-event-card, .commu-event-people-grid > a { display: block; border: 1px solid var(--border, #555); border-radius: 0; padding: 1.1rem; color: inherit; text-decoration: none; background: var(--surface, rgba(255,255,255,.03)); }
.commu-event-people-grid > a:hover { border-color: var(--accent, #b84f4f); }
/* Dictionary/list cards (docs·terms·events·genealogy): same hover treatment as
   .commu-term-chip — accent ground, cream text, no underline. Muted meta lines
   take the 72% cream mix used by the related-report list. The event-people
   grid above keeps its border-only hover: its cards are color-coded by kind
   and a solid accent ground would erase that. */
.commu-event-card:hover { background: var(--accent, #214d2e); border-color: var(--accent, #214d2e); color: var(--clr-cream, #f8edca); text-decoration: none; }
.commu-event-card:hover .commu-event-period,
.commu-event-card:hover .commu-event-original { color: color-mix(in srgb, var(--clr-cream, #f8edca) 72%, var(--accent, #214d2e)); }
.commu-event-card:hover .commu-event-category { color: var(--clr-cream, #f8edca); background: transparent; border-color: color-mix(in srgb, var(--clr-cream, #f8edca) 45%, var(--accent, #214d2e)); }
.commu-event-card h2, .commu-event-card h3 { margin: .1rem 0 .15rem; font-size: 1.05rem; }
.commu-event-card p, .commu-event-head > p { line-height: var(--leading-normal); }
/* Type scale taken from the person card: name 1.05rem, prose .88rem, meta
   .78rem, so the card has a hierarchy to scan rather than one flat block. */
.commu-event-card p { margin: .45rem 0 0; font-size: .88rem; line-height: var(--leading-normal); }
.commu-event-card .commu-event-period { font-size: .78rem; }

/* Meta row above the title: original script, period, category. Mirrors
   .commu-person-meta so the three dictionaries read as one family. */
.commu-event-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    margin-bottom: .1rem;
}
.commu-event-meta .commu-event-period { margin: 0; }
.commu-event-original {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .82rem; font-style: italic; color: var(--text-muted);
}
.commu-event-category {
    padding: 2px 8px; font-size: .74rem; font-weight: 600; letter-spacing: .01em;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
    border: 1px solid var(--border); border-left-width: 3px;
    white-space: nowrap;
}
/* Metadata labels (period, original script, dates) stay muted rather than
   --accent: the accent green fails contrast as text on the dark canvas. */
.commu-event-period { display: block; color: var(--text-muted); font-weight: 700; letter-spacing: .04em; }
.commu-event-head { border-left: 4px solid var(--accent, #b84f4f); padding: .5rem var(--content-inset) 0; margin: 1.1rem 0 0; }
.commu-event-head > p:last-child { margin-bottom: 0; }
.commu-event-head h1 { margin: .25rem 0; }
.commu-event-question { font-weight: 700; font-size: 1.08rem; }
/* The head paragraphs are the 개요, read as prose rather than card text, so
   they take the long-form scale below instead of the 1.65 card leading. The
   question line keeps its headline size. */
.commu-event-head > p { font-size: .96rem; line-height: var(--leading-relaxed); }
.commu-event-head > p.commu-event-question { font-size: 1.05rem; line-height: var(--leading-normal); }
/* ── Event location map (event-map-svg.js) ──
   Coastline-only SVG under the event head. Land/sea both derive from the
   theme tokens: mixing a little of --border into the surface makes land
   lighter than sea on the dark theme and darker on the light one, so a single
   rule reads correctly in both. Markers are the poster red; labels get a
   surface-colored halo so they stay legible over coastline detail. */
.commu-event-map { margin: 1.1rem 0 0; position: relative; }
.commu-event-map .emap-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.commu-event-map-viewport { overflow: auto; }
.commu-event-map-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.commu-event-timeline-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.commu-event-timeline-header h2 { margin: 0; min-width: 0; }
.commu-event-map-tools { flex-shrink: 0; }
.commu-event-map-tools .commu-world-map-controls { position: static; }
.emap-sea { fill: var(--bg-surface); }
.emap-land { fill: color-mix(in srgb, var(--border) 13%, var(--bg-surface)); stroke: color-mix(in srgb, var(--border) 40%, transparent); stroke-width: .6; }
.emap-grid { stroke: color-mix(in srgb, var(--border) 8%, transparent); stroke-width: 1; }
.emap-border { fill: none; stroke: color-mix(in srgb, var(--border) 55%, transparent); stroke-width: 1; }
/* Zoomed out past the fitted frame (commulingo-event-map.js), outline it. */
.emap-frame-outline { display: none; fill: none; stroke: color-mix(in srgb, var(--text-muted) 70%, transparent); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.emap-svg.is-zoomed-out .emap-frame-outline { display: inline; }
.emap-svg.is-zoomed-far .emap-label, .emap-svg.is-zoomed-far .emap-geo-label.is-active { display: none; }
.emap-lake { fill: var(--bg-surface); stroke: color-mix(in srgb, var(--border) 30%, transparent); stroke-width: .5; }
.emap-river { fill: none; stroke: var(--bg-surface); stroke-width: 1.1; stroke-linecap: round; }
/* Territorial control (event-control.js): translucent side tones over the
   land, one dated layer shown at a time. The hues are map colours, not UI
   states; each event's legend below the map names what a tone means. */
.commu-event-map, .commu-event-control {
    --emap-blue: #2f6fb8; --emap-red: var(--clr-red); --emap-amber: #c7861c;
    --emap-purple: #7b5aa6; --emap-gray: #8d8d86; --emap-green: #3f8a4a;
    /* Ink: the anarchists' black, which turns light on a dark map. */
    --emap-black: var(--text-primary);
}
.emap-ctl { stroke: none; fill-opacity: .32; }
.emap-ctl-knock { fill: color-mix(in srgb, var(--border) 13%, var(--bg-surface)); stroke: none; }
.emap-ctl:not(.is-drawn) { stroke-width: .8; stroke-opacity: .55; }
.emap-ctl.is-drawn { fill-opacity: .32; stroke-width: .8; stroke-opacity: .7; stroke-linejoin: round; }
.emap-ctl.is-blue { fill: var(--emap-blue); stroke: var(--emap-blue); }
.emap-ctl.is-red { fill: var(--emap-red); stroke: var(--emap-red); }
.emap-ctl.is-amber { fill: var(--emap-amber); stroke: var(--emap-amber); }
.emap-ctl.is-purple { fill: var(--emap-purple); stroke: var(--emap-purple); }
.emap-ctl.is-gray { fill: var(--emap-gray); stroke: var(--emap-gray); }
.emap-ctl.is-green { fill: var(--emap-green); stroke: var(--emap-green); }
.emap-ctl.is-black { fill: var(--emap-black); stroke: var(--emap-black); }
.emap-ctl.is-black.is-drawn { fill-opacity: .4; }
/* Overlays (risings behind a front): stripes and a dashed edge over the
   holder's colour. */
.emap-ctl-hatch { stroke-width: 1; stroke-dasharray: 3 2; stroke-linejoin: round; }
.emap-ctl-hatch.is-green { stroke: var(--emap-green); }
.emap-ctl-hatch.is-black { stroke: var(--emap-black); }
.emap-hatch-line { stroke-width: 1.6; }
.emap-hatch-line.is-green { stroke: var(--emap-green); }
.emap-hatch-line.is-black { stroke: var(--emap-black); }
.emap-phase { display: none; }
.emap-phase.is-current { display: inline; }
.commu-event-control { margin-block: .7rem 1.1rem; }
.commu-event-control-bar { display: flex; align-items: center; gap: .75rem; }
.commu-event-control-bar[hidden] { display: none; }
.commu-event-control-play {
    flex-shrink: 0; min-width: 4.2rem; padding: .3rem .8rem; border: 1px solid var(--border);
    background: transparent; color: var(--text-primary); font: inherit; font-size: .88rem; cursor: pointer;
}
.commu-event-control-play:hover { border-color: var(--accent); }
.commu-event-control-play[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--clr-cream); }
.commu-event-control-range { flex: 1; min-width: 0; accent-color: var(--accent); }
.commu-event-control-caption { margin: .45rem 0 0; font-size: .95rem; }
.commu-event-control-caption strong { margin-right: .4rem; font-variant-numeric: tabular-nums; }
.commu-event-control-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .45rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--text-secondary, var(--text-primary)); }
.commu-event-control-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.commu-event-control-legend i { width: 14px; height: 10px; border: 1px solid; }
.commu-event-control-legend i.is-blue { background: color-mix(in srgb, var(--emap-blue) 30%, transparent); border-color: var(--emap-blue); }
.commu-event-control-legend i.is-red { background: color-mix(in srgb, var(--emap-red) 34%, transparent); border-color: var(--emap-red); }
.commu-event-control-legend i.is-amber { background: color-mix(in srgb, var(--emap-amber) 34%, transparent); border-color: var(--emap-amber); }
.commu-event-control-legend i.is-purple { background: color-mix(in srgb, var(--emap-purple) 34%, transparent); border-color: var(--emap-purple); }
.commu-event-control-legend i.is-gray { background: color-mix(in srgb, var(--emap-gray) 34%, transparent); border-color: var(--emap-gray); }
.commu-event-control-legend i.is-green { background: color-mix(in srgb, var(--emap-green) 34%, transparent); border-color: var(--emap-green); }
.commu-event-control-legend i.is-black { background: color-mix(in srgb, var(--emap-black) 40%, transparent); border-color: var(--emap-black); }
.commu-event-control-legend i.is-hatch { background: repeating-linear-gradient(-45deg, var(--hatch) 0 1.6px, transparent 1.6px 3.5px); border-style: dashed; }
.commu-event-control-legend i.is-hatch.is-green { --hatch: var(--emap-green); }
.commu-event-control-legend i.is-hatch.is-black { --hatch: var(--emap-black); }
.commu-event-control-note { margin: .45rem 0 0; font-size: .8rem; line-height: var(--leading-snug); color: var(--text-muted); }
.commu-event-control-note a { color: inherit; }
.emap-ref { fill: color-mix(in srgb, var(--text-primary) 65%, transparent); }
.emap-label.is-ref { fill: var(--text-muted); font-size: 11px; }
/* Physical geography (돈강, 볼가강): a floating italic name, no marker. */
.emap-label.is-geo { fill: var(--text-muted); font-size: 11px; font-style: italic; letter-spacing: .08em; }
.emap-marker { fill: var(--text-primary); stroke: var(--bg-surface); stroke-width: 1.4; }
.emap-marker.is-main { fill: var(--clr-red); }
.emap-label { fill: var(--text-primary); font-size: 12px; paint-order: stroke; stroke: var(--bg-surface); stroke-width: 3px; stroke-linejoin: round; }
.emap-label.is-main { font-size: 12.5px; font-weight: 700; }
.emap-inset-sea { fill: color-mix(in srgb, var(--bg-surface) 88%, var(--border)); opacity: .92; }
.emap-inset-land { fill: color-mix(in srgb, var(--border) 34%, var(--bg-surface)); }
.emap-inset-frame { fill: color-mix(in srgb, var(--clr-red) 30%, transparent); stroke: var(--clr-red); stroke-width: 1; }
.emap-inset-border { fill: none; stroke: color-mix(in srgb, var(--border) 55%, transparent); stroke-width: 1; }
/* ── Campaign map: timeline geometries ──
   Arrows are movement (variant = side: red army vs axis), points are static
   beats; the ①②… badges repeat the numbers stamped on the timeline rows.
   Highlighting (commulingo-event-map.js) dims everything but the hovered
   number's geometry — pure class toggles, no layout work. */
.commu-event-timeline-map { margin: 0 0 1.1rem; }
.emap-arrow { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.emap-arrow.is-red { stroke: var(--clr-red); }
.emap-arrow.is-axis { stroke: var(--text-muted); stroke-dasharray: 7 4; }
.emap-arrow.is-neutral { stroke: var(--text-primary); }
.emap-arrow-tip { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.emap-arrow-tip.is-red { stroke: var(--clr-red); }
.emap-arrow-tip.is-axis { stroke: var(--text-muted); }
.emap-arrow-tip.is-neutral { stroke: var(--text-primary); }
.emap-badge circle { fill: var(--bg-surface); stroke: color-mix(in srgb, var(--border) 65%, transparent); stroke-width: 1; }
.emap-badge text { fill: var(--text-primary); font-size: 11.5px; font-weight: 700; }
/* A beat's place name (geo.label): hidden at rest, revealed under the badge
   while its number is highlighted — the rest of the map is dimmed then, so it
   never has to fight for space. */
.emap-geo-label { display: none; fill: var(--text-primary); font-size: 12.5px; font-weight: 600; paint-order: stroke; stroke: var(--bg-surface); stroke-width: 3px; stroke-linejoin: round; }
.emap-geo-label.is-active { display: block; }
/* Actor legend (bottom-left): who each arrow style is — stroke samples reuse
   the .emap-arrow classes, so legend and map can never disagree. The box is
   translucent surface, like the inset, so coastline under it stays hinted. */
.emap-legend-box { fill: color-mix(in srgb, var(--bg-surface) 90%, transparent); stroke: color-mix(in srgb, var(--border) 55%, transparent); stroke-width: 1; }
.emap-legend text { fill: var(--text-primary); font-size: 11.5px; }
/* Per-row arrow numbers: same-side forces share a stroke style, so the ①②…
   numbers are what actually tell 남부 집단군 from 제6군. They carry
   data-geo-num and behave like the map badges (click = pin + scroll). */
.emap-legend-num { cursor: pointer; }
.emap-legend-num circle { fill: var(--bg-surface); stroke: color-mix(in srgb, var(--border) 65%, transparent); stroke-width: 1; }
.emap-legend-num text { fill: var(--text-primary); font-size: 10px; font-weight: 700; }
.emap-legend-num.is-active circle { fill: var(--clr-red); stroke: var(--clr-red); }
.emap-legend-num.is-active text { fill: var(--clr-cream); }
.emap-svg.has-active [data-geo-num] { opacity: .28; transition: opacity .12s ease; }
.emap-svg.has-active [data-geo-num].is-active { opacity: 1; }
.emap-geo.is-active .emap-arrow { stroke-width: 3.8; }
.emap-badge.is-active circle { fill: var(--clr-red); stroke: var(--clr-red); }
.emap-badge.is-active text { fill: var(--clr-cream); }
/* The row's twin of the map badge; the pair lights together. */
.commu-tl-geo-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.3rem; margin-right: .45rem; padding: 0 .2rem;
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    font-style: normal; font-size: .72rem; line-height: var(--leading-none);
    color: var(--text-primary);
}
.commu-event-timeline-list li[data-geo-num] { cursor: default; }
.commu-event-timeline-list li[data-geo-num]:hover,
.commu-event-timeline-list li.is-map-active { background: color-mix(in srgb, var(--border) 6%, transparent); }
.commu-event-timeline-list li[data-geo-num]:hover .commu-tl-geo-badge,
.commu-event-timeline-list li.is-map-active .commu-tl-geo-badge {
    background: var(--accent); border-color: var(--accent); color: var(--clr-cream);
}
/* A city-scale event's rows name their sites instead of carrying numbers;
   rows at the same site light together. */
.commu-tl-place {
    display: inline-block; margin-left: .5rem; padding: 0 .45rem;
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: 999px;
    font-size: .74rem; font-weight: 600; line-height: var(--leading-snug); vertical-align: 1px;
    color: var(--text-muted);
}
.commu-event-timeline-list li.is-place-match { background: color-mix(in srgb, var(--border) 6%, transparent); }
.commu-event-timeline-list li.is-place-match .commu-tl-place {
    background: var(--accent); border-color: var(--accent); color: var(--clr-cream);
}
/* Clicked-to-pin: held through mouseleave and scrolling, so it wears the map
   badge's red instead of the hover green. */
.commu-event-timeline-list li.is-map-pinned .commu-tl-geo-badge {
    background: var(--clr-red); border-color: var(--clr-red); color: var(--clr-cream);
}
/* The SVG scales with the container, so on a phone the 12px labels land near
   6px on glass. Larger in-SVG sizes compensate; markers get the same bump. */
@media (max-width: 700px) {
    .emap-label { font-size: 17px; }
    .emap-label.is-main { font-size: 18px; }
    .emap-label.is-ref { font-size: 14px; }
    .emap-label.is-geo { font-size: 14px; }
    .emap-geo-label { font-size: 17px; }
    .emap-marker { r: 6px; }
    .emap-marker.is-main { r: 8px; }
    .emap-arrow { stroke-width: 3.2; }
    .emap-badge circle { r: 12px; }
    .emap-badge text { font-size: 15px; }
    .emap-legend text { font-size: 14px; }
    .emap-legend-num circle { r: 9px; }
    .emap-legend-num text { font-size: 12px; }
}
/* '상위 항목 · 대숙청' on a nested glossary entry, directly under the name. */
/* '상위 항목 · 대숙청' on a nested glossary entry. A reader who lands on
   예조프시나 or 모스크바 재판 has to see which entry it sits under before the
   definition means much, so it gets a box of its own rather than a line of
   small print: label and parent name both inside it, the whole box clickable.
   The colour is carried by the border and a tinted panel, not by the text — the
   accent green this used to set on the type fails contrast as a text colour on
   the dark canvas (4.0 at #214d2e), while the name at --text-primary reads at
   full strength and the 3px edge is what marks it out. */
.commu-term-parent { margin: .55rem 0 0; }
.commu-term-parent a {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    padding: .35rem .75rem;
    color: var(--text-primary);
    text-decoration: none;
    background: color-mix(in srgb, var(--link) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--link) 45%, var(--border));
    border-left: 3px solid var(--link);
    border-radius: 3px;
    font-size: .92rem;
    letter-spacing: .02em;
}
.commu-term-parent a:hover {
    background: color-mix(in srgb, var(--link) 22%, transparent);
    border-color: var(--link);
}
.commu-term-parent-label {
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}
.commu-term-parent strong { font-weight: 700; }
/* Tabs between the two halves of one subject (glossary entry / history entry).
   Built on the dictionary switcher: same gesture, one level down. */
.commu-pair-tabs { margin: 1rem 0 0; }
.commu-pair-tab span { display: flex; flex-direction: column; align-items: center; line-height: var(--leading-tight); }
.commu-pair-tab small { font-weight: 400; font-size: .74rem; opacity: .7; letter-spacing: .02em; }
.commu-pair-panel[hidden] { display: none; }
/* An event body is the longest article on the site. Its `## ` parts are the
   page's own sections, carrying the same weight as the fixed ones around them
   (연표, 결과), so they are not styled by the shared 1.05rem markdown-heading
   rule, which is sized for the occasional heading inside a person section. */
/* Long-form scale mirrors the reference reader (.book: 1.88 leading), one step
   under the UI text around it. */
.commu-event-body .commu-person-markdown { line-height: var(--leading-prose); }
.commu-event-body .commu-person-markdown h2 {
    font-size: 1.22rem;
    margin: 2em 0 .7em;
    padding-top: .9em;
    border-top: 1px solid var(--border, #555);
    scroll-margin-top: 1rem;
}
.commu-event-body .commu-person-markdown > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Contents, rendered from three body sections up — the point where a reader
   starts wanting to skip rather than scroll. */
/* The whole numbered row is a link, using the same flat hover as site menus. */
.commu-event-toc {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 0;
    margin: 1.4rem 0 0;
}
.commu-event-toc-head {
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    padding: var(--space-3) var(--content-inset);
    border-bottom: 1px solid var(--border);
}
.commu-event-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: event-toc; }
.commu-event-toc li { padding: 0; line-height: var(--leading-snug); counter-increment: event-toc; }
.commu-event-toc li + li { border-top: 1px solid var(--border); }
.commu-event-toc a {
    display: grid;
    grid-template-columns: 3ch minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: var(--space-3) var(--content-inset);
    color: var(--text-primary);
    font-size: .94rem;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color var(--duration-fast) var(--ease-standard);
}
.commu-event-toc a::before {
    content: counter(event-toc) ".";
    white-space: nowrap;
    color: var(--text-muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.commu-event-toc a:hover,
.commu-event-toc a:focus-visible {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
    text-decoration: none;
}
.commu-event-toc a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }

.commu-event-timeline-list { list-style: none; padding: 0; margin: 0; }
.commu-event-timeline-list li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--border, #555); }
.commu-event-timeline-list li > span { color: var(--text-muted); font-weight: 700; }
/* Country tags: flags under the date, and the chip row above the list that
   filters it (commulingo-event-timeline.js). */
.commu-tl-flags { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .45rem; vertical-align: -1px; }
.commu-tl-flags .commu-flag { width: 18px; height: 13px; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.commu-tl-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.commu-tl-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .7rem; border: 1px solid var(--border, #555); border-radius: 999px;
    background: transparent; color: var(--text-primary); font: inherit; font-size: .84rem; cursor: pointer;
}
.commu-tl-chip .commu-flag { width: 18px; height: 13px; }
.commu-tl-chip:hover { border-color: var(--accent); }
.commu-tl-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--clr-cream); }
.emap-badge.is-filtered-out { opacity: .25; }
/* Section country markers (`## … {estonia}`): flags lead the heading and its
   contents entry. */
.commu-section-flags { display: inline-flex; gap: .3rem; margin-right: .55rem; vertical-align: -2px; }
h2 .commu-section-flags .commu-flag { width: 22px; height: 15px; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.commu-event-toc .commu-section-flags { margin-right: .45rem; vertical-align: -1px; }
.commu-event-toc .commu-section-flags .commu-flag { width: 17px; height: 12px; }
.commu-event-timeline-list p { margin: .25rem 0 0; line-height: var(--leading-normal); }

/* 결과 and the timeline entries are read as continuous prose in the same column
   as the body, so they take the body's measure (.96rem/1.88 above); without it
   the outcome fell to the page default and a timeline entry sat at 1.6. */
.commu-event-outcome p,
.commu-event-timeline-list p {
    font-size: .96rem;
    line-height: var(--leading-prose);
}
.commu-event-people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; }
.commu-event-person-relation, .commu-person-event-links em { display: block; color: var(--accent, #b84f4f); font-style: normal; font-weight: 700; font-size: .9rem; }
.commu-event-people-grid strong, .commu-event-people-grid small { display: block; margin-top: .2rem; }
/* Participation notes are supporting card copy, below the name and role. */
.commu-event-people-grid > a > p {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}
.commu-event-sources { padding-inline: var(--content-inset); font-size: .88rem; opacity: .8; }
.commu-event-sources a { margin-left: .45rem; }
.commu-person-event-links { list-style: none; padding: 0; margin: 0; }
.commu-person-event-links li + li { margin-top: .6rem; }
.commu-person-event-links a { display: grid; grid-template-columns: 8.5rem 1fr; gap: .2rem .75rem; padding: .8rem; border: 1px solid var(--border, #555); border-radius: 0; color: inherit; text-decoration: none; }
/* Same hover treatment as .commu-term-chip: accent ground, cream text. The
   relation-tinted rows (li.is-* a) outrank these declarations and keep their
   tint, exactly as they kept it before. */
.commu-person-event-links a:hover { background: var(--accent, #214d2e); border-color: var(--accent, #214d2e); color: var(--clr-cream, #f8edca); text-decoration: none; }
.commu-person-event-links a:hover span { color: color-mix(in srgb, var(--clr-cream, #f8edca) 72%, var(--accent, #214d2e)); }
.commu-person-event-links a:hover em { color: var(--clr-cream, #f8edca); }
.commu-person-event-links span { color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.commu-person-event-links strong { font-size: 1.05rem; }
.commu-person-event-links em, .commu-person-event-links small { grid-column: 2; }
@media (max-width: 560px) { .commu-event-timeline-list li { grid-template-columns: 1fr; gap: .2rem; } .commu-person-event-links a { grid-template-columns: 1fr; } .commu-person-event-links em, .commu-person-event-links small { grid-column: 1; } }

.commu-event-people-grid > a.is-executor, .commu-person-event-links li.is-executor a { border-color: #8c7734; background: color-mix(in srgb, #8c7734 14%, transparent); }
.commu-event-people-grid > a.is-executor .commu-event-person-relation, .commu-person-event-links li.is-executor span, .commu-person-event-links li.is-executor em { color: #d4bb61; }
.commu-event-people-grid > a.is-target, .commu-person-event-links li.is-target a { border-color: #a74a42; background: color-mix(in srgb, #a74a42 14%, transparent); }
.commu-event-people-grid > a.is-target .commu-event-person-relation, .commu-person-event-links li.is-target span, .commu-person-event-links li.is-target em { color: #cf6b5f; }
.commu-event-people-grid > a.is-leader, .commu-person-event-links li.is-leader a { border-color: #b8564f; background: color-mix(in srgb, #b8564f 14%, transparent); }
.commu-event-people-grid > a.is-leader .commu-event-person-relation, .commu-person-event-links li.is-leader span, .commu-person-event-links li.is-leader em { color: #de7c74; }
.commu-event-people-grid > a.is-participant, .commu-person-event-links li.is-participant a { border-color: #4d6f9c; background: color-mix(in srgb, #4d6f9c 14%, transparent); }
.commu-event-people-grid > a.is-participant .commu-event-person-relation, .commu-person-event-links li.is-participant span, .commu-person-event-links li.is-participant em { color: #7ba3d4; }
.commu-event-people-grid > a.is-opponent, .commu-person-event-links li.is-opponent a { border-color: #6f6f6f; background: color-mix(in srgb, #6f6f6f 14%, transparent); }
.commu-event-people-grid > a.is-opponent .commu-event-person-relation, .commu-person-event-links li.is-opponent span, .commu-person-event-links li.is-opponent em { color: #a8a8a8; }
.commu-event-people-grid > a.is-witness, .commu-person-event-links li.is-witness a { border-color: #7a6699; background: color-mix(in srgb, #7a6699 14%, transparent); }
.commu-event-people-grid > a.is-witness .commu-event-person-relation, .commu-person-event-links li.is-witness span, .commu-person-event-links li.is-witness em { color: #a892cc; }
.commu-event-people-grid > a.is-historian, .commu-person-event-links li.is-historian a { border-color: #4f8a80; background: color-mix(in srgb, #4f8a80 14%, transparent); }
.commu-event-people-grid > a.is-historian .commu-event-person-relation, .commu-person-event-links li.is-historian span, .commu-person-event-links li.is-historian em { color: #7cbfb3; }
/* Neutral, provisional look: auto-linked but role not yet classified (see routes/commulingo-events.js). */
.commu-event-people-grid > a.is-unclassified, .commu-person-event-links li.is-unclassified a { border-color: #5f6b78; border-style: dashed; background: color-mix(in srgb, #5f6b78 10%, transparent); }
.commu-event-people-grid > a.is-unclassified .commu-event-person-relation, .commu-person-event-links li.is-unclassified span, .commu-person-event-links li.is-unclassified em { color: #93a1b0; }

/* Hover on a relation-tinted event row. The tint rules above outrank the
   generic .commu-person-event-links a:hover for background, but not for the
   cream text it sets — which on the light theme left cream words on a pale
   tint. So each kind gets its own hover fill: the row's relation hue pressed
   70% toward ink, dark enough in both themes for the cream title and the
   kind's bright label tone to clear contrast, while the border keeps the
   full hue. */
.commu-person-event-links li.is-executor a:hover { background: color-mix(in srgb, #8c7734 70%, var(--clr-black, #010409)); border-color: #8c7734; }
.commu-person-event-links li.is-target a:hover { background: color-mix(in srgb, #a74a42 70%, var(--clr-black, #010409)); border-color: #a74a42; }
.commu-person-event-links li.is-leader a:hover { background: color-mix(in srgb, #b8564f 70%, var(--clr-black, #010409)); border-color: #b8564f; }
.commu-person-event-links li.is-participant a:hover { background: color-mix(in srgb, #4d6f9c 70%, var(--clr-black, #010409)); border-color: #4d6f9c; }
.commu-person-event-links li.is-opponent a:hover { background: color-mix(in srgb, #6f6f6f 70%, var(--clr-black, #010409)); border-color: #6f6f6f; }
.commu-person-event-links li.is-witness a:hover { background: color-mix(in srgb, #7a6699 70%, var(--clr-black, #010409)); border-color: #7a6699; }
.commu-person-event-links li.is-historian a:hover { background: color-mix(in srgb, #4f8a80 70%, var(--clr-black, #010409)); border-color: #4f8a80; }
.commu-person-event-links li.is-unclassified a:hover { background: color-mix(in srgb, #5f6b78 70%, var(--clr-black, #010409)); border-color: #5f6b78; }
/* Related-people groups by involvement kind */
/* Events with named sides (migration 193): each camp is a framed panel with a
   header band, so the camp boundary reads before the kind groups
   inside it. People outside every camp sit in a dashed frame under a grey band. */
.commu-event-people-side {
    margin-top: 1.6rem;
    border: 1px solid color-mix(in srgb, var(--border) 38%, transparent);
    border-top: 3px solid var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.commu-event-people-side:first-of-type { margin-top: .8rem; }
.commu-event-people-side-head {
    display: flex; align-items: center; gap: .7rem;
    margin: 0; padding: .7rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    font-size: 1.15rem; font-weight: 700; letter-spacing: .01em;
}
.commu-event-people-side-head .commu-event-people-group-count { margin-left: auto; font-size: .85rem; }
.commu-event-people-side-body { padding: .2rem 1rem 1.1rem; }
.commu-event-people-side.is-sideless {
    margin-top: 2.2rem;
    border: 1px dashed color-mix(in srgb, var(--border) 38%, transparent);
    background: none;
}
.commu-event-people-side.is-sideless .commu-event-people-side-head {
    border-bottom-style: dashed;
    background: color-mix(in srgb, var(--text-muted) 24%, transparent);
    color: var(--text-secondary); font-size: 1rem;
}
.commu-event-people-side h4.commu-event-people-group-head { font-size: .92rem; }
@media (max-width: 600px) {
    .commu-event-people-side-head { padding: .6rem .7rem; font-size: 1.05rem; }
    .commu-event-people-side-body { padding: .1rem .6rem .8rem; }
}
.commu-event-people-group { margin-top: 1.5rem; }
.commu-event-people-group:first-of-type { margin-top: .4rem; }
.commu-event-people-group-head {
    display: flex; align-items: baseline; gap: .5rem;
    margin: 0 0 .75rem; padding: .32rem .6rem;
    border-left: 3px solid var(--border);
    font-size: 1rem; font-weight: 700; letter-spacing: .01em;
}
.commu-event-people-group-count {
    font-family: 'Courier New', monospace; font-size: .8rem;
    font-weight: 400; color: var(--text-muted);
}
.commu-event-people-group.is-executor .commu-event-people-group-head { border-left-color: #8c7734; color: #d4bb61; }
.commu-event-people-group.is-leader .commu-event-people-group-head { border-left-color: #b8564f; color: #de7c74; }
.commu-event-people-group.is-participant .commu-event-people-group-head { border-left-color: #4d6f9c; color: #7ba3d4; }
.commu-event-people-group.is-opponent .commu-event-people-group-head { border-left-color: #6f6f6f; color: #a8a8a8; }
.commu-event-people-group.is-target .commu-event-people-group-head { border-left-color: #a74a42; color: #cf6b5f; }
.commu-event-people-group.is-witness .commu-event-people-group-head { border-left-color: #7a6699; color: #a892cc; }
.commu-event-people-group.is-historian .commu-event-people-group-head { border-left-color: #4f8a80; color: #7cbfb3; }
.commu-event-people-group.is-unclassified .commu-event-people-group-head { border-left-color: #5f6b78; color: #93a1b0; }

/* Prev / next navigation between event pages. One slim bar per direction:
   dir · period · title on a single baseline, the next card mirrored via
   row-reverse so its arrow sits at the outer edge — the old three-line
   cards were mostly interior emptiness. */
.commu-event-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 1.8rem 0 1rem;
}
.commu-event-nav-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .6rem;
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: 0;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
/* The halves butt into one full-width bar; the shared seam collapses to
   1px. Hover recolors the container (the timeline-row pattern), never the
   text — the global a:hover underline is overridden here. */
.commu-event-nav-link.is-next { flex-direction: row-reverse; justify-content: flex-start; margin-left: -1px; }
.commu-event-nav-link:hover {
    background: color-mix(in srgb, var(--border) 12%, transparent);
    color: inherit;
    text-decoration: none;
}
.commu-event-nav-dir { font-size: .8rem; font-weight: 700; color: var(--link); letter-spacing: .03em; }
.commu-event-nav-period { font-family: 'Courier New', monospace; font-size: .78rem; color: var(--text-muted); }
@media (max-width: 560px) {
    .commu-event-nav { grid-template-columns: 1fr; }
    .commu-event-nav-link.is-next { margin-left: 0; margin-top: -1px; }
}

.commu-event-source-text { display: inline-block; margin-left: .45rem; }
.commu-event-source-text + .commu-event-source-text::before { content: '·'; margin-right: .45rem; opacity: .6; }

/* Related research reports on person/event pages (services/report-mentions.js) */
.commu-related-report-list { list-style: none; padding: 0; margin: 0; }
.commu-related-report-list li + li { margin-top: .6rem; }
.commu-related-report-list a { display: grid; grid-template-columns: 6rem 1fr; gap: .2rem .75rem; padding: .8rem; border: 1px solid var(--border, #555); border-radius: 0; color: inherit; text-decoration: none; }
/* Same hover treatment as .commu-term-chip: accent ground, cream text. */
.commu-related-report-list a:hover { background: var(--accent, #214d2e); border-color: var(--accent, #214d2e); color: var(--clr-cream, #f8edca); text-decoration: none; }
.commu-related-report-list a:hover span { color: color-mix(in srgb, var(--clr-cream, #f8edca) 72%, var(--accent, #214d2e)); }
.commu-related-report-list span { color: var(--text-muted); font-weight: 700; }
.commu-related-report-list strong { font-size: 1.02rem; }
@media (max-width: 560px) { .commu-related-report-list a { grid-template-columns: 1fr; } }
.commu-practice-list a { grid-template-columns: 1fr; }
/* Reference-document lists reuse the report-list layout, but the label is a
   category word (번역 전문), not a date — body typeface, not the mono date font. */
.commu-related-doc-list span { font-weight: 600; }

/* Genealogy links keep the mono year range, and carry the node's own label
   under the chart title when the chart calls the entry something other than
   its headword ('러시아 인민을 위한 축배' for 맏형 러시아 인민론). */
.commu-related-genealogy-list em { grid-column: 2; color: var(--text-muted); font-style: normal; font-size: .92rem; }
@media (max-width: 560px) { .commu-related-genealogy-list em { grid-column: 1; } }

/* Glossary term pages (/commulingo/terms) */
/* Dictionary lists run to 85+ cards, so definitions are clamped to a 3-line
   preview and cards keep their own height instead of stretching to the tallest
   in the row. While a search filters the list the clamp is lifted, otherwise a
   highlighted match could sit in the hidden overflow. */
.commu-terms-page .commu-event-grid,
.commu-events-page .commu-event-grid { align-items: start; }
.commu-terms-page .commu-event-card p,
.commu-events-page .commu-event-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.commu-terms-page .commu-event-grid.is-filtering .commu-event-card p,
.commu-events-page .commu-event-grid.is-filtering .commu-event-card p {
    display: block;
    overflow: visible;
}
/* Glossary order: two halves of one row between the crumb and the search
   field, sharing their borders (-1px each side) so the three read as a block.
   The current order takes the ui-tab mark, a red underline. */
.commu-dict-toolbar { margin: -1px 0; }
.commu-dict-sort { display: grid; grid-template-columns: 1fr 1fr; border: 0; background: none; }
.commu-dict-sort a {
    display: flex; align-items: center; justify-content: center;
    min-height: 38px; border: 1px solid var(--border);
    background: var(--bg-surface); color: var(--text-muted);
    font-size: var(--text-sm); text-decoration: none;
}
.commu-dict-sort a + a { border-left: 0; }
.commu-dict-sort a:hover { background: var(--accent, #214d2e); border-color: var(--accent, #214d2e); color: var(--clr-cream, #f8edca); text-decoration: none; }
.commu-dict-sort a.is-active {
    color: var(--text-primary); font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--accent-red);
}
.commu-dict-sort a.is-active:hover { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }

/* Category chips filter the same list the search box does (one pass, see
   public/js/commulingo-dict-search.js). */
.commu-dict-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.commu-dict-chip {
    padding: .3rem .7rem; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted); font: inherit;
    font-size: .86rem; cursor: pointer;
}
.commu-dict-chip span { color: var(--text-muted); opacity: .75; margin-left: .15rem; }
.commu-dict-chip:hover { background: var(--accent, #214d2e); border-color: var(--accent, #214d2e); color: var(--clr-cream, #f8edca); }
.commu-dict-chip:hover span { color: color-mix(in srgb, var(--clr-cream, #f8edca) 72%, var(--accent, #214d2e)); }
/* Selected: the site's emphasis (accent ground, cream type), square like every
   other box here. */
.commu-dict-chip.is-active {
    color: var(--clr-cream, #f8edca); font-weight: 700;
    background: var(--accent, #214d2e); border-color: var(--accent, #214d2e);
}
.commu-dict-chip.is-active span { color: color-mix(in srgb, var(--clr-cream, #f8edca) 72%, var(--accent, #214d2e)); }
/* The reference library's chips are links (script-less fallback to ?kind=…). */
a.commu-dict-chip { display: inline-block; text-decoration: none; line-height: var(--leading-tight); }
a.commu-dict-chip:hover { text-decoration: none; }

.commu-docs-page .commu-event-grid,
.commu-events-page .commu-event-grid { scroll-margin-top: 4.5rem; }

/* Index bar: initial consonants / letters when sorted by name, decades when
   sorted chronologically. One row that scrolls sideways, so the jump list
   never pushes the first cards below the fold. */
.commu-dict-index {
    display: flex; gap: .3rem; margin-top: var(--space-2);
    border: 0; background: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    padding-bottom: 2px;
}
.commu-dict-index a {
    display: flex; align-items: center; justify-content: center; flex: none;
    min-width: 36px; min-height: 36px; box-sizing: border-box; padding: 0 .45rem;
    border: 1px solid var(--border);
    color: var(--text-muted); text-decoration: none;
    font-size: .85rem;
}
.commu-dict-index a:hover { background: var(--accent, #214d2e); border-color: var(--accent, #214d2e); color: var(--clr-cream, #f8edca); text-decoration: none; }

.commu-term-group-head {
    grid-column: 1 / -1; margin: 1.2rem 0 0; padding-bottom: .3rem;
    border-bottom: 1px solid var(--border);
    font-size: 1rem; color: var(--text-muted); letter-spacing: .04em;
    scroll-margin-top: 4.5rem;
}
.commu-term-group-head:first-child { margin-top: 0; }
.commu-event-grid.is-filtering .commu-term-group-head,
.commu-event-grid.is-ungrouped .commu-term-group-head { display: none; }

.commu-term-sources { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.commu-term-sources h2 { font-size: 1rem; margin: 0 0 .6rem; }
.commu-term-sources ol { margin: 0; padding-left: 1.3rem; }
.commu-term-sources li { margin-bottom: .5rem; font-size: .88rem; line-height: var(--leading-normal); }
.commu-term-sources a { color: var(--link); }
.commu-term-source-note { display: block; color: var(--text-muted); }

/* A piece of a reference document printed on the entry page (manifest
   `excerpts`). Set like the reader (commulingo-doc.css): long-form measure,
   justified Korean prose, without the editor's note the reader carries. A long
   text starts folded to a preview with a button to unfold it
   (commulingo-doc-excerpts.js). It used to scroll inside its own box, which on
   a phone caught every swipe that landed on it and left the page hard to
   scroll past; unfolded, the text reads on the page's one scroll. The head
   row is itself the link to the full reader, so the box's last row stays the
   unfold toggle, the action readers actually use. */
.commu-doc-excerpt {
    border: 1px solid var(--border);
    background: var(--bg-surface);
    /* Clears the sticky crumb bar when folding brings the box back into view. */
    scroll-margin-top: 4rem;
}
.commu-doc-excerpt-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    text-decoration: none;
}
.commu-doc-excerpt-head:hover { background: var(--bg-surface-hover); color: var(--text-primary); text-decoration: none; }
.commu-doc-excerpt-head:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.commu-doc-excerpt-title { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.commu-doc-excerpt-title span { font-size: .78rem; color: var(--text-muted); }
.commu-doc-excerpt-title strong { font-size: 1.02rem; color: var(--text-primary); }
.commu-doc-excerpt-go { flex: none; font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.commu-doc-excerpt-head:hover .commu-doc-excerpt-go { color: var(--text-primary); }
.commu-doc-excerpt-body {
    position: relative;
    padding: .4rem 1rem 1rem;
    font-size: .95rem;
    line-height: var(--leading-prose);
    color: var(--text-primary);
    overflow-wrap: break-word;
}
.commu-doc-excerpt.is-folded .commu-doc-excerpt-body {
    max-height: 20rem;
    overflow: hidden;
}
.commu-doc-excerpt.is-folded .commu-doc-excerpt-body::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5rem;
    background: linear-gradient(to bottom, transparent, var(--bg-surface));
    pointer-events: none;
}
.commu-doc-excerpt-toggle {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    border: 0;
    border-top: 1px solid var(--border);
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.commu-doc-excerpt-toggle:hover { background: var(--bg-surface-hover); }
.commu-doc-excerpt-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.commu-doc-excerpt-body p { margin: .6em 0; text-align: justify; word-break: normal; }
.commu-doc-excerpt-body h3,
.commu-doc-excerpt-body h4 {
    margin: 1.1em 0 .3em;
    font-size: 1rem;
    line-height: var(--leading-snug);
    color: var(--text-primary);
    word-break: keep-all;
}
.commu-doc-excerpt-body h4 { font-size: .95rem; }
.commu-doc-excerpt-body .doc-byline { color: var(--text-secondary); font-size: .9em; text-align: start; }
.commu-doc-excerpt-body blockquote {
    margin: .8em 0;
    padding-left: 1em;
    border-left: 3px solid var(--border-emphasis);
    color: var(--text-secondary);
}
.commu-doc-excerpt-body .note-ref { font-size: .72em; vertical-align: super; line-height: var(--leading-none); text-decoration: none; }
.commu-doc-excerpt-body .notes-list { font-size: .85em; color: var(--text-muted); padding-left: 1.6em; }
.commu-doc-excerpt-body .notes-list .back-link { text-decoration: none; margin-left: .25em; }

/* Entity links inside dictionary prose, on every page that has them rather
   than per page type. These were scoped to .commu-term-page, so the same link
   on a history-event or person page fell through to the default anchor colour —
   link green as text, which is barely legible on the dark canvas. The dashed
   underline is the treatment: the text keeps its own colour and the rule
   underneath says it leads somewhere.

   Dotted rather than dashed for a reference-library full text, so a work title
   reads as a different destination from a glossary entry without spending a
   second colour on it. */
.commu-term-link,
.commu-event-link {
    color: inherit; text-decoration: none;
    border-bottom: 2px dashed var(--link, #5d7a5a);
}
.commu-term-link:hover,
.commu-event-link:hover { border-bottom-style: solid; }

.commu-doc-link {
    color: inherit; text-decoration: none;
    border-bottom: 2px dotted var(--link, #5d7a5a);
}
.commu-doc-link:hover { border-bottom-style: solid; }

/* Role categories and offices — the one linkify kind that had no rule of its
   own and so fell through to the global `a` colour, the recolour the other
   four kinds here deliberately avoid. */
.commu-topic-link {
    color: inherit; text-decoration: none;
    border-bottom: 2px dotted var(--link, #5d7a5a);
}
.commu-topic-link:hover { border-bottom-style: solid; }

/* Hand-written links inside dictionary prose — the person bio, the glossary
   definition, and the section bodies of both dictionaries, which is where a
   markdown body points at a reference-library text. These are the anchors
   linkify.js did not generate, so they were still falling through to the global
   `a` colour and reading dimmer than the sentence around them; :not([class])
   keeps the four entry rules above in charge of their own links. */
.commu-person-bio a:not([class]),
.commu-person-markdown a:not([class]),
.commu-event-head > p a:not([class]),
.commu-event-timeline-list a:not([class]) {
    color: inherit; text-decoration: none;
    border-bottom: 2px dotted var(--link, #5d7a5a);
}
.commu-person-bio a:not([class]):hover,
.commu-person-markdown a:not([class]):hover,
.commu-event-head > p a:not([class]):hover,
.commu-event-timeline-list a:not([class]):hover { border-bottom-style: solid; }

.commu-term-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.commu-term-chip { display: inline-block; padding: .3rem .8rem; border: 1px solid var(--border, #555); border-radius: 0; color: inherit; text-decoration: none; font-size: .95rem; }
/* Hover fills the chip with the house emphasis pair (accent ground, cream
   text) instead of the barely-visible border shift it used to get. */
.commu-term-chip:hover { background: var(--accent, #214d2e); border-color: var(--accent, #214d2e); color: var(--clr-cream, #f8edca); text-decoration: none; }
/* A chip for a nested entry, shown under its parent on the event page. */
.commu-term-chip.is-child { font-size: .88rem; opacity: .85; border-style: dashed; }

/* The dictionary entries a book's lessons name, listed under its hero. Two
   chip rows under one heading, so the h3 labels sit tighter than a section
   heading would. */
.commu-book-dictionary { margin-bottom: 1.5rem; }
.commu-book-dictionary h3 {
    margin: 1rem 0 .5rem;
    font-size: .9rem;
    font-weight: 600;
    opacity: .75;
}
.commu-book-dictionary h3:first-of-type { margin-top: .75rem; }

/* A four-layer map for a book whose political labels otherwise look like one
   flat party list. Explicit left-to-right axes and headings carry meaning; card
   colours and line styles deliberately do not encode factions. */
.commu-faction-guide {
    margin-bottom: var(--space-6);
    padding: 0;
    overflow: hidden;
}
.commu-faction-head { padding: var(--content-inset); border-bottom: 1px solid var(--border); }
.commu-faction-eyebrow,
.commu-faction-period {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.commu-faction-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
.commu-faction-intro { max-width: 54rem; margin: var(--space-3) 0 0; color: var(--text-secondary); line-height: var(--leading-normal); }
.commu-faction-caveat {
    margin: 0;
    padding: var(--space-3) var(--content-inset);
    border-bottom: 1px solid var(--border);
    background: var(--bg-inset);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.commu-faction-layer { position: relative; padding: var(--space-8) var(--content-inset); border-bottom: 1px solid var(--border); }
.commu-faction-layer:not(:last-child)::after {
    content: '↓';
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -1.05rem;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-family: var(--font-mono);
    line-height: 1.8rem;
    text-align: center;
    transform: translateX(-50%);
}
.commu-faction-layer-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.commu-faction-step {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--bg-inset);
    font-family: var(--font-mono);
    font-weight: 700;
}
.commu-faction-layer-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-tight); }
.commu-faction-summary { max-width: 54rem; margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.commu-faction-axis {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0 0 var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--text-muted);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
}
.commu-faction-axis::after { content: '→'; position: absolute; top: -.7rem; left: 50%; padding: 0 var(--space-2); background: var(--bg-surface); transform: translateX(-50%); }
.commu-faction-axis span:last-child { text-align: right; }
.commu-faction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); align-items: start; }
.commu-faction-layer--counterrevolution .commu-faction-grid,
.commu-faction-layer--networks .commu-faction-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.commu-faction-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--border);
    background: var(--bg-surface);
}
.commu-faction-card > header { padding: var(--space-4); border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.commu-faction-card h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); }
.commu-faction-card > header p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.commu-faction-description { margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.commu-faction-turn { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid color-mix(in srgb, var(--border) 28%, transparent); background: var(--bg-inset); font-size: var(--text-xs); line-height: var(--leading-normal); }
.commu-faction-turn strong { color: var(--text-secondary); font-family: var(--font-mono); text-transform: uppercase; }
.commu-faction-people { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid color-mix(in srgb, var(--border) 28%, transparent); }
.commu-faction-people > span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.commu-faction-people ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.commu-faction-people li { color: var(--text-secondary); font-size: var(--text-xs); }
.commu-faction-people li:not(:last-child)::after { content: '·'; margin-left: var(--space-2); color: var(--text-muted); }
.commu-faction-people a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--link); }
.commu-faction-people a:hover { border-bottom-style: solid; }
.commu-faction-timeline { padding: var(--space-8) var(--content-inset); border-bottom: 1px solid var(--border); }
.commu-faction-timeline h3 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-xl); }
.commu-faction-timeline ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.commu-faction-timeline li { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4); border-top: 2px solid var(--text-muted); border-right: 1px solid color-mix(in srgb, var(--border) 35%, transparent); }
.commu-faction-timeline li:last-child { border-right: 0; }
.commu-faction-timeline li::before { content: ''; position: absolute; top: -.38rem; left: var(--space-4); width: .65rem; height: .65rem; border: 2px solid var(--text-muted); background: var(--bg-surface); }
.commu-faction-timeline time { margin-top: var(--space-1); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.commu-faction-timeline strong { font-size: var(--text-sm); }
.commu-faction-timeline span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }
.commu-faction-sources { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-6); padding: var(--space-4) var(--content-inset); font-size: var(--text-xs); }
.commu-faction-sources strong { font-family: var(--font-mono); }
.commu-faction-sources ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.commu-faction-sources a { color: var(--link); }
@media (max-width: 820px) {
    .commu-faction-layer--counterrevolution .commu-faction-grid,
    .commu-faction-layer--networks .commu-faction-grid { grid-template-columns: 1fr; }
    .commu-faction-timeline ol { grid-template-columns: 1fr; padding-left: var(--space-4); border-left: 2px solid var(--text-muted); }
    .commu-faction-timeline li { border-top: 0; border-right: 0; }
    .commu-faction-timeline li::before { top: 1.2rem; left: calc(-1 * var(--space-4) - .4rem); }
    .commu-faction-sources { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .commu-faction-layer { padding-top: var(--space-6); padding-bottom: var(--space-6); }
    .commu-faction-layer-head { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); }
    .commu-faction-step { width: 2.5rem; height: 2.5rem; }
    .commu-faction-grid { grid-template-columns: 1fr; }
}

/* ── Genealogy charts (/commulingo/genealogy) ─────────────────────────────
   The SVG is drawn server-side (data/commulingo/genealogy-svg.js) with class
   hooks only, so every color resolves here and follows the theme. The chart
   is wider than a phone: it scrolls horizontally inside .gen-scroll while the
   page itself never does. */
.gen-figure { padding: .75rem; margin: 0; }
/* On a phone the chart is scaled to whatever width the box leaves it, so the
   padding is coming straight out of the drawing's legibility. */
@media (max-width: 560px) { .gen-figure { padding: .3rem; } }
.gen-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* The chart is wider than a phone, and the whole point of it is reading the
   four lanes against each other, so it scales down to fit rather than being
   scrolled a lane at a time. The `max-width: 100%` reset in ui.css already does
   that; `height: auto` is what it was missing. Without it the svg kept the
   height its markup asks for while the width shrank, so the scaled drawing sat
   centred in a 1409px box with dead space above and below. */
.gen-svg { display: block; font-family: inherit; height: auto; }

.gen-col-header { fill: var(--text-secondary); font-size: 14px; font-weight: 600; }
.gen-year { fill: var(--text-muted); font-size: 11px; }
.gen-gridline { stroke: color-mix(in srgb, var(--border) 18%, transparent); stroke-width: 1; }
.gen-lane-sep { stroke: color-mix(in srgb, var(--border) 10%, transparent); stroke-width: 1; }

/* Most nodes open a dictionary entry, so a linked node is the plain case and
   the exception carries the mark: an entry that does not exist yet gets a
   dashed border and a dimmer label. Colouring the linked ones with --link had
   this backwards, and on the dark theme that green read dimmer than the plain
   label, so the nodes that were clickable looked like the disabled ones. */
.gen-node rect { fill: var(--bg-surface-hover); stroke: color-mix(in srgb, var(--border) 55%, transparent); stroke-width: 1; }
.gen-node-label { fill: var(--text-primary); font-size: 12.5px; font-weight: 600; }
.gen-node:not(.gen-node-linked) rect { stroke: color-mix(in srgb, var(--border) 32%, transparent); stroke-dasharray: 4 3; }
.gen-node:not(.gen-node-linked) .gen-node-label { fill: var(--text-muted); font-weight: 500; }
a:hover .gen-node-linked rect, a:focus-visible .gen-node-linked rect { stroke: var(--border-emphasis); stroke-width: 1.4; fill: var(--bg-surface); }
.gen-node-period { fill: var(--text-muted); font-size: 10.5px; }

.gen-edge { fill: none; stroke-width: 1.5; }
.gen-edge-flow { stroke: color-mix(in srgb, var(--text-secondary) 75%, transparent); }
.gen-edge-influence { stroke: color-mix(in srgb, var(--text-muted) 80%, transparent); stroke-dasharray: 6 4; }
.gen-edge-opposition { stroke: color-mix(in srgb, var(--accent-red) 80%, transparent); stroke-dasharray: 2 4; stroke-linecap: round; }
.gen-edge-end { stroke: color-mix(in srgb, var(--accent-red) 55%, var(--clr-muted)); stroke-dasharray: 2 4; stroke-linecap: round; }
.gen-marker-flow path { fill: color-mix(in srgb, var(--text-secondary) 75%, transparent); }
.gen-marker-influence path { fill: color-mix(in srgb, var(--text-muted) 80%, transparent); }
.gen-marker-end path { fill: color-mix(in srgb, var(--accent-red) 55%, var(--clr-muted)); }
.gen-edge-label {
    fill: var(--text-muted);
    font-size: 10.5px;
    paint-order: stroke;
    stroke: var(--bg-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.gen-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; margin-top: .6rem; font-size: .82rem; color: var(--text-muted); }
.gen-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.gen-legend-item svg { flex: none; }
.gen-legend-swatch { fill: var(--bg-surface-hover); stroke: color-mix(in srgb, var(--border) 32%, transparent); stroke-dasharray: 4 3; }

/* ---------------------------------------------------------------- 훈련장
   /commulingo/drill — 사전에서 만든 무작위 퀴즈·연표 게임. 퀴즈 화면은
   .commu-quiz / .commu-choice / .commu-feedback를 그대로 쓰고, 여기는
   훈련장 고유 부품(덱 카드, 인용 상자, 순서 맞추기 목록)만 정의한다. */

.commu-drill-promo {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.commu-drill-promo h2 {
    font-size: 1.08rem;
    margin: 0 0 6px;
}

.commu-drill-promo p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: var(--leading-snug);
    margin: 0;
}

.commu-drill-group {
    margin-bottom: 26px;
}

.commu-drill-group-title {
    font-size: 1.1rem;
    margin: 0 0 10px;
}

.commu-drill-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.commu-drill-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.commu-drill-card:hover {
    background: var(--bg-surface-hover);
    border-color: var(--link);
}

.commu-drill-card-desc {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: var(--leading-snug);
}

.commu-drill-card-meta {
    color: var(--text-muted);
    display: flex;
    font-size: 0.82rem;
    gap: 8px;
    justify-content: space-between;
    margin-top: auto;
}

.commu-drill-quote {
    background: var(--bg-surface);
    border-left: 4px solid var(--accent);
    color: var(--text-secondary);
    display: grid;
    gap: 6px;
    line-height: var(--leading-relaxed);
    margin: 0 0 16px;
    padding: 12px 14px;
}

.commu-drill-quote strong {
    color: var(--text-primary);
}

.commu-drill-lookup {
    border: 1px solid var(--border);
    color: var(--link);
    font-size: 0.86rem;
    justify-self: start;
    padding: 6px 10px;
    text-decoration: none;
}

.commu-drill-lookup:hover {
    border-color: var(--link);
}

.commu-drill-order-hint {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0 0 12px;
}

.commu-drill-order {
    counter-reset: drill-order;
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.commu-drill-order-item {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    counter-increment: drill-order;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.commu-drill-order-item::before {
    color: var(--text-muted);
    content: counter(drill-order);
    font-weight: 700;
    min-width: 1.2em;
    text-align: center;
}

.commu-drill-order-label {
    flex: 1;
    line-height: var(--leading-snug);
}

.commu-drill-order-reveal {
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.commu-drill-order-controls {
    display: flex;
    gap: 6px;
}

.commu-drill-order-move {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    min-height: 40px;
    min-width: 40px;
    padding: 6px 10px;
}

.commu-drill-order-move:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    border-color: var(--link);
}

.commu-drill-order-move:disabled {
    cursor: default;
    opacity: 0.35;
}

.commu-drill-order-item.is-correct {
    background: color-mix(in srgb, var(--accent-green) 22%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--accent-green) 55%, var(--border));
}

.commu-drill-order-item.is-wrong {
    background: color-mix(in srgb, var(--accent-red) 16%, var(--bg-surface));
    border-color: var(--accent-red);
}

@media (max-width: 640px) {
    .commu-drill-grid {
        grid-template-columns: 1fr;
    }
}

/* 쇼츠 (/commulingo/drill/shorts) — 화면 높이 스크롤 상자 안에서 카드 한 장이
   한 화면을 채우고 위로 넘긴다. 높이는 JS가 상자 위치에서 계산해
   --shorts-height로 준다. 질문 아래 버튼을 누르면 답과 해설이 열린다. */
.commu-shorts {
    position: relative;
    margin-bottom: var(--space-6);
}

.commu-shorts-feed {
    position: relative;
    height: var(--shorts-height, calc(100dvh - 140px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    border: 1px solid var(--border);
    background: var(--bg-inset);
}

.commu-shorts-feed::-webkit-scrollbar {
    display: none;
}

.commu-shorts-feed:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.commu-shorts-loading {
    margin: 0;
    padding: var(--space-6) var(--content-inset);
    color: var(--text-muted);
}

.commu-short {
    display: flex;
    box-sizing: border-box;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* 카드는 피드 높이로 고정하고, 답을 열어 넘치면 카드 안에서 스크롤한다.
   카드 높이가 피드보다 커지면 스냅 위치를 다시 고르면서 윗 카드가 걸쳐 보인다.
   넘칠 때 위쪽이 잘리지 않게 safe center로 가운데 정렬한다. */
.commu-short-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    gap: 14px;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    max-width: 620px;
    margin: 0 auto;
    padding: 44px var(--content-inset) 28px;
}

.commu-short-topic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.commu-short-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.commu-short-prompt {
    margin: 0;
    font-size: 1.3rem;
    line-height: var(--leading-snug);
}

.commu-short-quote {
    margin: 0;
}

.commu-short-recall {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 700;
}

.commu-short-term {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    line-height: var(--leading-tight);
}

.commu-short-reveal {
    min-height: 96px;
    border: 1px dashed var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.commu-short-reveal:hover {
    background: var(--bg-surface-hover);
    border-color: var(--link);
}

.commu-short-reveal:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.commu-short-more {
    align-self: flex-start;
}

.commu-short-answer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-left: 4px solid var(--accent);
    background: var(--bg-surface);
    animation: commu-feedback-rise 260ms ease;
}

.commu-short-answer-text {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: var(--leading-snug);
}

.commu-short-rest {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: var(--leading-normal);
}

@media (prefers-reduced-motion: reduce) {
    .commu-short-answer {
        animation: none;
    }
}

/* ── Politburo membership page (/commulingo/politburo) ──────────────────
   Era sections and per-congress tables over the people dictionary. Tables
   scroll inside their own wrapper so the page body never scrolls sideways. */
.commu-politburo-head {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 18px 20px;
}

.commu-politburo-head h1 {
    font-size: 1.35rem;
    margin: 0;
}

.commu-politburo-range {
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    margin: 2px 0 10px;
}

.commu-politburo-intro,
.commu-politburo-era-intro {
    color: var(--text-primary);
    line-height: var(--leading-normal);
    margin: 0;
    word-break: normal;
}

/* The era blurbs are context, not the content; the tables are. */
.commu-politburo-era-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: var(--leading-normal);
}

.commu-politburo-era,
.commu-politburo-congresses {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 16px 20px;
}

/* Era sections fold like the congress blocks; the card keeps its frame and
   the summary row takes over the padding. */
.commu-politburo-era {
    padding: 0;
}

.commu-politburo-era > summary {
    cursor: pointer;
    padding: 14px 20px;
}

.commu-politburo-era > summary:hover {
    background: var(--btn-hover);
}

.commu-politburo-era > summary h2 {
    display: inline;
}

.commu-politburo-era .commu-politburo-era-intro {
    padding: 2px 20px 0;
}

.commu-politburo-era .commu-politburo-scroll {
    margin: 12px 20px 16px;
}

.commu-politburo-era h2,
.commu-politburo-congresses h2 {
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.commu-politburo-period {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 6px;
}

.commu-politburo-scroll {
    margin-top: 12px;
    overflow-x: auto;
}

.commu-politburo-table {
    border-collapse: collapse;
    font-size: 0.92rem;
    width: 100%;
}

.commu-politburo-table th,
.commu-politburo-table td {
    border: 1px solid var(--border);
    padding: 6px 9px;
    text-align: left;
    vertical-align: top;
    word-break: normal;
}

/* Only the name column stays on one line; tenure and notes wrap, so the
   table fits the shell width and the scroll wrapper is a fallback, not the
   normal reading mode. Spans are separated by ' · ', which gives the wrap
   its break points between stints rather than inside a date. */
.commu-politburo-table td:first-child {
    white-space: nowrap;
}

.commu-politburo-table td:last-child {
    min-width: 10em;
}

/* One stint ("정위원 1919.03–1924.01") per line: a multi-stint career reads
   as a small list rather than a run-on line, and a date never breaks. */
.commu-politburo-stint {
    display: block;
    white-space: nowrap;
}

.commu-politburo-table th {
    background: var(--bg-surface);
    color: var(--text-muted);
    font-weight: 600;
}

.commu-politburo-unlinked {
    color: var(--text-muted);
}

.commu-politburo-congress {
    border: 1px solid var(--border);
    margin-top: 10px;
}

.commu-politburo-congress summary {
    align-items: baseline;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 12px;
}

.commu-politburo-congress summary:hover {
    background: var(--btn-hover);
}

.commu-politburo-congress-title {
    font-weight: 700;
}

.commu-politburo-congress-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.commu-politburo-congress-note {
    color: var(--text-primary);
    line-height: var(--leading-normal);
    margin: 0;
    padding: 0 12px 4px;
}

.commu-politburo-congress h3 {
    font-size: 0.95rem;
    margin: 10px 12px 0;
}

.commu-politburo-congress .commu-politburo-scroll {
    margin: 8px 12px 12px;
}

.commu-politburo-sources {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: var(--leading-normal);
    margin: 0;
}

/* ── Politburo box on the person page ────────────────────────────────────
   Sits between the career timeline and the related events: the stints in
   the same quiet list voice as the career rows, one line per stint. */
.commu-person-politburo-stints {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.commu-person-politburo-stints li {
    font-size: 0.84rem;
    line-height: var(--leading-snug);
    white-space: nowrap;
}

.commu-person-politburo-note {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: var(--leading-snug);
    margin: 8px 0 0;
}


/* Review queue (missed questions due again) on the book hero, and the
   keyboard hint under the quiz actions; both stay out of the way when
   nothing applies. */
.commulingo-review {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
}

.commulingo-review small {
    color: var(--text-muted);
}

.commu-level-badge.is-review {
    border-color: var(--link);
    color: var(--link);
}

.commu-resume-review {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--link);
}

/* Documents from this period: the cluster an event belongs to. The overview
   is one accent bar with cream type; the detail documents are full-width rows
   below it, the current page marked in its own slot. Titles take the text
   colour rather than --link: the row is the control, and the olive link mix
   sinks into the dark canvas at list size. */
.commu-event-relations { margin: 1.4rem 0 0; background: var(--bg-surface); }
.commu-event-relations + .commu-event-relations { margin-top: .8rem; }
.commu-event-relations-head {
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    padding: .7rem .9rem;
    line-height: var(--leading-snug);
}
.commu-event-relations-box {
    background: var(--bg-surface);
    border: 0;
    border-top: 1px solid var(--border, #555);
    border-radius: 0;
}
.commu-event-relations-parent,
.commu-event-relations-list a,
.commu-event-relations-list .is-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .75rem;
    padding: .62rem .9rem;
    line-height: var(--leading-snug);
    text-decoration: none;
}
.commu-event-relations-title { flex: 1 1 14rem; min-width: 0; }
.commu-event-relations-tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.commu-event-relations-period {
    margin-left: auto;
    font-size: .85rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.commu-event-relations-parent { background: var(--accent, #214d2e); color: var(--clr-cream, #f8edca); }
.commu-event-relations-parent .commu-event-relations-tag { flex: 0 0 auto; order: -1; color: color-mix(in srgb, var(--clr-cream, #f8edca) 78%, transparent); }
.commu-event-relations-parent .commu-event-relations-title { font-weight: 700; }
.commu-event-relations-parent .commu-event-relations-period { color: color-mix(in srgb, var(--clr-cream, #f8edca) 78%, transparent); }
.commu-event-relations-parent:hover { color: var(--clr-white, #fff); text-decoration: none; }
.commu-event-relations-list { list-style: none; margin: 0; padding: 0; }
.commu-event-relations-list li + li { border-top: 1px solid color-mix(in srgb, var(--border, #555) 35%, transparent); }
.commu-event-relations-list a { color: var(--text-primary); }
.commu-event-relations-list a:hover { color: var(--text-primary); background: var(--bg-surface-hover); text-decoration: none; }
.commu-event-relations-list .commu-event-relations-tag { color: var(--text-muted); }
.commu-event-relations-list .is-current {
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--accent, #214d2e);
}
.commu-event-relations-list .is-current .commu-event-relations-period { font-weight: 400; }

/* A quiet disclosure between the dictionary masthead and learning menu. */
.commu-updates {
    padding: 0;
    scroll-margin-top: 80px;
}
.commu-updates-toggle,
.commu-updates-group > summary {
    padding: 12px 16px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
}
.commu-updates summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}
.commu-updates[open] > summary {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}
.commu-updates-body {
    padding: 0 16px 12px;
}
.commu-updates-description {
    margin: 12px 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: var(--leading-normal);
}
.commu-updates-group {
    border-top: 1px solid var(--border);
}
.commu-updates-group > summary {
    padding-inline: 0;
}
.commu-updates time {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
}
.commu-updates-group > summary time {
    margin-inline-start: 12px;
}
.commu-updates-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.commu-updates-list li {
    padding: 12px 0;
    border-top: 1px solid var(--border);
    overflow-wrap: anywhere;
}
.commu-updates-list li > time {
    display: block;
    margin-bottom: 4px;
}
.commu-updates-list a {
    font-size: 0.9rem;
    font-weight: 700;
}
.commu-updates-excerpt {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: var(--leading-normal);
}

/* Landing page: align the menu to the frame, leaving reading space for copy. */
.commulingo-home {
    gap: 12px;
}
.commulingo-home .commulingo-hero--home {
    padding: 0;
    gap: 0;
}
.commulingo-home .commulingo-hero-main {
    padding: 18px 18px 0;
    gap: 12px;
}
.commulingo-home .commulingo-hero h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: var(--tracking-home-title);
}
.commulingo-home-description {
    padding: 4px 18px 16px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: var(--leading-normal);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.commulingo-home .commulingo-hero-dict {
    padding-top: 12px;
    gap: 10px;
}
.commulingo-home .commulingo-hero-dict-label {
    padding-inline: 18px;
}
.commulingo-home .commu-dict-nav {
    border-inline: 0;
    border-bottom: 0;
}
.commulingo-home .commu-dict-tab {
    min-height: 54px;
}
.commulingo-home .commu-updates {
    border-top: 1px solid var(--border);
}
.commulingo-home .commu-drill-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
    padding: 18px;
    margin: 0;
}
.commulingo-home .commu-drill-promo p {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.commulingo-home .commulingo-book-groups {
    gap: 28px;
    margin-top: 12px;
}
.commulingo-home .commu-book-group {
    border: 0;
    background: transparent;
    padding: 0;
}
.commulingo-home .commu-book-group-title {
    font-size: 1.2rem;
    line-height: var(--leading-snug);
    margin-bottom: 14px;
}
.commulingo-home .commu-book-card {
    border-color: color-mix(in srgb, var(--border) 45%, transparent);
    border-left-color: var(--accent);
}
.commulingo-home .commu-book-card:hover {
    border-color: var(--accent);
}
.commulingo-home .commu-book-card h3 {
    font-size: 1.05rem;
    line-height: var(--leading-snug);
}
@media (max-width: 560px) {
    .commulingo-home .commulingo-hero-main {
        padding: 14px 12px 0;
    }
    .commulingo-home-description {
        padding: 4px 12px 14px;
        font-size: 0.82rem;
    }
    .commulingo-home .commulingo-hero-dict-label {
        padding-inline: 12px;
    }
    .commulingo-home .commu-dict-tab {
        flex-direction: column;
        gap: 6px;
        padding: 10px 2px;
        min-height: 64px;
    }
    .commulingo-home .commu-dict-tab .commu-role-icon {
        width: 18px;
        height: 18px;
    }
    .commulingo-home .commu-drill-promo {
        padding: 14px 12px;
        grid-template-columns: minmax(0, 1fr);
    }
    .commulingo-home .commu-drill-promo .btn {
        text-align: center;
        min-height: 44px;
    }
    .commulingo-home .commu-book-card {
        padding: 14px;
    }
}

.commu-updates-group-label {
    display: inline-block;
    min-width: 5.5em;
}
.commu-updates-latest {
    display: block;
    margin: 5px 0 0 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
}


/* One compact progress indicator, aligned with the page title. */
.commulingo-home-progress {
    flex: 0 0 116px;
    display: grid;
    gap: 7px;
}
.commulingo-home-progress-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    white-space: nowrap;
}
.commulingo-home-progress-label label {
    color: var(--text-muted);
    font-size: 0.72rem;
}
.commulingo-home-progress-label span {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.commulingo-home-progress progress {
    display: block;
    appearance: none;
    width: 100%;
    height: 3px;
    border: 0;
    background: color-mix(in srgb, var(--text-muted) 24%, transparent);
    color: var(--text-secondary);
}
.commulingo-home-progress progress::-webkit-progress-bar {
    background: color-mix(in srgb, var(--text-muted) 24%, transparent);
}
.commulingo-home-progress progress::-webkit-progress-value {
    background: var(--text-secondary);
}
.commulingo-home-progress progress::-moz-progress-bar {
    background: var(--text-secondary);
}

/* People explorer (/commulingo/people): a bar of facet buttons, each a
   <details> whose panel drops over the page below the bar; the conditions as
   removable chips; then the results or, with no condition, the era shelves.
   Options are .commu-dict-chip links. The script swaps #people-browser. */
.commu-people-browser { margin-top: var(--space-4); }
.commu-dict-shell > .commu-people-browser { margin-top: 0; }
.commu-people-filterbar { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.commu-people-facet > summary {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--control-height); padding: 0 var(--space-3);
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text-primary);
    font-size: var(--text-sm); cursor: pointer; list-style: none; user-select: none;
}
.commu-people-facet > summary::-webkit-details-marker { display: none; }
.commu-people-facet > summary:hover { border-color: color-mix(in srgb, var(--text-muted) 55%, var(--border)); }
.commu-people-facet > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.commu-people-facet > summary .commu-role-icon { width: 15px; height: 15px; flex: none; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-standard); }
.commu-people-facet[open] > summary { border-color: var(--link); }
.commu-people-facet[open] > summary .commu-role-icon { transform: rotate(180deg); }
.commu-people-facet-title { font-weight: 600; }
.commu-people-facet.is-set > summary { border-color: var(--accent); background: var(--accent); color: var(--clr-cream, #f8edca); }
.commu-people-facet.is-set > summary .commu-role-icon { color: inherit; }
.commu-people-facet-panel {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + var(--space-1));
    max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-4); border: 1px solid var(--link); background: var(--bg-surface, var(--card-bg));
    box-shadow: 0 12px 24px color-mix(in srgb, #000 35%, transparent);
}
.commu-people-facet-panel h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.commu-people-facet-panel h3:first-child { margin-top: 0; }
.commu-people-facet-panel h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.commu-people-facet-search { width: 100%; box-sizing: border-box; margin-bottom: var(--space-3); }
/* Focus reads like the dictionary search field: link-coloured border and an
   inner underline, not the red outline ring around the box. */
.commu-people-facet-search:focus-visible { outline: none; border-color: var(--link); box-shadow: inset 0 -2px 0 0 var(--link); }
.commu-people-facet-status { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }
.commu-people-facet-group + .commu-people-facet-group { margin-top: var(--space-3); }
.commu-people-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Two classes so it outranks a.commu-dict-chip's inline-block: the label must
   sit centred in the 36px box, link or button. */
.commu-dict-chip.commu-people-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; box-sizing: border-box; }
/* The chosen option, named after the facet title once a dictionary filter is set. */
.commu-dict-facet-value { min-width: 0; overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.commu-dict-facet-value:empty { display: none; }
.commu-dict-facet-value::before { content: '·'; margin-right: var(--space-2); }
.commu-dict-facets .commu-people-facet > summary { max-width: 100%; box-sizing: border-box; }
.commu-people-chip svg { width: 15px; height: 15px; flex: none; }
.commu-people-chip small { color: var(--text-muted); font-size: var(--text-xs, .75rem); }
.commu-people-chip.is-active small, .commu-people-chip:hover small { color: inherit; opacity: .8; }
.commu-people-chip:focus-visible, .commu-people-condition:focus-visible, .commu-people-tool:focus-visible, .commu-people-term-link:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.commu-people-conditions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-inline: var(--content-inset); }
.commu-people-condition {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-2) 0 var(--space-3);
    background: var(--accent); color: var(--clr-cream, #f8edca); font-size: var(--text-sm); text-decoration: none;
}
.commu-people-condition:hover { color: var(--clr-cream, #f8edca); text-decoration: none; background: color-mix(in srgb, var(--accent) 80%, #000); }
.commu-people-condition .commu-role-icon { width: 14px; height: 14px; }
.commu-people-condition-reset { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; padding: var(--space-1); }
.commu-people-condition-reset:hover { color: var(--text-primary); }
.commu-people-results-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
    margin-block: var(--space-5) var(--space-3); padding: var(--space-4) var(--content-inset) 0; border-top: 1px solid var(--border); scroll-margin-top: var(--space-4);
}
.commu-people-results-head:focus { outline: none; }
.commu-people-results-head h2 { margin: 0; font-size: var(--text-lg); }
.commu-people-results-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.commu-people-results-tools > span { display: inline-flex; border: 1px solid var(--border); }
.commu-people-tool { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-3); color: var(--text-muted); font-size: var(--text-sm); text-decoration: none; }
.commu-people-tool + .commu-people-tool { border-left: 1px solid var(--border); }
.commu-people-tool:hover { color: var(--text-primary); background: color-mix(in srgb, var(--link) 12%, transparent); text-decoration: none; }
.commu-people-tool.is-active { color: var(--clr-cream, #f8edca); background: var(--accent); font-weight: 600; }
.commu-people-tool .commu-role-icon { width: 14px; height: 14px; }
.commu-people-term-link { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); padding: var(--space-3) var(--content-inset); border: 1px solid var(--border); color: var(--text-primary); text-decoration: none; }
.commu-people-term-link > span:first-child { color: var(--text-muted); font-size: var(--text-sm); }
.commu-people-term-link > span:last-child { margin-left: auto; color: var(--text-muted); }
.commu-people-term-link:hover { background: color-mix(in srgb, var(--link) 10%, transparent); color: var(--text-primary); text-decoration: none; }
/* List view: one row per person, the whole row the link. */
.commu-people-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.commu-people-row { border-bottom: 1px solid var(--border); }
.commu-people-row-link {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 15rem); align-items: center; gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--content-inset); color: var(--text-primary); text-decoration: none;
}
.commu-people-row-link:hover { background: color-mix(in srgb, var(--link) 10%, transparent); color: var(--text-primary); text-decoration: none; }
.commu-people-row-link:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.commu-people-row-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); color: var(--text-secondary); }
.commu-people-row-icon .commu-role-icon { width: 18px; height: 18px; }
.commu-people-row-main, .commu-people-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.commu-people-row-name { line-height: var(--leading-snug); }
.commu-people-row-native { color: var(--text-muted); font-size: var(--text-sm); font-style: italic; }
.commu-people-row-alias { color: var(--text-muted); font-size: var(--text-xs, .75rem); }
.commu-people-row-epithet { overflow: hidden; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-snug); text-overflow: ellipsis; white-space: nowrap; }
.commu-people-row-role { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-snug); }
.commu-people-row-years { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs, .75rem); }
.commu-people-row-years .commu-flag { width: 18px; height: auto; }
.commu-people-result-divider { margin: var(--space-4) 0 var(--space-2); padding: var(--space-2) var(--content-inset); border-left: 4px solid var(--text-muted); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; list-style: none; grid-column: 1 / -1; }
.commu-people-browser[aria-busy="true"] .commu-people-rows, .commu-people-browser[aria-busy="true"] .commu-people-grid, .commu-people-browser[aria-busy="true"] .commu-people-results-head { opacity: .5; transition: opacity var(--duration-fast) var(--ease-standard); }
.commu-people-browser > .commu-people-shelf:first-of-type { margin-top: var(--space-5); }
.commu-people-browser > .commu-office-index { margin-top: var(--space-5); }
@media (max-width: 640px) {
    .commu-people-facet { flex: 1 1 calc(50% - var(--space-2)); }
    .commu-people-facet > summary { width: 100%; box-sizing: border-box; padding: 0 var(--space-2); }
    .commu-people-facet > summary .commu-role-icon { margin-left: auto; }
    .commu-people-facet-panel { padding: var(--space-3); max-height: 65vh; }
    .commu-people-shell .commu-people-filterbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .commu-people-shell .commu-people-facet { min-width: 0; }
    .commu-people-shell .commu-people-facet > summary { gap: var(--space-1); }
    .commu-people-row-link { grid-template-columns: 32px minmax(0, 1fr); padding-inline: var(--space-2); }
    .commu-people-row-icon { width: 32px; height: 32px; }
    .commu-people-row-meta { grid-column: 2; }
    .commu-people-results-tools { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .commu-people-facet > summary .commu-role-icon { transition: none; }
}
/* Activity names read as body text; the underline alone marks them as links. */
.commu-person-activities li { font-size: var(--text-md); }
.commu-person-activity-link, .commu-person-office-link {
    color: var(--text-primary);
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    text-decoration-color: color-mix(in srgb, var(--text-primary) 45%, transparent);
}
.commu-person-activity-link { font-weight: 600; }
.commu-person-activity-link:hover, .commu-person-office-link:hover { color: var(--text-primary); text-decoration-color: currentColor; }
/* The affiliation shares the activity's link (same filter URL) but keeps its quieter weight. */
.commu-person-activity-link .commu-person-affiliation { display: inline; font-weight: 400; }
/* Inline, not the glyph's default block, so the icon stays on the line of the label. */
.commu-person-activity-link .commu-person-affiliation .commu-role-icon { display: inline; vertical-align: -3px; margin-right: var(--space-1); }
.commu-person-affiliation { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); }
.commu-person-affiliation .commu-role-icon { width: 16px; height: 16px; flex-shrink: 0; }