/* 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 {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    box-sizing: border-box;
    display: flex;
    /* Never two lines. The bar is pinned to the top of the viewport for the
       whole page, so a wrapped one covers twice as much of every screen for as
       long as the reader keeps scrolling. When the path does not fit, the
       current page's label gives way and truncates. */
    flex-wrap: nowrap;
    gap: 0 12px;
    justify-content: space-between;
    margin-top: 14px;
    /* The bar follows the reader down the whole page, so its height is a
       standing cost on every screen. 34px is as low as it goes while the
       segments stay a comfortable tap: they fill the bar's full height, so the
       target is the row, not the glyph. */
    min-height: 34px;
    padding: 0 10px;
    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-trail {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 0;
}

/* Every segment keeps its full width except the last, which is always the
   current page: it takes what is left and truncates. Shrinking the ones before
   it would only clip labels that carry no ellipsis of their own. */
.commu-crumb-item {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
}

.commu-crumb-item:last-child {
    flex: 1 1 auto;
}

.commu-crumb-link {
    align-items: center;
    align-self: stretch;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 5px;
    padding: 0 6px;
    text-decoration: none;
    white-space: nowrap;
}

.commu-crumb-link:hover {
    color: var(--link);
}

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

.commu-crumb-sep {
    color: var(--text-muted);
    flex: 0 0 auto;
    font-size: 0.8rem;
}

/* The current page closes the trail as text, not a link. It is the one segment
   that can run arbitrarily long (a person's full name), so it is the one
   allowed to truncate. */
.commu-crumb-current {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 32px;
    min-width: 0;
    overflow: hidden;
    padding: 0 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commu-crumb-slot {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 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 .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
   three-deep trail drops the current page — the page's own heading names it
   one line further down. 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-home span {
        display: none;
    }

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

    /* Five 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;
    }
}