/*
 * Optional faded parchment and denim palette.
 * Enable/disable the stylesheet link in resources/views/layout/default.blade.php.
 * Keep this file after app-override.css. The html body selectors also override
 * the preview sidebar's later style block without changing its layout.
 * Colors derive from the reference palette, faded toward neutral gray tones.
 */
:root {
    --palette-page: #cfceca;
    --palette-parchment: #dddbd4;
    --palette-paper-texture: url('../images/parchment-texture-v2.png');
    --palette-paper-size: 640px 640px;
    --palette-page-tint: rgba(207, 206, 202, .35);
    --palette-paper-tint: rgba(221, 219, 212, .3);
    --palette-ink: #302f29;
    --palette-sidebar: #4e6478;
    --palette-sidebar-text: #e2e6e9;
    --palette-sidebar-accent: #b9c9d6;
    --palette-link: #394238;
    --palette-link-hover: #484438;
    --palette-sidebar-hover: rgba(226, 230, 233, .1);
    --palette-sidebar-selected: rgba(226, 230, 233, .18);
    --palette-sidebar-divider: rgba(185, 201, 214, .3);
}
html[data-darkreader-scheme="dark"] body,
html[data-darkreader-scheme="dark"] body .paper-card,
html[data-darkreader-scheme="dark"] body .paper-card-floater,
html[data-darkreader-scheme="dark"] body .modal-content {
    background-image: none;
}
/* Spells subsection ribbon joins the sidebar at the edge of the content area. */
html body .spells-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border: 0;
    border-bottom: 1px solid var(--palette-sidebar-divider);
    border-radius: 0;
}

html body .spells-subnav-v2 .spells-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 0;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .spells-subnav-v2-link:last-child {
    border-right: 0;
}

html body .spells-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}

html body .spells-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

html body .spells-subnav-v2 .spells-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}

html body .spells-subnav-v2 .spells-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}

html body .spells-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .spells-subnav-v2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body .spells-subnav-v2-link:nth-child(3n) {
        border-right: 0;
    }

    html body .spells-subnav-v2-link:nth-child(n + 4) {
        border-top: 1px solid var(--palette-sidebar-divider);
    }

    /* Keep the ribbon below the fixed 50px mobile header at every phone width. */
    html body .main-content:has(.spells-subnav-v2) {
        margin-top: 50px;
    }

    html body .spells-subnav-v2 .spells-subnav-v2-link {
        padding: 10px 8px;
    }
}

/* Soft paper grain inspired by the supplied scroll reference.
 * Increase the tint opacity above for a cooler, more subdued texture.
 */
html body {
    background-color: var(--palette-page);
    background-image: linear-gradient(var(--palette-page-tint), var(--palette-page-tint)),
        var(--palette-paper-texture);
    background-repeat: repeat;
    background-size: var(--palette-paper-size);
    color: var(--palette-ink);
}

html body .solid-background,
html body .calendar-wrapper {
    background-color: var(--palette-page);
    background-image: linear-gradient(var(--palette-page-tint), var(--palette-page-tint)),
        var(--palette-paper-texture);
    background-repeat: repeat;
    background-size: var(--palette-paper-size);
}

/* Fade from parchment at the side edges into a broad off-white reading area.
 * A horizontal gradient keeps the center white even on long scrolling cards;
 * a radial gradient can put its white center far below the first viewport.
 */
html body .paper-card,
html body .paper-card-floater,
html body .modal-content {
    background-color: var(--palette-parchment);
    background-image: linear-gradient(
        to right,
        rgba(245, 244, 240, 0) 0%,
        rgba(245, 244, 240, 0.55) 8%,
        rgba(245, 244, 240, 0.98) 20%,
        rgba(245, 244, 240, 0.98) 80%,
        rgba(245, 244, 240, 0.55) 92%,
        rgba(245, 244, 240, 0) 100%
    ), var(--palette-paper-texture);
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, var(--palette-paper-size);
    box-shadow: 0 3px 12px rgba(48, 47, 41, 0.20);
}

/* Standalone message sheets retain parchment. Modals with the message class
 * keep the white-center gradient above instead of overriding it here.
 */
html body .message:not(.modal-content) {
    background-color: var(--palette-parchment);
    background-image: linear-gradient(var(--palette-paper-tint), var(--palette-paper-tint)),
        var(--palette-paper-texture);
    background-repeat: repeat;
    background-size: var(--palette-paper-size);
    border-color: rgba(72, 68, 56, .22);
    box-shadow: 0 3px 12px rgba(48, 47, 41, .24),
        inset 0 0 45px rgba(128, 127, 120, .12);
    color: var(--palette-ink);
}

html body .message a:not(.btn):not(.badge):not(.dropdown-item) {
    color: var(--palette-link);
}

html body .message a:not(.btn):not(.badge):not(.dropdown-item):hover {
    color: var(--palette-link-hover);
}

/* Both the original sidebar and the preview use the faded denim background. */
html body .mobile-sidebar,
html body:has(.sidebar-v2) .mobile-sidebar,
html body .mobile-headbar {
    background-color: var(--palette-sidebar);
    background-image: none;
    color: var(--palette-sidebar-text);
    border-color: var(--palette-sidebar-divider);
}

html body .sidebar-v2,
html body .sidebar-v2-row,
html body .sidebar-v2-close,
html body .navigation a,
html body .submenu-label,
html body .menu-btn {
    color: var(--palette-sidebar-text);
}

html body .sidebar-v2-brand,
html body .sidebar-v2-heading,
html body .sidebar-v2-row > i:first-child,
html body .sidebar-v2-chevron,
html body .navigation a > i,
html body .submenu-label > i {
    color: var(--palette-sidebar-accent);
}

html body .sidebar-v2-row:hover,
html body .sidebar-v2-toggle[aria-expanded="true"] {
    background-color: var(--palette-sidebar-hover);
    color: var(--palette-sidebar-text);
}

html body .sidebar-v2-row.is-current {
    background-color: var(--palette-sidebar-selected);
    color: var(--palette-sidebar-text);
    box-shadow: inset 3px 0 var(--palette-sidebar-accent);
}

html body .sidebar-v2-row:focus-visible,
html body .sidebar-v2-close:focus-visible {
    outline-color: var(--palette-sidebar-text);
}

html body .sidebar-v2-submenu,
html body .sidebar-v2-heading,
html body .sidebar-v2-footer {
    border-color: var(--palette-sidebar-divider);
}

html body .sidebar-v2-backdrop {
    background-color: rgba(28, 37, 46, .55);
}

html body .navigation .submenu {
    background-color: var(--palette-sidebar-hover);
    color: var(--palette-sidebar-text);
}

html body .navigation .submenu::before,
html body .navigation .submenu::after {
    background-color: var(--palette-sidebar);
    background-image: none;
}

/* Use the space beside the menu icon for the single-line mobile wordmark.
 * Cover crops transparent canvas padding; the 340px cap keeps glyphs in view.
 */
@media (max-width: 767.98px) {
    html body .mobile-headbar .menu-btn {
        display: flex;
        align-items: center;
    }

    html body .mobile-headbar .menu-btn > .fa-bars {
        flex: 0 0 auto;
    }

    html body .mobile-headbar .mobile-header-logo {
        flex: 1 1 0;
        min-width: 0;
        width: 100%;
        max-width: 340px;
        height: 40px;
        object-fit: cover;
        object-position: center;
    }
}

/* Keep scrolling available; reveal the scrollbar during hover or keyboard use.
 * Reserve its space so navigation does not shift when the thumb appears.
 */
html body:has(.sidebar-v2) .mobile-sidebar {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: transparent transparent;
}

html body:has(.sidebar-v2) .mobile-sidebar::-webkit-scrollbar {
    width: 6px;
}

html body:has(.sidebar-v2) .mobile-sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}

html body:has(.sidebar-v2) .mobile-sidebar::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 6px;
}

html body:has(.sidebar-v2) .mobile-sidebar:hover,
html body:has(.sidebar-v2) .mobile-sidebar:focus-within {
    scrollbar-color: var(--palette-sidebar-accent) transparent;
}

html body:has(.sidebar-v2) .mobile-sidebar:hover::-webkit-scrollbar-thumb,
html body:has(.sidebar-v2) .mobile-sidebar:focus-within::-webkit-scrollbar-thumb {
    background-color: var(--palette-sidebar-accent);
}

/* Touch devices use their normal scrolling indicator without requiring hover. */
@media (hover: none) {
    html body:has(.sidebar-v2) .mobile-sidebar {
        scrollbar-color: var(--palette-sidebar-accent) transparent;
    }

    html body:has(.sidebar-v2) .mobile-sidebar::-webkit-scrollbar-thumb {
        background-color: var(--palette-sidebar-accent);
    }
}

/* Getting Started ribbon; the original info/nav.blade.php remains available. */
html body .info-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border-bottom: 1px solid var(--palette-sidebar-divider);
}

html body .info-subnav-v2 .info-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .info-subnav-v2-link:last-child { border-right: 0; }
html body .info-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}
html body .info-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .info-subnav-v2 .info-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}
html body .info-subnav-v2 .info-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}
html body .info-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 991.98px) {
    html body .info-subnav-v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html body .info-subnav-v2-link:nth-child(3n) { border-right: 0; }
    html body .info-subnav-v2-link:nth-child(n + 4) {
        border-top: 1px solid var(--palette-sidebar-divider);
    }
    html body .info-subnav-v2-link:last-child { grid-column: 1 / -1; }
    html body .info-subnav-v2 .info-subnav-v2-link { padding: 10px 8px; }
}

@media (max-width: 767.98px) {
    html body .main-content:has(.info-subnav-v2) { margin-top: 50px; }
}

/* Armor ribbon; preserve the original armor-nav.blade.php for rollback. */
html body .armor-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border-bottom: 1px solid var(--palette-sidebar-divider);
}

html body .armor-subnav-v2 .armor-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .armor-subnav-v2-link:last-child { border-right: 0; }
html body .armor-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}
html body .armor-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .armor-subnav-v2 .armor-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}
html body .armor-subnav-v2 .armor-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}
html body .armor-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .main-content:has(.armor-subnav-v2) { margin-top: 50px; }
    html body .armor-subnav-v2 .armor-subnav-v2-link { padding: 10px 8px; }
}

/* Weapons ribbon; preserve the original weapon/nav.blade.php for rollback. */
html body .weapon-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border-bottom: 1px solid var(--palette-sidebar-divider);
}

html body .weapon-subnav-v2 .weapon-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .weapon-subnav-v2-link:last-child { border-right: 0; }
html body .weapon-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}
html body .weapon-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .weapon-subnav-v2 .weapon-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}
html body .weapon-subnav-v2 .weapon-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}
html body .weapon-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .main-content:has(.weapon-subnav-v2) { margin-top: 50px; }
    html body .weapon-subnav-v2 .weapon-subnav-v2-link { padding: 10px 8px; }
}

/* Production ribbon; preserve the original production/partials/nav.blade.php. */
html body .production-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border-bottom: 1px solid var(--palette-sidebar-divider);
}

html body .production-subnav-v2 .production-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .production-subnav-v2-link:last-child { border-right: 0; }
html body .production-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}
html body .production-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .production-subnav-v2 .production-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}
html body .production-subnav-v2 .production-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}
html body .production-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .production-subnav-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .production-subnav-v2-link:nth-child(2n) { border-right: 0; }
    html body .production-subnav-v2-link:nth-child(n + 3) {
        border-top: 1px solid var(--palette-sidebar-divider);
    }
    html body .main-content:has(.production-subnav-v2) { margin-top: 50px; }
    html body .production-subnav-v2 .production-subnav-v2-link { padding: 10px 8px; }
}

/* Recipes ribbon; preserve the original recipes/partials/nav.blade.php. */
html body .recipes-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border-bottom: 1px solid var(--palette-sidebar-divider);
}

html body .recipes-subnav-v2 .recipes-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .recipes-subnav-v2-link:last-child { border-right: 0; }
html body .recipes-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}
html body .recipes-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .recipes-subnav-v2 .recipes-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}
html body .recipes-subnav-v2 .recipes-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}
html body .recipes-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .main-content:has(.recipes-subnav-v2) { margin-top: 50px; }
    html body .recipes-subnav-v2 .recipes-subnav-v2-link { padding: 10px 8px; }
}

/* Inventory ribbon; preserve the original inventory/nav.blade.php. */
html body .inventory-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border-bottom: 1px solid var(--palette-sidebar-divider);
}

html body .inventory-subnav-v2 .inventory-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .inventory-subnav-v2-link:last-child { border-right: 0; }
html body .inventory-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}
html body .inventory-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .inventory-subnav-v2 .inventory-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}
html body .inventory-subnav-v2 .inventory-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}
html body .inventory-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .inventory-subnav-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .inventory-subnav-v2-link:nth-child(2n) { border-right: 0; }
    html body .inventory-subnav-v2-link:nth-child(n + 3) {
        border-top: 1px solid var(--palette-sidebar-divider);
    }
    html body .main-content:has(.inventory-subnav-v2) { margin-top: 50px; }
    html body .inventory-subnav-v2 .inventory-subnav-v2-link { padding: 10px 8px; }
}

/* Lore/History ribbon; preserve the original lore/partials/history-nav.blade.php. */
html body .history-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border-bottom: 1px solid var(--palette-sidebar-divider);
}

html body .history-subnav-v2 .history-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .history-subnav-v2-link:last-child { border-right: 0; }
html body .history-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}
html body .history-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
html body .history-subnav-v2 .history-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}
html body .history-subnav-v2 .history-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}
html body .history-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .history-subnav-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .history-subnav-v2-link:nth-child(2n) { border-right: 0; }
    html body .history-subnav-v2-link:nth-child(n + 3) {
        border-top: 1px solid var(--palette-sidebar-divider);
    }
    html body .main-content:has(.history-subnav-v2) { margin-top: 50px; }
    html body .history-subnav-v2 .history-subnav-v2-link { padding: 10px 8px; }
}

/* Check-In ribbon adapts to the links permitted by the existing role checks. */
html body .check-in-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(var(--check-in-nav-columns), minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border: 0;
    border-bottom: 1px solid var(--palette-sidebar-divider);
    border-radius: 0;
}

html body .check-in-subnav-v2 .check-in-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 0;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .check-in-subnav-v2-link:last-child {
    border-right: 0;
}

html body .check-in-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}

html body .check-in-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

html body .check-in-subnav-v2 .check-in-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}

html body .check-in-subnav-v2 .check-in-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}

html body .check-in-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .check-in-subnav-v2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body .check-in-subnav-v2-link:nth-child(3n) {
        border-right: 0;
    }

    html body .check-in-subnav-v2-link:nth-child(n + 4) {
        border-top: 1px solid var(--palette-sidebar-divider);
    }

    /* Keep the ribbon below the fixed 50px mobile header at every phone width. */
    html body .main-content:has(.check-in-subnav-v2) {
        margin-top: 50px;
    }

    html body .check-in-subnav-v2 .check-in-subnav-v2-link {
        padding: 10px 8px;
    }
}

/* Hero's Library ribbon; preserve the original library/partials/nav.blade.php. */
html body .library-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
    border: 0;
    border-bottom: 1px solid var(--palette-sidebar-divider);
    border-radius: 0;
}

html body .library-subnav-v2 .library-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 0;
    border-right: 1px solid var(--palette-sidebar-divider);
    text-align: center;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-decoration: none;
}

html body .library-subnav-v2-link:last-child {
    border-right: 0;
}

html body .library-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}

html body .library-subnav-v2-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

html body .library-subnav-v2 .library-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}

html body .library-subnav-v2 .library-subnav-v2-link.is-current {
    background-color: var(--palette-sidebar-selected);
    box-shadow: inset 0 -3px var(--palette-sidebar-accent);
    font-weight: bold;
}

html body .library-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}

@media (max-width: 767.98px) {
    html body .library-subnav-v2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body .library-subnav-v2-link:nth-child(3n) {
        border-right: 0;
    }

    html body .library-subnav-v2-link:nth-child(n + 4) {
        border-top: 1px solid var(--palette-sidebar-divider);
    }

    /* Keep the ribbon below the fixed 50px mobile header at every phone width. */
    html body .main-content:has(.library-subnav-v2) {
        margin-top: 50px;
    }

    html body .library-subnav-v2 .library-subnav-v2-link {
        padding: 10px 8px;
    }
}

/* Bulletin ribbons sit flush at both ends of the reading card. */
html body .paper-card:has(> .card-header > .posts-subnav-v2),
html body .paper-card:has(> .card-footer > .posts-subnav-v2) {
    padding: 0;
}
html body .card-header:has(> .posts-subnav-v2),
html body .card-footer:has(> .posts-subnav-v2) {
    padding: 0;
    border: 0;
    background-color: transparent;
}
html body .posts-subnav-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--palette-sidebar);
}
html body .posts-subnav-v2 .posts-subnav-v2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 10px 12px;
    color: var(--palette-sidebar-text);
    font-size: .9rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}
html body .posts-subnav-v2-previous { grid-column: 1; grid-row: 1; }
html body .posts-subnav-v2-next { grid-column: 2; grid-row: 1; }
html body .posts-subnav-v2:has(.posts-subnav-v2-next) .posts-subnav-v2-previous {
    border-right: 1px solid var(--palette-sidebar-divider);
}
html body .posts-subnav-v2-link > i {
    color: var(--palette-sidebar-accent);
    flex-shrink: 0;
}
html body .posts-subnav-v2-link > span { min-width: 0; overflow-wrap: anywhere; }
html body .posts-subnav-v2 .posts-subnav-v2-link:hover {
    background-color: var(--palette-sidebar-hover);
}
html body .posts-subnav-v2-link:focus-visible {
    outline: 2px solid var(--palette-sidebar-text);
    outline-offset: -3px;
}
html body .card-header > .posts-subnav-v2 {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
html body .card-footer > .posts-subnav-v2 {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}
@media (max-width: 767.98px) {
    html body .main-content:has(.posts-subnav-v2) { margin-top: 50px; }
    html body .posts-subnav-v2 .posts-subnav-v2-link { padding: 10px 8px; }
}