:root{
  /* Darcula-like palette */
  --bg:#2b2b2b;
  --panel:#313335;
  --text:#a9b7c6;
  --gutter:#252526;
  --line-hover: rgba(255,255,255,0.03);
  --accent:#6897bb;
  --keyword:#cc7832; /* def, class, return */
  --builtin:#a9b7c6; /* builtin names */
  --varname:#ffc66d; /* variables and function names */
  --string:#6a8759;
  --number:#9876aa;
  --comment:#808080;
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;

  /* Neon accent colors for clickable items (Home, Projects, Talents)
     Assumption: outline links use href anchors like "#home", "#projects", "#talents".
     If your JS creates links with different hrefs/classes, tell me and I'll adapt selectors.
  */
  --neon-purple: #b400ff; /* neon paars */
  --neon-green:  #39ff14; /* neon groen */
  --light-blue:  #7fe9ff; /* licht blauw */
  --dark-green:  #0b8b3e; /* donker groen (Contact) */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--mono), monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Make editor fill the viewport */
.container{
  height: 100vh;
  max-width: 100%;
  margin: 0;
  padding: 6px;
}

/* Editor layout: left = file, right = outline (like PyCharm) */
.editor{display:grid;grid-template-columns:1fr;gap:6px;align-items:start;height:100%}

/* Make file full height and compact */
.file{position:relative;background:var(--panel);border-radius:6px;padding:8px 10px;display:block;overflow:auto;box-shadow:0 6px 20px rgba(0,0,0,0.45);border:1px solid rgba(0,0,0,0.5);height:100%}

.line{display:flex;gap:10px;padding:2px 6px;align-items:flex-start;transition:background .12s,border-left-color .12s;border-left:4px solid transparent}
.line:hover,.line:focus{background:var(--line-hover);border-left-color:var(--accent)}

.ln{width:48px;color:#63666a;text-align:right;user-select:none;padding-right:8px;flex:0 0 auto;font-size:12px;line-height:18px}
.code{white-space:pre;font-size:13px;line-height:18px;flex:1 1 auto;color:var(--text)}

/* token colors adapted to Python/Darcula */
.token.keyword{ color:var(--keyword); }
.token.builtin{ color:var(--builtin); }
.token.varname{ color:var(--varname); cursor:pointer; text-decoration:none; }
.token.operator{ color:var(--text); opacity:0.9}
.token.string{ color:var(--string); }
.token.number{ color:var(--number); }
.token.comment{ color:var(--comment); font-style:italic; opacity:0.9}

.token.varname:hover { text-decoration:underline; }
.token.varname[role="link"] { -webkit-tap-highlight-color: rgba(255,255,255,0.05); }

/* Outline styles (right column) */
.outline{background:var(--panel);border-radius:6px;padding:10px;border:1px solid rgba(0,0,0,0.5);height:100%;overflow:auto}
.outline h3{margin:0 0 8px 0;color:var(--text);font-size:13px}
.outline a{display:block;color:var(--varname);text-decoration:none;padding:6px 8px;border-radius:4px}
.outline a:hover{background:rgba(255,255,255,0.02)}
.outline a:focus{outline:2px solid rgba(150,200,255,0.12);outline-offset:2px}

/* Neon accent colors for outline anchors (Home, Projects, Talents) */
.outline a[href*="#home"]{ color:var(--neon-purple); box-shadow:0 0 12px rgba(180,0,255,0.12) inset; text-shadow:0 0 8px rgba(180,0,255,0.18); }
.outline a[href*="#home"]:hover{ background:rgba(180,0,255,0.06); }

.outline a[href*="#projects"]{ color:var(--neon-green); box-shadow:0 0 12px rgba(57,255,20,0.08) inset; text-shadow:0 0 8px rgba(57,255,20,0.12); }
.outline a[href*="#projects"]:hover{ background:rgba(57,255,20,0.04); }

.outline a[href*="#talents"]{ color:var(--light-blue); box-shadow:0 0 12px rgba(127,233,255,0.10) inset; text-shadow:0 0 8px rgba(127,233,255,0.14); }
.outline a[href*="#talents"]:hover{ background:rgba(127,233,255,0.04); }

/* Default bright style for clickable varnames (fallback when specific selectors don't match) */
.token.varname[role="link"]{ color:var(--light-blue); text-shadow:0 0 6px rgba(127,233,255,0.25); }

/* Also style clickable varname tokens if they include data-name attributes (optional fallback) */
.token.varname[role="link"][data-name="home"],
.token.varname[role="link"][data-id="home"]{ color:var(--neon-purple); text-shadow:0 0 8px rgba(180,0,255,0.18); }

.token.varname[role="link"][data-name="projects"],
.token.varname[role="link"][data-id="projects"]{ color:var(--neon-green); text-shadow:0 0 8px rgba(57,255,20,0.12); }

.token.varname[role="link"][data-name="talents"],
.token.varname[role="link"][data-id="talents"]{ color:var(--light-blue); text-shadow:0 0 8px rgba(127,233,255,0.14); }

/* highlight focused line */
.line:focus{outline:none;border-left-color:#a0a0a0;background:rgba(104,151,187,0.06)}

/* make tokens inline-block for better positioning */
.token{display:inline-block}

/* clickable whole-line behaviour */
.line.clickable{cursor:pointer}
.line.clickable .code{opacity:1}
.line.clickable:focus{background:rgba(104,151,187,0.08)}

/* underline only for varname text, not entire line */
.token.varname{text-decoration:none}
.token.varname:hover{text-decoration:underline}

/* Hide the right outline/sidebar for now (user requested removing sidebar content)
   If you want to restore it later remove these overrides. */
.outline{ display:none !important; }
#outline-toggle{ display:none !important; }

/* Increase glow intensity for neon accents */
.outline a[href*="#home"],
.token.varname[role="link"][data-name="home"],
.token.varname.decl-home{ color:var(--neon-purple); box-shadow:0 0 28px rgba(180,0,255,0.22) inset; text-shadow:0 0 12px rgba(180,0,255,0.28); }
.outline a[href*="#home"]:hover, .token.varname.decl-home:hover{ background:rgba(180,0,255,0.10); }

.outline a[href*="#projects"],
.token.varname[role="link"][data-name="projects"],
.token.varname.decl-projects{ color:var(--neon-green); box-shadow:0 0 28px rgba(57,255,20,0.18) inset; text-shadow:0 0 12px rgba(57,255,20,0.22); }
.outline a[href*="#projects"]:hover, .token.varname.decl-projects:hover{ background:rgba(57,255,20,0.08); }

.outline a[href*="#talents"],
.token.varname[role="link"][data-name="talents"],
.token.varname.decl-talents{ color:var(--light-blue); box-shadow:0 0 28px rgba(127,233,255,0.18) inset; text-shadow:0 0 12px rgba(127,233,255,0.22); }
.outline a[href*="#talents"]:hover, .token.varname.decl-talents:hover{ background:rgba(127,233,255,0.08); }

/* Specific token styles requested:
   - class Home -> light blue
   - __init__ -> purple
   - keyword def -> neon green
   - Projects, Talents, Apps -> neon green
   - Contact -> dark green
*/
.token.varname.decl-home{ color:var(--light-blue); text-shadow:0 0 14px rgba(127,233,255,0.36); }
.token.varname.decl-__init__{ color:var(--neon-purple); text-shadow:0 0 14px rgba(180,0,255,0.36); }

.token.varname.decl-projects,
.token.varname.decl-talents,
.token.varname.decl-apps{ color:var(--neon-green); text-shadow:0 0 14px rgba(57,255,20,0.30); }

.token.varname.decl-contact{ color:var(--dark-green); text-shadow:0 0 10px rgba(11,139,62,0.22); }

/* Prism branch: tokens where the keyword text is 'def' will get this class */
.token.keyword.keyword-def{ color:var(--neon-green); text-shadow:0 0 12px rgba(57,255,20,0.30); }

/* Increase glow intensity for neon accents (focus/hover) */
.token.varname.decl-home:focus, .token.varname.decl-home:hover,
.token.varname.decl-projects:focus, .token.varname.decl-projects:hover,
.token.varname.decl-talents:focus, .token.varname.decl-talents:hover,
.token.varname.decl-apps:focus, .token.varname.decl-apps:hover,
.token.varname.decl-__init__:focus, .token.varname.decl-__init__:hover,
.token.varname.decl-contact:focus, .token.varname.decl-contact:hover,
.token.keyword.keyword-def:focus, .token.keyword.keyword-def:hover{
  outline:none;
  box-shadow:0 0 48px rgba(120,180,255,0.14);
}

/* ensure outline toggle is visible on small screens */
#outline-toggle{display:none;position:fixed;right:12px;bottom:12px;background:var(--panel);color:var(--text);border:1px solid rgba(255,255,255,0.03);padding:8px;border-radius:8px;z-index:80}
@media (max-width:820px){#outline-toggle{display:block}}

/* responsive: on small screens stack outline under a toggle */
@media (max-width:820px){
  .editor{grid-template-columns:1fr;}
  .outline{position:fixed;right:8px;top:8px;width:60px;height:60px;border-radius:50%;padding:8px;overflow:hidden;background:var(--panel);z-index:60}
  .outline.expanded{width:80%;height:60vh;border-radius:6px;right:8%;top:12vh}
  .ln{display:none}
  .code{font-size:14px}
}

/* Collapsible file-view / data-panel behavior */

/* Inline collapsible block styling: show a small header with a caret */
.code-block { border-left:3px solid rgba(255,255,255,0.03); margin:6px 0; /* remove padding-left so gutter aligns */ padding-left:0; }
.code-block .block-header{ display:flex; align-items:center; gap:8px; color:var(--text); font-size:13px }
.code-block .caret{ display:inline-block; width:18px; text-align:center; cursor:pointer; color:#999 }

/* Make header clickable and caret visible */
.code-block .block-header{ cursor:pointer; user-select:none; padding:6px 0; }
.code-block .caret{ color:#bbb; font-weight:700; }
.code-block .sig{ color:var(--text); opacity:0.95; }

/* ensure each code line renders on its own row inside block body */
.code-line{ display:block; padding:0 6px; }

/* block body spacing and CSV content styles */
.block-body{ /* move the indentation to the block body, not the block container */ padding-left:12px; }
.block-body .csv-list{ margin:8px 0 0 0; padding-left:16px; color:var(--text); }
.block-body .csv-list li{ margin:6px 0; }
.block-body .csv-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.block-body .csv-table th, .block-body .csv-table td{ padding:6px 8px; border-bottom:1px solid rgba(255,255,255,0.03); font-family:var(--mono), monospace; font-size:13px }

/* Matrix representation styling */
.csv-matrix{ margin-top:10px; background: rgba(0,0,0,0.06); padding:10px; border-radius:6px; color:var(--text); font-family:var(--mono), monospace; font-size:13px; white-space:pre; overflow:auto; }

.csv-container{ display:flex; flex-direction:column; gap:8px; }

/* Remove the data-panel/table styling */
.data-panel{ display:none; }
.data-table{ display:none; }
#data-nav{ display:none; }

/* CodeMirror ghost completion (inline) */
.cm-ghostCompletion{
  color: rgba(200, 210, 225, 0.45);
  pointer-events: none;
}

/* Ensure file link text uses the light-blue accent */
.cm-content .cm-linkToken,
.cm-linkToken{
  color: var(--light-blue) !important;
  text-decoration-color: var(--light-blue);
}

/* Web links in light pink */
.cm-content .cm-webLinkToken,
.cm-webLinkToken{
  color: #ffbcd9 !important;
  text-decoration: underline;
  text-decoration-color: #ffbcd9;
  font-style: italic;
}

/* Override nested token colors inside link spans */
.cm-linkToken *,
.cm-webLinkToken *{
  color: inherit !important;
}

/* Override same-span highlight classes inside link tokens */
.cm-linkToken.cm-variableName,
.cm-linkToken.cm-string,
.cm-linkToken.cm-number,
.cm-linkToken.cm-operator,
.cm-linkToken.cm-punctuation,
.cm-linkToken.cm-propertyName,
.cm-linkToken.cm-atom,
.cm-linkToken.cm-typeName,
.cm-linkToken.cm-comment{
  color: var(--light-blue) !important;
}

/* Themed scrollbar */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 140, 255, 0.55) rgba(49, 51, 53, 0.9);
}

*::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track{
  background: rgba(49, 51, 53, 0.9);
}

*::-webkit-scrollbar-thumb{
  background: rgba(120, 140, 255, 0.55);
  border-radius: 8px;
  border: 2px solid rgba(49, 51, 53, 0.9);
}

*::-webkit-scrollbar-thumb:hover{
  background: rgba(127, 233, 255, 0.7);
}

@media (max-width: 640px){
  .code{
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .cm-content,
  .cm-line{
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Theme variables
   - Default (:root) stays NeonDarcula-compatible.
   - Live switching uses: document.documentElement.dataset.theme
     Values: "neondarcula" | "lightdarcula"
*/
html[data-theme="neondarcula"]{
  --bg:#2b2b2b;
  --panel:#313335;
  --text:#a9b7c6;
  --gutter:#252526;
  --line-hover: rgba(255,255,255,0.03);
  --accent:#6897bb;
  --keyword:#cc7832;
  --builtin:#a9b7c6;
  --varname:#ffc66d;
  --string:#6a8759;
  --number:#9876aa;
  --comment:#808080;

  --neon-purple: #b400ff;
  --neon-green: #39ff14;
  --light-blue: #7fe9ff;
  --dark-green: #0b8b3e;
}

html[data-theme="lightdarcula"]{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#1f2328;
  --gutter:#eef0f4;
  --line-hover: rgba(0,0,0,0.04);
  --accent:#0969da;

  /* Syntax-ish */
  --keyword:#b62324;
  --builtin:#1f2328;
  --varname:#8250df;
  --string:#1a7f37;
  --number:#0550ae;
  --comment:#6e7781;

  /* Accents (still "neon", just readable on light bg) */
  --neon-purple:#8250df;
  --neon-green:#1a7f37;
  --light-blue:#0969da;
  --dark-green:#116329;
}

html[data-theme="cyberpunk"]{
  --bg:#0b0715;
  --panel:#120a24;
  --text:#f2e7ff;
  --gutter:#0a0614;
  --line-hover: rgba(255,255,255,0.04);
  --accent:#00f5ff;

  --keyword:#ff2bd6;
  --builtin:#c9b9ff;
  --varname:#00f5ff;
  --string:#39ff14;
  --number:#ffd454;
  --comment:#8b7bbf;

  --neon-purple:#ff2bd6;
  --neon-green:#39ff14;
  --light-blue:#00f5ff;
  --dark-green:#00c853;
}

html[data-theme="greenterminal"]{
  --bg:#050b06;
  --panel:#050b06;
  --text:#b6ffb6;
  --gutter:#030703;
  --line-hover: rgba(182,255,182,0.08);
  --accent:#56ff56;

  --keyword:#56ff56;
  --builtin:#b6ffb6;
  --varname:#56ff56;
  --string:#b6ffb6;
  --number:#56ff56;
  --comment:#5aa85a;

  --neon-purple:#56ff56;
  --neon-green:#56ff56;
  --light-blue:#56ff56;
  --dark-green:#56ff56;
}

html[data-theme="amberterminal"]{
  --bg:#0b0700;
  --panel:#0b0700;
  --text:#ffd28a;
  --gutter:#070400;
  --line-hover: rgba(255,210,138,0.10);
  --accent:#ffb000;

  --keyword:#ffb000;
  --builtin:#ffd28a;
  --varname:#ffcc66;
  --string:#ffe0b0;
  --number:#ffb000;
  --comment:#b38943;

  --neon-purple:#ffb000;
  --neon-green:#ffb000;
  --light-blue:#ffb000;
  --dark-green:#ffb000;
}