/* =========================================================
 *   ORG BOOK THEME — LIGHT / DARK
 *   ---------------------------------------------------------
 *
 *     1.  Font Imports
 *     2.  Theme Variables (root / dark mode)
 *     3.  Base / Reset
 *     4.  Typography Defaults (fonts)
 *     5.  Layout (#content, header)
 *     6.  Navigation / Breadcrumb
 *     7.  Headings & Numbering
 *     8.  Admonitions / Callouts
 *     9.  Blockquotes
 *     10. Table of Contents
 *     11. Links
 *     12. Code Blocks (inline + pre)
 *     13. Margin Notes
 *     14. Lists & Description Lists
 *     15. Tables
 *     16. Footer
 *     17. Images
 *     18. Responsive / Mobile Overrides
 *     19. Header Controls & Icon Buttons
 *     20. Drawer Background & Heading Fixes
 *     21. Left Sidebar — Search Drawer
 *     22. Syntax Highlighting (Emacs htmlize classes)
 *     23. Project Card
 *     24. Dashboard UI
 *     25. Drawer Overrides (fixed positioning)
 *     26. Agenda (Right Drawer)
 *   ========================================================= */


/* =========================================================
   1. FONT IMPORTS
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&family=IBM+Plex+Sans:wght@400;500&family=JetBrains+Mono:wght@400&display=swap');


/* =========================================================
   2. THEME VARIABLES (root / dark mode)
   ========================================================= */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #888888;
  --accent: #303f9f;
  --code-bg: #fbfbfb;
  --code-fg: #00008b;
  --table-alt: #f9f9f9;
  --syntax-keyword: #4c566a; /* Muted Slate */
  --syntax-string:  #607252; /* Dim Olive */
  --syntax-comment: #b5bcc9; /* Faded Gray-Blue */
  --syntax-number:  #8b5b56; /* Muted Brick Red */
  --syntax-var:     #5e6a7c; /* Slate Blue */
  --syntax-func:    #405a7e; /* Deeper Indigo */
  --tag-bg: #e2e8f0; /* Soft gray for Light Mode */
  --code-border: #c5ccd9;
  --callout-note: #c3cad3;    /* Faded dusty blue */
  --callout-tip: #c0ccc7;     /* Faded dusty sage */
  --callout-warning: #d4c4c0; /* Faded dusty clay */
  --callout-title-text: #2c3138;
  --drawer-bg: #f5f5f5; /* Solid light mode background */
}

body.dark {
  --bg: #182533;      /* Main Background */
  --bg-alt: #22262b;  /* Section Background */
  --fg: #ACBAC4;      /* Primary Text */
  --muted: #526D82;
  --accent: #76ABAE;
  --code-bg: #151820;
  --code-fg: #cdd6f4;
  --table-alt: #161a22;
  --syntax-keyword: #81a1c1; /* Soft Blue */
  --syntax-string:  #a3be8c; /* Soft Green */
  --syntax-comment: #616e88; /* Dim Gray */
  --syntax-number:  #d08770; /* Soft Orange */
  --syntax-var:     #88c0d0; /* Soft Teal */
  --syntax-func:    #8fbcbb; /* Minty Teal */
  --tag-bg: #2a2e33; /* Dark slate for Dark Mode */
  --code-border: #2a313c;
  --callout-note: #36404f;    /* Deep slate blue */
  --callout-tip: #334240;     /* Deep slate teal */
  --callout-warning: #4a3835; /* Deep slate rust */
  --callout-title-text: #e0e5eb;
  --drawer-bg: var(--bg-alt); /* Solid dark mode background */
}


/* =========================================================
   3. BASE / RESET
   ========================================================= */
html {
  font-size: 17px;
}

/* --- THE BODY (Your Notes Content) --- */
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background-color: var(--bg);
  color: var(--fg);
  counter-reset: chapter section subsection;
}


/* =========================================================
   4. TYPOGRAPHY DEFAULTS (fonts)
   ========================================================= */
/* --- THE HEADERS (Plus Jakarta Sans) --- */
h1, h2, h3, h4, .sidebar-header h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- THE CODE --- */
code, pre, .org-tag {
  font-family: 'JetBrains Mono', monospace;
}


/* =========================================================
   5. LAYOUT (#content, header)
   ========================================================= */
#content {
  max-width: 750px;
  margin: 4rem auto;
  padding-left: 4em;
  padding-right: 2em;
}

/* Target the list specifically on the home/sitemap page */
#content > ul {
  list-style: none !important;
  padding-left: 0;
  margin-top: 2rem;
}

#content > ul > li {
  margin-bottom: 0.5rem;
  border-radius: 6px;
  background: var(--bg);
}

/* Subtle label for the automated list */
#content > h1.title + ul::before {
  content: "LATEST NOTES";
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

#content p {
  position: relative;
}

#content, main {
  /* Adjust this percentage/pixel value down until it looks right to you */
}

header {
  max-width: 750px;
  margin: 2rem auto 0 auto;
  padding-left: 5em;
  padding-right: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* =========================================================
   6. NAVIGATION / BREADCRUMB
   ========================================================= */
.breadcrumb {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.breadcrumb a {
  color: var(--muted);
}

.breadcrumb-current {
  color: var(--fg);
}

.breadcrumb-sep {
  margin: 0 0.3em;
  color: var(--muted);
}

.site-title {
  font-variant: small-caps;
  font-weight: 400;
  color: var(--muted);
}

/* ---------- Dark mode button ---------- */
.theme-toggle {
  cursor: pointer;
  background: none;
  border: 1px solid var(--bg);
  outline: none;
  color: var(--muted);
  font-size: 0.8em;
  padding: 0.25em 0.5em;
  text-transform: uppercase;
}


/* =========================================================
   7. HEADINGS & NUMBERING
   ========================================================= */
h1.title {
  text-align: left;
  font-size: 1.8rem;
}

h2 {
  font-size: 1.3rem;
  position: relative;
  counter-reset: section subsection;
  margin-top: 3rem;
}

h3 {
  font-size: 1.05rem;
  position: relative;
}

h4 {
  font-size: 0.95rem;
  position: relative;
}

h1.title,
h2,
h3,
h4 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ---------- Chapter headings (ONLY h2 numbered) ---------- */
h2::before {
  counter-increment: chapter;
  content: counter(chapter);
  position: absolute;
  left: -7em;
  width: 6.5em;
  text-align: right;
  font-weight: 400;
  color: var(--muted);
  text-transform: uppercase;
}

h3::before {
  counter-increment: section;
  content: counter(chapter) "." counter(section);
  position: absolute;
  left: -5.55em;
  width: 5em;
  text-align: right;
  font-weight: 400;
  color: var(--muted);
}

h4::before {
  counter-increment: subsection;
  content: counter(chapter) "." counter(section) "." counter(subsection);
  position: absolute;
  left: -5em;
  width: 4.5em;
  text-align: right;
  font-weight: 400;
  color: var(--muted);
}

h5 {
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

h5::before {
  content: none;
}


/* =========================================================
   8. ADMONITIONS / CALLOUTS
   ========================================================= */
.tip, .org-tip,
.note, .org-note,
.warning, .org-warning {
  padding: 1rem 1rem;
  margin-top: 1px;
  margin: 1rem 0;
  background: var(--bg-alt);
  border: solid 1px;
  line-height: 1.6;
}

/* Remove default margin from paragraphs inside the box */
.tip p, .org-tip p,
.note p, .org-note p,
.warning p, .org-warning p {
  margin: 0;
}

.tip b:first-child, .tip strong:first-child { background: var(--callout-tip); }
.note b:first-child, .note strong:first-child { background: var(--callout-note); }
.warning b:first-child, .warning strong:first-child { background: var(--callout-warning); }

/* Adjusted Header Block for Callouts */
.tip b:first-child, .tip strong:first-child,
.note b:first-child, .note strong:first-child,
.warning b:first-child, .warning strong:first-child {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: -1rem -1rem 1rem -1rem;
  padding: 0.2rem 0.2rem .1rem 0.5rem;
  color: var(--callout-title-text);
  border-bottom: solid 1px inherit;
}


/* =========================================================
   9. BLOCKQUOTES
   ========================================================= */
blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 1.2rem 1.5rem;
  background: var(--bg-alt);
  border-left: 4px solid var(--muted);
  color: var(--fg);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 0 4px 4px 0; /* Slightly softens the right edge */
  overflow: hidden; /* Keeps the giant watermark contained */
}

/* Removes extra spacing from the paragraph inside the quote */
blockquote p {
  margin: 0;
  position: relative;
  z-index: 2; /* Ensures text stays above the watermark */
}

/* The subtle watermark quotation mark */
blockquote::before {
  content: "\201C";
  font-family: serif;
  position: absolute;
  top: -15px;
  left: 0px;
  font-size: 6rem;
  color: var(--muted);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

/* Optional: If you use a dash for the author, fade it slightly */
blockquote p::after {
  display: block;
  content: "";
  margin-bottom: 0.5rem;
}


/* =========================================================
   10. TABLE OF CONTENTS
   ========================================================= */
#table-of-contents {
  font-size: 0.9rem;
  margin-bottom: 3rem;
  counter-reset: toc-chapter;
}

#table-of-contents h2::before {
  content: none;
}

/* number ONLY top-level TOC entries */
#text-table-of-contents > ul > li {
  position: relative;
  padding-left: 2.5em;
}

#text-table-of-contents > ul > li::before {
  counter-increment: toc-chapter;
  content: counter(toc-chapter);
  position: absolute;
  left: 0;
  width: 2em;
  text-align: right;
  color: var(--muted);
}

/* no numbering for lower levels */
#text-table-of-contents ul ul li::before {
  content: none;
}

#table-of-contents ul {
  list-style: none;
  padding-left: 0;
}

#table-of-contents li {
  margin-bottom: 0.3em;
}

/* Indentation reflects structure ONLY */
#table-of-contents ul ul {
  padding-left: .7em;
}

/* ---------- TOC — Right Drawer (Desktop & Mobile) ---------- */
@media screen and (min-width: 1024px) {
  #table-of-contents {
    position: fixed;
    top: 6rem;
    right: 2rem;
    width: 250px;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    font-size: 0.75rem;
    border-left: 2px solid var(--table-alt);
    padding-left: 1rem;
    border-radius: 8px;
    background: var(--bg);
  }
  #content { padding-right: 20px; }
}

@media screen and (max-width: 1023px) {
  #table-of-contents {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    z-index: 1000;
    padding: 2rem;
    overflow-y: auto;
  }
  #table-of-contents.active {
    display: block;
    animation: slideIn 0.3s ease forwards;
  }
  @keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
}

#table-of-contents,
#table-of-contents a,
h1, h2, h3 {
  text-transform: none !important;
}


/* =========================================================
   11. LINKS
   ========================================================= */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* =========================================================
   12. CODE BLOCKS (inline + pre)
   ========================================================= */
/* ---------- Inline code ---------- */
code {
  background: var(--code-bg);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  padding: 0.1em 0.3em;
}

/* ---------- Code blocks ---------- */
pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-left: 2px dotted var(--accent);
  padding: 0.6em;
  margin: 1.5em 0;
  line-height: 1.35;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  overflow-x: auto;
  border-radius: 0px;
}

pre.src {
  position: relative;
  overflow: visible;
}

pre.src::before {
  position: absolute;
  left: -8em;
  width: 7em;
  top: 0;
  text-align: right;
  font-variant: small-caps;
  background: var(--bg);
  color: var(--muted);
  font-family: "Inter", sans-serif;
  font-weight: 400;
}


/* =========================================================
   13. MARGIN NOTES
   ========================================================= */
aside,
span.note {
  position: absolute;
  left: -24em;
  width: 15em;
  font-size: 0.8em;
  color: var(--muted);
  line-height: 1.4;
}


/* =========================================================
   14. LISTS & DESCRIPTION LISTS
   ========================================================= */
/* Tighten list indentation */
ul, ol {
  padding-left: 1.2em; /* Just enough space for the bullet */
  margin-left: 0;
}

/* Style the bullets/numbers themselves */
ul li::marker,
ol li::marker {
  color: var(--muted); /* Or any specific muted color like #666 */
}

/* Style the text content of the list items
 * ul li,
 * ol li {
 *  color: #333;  Or your default text color
 * }
 */

/* If you have nested lists or complex items, you might need more specific targeting
 * ul ul li::marker,
 * ol ol li::marker {
 *
 *  color: #999;
 * }
 */

/* Optional: Ensure list items themselves don't have extra margin */
li {
  margin-bottom: 0.2em;
}

/* Fix Description Lists ( - =key= :: Value ) */
dl {
  display: grid;
  grid-template-columns: max-content auto; /* Key takes min width, Value takes rest */
  gap: 0.5em 1em; /* Vertical gap, Horizontal gap */
  align-items: baseline; /* Aligns text cleanly */
  margin: 1em 0;
}

dt {
  font-weight: bold;
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0; /* Remove default browser margin */
}


/* =========================================================
   15. TABLES
   ========================================================= */
table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  margin-left: 0 !important;
  margin-right: auto !important;
}

tr:nth-child(even) {
  background: var(--table-alt);
}

/* This targets the actual table, the header cells, and the data cells */
table, th, td {
  text-align: left !important;
}

/* Specifically target the header row which is usually the culprit */
thead th {
  text-align: left !important;
}


/* =========================================================
   16. FOOTER
   ========================================================= */
.footer {
  margin: 4rem 0 2rem 0;
  text-align: center;
  font-size: 0.8em;
  color: var(--muted);
}


/* =========================================================
   17. IMAGES
   ========================================================= */
#content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0; /* Gives images some breathing room */
}


/* =========================================================
   18. RESPONSIVE / MOBILE OVERRIDES
   ========================================================= */
/* Keep the TOC (X) close button on mobile only, hidden on desktop */
@media (min-width: 768px) {
  .toc-close {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {

  html {
    font-size: 16px;
  }

  #content {
    /* 1. Remove the desktop margins and 8em padding */
    margin: 1rem auto !important;
    padding-left: 1.2rem !important;  /* Match the right side */
    padding-right: 1.2rem !important; /* Match the left side */

    /* 2. Ensure it takes up the full available width */
    max-width: 100% !important;
    box-sizing: border-box;
  }

  header {
    max-width: 680px;
    margin: 2rem auto 0 auto;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .breadcrumb {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }

  /* 1. Reset H2 (Chapter) positioning */
  h2 {
    position: static; /* Remove the "anchor" behavior */
  }

  h2::before {
    position: static;   /* Put the number back in the text flow */
    display: inline-block; /* Keep "1.1" on the same line as the title */
    text-align: left;  /* Align it to the left like normal text */
    width: auto;
    margin-right: 0.5em;
  }

  /* 2. Reset H3 and H4 (Section numbers) */
  h3, h4 {
    position: static;
  }

  h3::before, h4::before {
    position: static;
    display: inline-block; /* Keep "1.1" on the same line as the title */
    text-align: left;
    width: auto;
    margin-right: 0.5em; /* Add a little space before the title text */
    color: var(--muted);
  }

  /* 3. Adjust spacing for mobile */
  h2, h3, h4 {
    letter-spacing: 0.02em; /* Tighten up spacing slightly for smaller screens */
  }

  /* 2. Fix the Code Blocks */
  pre.src {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1em;
    overflow-x: auto;   /* Ensure code scrolls sideways, not off-screen */
    font-size: 0.8em;   /* Make code text smaller so more fits */
  }

  /* 3. Hide the floating labels on mobile */
  /* Since there's no room on the left of the screen for "LISP" or "ORG" */
  pre.src::before {
    display: none !important;
  }

  /* 5. Ensure images/videos don't overflow the screen */
  img, video {
    max-width: 100%;
    height: auto;
  }
}


/* =========================================================
   19. HEADER CONTROLS & ICON BUTTONS
   ========================================================= */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 1px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Groups all buttons to look identical: minimal, borderless, unicode */
.file-tree-toggle, .search-toggle, .theme-toggle, .toc-toggle, .sidebar-close, .toc-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem; 
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle:hover, .theme-toggle:hover, .toc-toggle:hover, .sidebar-close:hover, .toc-close:hover {
  color: var(--fg);
}

.sidebar-toggle svg, .theme-toggle svg, .toc-toggle svg, .sidebar-close svg, .toc-close svg {
  pointer-events: none;
}


/* =========================================================
   20. DRAWER BACKGROUND & HEADING FIXES
   ========================================================= */
/* Forces drawers to be completely opaque */
#left-sidebar, #table-of-contents {
  background: var(--drawer-bg);
}

/* Strip Chapter Numbers from Drawer Headers */
.sidebar-header h3 {
  position: static;
  margin: 0;
  font-size: 1.1rem;
  color: var(--fg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Kills the "1." numbering before titles */
.sidebar-header h3::before, .sidebar-header h2::before {
  content: none !important;
}

/* Hides the ugly default Org-mode TOC title */
#table-of-contents > h2 {
  display: none !important;
}


/* =========================================================
   21. LEFT SIDEBAR — SEARCH DRAWER
   ========================================= */
#left-sidebar {
  position: fixed;
  top: 0;
  left: -400px; /* Hidden off-screen by default */
  width: 320px;
  height: 100vh;
  border-right: 1px solid var(--muted);
  padding: 2rem 1.5rem;
  overflow-y: auto;
  z-index: 2000;
  transition: left 0.3s ease; /* Slide animation */
  box-sizing: border-box;
}

#left-sidebar.active { left: 0; }

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* --- Search Input & Tags --- */
#sidebar-search {
  width: 100%;
  padding: 10px 15px;
  background: var(--bg);
  border: 1px solid #3d424a;
  color: var(--fg);
  margin-bottom: 1.5rem;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
#sidebar-search:focus { border-color: var(--accent); }

.org-tag {
  display: inline-block;
  background: var(--tag-bg);
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  padding: 2px 8px;
  margin-left: 8px;
  border: 1px solid #3d424a;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-filter {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid #3d424a;
  padding: 2px 5px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
}
.tag-filter:hover, .tag-filter.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* --- Search Results --- */
#sidebar-results { list-style: none; padding: 0; margin-top: 1.5rem; }
#sidebar-results li {
  margin-bottom: 1rem;
  line-height: 1.4;
  border-bottom: 1px solid #3d424a;
  padding-bottom: 0.5rem;
}
#sidebar-results a {
  font-weight: 600;
  display: block;
  color: var(--fg);
  text-decoration: none;
}
#sidebar-results a:hover { color: var(--accent); }


/* =========================================================
   22. SYNTAX HIGHLIGHTING (Emacs htmlize classes)
   ========================================================= */
pre.src {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 1rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
}

.org-keyword { color: var(--syntax-keyword); font-weight: 600; }
.org-string  { color: var(--syntax-string); }
.org-comment,
.org-comment-delimiter {
  color: var(--syntax-comment);
}
.org-type    { color: var(--syntax-var); }
.org-variable-name { color: var(--syntax-number); }
.org-function-name { color: var(--syntax-func); font-weight: 600; }
.org-constant { color: var(--syntax-number); }
.org-builtin { color: var(--syntax-func); }


/* =========================================================
   23. PROJECT CARD
   ========================================================= */
.project-card {
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.project-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent) !important;
}


/* =========================================================
   24. DASHBOARD UI
   ========================================================= */
/* Hide default Org headers for sections */
.dash-section > h2 { margin-bottom: 15px; font-size: 1.1rem; color: var(--muted, #888); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }

/* The Header & Widgets */
.dash-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; border-bottom: 1px solid var(--border, #eaeaea); padding-bottom: 20px; }
.dash-header h1 { margin: 0; font-size: 2rem; font-weight: 700; color: var(--fg, #333); }
.dash-widgets { text-align: right; }
#dash-time { font-size: 2.2rem; font-family: monospace; font-weight: bold; line-height: 1; color: var(--fg, #333); }
#dash-date { font-size: 0.9rem; color: var(--muted, #888); text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }
body.dark #dash-time, body.dark .dash-header h1 { color: #c0caf5; }

/* Turn Emacs lists into CSS Grids */
.grid-cards { display: grid; gap: 15px; padding: 0; list-style: none; margin: 0; }
.grid-cards li { margin: 0; padding: 0; }
.grid-cards li a { display: block; padding: 15px 20px; background: var(--bg-alt, #f9f9f9); border: 1px solid var(--border, #eaeaea); border-radius: 0px; text-decoration: none; color: var(--fg, #333); transition: all 0.2s ease; font-weight: 500; }
body.dark .grid-cards li a { background: #1a1b26; border-color: #24283b; color: #a9b1d6; }
.grid-cards li a:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: var(--fg, #333); }
body.dark .grid-cards li a:hover { border-color: #7aa2f7; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

/* Specific Grid Layouts */
.worlds-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.worlds-grid li a { text-align: center; font-size: 1.1rem; }
.tasks-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tasks-grid li a { padding-left: 20px; border-left: 4px solid #7aa2f7; }
.task-world { display: block; font-size: 0.75rem; text-transform: uppercase; color: var(--muted, #888); margin-bottom: 5px; font-weight: 600; letter-spacing: 0.5px; }

/* The Timeline GUI */
.timeline { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.time-block { display: flex; align-items: stretch; background: var(--bg-alt, #f9f9f9); border-radius: 8px; overflow: hidden; border: 1px solid var(--border, #eaeaea); }
body.dark .time-block { background: #1a1b26; border-color: #24283b; }
.time-block .time { padding: 15px; background: rgba(0,0,0,0.03); font-family: monospace; font-weight: bold; font-size: 1.1rem; min-width: 90px; text-align: right; border-right: 1px solid var(--border, #eaeaea); display: flex; align-items: center; justify-content: flex-end; }
body.dark .time-block .time { background: rgba(0,0,0,0.2); border-right-color: #24283b; color: #7aa2f7; }
.time-block .details { padding: 15px 20px; display: flex; flex-direction: column; justify-content: center; font-size: 1rem; }
.time-world { font-size: 0.75rem; text-transform: uppercase; color: var(--muted, #888); margin-bottom: 3px; font-weight: 600; }


/* =========================================================
   25. DRAWER OVERRIDES (fixed positioning)
   ---------------------------------------------------------
   Fixing Persistent Desktop Drawers — these use !important
   and intentionally win over the base drawer rules above.
   ========================================================= */
/* Left Sidebar */
#left-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 320px !important;
    max-width: 85vw !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
    background: var(--bg, #fff) !important;
    border-right: 1px solid var(--border, #eaeaea) !important;
    display: flex !important;
    flex-direction: column !important;
}
#left-sidebar.active {
    transform: translateX(0) !important;
}

/* Right Drawers (TOC & Agenda) */
#table-of-contents, #dashboard-right-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    height: 100vh !important;
    width: 350px !important;
    max-width: 85vw !important;
    transform: translateX(100%) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
    background: var(--bg, #fff) !important;
    border-left: 1px solid var(--border, #eaeaea) !important;
    overflow-y: auto !important;
    padding: 20px !important;
    display: block !important;
}
#table-of-contents.active, #dashboard-right-drawer.active {
    transform: translateX(0) !important;
}
body.dark #left-sidebar, body.dark #table-of-contents, body.dark #dashboard-right-drawer {
    background: #1a1b26 !important;
    border-color: #24283b !important;
}

/* Context Switcher UI */
.world-switcher { padding: 15px; border-bottom: 1px solid var(--border, #eaeaea); }
.world-switcher select { width: 100%; padding: 8px; border-radius: 6px; background: var(--bg-alt, #f9f9f9); border: 1px solid var(--border, #eaeaea); color: var(--fg, #333); font-weight: bold; outline: none; cursor: pointer; }
body.dark .world-switcher select { background: #24283b; border-color: #333; color: #a9b1d6; }


/* =========================================================
   26. AGENDA (RIGHT DRAWER)
   ========================================================= */
.agenda-header { font-size: 1.5rem; font-weight: bold; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid var(--border); color: var(--fg); }

/* NOTE: this .timeline rule intentionally differs from the Dashboard
   .timeline rule above (gap/position) — kept separate rather than merged
   so the later declaration still overrides it in the same cascade order
   as the original file. */
.timeline { display: flex; flex-direction: column; gap: 15px; position: relative; }

/* Vertical line connecting events */
.timeline::before { content: ''; position: absolute; left: 65px; top: 10px; bottom: 10px; width: 2px; background: var(--border, #eaeaea); z-index: 1; }
body.dark .timeline::before { background: #24283b; }

.agenda-card { display: flex; gap: 15px; position: relative; z-index: 2; align-items: stretch; }
.agenda-time { width: 50px; font-size: 0.85rem; font-weight: bold; color: var(--muted); text-align: right; padding-top: 5px; flex-shrink: 0; }

.agenda-details { background: var(--bg-alt, #f9f9f9); border: 1px solid var(--border); padding: 12px 15px; border-radius: 0px; flex-grow: 1; display: flex; flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
body.dark .agenda-details { background: #1a1b26; border-color: #333; }

.agenda-world { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #7aa2f7; font-weight: bold; margin-bottom: 4px; }
.agenda-task { font-size: 0.95rem; color: var(--fg); font-weight: 500; }

/* The "Now" Indicator */
.agenda-now { display: flex; align-items: center; gap: 15px; position: relative; z-index: 2; margin: 5px 0; }
.agenda-now .agenda-time { color: #f7768e; } /* Red for current time */
.now-line { height: 2px; background: #f7768e; flex-grow: 1; position: relative; }
.now-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #f7768e; }


/* =======================================================
   DASHBOARD WIDGETS (Core Directive & Infra Grid)
======================================================= */
/* Core Directive */
.core-directive { 
    text-align: center; 
    font-family: monospace; 
    font-size: 1rem; 
    color: grey; 
    border: 1.5px dashed grey; 
    background: white;
    padding: 15px; 
    margin-bottom: 20px; 
    border-radius: 0px; 
    font-weight: bold; 
    letter-spacing: 1px; 
}
body.dark .core-directive {
    background: rgba(247, 118, 142, 0.1);
}

/* Infrastructure Grid */
.infra-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); 
    gap: 12px; 
    margin-bottom: 40px; 
}
.infra-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    background: var(--bg-alt, #f9f9f9); 
    border: 1px solid var(--border, #eaeaea); 
    padding: 12px 15px; 
    border-radius: 0px; 
    text-decoration: none; 
    color: var(--fg, #333); 
    font-weight: 600; 
    font-size: 0.95rem; 
    transition: all 0.2s ease; 
}
.infra-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    border-color: var(--fg, #333); 
}
body.dark .infra-btn { 
    background: #1a1b26; 
    border-color: #24283b; 
    color: #a9b1d6; 
}
body.dark .infra-btn:hover { 
    border-color: #7aa2f7; 
    color: #7aa2f7; 
    background: #24283b;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
}


/* =======================================================
   PULSE & TIMER UI
======================================================= */
/* The Pulse Indicator on World Cards */
.world-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.world-pulse.hot {
    background-color: #9ece6a; /* Green for active */
    animation: pulse 2s infinite;
}
.world-pulse.dormant {
    background-color: var(--border, #eaeaea);
}
body.dark .world-pulse.dormant { background-color: #333; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(158, 206, 106, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(158, 206, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(158, 206, 106, 0); }
}

/* Timer State */
#dash-time.timer-active {
    color: #f7768e !important;
    animation: timerPulse 1s alternate infinite;
}
@keyframes timerPulse {
    from { opacity: 1; }
    to { opacity: 0.8; }
}

/* Style command buttons in the search modal */
.command-btn .res-title { color: #f7768e; font-weight: bold; }



/* =======================================================
   LEAN WORLD CARDS & PASTEL BLUE PULSE
======================================================= */
/* Setup variable for the blue pulse animation */
:root { --pulse-color: rgba(14, 165, 233, 0.7); }
body.dark { --pulse-color: rgba(56, 189, 248, 0.7); }

/* Make the World cards smaller and more compact */
.worlds-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 5px; }
.worlds-grid li a { 
    padding: 7px 7px; 
    font-size: 0.9rem; 
    text-align: left; 
    display: flex; 
    align-items: center; 
    border-radius: 0px; 
}

/* The Pastel Blue "Hot" World Card */
.worlds-grid li .hot-world a {
    background-color: #f0f9ff;
    border-color: #bae6fd;
    color: #0284c7;
    font-weight: 600;
}
body.dark .worlds-grid li .hot-world a {
    background-color: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

/* The Pulsing Dot inside the Hot Card */
.worlds-grid li .hot-world a::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0ea5e9;
    margin-right: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 var(--pulse-color);
    animation: pulse-blue 2s infinite;
}
body.dark .worlds-grid li .hot-world a::before {
    background-color: #38bdf8;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 var(--pulse-color); }
    70% { box-shadow: 0 0 0 5px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Timer State for the Dashboard Clock */
#dash-time.timer-active {
    color: #f7768e !important;
    animation: timerPulse 1s alternate infinite;
}
@keyframes timerPulse { from { opacity: 1; } to { opacity: 0.8; } }
.command-btn .res-title { color: #f7768e; font-weight: bold; }


/* =======================================================
   CLEAN TAG TREE UI
======================================================= */
.tag-tree-node { margin-bottom: 6px; }

/* The Tag Button */
.tag-tree-node summary { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 8px 12px 5px 5px; 
    background: var(--bg-alt, #f9f9f9); 
    border: 1px solid var(--border, #eaeaea); 
    border-radius: 0px; 
    cursor: pointer; 
    font-size: 0.85rem; 
    font-weight: 600; 
    color: var(--fg, #333); 
    list-style: none; /* Hides default triangle */
    transition: all 0.2s ease;
}
body.dark .tag-tree-node summary { background: #1a1b26; border-color: #24283b; color: #a9b1d6; }
.tag-tree-node summary:hover { border-color: #7aa2f7; }

/* Hides WebKit default triangle */
.tag-tree-node summary::-webkit-details-marker { display: none; }

/* Inner flexboxes for layout */
.tag-label { display: flex; align-items: center; gap: 8px; }
.tag-name { text-transform: capitalize; }

/* The Count Pill */
.tag-count { 
    font-size: 0.7rem; 
    background: rgba(122, 162, 247, 0.15); 
    color: #7aa2f7; 
    padding: 2px 8px; 
    border-radius: 0px; 
    font-weight: bold; 
}

/* Animated Chevron */
.tag-chevron { transition: transform 0.2s ease; color: var(--muted, #888); }
.tag-tree-node[open] .tag-chevron { transform: rotate(90deg); color: #7aa2f7; }
.tag-tree-node[open] summary { border-color: #7aa2f7; }

/* Note Links inside the Accordion */
.tag-tree-node ul { 
    margin: 4px 0 12px 10px; 
    padding-left: 10px; 
    border-left: 2px solid var(--border, #eaeaea); 
    list-style: none; 
}
body.dark .tag-tree-node ul { border-left-color: #24283b; }
.tag-tree-node ul li { margin-bottom: 2px; }
.tag-tree-node ul li a { 
    display: block; 
    padding: 6px 10px; 
    font-size: 0.6rem; 
    color: var(--fg, #555); 
    text-decoration: none; 
    border-radius: 4px; 
    transition: background 0.15s, color 0.15s; 
}
body.dark .tag-tree-node ul li a { color: #9aa5ce; }
.tag-tree-node ul li a:hover { background: rgba(122, 162, 247, 0.1); color: #7aa2f7; }