/**
 * Version selector (docs/versioning.md §9): the version line at the foot of the
 * navigation panel (app:entry-version) opens the list of an entry's published versions
 * (versionSelector.js). The menu opens UPWARD - the line sits at the bottom of the panel.
 * The notice above the entry says which version the page shows when it is not the
 * newest (main-dictionary.xsl).
 */

.nav-version {
    position: relative;
}

/* The version line as a button: looks like the plain line, reads as clickable. */
.nav-version-toggle {
    appearance: none;
    background: none;
    border: 0;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.nav-version-toggle:hover,
.nav-version.open .nav-version-toggle {
    background: #f1f3f5;
    color: #212529;
}

.nav-version-toggle:focus-visible {
    outline: 2px solid #86b7fe;
    outline-offset: 1px;
}

/* A drawn chevron in place of the tiny ▾ glyph app:entry-version writes (the glyph is
   hidden with font-size 0). It points UP - the list opens upward - and flips when the
   list is open. */
.nav-version-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    font-size: 0;
    align-self: center;
    transition: transform 0.2s ease;
}

.nav-version-arrow::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
}

.nav-version-toggle:hover .nav-version-arrow {
    transform: translateY(-2px);
}

.nav-version.open .nav-version-arrow {
    transform: rotate(180deg);
}

.nav-version-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 4px 0;
}

.nav-version-menu[hidden] {
    display: none;
}

.nav-version-menu-empty {
    padding: 10px 12px;
    color: #6c757d;
    font-style: italic;
}

.nav-version-item {
    display: block;
    padding: 6px 12px;
    color: #495057;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.nav-version-item:hover,
.nav-version-item:focus-visible {
    background: #f8f9fa;
    color: #212529;
    text-decoration: none;
    outline: none;
}

/* the version this page shows */
.nav-version-item.shown {
    border-left-color: #495057;
    background: #f1f3f5;
}

.nav-version-item-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.nav-version-item-label {
    font-weight: 600;
    color: #212529;
}

.nav-version-item-date {
    margin-left: auto;
    white-space: nowrap;
}

.nav-version-tag {
    font-size: 0.85em;
    padding: 0 5px;
    border-radius: 3px;
    border: 1px solid #ced4da;
    line-height: 1.4;
}

.nav-version-tag-major {
    border-color: #adb5bd;
    font-weight: 600;
}

.nav-version-item-note {
    display: block;
    margin-top: 2px;
    font-style: italic;
    white-space: normal;
}

/* The notice of an earlier version, with the "show changes since" switch on the same
   line and the version's explanation under it (main-dictionary.xsl + versionChanges.js,
   docs/versioning.md §9.5). No border, no background: the marks in the entry are the
   colour on the page. */
.version-notice,
.version-changes-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
    color: #495057;
    font-size: 0.9rem;
}

/* On the header line (main-dictionary.xsl), centred: lemma left, this in the middle,
   the action icons right. Compact, so it shares the line in the entry column; it wraps
   under the lemma when it cannot. */
.entry-header .version-notice {
    flex: 0 1 auto;
    gap: 4px 12px;
    margin: 0 auto;
    font-size: 0.85rem;
}

.entry-header:has(.version-notice) .entry-actions {
    margin-left: 0;
}

/* The grey box under the header: the explanation, then new / changed / removed, each
   behind its coloured label - the labels are the legend of the marks in the entry. */
.version-changes-details {
    margin: 0 0 16px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-left: 3px solid #adb5bd;
    border-radius: 4px;
    background: #f1f3f5;
    color: #343a40;
    font-size: 0.9rem;
    line-height: 1.45;
}

.version-changes-details[hidden] {
    display: none;
}

.version-changes-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.version-changes-line + .version-changes-line {
    margin-top: 4px;
}

.version-changes-line[hidden] {
    display: none;
}

.version-changes-explanation-label {
    font-weight: 600;
}

/* Inside a marked row, elements that paint their own white background (the etymology
   and grammar notes, metadata.css) let the mark show through. */
.lad-chg-added :is(.etymology-note, .gram-note, .etymology-definition),
.lad-chg-changed :is(.etymology-note, .gram-note, .etymology-definition) {
    background-color: transparent;
}

.version-changes-controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.version-changes-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

/* the checkbox drawn as a switch */
.version-changes-check {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 17px;
    margin: 0;
    border-radius: 17px;
    background: #ced4da;
    cursor: pointer;
    transition: background 0.15s ease;
}

.version-changes-check::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.version-changes-check:checked {
    background: #495057;
}

.version-changes-check:checked::after {
    transform: translateX(13px);
}

.version-changes-check:focus-visible {
    outline: 2px solid #86b7fe;
    outline-offset: 2px;
}

.version-changes-base {
    padding: 1px 4px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

/* one width for new / changed / removed, so the labels line up as a column */
.version-changes-key {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 5.2em;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.8rem;
    text-align: center;
}

.version-changes-key-removed {
    background: #dee2e6;
}

.version-changes-summary {
    color: #6c757d;
    font-style: italic;
}

/* Background only: the citations' left border already carries their PERIOD colour
   (--period-* in core/variables.css: blue, red, green, orange, purple, yellow, cyan,
   crimson, teal, coral, grey), so a changed citation keeps its border. The highlight
   uses the two hue ranges no period takes: pink/magenta for NEW, lime/chartreuse for
   CHANGED - clearly apart from each other and from the mint and forest greens. */
.lad-chg-added {
    background-color: #f8cde2;
}

.lad-chg-changed {
    background-color: #e9f3b4;
}

div.lad-chg-added,
div.lad-chg-changed,
p.lad-chg-added,
p.lad-chg-changed,
h6.lad-chg-changed {
    border-radius: 3px;
}