/* ══════════════════════════════════════════════════════
   CISCO DASH — MediaWiki Skin CSS v11
   Dark theme · Cisco #00bceb accent · Themeable
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Theme tokens (overridden by JS / localStorage) ── */
:root {
    /* Customisable palette — edit these via the theme modal */
    --theme-bg-primary:     #0b0f1a;
    --theme-bg-secondary:   #111827;
    --theme-bg-tertiary:    #162032;
    --theme-bg-hover:       #1c2a40;
    --theme-border:         #1e2d42;
    --theme-border-2:       #263550;
    --theme-text-primary:   #c8d8ea;
    --theme-text-secondary: #6b82a0;
    --theme-text-muted:     #364860;
    --theme-accent:         #00bceb;
    --theme-accent-dim:     #009ec7;
    --theme-accent-pale:    rgba(0,188,235,0.13);
    --theme-header-start:   #006f8e;
    --theme-header-end:     #004f66;
    --theme-sidebar-bg:     #0f1623;
    --theme-sidebar-sep:    #1a2436;
    --theme-success:        #3dbd6b;
    --theme-danger:         #e05252;
    --theme-warning:        #e0a030;
    --theme-code-color:     #e8a878;

    /* Internal aliases — the rest of the file references these */
    --accent:        var(--theme-accent);
    --accent-dim:    var(--theme-accent-dim);
    --accent-pale:   var(--theme-accent-pale);
    --hdr-bg:        var(--theme-header-start);
    --hdr-bg-end:    var(--theme-header-end);
    --hdr-h:         52px;
    --hdr-sep:       rgba(255,255,255,0.12);
    --sb-bg:         var(--theme-sidebar-bg);
    --sb-w:          220px;
    --sb-sep:        var(--theme-sidebar-sep);
    --bg:            var(--theme-bg-primary);
    --bg-s:          var(--theme-bg-secondary);
    --bg-r:          var(--theme-bg-tertiary);
    --bg-h:          var(--theme-bg-hover);
    --bd:            var(--theme-border);
    --bd2:           var(--theme-border-2);
    --tx:            var(--theme-text-primary);
    --tx-dim:        var(--theme-text-secondary);
    --tx-muted:      var(--theme-text-muted);
    --c-green:       var(--theme-success);
    --c-red:         var(--theme-danger);
    --c-yellow:      var(--theme-warning);
    --r:             6px;
    --r-sm:          4px;
    --font:          'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono:          "JetBrains Mono","Fira Code","Cascadia Code",ui-monospace,monospace;
    --t:             0.15s ease;
}

/* ══════════════════════════════════════════════════════
   THEME SETTINGS MODAL
══════════════════════════════════════════════════════ */
.cd-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(3px);
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 24px 0;
}
.cd-modal-overlay.show {
    display: flex;
}
.cd-modal-box {
    background: var(--bg-s);
    border: 1px solid var(--bd2);
    border-radius: 12px;
    padding: 20px 22px 18px;
    width: min(520px, 94vw);
    box-shadow: 0 24px 64px rgba(0,0,0,0.7);
    flex-shrink: 0;
}
.cd-modal-box h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tx);
    margin: 0 0 4px;
    border: none !important;
    padding: 0 !important;
}
.cd-modal-box > label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tx-muted);
    display: block;
    margin-bottom: 0;
}

/* Preset swatches */
.cd-preset-row {
    display: flex;
    gap: 0.5rem;
    margin: 0.6rem 0 1rem;
    flex-wrap: wrap;
}
.cd-preset-swatch {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.16s ease, border-color 0.16s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.cd-preset-swatch:hover  { transform: scale(1.13); border-color: var(--accent); }
.cd-preset-swatch:active { transform: scale(0.95); }

/* Color groups */
.cd-color-group {
    margin: 0.8rem 0;
}
.cd-color-group h3 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin: 0 0 0.45rem;
    border: none !important;
    padding: 0 !important;
}
.cd-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.55rem;
    background: var(--bg-r);
    border-radius: 7px;
    margin-bottom: 0.3rem;
}
.cd-color-row label {
    font-size: 0.82rem;
    color: var(--tx-dim);
    flex: 1;
    margin: 0;
}
.cd-color-row input[type="color"] {
    width: 44px;
    height: 28px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
    background: none;
}

/* Modal actions */
.cd-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bd);
}
.cd-modal-actions button {
    padding: 7px 18px;
    border-radius: var(--r);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--t), color var(--t), border-color var(--t);
    font-family: var(--font);
}
.cd-modal-actions .cd-btn-reset {
    background: transparent;
    color: var(--tx-dim);
    border-color: var(--bd2);
}
.cd-modal-actions .cd-btn-reset:hover {
    background: var(--bg-h);
    color: var(--tx);
}
.cd-modal-actions .cd-btn-save {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.cd-modal-actions .cd-btn-save:hover {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Lock the page itself — only the inner panels scroll, not the viewport */
html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--bg);
    color: var(--tx);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ── Fancy text selection — updated dynamically by theme JS via injected <style> ── */
::selection      { background: #00bceb; color: #000; text-shadow: none; }
::-moz-selection { background: #00bceb; color: #000; text-shadow: none; }

/* ── Links ── */
a               { color: var(--accent); text-decoration: none; transition: color var(--t); }
a:hover         { color: var(--accent-dim); text-decoration: underline; }
a:visited       { color: #7bbccc; }
a.new           { color: #e87070; }
a.new:hover     { color: #f09090; }
a.stub          { color: #9da55c; }
a.extiw,
a.external      { color: #7dbde8; }

img { max-width: 100%; height: auto; }

/* MW legacy hooks */
#mw-page-base,
#mw-head-base { display: none; }

/* ══════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════ */
#cd-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Body row (sidebar + main) fills remaining space between header and footer ── */
#cd-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
#cd-header {
    position: sticky;
    top: 0;
    z-index: 500;
    height: var(--hdr-h);
    display: flex;
    align-items: stretch;
    background: linear-gradient(90deg, var(--hdr-bg), var(--hdr-bg-end));
    box-shadow: 0 2px 18px rgba(0,0,0,0.55);
    flex-shrink: 0;
}

/* ── Logo ── */
#cd-logo {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-right: 1px solid var(--hdr-sep);
    flex-shrink: 0;
}
#cd-logo a {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
#cd-logo a:hover { text-decoration: none; }
#cd-sitename {
    font-size: 0.96rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

/* ── Centre spacer — not used now (tabs are centre) ── */
#cd-header-spacer { flex: 1; }

/* ══════════════════════════════════════════════════════
   PAGE TABS  (centre of header)
   data-portlets.data-views  → Read, Edit / View source, History
   data-portlets.data-actions → Move, Delete, Protect, Watch …
   MW renders these as <ul><li id="ca-*" class="mw-list-item">
══════════════════════════════════════════════════════ */
#cd-page-tabs {
    display: flex;
    align-items: stretch;
    flex: 1;
    padding: 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0;
}
#cd-page-tabs::-webkit-scrollbar { display: none; }

/* Strip the MW-generated ul/li chrome */
#cd-page-tabs ul {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
#cd-page-tabs li,
#cd-page-tabs .mw-list-item {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

/* All tab links */
#cd-page-tabs li a,
#cd-page-tabs .mw-list-item a {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: 0.815rem;
    font-weight: 500;
    color: rgba(255,255,255,0.68);
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--t), background var(--t), border-color var(--t);
}
#cd-page-tabs li a:hover,
#cd-page-tabs .mw-list-item a:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
    text-decoration: none;
}

/* Active/selected tab */
#cd-page-tabs li.selected a,
#cd-page-tabs .mw-list-item.selected a,
#cd-page-tabs #ca-nstab-main.selected a,
#cd-page-tabs #ca-view.selected a {
    color: #fff;
    font-weight: 600;
    border-bottom-color: #fff;
    background: rgba(255,255,255,0.08);
}

/* Action tabs (second portlet) get a left separator */
#cd-page-tabs > ul + ul {
    border-left: 1px solid rgba(255,255,255,0.12);
    margin-left: 4px;
}
#cd-page-tabs > ul + ul li a,
#cd-page-tabs > ul + ul .mw-list-item a {
    color: rgba(255,255,255,0.50);
    font-size: 0.78rem;
}

/* ══════════════════════════════════════════════════════
   USER NAV  (right side of header)
   MW renders html-items as <ul><li id="pt-*" class="mw-list-item">…</li></ul>
══════════════════════════════════════════════════════ */
#cd-user-nav {
    display: flex;
    align-items: center;
    padding: 0 20px 0 14px;
    border-left: 1px solid var(--hdr-sep);
    flex-shrink: 0;
    height: 100%;
}

#cd-user-nav ul {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

#cd-user-nav li,
#cd-user-nav .mw-list-item {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

/* Default link — plain pill */
#cd-user-nav li a,
#cd-user-nav .mw-list-item a {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.80);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    transition: background var(--t), color var(--t);
}
#cd-user-nav li a:hover,
#cd-user-nav .mw-list-item a:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
    text-decoration: none;
}

/* "Not logged in" — muted text, no link */
#cd-user-nav #pt-anonuserpage {
    padding: 0 8px;
    color: rgba(255,255,255,0.35);
    font-size: 0.75rem;
    font-weight: 400;
    pointer-events: none;
    height: auto;
}
#cd-user-nav #pt-anonuserpage::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.15);
    margin-left: 10px;
    vertical-align: middle;
}

/* Create account — outlined button */
#cd-user-nav #pt-createaccount a {
    height: 30px;
    padding: 0 13px;
    border-radius: var(--r);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.30);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 2px;
}
#cd-user-nav #pt-createaccount a:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.50);
    text-decoration: none;
}

/* Log in — solid accent button */
#cd-user-nav #pt-login a {
    height: 30px;
    padding: 0 18px;
    border-radius: var(--r);
    background: var(--accent);
    color: #000 !important;
    font-weight: 700;
    font-size: 0.8rem;
    border: none;
}
#cd-user-nav #pt-login a:hover {
    background: var(--accent-dim);
    color: #000 !important;
    text-decoration: none;
}

/* Logged-in username */
#cd-user-nav #pt-userpage a { color: #fff; font-weight: 600; }

/* Log out */
#cd-user-nav #pt-logout a:hover { background: rgba(224,82,82,0.18); color: #f09090; }

/* ══════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════ */
#cd-sidebar {
    width: var(--sb-w);
    flex-shrink: 0;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-sep);
    overflow-y: auto;
    position: sticky;
    top: var(--hdr-h);
    height: calc(100vh - var(--hdr-h));
    scrollbar-width: thin;
    scrollbar-color: var(--bd) transparent;
    display: flex;
    flex-direction: column;
}

/* ── Search ── */
#cd-search-wrap {
    padding: 10px;
    border-bottom: 1px solid var(--sb-sep);
    flex-shrink: 0;
}
.cd-search-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-r);
    border: 1px solid var(--bd2);
    border-radius: var(--r);
    padding: 0 8px;
    transition: border-color var(--t), box-shadow var(--t);
}
.cd-search-inner:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-pale);
}
.cd-search-ico {
    width: 13px;
    height: 13px;
    color: var(--tx-muted);
    flex-shrink: 0;
}
.cd-search-inner input[type="search"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 7px 0;
    color: var(--tx);
    font-size: 0.83rem;
    font-family: var(--font);
    min-width: 0;
    -webkit-appearance: none;
}
.cd-search-inner input[type="search"]::-webkit-search-cancel-button { display: none; }
.cd-search-inner input::placeholder { color: var(--tx-muted); }
.cd-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tx-dim);
    display: flex;
    align-items: center;
    padding: 4px 0;
    transition: color var(--t);
    flex-shrink: 0;
}
.cd-search-btn:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════
   SIDEBAR PORTLETS
   (Navigation, Tools, etc.)
   MediaWiki renders html-items as:
     <ul>
       <li id="n-mainpage-description" class="mw-list-item"><a …>Main page</a></li>
       <li id="n-recentchanges"        class="mw-list-item"><a …>Recent changes</a></li>
       …
     </ul>
   and for Tools:
       <li id="t-whatlinkshere" class="mw-list-item"><a …>What links here</a></li>
   We target those native elements inside .cd-portlet-body.
══════════════════════════════════════════════════════ */
.cd-portlet {
    border-bottom: 1px solid var(--sb-sep);
}
.cd-portlet:last-child { border-bottom: none; }

.cd-portlet-heading {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tx-muted);
    padding: 10px 14px 4px;
    margin: 0;
    cursor: default;
    user-select: none;
    display: block;
}

/* Wrapper div around html-items output */
.cd-portlet-body {
    padding-bottom: 6px;
}

/* The <ul> MW outputs */
.cd-portlet-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Every <li> */
.cd-portlet-body li,
.cd-portlet-body .mw-list-item {
    display: block;
    margin: 0;
    padding: 0;
}

/* Links inside portlet items */
.cd-portlet-body li a,
.cd-portlet-body .mw-list-item a {
    display: block;
    padding: 5px 14px 5px 16px;
    font-size: 0.845rem;
    color: rgba(200,216,234,0.65);
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.cd-portlet-body li a:hover,
.cd-portlet-body .mw-list-item a:hover {
    background: var(--bg-h);
    color: var(--tx);
    border-left-color: var(--accent);
    text-decoration: none;
}

/* Active / current page item */
.cd-portlet-body .mw-list-item-selected > a,
.cd-portlet-body li.selected > a {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-pale);
}

/* ══════════════════════════════════════════════════════
   MAIN
══════════════════════════════════════════════════════ */
#cd-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
}

/* Content header — page title bar */
#cd-content-header {
    padding: 20px 32px 14px;
    background: var(--bg-s);
    border-bottom: 1px solid var(--bd);
    flex-shrink: 0;
}

#firstHeading,
.firstHeading {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.25;
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.cd-subtitle {
    margin-top: 4px;
    font-size: 0.84rem;
    color: var(--tx-dim);
}

/* Notices */
.cd-site-notice {
    margin: 10px 32px;
    padding: 9px 13px;
    background: var(--bg-r);
    border: 1px solid var(--bd2);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    font-size: 0.875rem;
    color: var(--tx-dim);
}
.cd-newtalk {
    margin: 10px 32px;
    padding: 9px 13px;
    background: rgba(224,160,48,0.08);
    border: 1px solid var(--c-yellow);
    border-radius: var(--r);
    font-size: 0.875rem;
    color: var(--c-yellow);
}

/* Indicators */
#mw-indicators {
    float: right;
    padding: 4px 32px 0 0;
    display: flex;
    gap: 6px;
}

/* ── Content panels wrapper — always flex, fills remaining height ── */
#cd-content-panels {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* TOC panel — hidden by default, shown on any page with a TOC via .has-page-toc (JS) */
#cd-toc-panel {
    display: none;
    flex-shrink: 0;
    width: clamp(300px, 25%, 420px);
    height: 100%;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--bd) transparent;
}

/* Article panel — always scrollable, fills remaining width */
#cd-article {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--bd2) transparent;
}

/* Body content */
#bodyContent,
.mw-body-content {
    padding: 22px 32px 52px;
    flex: 1;
    min-width: 0;
    color: var(--tx);
}

/* ══════════════════════════════════════════════════════
   LAST-MOD BAR  (#last-mod — replaces catlinks)
══════════════════════════════════════════════════════ */
.cd-last-mod {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    padding: 7px 12px;
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    font-size: 0.8rem;
    color: var(--tx-dim);
    line-height: 1.4;
}
.cd-last-mod svg { color: var(--tx-muted); flex-shrink: 0; }
.cd-last-mod strong { color: var(--tx); font-weight: 600; }
/* Hide entirely on main page or special pages */
.page-Main_Page .cd-last-mod,
body.action-history .cd-last-mod,
body.action-edit    .cd-last-mod { display: none !important; }

/* ══════════════════════════════════════════════════════
   ANY NON-MAIN PAGE WITH A TOC — two-panel Cisco layout
   JS adds  .has-page-toc  to <body> when it finds a TOC
   and moves it into #cd-toc-panel.
══════════════════════════════════════════════════════ */
.has-page-toc #cd-sidebar {
    display: none !important;
}

/* Left: TOC rail — show it, style it */
.has-page-toc #cd-toc-panel {
    display: block;
    background: var(--bg-s);
    border-right: 1px solid var(--bd);
    padding: 16px 0;
    width: clamp(220px, 22%, 340px);
}

/* Style the moved #toc inside the panel */
.has-page-toc #cd-toc-panel #toc,
.has-page-toc #cd-toc-panel .toc {
    background: transparent !important;
    border: none !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: block !important;
    min-width: 0 !important;
    box-shadow: none !important;
}
.has-page-toc #cd-toc-panel #toc h2,
.has-page-toc #cd-toc-panel .toc h2 {
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--tx-muted) !important;
    padding: 0 0 8px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid var(--sb-sep) !important;
    display: block !important;
}
.has-page-toc #cd-toc-panel #toc ul,
.has-page-toc #cd-toc-panel .toc ul { list-style: none; margin: 0; padding-left: 0; }
.has-page-toc #cd-toc-panel #toc li,
.has-page-toc #cd-toc-panel .toc li { font-size: 0.815rem; margin: 0; }
.has-page-toc #cd-toc-panel #toc a,
.has-page-toc #cd-toc-panel .toc a {
    display: block;
    padding: 4px 8px 4px 10px;
    color: var(--tx-dim);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.has-page-toc #cd-toc-panel #toc a:hover,
.has-page-toc #cd-toc-panel .toc a:hover,
.has-page-toc #cd-toc-panel #toc a.cd-toc-active,
.has-page-toc #cd-toc-panel .toc a.cd-toc-active {
    color: var(--accent);
    background: var(--accent-pale);
    border-left-color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.has-page-toc #cd-toc-panel .toclevel-2 { padding-left: 10px; }
.has-page-toc #cd-toc-panel .toclevel-3 { padding-left: 20px; }
.has-page-toc #cd-toc-panel .tocnumber  { color: var(--tx-muted); margin-right: 4px; font-size: 0.75em; }

/* Hide the inline TOC that MW renders inside the article
   (we moved it to the left panel) */
.has-page-toc #mw-content-text #toc,
.has-page-toc #mw-content-text .toc {
    display: none !important;
}

/* ══════════════════════════════════════════════════════
   WIKI TYPOGRAPHY
══════════════════════════════════════════════════════ */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6,
#bodyContent h1,
#bodyContent h2,
#bodyContent h3,
#bodyContent h4,
#bodyContent h5,
#bodyContent h6 {
    color: var(--tx);
    font-weight: 600;
    line-height: 1.3;
    margin: 1.45em 0 0.5em;
}
.mw-parser-output h2, #bodyContent h2 {
    font-size: 1.25rem;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--bd);
}
.mw-parser-output h3, #bodyContent h3 { font-size: 1.08rem; }
.mw-parser-output h4, #bodyContent h4 { font-size: 0.97rem; }
.mw-parser-output h5, #bodyContent h5 { font-size: 0.9rem;  color: var(--tx-dim); }
.mw-parser-output h6, #bodyContent h6 { font-size: 0.85rem; color: var(--tx-dim); }

/* ── mw-heading wrapper (MW 1.39+): keep heading + [edit] on one line, close together ── */
.mw-heading {
    display: block !important;
    margin: 1.45em 0 0.5em !important;
    line-height: 1.3 !important;
}
/* headings inside wrapper: render inline so [edit] flows immediately after */
.mw-heading h1,
.mw-heading h2,
.mw-heading h3,
.mw-heading h4,
.mw-heading h5,
.mw-heading h6 {
    display: inline !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
}
/* move h2 bottom-border to the wrapper */
.mw-heading.mw-heading2 {
    padding-bottom: 7px !important;
    border-bottom: 1px solid var(--bd) !important;
}
/* [edit] span sits inline immediately after heading text */
.mw-heading .mw-editsection {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
}

/* [edit] section links */
.mw-editsection {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px;
    font-size: 0.7rem !important;
    font-weight: 400;
    line-height: 1 !important;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0 !important;
    vertical-align: baseline;
}
.mw-editsection-bracket { color: var(--tx-muted) !important; font-size: 0.7rem !important; }
.mw-editsection a {
    color: var(--accent) !important;
    opacity: 0.5;
    font-size: 0.7rem !important;
    padding: 1px 5px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    transition: opacity var(--t), background var(--t), border-color var(--t);
    text-decoration: none !important;
}
.mw-editsection a:hover {
    opacity: 1 !important;
    background: var(--accent-pale);
    border-color: var(--accent);
}

/* Paragraphs */
.mw-parser-output p, #bodyContent p { margin: 0.6em 0; }
.mw-parser-output p:first-child, #bodyContent p:first-child { margin-top: 0; }

/* Lists */
.mw-parser-output ul, .mw-parser-output ol,
#bodyContent ul, #bodyContent ol { padding-left: 1.85em; margin: 0.45em 0; }
.mw-parser-output li, #bodyContent li { margin: 0.18em 0; }
.mw-parser-output dl, #bodyContent dl { margin: 0.5em 0; }
.mw-parser-output dt, #bodyContent dt { font-weight: 600; color: var(--tx); }
.mw-parser-output dd, #bodyContent dd { margin-left: 1.6em; color: var(--tx-dim); }

/* ── Tables ── */
.mw-parser-output table, #bodyContent table,
.wikitable, .mw-datatable {
    border-collapse: collapse;
    margin: 0.9em 0;
    font-size: 0.88rem;
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    overflow: hidden;
    max-width: 100%;
}
.mw-parser-output table th, #bodyContent table th,
.wikitable th, .mw-datatable th {
    background: var(--bg-r);
    color: var(--tx);
    font-weight: 600;
    text-align: left;
    padding: 8px 13px;
    border: 1px solid var(--bd);
    font-size: 0.83rem;
}
.mw-parser-output table td, #bodyContent table td,
.wikitable td, .mw-datatable td {
    padding: 7px 13px;
    border: 1px solid var(--bd);
    color: var(--tx-dim);
    vertical-align: top;
}
.mw-parser-output table tr:nth-child(even) td,
.wikitable tr:nth-child(even) td { background: var(--bg-r); }
.mw-parser-output table tr:hover td,
.wikitable tr:hover td { background: var(--bg-h); color: var(--tx); }
.wikitable caption {
    caption-side: top;
    font-weight: 600;
    color: var(--tx-dim);
    padding: 6px;
    font-size: 0.9rem;
}

/* ── Code ── */
.mw-parser-output code, #bodyContent code {
    font-family: var(--mono);
    font-size: 0.855em;
    background: var(--bg-r);
    border: 1px solid var(--bd2);
    border-radius: var(--r-sm);
    padding: 2px 6px;
    color: var(--theme-code-color);
}
.mw-parser-output pre, #bodyContent pre {
    font-family: var(--mono);
    font-size: 0.855em;
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 14px 18px;
    overflow-x: auto;
    line-height: 1.6;
    color: var(--theme-code-color);
    margin: 0.8em 0;
}
.mw-parser-output pre code, #bodyContent pre code {
    background: transparent; border: none; padding: 0; color: inherit; font-size: 1em;
}

/* ── Blockquote ── */
.mw-parser-output blockquote, #bodyContent blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.8em 0;
    padding: 10px 18px;
    color: var(--tx-dim);
    background: var(--bg-s);
    border-radius: 0 var(--r) var(--r) 0;
}

.mw-parser-output hr, #bodyContent hr {
    border: none;
    border-top: 1px solid var(--bd);
    margin: 1.4em 0;
}

/* ── TOC ── */
#toc, .toc {
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 12px 16px;
    display: inline-block;
    min-width: max(300px, 25%);
    margin: 0 1.2em 1em 0;
    float: left;
}
#toc h2, .toc h2 {
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0 0 7px;
    border: none !important;
    padding: 0 !important;
    color: var(--tx);
    display: block !important;
}
#toc ul, .toc ul   { margin: 0; padding-left: 1em; list-style: none; }
#toc li, .toc li   { font-size: 0.82rem; margin: 3px 0; }
#toc a, .toc a     { color: var(--tx-dim); }
#toc a:hover, .toc a:hover { color: var(--accent); text-decoration: none; }
.toclevel-1 > a    { font-weight: 500; }
.toclevel-2        { padding-left: 0.8em; }

/* ── Images / thumbs ── */
.mw-parser-output .thumb {
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 5px;
    display: inline-block;
}
.mw-parser-output .thumbinner { background: transparent; text-align: center; }
.mw-parser-output .thumbcaption {
    font-size: 0.79rem; color: var(--tx-dim); margin-top: 4px; text-align: center;
}

/* ── Hatnotes ── */
.mw-parser-output .hatnote, .mw-parser-output .dablink {
    font-style: italic;
    color: var(--tx-dim);
    border-left: 3px solid var(--bd2);
    padding: 4px 12px;
    margin: 0.5em 0;
    font-size: 0.89rem;
    background: var(--bg-s);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── Infoboxes ── */
.mw-parser-output .infobox {
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    float: right;
    margin: 0 0 1em 1.5em;
    overflow: hidden;
    font-size: 0.88rem;
}
.mw-parser-output .infobox th {
    background: var(--bg-r);
    color: var(--tx);
    padding: 6px 10px;
}
.mw-parser-output .infobox td {
    padding: 5px 10px;
    color: var(--tx-dim);
    border-top: 1px solid var(--bd);
}

/* ── References ── */
.mw-parser-output .references, .mw-parser-output .reflist {
    font-size: 0.855rem; color: var(--tx-dim);
}
.mw-parser-output sup.reference a { color: var(--accent); font-size: 0.8em; }

/* ── Categories & Page-Info bar ── */
#catlinks, .catlinks {
    margin-top: 28px;
    padding: 9px 13px;
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    font-size: 0.84rem;
    color: var(--tx-dim);
    clear: both;
}
/* Show "Uncategorized" when MW outputs nothing into catlinks */
#catlinks:empty::before {
    content: '📁 Uncategorized';
    color: var(--tx-muted);
    font-style: italic;
}
.catlinks ul { display: inline; list-style: none; padding: 0; }
.catlinks li { display: inline; }
.catlinks li::after { content: " · "; color: var(--tx-muted); }
.catlinks li:last-child::after { content: ""; }
.catlinks a  { color: var(--accent); }
.catlinks strong { color: var(--tx-dim); font-weight: 500; }

/* Page-info bar shown below catlinks (last-edited + history link) */
#cd-page-info-bar {
    margin-top: 8px;
    padding: 7px 13px;
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    font-size: 0.80rem;
    color: var(--tx-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    clear: both;
    min-height: 2em;   /* always takes space so it's visible even while JS loads */
}
#cd-page-info-bar:empty::before {
    content: 'Loading page info…';
    color: var(--tx-muted);
    font-style: italic;
    font-size: 0.78rem;
}
#cd-page-info-bar a { color: var(--accent); }
#cd-page-info-bar a:hover { color: var(--accent-dim); text-decoration: none; }
#cd-page-info-bar strong { color: var(--tx-dim); font-weight: 600; }
#cd-page-info-bar .cd-info-sep { color: var(--tx-muted); opacity: 0.5; }

/* ══════════════════════════════════════════════════════
   SPECIAL PAGES
══════════════════════════════════════════════════════ */
.mw-changeslist { list-style: none; padding: 0; }
.mw-changeslist li, .mw-changeslist-line {
    border-bottom: 1px solid var(--bd);
    padding: 5px 0;
    color: var(--tx-dim);
    font-size: 0.875rem;
}
.mw-changeslist li:hover { background: var(--bg-h); }
.mw-plusminus-pos { color: var(--c-green); }
.mw-plusminus-neg { color: var(--c-red); }

.mw-search-results { list-style: none; padding: 0; }
.mw-search-result  { padding: 12px 0; border-bottom: 1px solid var(--bd); }
.mw-search-result-heading { font-size: 1rem; font-weight: 600; margin-bottom: 3px; }
.mw-search-result-heading a { color: var(--accent); }
.searchresult { color: var(--tx-dim); font-size: 0.875rem; line-height: 1.5; }
.searchmatch  { background: rgba(0,188,235,0.2); color: var(--tx); border-radius: 2px; padding: 0 2px; }

/* Diffs */
table.diff      { background: var(--bg); width: 100%; border: none; font-size: 0.84rem; }
.diff td        { border-color: var(--bd); font-family: var(--mono); vertical-align: top; padding: 3px 8px; }
.diff-context   { background: var(--bg-s); color: var(--tx-muted); }
.diff-addedline { background: rgba(61,189,107,0.08); color: #5dd08a; }
.diff-deletedline { background: rgba(224,82,82,0.08); color: #e08080; }
.diffchange     { background: rgba(0,188,235,0.2); border-radius: 2px; }
.diff-lineno    { color: var(--tx-muted); font-size: 0.75rem; text-align: right; }

/* History */
#pagehistory { list-style: none; padding: 0; }
#pagehistory li {
    border-bottom: 1px solid var(--bd);
    padding: 5px 0;
    color: var(--tx-dim);
    font-size: 0.875rem;
}
#pagehistory li:hover { background: var(--bg-h); }

fieldset {
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 12px 16px;
    margin: 0.8em 0;
    background: var(--bg-s);
}
legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tx-dim);
    padding: 0 6px;
}

/* ══════════════════════════════════════════════════════
   FORMS & INPUTS
══════════════════════════════════════════════════════ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
select,
textarea {
    background: var(--bg-s);
    color: var(--tx);
    border: 1px solid var(--bd2);
    border-radius: var(--r);
    padding: 6px 10px;
    font-size: 0.875rem;
    font-family: var(--font);
    transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-pale);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

input[type="submit"], input[type="button"],
.mw-ui-button, .oo-ui-buttonElement-button {
    background: var(--accent) !important;
    color: #000 !important;
    border: none !important;
    border-radius: var(--r) !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
    font-size: 0.845rem !important;
    cursor: pointer !important;
    font-family: var(--font) !important;
    transition: background var(--t) !important;
}
input[type="submit"]:hover, input[type="button"]:hover,
.mw-ui-button:hover, .oo-ui-buttonElement-button:hover { background: var(--accent-dim) !important; }

textarea#wpTextbox1, .mw-editfont-default {
    background: var(--bg-s) !important;
    color: var(--tx) !important;
    border: 1px solid var(--bd2) !important;
    border-radius: var(--r) !important;
    font-family: var(--mono) !important;
    font-size: 0.88rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    line-height: 1.65 !important;
    min-height: 400px;
}
.editOptions, #editpage-specialchars {
    background: var(--bg-s);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 10px 14px;
    margin-top: 8px;
    color: var(--tx-dim);
    font-size: 0.855rem;
}
#toolbar, .wikiEditor-ui-toolbar {
    background: var(--bg-r) !important;
    border-color: var(--bd) !important;
}
.oo-ui-fieldLayout, .oo-ui-panelLayout { color: var(--tx) !important; }
.oo-ui-inputWidget-input,
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget textarea {
    background: var(--bg-s) !important;
    color: var(--tx) !important;
    border-color: var(--bd2) !important;
}

/* ══════════════════════════════════════════════════════
   HIDE PARSER DETAILS ON PREVIEW
══════════════════════════════════════════════════════ */
.limitreport, #mw-limitreport, .mw-limitreport,
#mw-parser-output-section, .mw-previewdata .limitreport {
    display: none !important;
}

/* ══════════════════════════════════════════════════════
   NOTIFICATION BOXES
══════════════════════════════════════════════════════ */
.successbox, .mw-notify-success {
    background: rgba(61,189,107,0.08); border: 1px solid var(--c-green);
    color: #5dd08a; border-radius: var(--r); padding: 9px 13px; margin: 8px 0;
}
.errorbox, .mw-notify-error, .error {
    background: rgba(224,82,82,0.08); border: 1px solid var(--c-red);
    color: var(--c-red); border-radius: var(--r); padding: 9px 13px; margin: 8px 0;
}
.warningbox, .mw-notify-warn {
    background: rgba(224,160,48,0.08); border: 1px solid var(--c-yellow);
    color: var(--c-yellow); border-radius: var(--r); padding: 9px 13px; margin: 8px 0;
}

/* ── Hide "Retrieved from …" (printfooter) on all pages ── */
.printfooter,
#mw-data-after-content .printfooter,
#cd-article .printfooter {
    display: none !important;
}

/* ══════════════════════════════════════════════════════
   FOOTER — compact single-line strip (≈ 30px total height)
══════════════════════════════════════════════════════ */
#cd-footer {
    background: var(--sb-bg);
    border-top: 1px solid var(--sb-sep);
    height: 30px;
    min-height: 30px;
    padding: 0 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
#cd-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;
}
#cd-footer-info {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
}
#cd-footer-places {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
}
.cd-footer-item {
    font-size: 0.72rem;
    color: var(--tx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-footer-item a { color: var(--tx-muted); }
.cd-footer-item a:hover { color: var(--accent); text-decoration: none; }
#cd-footer-icons { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
#cd-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.cd-footer-sep { font-size: 0.72rem; }
.cd-footer-icon img { opacity: 0.35; height: 16px; width: auto; transition: opacity var(--t); }
.cd-footer-icon:hover img { opacity: 0.65; }

/* Compact footer last-mod — populated by JS */
#cd-footer-lastmod { display: none !important; }

/* ══════════════════════════════════════════════════════
   SCROLLBARS
══════════════════════════════════════════════════════ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--bd2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--tx-muted); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    #cd-sidebar { display: none; }
    #bodyContent, .mw-body-content { padding: 16px; }
    #cd-content-header { padding: 14px 16px 10px; }
    .cd-site-notice, .cd-newtalk { margin-left: 16px; margin-right: 16px; }
}
@media (max-width: 640px) {
    #cd-sitename { display: none; }
    #cd-user-nav { padding: 0 6px; }
    #cd-user-nav li a,
    #cd-user-nav .mw-list-item a { padding: 3px 6px; font-size: 0.72rem; }
    #bodyContent { padding: 12px; }
    #cd-content-header { padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════ */
@media print {
    #cd-header, #cd-sidebar, #cd-footer { display: none !important; }
    #cd-main { width: 100% !important; }
    body { background: white !important; color: black !important; }
    a { color: #003366; }
    .mw-parser-output table { border: 1px solid #ccc; }
    .mw-parser-output td, .mw-parser-output th { border: 1px solid #ccc; }
}