/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    --column-margin: 20px;
    --column-gutter: 12px;
    --row-offset: 16px;
    --row-gutter: 4px;
    --column-width: calc((100% - (var(--column-margin) * 2) - var(--column-gutter) * 11) / 12);

    /* Typography */
    --font-primary: Arial, sans-serif;
    --font-size: 0.9375rem;
    --line-height: 1.25rem;
    --letter-spacing: -0.01em;

    /* Colors */
    --color-background: hsl(0 0% 98%);
    --color-font: hsl(0 0% 0%);
    --color-link: #0000ee;

    /* States */
    --opacity-active: 1;
    --opacity-proposition: 0.75;
    --opacity-inactive: 0.5;
    --opacity-disabled: 0.25;

    /* Transitions */
    --transition-easing: cubic-bezier(.75, 0, 0, 1);
    --transition-duration: 0.3s;
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    --breadcrumb-levels: 2;

    /*height: -webkit-fill-available; !* Accounts for dynamic viewport height *!*/
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling */
}

body {
    padding: var(--row-offset) var(--column-margin);
    font-family: var(--font-primary);
    font-size: var(--font-size);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    color: var(--color-font);
    background-color: var(--color-background);
}

a {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

a:hover {
    color: var(--color-link) !important;
    opacity: var(--opacity-active) !important;
}

hr {

    border: none;
    height: 1px;
    background: var(--color-font);
    opacity: var(--opacity-inactive);
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    color: inherit;
    line-height: var(--line-height);
}

p {
    text-transform: inherit;
    line-height: var(--line-height);
}

ul, ol {
    list-style-position: outside;
}

li {
    line-height: var(--line-height);
}


input {
    border: none;
    font: inherit;
    text-transform: uppercase;
    /*height: 1.25rem;*/
    /*height: calc(var(--line-height) + var(--row-gutter));*/
    /*height: var(--line-height);*/
    line-height: var(--line-height);
    background-color: white;
    /*width: auto;*/
    /*min-width: 0;*/
    background-clip: text;
    /*background-origin: border-box;*/
    cursor: text !important; /* Ensures cursor is always visible */
}

input:focus,
input:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    text-transform: uppercase;
}

button,
a {
    -webkit-appearance: none; /* Removes iOS default styling */
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight */
    color: inherit !important; /* Ensures text color is inherited */
    text-decoration: none !important; /* Removes underlines */
}

button:hover {
    color: var(--color-link) !important;
    opacity: var(--opacity-active) !important;
}

article {
    user-select: text;
    text-align: justify;
}

/* ============================================
   NAVIGATION (Pure Grid)
   ============================================ */
/* Navigation container */
.navigation-grid {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--row-offset) var(--column-margin);
    display: grid;
    grid-template-areas:
        "ask breadcrumb settings"
        "print breadcrumb settings"
        "browse breadcrumb settings"
        "corpus breadcrumb settings"
        "about breadcrumb settings";
    grid-template-rows: var(--line-height) var(--line-height) 1fr var(--line-height) var(--line-height);
    grid-template-columns: auto 1fr auto;
    gap: var(--row-gutter) var(--column-gutter); /* Vertical gap only */
    pointer-events: none;
}

.navigation-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(calc(var(--line-height) + var(--row-gutter)) * 2 + var(--row-offset));
    background: var(--color-background);
    z-index: 100;
}

.navigation-grid::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(calc(var(--line-height) + var(--row-gutter)) * 2 + var(--row-offset));
    background: var(--color-background);
    width: calc(var(--column-margin) + 5 * (var(--column-width) + var(--column-gutter)));
    z-index: 100;
}

.nav-link {
    align-self: center;
}

.nav-dot {
    align-self: center;
    user-select: none;
    justify-self: start;
}

/* Navigation links */
.nav-link[data-category="ask"] {
    grid-area: ask;
    align-self: start;
}

.nav-link[data-category="print"] {
    grid-area: print;
    align-self: start;
}

.nav-link[data-category="browse"] {
    grid-area: browse;
    align-self: center;
}

.nav-link[data-category="corpus"] {
    grid-area: corpus;
    align-self: end;
}

.nav-link[data-category="about"] {
    grid-area: about;
    align-self: end;
}

.settings {
    grid-area: settings;
    justify-self: end;
    align-self: start;
}

.settings:hover {
    /*color: var(--color-link);*/
    opacity: var(--opacity-active) !important;
}


/* All nav links */
.nav-link {
    /*transition: var(--transition-duration) var(--transition-easing);*/
    user-select: none;
    z-index: 101;
    pointer-events: auto;
}

.nav-link.active {
    opacity: var(--opacity-active);
    cursor: pointer;
}

.nav-link:not(.active) {
    opacity: var(--opacity-inactive);
}

/* ============================================
   BROWSE AREA
   ============================================ */


.breadcrumb-area {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--row-gutter) calc(var(--column-gutter) / 2); /* Vertical gap only */
    grid-column: 2; /* Place in the central column */
    align-self: start; /* Default alignment */
    justify-self: start; /* Align left in the central column */
    white-space: nowrap;
    pointer-events: auto;
    text-transform: uppercase;
    justify-content: start;
    align-items: start;
    align-content: start;
    z-index: 102;
}

.breadcrumb-area .nav-link {
    align-self: start;
}

.breadcrumb-area .directory-listing {
    align-self: start;
}

.nav-link[data-category="ask"].active ~ .breadcrumb-area {
    grid-row: 1;
    margin-left: calc(-2rem);
}

.nav-link[data-category="print"].active ~ .breadcrumb-area {
    grid-row: 2;
    margin-left: calc(-1.85rem);
}

.nav-link[data-category="browse"].active ~ .breadcrumb-area {
    grid-row: 3;
    align-self: center;
    margin-left: calc(var(--column-gutter) / 2 * -1);
    transform: translateY(calc(50% - (var(--line-height) / 2)));
}

.nav-link[data-category="corpus"].active ~ .breadcrumb-area,
.nav-link[data-category="about"].active ~ .breadcrumb-area {
    display: none;
}

/* Remove position: relative from active nav-link (no longer needed) */
.nav-link.active {
    opacity: var(--opacity-active);
}

/* Add dot before the first nav-link (root.help) */
.breadcrumb-area > .nav-link:first-of-type::before {
    content: ".";
    margin-right: calc(var(--column-gutter) / 2);
}

/* Add slashes via ::after on all nav-links except the last */
.breadcrumb-area > .nav-link::after {
    content: "/";
    margin-left: 0.25em;
}

.directory-listing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    justify-items: flex-start;
    align-self: flex-start; /* Anchor to top of breadcrumb line */
    gap: var(--row-gutter);
    /*transform: translateY(calc(50% - (var(--line-height) / 2)));*/
}


.directory-item {
    display: block;
    width: 100%; /* Adapt to parent width */
    min-width: fit-content; /* Only grow to the right if text overflows */
    /*margin: 2px 0; !* Vertical spacing *!*/
    cursor: pointer;
    color: rgba(0, 0, 0, var(--opacity-inactive));
    white-space: nowrap; /* Prevent wrapping */
    overflow: visible; /* Allow expansion */
    isolation: isolate;
}

.directory-input {
    width: 100%;
    max-width: 6rem;
}

/* Highlight for matching letters */
.match-highlight {
    /*opacity: var(--opacity-proposition) !important;*/
    color: var(--color-link);
}

.dir-item, .error, .empty {

}

.dir-item:hover {
    color: var(--color-link);
}


/* ============================================
   CONTENT AREA
   ============================================ */
.content-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--column-gutter);
    /*z-index: 98;*/
    height: 100%;
    /*align-content: center;*/
}

.content-area {
    grid-column: 7 / 13;
    padding-top: 3rem;
    padding-bottom: 3rem;
    /*z-index: 98;*/
    height: 100%;
    /*justify-content: center;*/
    /*align-items: center;*/
    /*align-content: center;*/

}

.content {
    display: flex;
    flex-direction: column;
    gap: var(--row-gutter); /* Consistent vertical spacing */
    height: 100%;
    justify-content: center;
    /*z-index: 98;*/
}


.content ul, .content ol {
    display: flex;
    flex-direction: column;
    gap: var(--row-gutter); /* Consistent vertical spacing */
}

.content h1 {
    position: sticky;
    font-weight: bold;
    background-color: var(--color-background);
    top: calc(calc(var(--line-height) + var(--row-gutter)) * var(--breadcrumb-levels) + var(--row-offset));
}

.content h1::before {
    content: "-";
    position: absolute;
    color: var(--color-background);
    display: inline-block;
    margin-left: calc(-1 * (var(--column-gutter) + var(--column-margin)));
    width: calc(var(--column-gutter) + var(--column-margin));
    height: calc(var(--line-height));
    background-color: var(--color-background);
}

.content h1::after {
    display: block;
    position: absolute;
    content: "-";
    color: var(--color-background);
    width: calc(100% + var(--column-gutter) * 2);
    height: var(--row-gutter);
    background-color: var(--color-background);
    margin-left: calc(var(--column-gutter) * -2);
}

.content h2 {
    position: sticky;
    top: calc(calc(var(--line-height) + var(--row-gutter)) * calc(var(--breadcrumb-levels) + 1) + var(--row-offset));
    letter-spacing: 0rem !important;
    background-color: var(--color-background);
}

.content h2::before {
    position: absolute;
    content: "—";
    display: inline-block;
    height: calc(var(--line-height));
    padding-right: 1.5rem;
    margin-left: -2.5rem;
    background-color: var(--color-background);
}

.content a {
    text-transform: unset !important;
    /*z-index: 99;*/
}

.content p {
    /*z-index: 99;*/
}


.corpus-row {
    display: flex;
    gap: var(--column-gutter);
    justify-content: space-between;
    cursor: pointer;
    /*z-index: 99;*/
}

.corpus-title {
    flex: 1; /* Allow the title to grow */
    min-width: 0;
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add "..." */
    white-space: nowrap; /* Prevent wrapping */
}

.corpus-date {
    align-self: end;
}


/* Print Mode Container */
.print-tags,
.print-articles {
    margin-bottom: calc(var(--line-height) - 1px);
}

/* Tag List */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--row-gutter) var(--column-gutter);
}

.tag-item {
    display: flex;
    align-items: center;
    gap: var(--column-gutter);
    cursor: pointer;
}

.tag-checkbox {
    /* Default checkbox styling */
}

.tag-name {
    flex: 1;
}

.tag-count {
    color: var(--color-font);
    opacity: var(--opacity-inactive);
    margin-left: auto; /* Right-align */
}

/* Article List */
.article-list {
    display: flex;
    flex-direction: column;
    gap: var(--row-gutter);
}

.article-item {
    display: flex;
    align-items: center;
    gap: var(--column-gutter);
    cursor: pointer;
    /*padding-left: var(--column-gutter); !* Indent articles *!*/
    /*margin-left:-1.6rem;*/
}

.article-checkbox {
    /* Default checkbox styling */
    cursor: pointer !important;
}

.article-title {
    flex: 1;
}

/* Footer */
.print-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.print-footer::before {
    border-top: 1px solid var(--color-font);
}

.selected-count {
    display: inline-grid;
    padding-left: 0.18rem;
    gap: var(--row-gutter);
    grid-template-columns: 1.13rem 1fr;
    grid-template-rows: 1fr;
    opacity: var(--opacity-inactive);
}

.generate-button {
    /* Your button styling */
    opacity: var(--opacity-inactive);
    pointer-events: none;
}

.generate-button.active {
    opacity: var(--opacity-active);
    pointer-events: all;
}


/* ============================================
   RESPONSIVE STYLES
   320px   (Extra small mobile)
376px   (Small mobile)
480px   (Medium mobile)
640px   (Large mobile)
768px   (Tablet portrait)
896px   (Tablet landscape)
1024px  (Small desktop)
1280px  (Medium desktop)
1440px  (Large desktop)
1920px  (Extra large desktop)
   ============================================ */
@media (max-height: 640px) or (max-width: 640px) {
    :root {
        --column-margin: 12px;
        --column-gutter: 8px;
        --row-offset: 8px;
        --row-gutter: 2px;

        --font-size: 0.75rem;
        --line-height: 1rem;
    }

    .content h2::before {
        padding-right: calc(1rem + var(--column-gutter) * 0);
        margin-left: calc(-2rem);
    }
}

@media (max-width: 896px) {
    body {
        --breadcrumb-levels: 7;
    }

    /* Update --breadcrumb-levels on the BODY (common ancestor) */
    body:has(.breadcrumb-area > .nav-link:nth-of-type(1)) {
        --breadcrumb-levels: 1.334;
    }

    body:has(.breadcrumb-area > .nav-link:nth-of-type(2)) {
        --breadcrumb-levels: 4;
    }

    body:has(.breadcrumb-area > .nav-link:nth-of-type(3)) {
        --breadcrumb-levels: 5;
    }

    body:has(.breadcrumb-area > .nav-link:nth-of-type(4)) {
        --breadcrumb-levels: 6;
    }

    body:has(.breadcrumb-area > .nav-link:nth-of-type(5)) {
        --breadcrumb-levels: 7;
    }

    body:has(.breadcrumb-area > .nav-link:nth-of-type(6)) {
        --breadcrumb-levels: 8;
    }

    body:has(.breadcrumb-area > .nav-link:nth-of-type(7)) {
        --breadcrumb-levels: 9;
    }

    .navigation-grid {
        grid-template-areas:
        "browse ask print"
        "breadcrumb breadcrumb breadcrumb"
        "none none none"
        "none none none"
        "corpus about settings";
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto 1fr auto auto;
    }


    /* Navigation links */
    .nav-link[data-category="browse"] {
        grid-area: browse;
        justify-self: start;
        align-self: start;
    }

    .nav-link[data-category="ask"] {
        grid-area: ask;
        justify-self: center;
        align-self: start;
    }

    .nav-link[data-category="print"] {
        grid-area: print;
        justify-self: end;
        align-self: start;
    }

    .nav-link[data-category="corpus"] {
        grid-area: corpus;
        justify-self: start;
        align-self: end;
    }

    .nav-link[data-category="about"] {
        grid-area: about;
        justify-self: center;
        align-self: end;
    }

    .settings {
        grid-area: settings;
        justify-self: end;
        align-self: end;
    }

    .breadcrumb-area {
        grid-area: breadcrumb;
    }

    .nav-link {
        align-self: start;
    }

    .nav-link[data-category="ask"].active ~ .breadcrumb-area {
        grid-row: auto;
        margin-left: unset;
    }

    .nav-link[data-category="print"].active ~ .breadcrumb-area {
        grid-row: auto;
        margin-left: unset;
    }

    .nav-link[data-category="browse"].active ~ .breadcrumb-area {
        grid-row: auto;
        margin-left: unset;
        justify-self: start;
        transform: unset;
    }

    .directory-listing {
        transform: unset;
    }

    .content {
        /*justify-content: unset;*/
    }

    .content-area {
        grid-column: 1 / 13;
        padding-left: var(--column-gutter);
        padding-right: var(--column-gutter);
        padding-top: calc(calc(var(--line-height) + var(--row-gutter)) * var(--breadcrumb-levels));
    }

    /* ============================================
       BREADCRUMB CASCADE (Mobile Only)
       ============================================ */
    .breadcrumb-area {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--row-gutter);
    }


    .navigation-grid::before {
        width: 100%;
        height: calc(calc(var(--line-height) + var(--row-gutter)) * var(--breadcrumb-levels) + var(--row-offset));
    }

    .navigation-grid::after {
        width: 100%;
        height: calc(calc(var(--line-height) + var(--row-gutter)) * 1 + var(--row-offset) * 2 - var(--row-gutter));
    }

    /* Nav-links cascade */
    .breadcrumb-area > :nth-child(1) {
        margin-left: 0;
    }

    .breadcrumb-area > :nth-child(2) {
        margin-left: calc(var(--column-gutter) * 2);
    }

    .breadcrumb-area > :nth-child(3) {
        margin-left: calc(var(--column-gutter) * 3);
    }

    .breadcrumb-area > :nth-child(4) {
        margin-left: calc(var(--column-gutter) * 4);
    }

    .breadcrumb-area > :nth-child(5) {
        margin-left: calc(var(--column-gutter) * 5);
    }

    .breadcrumb-area > :nth-child(6) {
        margin-left: calc(var(--column-gutter) * 6);
    }

    .breadcrumb-area > :nth-child(7) {
        margin-left: calc(var(--column-gutter) * 7);
    }
}

.row-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    /* First row = offset, then repeat rows of line-height */
    grid-template-rows: calc(var(--row-offset) - var(--row-gutter)) repeat(auto-fill, var(--line-height));
    row-gap: var(--row-gutter);
    pointer-events: none; /* Ignore clicks */
    /*z-index: 9999; !* Above all content *!*/
    opacity: 0; /* Invisible on the page */
}

/* ============================================
   PRINT MODE: AUTOMATIC TWO-COLUMN FLOW WITH HEADER/FOOTER
   ============================================ */
@media print {
    /* Base settings */
    body {
        font-family: Arial, sans-serif;
        font-size: 10pt;
        line-height: 12pt;
        color: #fff;
        background: #fff;
        margin: 0;
        padding: 0;
    }

    /* Page setup: Landscape with 24pt margins */
    @page {
        size: landscape;
        margin-top: 20pt;
        margin-bottom: 20pt;
        margin-left: 0pt;
        margin-right: 0pt;
        color: #fff;
    }

    /* Hide non-print elements */
    .navigation-grid, .settings, .breadcrumb-area, .generate-button, .row-grid {
        display: none !important;
    }

    /* Print content: Two columns with 36pt gutter */
    .print-content {
        display: block;
        column-count: 2;
        column-fill: auto;
        column-gap: 12pt;
        color: #000;
    }

    /* Articles: Start on new column, no internal breaks */
    .print-article {
        display: flex;
        flex-direction: column;
        gap: 4pt;
        break-before: column; /* Start each article on a new column */
        column-fill: auto;
        page-break-inside: avoid;
        margin-left: 24pt; /* Space for dashes */
        margin-right: 24pt;
        /*min-height: 100vh;*/
    }

    /* Header: Article title at top of article (visible) */
    .print-article-header {
        font-family: Arial, sans-serif;
        font-size: 10pt;
        font-weight: bold;
        line-height: 12pt;
        page-break-after: avoid;
    }

    /* Footer: Article number + ROOT.HELP at bottom of article (visible) */
    .print-article-footer {
        display: flex;
        justify-content: space-between;
        font-family: Arial, sans-serif;
        font-size: 10pt;
        line-height: 12pt;
        height: 12pt;
        margin-top: 12pt;
        page-break-before: avoid;
    }

    .article-number {
        text-align: left;
    }

    .book-name {
        margin-left: auto;
    }

    /* H1: Hidden (title is in print-article-header) */
    .print-article h1 {
        position: relative;
        font-weight: bold;
        page-break-after: avoid;
    }

    /* Long dash before h2: Pulled into margin */
    .print-article h2 {
        position: relative;
        page-break-after: avoid;
    }

    .print-article h2::before {
        content: "— ";
        position: absolute;
        left: -24pt;
    }

    /* Paragraphs: Justified */
    .print-article p {
        text-align: justify;
        margin: 0;
    }

    /* Lists: Numbers/dashes outside */
    .print-article ul,
    .print-article ol {
        display: flex;
        flex-direction: column;
        gap: 4pt;
        margin-left: 0;
        padding-left: 0;
        list-style-position: outside;
    }

    .print-article li {
        margin: 0;
    }

    /* 4pt gap between elements */
    .print-article > * + * {
        margin-top: 4pt;
    }

    /* Prevent page breaks after headings */
    .print-article h1,
    .print-article h2,
    .print-article h3 {
        page-break-after: avoid;
    }
}


@media (max-width: 1280px) {
    :root {
        --font-size: 0.875rem;
        --line-height: 1.125rem;
    }
}


@media (min-width: 1280px) {
    .content.guide {
        padding-right: calc(1 / 6 * 100%);
    }

    .content.about {
        padding-right: calc(1 / 6 * 100%);
    }

    .content.corpus {
        padding-right: calc(1 / 6 * 100%);
    }
}

@media (min-width: 1904px) {
    :root {
        --font-size: 1.125rem;
        --line-height: 1.5rem;
    }

    .content h2::before {
        padding-right: 1rem;
    }
}