/* SLP Documentation Stylesheet
   Aligned with the lunaticoastro.com brand (navy/gold)
   Primary border/card color: #1B3A6B
   Accent/stress color: #C8A84B
*/

:root
{
    --color-primary: #1B3A6B;
    --color-accent: #C8A84B;
    --color-accent-hover: #A88A35;
    --color-accent-light: #f2ecda;
    /* Gold reads poorly as small text on light backgrounds (low contrast);
       use this darker tone wherever gold is the text color rather than a
       background/border. */
    --color-accent-text: #8a6f26;
    --color-bg: #F0F2F5;
    --color-card-bg: #e7eaf0;
    --color-card-inner: #fafbfc;
    --color-void: #080E1A;
    --color-text: #2a3244;
    --color-text-muted: #555c6e;
    --color-text-light: #888f9e;
    --font-display: 'Century Gothic', 'Avant Garde', 'Trebuchet MS', system-ui, sans-serif;
    --font-sans: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --ease: 0.22s ease;
    --color-success: #5cb85c;
    --color-warning: #f0ad4e;
    --color-info: #5bc0de;
    /* Device colors - one shared hue rotation, all normalized to the same
       perceptual lightness (equal relative luminance, not just equal HSL
       lightness, since raw HSL reads blues/violets as darker than
       yellows/greens at the same L%). This keeps every chip looking like
       part of one muted family instead of a clashing rainbow of differing
       intensities. Lanternfish is deliberately desaturated to read as a
       neutral/secondary device rather than joining the hue rotation. */
    --color-device-lllod: #d28c84;
    --color-device-limpet: #d388a1;
    --color-device-beaver: #c49560;
    --color-device-armadillo: #81ab3f;
    --color-device-starling: #a6a13d;
    --color-device-firefly: #42b35d;
    --color-device-caterpillar: #41b08b;
    --color-device-caterpillarssr: #cf7a3c;
    --color-device-platypus: #56b142;
    --color-device-pocketcw2: #79a1ce;
    --color-device-seletek: #9698d8;
    --color-device-gns: #c587d3;
    --color-device-dragonfly: #d284bf;
    --color-device-lanternfish: #999daf;
    --color-badge-text: #21283a;
    --customgap: 1.5rem;
    --border-radius: 8px;
    --border-radius-sm: 6px;
    --shadow-card: 0 1px 2px rgba(8, 14, 26, 0.05), 0 6px 20px rgba(8, 14, 26, 0.05);
    --shadow-card-hover: 0 4px 14px rgba(8, 14, 26, 0.10);
    --shadow-pop: 0 8px 24px rgba(8, 14, 26, 0.16);
}

/* Reset & Base */
*
{
    box-sizing: border-box;
}

html
{
    /* Prevents stray wide elements from forcing horizontal scroll on phones */
    overflow-x: hidden;
}

body
{
    background-color: var(--color-bg);
    font-family: var(--font-sans);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Page Layout */
.page-wrapper
{
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    width: 100%;
}

/* Header */
.site-header
{
    background: linear-gradient(135deg, var(--color-void) 0%, var(--color-primary) 100%);
    color: #fff;
    padding: 2rem 0;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(8, 14, 26, 0.35);
}

.site-header .page-wrapper
{
    padding: 0 1.5rem;
}

.site-header h1
{
    margin: 0 0 0.5rem 0;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-header .tagline
{
    margin: 0;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--color-accent);
    opacity: 0.95;
    font-size: 1rem;
}

/* Navigation */
.main-nav
{
    background-color: var(--color-card-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(8, 14, 26, 0.1);
}

.main-nav .page-wrapper
{
    padding: 0.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
}

.nav-links
{
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
    align-items: center;
}

.nav-link
{
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link.active
{
    background-color: var(--color-accent);
    color: var(--color-void);
}

.nav-separator
{
    color: var(--color-text-muted);
    padding: 0 0.25rem;
}

.nav-action
{
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    background-color: rgba(27, 58, 107, 0.08);
}

/* Search Box */
.search-container
{
    min-width: 280px;
    max-width: 350px;
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-wrapper
{
    position: relative;
}

.search-box
{
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 2px rgba(8, 14, 26, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.search-box:focus-within
{
    box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.25);
}

/* Search Suggestions Dropdown */
.search-suggestions
{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    max-height: 300px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 200;
    display: none;
    box-shadow: var(--shadow-pop);
}

.search-suggestions.visible
{
    display: block;
}

.search-suggestions li
{
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(27, 58, 107, 0.1);
    transition: background-color 0.15s ease;
}

.search-suggestions li:last-child
{
    border-bottom: none;
}

.search-suggestions li:hover,
.search-suggestions li.selected
{
    background-color: var(--color-accent-light);
}

.search-suggestions li .suggestion-command
{
    font-weight: 600;
    color: var(--color-primary);
}

.search-suggestions li .suggestion-type
{
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-left: 0.5rem;
    text-transform: uppercase;
}

.search-suggestions li .suggestion-context
{
    font-size: 0.85rem;
    color: var(--color-text-muted);
    display: block;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav Actions (Expand/Collapse) */
.nav-actions
{
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.nav-actions .nav-action
{
    flex: 1;
    text-align: center;
}

.search-box input
{
    flex: 1;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    outline: none;
    background: transparent;
}

.search-box button
{
    background: var(--color-primary);
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.2s ease;
}

.search-box button:hover
{
    background: var(--color-accent);
}

.search-icon
{
    width: 20px;
    height: 20px;
}

/* Cards
   The site doesn't frame content in borders - definition comes from a
   background-color shift plus a soft shadow, never a hard outline. This
   replaces the old 2px navy "picture frame" double-card look. .card-outer
   is kept (rather than collapsing the two divs into one) only because
   index.html and the JS templates already nest card-outer > card-inner
   throughout; giving card-outer no visual styling of its own keeps every
   call site working unchanged. */
.card-outer
{
    margin-bottom: var(--customgap);
    width: 100%;
}

.card-inner
{
    background-color: var(--color-card-inner);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-card);
}

/* Section Titles */
.section-main-title
{
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 1.5rem;
}

.section-title
{
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-primary);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title .icon
{
    color: var(--color-accent);
}

.subsection-title
{
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: var(--color-text);
    font-size: 1.15rem;
}

/* Introduction Section */
.intro-section
{
    margin-bottom: 2rem;
}

.intro-section p
{
    margin: 2 0 1rem 0;
}

.intro-section code
{
    background-color: var(--color-bg);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.95em;
    color: var(--color-primary);
}

.intro-section pre
{
    background-color: var(--color-primary);
    color: #f0f0f4;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-sm);
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.intro-section pre code
{
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

/* Command Groups */
.command-group
{
   scroll-margin-top: 80px;
}

/* ---- Documentation tiers (Basic / Configuration / Advanced) ---- */
.tier-section
{
    scroll-margin-top: 80px;
    margin-bottom: 1.5rem;
}

.tier-header
{
    margin: 2rem 0 1rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--color-accent);
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-sm);
}

.tier-title
{
    margin: 0;
    font-size: 1.35rem;
    color: var(--color-primary);
}

.tier-desc
{
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Advanced tier: red-flagged warning styling */
.tier-warn .tier-header
{
    border-left-color: #b3402f;
    background-color: rgba(179, 64, 47, 0.07);
}

.tier-warn .tier-title
{
    color: #b3402f;
}

.tier-warn .tier-title::before
{
    content: "\26A0";
    margin-right: 0.5rem;
}

/* TOC tier sub-headers */
.toc-list li.toc-tier
{
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-top: 0.75rem;
    padding: 0.25rem 0;
    opacity: 0.75;
    pointer-events: none;
}

.command-group-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.device-badges
{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.device-badge
{
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Every device chip is normalized to the same perceptual lightness (see
       the --color-device-* definitions), so one shared dark text color reads
       cleanly across all of them - no per-device override needed. */
    color: var(--color-badge-text);
}

.device-badge.seletek { background-color: var(--color-device-seletek); }
.device-badge.armadillo { background-color: var(--color-device-armadillo); }
.device-badge.platypus { background-color: var(--color-device-platypus); }
.device-badge.dragonfly { background-color: var(--color-device-dragonfly); }
.device-badge.beaver { background-color: var(--color-device-beaver); }
.device-badge.firefly { background-color: var(--color-device-firefly); }
.device-badge.starling { background-color: var(--color-device-starling); }
.device-badge.lanternfish { background-color: var(--color-device-lanternfish); }
.device-badge.pocketcw2 { background-color: var(--color-device-pocketcw2); }
.device-badge.caterpillar { background-color: var(--color-device-caterpillar); }
.device-badge.caterpillarssr { background-color: var(--color-device-caterpillarssr); }
.device-badge.limpet { background-color: var(--color-device-limpet); }
.device-badge.gns { background-color: var(--color-device-gns); }
.device-badge.lllod { background-color: var(--color-device-lllod); }

/* Collapsible Sections */
.collapsible-section,
.collapsible-group
{
    cursor: pointer;
}

.collapsible-section .section-title,
.collapsible-group .section-title
{
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.collapsible-section .section-title .collapse-icon,
.collapsible-group .section-title .collapse-icon
{
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.collapsible-section.collapsed .section-title .collapse-icon,
.collapsible-group.collapsed .section-title .collapse-icon
{
    transform: rotate(-90deg);
}

.collapsible-section .collapsible-content,
.collapsible-group .collapsible-content
{
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease;
    /* No fixed cap here - a hardcoded pixel guess (the old value was 5000px)
       silently clips any group whose real content grows past it, with no
       scrollbar or other sign that content is missing. The JS toggle
       handlers (SLPDocs.toggleGroup/toggleSection/expandAll/collapseAll)
       measure each section's actual scrollHeight and animate to that exact
       value, then release the cap back to "none" once expanded - so this
       rule only matters as the resting, unclipped state and as a fallback
       if JS hasn't run yet. */
    max-height: none;
    opacity: 1;
}

.collapsible-section.collapsed .collapsible-content,
.collapsible-group.collapsed .collapsible-content
{
    max-height: 0;
    opacity: 0;
}

/* Collapsible header styling */
.collapsible-header
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0;
}

.collapsible-header .section-title
{
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1;
    padding: 0.5rem 0;
}

.collapsible-header:hover .collapse-icon
{
    color: var(--color-accent-hover);
}

/* Collapsed state - equal top/bottom padding */
.collapsible-section.collapsed .card-inner,
.collapsible-group.collapsed .card-inner
{
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Command List */
.command-list
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual Command */
.command-item
{
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1.25rem;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.command-item:hover
{
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.command-header
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.command-name
{
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-accent-text);
    margin: 0;
}

.command-syntax
{
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    background-color: var(--color-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin: 0.5rem 0;
    display: block;
    overflow-x: auto;
}

.command-description
{
    color: var(--color-text);
    margin: 0.5rem 0;
    font-size: 0.95rem;
}

.command-tags
{
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.tag
{
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background-color: var(--color-bg);
    color: var(--color-text-muted);
}

.tag.param
{
    background-color: rgba(91, 192, 222, 0.18);
    color: #2c6a82;
}

.tag.return
{
    background-color: rgba(92, 184, 92, 0.18);
    color: #2f6b2f;
}

/* Command Details (expandable) */
.command-details
{
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(27, 58, 107, 0.1);
}

.command-item.expanded .command-details
{
    display: block;
}

.command-item .expand-btn
{
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.command-item .expand-btn:hover
{
    background-color: var(--color-accent-light);
}

.detail-section
{
    margin-bottom: 1rem;
}

.detail-section:last-child
{
    margin-bottom: 0;
}

.detail-label
{
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.detail-content
{
    font-size: 0.95rem;
}

.param-list
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.param-list li
{
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(27, 58, 107, 0.05);
}

.param-list li:last-child
{
    border-bottom: none;
}

.param-name
{
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--color-accent-text);
    font-weight: 500;
}

.param-type
{
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-left: 0.5rem;
}

.example-block
{
    background-color: var(--color-primary);
    color: #f0f0f4;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    overflow-x: auto;
}

.example-block .comment
{
    color: #8899aa;
}

.example-block .response
{
    color: #a8e6cf;
}

/* Buttons */
.std-button
{
    background-color: var(--color-accent);
    color: var(--color-void);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.std-button:hover
{
    background-color: var(--color-accent-hover);
}

.std-button:active
{
    transform: scale(0.98);
}

.std-button.secondary
{
    background-color: var(--color-primary);
}

.std-button.secondary:hover
{
    background-color: #3a4570;
}

/* Filter Pills */
.filter-section
{
    margin-bottom: 1.5rem;
}

.filter-section .card-inner
{
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.filter-section .subsection-title
{
    margin-top: 0;
    margin-bottom: 0.4rem;
    line-height: 1.2;
}

.filter-pills
{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-pill
{
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    border: none;
    background-color: var(--color-bg);
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-pill:hover
{
    background-color: rgba(27, 58, 107, 0.14);
}

.filter-pill.active
{
    background-color: var(--color-primary);
    color: #fff;
}

.filter-pill.accent
{
    background-color: var(--color-accent-light);
    color: var(--color-accent-text);
}

.filter-pill.accent:hover
{
    background-color: rgba(200, 168, 75, 0.25);
}

.filter-pill.accent.active
{
    background-color: var(--color-accent);
    color: var(--color-void);
}

.filter-pill-separator
{
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0.4rem;
    opacity: 0.6;
}

/* Device filter pills: once selected, a chip takes on that device's own
   badge color (same --color-device-* variables the command badges use),
   so filtering to "Dragonfly" turns the Dragonfly pill dragonfly-pink
   instead of the generic active gold. Falls back to the plain gold active
   state above for any device without a specific color. */
.filter-pill.active[data-device="seletek"] { background-color: var(--color-device-seletek); color: var(--color-badge-text); }
.filter-pill.active[data-device="armadillo"] { background-color: var(--color-device-armadillo); color: var(--color-badge-text); }
.filter-pill.active[data-device="platypus"] { background-color: var(--color-device-platypus); color: var(--color-badge-text); }
.filter-pill.active[data-device="dragonfly"] { background-color: var(--color-device-dragonfly); color: var(--color-badge-text); }
.filter-pill.active[data-device="beaver"] { background-color: var(--color-device-beaver); color: var(--color-badge-text); }
.filter-pill.active[data-device="firefly"] { background-color: var(--color-device-firefly); color: var(--color-badge-text); }
.filter-pill.active[data-device="starling"] { background-color: var(--color-device-starling); color: var(--color-badge-text); }
.filter-pill.active[data-device="lanternfish"] { background-color: var(--color-device-lanternfish); color: var(--color-badge-text); }
.filter-pill.active[data-device="pocketcw2"] { background-color: var(--color-device-pocketcw2); color: var(--color-badge-text); }
.filter-pill.active[data-device="caterpillar"] { background-color: var(--color-device-caterpillar); color: var(--color-badge-text); }
.filter-pill.active[data-device="caterpillarssr"] { background-color: var(--color-device-caterpillarssr); color: var(--color-badge-text); }
.filter-pill.active[data-device="limpet"] { background-color: var(--color-device-limpet); color: var(--color-badge-text); }

/* Search Results */
.search-results-info
{
    padding: 0.75rem 1rem;
    background-color: var(--color-accent-light);
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    display: none;
}

.search-results-info.visible
{
    display: block;
}

.search-results-info .count
{
    font-weight: 600;
    color: var(--color-accent-text);
}

.no-results
{
    text-align: center;
    padding: 3rem;
    color: var(--color-text-muted);
}

.no-results .icon
{
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Scroll to top */
.scroll-top-btn
{
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(27, 58, 107, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 50;
}

.scroll-top-btn.visible
{
    opacity: 1;
    visibility: visible;
}

.scroll-top-btn:hover
{
    background-color: var(--color-accent);
    transform: translateY(-3px);
}

/* Table of Contents (sidebar) */
.toc-sidebar
{
    position: sticky;
    top: 160px;
    padding-right: 0.5rem;
}

.toc-sidebar .card-outer
{
    margin-bottom: 0;
}

.toc-sidebar .card-inner
{
    padding: 1rem;
}

.toc-sidebar .subsection-title
{
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* TOC Filter Input */
.toc-filter
{
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    background-color: var(--color-bg);
    color: var(--color-text);
    outline: none;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

.toc-filter:focus
{
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(200, 168, 75, 0.3);
}

.toc-filter::placeholder
{
    color: var(--color-text-light);
}

.toc-list::-webkit-scrollbar
{
    width: 6px;
}

.toc-list::-webkit-scrollbar-track
{
    background: transparent;
}

.toc-list::-webkit-scrollbar-thumb
{
    background-color: var(--color-accent);
    border-radius: 3px;
}

.toc-list
{
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    scroll-behavior: smooth;
}

.toc-list li
{
    margin-bottom: 0.5rem;
}

.toc-list a
{
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    display: block;
    padding: 0.3rem 0;
    border-left: 3px solid transparent;
    padding-left: 0.75rem;
}

.toc-list a:hover
{
    color: var(--color-accent-text);
}

.toc-list a.active
{
    color: var(--color-accent-text);
    border-left-color: var(--color-accent);
    font-weight: 500;
}

.toc-list li.disabled
{
    opacity: 0.4;
}

.toc-list a.disabled
{
    color: var(--color-text-light);
    cursor: default;
}

.toc-list a.disabled:hover
{
    color: var(--color-text-light);
}

/* Layout Grid */
.content-grid
{
    display: grid;
    /* Single column by default. The sidebar only appears at 1024px+ (see
       below) - it used to be that this grid still reserved a fixed 250px
       second column from 768px up to 1024px even though .sidebar was
       display:none in that range, wasting a quarter of the content width
       with an empty track. Defining the two-column layout only where the
       sidebar actually renders keeps the two rules from drifting apart. */
    grid-template-columns: 1fr;
    gap: 2rem;
}

.main-content
{
    min-width: 0;
}

.sidebar
{
    display: none;
}

@media (min-width: 1024px)
{
    .content-grid
    {
        grid-template-columns: 1fr 250px;
    }

    .sidebar
    {
        display: block;
    }
}

/* Footer */
.site-footer
{
    background-color: var(--color-primary);
    color: rgba(255, 255, 255, 0.8);
    padding: 2rem 0;
    margin-top: 3rem;
    text-align: center;
}

.site-footer a
{
    color: var(--color-accent);
    text-decoration: none;
}

.site-footer a:hover
{
    text-decoration: underline;
}

/* Responsive */

/* Tablets and below: nav grid was 2-column ("1fr auto") and never collapsed,
   which forced the search box to fight the nav links for horizontal space.
   Switch to a single stacked column and let the nav links scroll horizontally
   instead of wrapping into a tall block above the content. */
@media (max-width: 900px)
{
    .main-nav .page-wrapper
    {
        grid-template-columns: 1fr;
    }

    .nav-links
    {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        justify-content: flex-start;
        padding-bottom: 0.4rem;
    }

    .nav-link
    {
        flex-shrink: 0;
    }

    .search-container
    {
        max-width: none;
    }
}

@media (max-width: 768px)
{
    .page-wrapper
    {
        padding: 1rem;
    }

    .site-header
    {
        padding: 1.5rem 0;
    }

    .site-header h1
    {
        font-size: 1.5rem;
    }

    .site-header .tagline
    {
        font-size: 0.85rem;
    }

    .content-grid
    {
        gap: 1rem;
    }

    .card-inner
    {
        padding: 1rem;
    }

    .command-header
    {
        flex-direction: column;
        align-items: flex-start;
    }

    .command-group-header
    {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-title
    {
        font-size: 1.2rem;
    }

    .nav-actions
    {
        width: 100%;
    }

    /* Tables don't reflow; let them scroll within their own box instead of
       blowing out the page width on a phone. */
    .protocol-table
    {
        display: block;
    }

    .table-scroll
    {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--border-radius-sm);
    }
}

/* Small phones */
@media (max-width: 480px)
{
    .page-wrapper
    {
        padding: 0.75rem;
    }

    .site-header h1
    {
        font-size: 1.3rem;
    }

    .search-box input
    {
        padding: 0.65rem 0.75rem;
        font-size: 0.95rem;
    }

    .nav-link,
    .nav-action
    {
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }

    .intro-grid,
    .devices-grid
    {
        grid-template-columns: 1fr;
    }

    .quick-start-step
    {
        flex-direction: column;
    }

    .command-name
    {
        font-size: 1rem;
        word-break: break-word;
    }

    .device-badges
    {
        gap: 0.35rem;
    }

    .scroll-top-btn
    {
        width: 42px;
        height: 42px;
        bottom: 1rem;
        right: 1rem;
    }
}

/* Highlight animation for search */
@keyframes highlight-fade
{
    0%
    {
        background-color: rgba(200, 168, 75, 0.3);
    }
    100%
    {
        background-color: transparent;
    }
}

.command-item.highlight
{
    animation: highlight-fade 1.5s ease-out;
}

/* Loading state */
.loading-spinner
{
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-bg);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin
{
    to
    {
        transform: rotate(360deg);
    }
}

/* Print styles */
@media print
{
    .main-nav,
    .search-container,
    .scroll-top-btn,
    .sidebar,
    .expand-btn
    {
        display: none !important;
    }

    .command-details
    {
        display: block !important;
    }

    .card-outer
    {
        break-inside: avoid;
    }
}