/* =====================================================================
 * restraml-shared.css — Shared styles for all docs/*.html tool pages
 *
 * AGENTS: This file contains CSS shared across ALL tool pages.
 * Page-specific styles (diff2html overrides, Monaco editor layout,
 * tikapp toolbar, etc.) stay inline in each HTML file.
 *
 * When adding a new docs/*.html page, include this stylesheet via:
 *   <link rel="stylesheet" href="restraml-shared.css">
 * Load it AFTER Pico CSS and Google Fonts, BEFORE page-specific <style>.
 * Exception: openapi.html loads this without Pico because Scalar conflicts
 * with Pico's global element styles.
 *
 * This file is organized into these sections:
 *   1. Font overrides (JetBrains Mono + Manrope over Pico defaults)
 *   2. Inline code/kbd tightening (fix line-height bloat in paragraphs)
 *   3. MikroTik logo dark/light swap
 *   4. Theme switcher icon sizing
 *   5. Tools nav dropdown LTR fix
 *   6. Page guide pattern (collapsible help sections)
 *   7. Legacy share modal styling
 *   8. Utility classes (inline style="" replacements)
 *   9. Site footer
 * ===================================================================== */


/* -----------------------------------------------------------------
 * 1. Font overrides
 *    JetBrains Mono as the primary body font; Manrope as sans-serif
 *    fallback. These override Pico's default system font stacks.
 * ----------------------------------------------------------------- */
:root {
    --pico-font-family-sans-serif: Manrope, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
    --pico-font-family-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
    --pico-font-family: "JetBrains Mono", var(--pico-font-family-sans-serif);
}


/* -----------------------------------------------------------------
 * 2. Inline code/kbd tightening
 *    Pico adds vertical padding to inline <code> and <kbd> which
 *    inflates line-height in running text. These rules reduce the
 *    padding so code spans sit flush within paragraph lines.
 *    Block-level <pre><code> is not affected (no extra padding there).
 * ----------------------------------------------------------------- */
:not(pre) > code,
:not(pre) > kbd {
    padding: 0.05em 0.3em;
    vertical-align: baseline;
}


/* -----------------------------------------------------------------
 * 3. MikroTik logo dark/light swap
 *    Two <img data-theme="dark|light"> sit in the nav. CSS controls
 *    which one is visible based on the current theme state.
 *    Default (no data-theme on <html>): show light logo only.
 *    Dark logo appears in explicit dark or OS-dark auto mode.
 * ----------------------------------------------------------------- */
img[data-theme=dark] { display: none; }
[data-theme=dark] img[data-theme=dark] { display: inline; }
[data-theme=dark] img[data-theme=light] { display: none; }
[data-theme=light] img[data-theme=dark] { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) img[data-theme=dark] { display: inline; }
    :root:not([data-theme=light]) img[data-theme=light] { display: none; }
}

header nav img[data-theme] {
    height: 2rem;
    width: auto;
}


/* -----------------------------------------------------------------
 * 4. Theme switcher icon sizing
 *    The sun/moon/half-circle SVG in the nav header.
 * ----------------------------------------------------------------- */
header nav li a svg {
    width: var(--font-size);
    height: var(--font-size);
    color: var(--contrast);
}


/* -----------------------------------------------------------------
 * 5. Tools nav dropdown LTR fix
 *    The dropdown uses dir="rtl" on <ul> for right-alignment, but
 *    items like "/app Editor" need LTR so the leading slash doesn't
 *    migrate to the end of the text.
 * ----------------------------------------------------------------- */
details.dropdown ul li { direction: ltr; }


/* -----------------------------------------------------------------
 * 6. Page guide pattern (collapsible help sections)
 *    Used by lookup.html (#lookup-guide) and diff.html (#diff-guide).
 *    Scope via .page-guide class instead of page-specific IDs so
 *    any page can reuse the pattern.
 * ----------------------------------------------------------------- */
.page-guide summary {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}
.page-guide article {
    font-size: 0.88rem;
    margin-top: 0.5rem;
}
.page-guide article hr { margin: 0.8rem 0; }
.page-guide pre {
    font-size: 0.78rem;
    border-left: 3px solid var(--pico-primary);
}
.page-guide .behind-curtain {
    border-left: 3px solid var(--pico-form-element-border-color);
    border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
    padding: 0.6rem 1rem;
    background: var(--pico-form-element-background-color);
}


/* -----------------------------------------------------------------
 * 7. Legacy share modal styling
 *    Kept for initShareModal() consumers. Current root tool pages use the
 *    inline "Copied!" share button pattern instead of <dialog>.
 * ----------------------------------------------------------------- */
dialog.share-modal {
    max-width: 36rem;
    width: 90%;
    border-radius: 0.5rem;
    padding: 1.5rem;
}
dialog.share-modal > article {
    margin: 0;
}
dialog.share-modal > article > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
}
dialog.share-modal > article > footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.75rem;
}
dialog.share-modal .share-url-input {
    font-size: 0.8em;
    font-family: var(--pico-font-family-monospace);
}
dialog.share-modal .share-copy-btn {
    width: auto;
}


/* -----------------------------------------------------------------
 * 8. Utility classes
 *    Replace common inline style="" patterns with reusable classes.
 * ----------------------------------------------------------------- */

/* margin-left spacer for adjacent switch labels */
.ml-1 { margin-left: 1rem; }

/* Right-aligned share/action link below results */
.text-right { text-align: right; }
.mt-1 { margin-top: 1rem; }
.mt-1-5 { margin-top: 1.5rem; }

/* Share link styling */
.share-link { font-size: 0.9em; }

/* Inline compact select (used in diff options row) */
.inline-select {
    display: inline-block;
    width: auto;
    padding: 0.15em 0.4em;
    font-size: 0.85em;
    margin: 0 0.2rem;
    vertical-align: baseline;
}

/* Compact, consistent switch labels in control navs */
.switch-controls label {
    font-size: 0.78rem;
    font-style: italic;
    white-space: nowrap;
}
.switch-controls label code {
    font-style: normal;
    font-size: inherit;
}
.switch-controls ul:last-child li + li { margin-left: 0.5rem; }

/* 2fr/1fr grid layout (e.g. lookup path+attr inputs) */
.grid-2fr-1fr {
    grid-template-columns: 2fr 1fr;
}


/* -----------------------------------------------------------------
 * 9. Site footer
 *    Consistent disclaimer across all pages.
 * ----------------------------------------------------------------- */
body > footer small {
    font-style: italic;
}


/* -----------------------------------------------------------------
 * 11. Reversed/inverted brand text (TIKOCI)
 *     Gradient pill used in nav brand link and hero headings.
 *     Synced with tikoci.github.io shared.css.
 * ----------------------------------------------------------------- */
.brand-reverse {
    display: inline-block;
    background: var(--brand-gradient, linear-gradient(135deg, #3660B9, #5F2965));
    color: #fff;
    padding: 0.05em 0.4em;
    border-radius: var(--pico-border-radius);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-decoration: none;
}
.brand-reverse:hover,
.brand-reverse:visited {
    color: #fff;
    text-decoration: none;
}
a.brand-reverse:hover { opacity: 0.85; }


/* -----------------------------------------------------------------
 * 11b. Nav brand link — MikroTik logo + "by TIKOCI" header
 *      Synced with tikoci.github.io shared.css.
 * ----------------------------------------------------------------- */
.nav-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    white-space: nowrap;
}
.nav-brand-link:hover { text-decoration: none; }
.nav-brand-link .brand-reverse {
    font-size: 0.9rem;
    padding: 0.05em 0.35em;
}
/* Full MikroTik logo (symbol + brand name) — desktop only */
.nav-mt-full {
    height: 1.4rem;
    width: auto;
    flex-shrink: 0;
    color: var(--pico-color);
}
/* MikroTik symbol only — mobile only */
.nav-mt-symbol {
    height: 1.4rem;
    width: auto;
    flex-shrink: 0;
    display: none;
    color: var(--pico-color);
}
.nav-by {
    font-size: 0.78rem;
    color: var(--pico-muted-color);
    font-style: italic;
}
@media (max-width: 576px) {
    .nav-mt-full { display: none; }
    .nav-mt-symbol { display: inline; }
}


/* -----------------------------------------------------------------
 * 12. Nav dropdown buttons with icon (Tools, GitHub)
 *     Synced with tikoci.github.io shared.css.
 * ----------------------------------------------------------------- */
nav details.dropdown {
    width: fit-content;
}
nav details.dropdown > summary[role="button"].nav-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
nav details.dropdown > summary.nav-btn-icon svg.nav-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------
 * 10. Changelog / Release Notes modal
 *     Shared by index.html and lookup.html (and any future page).
 *     Trigger via initChangelogModal() from restraml-shared.js.
 * ----------------------------------------------------------------- */
#changelog-modal {
    max-width: 62rem;
    width: 95vw;
    max-height: 92vh;
    padding: 0;
    border-radius: 0.5rem;
    overflow: hidden;
}
#changelog-modal > article {
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
#changelog-modal > article > header {
    flex-shrink: 0;
    padding: 1.25rem 1.5rem 0.75rem;
}
#changelog-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1.5rem 0.75rem;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.82rem;
    line-height: 1.6;
    min-height: 10rem;
}
.cl-section-header {
    display: block;
    font-weight: 700;
    color: var(--pico-primary);
    margin-top: 1.4em;
    margin-bottom: 0.25em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid var(--pico-muted-border-color);
    scroll-margin-top: 0.5rem;
}
.cl-section-header:first-child { margin-top: 0; }
.cl-section-current { font-size: 1.05em; }
.cl-item {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    margin-bottom: 0.1em;
    padding-left: 0.25em;
}
.cl-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Red text: security-related items AND lines starting with "!)" */
.cl-item-important { color: var(--pico-del-color, #c0392b); font-weight: 600; }
.cl-subsystem {
    display: inline-block;
    font-size: 0.72em;
    padding: 0.05em 0.38em;
    border-radius: 3px;
    background: var(--pico-code-background-color, #e8e8e8);
    color: var(--pico-code-color, #333);
    margin-right: 0.35em;
    vertical-align: baseline;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
mark.cl-highlight {
    background: var(--pico-mark-background-color, #fff3cd);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
#changelog-modal > article > footer {
    flex-shrink: 0;
    padding: 0.6rem 1.5rem;
    border-top: 1px solid var(--pico-muted-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Dark mode subsystem tag */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .cl-subsystem {
        background: var(--pico-code-background-color, #2a2a2a);
        color: var(--pico-code-color, #ccc);
    }
}
[data-theme=dark] .cl-subsystem {
    background: var(--pico-code-background-color, #2a2a2a);
    color: var(--pico-code-color, #ccc);
}
/* MikroTik symbol icon inside the "CHANGELOG ↗" button */
.cl-mt-symbol {
    height: 0.9em;
    width: auto;
    vertical-align: middle;
    margin: 0 2px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .cl-mt-symbol { filter: invert(1); }
}
[data-theme=dark] .cl-mt-symbol { filter: invert(1); }