:root { --bg: #f4f5f7; --card: #fff; --text: #1a1a2e; --link: #2d5a9e; --link-visited: #6b4c9a; --border: #d0d5dd; --accent: #eef0f5; --head: 'Linux Libertine','Georgia','Times',serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
body { font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; font-size: 0.9375em; -webkit-font-smoothing: antialiased; }
#mw-wrapper { max-width: 1160px; margin: 0 auto; display: flex; }
#mw-sidebar { width: 246px; padding: 24px 16px; background: var(--card); border-right: 1px solid var(--border); flex-shrink: 0; font-size: 0.75em; height: 100vh; position: sticky; top: 0; overflow-y: auto; scrollbar-width: none; }
#mw-sidebar h3 { font-size: 0.85em; color: #666; margin: 20px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
#mw-sidebar a { display: block; color: var(--link); text-decoration: none; padding: 3px 0; line-height: 1.3; }
#mw-sidebar a:hover { text-decoration: underline; }
#mw-sidebar .room-label { font-weight: 600; color: var(--text); margin-top: 20px; font-size: 0.85em; }
#mw-home-link { font-weight: 600; margin-bottom: 10px; display: block; color: var(--link); text-decoration: none; }
#mw-content { flex: 1; padding: 32px 36px; background: var(--card); min-height: 100vh; display: flex; flex-direction: row; align-items: flex-start; gap: 24px; }
#mw-content h1.first-heading { font-family: var(--head); font-size: 1.9em; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 0; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
#bodyContent { margin-top: 8px; flex: 1; min-width: 0; }

/* Sidebar graph */
.sidebar-graph { margin: 6px 0 14px; padding: 8px; background: #f4f5f7; border-radius: 6px; text-align: center; }
.sidebar-graph svg { display: block; margin: 0 auto; cursor: grab; }
.sidebar-graph svg:active { cursor: grabbing; }
.sidebar-graph-hint { font-size: 0.6em; color: #aaa; margin-top: 3px; }

/* Index page global graph */
#index-graph { float: right; width: 360px; margin: 4px 0 16px 24px; position: sticky; top: 20px; z-index: 100; }
#index-graph svg { display: block; width: 100%; background: #fafbfc; border: 1px solid var(--border); border-radius: 6px; cursor: grab; }
#index-graph svg:active { cursor: grabbing; }
.index-graph-title { font-size: 0.75em; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.index-graph-hint { font-size: 0.65em; color: #999; margin-top: 4px; text-align: center; }

/* Hide scrollbars globally */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

.infobox { float: right; clear: right; width: 240px; background: #fafbfc; border: 1px solid var(--border); border-radius: 6px; padding: 0; margin: 4px 0 16px 20px; font-size: 0.85em; border-collapse: collapse; overflow: hidden; }
.infobox th.caption { background: var(--accent); text-align: center; font-size: 1.1em; padding: 10px 8px; font-weight: 600; }
.infobox th.label { background: transparent; text-align: left; padding: 6px 8px; font-weight: 500; width: 35%; vertical-align: top; color: #555; }
.infobox td.data { padding: 6px 8px; vertical-align: top; }
#toc { background: #fafbfc; border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px 10px; width: 260px; position: sticky; top: 30px; z-index: 100; max-height: calc(100vh - 40px); overflow-y: auto; flex-shrink: 0; }
#toc h2 { font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: #888; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 6px; }
#toc ul { list-style: none; padding: 0; margin: 0; }
#toc li { margin: 3px 0; padding: 0; font-size: 0.85em; }
#toc li.toclevel-2 { margin-left: 0; font-weight: 500; }
#toc li.toclevel-3 { margin-left: 14px; font-size: 0.8em; }
#toc a { color: var(--link); text-decoration: none; display: block; padding: 2px 0; }
#toc a:hover { text-decoration: underline; }
@media (max-width: 720px) { #toc { float: none; width: 100%; position: static; margin: 16px 0; } }

/* Graph container */
#graph-container { float: right; clear: right; width: 260px; height: 260px; margin: 0 0 12px 20px; background: #fafbfc; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; position: relative; }
#graph-container svg { display: block; }
#graph-container .hint { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 0.6em; color: #999; pointer-events: none; white-space: nowrap; }
/* Graph mini (in sidebar) */
.graph-mini { margin-top: 20px; padding: 8px; background: #f4f5f7; border-radius: 6px; text-align: center; }
.graph-mini-title { font-size: 0.72em; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.graph-mini svg { display: block; margin: 0 auto; cursor: grab; }
.graph-mini svg:active { cursor: grabbing; }
.graph-mini-hint { font-size: 0.6em; color: #aaa; margin-top: 2px; }

.mw-heading2 { margin: 28px 0 8px; }
.mw-heading2 h2 { font-family: var(--head); font-size: 1.4em; border-bottom: 1px solid var(--border); padding-bottom: 4px; font-weight: 500; line-height: 1.3; display: inline; }
.mw-heading3 { margin: 18px 0 6px; }
.mw-heading3 h3 { font-size: 1.1em; font-weight: 600; display: inline; }
p { margin: 8px 0; line-height: 1.7; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--link-visited); }
pre { background: #f4f5f7; border: 1px solid var(--border); border-radius: 4px; padding: 14px; overflow-x: auto; font-size: 0.85em; line-height: 1.5; font-family: 'JetBrains Mono','Fira Code',monospace; }
code { background: #f4f5f7; padding: 2px 5px; border-radius: 3px; font-size: 0.85em; font-family: 'JetBrains Mono','Fira Code',monospace; }
table { border-collapse: collapse; margin: 12px 0; width: 100%; }
th, td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
th { background: var(--accent); font-weight: 500; }
tr:nth-child(even) { background: #fafbfc; }
li { margin: 4px 0 4px 28px; line-height: 1.6; }
ul { list-style-type: disc; }
hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.see-also { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.see-also li { display: inline-block; margin: 2px 8px 2px 0; }
.see-also a { display: inline-block; padding: 3px 10px; background: var(--accent); border-radius: 4px; font-size: 0.85em; }
.see-also a:hover { background: #d5dce8; }
.navbox { background: #fafbfc; border: 1px solid var(--border); border-radius: 6px; margin-top: 20px; width: 100%; }
.navbox th { background: var(--accent); padding: 8px; font-size: 0.85em; border-radius: 6px 6px 0 0; }
.navbox td { padding: 10px; font-size: 0.85em; }
#mw-categories { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.8em; color: #666; }
#mw-footer { font-size: 0.75em; color: #888; border-top: 1px solid var(--border); margin-top: 28px; padding-top: 12px; }
#bodyContent { }

@media (max-width: 720px) { #mw-sidebar { display: none; } .infobox,.graph-container { float: none; width: 100%; margin: 12px 0; } }

/* Mobile responsive */
@media (max-width: 768px) {
  #mw-content { flex-direction: column; }
  
  #mw-wrapper { flex-direction: column; }
  #mw-sidebar { display: none; }
  #mw-content { padding: 16px; min-height: auto; }
  #mw-content h1.first-heading { font-size: 1.4em; }
  #bodyContent { margin-top: 4px; }
  .infobox { float: none; width: 100%; margin: 12px 0; }
  #toc { width: 100%; position: static; margin: 12px 0; max-height: none; }
  #index-graph { float: none; width: 100%; margin: 12px 0; position: static; }
  #index-graph svg { height: 280px; }
  .sidebar-graph { margin: 6px 0; }
  .sidebar-graph svg { width: 100%; height: 200px; }
  .sidebar-graph-hint { font-size: 0.55em; }
  p { font-size: 0.95em; }
  .mw-heading2 h2 { font-size: 1.2em; }
  .mw-heading3 h3 { font-size: 1.05em; }
  #mw-footer { font-size: 0.65em; }
  table { font-size: 0.85em; }
  pre { font-size: 0.8em; }
  li { margin-left: 20px; }
   /* disable TOC zone on mobile */
  .index-graph-title { font-size: 0.7em; }
  .index-graph-hint { font-size: 0.6em; }
  .see-also li a { font-size: 0.8em; padding: 2px 8px; }
  .navbox td { font-size: 0.8em; padding: 8px; }
  #mw-categories { font-size: 0.75em; }
}

/* Mobile menu toggle — show a hamburger on small screens */
@media (max-width: 768px) {
  #mw-content { flex-direction: column; }
  
  .mobile-menu-btn { display: block; }
}
@media (min-width: 769px) {
  .mobile-menu-btn { display: none; }
}

/* Mobile + overlay (from index) */
#mw-sidebar.open { left: 0; box-shadow: 2px 0 12px rgba(0,0,0,0.15); }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 999; }
.sidebar-overlay.open { display: block; }
.toc-dots { display: none; }
.toc-dots { display: flex; flex-direction: column; position: fixed; right: 4px; top: 50%; transform: translateY(-50%); z-index: 100; gap: 5px; padding: 8px 2px; }
.toc-dot { width: 7px; height: 7px; border-radius: 50%; background: #d0d5dd; border: none; padding: 0; cursor: pointer; transition: all 0.2s; min-width: 7px; min-height: 7px; }
.toc-dot.active { background: #2d5a9e; transform: scale(1.5); }
.toc-dot:hover { background: #2d5a9e; }
}
.mobile-header { display: none; }
.mobile-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--card); border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; right: 0; z-index: 998; }
.mobile-title { font-size: 0.82em; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
}


/* Tables — global */
table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 0.875em; }
table th, table td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }
table th { background: var(--accent); font-weight: 600; }
table tr.separator td { border: none; height: 0; padding: 0; }
table tr.separator td hr { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ── Font optimization (overrides Google Fonts default font-display) ── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: optional; src: local('Inter'), url('https://fonts.gstatic.com/s/inter/v13/') format('woff2'); }

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1a2e; --card: #222244; --text: #e0e0f0; --link: #7b9ee7; --link-visited: #b08fd8; --border: #333366; --accent: #2a2a4a; }
}
html.dark-mode {
  --bg: #1a1a2e; --card: #222244; --text: #e0e0f0; --link: #7b9ee7; --link-visited: #b08fd8; --border: #333366; --accent: #2a2a4a;
}

/* ── Mobile floating bar ── */
.sidebar-checkbox { display: none; }
.sidebar-overlay { display: none; }
#mobile-bar { display: none; }

@media (max-width: 768px) {
  /* Floating bottom bar */
  #mobile-bar {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: var(--card);
    border-top: 1px solid var(--border);
    z-index: 1001;
    padding: 0 8px;
    transition: transform 0.25s ease;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    gap: 4px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #mobile-bar.scrolled-down {
    transform: translateY(100%);
  }

  /* Menu zone (left third — thin visual cue) */
  .mobile-menu-zone {
    flex: 0 0 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .mobile-menu-zone::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    box-shadow: 0 -6px 0 var(--text), 0 6px 0 var(--text);
  }

  /* Title (middle — also tap target for sidebar) */
  .mobile-bar-title {
    flex: 1;
    font-size: 0.82em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: var(--text);
    pointer-events: none;
  }
  .mobile-title-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Search zone (right third) */
  .mobile-search-zone {
    flex: 0 0 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  #mobile-search-input {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 0.82em;
    color: var(--text);
    outline: none;
    transition: width 0.2s ease, background 0.2s ease;
    border-radius: 18px;
    cursor: pointer;
    padding: 0 0 0 36px;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 20px;
  }
  #mobile-search-input:focus {
    width: 200px;
    background-color: var(--accent);
    cursor: text;
  }

  /* Search results popover */
  .mobile-search-results {
    display: none;
    position: fixed;
    bottom: 56px;
    right: 8px;
    width: 240px;
    max-height: 50vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1002;
    padding: 4px 0;
  }
  .mobile-search-results.has-results { display: block; }
  .mobile-search-results a {
    display: block;
    padding: 10px 14px;
    font-size: 0.82em;
    color: var(--link);
    text-decoration: none;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .mobile-search-results a:active { background: var(--accent); }

  /* Sidebar becomes an overlay */
  #mw-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100vh;
    z-index: 1005;
    transition: left 0.25s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    display: block !important;
    padding-bottom: 60px; /* room for floating bar */
  }
  .sidebar-open #mw-sidebar {
    left: 0 !important;
  }
  .sidebar-open .sidebar-overlay {
    display: block;
  }

  /* Overlay behind sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1004;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Graph placeholder on mobile */
  .graph-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    background: var(--accent);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82em;
    color: #888;
  }

  /* Tap target sizing */
  #mw-sidebar a { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }

  /* Content bottom padding for floating bar */
  #mw-content { padding-bottom: 64px; }
  #mw-wrapper { padding-bottom: 64px; }
}

/* ── Atomic notes */
span.atomic, b.atomic { color: #1a0dab !important; cursor: pointer; }
span.atomic, b.atomic { color: #1a0dab !important; cursor: pointer; }
b.atomic { font-weight: 600 !important; }
span.atomic { text-decoration: underline !important; text-underline-offset: 2px; }
b.atomic { color: #1a0dab !important; text-decoration: underline !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 3px; }
span.atomic:hover, b.atomic:hover { color: #3b28cc !important; }

/* TOC atomic panel */
.toc-atomic { font-size: 0.85em; padding: 8px; }
.toc-atomic .atomic-header { font-weight: 600; font-size: 1.1em; margin-bottom: 8px; color: var(--text); }
.toc-atomic .atomic-def { font-size: 0.9em; line-height: 1.6; margin-bottom: 10px; color: #444; }
.toc-atomic .atomic-page-link { margin: 8px 0; }
.toc-atomic .atomic-links { margin: 8px 0; font-size: 0.85em; }
.toc-atomic .atomic-links a { color: var(--link, #1a0dab); text-decoration: underline; cursor: pointer; }
.toc-atomic .atomic-back { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border, #e0e0e0); }
.toc-atomic .atomic-back a { color: #666; text-decoration: none; font-size: 0.85em; }
.toc-atomic .atomic-back a:hover { text-decoration: underline; }