/* The CommuLingo context bar. Lives in its own file because two page families
   need it: the dictionary/book pages, which load commulingo.css, and the
   reference-document reader, which deliberately does not (it keeps its own
   reading typography in commulingo-doc.css). One partial, one stylesheet, so
   the bar cannot drift between them. */

/* The shared site menu normally follows the viewport. On CommuLingo pages it
   returns to the flow and the context crumb follows instead: the crumb carries
   the way back out of an entry and the jumps between dictionaries. */
body.commulingo-page > .site-nav,
body.commulingo-page > .admin-bar {
    position: static;
}

/* Base geometry for every role glyph on the site, not just the crumb's home
   icon — it lives here because this is the one CommuLingo stylesheet the
   document reader loads, and roleIconSvg() emits this class everywhere. */
.commu-role-icon {
    display: block;
    fill: none;
    height: 23px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 23px;
}

/* ── Context bar ──────────────────────────────────────────────────────────
   Every CommuLingo page opens with this row. It used to be a bare "← 공산링고"
   text link sitting alone in the left corner of a line it did not fill; the
   same line now carries the path back to the section root plus a slot on the
   right — jumps to the other dictionaries on both index and detail pages. A
   contextual tab row can still attach directly below it, so the two rows read
   as one block. */
.commu-crumb { flex-wrap: nowrap; position: sticky; top: 0; z-index: 50; }

/* -9px cancels the shell's 8px column gap and pulls the tabs up by one more
   pixel, so their top border lands exactly on the crumb's bottom border and the
   pair shows a single rule. Dropping the crumb's border instead would leave it
   with no bottom edge once it unsticks from the tabs and pins alone. */
.commu-crumb.is-attached {
    margin-bottom: -9px;
}

.commu-crumb-home .commu-role-icon {
    color: inherit;
    flex: 0 0 auto;
    height: 15px;
    width: 15px;
}

/* The negative end margin cancels the crumb's inline padding, so the last
   jump (references) meets the bar's right border like the others meet their
   neighbours instead of leaving a strip of padding beside its active fill. */
.commu-crumb-slot {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    margin-right: -10px;
}

/* Icon-only jumps to the other dictionaries. A detail page used to offer the
   way back to its own dictionary and nothing else, so reaching a different one
   cost two clicks; from here it costs one. */
.commu-crumb-jump {
    align-self: stretch;
    display: flex;
}

.commu-crumb-jump-link {
    align-items: center;
    align-self: stretch;
    border: 1px solid transparent;
    border-block: 0;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    transition: background-color 0.15s ease;
    width: 34px;
}

.commu-crumb-jump-link:last-child {
    border-right: 0;
}

.commu-crumb-jump-link .commu-role-icon {
    height: 16px;
    width: 16px;
}

.commu-crumb-jump-link:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border);
    color: var(--text-primary);
}

.commu-crumb-jump-link.is-active {
    background: color-mix(in srgb, var(--accent-red) 26%, var(--bg-canvas));
    border-color: var(--border);
    color: var(--text-primary);
}

/* Narrow phones: the home segment keeps its icon and drops its label, and a
   trail three or more deep drops the current page — the page's own heading
   names it one line further down — and keeps the parents that lead back.
   Two-deep trails (a book, a chart) keep their leaf, which would otherwise
   leave the bar saying nothing but "⌂". */
@media (max-width: 560px) {
    .commu-crumb {
        gap: 2px 8px;
        padding: 0 8px;
    }

    .commu-crumb-slot {
        margin-right: -8px;
    }

    .commu-crumb-home span {
        display: none;
    }

    .commu-crumb-item:last-child:nth-child(n+3) {
        display: none;
    }

    /* Six jumps plus a path on a 390px screen: narrower cells leave the path
       enough room that it truncates late rather than immediately. */
    .commu-crumb-jump-link {
        width: 30px;
    }
}