﻿.primary-nav .version-nav-copy {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: inherit;
    font: inherit;
}

#running-version {
    overflow-wrap: anywhere;
    color: var(--signal);
    font: 10px/1.4 var(--mono);
}

hug-version-history { display: block; min-width: 0; }
.history-current {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr);
    gap: 32px;
    padding: 28px 32px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--signal);
    background: linear-gradient(115deg, rgba(215, 255, 63, 0.065), transparent 60%), var(--panel);
}
.history-current h3 { margin: 12px 0 0; font: 600 36px/1.15 var(--display); letter-spacing: -0.03em; }
.history-current .section-index { color: var(--signal); }
.history-build-label { margin: 10px 0 0; color: var(--muted-bright); overflow-wrap: anywhere; font-family: var(--mono); }
.history-build-facts { display: grid; margin: 0; gap: 14px; align-content: center; }
.history-build-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
.history-build-facts dt { color: var(--muted); }
.history-build-facts dd { margin: 0; overflow-wrap: anywhere; }
.history-ledger { margin-top: 34px; }
.history-ledger-heading { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; justify-content: space-between; }
.history-ledger h3 { margin: 0; font: 600 24px/1.2 var(--display); }
.history-total { color: var(--muted-bright); font: 11px var(--mono); white-space: nowrap; }
.history-note { max-width: 800px; margin: 10px 0 24px; color: var(--muted); }
.history-controls { display: grid; grid-template-columns: minmax(180px, 1fr) 160px 100px auto; gap: 14px; align-items: end; scroll-margin-top: 108px; }
.history-controls label { display: grid; min-width: 0; gap: 7px; color: var(--muted-bright); font: 11px var(--mono); }
.history-controls input, .history-controls select, .history-pager select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--panel);
    font: 14px var(--body);
}
.history-controls input::placeholder { color: var(--muted); opacity: 1; }
.history-controls input:focus-visible, .history-controls select:focus-visible, .history-pager select:focus-visible {
    outline: 2px solid var(--signal); outline-offset: 2px;
}
.history-button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); background: var(--panel-raised); white-space: nowrap; }
.history-button:hover:not(:disabled) { border-color: var(--signal); color: var(--signal); }
.history-button:disabled { color: var(--muted); opacity: 0.5; cursor: default; }
.history-result-count { margin: 20px 0 12px; color: var(--muted-bright); font: 11px var(--mono); }
.history-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.history-entry { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 28px; padding: 26px 28px; background: var(--panel); }
.history-entry + .history-entry { border-top: 1px solid var(--line); }
.history-entry.is-current { box-shadow: inset 3px 0 var(--signal); }
.history-entry-meta { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; font: 11px/1.5 var(--mono); }
.history-entry-meta time { color: var(--muted-bright); }
.history-version { color: var(--muted); }
.history-current-badge { padding: 3px 8px; color: var(--signal); background: rgba(215, 255, 63, 0.08); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; }
.history-entry article { min-width: 0; }
.history-entry h4 { margin: 0; font: 600 20px/1.3 var(--display); }
.history-summary { margin: 10px 0 16px; color: var(--muted-bright); }
.history-changes { display: grid; margin: 0; padding: 0; gap: 10px; list-style: none; }
.history-changes li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 14px; }
.history-category { width: fit-content; padding: 3px 6px; font: 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--line); color: var(--muted-bright); }
.history-category.is-new { color: var(--signal); }
.history-category.is-improved { color: var(--cyan); }
.history-category.is-fixed { color: var(--warning); }
.history-sources { margin-top: 16px; color: var(--muted); font: 10px/1.5 var(--mono); }
.history-sources summary { width: fit-content; cursor: pointer; }
.history-sources p { display: flex; flex-wrap: wrap; gap: 8px; }
.history-sources code { color: var(--muted-bright); }
.history-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.history-pager label { display: flex; gap: 10px; align-items: center; color: var(--muted-bright); font-size: 12px; }
.history-pager select { width: auto; }
.history-message, .history-empty { padding: 32px; border: 1px solid var(--line); background: var(--panel); }
.history-empty h4 { margin: 0; font-size: 19px; }
.history-empty p { color: var(--muted-bright); }

@media (max-width: 1100px) {
    .history-controls { grid-template-columns: minmax(0, 1fr) 160px 100px; }
    .history-clear { grid-column: 1 / -1; justify-self: start; }
    .history-current { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
    .history-current { padding: 22px 18px; }
    .history-current h3 { font-size: 30px; }
    .history-controls { grid-template-columns: minmax(0, 1fr) 100px; }
    .history-search { grid-column: 1 / -1; }
    .history-entry { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 18px; }
    .history-entry-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
    .history-changes li { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .history-pager { flex-wrap: wrap; gap: 10px; }
    .history-pager label { order: -1; width: 100%; justify-content: center; }
    .history-build-facts > div { grid-template-columns: 100px minmax(0, 1fr); }
}

@media (max-width: 780px) {
    .rail { height: 112px; grid-template-columns: 38px minmax(0, 1fr); }
    .primary-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; gap: 4px; margin: 0 0 0 12px; }
    .primary-nav a { min-width: 0; min-height: 42px; padding: 4px 6px; gap: 0; font-size: 9px; white-space: nowrap; }
    .primary-nav .version-nav-copy { gap: 2px; white-space: normal; }
    #running-version { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
    .topbar { top: 112px; }
    .history-controls { scroll-margin-top: 220px; }
}

@media (max-width: 360px) {
    html { min-width: 0; }
}
