/* ============================================================
   docs.com.im
   Montero Nava Documents Interface
   ============================================================ */

/* ------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------ */

:root {
    --docs-accent: #6a0dad;
    --docs-accent-hover: #56088f;
    --docs-accent-soft: #f0e4f8;
    --docs-accent-ring: rgba(106, 13, 173, 0.22);

    --docs-bg: #f7f5fa;
    --docs-surface: #ffffff;
    --docs-surface-glass: rgba(255, 255, 255, 0.92);
    --docs-muted-surface: #faf8fc;

    --docs-text: #211827;
    --docs-muted: #6d6472;

    --docs-border: rgba(62, 38, 73, 0.14);
    --docs-border-strong: rgba(106, 13, 173, 0.26);

    --docs-error: #a52626;
    --docs-error-bg: #fff3f3;
    --docs-error-border: rgba(165, 38, 38, 0.22);

    --docs-shadow-sm:
        0 1px 2px rgba(28, 18, 33, 0.05),
        0 5px 18px rgba(28, 18, 33, 0.05);

    --docs-shadow-md:
        0 8px 30px rgba(28, 18, 33, 0.09);

    --docs-shadow-lg:
        0 14px 48px rgba(28, 18, 33, 0.11);

    --docs-radius-xs: 8px;
    --docs-radius-sm: 10px;
    --docs-radius-md: 16px;
    --docs-radius-lg: 20px;

    /*
     * Increased from 980px.
     *
     * The actual reading content remains constrained,
     * while the directory can use additional desktop width.
     */
    --docs-max-width: 1180px;

    --docs-transition: 160ms ease;
}


/* ============================================================
   Foundation
   ============================================================ */

html {
    min-width: 320px;
    background: var(--docs-bg);
}

.docs-app,
.docs-app *,
.docs-app *::before,
.docs-app *::after {
    box-sizing: border-box;
}

body.docs-app {
    margin: 0;

    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;

    color: var(--docs-text);

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(106, 13, 173, 0.09),
            transparent 34rem
        ),
        var(--docs-bg);

    line-height: 1.6;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}

.docs-app .wrap {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.docs-app a {
    color: var(--docs-accent);
    text-underline-offset: 0.18em;
}

.docs-app a:hover {
    color: var(--docs-accent-hover);
}

.docs-app button,
.docs-app input {
    font: inherit;
}

.docs-app img,
.docs-app svg {
    max-width: 100%;
}


/* ============================================================
   Application shell
   ============================================================ */

.docs-shell {
    width: min(
        calc(100% - 2.5rem),
        var(--docs-max-width)
    );

    margin-inline: auto;

    padding-top:
        max(
            2rem,
            calc(1.5rem + env(safe-area-inset-top))
        );

    padding-right:
        max(
            0rem,
            env(safe-area-inset-right)
        );

    padding-bottom:
        max(
            2rem,
            calc(1.5rem + env(safe-area-inset-bottom))
        );

    padding-left:
        max(
            0rem,
            env(safe-area-inset-left)
        );
}


/* ============================================================
   Header
   ============================================================ */

.docs-header {
    width: min(100%, 760px);

    margin:
        0 auto
        clamp(1rem, 3vw, 1.75rem);

    text-align: center;
}

.docs-header h1 {
    margin: 0;

    color: var(--docs-text);

    font-size:
        clamp(
            1.9rem,
            4.5vw,
            3.15rem
        );

    line-height: 1.08;

    letter-spacing: -0.04em;

    overflow-wrap: anywhere;
}

.docs-header p {
    max-width: 620px;

    margin:
        0.65rem auto 0;

    color: var(--docs-muted);

    font-size:
        clamp(
            0.98rem,
            1.8vw,
            1.08rem
        );
}


/* ============================================================
   General cards
   ============================================================ */

.docs-app .card {
    color: var(--docs-text);

    background: var(--docs-surface);

    border:
        1px solid
        var(--docs-border);

    box-shadow:
        var(--docs-shadow-sm);
}


/* ============================================================
   Search panel
   ============================================================ */

.search-panel {
    position: sticky;

    top:
        max(
            0.75rem,
            env(safe-area-inset-top)
        );

    z-index: 20;

    width: min(100%, 940px);

    margin:
        0 auto
        1.35rem;

    padding: 1rem;

    overflow: hidden;

    background:
        var(--docs-surface-glass) !important;

    border-radius:
        var(--docs-radius-md);

    box-shadow:
        var(--docs-shadow-md) !important;

    backdrop-filter:
        blur(16px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(140%);
}


/* ------------------------------------------------------------
   Search form
   ------------------------------------------------------------ */

.search-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 0.7rem;

    width: 100%;

    margin: 0;
}

.search-form input {
    width: 100%;
    min-width: 0;

    min-height: 48px;

    margin: 0;

    padding:
        0.78rem
        1rem;

    color:
        var(--docs-text);

    background:
        var(--docs-surface);

    border:
        1px solid
        var(--docs-border);

    border-radius:
        var(--docs-radius-sm);

    outline: none;

    box-shadow: none;

    letter-spacing: 0.01em;

    appearance: none;
    -webkit-appearance: none;

    transition:
        border-color var(--docs-transition),
        box-shadow var(--docs-transition),
        background-color var(--docs-transition);
}

.search-form input::placeholder {
    color:
        var(--docs-muted);

    opacity: 0.82;
}

.search-form input:hover {
    border-color:
        rgba(106, 13, 173, 0.36);
}

.search-form input:focus {
    border-color:
        var(--docs-accent);

    box-shadow:
        0 0 0 4px
        var(--docs-accent-ring);
}


/* ============================================================
   Buttons
   ============================================================ */

.search-form button,
.directory-link,
.pdf-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius:
        var(--docs-radius-sm);

    font-weight: 700;

    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    touch-action: manipulation;

    transition:
        transform var(--docs-transition),
        background-color var(--docs-transition),
        border-color var(--docs-transition),
        color var(--docs-transition),
        box-shadow var(--docs-transition);
}


/* ------------------------------------------------------------
   Search button
   ------------------------------------------------------------ */

.search-form button {
    min-width: 112px;
    min-height: 48px;

    padding:
        0.75rem
        1.15rem;

    color: #ffffff;

    background:
        var(--docs-accent);

    border:
        1px solid
        var(--docs-accent);

    box-shadow:
        0 4px 14px
        rgba(106, 13, 173, 0.18);
}

.search-form button:hover {
    background:
        var(--docs-accent-hover);

    border-color:
        var(--docs-accent-hover);

    transform:
        translateY(-1px);
}

.search-form button:active {
    transform: translateY(0);
}


/* ------------------------------------------------------------
   Directory control
   ------------------------------------------------------------ */

.directory-link {
    flex: 0 0 auto;

    min-height: 40px;

    padding:
        0.55rem
        0.85rem;

    color:
        var(--docs-accent);

    background:
        var(--docs-accent-soft);

    border:
        1px solid
        rgba(106, 13, 173, 0.14);

    white-space: nowrap;
}

.directory-link:hover {
    color:
        var(--docs-accent-hover);

    background:
        rgba(106, 13, 173, 0.14);

    border-color:
        rgba(106, 13, 173, 0.24);

    text-decoration: none;
}


/* ------------------------------------------------------------
   Keyboard focus
   ------------------------------------------------------------ */

.search-form button:focus-visible,
.directory-link:focus-visible,
.pdf-link:focus-visible,
.mnid-label a:focus-visible,
.site-footer a:focus-visible {
    outline:
        3px solid
        var(--docs-accent-ring);

    outline-offset: 3px;
}


/* ============================================================
   Search supporting text
   ============================================================ */

.search-help {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 0.8rem;

    color:
        var(--docs-muted);

    font-size: 0.9rem;
}


/* ============================================================
   Main content
   ============================================================ */

.docs-app main {
    width: 100%;

    min-height: 12rem;
}

.doc-result,
.notice-card {
    width: min(100%, 940px);

    margin-inline: auto;
}

.doc-result,
.notice-card,
.directory-card {
    padding:
        clamp(
            1rem,
            2.5vw,
            1.4rem
        );

    border-radius:
        var(--docs-radius-md);
}

.doc-result,
.notice-card {
    margin-bottom: 1rem;
}

.doc-result h2,
.directory-card h2,
.notice-card h2 {
    margin: 0;

    color:
        var(--docs-text);

    overflow-wrap: anywhere;

    word-break: normal;
}

.doc-result h2 {
    font-size:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    line-height: 1.25;
}

.directory-card h2 {
    font-size:
        clamp(
            1.08rem,
            1.8vw,
            1.32rem
        );

    line-height: 1.3;
}

.doc-result p,
.directory-card p,
.notice-card p {
    margin:
        0.85rem 0 0;

    overflow-wrap: anywhere;
}


/* ============================================================
   Error / unavailable card
   ============================================================ */

.notice-card {
    background:
        var(--docs-error-bg) !important;

    border-color:
        var(--docs-error-border) !important;

    border-left:
        4px solid
        var(--docs-error) !important;
}

.notice-card h2 {
    color:
        var(--docs-error);

    font-size:
        1.25rem;
}


/* ============================================================
   MNID
   ============================================================ */

.mnid-label {
    display: block;

    width: fit-content;
    max-width: 100%;

    margin-top: 0.8rem;

    padding:
        0.4rem
        0.62rem;

    color:
        var(--docs-muted);

    background:
        var(--docs-muted-surface);

    border:
        1px solid
        var(--docs-border);

    border-radius:
        var(--docs-radius-xs);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.88rem;

    line-height: 1.45;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.mnid-label strong {
    color:
        var(--docs-text);
}

.mnid-label a {
    font-weight: 700;

    text-decoration-thickness:
        1px;
}


/* ============================================================
   PDF link
   ============================================================ */

.pdf-link {
    min-height: 42px;

    margin-top: 1rem;

    padding:
        0.62rem
        0.95rem;

    color:
        #ffffff !important;

    background:
        var(--docs-accent);

    border:
        1px solid
        var(--docs-accent);

    box-shadow:
        0 4px 12px
        rgba(106, 13, 173, 0.14);
}

.pdf-link::after {
    content: "↗";

    margin-left: 0.42rem;

    font-size: 0.9em;
}

.pdf-link:hover {
    color:
        #ffffff !important;

    background:
        var(--docs-accent-hover);

    border-color:
        var(--docs-accent-hover);

    text-decoration:
        none;

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 16px
        rgba(106, 13, 173, 0.2);
}

.pdf-link:active {
    transform:
        translateY(0);
}

.empty-description {
    color:
        var(--docs-muted);

    font-style:
        italic;
}


/* ============================================================
   Directory heading
   ============================================================ */

.directory-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin:
        1.5rem 0
        0.85rem;

    padding-inline:
        0.2rem;
}

.directory-heading h2,
.directory-heading p {
    margin: 0;
}

.directory-heading h2 {
    font-size:
        clamp(
            1.35rem,
            2.7vw,
            1.8rem
        );
}

.directory-heading p {
    flex: 0 0 auto;

    color:
        var(--docs-muted);

    white-space: nowrap;
}


/* ============================================================
   Directory
   ============================================================ */

.document-scroll {
    display: grid;

    /*
     * Two columns where enough room exists.
     * Cards remain at least ~330px wide.
     */
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    align-items: start;

    gap: 0.9rem;

    /*
     * Dynamic viewport units prevent mobile browser
     * toolbars from creating awkward overflow.
     */
    max-height:
        min(
            72dvh,
            820px
        );

    min-height:
        240px;

    padding:
        0.1rem
        0.55rem
        0.2rem
        0.1rem;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior:
        contain;

    scroll-behavior:
        smooth;

    scrollbar-gutter:
        stable;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(106, 13, 173, 0.42)
        transparent;

    -webkit-overflow-scrolling:
        touch;
}


/* ------------------------------------------------------------
   Directory cards
   ------------------------------------------------------------ */

.directory-card {
    min-width: 0;
    height: auto;

    margin: 0;

    /*
     * Helps large directories render efficiently.
     */
    content-visibility:
        auto;

    contain-intrinsic-size:
        210px;

    transition:
        transform var(--docs-transition),
        border-color var(--docs-transition),
        box-shadow var(--docs-transition);
}

.directory-card:hover {
    border-color:
        var(--docs-border-strong);

    box-shadow:
        var(--docs-shadow-md);

    transform:
        translateY(-1px);
}


/* ------------------------------------------------------------
   Scrollbars
   ------------------------------------------------------------ */

.document-scroll::-webkit-scrollbar {
    width: 10px;
}

.document-scroll::-webkit-scrollbar-track {
    background:
        transparent;
}

.document-scroll::-webkit-scrollbar-thumb {
    background:
        rgba(106, 13, 173, 0.32);

    border:
        3px solid transparent;

    border-radius:
        999px;

    background-clip:
        padding-box;
}

.document-scroll::-webkit-scrollbar-thumb:hover {
    background:
        rgba(106, 13, 173, 0.5);

    border:
        3px solid transparent;

    background-clip:
        padding-box;
}


/* ============================================================
   Footer
   ============================================================ */

.site-footer {
    width: min(100%, 860px);

    margin:
        2.5rem auto 0;

    padding:
        1.3rem
        1rem
        0;

    color:
        var(--docs-muted);

    border-top:
        1px solid
        var(--docs-border);

    font-size:
        0.88rem;

    line-height:
        1.8;

    text-align:
        center;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   Accessibility
   ============================================================ */

.visually-hidden {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    clip-path:
        inset(50%) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* ============================================================
   Medium desktop / laptop
   901px–1100px
   ============================================================ */

@media (max-width: 1100px) {
    .docs-shell {
        width:
            min(
                calc(100% - 2rem),
                var(--docs-max-width)
            );
    }

    .document-scroll {
        max-height:
            min(
                70dvh,
                760px
            );
    }
}


/* ============================================================
   Tablet
   <= 900px
   ============================================================ */

@media (max-width: 900px) {
    .docs-shell {
        width:
            min(
                calc(100% - 1.5rem),
                var(--docs-max-width)
            );
    }

    /*
     * Directory returns to one column before cards
     * become unnecessarily narrow.
     */
    .document-scroll {
        grid-template-columns:
            minmax(0, 1fr);

        max-height:
            68dvh;
    }

    .search-panel {
        width: 100%;
    }

    .doc-result,
    .notice-card {
        width: 100%;
    }
}


/* ============================================================
   Mobile
   <= 700px
   ============================================================ */

@media (max-width: 700px) {
    .docs-shell {
        width:
            min(
                calc(100% - 1.1rem),
                var(--docs-max-width)
            );

        padding-top:
            max(
                1.15rem,
                calc(
                    0.8rem +
                    env(safe-area-inset-top)
                )
            );
    }

    .docs-header {
        margin-bottom:
            1rem;
    }

    /*
     * Sticky search panels can occupy a substantial
     * percentage of a phone display, especially with
     * the on-screen keyboard.
     */
    .search-panel {
        position:
            relative;

        top:
            auto;

        padding:
            0.85rem;

        border-radius:
            14px;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }

    /*
     * Keep input + search button together down to
     * smaller phone widths.
     */
    .search-form {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            0.55rem;
    }

    .search-form button {
        min-width:
            92px;

        padding-inline:
            0.9rem;
    }

    .search-help {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            0.65rem;
    }

    .directory-link {
        width:
            100%;
    }

    .directory-heading {
        align-items:
            center;

        margin-top:
            1.2rem;
    }

    .document-scroll {
        max-height:
            66dvh;

        padding-right:
            0.25rem;

        gap:
            0.7rem;
    }

    .doc-result,
    .notice-card,
    .directory-card {
        border-radius:
            13px;
    }

    .site-footer {
        margin-top:
            1.8rem;

        padding-inline:
            0.3rem;
    }
}


/* ============================================================
   Small mobile
   <= 520px
   ============================================================ */

@media (max-width: 520px) {
    .docs-shell {
        width:
            calc(100% - 0.8rem);
    }

    .search-panel {
        padding:
            0.7rem;
    }

    /*
     * Stack controls on smaller phones.
     */
    .search-form {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .search-form input,
    .search-form button {
        width:
            100%;

        min-height:
            48px;
    }

    .directory-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.15rem;
    }

    .doc-result,
    .notice-card,
    .directory-card {
        padding:
            1rem;
    }

    .mnid-label {
        width:
            100%;
    }

    .pdf-link {
        width:
            100%;
    }
}


/* ============================================================
   Very small displays
   <= 360px
   ============================================================ */

@media (max-width: 360px) {
    .docs-shell {
        width:
            calc(100% - 0.5rem);
    }

    .docs-header h1 {
        font-size:
            1.75rem;
    }

    .search-panel {
        padding:
            0.6rem;
    }

    .doc-result,
    .notice-card,
    .directory-card {
        padding:
            0.9rem;
    }

    .mnid-label {
        font-size:
            0.82rem;
    }
}


/* ============================================================
   Short-height / landscape devices
   ============================================================ */

@media (max-height: 600px) and (orientation: landscape) {
    .docs-shell {
        padding-top:
            max(
                0.8rem,
                env(safe-area-inset-top)
            );
    }

    .docs-header {
        margin-bottom:
            0.8rem;
    }

    .docs-header p {
        margin-top:
            0.35rem;
    }

    .search-panel {
        position:
            relative;

        top:
            auto;
    }

    .document-scroll {
        max-height:
            60dvh;
    }
}


/* ============================================================
   Large desktops
   >= 1400px
   ============================================================ */

@media (min-width: 1400px) {
    :root {
        --docs-max-width:
            1240px;
    }

    .docs-shell {
        padding-top:
            2.5rem;
    }

    .document-scroll {
        max-height:
            min(
                74dvh,
                900px
            );
    }
}


/* ============================================================
   Hover-capable devices only
   ============================================================ */

@media (hover: none) {
    .directory-card:hover {
        transform:
            none;

        box-shadow:
            var(--docs-shadow-sm);
    }

    .search-form button:hover,
    .pdf-link:hover {
        transform:
            none;
    }
}


/* ============================================================
   Dark mode
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --docs-bg: #130f16;

        --docs-surface: #1d1721;
        --docs-surface-glass:
            rgba(29, 23, 33, 0.93);

        --docs-muted-surface:
            #251d2a;

        --docs-text:
            #f3edf6;

        --docs-muted:
            #b9aebe;

        --docs-border:
            rgba(242, 231, 248, 0.13);

        --docs-border-strong:
            rgba(184, 117, 224, 0.32);

        --docs-accent:
            #b875e0;

        --docs-accent-hover:
            #ca91eb;

        --docs-accent-soft:
            rgba(184, 117, 224, 0.13);

        --docs-accent-ring:
            rgba(184, 117, 224, 0.26);

        --docs-error:
            #ff9b9b;

        --docs-error-bg:
            #2a181c;

        --docs-error-border:
            rgba(255, 155, 155, 0.24);

        --docs-shadow-sm:
            0 1px 2px rgba(0, 0, 0, 0.2),
            0 7px 22px rgba(0, 0, 0, 0.18);

        --docs-shadow-md:
            0 10px 34px rgba(0, 0, 0, 0.28);

        --docs-shadow-lg:
            0 16px 50px rgba(0, 0, 0, 0.34);
    }

    html {
        background:
            var(--docs-bg);
    }

    body.docs-app {
        background:
            radial-gradient(
                circle at 8% 0%,
                rgba(184, 117, 224, 0.11),
                transparent 34rem
            ),
            var(--docs-bg);
    }

    .search-form input {
        color-scheme:
            dark;
    }

    .search-form button,
    .pdf-link,
    .pdf-link:hover {
        color:
            #171019 !important;
    }
}


/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .docs-app *,
    .docs-app *::before,
    .docs-app *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* ============================================================
   Print
   ============================================================ */

@media print {
    html,
    body.docs-app {
        color:
            #000000;

        background:
            #ffffff;
    }

    .docs-shell {
        width:
            100%;

        padding:
            0;
    }

    .search-panel,
    .directory-link,
    .pdf-link,
    .site-footer {
        display:
            none !important;
    }

    .document-scroll {
        display:
            block;

        max-height:
            none;

        padding:
            0;

        overflow:
            visible;
    }

    .docs-app .card {
        color:
            #000000;

        background:
            #ffffff !important;

        border:
            1px solid
            #cccccc;

        box-shadow:
            none !important;

        break-inside:
            avoid;
    }

    .directory-card {
        margin-bottom:
            0.8rem;

        content-visibility:
            visible;

        transform:
            none !important;
    }

    .mnid-label {
        color:
            #000000;

        background:
            #ffffff;

        border-color:
            #cccccc;
    }
}