@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

/* ===== 0. Palette (global sections) ===== */
:root {
  /* Colors */
  --color-bg: #fff0e7;
  --color-text: #680000;
  --color-accent: #4a4043;       /* shadows/borders */
  --color-highlight: rgba(104, 0, 0, 0.25);    /* focus/hover highlight */
  --color-link-glow: #680000;    /* h1/link text-shadow */
  --color-code-glow: #5a8f0b;    /* code/pre text-shadow */
  --color-table-border: #680000;
  --color-placeholder: #7a5a28;
  --color-scrollbar-thumb: maroon;
  --color-scrollbar-track: transparent;

  --color-math-code-bg: rgba(110, 19, 19, 0.08);
  --color-quote-bg: rgba(110, 19, 19, 0.08);

  /* Burger/TOC specifics */
  --color-burger-hidden: #0e2431;

  /* Typography & layout */
  --verso-structure-font-family: 'Inconsolata';
  --verso-text-font-family: 'Inconsolata';
  --verso-code-font-family: 'Inconsolata';

  --verso-content-max-width: 100%;
  --verso-font-size: 13px;
  --verso-mobile-font-size: 13px;

  --verso-header-height: 3.25rem;
  --verso-logo-height: var(--verso-header-height);

  --verso-toc-transition-time: 0.30s;
  --verso-toc-width: 30em;
  --search-bar-width: 26vw;

  /* ===== 1. Aliases to preserve existing contract ===== */
  --verso-toc-background-color: var(--color-bg);
  --verso-text-color: var(--color-text);
  --verso-selected-color: var(--color-highlight);

  --verso-burger-toc-visible-shadow-color: var(--color-bg);
  --verso-burger-toc-hidden-color: var(--color-burger-hidden);
  --verso-burger-toc-hidden-shadow-color: var(--color-bg);
}

@media (max-width: 700px) {
  :root { --search-bar-width: 50vw; }
}

/* ===== 2. Base surfaces / globals ===== */
html {
  background-color: var(--color-bg);
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

.katex-html { display: none; }

/* Shared background for repeated elements */
html,
header,
nav#toc,
main,
#search-wrapper,
#search-wrapper .group,
#search-wrapper .combobox,
#search-wrapper .combobox .cb_edit,
#search-wrapper .combobox-list,
#search-wrapper .group .cb_edit,
div#search-wrapper,
div#cb1-input.cb_edit {
  background-color: var(--color-bg);
}

/* Header / TOC shells */
header,
nav#toc {
  box-shadow: 0 0px 6px var(--color-accent);
}

/* Headings with shared styling */
header h1,
div.content-wrapper h1 {
  text-shadow: 0 0 0.8px var(--color-link-glow);
  color: var(--verso-text-color);
}

/* Inline math/code surfaces */
math,
code,
pre {
  background-color: var(--color-math-code-bg);
  padding: 3px;
}

/* Blockquote surface */
blockquote {
  background-color: var(--color-quote-bg);
  padding: 3px;
}

/* Links & code/pre text coloring/shadows */
main a {
  text-decoration: none;
  text-shadow: 0 0 0.8px var(--color-link-glow);
  color: var(--verso-text-color);
  padding: 3px;
}

main code,
main pre {
  text-decoration: none;
  text-shadow: 0 0 0.8px var(--color-code-glow);
  color: var(--verso-text-color);
}

a:hover {
  text-shadow: none;
  text-decoration: underline;
}

/* TOC text and code/pre normalizations */
#toc {
  font-size: 12px;
  word-break: break-word;
  white-space: normal;
  overflow: auto;
  overflow-wrap: anywhere;
}

#toc code,
#toc pre {
  background-color: transparent;
  padding: 0;
}

/* Tables */
main table td {
  border: 1px dotted var(--color-table-border);
}

td.num { min-width: 2em; }

/* Hide in-page ToC and heading */
main h2:has(+ ol.section-toc),
main ol.section-toc { display: none !important; }

/* Images */
.headshot img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ===== 3. Search widget (keeps specificity/!important where needed) ===== */
#search-wrapper {
  background-color: var(--color-bg) !important;
  color: var(--color-accent) !important; /* drives currentColor borders */
  margin: 1em;
  font-size: 1em;
}

#search-wrapper .combobox .cb_edit {
  background-color: var(--color-bg) !important;
  color: var(--verso-text-color) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 6px !important;
  outline: none !important;
}

#search-wrapper .combobox .group.focus .cb_edit,
#search-wrapper .combobox .group .cb_edit:hover {
  background-color: var(--verso-selected-color) !important; /* focus/hover */
  outline: none !important;
}

#search-wrapper ul[role="listbox"] {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-accent) !important;
}

/* Placeholder tint */
#search-wrapper .cb_edit:empty:before {
  color: var(--color-placeholder) !important;
}

/* Optional: make listbox/groups explicit (already covered by shared bg) */
#search-wrapper .group,
#search-wrapper .combobox-list { background-color: var(--color-bg); }







#theme-toggle-wrap {
  display: flex;
  justify-content: center;
  padding: 1em;
  margin: 1em;
}

/* === Accessible, visually-hidden checkbox (keeps focus/AT) === */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;   /* tweak to taste */
  height: 28px;  /* tweak to taste */
}
.switch > input {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden; white-space: nowrap;
}

/* === Slider skin === */
.slider {
  position: absolute; inset: 0;
  cursor: pointer;
  background: var(--toggle-track-off, #c9c9c9);
  transition: background .25s ease, box-shadow .25s ease;
}
.slider::before {
  content: "";
  position: absolute;
  left: 3px; bottom: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Checked/focus states */
.switch > input:checked + .slider {
  background: var(--toggle-track-on, var(--color-link-glow));
}
.switch > input:focus-visible + .slider {
  box-shadow: 0 0 0 2px var(--color-highlight);
}
.switch > input:checked + .slider::before {
  transform: translateX(24px);
}

/* Rounded variant (matches your example) */
.slider.round { border-radius: 9999px; }

/* Reduced motion courtesy */
@media (prefers-reduced-motion: reduce) {
  .slider, .slider::before { transition: none; }
}

/* === DARK THEME OVERRIDES (pure CSS, via :has)  */
html:has(#theme-toggle:checked) {
  /* Colors — tuned to keep your warm palette, just darkened */
  color: white;
  --color-bg:           #635353;   /* very dark, warm-neutral */
  --color-text:         #fdfdfd;   /* lightened red text */
  --color-accent:       #f1b8c7;   /* deeper accent */
  --color-highlight:    #b75c19;   /* subtle focus/hover bg */
  --color-link-glow:    #ff7585;   /* brighter link halo */
  --color-code-glow:    #192b03;   /* brighter code halo */
  --color-table-border: #d1645e;
  --color-placeholder:  #c8a36a;
  --color-scrollbar-thumb: #dda6a6;
  --color-scrollbar-track: transparent;

  --color-math-code-bg: rgba(173,216,230,0.12);
  --color-quote-bg:     rgba(255,171,171,0.16);

  --verso-code-color: #e2d1d1;
  --verso-code-keyword-color: #92b785;

  --toggle-track-off: #2fba70;
  --toggle-track-on:  #ff7585;

  --verso-toc-text-color: white;
}


html:has(#theme-toggle:checked) a {
  color: #f5cccc;
}


.left-text {
  float: left;
  padding: 1em;
  font-family: 'Inconsolata';
}

.right-text {
  float: right;
  text-align: right;
  padding: 1em;
  font-family: 'Inconsolata';
}