:root {
  --base-font-size: 1em; /* Default font size */
  --background-color: #ffffff;
  --text-color: #000000;
  --highlight-color: greenyellow;
  --unnumbered-highlight-color: tomato;
  --footer-bg-color: #d1d1d1;
  --footer-text-color: #333;
  --link-color: #0645ad;        /* standard blue for light mode */
  --link-hover-color: #007BFF;  /* darker blue on hover */
  --border-color: #ddd;
  --code-bg: #EEE;
  --code-text-color: #000;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  -webkit-tap-highlight-color: transparent;
}

html {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    background: var(--background-color);
    color: var(--text-color);
  }
  
  /* Dark theme overrides */
body.dark-mode {
  --background-color: #2a2a2a;
  --text-color: #f0f0f0;
  --highlight-color: #517d20;
  --unnumbered-highlight-color: #954329;
  --footer-bg-color: #3f3f3f;
  --footer-text-color: #ddd;
  --link-color: #89b4fa;        /* soft blue for dark background */
  --link-hover-color: #007BFF;  /* white on hover, optional */
  --border-color: #555;
  --code-bg: #3a3a3a;
  --code-text-color: #f0f0f0;
}

select {
    width: 160px;
}

  header {
    font-size: 24px;
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1.5em;
  }

  /* In Capacitor native iOS/Android, push the top header below the notch/status-bar */
  .cap-native header {
    padding-top: calc(1em + var(--safe-top));
  }

  .dmr-header {
    padding-left: 0.5em;
  }
  

  nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 230px;
    height: 100vh;
    border-right: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--text-color);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-link {
    display: block;
  }

  
  @media (max-width: 500px) {
    /* Small screens (often phones/landscape):
       - The nav should NOT be fixed/sticky; the page should scroll past it.
       - Only make the link list scrollable if it would otherwise take over the whole screen. */

    nav {
      position: static;        /* allow the page to scroll past the nav */
      width: 100%;
      height: 100vh;
      z-index: auto;
      background: var(--background-color);
      border-right: none;
      overflow: visible;       /* don't trap scrolling at the nav level */
    }


    /* Normal header (not sticky) */
    #navHeader {
      position: static;
      background: var(--background-color);
      word-break: keep-all;
    }

    /* Default on small screens: the TOC is part of the normal page flow (no internal scrolling).
       Users can scroll the page right past the links, like a normal document. */
    .nav-link-set {
      max-height: none;
      overflow: visible;
      border-bottom: none;
    }

    /* Keep the same vertical-stacked look */
    .nav-link {
      display: block;
      padding-top: 1em;
      padding-bottom: 1em;
      border-right: none;
    }

    main {
      margin: 0 !important;
      padding: 1.5em;
    }

    .dmr-header {
      line-height: 1;
    }
  }
  
  /* On short screens (typically phones in landscape), cap the TOC height and scroll the link list */
  @media (max-width: 500px) and (orientation: landscape) {
    .nav-link-set {
      max-height: 45vh; /* tweak: 40–60vh depending on preference */
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      border-bottom: 1px solid var(--border-color);
    }
  }
  
  /* Native app landscape safe-area breathing room (applies even when the desktop/sidebar layout is in use) */
  @media (orientation: landscape) {
    .cap-native main {
      padding-right: calc(1.5em + var(--safe-right));
      padding-left: calc(1.5em + var(--safe-left));
    }

    .cap-native nav {
      /* Keep the NAV BOX at the physical left edge so its background/border reach the edge */
      left: 0;

      /* Add the safe-area on top of the nav width so the CONTENT doesn't get squeezed */
      width: calc(230px + var(--safe-left));

      /* Inset ONLY the content so the notch/safe-area doesn't cover text/controls */
      padding-left: var(--safe-left);
      box-sizing: border-box;

      /* Never allow horizontal scrolling in the nav */
      overflow-x: hidden;
    }
  }
  
  .nav-link {
    color: var(--text-color);
    text-decoration: none;
    border-top: 1px solid var(--border-color);
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
  }
  
  main {
    margin-left: calc(230px + 2em);
    margin-right: 1.5em;
  }

@media (orientation: landscape) {
  .cap-native main {
    margin-left: calc(230px + var(--safe-left) + 2em);
  }
}
  
  .main-section {
    padding-top: 1em;
    padding-bottom: 1em;
  }
  
  p, li {
    line-height: 1.5em;
  }
  
li {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* Keep markers outside content so they don't overlap inline/flex children (Safari quirk) */
li {
  list-style-position: outside;
}

/* Extra gutter in case Safari still crowds the marker area */
ul li {
  padding-left: 0.25em;
}
  
  .mode-label {
    font-weight: bold;
  }
  
  .clicked-word {
    background-color: var(--highlight-color);
    box-sizing: border-box;
    outline: 2px solid #007BFF;
  }
  
  
  .translated {
  background-color: var(--highlight-color);
      box-sizing: border-box;
  }
  
  .no-direct {
    background-color: var(--unnumbered-highlight-color);
      box-sizing: border-box;
      outline: 2px solid #007BFF;
  }
  
  code {
  display: block;
  background-color: var(--code-bg);
  padding: 1em;
  color: var(--code-text-color);
  }

  
  .stacked-text {
    display: flex;
    flex-direction: column;
    align-items: left;
  }
  
  .divider {
    width: 32px;
    border-top: 1px solid;
    margin: 2px 0;
  }
  
  .note {
    font-style: italic;
  }
  
  .caption {
    margin-bottom: 2em;
  }

  
  input[type="range"] {
      width: 50px;
      pointer-events: none;
      transform: translateY(4px);
  }
  
  kbd {
    font-weight: bold;
      padding: 4px 8px;
      background-color: var(--code-bg);
      border-radius: 4px;
      margin-right: 8px;
      color: var(--code-text-color);
  }


  .drop-zone {
  display: inline-block;
  min-width: 5em;
  border: 1px dashed gray;
  text-align: center;
  vertical-align: bottom;
  line-height: 1.3em;
}

/* Theme-neutral base */
.light-circle,
.dark-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid;
  margin-top: 10px;
}

/* Default (light mode) */
body:not(.dark-mode) .light-circle {
  background-color: white;
  border-color: black;
}

body:not(.dark-mode) .dark-circle {
  background-color: black;
  border-color: white;
}

/* Inverted (dark mode) */
body.dark-mode .light-circle {
  background-color: white;
  border-color: black;
}

body.dark-mode .dark-circle {
  background-color: black;
  border-color: white;
}

/* Switch container */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-top: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider track */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.2s;
}

/* Slider knob */
.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

/* Move knob to right when checked */
.switch input:checked + .slider::before {
  transform: translateX(26px);
}

.dark-mode-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: -1px;
  margin-top: -11.5px;
}

.doc-fake-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* Keeps it non-interactive */
  transform: translateY(4px);
  /* Safari: keep the first circle from drifting into the <li> marker gutter */
  margin-left: 0.75em;
}

.doc-fake-toggle input {
  pointer-events: none;
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

@media (orientation: landscape) {
  .cap-native nav .nav-link {
    position: relative;
    border-top: none; /* we'll draw our own full-width line */
  }

  .cap-native nav .nav-link::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--safe-left));
    right: calc(-1 * var(--safe-left));
    top: 0;
    height: 1px;
    background: var(--border-color);
    pointer-events: none;
  }
}